From 5716c576c662e442f826e71d410d85ef840e784c Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 09:03:39 +0000
Subject: [PATCH] Visually indicate video navigation direction with animated
 dots

Update VideoPage component to add visual feedback for video navigation. A state variable `activeDot` controls the styling of navigation dots, changing to a gradient when a direction is selected and returning to a default style after a short delay. This provides users with a visual cue indicating the direction of video transitions.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/OdlP8Wj
---
 client/src/pages/VideoPage.tsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 55d63c1..53cb86a 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -57,6 +57,7 @@ export default function VideoPage() {
   const [showShareMenu, setShowShareMenu] = useState(false);
   const [touchStart, setTouchStart] = useState(0);
   const [touchEnd, setTouchEnd] = useState(0);
+  const [activeDot, setActiveDot] = useState<'left' | 'center' | 'right'>('center');
   const [searchQuery, setSearchQuery] = useState("");
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -123,6 +124,14 @@ export default function VideoPage() {
     const currentIndex = getCurrentVideoIndex();
     if (currentIndex === -1) return;
     
+    // Show direction feedback on dots
+    setActiveDot(direction === 'next' ? 'right' : 'left');
+    
+    // Return to center after 300ms
+    setTimeout(() => {
+      setActiveDot('center');
+    }, 300);
+    
     let newIndex;
     if (direction === 'next') {
       newIndex = currentIndex + 1 >= allVideos.length ? 0 : currentIndex + 1;
@@ -570,7 +579,11 @@ export default function VideoPage() {
                 {/* Left dot */}
                 <button
                   onClick={() => navigateToVideo('prev')}
-                  className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  className={`rounded-full transition-colors duration-300 ease-in-out ${
+                    activeDot === 'left' 
+                      ? 'bg-gradient-to-r from-purple-500 to-blue-500' 
+                      : 'bg-white/25 hover:bg-white/40'
+                  }`}
                   style={{
                     width: '8px',
                     height: '8px',
@@ -579,9 +592,13 @@ export default function VideoPage() {
                   }}
                   aria-label="Previous video"
                 />
-                {/* Center dot - always active */}
+                {/* Center dot */}
                 <button
-                  className="rounded-full bg-gradient-to-r from-purple-500 to-blue-500"
+                  className={`rounded-full transition-colors duration-300 ease-in-out ${
+                    activeDot === 'center' 
+                      ? 'bg-gradient-to-r from-purple-500 to-blue-500' 
+                      : 'bg-white/25'
+                  }`}
                   style={{
                     width: '8px',
                     height: '8px',
@@ -593,7 +610,11 @@ export default function VideoPage() {
                 {/* Right dot */}
                 <button
                   onClick={() => navigateToVideo('next')}
-                  className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  className={`rounded-full transition-colors duration-300 ease-in-out ${
+                    activeDot === 'right' 
+                      ? 'bg-gradient-to-r from-purple-500 to-blue-500' 
+                      : 'bg-white/25 hover:bg-white/40'
+                  }`}
                   style={{
                     width: '8px',
                     height: '8px',