miyuchiq music player gen 1

MusicPlayer/miyuchiq/generation 1/script.js

@@ -0,0 +1,74 @@
+let widgetNode = document.getElementById('widget');
+let musicPlayerNode = document.getElementById('player');
+let musicPlayerTitleNode = document.getElementById('title');
+let musicPlayerArtistNode = document.getElementById('artist');
+let musicPlayerAlbumNode = document.getElementById('album');
+let musicPlayerBackgroundNode = document.getElementById('background_img');
+let musicPlayerProgress = document.getElementById('progressbar');
+let pausedAt = null;
+let trackDuration = 0;
+let trackProgress = 0;
+let trackEnd = new Date();
+
+window.addEventListener('message', function (event) {
+    let message = event.detail;
+    let data = message.data;
+    widgetNode.classList.add('active');
+
+    if (data == null) {
+        musicPlayerNode.classList.remove('active');
+        return;
+    };
+
+    if (!data.is_playing && !pausedAt) {
+        pausedAt = new Date();
+    };
+
+    if (data.is_playing) {
+        musicPlayerNode.classList.add('active');
+        pausedAt = null;
+    };
+
+    trackDuration = data.track.duration;
+    trackProgress = data.progress;
+    trackEnd = new Date().getTime() + data.track.duration - data.progress;
+
+    musicPlayerTitleNode.innerText = data.track.name;
+    musicPlayerArtistNode.innerText = data.track.artists.join(', ');
+    musicPlayerAlbumNode.innerText = `album: ${data.track.album}`;
+
+    if (musicPlayerBackgroundNode.src != data.track.cover) {
+        musicPlayerBackgroundNode.src = data.track.cover;
+    };
+});
+
+function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+};
+
+async function update() {
+    if (pausedAt && pausedAt.getTime() + 10000 < new Date().getTime()) {
+        player.classList.remove('active');
+
+        await delay(100);
+        return update();
+    };
+
+    var progress;
+    if (pausedAt) {
+        progress = trackProgress / trackDuration * 100;
+    } else {
+        progress = (trackDuration - (trackEnd - new Date().getTime())) / trackDuration * 100;
+    };
+
+    if (progress >= 100) {
+        progress = 100;
+    };
+
+    musicPlayerProgress.style.setProperty('--progress', `${progress}%`);
+
+    await delay(100);
+    update();
+};
+
+update();