Moved and improved Currently Playing

static/main.js

@@ -1441,6 +1441,17 @@ function closeStickySection(sectionId) {
     }
 }
 
+// Function to open any sticky section
+function openStickySection(sectionId) {
+    const section = document.getElementById(sectionId);
+    if (section) {
+        // Toggle the 'open' class
+        section.classList.toggle('open');
+    } else {
+        logMessage(`Error: Section with ID "${sectionId}" not found`);
+    }
+}
+
 function attachFullScreenListeners() {
     // Add event listener to all fullscreen buttons
     document.querySelectorAll('.fullscreen-button').forEach(button => {
@@ -1490,15 +1501,18 @@ async function updateCurrentlyPlaying() {
             return;
         }
 
-        if (data.current_playing_file) {
+        if (data.current_playing_file && !data.stop_requested) {
             const { current_playing_file, execution_progress, pause_requested } = data;
 
             // Strip './patterns/' prefix from the file name
             const fileName = current_playing_file.replace('./patterns/', '');
 
+            if (!document.body.classList.contains('playing')) {
+                closeStickySection('pattern-preview-container')
+            }
+
             // Show "Currently Playing" section
-            currentlyPlayingSection.classList.remove('hidden');
-            currentlyPlayingSection.classList.add('visible');
+            document.body.classList.add('playing');
 
             // Update pattern preview only if the file is different
             if (current_playing_file !== lastPreviewedFile) {
@@ -1527,11 +1541,10 @@ async function updateCurrentlyPlaying() {
             const pausePlayButton = document.getElementById('pausePlayCurrent');
             if (pausePlayButton) pausePlayButton.textContent = pause_requested ? '▶' : '⏸';
         } else {
-            logMessage('No file is currently playing.');
-            hideCurrentlyPlaying();
+            document.body.classList.remove('playing');
         }
     } catch (error) {
-        logMessage(`Error updating "Currently Playing" section: ${error.message}`, LOG_TYPE.ERROR);
+        logMessage(`Error updating "Currently Playing" section: ${error.message}`);
     }
 }
 

static/style.css

@@ -375,7 +375,7 @@ section.sticky.hidden {
 section .header {
     position: relative;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     align-items: center;
     margin-bottom: 10px;
     width: 100%;
@@ -386,8 +386,7 @@ section .header h2 {
 }
 
 /* Close Button Styling */
-.close-button,
-.fullscreen-button {
+button.no-bg {
     background: none;
     border: none;
     font-size: 1.5rem;
@@ -575,6 +574,7 @@ section .header .add-button {
 
 .tab-button {
     flex: 1;
+    height: 60px;
     padding: 20px 10px;
     text-align: center;
     font-size: 1rem;
@@ -664,10 +664,75 @@ button#debug_button.active {
 
 
 /* Currently Playing Section Styling */
+body.playing .bottom-nav {
+    height: 200px;
+    align-items: flex-end;
+}
+
+body.playing section.sticky{
+    bottom: 200px;
+}
+
 #currently-playing-container {
     align-items: center;
 }
 
+body:not(.playing) #currently-playing-container {
+    display: none;
+}
+
+#currently-playing-container.open {
+    max-height: none;
+    bottom: 60px;
+}
+
+body.playing #currently-playing-container:not(.open) {
+    height: 140px;
+    overflow:hidden;
+    flex-direction: row;
+    flex-wrap: wrap;
+    bottom: 60px;
+}
+
+body.playing #currently-playing-container:not(.open) .header{
+    justify-content: center;
+}
+
+body.playing #currently-playing-container:not(.open) .header .fullscreen-button,
+body.playing #currently-playing-container:not(.open) .header .close-button,
+body.playing #currently-playing-container:not(.open) .header h2 {
+    display: none;
+}
+
+body.playing #currently-playing-container:not(.open) .header .open-button {
+    display: block;
+}
+
+body.playing #currently-playing-container:not(.open) #currently-playing-preview {
+    max-width:80px;
+}
+
+body.playing #currently-playing-container:not(.open) #currently-playing-details{
+    flex-grow: 1;
+    align-items: flex-start;
+    margin: 0 0 0 20px;
+}
+
+body.playing #currently-playing-container:not(.open) .play-buttons button {
+    width: 50px;
+    height: 50px;
+    font-size: 1.5rem;
+}
+
+body.playing #currently-playing-container:not(.open) #progress-container {
+    width: 100%;
+}
+
+body:not(.playing) #currently-playing-container:not(.open) #play_progress_text {
+    display: none;
+}
+
+
 #currentlyPlayingCanvas {
     width: 100%;
     max-width: 300px;
@@ -726,7 +791,7 @@ button#debug_button.active {
 
 .play-buttons {
     display: flex;
-    gap: 30px;
+    gap: 20px;
 }
 
 .play-buttons button {

templates/index.html

@@ -273,34 +273,34 @@
             </div>
             <button id="debug_button" onclick="toggleDebugLog()">🪲</button>
         </section>
-
-        <section id="currently-playing-container" class="hidden sticky">
-            <div class="header">
-                <h2>Currently Playing</h2>
-<!--                <button class="fullscreen-button no-bg">⛶</button>-->
-                <button class="close-button no-bg" onclick="closeStickySection('currently-playing-container')">×</button>
-            </div>
-            <div id="currently-playing-preview">
-                <canvas id="currentlyPlayingCanvas"></canvas>
-            </div>
-            <div id="currently-playing-details">
-                <p id="currently-playing-file">File: </p>
-                <p id="currently-playing-position"></p>
-            </div>
-            <div id="progress-container">
-                <progress id="play_progress" value="0" max="100"></progress>
-                <h3 id="play_progress_text">0%</h3>
-            </div>
-            <div class="play-buttons">
-                <button id="stopCurrent" onclick="stopExecution()" class="cancel">■</button>
-                <button id="pausePlayCurrent" class="cta" onclick="togglePausePlay()">⏸</button>
-            </div>
-        </section>
     </main>
 </div>
 
 <!-- Tab Navigation -->
 <nav class="bottom-nav">
+    <section id="currently-playing-container" class="sticky">
+        <div class="header">
+            <h2>Currently Playing</h2>
+            <button class="open-button no-bg" onclick="openStickySection('currently-playing-container')">^</button>
+<!--            <button class="fullscreen-button no-bg">⛶</button>-->
+<!--            <button class="close-button no-bg" onclick="closeStickySection('currently-playing-container')">×</button>-->
+        </div>
+        <div id="currently-playing-preview">
+            <canvas id="currentlyPlayingCanvas"></canvas>
+        </div>
+        <div id="currently-playing-details">
+            <p id="currently-playing-file"></p>
+            <p id="currently-playing-position"></p>
+        </div>
+        <div class="play-buttons">
+            <button id="stopCurrent" onclick="stopExecution()" class="cancel">■</button>
+            <button id="pausePlayCurrent" class="cta" onclick="togglePausePlay()">⏸</button>
+        </div>
+        <div id="progress-container">
+            <progress id="play_progress" value="0" max="100"></progress>
+            <h3 id="play_progress_text">0%</h3>
+        </div>
+    </section>
     <button class="tab-button" onclick="switchTab('patterns')" id="nav-patterns">Patterns</button>
     <button class="tab-button" onclick="switchTab('playlists')" id="nav-playlists">Playlists</button>
     <button class="tab-button" onclick="switchTab('settings')" id="nav-settings">Device</button>