Created
May 29, 2020 16:03
-
-
Save exlted/5c9a271ce722a2eca921b38e8d5d3830 to your computer and use it in GitHub Desktop.
Music Overlay
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| font-family: sans-serif; | |
| font-size: larger; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #NowPlaying { | |
| position:absolute; | |
| bottom: 0px; | |
| left: 0px; | |
| } | |
| .Text { | |
| padding: 3px; | |
| transform: translateX(-500px); | |
| transition: transform ease-in 1s; | |
| } | |
| .Song { | |
| background-color: black; | |
| color: white; | |
| transition-delay: .1s; | |
| font-size: initial; | |
| display: block; | |
| width: max-content; | |
| } | |
| .Artist { | |
| background-color: white; | |
| color: black; | |
| border-bottom: 2px solid #45b3e7; | |
| display: block; | |
| width: max-content; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="Music.css"> | |
| </head> | |
| <body> | |
| <div id="NowPlaying"> | |
| <!-- Design code goes here --> | |
| <div class="Artist Text">Test Artist</div> | |
| <div class="Song Text">Test Song</div> | |
| </div> | |
| </body> | |
| </html> | |
| <script src="Music.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class NowPlayingWidget { | |
| constructor(element) { | |
| this.element = element; | |
| for (let i = 0; i < element.children.length; i++) { | |
| let child = element.children[i] | |
| if (child.classList.contains("Song") && ! this.song) { | |
| this.song = child; | |
| } else if (child.classList.contains("Artist") && !this.artist) { | |
| this.artist = child; | |
| } | |
| } | |
| } | |
| Display() { | |
| this.song.style.transform = "translateX(0px)"; | |
| this.artist.style.transform = "translateX(0px)"; | |
| setTimeout(this.Hide.bind(this), 10000); | |
| } | |
| Hide() { | |
| this.song.style.transform = "translateX(-500px)"; | |
| this.artist.style.transform = "translateX(-500px)"; | |
| } | |
| SetSongName(newSong) { | |
| this.song.textContent = newSong; | |
| } | |
| SetArtistName(newArtist) { | |
| this.artist.textContent = newArtist; | |
| } | |
| } | |
| let widgetElements = document.getElementById("NowPlaying"); | |
| let widget = new NowPlayingWidget(widgetElements); | |
| const evtSource = new EventSource("http://localhost:8880/api/query/updates?player=true&trcolumns=%25artist%25%2C%25title%25&playlists=true"); | |
| evtSource.onmessage = function(event) { | |
| if (event.data && event.data !== "{}") { | |
| let columns = JSON.parse(event.data).player.activeItem.columns; | |
| widget.SetSongName(columns[1]); | |
| widget.SetArtistName(columns[0]); | |
| widget.Display(); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This was built entirely for internal use to my stream layout, thus the ugly code and hard references. The main thing you would need to change is in music.js:39, update the URL so it references your beefweb instance properly.