From 05c8b548ce6a41ae45303de8d4dce57916a76a98 Mon Sep 17 00:00:00 2001
From: torcado194 <torcado@yahoo.com>
Date: Mon, 6 Jun 2022 14:45:23 -0400
Subject: [PATCH] add overlaid-toggle infoStyle

---
 README.md  |  2 ++
 index.html | 25 +++++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index a7b9ff6..496ae85 100644
--- a/README.md
+++ b/README.md
@@ -225,7 +225,9 @@ And that's it! you can upload the files to your website, or zip them up and uplo
 `infoStyle`  
 > Styles the track info of the currently playing track  
 > `"overlaid"` (default) text sits layered on top of the cover image  
+> `"overlaid-toggle"` text sits layered on top of the cover image only if the info drawer is toggled on the current track, otherwise it is hidden  
 > `"below"` text sits below the cover image (note: this will push down the controls and track list in a vertical layout)  
+> `"none"` text is not displayed (other than in the info drawer under the track, when toggled)  
 
 \
 `contentWidth`  
diff --git a/index.html b/index.html
index db09057..6ab66cb 100644
--- a/index.html
+++ b/index.html
@@ -141,7 +141,7 @@
         grid-row: 2/3;
     }
 
-    .info-overlaid #mediaColumn {
+    .info-overlaid #mediaColumn, .info-overlaid-toggle #mediaColumn {
         max-width: 480px;
         height: fit-content;
     }
@@ -181,7 +181,7 @@
         margin-top: 12px;
     }
 
-    .info-overlaid #mediaInfoContainer {
+    .info-overlaid #mediaInfoContainer, .info-overlaid-toggle #mediaInfoContainer {
         padding: 30px;
         margin: 0;
         position: absolute;
@@ -196,10 +196,10 @@
         opacity: 0;
         transition: opacity 0.25s;
     }
-    .info-overlaid #mediaInfoContainer.active {
+    .info-overlaid #mediaInfoContainer.active, .info-overlaid-toggle #mediaInfoContainer.active {
         opacity: 1;
     }
-    .info-overlaid #mediaInfo {
+    .info-overlaid #mediaInfo, .info-overlaid-toggle #mediaInfo {
         margin: auto;
         position: relative;
         top: 0;
@@ -800,7 +800,7 @@
             document.getElementById('mainContainer').classList.add(theme.layoutStyle);
         }
         if(theme.infoStyle){
-            document.getElementById('mainContainer').classList.remove('info-none', 'info-overlaid', 'info-below');
+            document.getElementById('mainContainer').classList.remove('info-none', 'info-overlaid', 'info-below', 'info-overlaid-toggle');
             document.getElementById('mainContainer').classList.add('info-' + theme.infoStyle);
         }
         if(theme.titleStyle){
@@ -958,7 +958,16 @@
                 let infoContainerEl = trackEl.querySelector('.infoContainer');
                 trackEl.querySelector('.toggleInfo').addEventListener('click', (e) => {
                     infoContainerEl.style.height = trackEl.querySelector('.info').clientHeight + 'px';
-                    infoContainerEl.classList.toggle('active');
+                    entry.infoToggled = infoContainerEl.classList.toggle('active');
+                    if(config.theme.infoStyle === 'overlaid-toggle'){
+                        if(entry.info && entry.infoToggled){
+                            mediaInfoEl.innerHTML = entry.info;
+                            mediaInfoContainer.classList.add('active');
+                        } else {
+                            mediaInfoEl.innerHTML = '';
+                            mediaInfoContainer.classList.remove('active');
+                        }
+                    }
                 });
             }
             if(!entry.previewFade && entry.previewFade !== false){
@@ -1450,7 +1459,7 @@
         setLoading(currentEntry);
         entry.trackEl.classList.add('active');
         controlsEl.querySelector('.title').innerHTML = entry.title;
-        if(entry.info){
+        if(entry.info && (config.theme.infoStyle !== 'overlaid-toggle' || entry.infoToggled)){
             mediaInfoEl.innerHTML = entry.info;
             mediaInfoContainer.classList.add('active');
         } else {
@@ -1480,7 +1489,7 @@
         if(isNaN(secs)){
             return '00:00';
         }
-        
+
         let sec_num = Math.max(0, Math.round(secs)); //flooring is more correct, but rounding gives nicer results due to playback event buffering
         let hours   = Math.floor(sec_num / 3600);
         let minutes = Math.floor(sec_num / 60) % 60;