miyuchiq music player gen 1

MusicPlayer/miyuchiq/generation 1/index.html

@@ -0,0 +1,10 @@
+<div id="widget">
+    <div id="player">
+        <img id="background_img">
+        <div class="meta">
+            <a id="album"></a>
+            <a id="title"></a>
+            <a id="artist"></a>
+        </div>
+    </div>
+</div>

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();

MusicPlayer/miyuchiq/generation 1/style.css

@@ -0,0 +1,66 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+
+#widget {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden
+}
+
+#widget.active {
+    visibility: visible
+}
+
+#player {
+    position: relative;
+    display: inline-flex;
+    width: 800px;
+    height: 230px;
+    overflow: hidden;
+    border-radius: 30px;
+    margin-inline: 30px;
+    color: #fff;
+    font-family: "Nunito", sans-serif;
+    opacity: 0;
+    background-color: #242424;
+    transition: opacity 350ms ease-in-out
+}
+
+#player.active {
+    opacity: 1
+}
+
+#player #background_img {
+    height: 100%;
+    border-radius: 30px;
+}
+
+#player .meta {
+    display: flex;
+    flex-direction: column;
+    width: 520px;
+    margin: auto;
+    margin-left: 30px;
+}
+
+#player .meta a {
+    word-break: keep-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+#player #album {
+    font-size: 32px;
+    color: #E47D7D;
+}
+
+#player #title {
+    font-size: 42px;
+    font-weight: 900;
+}
+
+#player #artist {
+    font-size: 40px;
+    opacity: .6;
+}