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);
};
// Get visible videos based on current index
const getVisibleVideos = () => {
// Handle infinite scroll reset
useEffect(() => {
const totalVideos = category.videos.length;
const visible = [];
for (let i = 0; i < videosToShow; i++) {
const index = (currentIndex + i) % totalVideos;
visible.push({
...category.videos[index],
displayIndex: i
});
if (currentIndex >= totalVideos) {
// Reset to beginning for infinite loop
setTimeout(() => {
setCurrentIndex(0);
}, 500); // After animation completes
}
return visible;
};
}, [currentIndex, category.videos.length]);
// Always show both buttons
useEffect(() => {
@ -271,11 +267,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
</button>
{/* 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">
{getVisibleVideos().map((video, index) => {
const actualIndex = (currentIndex + index) % category.videos.length;
<div
className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out"
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 (
<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 */}
{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"