Added loop feature!

preyneyv · Apr 29, 2021 · 42b8f3d · 42b8f3d
1 parent 794eb6f
commit 42b8f3d
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 10 deletions.
diff --git a/src/index.html b/src/index.html
@@ -65,6 +65,10 @@ <h1 id="title">preyneyv's Replay Manager</h1>
     <footer>
         <span id="selection-status" class="status">0 clips selected</span>
         <div class="actions">
+            <label id="loop-playlist-button" for="loop-playlist">
+                <input type="checkbox" id="loop-playlist">
+                Loop
+            </label>
             <div id="clear-selection" class="btn">Clear</div>
             <div id="enqueue-selection" class="btn btn-confirm">Enqueue</div>
         </div>

diff --git a/src/scripts/api.js b/src/scripts/api.js
@@ -11,6 +11,7 @@ export class API {
         this.port = port
         this.app = express()
         this.clips = []
+        this.loop = false
 
         this.initializeApp()
     }
@@ -19,8 +20,9 @@ export class API {
         return new Promise(resolve => this.app.listen(this.port, resolve))
     }
 
-    enqueueClips(clips) {
+    enqueueClips(clips, loop) {
         this.clips = [...clips]
+        this.loop = loop
     }
 
     initializeApp() {
@@ -34,8 +36,10 @@ export class API {
     }
 
     getViewer(req, res) {
-        const clips = JSON.stringify(this.clips)
-        res.render('viewer', { clips })
+        const { clips, loop } = this
+        const data = JSON.stringify({ clips, loop })
+
+        res.render('viewer', { data })
     }
 
     listClips(req, res) {

diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -13,6 +13,7 @@ const $configDirectory = $("#configuration-directory"),
     $showAll = $("#show-all"),
     $copyURL = $("#copy-url"),
     $selectionStatus = $("#selection-status"),
+    $loopPlaylist = $("#loop-playlist"),
     $clearSelection = $("#clear-selection"),
     $enqueueSelection = $("#enqueue-selection"),
     $replayClipScroller = $("#replay-clips-scroller"),
@@ -190,6 +191,8 @@ function hideAllClips() {
 function showAllClips() {
     if (!confirm('Are you sure you want to reveal all clips?'))
         return
+    hidden.push(...clips.map(clip => clip.name))
+    updateUI()
     hidden = []
     fetchListing()
 }
@@ -203,7 +206,7 @@ function enqueuePlaylist() {
     const playlist = clips
         .filter(c => c.checked)
         .map(c => c.name)
-    api.enqueueClips(playlist)
+    api.enqueueClips(playlist, $loopPlaylist.prop('checked'))
     $selectionStatus.text('Playlist updated successfully.')
 }
 

diff --git a/src/style.css b/src/style.css
@@ -276,9 +276,15 @@ body {
 #replay-clips-container footer .actions,
 #replay-clips-container header .actions {
     display: flex;
+    align-items: center;
 }
 
 #replay-clips-container footer .actions > *,
 #replay-clips-container header .actions > * {
     margin-left: 4px;
 }
+
+#loop-playlist-button {
+    display: block;
+    margin-right: 8px;
+}
diff --git a/src/viewer/main.js b/src/viewer/main.js
@@ -6,13 +6,19 @@ const videoA = document.querySelector("#video-a"),
 let current = videoA,
     standby = videoB
 
-let nextIdx = 0
+let nextIdx = -1
 
-const clipURL = idx => idx < clips.length ? `/clips/${clips[idx]}` : undefined
+const clipURL = () => {
+    nextIdx++
+    if (loop) {
+        nextIdx = nextIdx % clips.length
+    }
+    return nextIdx < clips.length ? `/clips/${clips[nextIdx]}` : undefined
+}
 
 function initializeFirstClip() {
-    current.src = clipURL(nextIdx++)
-    standby.src = clipURL(nextIdx++)
+    current.src = clipURL()
+    standby.src = clipURL()
     current.play()
     updateVolumes()
 }
@@ -50,7 +56,7 @@ function swapVideos(backoff) {
 
     setTimeout(() => {
         standby.classList.add('hide')
-        standby.src = clipURL(nextIdx++)
+        standby.src = clipURL()
     }, 1000)
 }
 

diff --git a/src/views/viewer.ejs b/src/views/viewer.ejs
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>preyneyv's Replay Viewer</title>
     <link rel="stylesheet" href="style.css">
-    <script>const clips = <%- clips %></script>
+    <script>const { clips, loop } = <%- data %></script>
     <script src="main.js" defer></script>
 </head>
 <body>