Random mode

frontend/app.js

@@ -59,9 +59,12 @@ class EncryptedVideoScroller {
         this.auth = auth;
         this.currentIndex = 0;
         this.videos = [];
+        this.sequentialVideos = [];
+        this.randomMode = false;
         this.isLoading = false;
         this.container = document.getElementById('videoContainer');
         this.loadingEl = document.getElementById('loading');
+        this.randomBtn = document.getElementById('randomBtn');
         this.touchStartY = 0;
         this.touchEndY = 0;
         this.isDragging = false;
@@ -94,6 +97,11 @@ class EncryptedVideoScroller {
                 this.toggleHeader();
             }
         });
+
+        // Random mode toggle button
+        if (this.randomBtn) {
+            this.randomBtn.addEventListener('click', () => this.toggleRandomMode());
+        }
     }
 
     toggleHeader() {
@@ -161,7 +169,10 @@ class EncryptedVideoScroller {
             }
 
             const newVideos = await response.json();
-            this.videos = newVideos;
+            this.sequentialVideos = newVideos;
+            this.videos = [...newVideos];
+            this.randomMode = false;
+            this.updateRandomButton();
         } catch (error) {
             console.error('Error loading videos:', error);
             this.showLoadingError();
@@ -388,6 +399,26 @@ class EncryptedVideoScroller {
         }
     }
 
+    toggleRandomMode() {
+        this.randomMode = !this.randomMode;
+        if (this.randomMode) {
+            // Shuffle videos array using Fisher-Yates shuffle
+            this.videos = [...this.videos].sort(() => Math.random() - 0.5);
+        } else {
+            // Restore original order
+            this.videos = [...this.sequentialVideos];
+        }
+        this.currentIndex = 0;
+        this.renderVideos();
+        this.updateRandomButton();
+    }
+
+    updateRandomButton() {
+        if (this.randomBtn) {
+            this.randomBtn.textContent = this.randomMode ? 'Random ▼' : 'Sequential ▼';
+        }
+    }
+
     showLoading() {
         this.isLoading = true;
         this.loadingEl.classList.add('show');

frontend/index.html

@@ -31,6 +31,7 @@
         <div class="app-header">
             <h2>Private Videos</h2>
             <div class="header-buttons">
+                <button id="randomBtn" class="btn-small">Sequential ▼</button>
                 <button id="uploadBtn" class="btn-small">+ Upload</button>
                 <button id="logoutBtn" class="btn-small">Logout</button>
             </div>