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

Improve video scrolling with seamless infinite looping

Browse Source 
Update client-side logic to implement a triple-copy approach for videos, enabling smooth, seamless infinite scrolling. Adjust initial translation and scroll calculations to support the new wrapping mechanism.

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/yexZbDm
This commit is contained in:
sebastjanartic 2025-08-29 16:57:14 +00:00
parent a069bca552
commit ba2856ede7
1 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -144,17 +144,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const videoWidth = 120; // Width including spacing
const scroll = (direction: 'left' | 'right') => {
// Simple step movement with wrap-around logic
// Smooth movement with seamless wrapping
const step = direction === 'right' ? -200 : 200;
setTranslateX(prev => {
const newX = prev + step;
const maxWidth = category.videos.length * 220; // Approximate video width
const singleSetWidth = category.videos.length * 220; // One complete set
// Wrap around logic for infinite scroll
if (direction === 'right' && newX < -maxWidth) {
return 0; // Reset to start when going too far right
} else if (direction === 'left' && newX > 0) {
return -maxWidth + 800; // Jump to end when going too far left
// Seamless infinite scroll - when in middle copy, wrap smoothly
if (direction === 'right' && newX <= -singleSetWidth * 2) {
// When moved past second copy, jump back to first copy position
return newX + singleSetWidth;
} else if (direction === 'left' && newX >= 0) {
// When moved past first copy, jump back to second copy position
return newX - singleSetWidth;
}
return newX;
@ -231,8 +233,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
// Initialize with first video on the left side
useEffect(() => {
if (category.videos.length > 0) {
// Start with video 1 visible on the left side
setTranslateX(0);
// Start in middle copy for seamless wrapping
const singleSetWidth = category.videos.length * 220;
setTranslateX(-singleSetWidth);
}
}, [category.videos.length]);
@ -348,32 +351,36 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
willChange: 'transform'
}}
>
{/* Simple list to test movement */}
{category.videos.map((video, index) => (
<div key={`${video.id}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group">
{/* Top 10 Number overlay for first category */}
{category.title.includes("Top 10") && (
<div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none"
style={{
textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
WebkitTextStroke: '2px rgba(0,0,0,0.8)',
transform: 'none',
transition: 'none'
}}>
{index + 1}
{/* Triple copy for seamless infinite scroll */}
{[...category.videos, ...category.videos, ...category.videos].map((video, index) => {
const originalIndex = index % category.videos.length;
const copyNumber = Math.floor(index / category.videos.length) + 1;
return (
<div key={`${video.id}-copy${copyNumber}-${originalIndex}`} className="flex-shrink-0 w-28 md:w-52 relative group">
{/* Top 10 Number overlay for first category */}
{category.title.includes("Top 10") && (
<div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none"
style={{
textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
WebkitTextStroke: '2px rgba(0,0,0,0.8)',
transform: 'none',
transition: 'none'
}}>
{originalIndex + 1}
</div>
)}
<VideoCard
video={video}
onClick={onVideoClick}
className="w-full hover:scale-105 hover:z-10 transition-all duration-300 group-hover:shadow-xl rounded-md overflow-hidden"
/>
{/* Debug number to see movement - shows copy and original position */}
<div className="absolute bottom-0 right-0 bg-red-500 text-white text-xs px-1 rounded">
{copyNumber}.{originalIndex + 1}
</div>
)}
<VideoCard
video={video}
onClick={onVideoClick}
className="w-full hover:scale-105 hover:z-10 transition-all duration-300 group-hover:shadow-xl rounded-md overflow-hidden"
/>
{/* Debug number to see movement */}
<div className="absolute bottom-0 right-0 bg-red-500 text-white text-xs px-1 rounded">
{index + 1}
</div>
</div>
))}
);
})}
</div>
</div>
</div>