diff --git a/frontend/app.js b/frontend/app.js index e23552e..2df5749 100644 --- a/frontend/app.js +++ b/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'); diff --git a/frontend/index.html b/frontend/index.html index 56db87c..f1f9979 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -31,6 +31,7 @@

Private Videos

+