From 2b055c1806f22d5f2b43f0a4ba66fad87785ab51 Mon Sep 17 00:00:00 2001
From: torcado194 <torcado@yahoo.com>
Date: Sun, 18 Sep 2022 15:14:44 -0400
Subject: [PATCH] add looping options

adds individul track loop count (indicated by a badge on the play button) and user loop toggle button (between none, track, and playlist)
---
 index.html                        | 162 ++++++++++++++++++++++++++----
 src/fonts.css                     |  39 ++++---
 src/fonts/rubikNumbers-edit.woff2 | Bin 0 -> 3324 bytes
 3 files changed, 166 insertions(+), 35 deletions(-)
 create mode 100644 src/fonts/rubikNumbers-edit.woff2

diff --git a/index.html b/index.html
index 6ab66cb..9ae694d 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,9 @@
     <link rel="stylesheet" href="src/reset.css">
     <link rel="stylesheet" href="src/common.css">
     <link rel="stylesheet" href="src/fonts.css">
+    <!-- <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@600&text=0123456789&display=swap" rel="stylesheet"> -->
 </head>
 <style>
     :root {
@@ -24,6 +27,14 @@
         --font: sans-serif;
     }
 
+    @font-face {
+        font-family: 'Rubik';
+        font-style: normal;
+        font-weight: 600;
+        font-display: swap;
+        src: url('src/fonts/rubikNumbers-edit.woff2') format('woff2');
+    }
+
     @keyframes pulse {
         0% {
             opacity: 0.5;
@@ -306,6 +317,24 @@
         font-size: 40px;
         animation: pulse 1.0s infinite;
     }
+    #bigButton.looped:before {
+        content: attr(loopcount);
+        display: block;
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        top: -6px;
+        right: -6px;
+        color: var(--secondaryColor);
+        background-color: var(--primaryColor);
+        border: 2px solid var(--backgroundColor);
+        border-radius: 20px;
+        font-family: 'Rubik';
+        font-weight: 600;
+        font-size: 14px;
+        text-align: center;
+        letter-spacing: -1px;
+    }
 
     #controls {
         display: flex;
@@ -400,7 +429,7 @@
         margin: auto -2px;
     }
 
-    #controls #nextTrack, #controls #prevTrack {
+    #controls #nextTrack, #controls #prevTrack, #controls #loopSwitch {
         border: none;
         margin-right: 20px;
         flex: 0 0;
@@ -410,6 +439,9 @@
         align-self: start;
         cursor: pointer;
     }
+    #controls #loopSwitch {
+        opacity: 0.5;
+    }
 
     #controls .spacer {
         flex: 1 1;
@@ -590,6 +622,28 @@
         font-size: 20px;
     }
 
+    .track.looped button:before {
+        content: attr(loopcount);
+        display: block;
+        width: 15px;
+        height: 15px;
+        position: absolute;
+        top: -6px;
+        right: -6px;
+        color: var(--secondaryColor);
+        background-color: var(--primaryColor);
+        border: 2px solid var(--backgroundColor);
+        border-radius: 20px;
+        font-family: 'Rubik';
+        font-weight: 600;
+        font-size: 10px;
+        text-align: center;
+        letter-spacing: -1px;
+    }
+    .track.active.looped button:before {
+        border-color: var(--secondaryColor);;
+    }
+
     .track .title {
         word-break: break-word;
     }
@@ -714,6 +768,7 @@
                         </button>
                         <button id="prevTrack" class="icon-previous"></button>
                         <button id="nextTrack" class="icon-next"></button>
+                        <button id="loopSwitch" class="icon-loop" title="loop off"></button>
                         <div class="spacer"></div>
                         <div id="volumeContainer">
                             <div id="volumeTrackContainer">
@@ -746,6 +801,7 @@
     let scrubberEl = document.getElementById('scrubber');
     let nextTrackEl = document.getElementById('nextTrack');
     let prevTrackEl = document.getElementById('prevTrack');
+    let loopSwitchEl = document.getElementById('loopSwitch');
     
     let titleEl = document.getElementById('title');
     let titleContainerEl = document.getElementById('titleContainer');
@@ -772,6 +828,7 @@
 
     let loadedFirst = false;
     let autoPlay = false;
+    let loopMode = "none";
 
     let config = {};
 
@@ -948,6 +1005,7 @@
             </div>`);
             let trackEl = tracksEl.lastChild;
             entry.trackEl = trackEl;
+            let buttonEl = trackEl.querySelector('button');
             if(entry.feature){
                 featureIndex = i;
             }
@@ -973,8 +1031,14 @@
             if(!entry.previewFade && entry.previewFade !== false){
                 entry.previewFade = true; //default true
             }
+            if(typeof entry.loopCount === 'number' && entry.loopCount > 0){
+                entry.remainingLoops = entry.loopCount;
+                trackEl.classList.add('looped');
+                buttonEl.setAttribute('title', 'loop count');
+                updateLoops(entry);
+            }
             if(!entry.locked){
-                trackEl.querySelector('button').onclick = () => {
+                buttonEl.onclick = () => {
                     loadedFirst = true;
                     autoPlay = true;
                     playEntry(entry);
@@ -1036,8 +1100,8 @@
                     entry.error = true;
                     entry.errorMessage = e.target.error;
                     removeLoading(entry, true);
-                    trackEl.querySelector('button').classList.add('error', 'icon-warning');
-                    trackEl.querySelector('button').setAttribute('title', 'error loading file');
+                    buttonEl.classList.add('error', 'icon-warning');
+                    buttonEl.setAttribute('title', 'error loading file');
                 });
                 loaderEl.addEventListener('canplay', e => {
                     removeLoading(entry, true);
@@ -1255,6 +1319,9 @@
     prevTrackEl.addEventListener('click', e => {
         prevTrack();
     });
+    loopSwitchEl.addEventListener('click', e => {
+        loopSwitch();
+    });
 
     function updateTrackPreview(){
         if(currentEntry.needsDuration){
@@ -1347,22 +1414,31 @@
         return !entry.error && !entry.locked;
     }
 
-    function nextTrack(loop=true){
-        let idx = media.indexOf(currentEntry)+1;
-        if(!loop && idx >= media.length){
-            return;
-        }
-        let entry = media[mod(idx, media.length)];
-        let i = 0;
-        while(!canPlay(entry) && i < media.length){
-            i++;
-            idx++;
+    function nextTrack(manual=true){
+        if(loopMode === 'track'){
+            loadEntry(currentEntry);
+        } else if(!manual && currentEntry.remainingLoops > 0){
+            currentEntry.remainingLoops--;
+            updateLoops(currentEntry);
+            loadEntry(currentEntry);
+        } else {
+            let loop = manual || loopMode === "playlist";
+            let idx = media.indexOf(currentEntry)+1;
             if(!loop && idx >= media.length){
                 return;
             }
-            entry = media[mod(idx, media.length)];
+            let entry = media[mod(idx, media.length)];
+            let i = 0;
+            while(!canPlay(entry) && i < media.length){
+                i++;
+                idx++;
+                if(!loop && idx >= media.length){
+                    return;
+                }
+                entry = media[mod(idx, media.length)];
+            }
+            loadEntry(entry);
         }
-        loadEntry(entry);
     }
     function prevTrack(){
         if(playerEl.currentTime > (currentEntry.previewStart - currentEntry.audioStart) + 5){
@@ -1379,6 +1455,24 @@
             loadEntry(entry);
         }
     }
+    function loopSwitch(){
+        loopSwitchEl.classList.remove('icon-loop', 'icon-loop-1');
+        loopSwitchEl.style.opacity = 1;
+        if(loopMode === "none"){
+            loopMode = "playlist";
+            loopSwitchEl.classList.add('icon-loop');
+            loopSwitchEl.setAttribute('title', 'loop playlist');
+        } else if(loopMode === "playlist"){
+            loopMode = "track";
+            loopSwitchEl.classList.add('icon-loop-1');
+            loopSwitchEl.setAttribute('title', 'loop track');
+        } else {
+            loopMode = "none";
+            loopSwitchEl.classList.add('icon-loop');
+            loopSwitchEl.style.opacity = 0.5;
+            loopSwitchEl.setAttribute('title', 'loop off');
+        }
+    }
 
     function setLoading(entry, delay=150){
         if(entry.loading){
@@ -1406,6 +1500,25 @@
         entry.loading = false;
     }
 
+    function updateLoops(entry){
+        if(entry.loopCount > 0){
+            let buttonEl = entry.trackEl.querySelector('button');
+            buttonEl.setAttribute('loopcount', entry.remainingLoops);
+            // buttonEl.setAttribute('title', 'loop count');
+        }
+        if(entry === currentEntry){
+            if(entry.loopCount > 0){
+                bigButtonEl.setAttribute('loopcount', entry.remainingLoops);
+            } else {
+                bigButtonEl.removeAttribute('loopcount');
+            }
+        }
+    }
+    function resetLoops(entry){
+        entry.remainingLoops = entry.loopCount;
+        updateLoops(entry);
+    }
+
     
     function loadEntry(entry){
         if(entry.error){
@@ -1414,11 +1527,15 @@
         if(entry.locked){
             return;
         }
-        media.forEach(entry => {
-            entry.trackEl.classList.remove('active');
-            entry.trackEl.querySelector('button').classList.remove('pause');
-        });
         currentEntry = entry;
+        media.forEach(thisEntry => {
+            thisEntry.trackEl.classList.remove('active');
+            thisEntry.trackEl.querySelector('button').classList.remove('pause');
+            if(thisEntry !== entry){
+                resetLoops(thisEntry);
+            }
+            updateLoops(entry);
+        });
         if(!currentEntry.duration){
             currentEntry.duration = 999;
             currentEntry.needsDuration = true;
@@ -1430,6 +1547,11 @@
         } else {
             scrubberTrackContainerEl.classList.remove('preview');
         }
+        if(entry.loopCount > 0){
+            bigButtonEl.classList.add('looped');
+        } else {
+            bigButtonEl.classList.remove('looped');
+        }
         Array.from(mediaContainerEl.children).forEach(el => {
             el.classList.remove('active');
         });
diff --git a/src/fonts.css b/src/fonts.css
index 9c0c425..9401fed 100644
--- a/src/fonts.css
+++ b/src/fonts.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icons';
-  src:  url('fonts/icons.eot?llsbwi');
-  src:  url('fonts/icons.eot?llsbwi#iefix') format('embedded-opentype'),
-    url('fonts/icons.ttf?llsbwi') format('truetype'),
-    url('fonts/icons.woff?llsbwi') format('woff'),
-    url('fonts/icons.svg?llsbwi#icons') format('svg');
+  src:  url('fonts/icons.eot?vz49dm');
+  src:  url('fonts/icons.eot?vz49dm#iefix') format('embedded-opentype'),
+    url('fonts/icons.ttf?vz49dm') format('truetype'),
+    url('fonts/icons.woff?vz49dm') format('woff'),
+    url('fonts/icons.svg?vz49dm#icons') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -26,6 +26,24 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-plus-big:before {
+  content: "\2b";
+}
+.icon-drop-big:before {
+  content: "\2b07";
+}
+.icon-loading-big:before {
+  content: "\25cc";
+}
+.icon-loop-1:before {
+  content: "\1f502";
+}
+.icon-loop:before {
+  content: "\1f501";
+}
+.icon-play-loop:before {
+  content: "\1f503";
+}
 .icon-duration-preview:before {
   content: "\1f55b";
 }
@@ -36,7 +54,7 @@
   content: "\23f2";
 }
 .icon-end:before {
-  content: "\e900";
+  content: "\23f5";
 }
 .icon-start:before {
   content: "\23f4";
@@ -149,12 +167,3 @@
 .icon-play:before {
   content: "\25b6";
 }
-.icon-plus-big:before {
-  content: "\2b";
-}
-.icon-drop-big:before {
-  content: "\2b07";
-}
-.icon-loading-big:before {
-  content: "\25cc";
-}
diff --git a/src/fonts/rubikNumbers-edit.woff2 b/src/fonts/rubikNumbers-edit.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..c15b16c3f317b33b6082481a6978c44c4fb997fe
GIT binary patch
literal 3324
zcmV<Y3<L9bPew8T0RR9101W&95C8xG039>{01Tc00RR9100000000000000000000
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
GSzHW3>`C<i

literal 0
HcmV?d00001