Spaces:

prasanthntu
/

music-player

Running

App Files Files Community

prasanth.thangavel commited on Jan 4

Commit

466bb96

1 Parent(s): 2f0eefe

Minor improvements

Browse files

Files changed (2) hide show

README.md +8 -2
templates/index.html +76 -5

README.md CHANGED Viewed

@@ -12,8 +12,14 @@ short_description: My personal music player
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 # Todo
-- [ ] Test docker locally for faster iterative testing
     ```
     docker build -t musicplayer .
     docker run -p 7860:7860 musicplayer
-    ```

 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 # Todo
+## Testing
+- [ ] Test docker locally for faster iterative testing.
     ```
     docker build -t musicplayer .
     docker run -p 7860:7860 musicplayer
+    ```
+## Enhancements
+- [ ] Add a aesthetically beautiful background theme/color/design.
+- [ ] Improve the icons/buttons and overall design
+- [ ] The loop feature is not working as intended
+- [ ] Add persistent memory, especially for creating playlists (it get's overwritten once the changes are deployed)

templates/index.html CHANGED Viewed

@@ -74,8 +74,11 @@
             transition: transform 0.2s;
         }
-        .sw-btn:active {
             transform: scale(0.96);
         }
         .sw-dropdown {
@@ -97,6 +100,7 @@
             border-radius: 12px;
             background: #f5f5f5;
             transition: background 0.2s;
         }
         .sw-track.active {
@@ -163,6 +167,9 @@
             .sw-btn:hover {
                 background: #7722ff;
             }
             .sw-track {
                 padding: 20px;
         }
@@ -171,7 +178,7 @@
 <body>
     <div class="sw-container">
         <div class="sw-player">
-            <h1 class="sw-header">Music Player</h1>
             <div class="sw-now-playing"><span id="swCurrentSong">No song selected</span></div>
             <audio id="swAudio" class="sw-audio" controls preload="none" autoplay="false">
                 Your browser does not support audio playback.
@@ -180,6 +187,8 @@
             <div class="sw-btn-group">
                 <button class="sw-btn" onclick="swPrevious()">Previous</button>
                 <button class="sw-btn" onclick="swNext()">Next</button>
             </div>
             <select class="sw-dropdown" id="swPlaylistSelect" onchange="swChangePlaylist()">
@@ -230,9 +239,24 @@
         function swNext() {
             const currentPlaylistTracks = swGetCurrentTracks();
-            if (swCurrentIndex < currentPlaylistTracks.length - 1) {
-                swCurrentIndex++;
-                swPlay(currentPlaylistTracks[swCurrentIndex]);
             }
         }
@@ -285,6 +309,9 @@
         function swChangePlaylist() {
             swCurrentPlaylist = document.getElementById('swPlaylistSelect').value;
             swCurrentIndex = 0;
             swUpdateTracks();
             if (swGetCurrentTracks().length > 0) {
                 swPlay(swGetCurrentTracks()[0]);
@@ -333,6 +360,50 @@
                 audio.currentTime = 0;
             }
         });
     </script>
 </body>
 </html>

             transition: transform 0.2s;
         }
+        .sw-btn.active {
             transform: scale(0.96);
+            background: #7722ff;
+            position: relative;
+            order: 2px solid var(--primary);
         }
         .sw-dropdown {
             border-radius: 12px;
             background: #f5f5f5;
             transition: background 0.2s;
+            font-size: 0.85rem; /* Added this line to reduce font size */
         }
         .sw-track.active {
             .sw-btn:hover {
                 background: #7722ff;
             }
+            .sw-btn.active:hover {
+                background: #6200ee;
+            }
             .sw-track {
                 padding: 20px;
         }
 <body>
     <div class="sw-container">
         <div class="sw-player">
+            <h1 class="sw-header">🎵 Music Player</h1>
             <div class="sw-now-playing"><span id="swCurrentSong">No song selected</span></div>
             <audio id="swAudio" class="sw-audio" controls preload="none" autoplay="false">
                 Your browser does not support audio playback.
             <div class="sw-btn-group">
                 <button class="sw-btn" onclick="swPrevious()">Previous</button>
                 <button class="sw-btn" onclick="swNext()">Next</button>
+                <button class="sw-btn" id="swLoopBtn" onclick="swToggleLoop()">🔁 Loop</button>
+                <button class="sw-btn" id="swShuffleBtn" onclick="swToggleShuffle()">🔀 Shuffle</button>
             </div>
             <select class="sw-dropdown" id="swPlaylistSelect" onchange="swChangePlaylist()">
         function swNext() {
             const currentPlaylistTracks = swGetCurrentTracks();
+            if (swIsShuffling) {
+                const currentShuffleIndex = swShuffledIndices.indexOf(swCurrentIndex);
+                if (currentShuffleIndex < swShuffledIndices.length - 1) {
+                    swCurrentIndex = swShuffledIndices[currentShuffleIndex + 1];
+                    swPlay(currentPlaylistTracks[swCurrentIndex]);
+                } else if (swIsLooping) {
+                    generateShuffledIndices();
+                    swCurrentIndex = swShuffledIndices[0];
+                    swPlay(currentPlaylistTracks[swCurrentIndex]);
+                }
+            } else {
+                if (swCurrentIndex < currentPlaylistTracks.length - 1) {
+                    swCurrentIndex++;
+                    swPlay(currentPlaylistTracks[swCurrentIndex]);
+                } else if (swIsLooping) {
+                    swCurrentIndex = 0;
+                    swPlay(currentPlaylistTracks[swCurrentIndex]);
+                }
             }
         }
         function swChangePlaylist() {
             swCurrentPlaylist = document.getElementById('swPlaylistSelect').value;
             swCurrentIndex = 0;
+            if (swIsShuffling) {
+                generateShuffledIndices();
+            }
             swUpdateTracks();
             if (swGetCurrentTracks().length > 0) {
                 swPlay(swGetCurrentTracks()[0]);
                 audio.currentTime = 0;
             }
         });
+        // State variables
+        let swIsLooping = false;
+        let swIsShuffling = false;
+        let swShuffledIndices = [];
+        // Load saved preferences
+        document.addEventListener('DOMContentLoaded', function() {
+            // ... existing code ...
+            swIsLooping = JSON.parse(localStorage.getItem('swIsLooping') || 'false');
+            swIsShuffling = JSON.parse(localStorage.getItem('swIsShuffling') || 'false');
+            updateControlButtons();
+        });
+        function swToggleLoop() {
+            swIsLooping = !swIsLooping;
+            localStorage.setItem('swIsLooping', swIsLooping);
+            updateControlButtons();
+        }
+        function swToggleShuffle() {
+            swIsShuffling = !swIsShuffling;
+            localStorage.setItem('swIsShuffling', swIsShuffling);
+            if (swIsShuffling) {
+                generateShuffledIndices();
+            }
+            updateControlButtons();
+        }
+        function updateControlButtons() {
+            document.getElementById('swLoopBtn').classList.toggle('active', swIsLooping);
+            document.getElementById('swShuffleBtn').classList.toggle('active', swIsShuffling);
+        }
+        function generateShuffledIndices() {
+            const tracks = swGetCurrentTracks();
+            swShuffledIndices = Array.from({length: tracks.length}, (_, i) => i);
+            // Fisher-Yates shuffle
+            for (let i = swShuffledIndices.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [swShuffledIndices[i], swShuffledIndices[j]] = [swShuffledIndices[j], swShuffledIndices[i]];
+            }
+        }
     </script>
 </body>
 </html>