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

Improve video carousel behavior for a smoother viewing experience

Browse Source 
Refactors the `CategoryRow` component in `netflix-grid.tsx` to implement infinite scrolling for the video carousel. This includes replacing the `getVisibleVideos` function with a `useEffect` hook to handle resetting the `currentIndex` when it exceeds the total number of videos, and updating the JSX to render a duplicated array of videos with a dynamic `translateX` transform for seamless looping.

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:56:19 +00:00
parent dbaa3dbd6d
commit cf560a4003
1 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -157,20 +157,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
scroll(direction); scroll(direction);
}; };
// Get visible videos based on current index // Handle infinite scroll reset
const getVisibleVideos = () => { useEffect(() => {
const totalVideos = category.videos.length; const totalVideos = category.videos.length;
const visible = []; if (currentIndex >= totalVideos) {
// Reset to beginning for infinite loop
for (let i = 0; i < videosToShow; i++) { setTimeout(() => {
const index = (currentIndex + i) % totalVideos; setCurrentIndex(0);
visible.push({ }, 500); // After animation completes
...category.videos[index],
displayIndex: i
});
} }
return visible; }, [currentIndex, category.videos.length]);
};
// Always show both buttons // Always show both buttons
useEffect(() => { useEffect(() => {
@ -271,11 +267,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
</button> </button>
{/* Carousel video row */} {/* Carousel video row */}
<div className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out"> <div
{getVisibleVideos().map((video, index) => { className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out"
const actualIndex = (currentIndex + index) % category.videos.length; style={{
transform: `translateX(-${currentIndex * (224 + 12)}px)` // 224px video width + 12px spacing
}}
>
{[...category.videos, ...category.videos].map((video, index) => {
const actualIndex = index % category.videos.length;
return ( return (
<div key={`${video.id}-${currentIndex}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group"> <div key={`${video.id}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group">
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}
{category.title.includes("Top 10") && ( {category.title.includes("Top 10") && (
<div className="absolute top-1 left-1 z-20 text-white font-black text-3xl md:text-5xl drop-shadow-2xl" <div className="absolute top-1 left-1 z-20 text-white font-black text-3xl md:text-5xl drop-shadow-2xl"