From f157385dd674d1b15b33b14eb0d4c8412a173ae7 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 20:29:15 +0000
Subject: [PATCH] Add navigation arrows to move between videos seamlessly

Introduce previous and next navigation arrows on the video player interface, allowing users to easily cycle through available videos. Icons for ChevronLeft and ChevronRight are added to lucide-react. Navigation logic is implemented in the VideoPage component to handle cycling through videos using window.location.href.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/izllXJt
---
 client/src/pages/VideoPage.tsx | 47 +++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 34cb325..916679f 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -31,7 +31,7 @@ const formatDate = (date: Date | string): string => {
   });
 };
 import { Button } from "@/components/ui/button";
-import { Share2, X, Edit3, Menu, Search } from "lucide-react";
+import { Share2, X, Edit3, Menu, Search, ChevronLeft, ChevronRight } from "lucide-react";
 import { apiRequest } from "@/lib/queryClient";
 import {
   FacebookShareButton,
@@ -69,6 +69,30 @@ export default function VideoPage() {
   });
 
   const recommendedVideos = recommendedResponse?.videos?.filter(v => v.id !== videoId) || [];
+  const allVideos = recommendedResponse?.videos || [];
+  
+  // Navigation functions
+  const getCurrentVideoIndex = () => {
+    if (!currentVideo || !allVideos.length) return -1;
+    return allVideos.findIndex((v) => v.id === currentVideo.id);
+  };
+
+  const navigateToVideo = (direction: 'next' | 'prev') => {
+    const currentIndex = getCurrentVideoIndex();
+    if (currentIndex === -1) return;
+    
+    let newIndex;
+    if (direction === 'next') {
+      newIndex = currentIndex + 1 >= allVideos.length ? 0 : currentIndex + 1;
+    } else {
+      newIndex = currentIndex - 1 < 0 ? allVideos.length - 1 : currentIndex - 1;
+    }
+    
+    const newVideo = allVideos[newIndex];
+    if (newVideo) {
+      window.location.href = `/video/${newVideo.id}`;
+    }
+  };
   
   
   // Update page meta tags for social sharing
@@ -297,6 +321,27 @@ export default function VideoPage() {
           <div className="flex-1">
             {/* Video player */}
             <div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
+              {/* Navigation arrows */}
+              {allVideos.length > 1 && (
+                <>
+                  <Button
+                    onClick={() => navigateToVideo('prev')}
+                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full z-20"
+                    size="sm"
+                    data-testid="button-prev-video"
+                  >
+                    <ChevronLeft className="w-6 h-6" />
+                  </Button>
+                  <Button
+                    onClick={() => navigateToVideo('next')}
+                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full z-20"
+                    size="sm"
+                    data-testid="button-next-video"
+                  >
+                    <ChevronRight className="w-6 h-6" />
+                  </Button>
+                </>
+              )}
               {currentVideo.videoUrlIframe ? (
                 <iframe
                   src={currentVideo.videoUrlIframe}