jasondibabbo / se-nowplayingwidget

A custom implementation of a "Now Playing" widget for use on the StreamElements live streaming platform.

Now Playing Widget

This is a custom implementation of a "Now Playing" widget for use on the StreamElements platform. Streamers can use this widget to display information about the songs they're currently listening to for their viewers.

If you're new to the StreamElements platform and/or have any questions about custom widgets, check out this blog post.

Using the widget with StreamElements

First, this version of the widget uses Last.fm's Music Discovery API to provide information about user listening history. In order for the widget to function, you will need to provide your own API key. Last.fm provides instructions on how to request one here.

Once you have an API key, enter it into the corresponding parameter field in the widget. You will also need to similarly provide your Last.fm username in one of the parameter fields.

To use the widget on StreamElements, copy the content of the widget.html|css|js|json files in the dist folder to a custom widget defined in your own custom overlay. Note that there are two different widget.js files: widget.js and widget.min.js. There is no functional difference between these two files. The main reason I've chosen to include the readable JavaScript is just in case you want to do live changes to the JavaScript file without re-transpiling.

Building the widget

This widget is built using TypeScript instead of vanilla JavaScript. Because the StreamElements custom widget interface requires the JavaScript to be submitted in a single file, the transpiled code will need to be bundled. This is achieved using webpack.

If you want to fork the project or clone it and make any changes, building is really simple. Make sure you have the latest version of Node.js installed and install all of the development packages. The table below describes the different NPM scripts you can use. The NPM scripts execute gulp tasks that can be viewed in the gulpfile.js file.

Name	Description
build	Transpiles TypeScript code and bundles the widget into widget.html|css|js|json files in the dist folder.
build:watch	Runs the build script in watch mode. This will rerun the transpile/bundle process whenever changes are detected.
lint	Lints the project to report on best practice patterns in TypeScript code.

Contact

If you have questions about this widget or anything about streaming, feel free to drop by my stream or send me a DM on Twitter.

• Twitch
• Twitter

se-nowplayingwidget's Issues

Implement open/close logic and animations

• Implement a text command for opening/activating and closing/deactivating the widget.
  • The command text should be configurable via the JSON settings
  • The command should listen for moderators or broadcasters if filtering by role is allowed. Otherwise just look for the broadcaster's name
• Implement animations for the opening and closing of the widget

Blurred Art Background Implementation

Utilize the existing art stack class to make an oversized art background for the widget that can hide behind a blurred glass. Make it possible to switch between a solid color and the blurred artwork.

Update the README

README currently references Rollup.JS but we've switched to Webpack.

Add custom art option

Users should be able to opt for a custom image in place of any other album art being show next to tracks playing

Note: This will probably become a little bit of a larger feature change. The widget currently just removes or renders the album art. With this change we'll probably need a more intelligent art component that will choose what you want to show.

Move all widget options into WidgetOptions type

Implement drop shadow for the display art stack

Add intro/outro animations for the widget

The widget should be able to dismiss itself when music is not playing. Configurable as a user setting.

Bonus points: Add a text command to toggle visibility of the widget, in lieu of auto-dismissal

Implement shadows

Implement shadows for the widget body that can be configured through field data.

Don't worry about the artwork shadows. That will likely come as a part of #14. And if not, it'll come after.

Investigate readability of text in scenarios with long track titles

The current behavior of the widget is incorrect for songs that go past the width of the widget. The width of the elements should be contained and truncate with ellipses.

Additionally, if it can be managed, implement the ability for the text to rotate like a ticker in order to read it.

Remove DOM elements that we don't use

The user can specify whether they want to display the artist, album, and track title. Currently we just mark them with a .hidden class but we should probably remove them from the DOM. This also means that we need to update the logic in the widget class to make sure that we don't try to query for these DOM elements if they aren't being used.

Add support for Google Fonts

• Finishing implementing Google Font usage
  • The <style> tag is missing in index.html
• Add parameters for the font weight, font color, and letter spacing