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

Enable infinite scrolling for video categories in the grid view

Browse Source 
Modify the `CategoryRow` component in `netflix-grid.tsx` to implement infinite scrolling for video categories. Adjust the scroll logic to loop back to the beginning or end when the boundary is reached, providing a seamless carousel experience. Also, update the auto-scroll interval for smoother animations.

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:53:37 +00:00
parent 593d6ce327
commit 26bd63a2f4
1 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -137,15 +137,29 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (scrollRef.current) {
// Responsive scroll amount - extra small cards for Netflix style
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
// More responsive scroll amounts for better mobile experience
const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.75; const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.75;
const currentScroll = scrollRef.current.scrollLeft; const currentScroll = scrollRef.current.scrollLeft;
const targetScroll = direction === 'left' const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
? Math.max(0, currentScroll - scrollAmount)
: currentScroll + scrollAmount; let targetScroll;
if (direction === 'left') {
if (currentScroll <= 0) {
// If at the beginning, jump to the end (infinite loop)
targetScroll = maxScroll;
} else {
targetScroll = Math.max(0, currentScroll - scrollAmount);
}
} else {
if (currentScroll >= maxScroll - 10) {
// If at the end, jump to the beginning (infinite loop)
targetScroll = 0;
} else {
targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
}
}
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
left: targetScroll, left: targetScroll,
@ -160,10 +174,21 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
} }
scrollIntervalRef.current = setInterval(() => { scrollIntervalRef.current = setInterval(() => {
if (scrollRef.current) { if (scrollRef.current) {
const scrollAmount = direction === 'left' ? -1.5 : 1.5; const currentScroll = scrollRef.current.scrollLeft;
scrollRef.current.scrollLeft += scrollAmount; const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
const scrollAmount = direction === 'left' ? -2 : 2;
if (direction === 'left' && currentScroll <= 0) {
// 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;
}
} }
}, 8); // ~120fps for smoother animation }, 12); // Smooth 60fps animation
}; };
const stopAutoScroll = () => { const stopAutoScroll = () => {