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

Improve video scrolling behavior for smoother navigation

Browse Source 
Refactor `CategoryRow` to use `setInterval` for smoother auto-scrolling of videos, replacing `requestAnimationFrame`. Adjusts scroll speed and interval for better user experience.

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 15:21:15 +00:00
parent feec173d19
commit 9b08333985
1 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -133,7 +133,7 @@ interface CategoryRowProps {
function CategoryRow({ category, onVideoClick }: CategoryRowProps) { function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const scrollIntervalRef = useRef<number | null>(null); const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
const [showLeftButton, setShowLeftButton] = useState(false); const [showLeftButton, setShowLeftButton] = useState(false);
const [showRightButton, setShowRightButton] = useState(true); const [showRightButton, setShowRightButton] = useState(true);
@ -148,18 +148,17 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}; };
const startAutoScroll = (direction: 'left' | 'right') => { const startAutoScroll = (direction: 'left' | 'right') => {
// Clear any existing animation // Clear any existing interval
if (scrollIntervalRef.current) { if (scrollIntervalRef.current) {
cancelAnimationFrame(scrollIntervalRef.current); clearInterval(scrollIntervalRef.current);
} }
setIsScrolling(true); setIsScrolling(true);
// Continuous smooth flow - videos flow like a stream // Start continuous smooth scrolling with interval
const speed = direction === 'right' ? -2 : 2; // Pixels per frame scrollIntervalRef.current = setInterval(() => {
const animate = () => {
setTranslateX(prev => { setTranslateX(prev => {
const speed = direction === 'right' ? -3 : 3; // Pixels per step
const newX = prev + speed; const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth; const totalWidth = category.videos.length * videoWidth;
@ -172,13 +171,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
return newX; return newX;
}); });
}, 30); // Update every 30ms for smooth flow
if (isScrolling) {
scrollIntervalRef.current = requestAnimationFrame(animate);
}
};
animate();
}; };
// Initialize in middle section for infinite scroll // Initialize in middle section for infinite scroll
@ -197,7 +190,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const stopAutoScroll = () => { const stopAutoScroll = () => {
setIsScrolling(false); setIsScrolling(false);
if (scrollIntervalRef.current) { if (scrollIntervalRef.current) {
cancelAnimationFrame(scrollIntervalRef.current); clearInterval(scrollIntervalRef.current);
scrollIntervalRef.current = null; scrollIntervalRef.current = null;
} }
}; };