'Load default playlist' button

shoma-mano · Mar 10, 2023 · 90baf0e · 90baf0e
1 parent fd3e16d
commit 90baf0e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/client/src/index.html b/client/src/index.html
@@ -96,7 +96,11 @@
             <div id="playlist-header-text" class="header-text">PLAYLIST</div>
             <button id="export-button" class="plain" title="Share this playlist"></button>
           </div>
-          <div id="playlist-tracks"></div>          
+          <div id="playlist-content">
+            <button id="load-playlist-button" class="flat">Load default playlist</button>
+            <div id="playlist-tracks">
+            </div>
+          </div>
         </div>
       </div>
       <div id="slider-panel" class="panel">

diff --git a/client/src/index.ts b/client/src/index.ts
@@ -220,6 +220,7 @@ const vinyl = document.getElementById('vinyl');
 const vinylColor = document.getElementById('vinyl-color');
 const vinylBottomText1 = document.getElementById('vinyl-bottom-text1');
 const vinylBottomText2 = document.getElementById('vinyl-bottom-text2');
+const loadPlaylistButton = document.getElementById('load-playlist-button');
 const playlistContainer = document.getElementById('playlist-tracks');
 const updateTrackClasses = () => {
   player.playlist.forEach((track, i) => {
@@ -244,8 +245,13 @@ const onTrackChange = () => {
 };
 player.onTrackChange = onTrackChange;
 
+loadPlaylistButton.addEventListener('click', () => {
+  window.location.href = '?default';
+});
+
 // Playlist
 const updatePlaylistDisplay = () => {
+  loadPlaylistButton.style.display = player.playlist.length > 0 ? 'none' : null;
   playlistContainer.innerHTML = '';
   player.playlist.forEach((track, i) => {
     const template = document.getElementById('playlist-track') as HTMLTemplateElement;

diff --git a/client/src/style.scss b/client/src/style.scss
@@ -461,8 +461,19 @@ $panel-border-radius: 6px;
       }
     }
 
+    #playlist-content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    #load-playlist-button {
+      position: absolute;
+    }
+
     #playlist-tracks {
       height: $height;
+      width: 100%;
       overflow-y: auto;
     }