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

Adjust video scrolling speed for smoother playback

Browse Source 
Update scrolling logic in `netflix-grid.tsx` to use refined intervals and base speeds for both normal and fast modes, aiming to resolve reported skipping issues and improve overall animation smoothness.

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:51:12 +00:00
parent 80c9e87553
commit 0f55b741e9
1 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -160,13 +160,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
// Start new interval with updated speed immediately // Start new interval with updated speed immediately
const baseSpeed = newSpeed === 'fast' ? 2.5 : 0.8; const baseSpeed = newSpeed === 'fast' ? 2.5 : 0.8;
const interval = newSpeed === 'fast' ? 8 : 12; const interval = newSpeed === 'fast' ? 10 : 16;
scrollIntervalRef.current = setInterval(() => { scrollIntervalRef.current = setInterval(() => {
setTranslateX(prev => { setTranslateX(prev => {
const videosPerStep = 4; // Move 4 videos at once const speed = direction === 'right' ? -baseSpeed : baseSpeed;
const adjustedSpeed = speedMode === 'fast' ? videosPerStep * videoWidth * 0.03 : videosPerStep * videoWidth * 0.01;
const speed = direction === 'right' ? -adjustedSpeed : adjustedSpeed;
const newX = prev + speed; const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth; const totalWidth = category.videos.length * videoWidth;
@ -198,9 +196,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
// Start continuous smooth scrolling with variable speed // Start continuous smooth scrolling with variable speed
scrollIntervalRef.current = setInterval(() => { scrollIntervalRef.current = setInterval(() => {
setTranslateX(prev => { setTranslateX(prev => {
// Speed changes based on mode: move by full videos (4 videos at once) // Speed changes based on mode: normal (0.5px) or fast (1.2px) - smooth video by video
const videosPerStep = 4; // Move 4 videos at once const baseSpeed = speedMode === 'fast' ? 1.2 : 0.5;
const baseSpeed = speedMode === 'fast' ? videosPerStep * videoWidth * 0.03 : videosPerStep * videoWidth * 0.01;
const speed = direction === 'right' ? -baseSpeed : baseSpeed; const speed = direction === 'right' ? -baseSpeed : baseSpeed;
const newX = prev + speed; const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth; const totalWidth = category.videos.length * videoWidth;
@ -218,7 +215,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
return adjustedX; return adjustedX;
}); });
}, speedMode === 'fast' ? 8 : 12); // Faster interval for fast mode }, speedMode === 'fast' ? 10 : 16); // Slower intervals for smoother animation
}; };
// Initialize with first video on the left side // Initialize with first video on the left side