From 10dd4ad0737663f6c1e187d7ac233d598a471a87 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 09:01:36 +0000
Subject: [PATCH] Add navigation dots to video player for mobile viewing

Adds mobile-specific navigation dots to the video player on the VideoPage component, allowing users to cycle through videos using touch gestures.

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 | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index a498bc0..e326fd4 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -564,6 +564,29 @@ export default function VideoPage() {
               )}
             </div>
 
+            {/* Mobile navigation dots - only visible on mobile */}
+            {allVideos.length > 1 && (
+              <div className="md:hidden flex justify-center mt-4 mb-2 gap-1 py-1">
+                {/* Left dot */}
+                <button
+                  onClick={() => navigateToVideo('prev')}
+                  className="w-2 h-2 rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  aria-label="Previous video"
+                />
+                {/* Center dot - always active */}
+                <button
+                  className="w-2 h-2 rounded-full bg-gradient-to-r from-purple-500 to-blue-500"
+                  aria-label="Current video"
+                />
+                {/* Right dot */}
+                <button
+                  onClick={() => navigateToVideo('next')}
+                  className="w-2 h-2 rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  aria-label="Next video"
+                />
+              </div>
+            )}
+
             {/* Video info */}
             <div className="bg-bunny-gray/50 rounded-lg p-4">
               <div className="flex justify-between items-start mb-4">