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

Improve carousel scrolling behavior for smoother content navigation

Browse Source 
Refactors the `CategoryRow` component in `netflix-grid.tsx` to adjust scroll behavior, using a fixed 80% of container width for scrolling and removing the interval-based auto-scroll.

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/QCN70f2
This commit is contained in:
sebastjanartic 2025-08-29 14:42:10 +00:00
parent dde1b37180
commit 208d3d9f76
1 changed files with 19 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -138,46 +138,29 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const [isRightButtonHovered, setIsRightButtonHovered] = useState(false); const [isRightButtonHovered, setIsRightButtonHovered] = useState(false);
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (!scrollRef.current) return;
const isMobile = window.innerWidth < 768;
const containerWidth = scrollRef.current.clientWidth;
const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.7;
if (direction === 'left') { const containerWidth = scrollRef.current.clientWidth;
scrollRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); const scrollAmount = containerWidth * 0.8; // 80% of container width
} else {
scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' }); console.log(`Scrolling ${direction}, container width: ${containerWidth}, scroll amount: ${scrollAmount}`);
}
if (direction === 'left') {
scrollRef.current.scrollBy({
left: -scrollAmount,
behavior: 'smooth'
});
} else {
scrollRef.current.scrollBy({
left: scrollAmount,
behavior: 'smooth'
});
} }
}; };
const startAutoScroll = (direction: 'left' | 'right') => { const startAutoScroll = (direction: 'left' | 'right') => {
if (scrollIntervalRef.current) { // Just do single scroll on hover start
clearInterval(scrollIntervalRef.current); scroll(direction);
}
// Force fast scrolling when hovering
const isHovering = true;
scrollIntervalRef.current = setInterval(() => {
if (scrollRef.current) {
const currentScroll = scrollRef.current.scrollLeft;
const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
const scrollAmount = direction === 'left' ? -10 : 10; // Much faster scroll
let newScroll = currentScroll + scrollAmount;
if (direction === 'left' && newScroll <= 0) {
// Jump to end for infinite loop
newScroll = maxScroll;
} else if (direction === 'right' && newScroll >= maxScroll) {
// Jump to beginning for infinite loop
newScroll = 0;
}
scrollRef.current.scrollLeft = newScroll;
}
}, 8); // Fast interval
}; };
const stopAutoScroll = () => { const stopAutoScroll = () => {