Update templates/index.html

templates/index.html

@@ -359,6 +359,27 @@
                                 <i class="fas fa-play"></i> Raw Feed
                             </button>
                         </div>
+                        
+                        <!-- Advanced Video Controls -->
+                        <div class="mt-6 bg-white/40 dark:bg-black/40 p-4 rounded-2xl border border-indigo-200/50 dark:border-white/10 shadow-sm backdrop-blur-sm">
+                            <!-- Progress Bar -->
+                            <div class="w-full h-2 bg-indigo-200/50 dark:bg-white/20 rounded-full mb-4 cursor-pointer relative" onclick="seekVideo(event)" id="progressBarContainer">
+                                <div id="progressFill" class="absolute top-0 left-0 h-full bg-indigo-600 dark:bg-purple-500 rounded-full transition-all duration-300 pointer-events-none" style="width: 0%"></div>
+                            </div>
+                            
+                            <!-- Playback Buttons -->
+                            <div class="flex justify-center items-center gap-6">
+                                <button onclick="skipVideo(-5)" class="text-indigo-900 dark:text-white hover:text-indigo-600 dark:hover:text-purple-300 transition-colors cursor-pointer">
+                                    <i class="fas fa-backward"></i> <span class="text-[10px] font-black ml-1">-5s</span>
+                                </button>
+                                <button onclick="togglePlayPause()" class="w-12 h-12 rounded-full bg-indigo-600 dark:bg-purple-600 text-white flex items-center justify-center hover:scale-105 transition-transform shadow-lg cursor-pointer">
+                                    <i id="playPauseIcon" class="fas fa-pause text-lg"></i>
+                                </button>
+                                <button onclick="skipVideo(5)" class="text-indigo-900 dark:text-white hover:text-indigo-600 dark:hover:text-purple-300 transition-colors cursor-pointer">
+                                    <span class="text-[10px] font-black mr-1">+5s</span> <i class="fas fa-forward"></i>
+                                </button>
+                            </div>
+                        </div>
 
                         <div class="grid grid-cols-3 gap-2 sm:gap-5 mt-6 sm:mt-10">
                             <div class="ios-glass-inner p-3 sm:p-5 rounded-2xl sm:rounded-3xl flex flex-col items-center text-center gap-1 hover:bg-white/60 dark:hover:bg-white/10 transition-colors">
@@ -720,6 +741,7 @@
 
         let streamId = null;
         let poller = null;
+        let isPaused = false;
 
         function openIpCamModal() { document.getElementById('ipCamModal').classList.remove('hidden'); }
         function closeIpCamModal() { document.getElementById('ipCamModal').classList.add('hidden'); }
@@ -780,6 +802,10 @@
             
             document.getElementById('previewImg').src = `/video_feed/${streamId}?loc=${encodeURIComponent(data.location)}&t=${Date.now()}`;
             
+            // Reset pause state
+            isPaused = false;
+            document.getElementById('playPauseIcon').className = 'fas fa-pause text-lg';
+
             if(poller) clearInterval(poller);
             poller = setInterval(update, 1000);
         }
@@ -807,6 +833,39 @@
             });
         }
 
+        async function togglePlayPause() {
+            if(!streamId) return;
+            isPaused = !isPaused;
+            document.getElementById('playPauseIcon').className = isPaused ? 'fas fa-play text-lg' : 'fas fa-pause text-lg';
+            await fetch(`/video_control/${streamId}`, {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({action: isPaused ? 'pause' : 'play'})
+            });
+        }
+
+        async function skipVideo(seconds) {
+            if(!streamId) return;
+            await fetch(`/video_control/${streamId}`, {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({action: 'skip', value: seconds})
+            });
+        }
+
+        async function seekVideo(event) {
+            if(!streamId) return;
+            const container = document.getElementById('progressBarContainer');
+            const rect = container.getBoundingClientRect();
+            const pos = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+            
+            await fetch(`/video_control/${streamId}`, {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({action: 'seek', value: pos})
+            });
+        }
+
         function takeSnapshot() { 
             const feed = document.getElementById('previewImg');
             if(feed && feed.src) {
@@ -851,6 +910,10 @@
                 document.getElementById('rcnnVal').innerText = `${data.rcnn || 0}%`;
                 document.getElementById('severityLevel').innerText = data.severity || "--";
 
+                if (data.progress !== undefined) {
+                    document.getElementById('progressFill').style.width = `${data.progress}%`;
+                }
+
                 const statusCard = document.getElementById('statusCard');
                 const statusIcon = document.getElementById('statusIcon');
                 const emergencyBanner = document.getElementById('emergencyBanner');
@@ -891,6 +954,7 @@
             document.getElementById('results').classList.add('hidden');
             document.getElementById('emergencyBanner').classList.add('hidden');
             document.getElementById('alprSection').classList.add('hidden');
+            document.getElementById('progressFill').style.width = "0%";
             
             // Wipe Form and Upload fields completely
             document.getElementById('fileInput').value = "";