Git Product home page Git Product logo

se-nowplayingwidget's People

Contributors

jasondibabbo avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

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

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

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.

image

image

Update the README

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

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

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.

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.

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.

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.