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

Enable looping functionality for video carousels to enhance user experience

Browse Source 
Update client/src/components/netflix-grid.tsx to implement infinite scrolling for category rows. When scrolling left and reaching the beginning, the view now jumps to the end, and when scrolling right and reaching the end, it jumps to the beginning, creating a seamless looping effect.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/P3O2FU7
This commit is contained in:
sebastjanartic 2025-08-29 10:56:11 +00:00
parent 10079f756b
commit 8af8f06fe2
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
client/src/components/netflix-grid.tsx
View File

@ -143,9 +143,23 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const currentScroll = scrollRef.current.scrollLeft;
const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
const targetScroll = direction === 'left'
? Math.max(0, currentScroll - scrollAmount)
: Math.min(maxScroll, currentScroll + scrollAmount);
let targetScroll;
if (direction === 'left') {
if (currentScroll <= 0) {
// Jump to end for infinite loop
targetScroll = maxScroll;
} else {
targetScroll = Math.max(0, currentScroll - scrollAmount);
}
} else {
if (currentScroll >= maxScroll - 10) {
// Jump to beginning for infinite loop
targetScroll = 0;
} else {
targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
}
}
scrollRef.current.scrollTo({
left: targetScroll,
@ -164,17 +178,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
const scrollAmount = direction === 'left' ? -3 : 3; // Faster scroll
// Stop at edges, don't loop
if (direction === 'left' && currentScroll <= 0) {
stopAutoScroll();
return;
// Jump to end for infinite loop
scrollRef.current.scrollLeft = maxScroll;
} else if (direction === 'right' && currentScroll >= maxScroll - 5) {
// Jump to beginning for infinite loop
scrollRef.current.scrollLeft = 0;
} else {
scrollRef.current.scrollLeft += scrollAmount;
}
if (direction === 'right' && currentScroll >= maxScroll - 5) {
stopAutoScroll();
return;
}
scrollRef.current.scrollLeft += scrollAmount;
}
}, 10); // Faster animation
};