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

Improve video navigation with previous and next buttons

Browse Source 
Update VideoPage to fetch more recommended videos and enhance the functionality and styling of previous/next video navigation buttons, including added console logs for debugging.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/zJYuV6w
This commit is contained in:
sebastjanartic 2025-08-30 23:09:51 +00:00
parent 011730c699
commit 3eff6352c4
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756595314312.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

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

@ -70,7 +70,7 @@ export default function VideoPage() {
// Fetch recommended videos (excluding current video) // Fetch recommended videos (excluding current video)
const { data: recommendedResponse } = useQuery<VideosResponse>({ const { data: recommendedResponse } = useQuery<VideosResponse>({
queryKey: ["/api/videos"], queryKey: ["/api/videos", "limit=150"],
queryFn: () => fetch("/api/videos?limit=150&offset=0").then(res => res.json()), queryFn: () => fetch("/api/videos?limit=150&offset=0").then(res => res.json()),
enabled: !!videoId, enabled: !!videoId,
}); });
@ -85,8 +85,17 @@ export default function VideoPage() {
}; };
const navigateToVideo = (direction: 'next' | 'prev') => { const navigateToVideo = (direction: 'next' | 'prev') => {
console.log('Navigate clicked:', direction);
console.log('All videos length:', allVideos.length);
console.log('Current video:', currentVideo?.title);
const currentIndex = getCurrentVideoIndex(); const currentIndex = getCurrentVideoIndex();
if (currentIndex === -1) return; console.log('Current index:', currentIndex);
if (currentIndex === -1) {
console.log('Video not found in list');
return;
}
let newIndex; let newIndex;
if (direction === 'next') { if (direction === 'next') {
@ -96,6 +105,8 @@ export default function VideoPage() {
} }
const newVideo = allVideos[newIndex]; const newVideo = allVideos[newIndex];
console.log('New video:', newVideo?.title);
if (newVideo) { if (newVideo) {
setLocation(`/video/${newVideo.id}`); setLocation(`/video/${newVideo.id}`);
} }
@ -415,22 +426,32 @@ export default function VideoPage() {
{allVideos.length > 1 && ( {allVideos.length > 1 && (
<> <>
<Button <Button
onClick={() => navigateToVideo('prev')} onClick={(e) => {
className="absolute left-1 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-3 rounded-full shadow-lg hidden md:flex items-center justify-center" e.preventDefault();
style={{ zIndex: 999, pointerEvents: 'auto' }} e.stopPropagation();
console.log('Prev button clicked');
navigateToVideo('prev');
}}
className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-4 rounded-full shadow-xl flex items-center justify-center"
style={{ zIndex: 9999, pointerEvents: 'auto', display: 'flex' }}
size="sm" size="sm"
data-testid="button-prev-video" data-testid="button-prev-video"
> >
<ChevronLeft className="w-5 h-5" /> <ChevronLeft className="w-6 h-6" />
</Button> </Button>
<Button <Button
onClick={() => navigateToVideo('next')} onClick={(e) => {
className="absolute right-1 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-3 rounded-full shadow-lg hidden md:flex items-center justify-center" e.preventDefault();
style={{ zIndex: 999, pointerEvents: 'auto' }} e.stopPropagation();
console.log('Next button clicked');
navigateToVideo('next');
}}
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-4 rounded-full shadow-xl flex items-center justify-center"
style={{ zIndex: 9999, pointerEvents: 'auto', display: 'flex' }}
size="sm" size="sm"
data-testid="button-next-video" data-testid="button-next-video"
> >
<ChevronRight className="w-5 h-5" /> <ChevronRight className="w-6 h-6" />
</Button> </Button>
</> </>
)} )}