basic impl.; no websockets yet!

public/main.js

@@ -0,0 +1,39 @@
+import Stateful from './silver.min.js';
+
+const musicMeta = new Stateful({
+    artworkURL: 'https://arimelody.space/uploads/musicart/free2play.png',
+    title: 'falling asleep - house version',
+    artist: 'ari melody',
+    album: 'free2play',
+});
+
+const elArtwork = document.getElementById('artwork');
+const elTitle = document.getElementById('title');
+const elArtistAlbum = document.getElementById('artist-album');
+const elMetadata = document.getElementById('metadata');
+
+function setMetadata(artworkURL, title, artist, album) {
+    musicMeta.set({ artworkURL, title, artist, album });
+}
+
+document.addEventListener('readystatechange', () => {
+    musicMeta.onUpdate(value => {
+        elArtwork.src = value.artworkURL;
+        elTitle.innerText = value.title;
+        elArtistAlbum.innerText = `${value.artist} • ${value.album}`;
+        document.title = `Now playing: ${value.artist} - ${value.title}`;
+        console.log(`Now playing: ${value.artist} - ${value.title}`);
+
+        const maxWidth = elMetadata.getBoundingClientRect().width;
+        elTitle.classList.remove('marquee');
+        elArtistAlbum.classList.remove('marquee');
+        if (elTitle.getBoundingClientRect().width > maxWidth) {
+            elTitle.classList.add('marquee');
+        }
+        if (elArtistAlbum.getBoundingClientRect().width > maxWidth) {
+            elArtistAlbum.classList.add('marquee');
+        }
+    });
+});
+
+window.setMetadata = setMetadata;