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

Improve video scrolling behavior by separating navigation and speed toggling

Browse Source 
Refactors the `CategoryRow` component in `netflix-grid.tsx` to decouple horizontal scrolling from speed toggling. A new `toggleSpeed` function is introduced, and the `scroll` function now only handles single-step movement. Click handlers are updated to call `toggleSpeed` if the row is already scrolling, otherwise they perform a single scroll step.

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:42:07 +00:00
parent 499c59d717
commit f2fcea005b
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -144,13 +144,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const videoWidth = 120; // Width including spacing
const scroll = (direction: 'left' | 'right') => {
// Toggle speed mode on click
setSpeedMode(prev => prev === 'normal' ? 'fast' : 'normal');
// Only move one step when clicked (no speed change here)
const step = direction === 'right' ? -videoWidth : videoWidth;
setTranslateX(prev => prev + step);
};
const toggleSpeed = () => {
// Toggle speed mode without moving
setSpeedMode(prev => prev === 'normal' ? 'fast' : 'normal');
};
const startAutoScroll = (direction: 'left' | 'right') => {
// Clear any existing interval
if (scrollIntervalRef.current) {
@ -214,7 +217,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
scroll('left');
// If already scrolling, just toggle speed, otherwise do single scroll
if (isScrolling) {
toggleSpeed();
} else {
scroll('left');
}
}}
onMouseEnter={(e) => {
e.stopPropagation();
@ -235,7 +243,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
scroll('right');
// If already scrolling, just toggle speed, otherwise do single scroll
if (isScrolling) {
toggleSpeed();
} else {
scroll('right');
}
}}
onMouseEnter={(e) => {
e.stopPropagation();