Add mini player

diff --git a/static/player.js b/static/player.js
index c879a9769db1b6df233a32cc348be323c72fe2e0..174add73f81ee22bdde5ac2f3e3f25c58d71e068 100644 (file)
--- a/static/player.js
+++ b/static/player.js
@@ -12,6 +12,7 @@ function play(event) {
     }
 
     m_songIndex = m_allSongs.indexOf(songElement);
+    showBigPlayer();
     playCurrentSong();
 }
 
@@ -19,9 +20,6 @@ function playCurrentSong() {
     var song = m_allSongs[m_songIndex];
     var songData = JSON.parse(song.dataset.song);
 
-    var player = document.getElementById("player")
-    player.hidden = false;
-
     var audio = document.getElementById("player-audio");
     audio.pause();
     audio.src = `/song/${songData.userid}/${songData.songid}`;
@@ -72,6 +70,13 @@ function playCurrentSong() {
         }
     }
 
+    // Copy song info to mini player
+    document.getElementById("mini-player-title").textContent = songData.title;
+    document.getElementById("mini-player-title").href = title.href;
+    document.getElementById("mini-player-artist").textContent = songData.username;
+    document.getElementById("mini-player-artist").href = artist.href;
+    document.getElementById("mini-player-collabs").innerHTML = collabs.innerHTML;
+
     if ("mediaSession" in navigator) {
         navigator.mediaSession.metadata = new MediaMetadata({
             title: songData.title,
@@ -98,6 +103,20 @@ function playCurrentSong() {
     }
 }
 
+function showBigPlayer() {
+    document.getElementById("mini-player").hidden = true;
+    document.getElementById("player").hidden = false;
+}
+
+function showMiniPlayer(event) {
+    // Only show mini player if big player is already shown
+    var bigPlayer = document.getElementById("player");
+    if (!bigPlayer.hidden) {
+        bigPlayer.hidden = true;
+        document.getElementById("mini-player").hidden = false;
+    }
+}
+
 // Play or pause the current song in the player
 function songPlayPause() {
     var audio = document.getElementById("player-audio");
@@ -176,15 +195,20 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
     // Show pause button when audio is playing
     var button = document.getElementById("play-pause-button");
+    var miniButton = document.getElementById("mini-play-pause-button");
     audio.addEventListener("play", (event) => {
         button.className = "lsp_btn_pause02";
         button.src = customImage(document.getElementById("lsp_btn_pause02"));
+        miniButton.className = "lsp_btn_pause02";
+        miniButton.src = customImage(document.getElementById("lsp_btn_pause02"));
     })
 
     // Show play button when audio is paused
     audio.addEventListener("pause", (event) => {
         button.className = "lsp_btn_play02";
         button.src = customImage(document.getElementById("lsp_btn_play02"));
+        miniButton.className = "lsp_btn_play02";
+        miniButton.src = customImage(document.getElementById("lsp_btn_play02"));
     })
 
     // Audio position scrubbing
@@ -219,5 +243,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
     document.getElementById("volume-slider").oninput = function(event) {
         audio.volume = event.target.value;
     }
+
+    // Show mini player on scroll
+    document.addEventListener("scroll", showMiniPlayer);
 });
 

diff --git a/static/styles.css b/static/styles.css
index 12bc5cf382f5bd11b5f93f2f99cda419835f6ee7..9be28283e7bc216511cca05412d7be707b82da30 100644 (file)
--- a/static/styles.css
+++ b/static/styles.css
@@ -441,6 +441,17 @@ div.player {
     background: var(--yellow);
 }
 
+.mini-player {
+    margin: 10px;
+    padding-left: 10px;
+    box-shadow: 0px 0px 20px 0px;
+    border-radius: 10px;
+    background: var(--yellow);
+
+    display: flex;
+    align-items: center;
+}
+
 div.player-info {
     display: flex;
     flex-direction: row;
@@ -461,6 +472,16 @@ div.player-info {
     /*padding: 0px 10px;*/
 }
 
+.mini-player-controls {
+    margin: 5px;
+    display: flex;
+    gap: 5px;
+}
+
+.mini-player-label {
+    white-space: nowrap;
+}
+
 #player-title {
     text-decoration: none;
 }
@@ -506,6 +527,7 @@ div.player-info {
 .player-button img {
     image-rendering: pixelated;
     width: 32px;
+    vertical-align: middle;
 }
 
 #volume-slider {

diff --git a/templates/base.html b/templates/base.html
index 1fcd26a03d03e78af182891108b226064a513af8..95f1356856c2f1ff74bb4d53207050f0e845492e 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -2,9 +2,9 @@
 <html>
     <head>
         <title>{% block title %}{% endblock %}</title>
-        <link rel="stylesheet" href="/static/styles.css?v=3"/>
+        <link rel="stylesheet" href="/static/styles.css?v=4"/>
         <link rel="icon" type="image/x-icon" href="/static/lsp_notes.png?v=1"/>
-        <script src="/static/player.js?v=1"></script>
+        <script src="/static/player.js?v=2"></script>
         <script src="/static/nav.js?v=2"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -98,6 +98,29 @@
                     <input id="volume-slider" name="volume" type="range" min="0" max="1" step="any" value="1"/>
                 </div>
             </div>
+            <div class="mini-player" id="mini-player" hidden>
+                <div class="song-info">
+                    <!-- Song Title -->
+                    <div class="song-title mini-player-label"><a id="mini-player-title">Not Playing</a></div>
+
+                    <!-- Separator -->
+                    <div class="song-info-sep"> - </div>
+
+                    <!-- Song Artist(s) -->
+                    <div class="mini-player-label">
+                        <a class="profile-link" id="mini-player-artist"></a>
+                        <span class="profile-link" id="mini-player-collabs"></span>
+                    </div>
+                </div>
+                <div class="mini-player-controls">
+                    <button onclick="showBigPlayer()" title="Show Big Player" class="player-button">
+                        <img class="lsp_btn_show02">
+                    </button>
+                    <button onclick="songPlayPause()" title="Play" class="player-button">
+                        <img class="lsp_btn_pause02" id="mini-play-pause-button">
+                    </button>
+                </div>
+            </div>
         </div>
     </body>
 </html>