sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add navigation arrows to move between videos seamlessly

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 20:29:15 +00:00
parent ff859c58bf
commit f157385dd6
1 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/pages/VideoPage.tsx
View File

@ -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}