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

Improve carousel by scrolling to the middle on load

Browse Source 
Initialize SimpleCarousel component to scroll to the middle of the category videos on mount using `useEffect` and `setTimeout` to ensure content is rendered before scrolling.

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 17:18:40 +00:00
parent 855d7e2448
commit bf2a6ca6af
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/simple-carousel.tsx
View File

@ -1,4 +1,4 @@
import { useState, useRef } from "react";
import { useState, useRef, useEffect } from "react";
import { type Video } from "@shared/schema";
import VideoCard from "./video-card";
import { ChevronLeft, ChevronRight } from "lucide-react";
@ -53,6 +53,25 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
setIsScrolling(false);
};
// Initialize scroll position in the middle so we can scroll both ways
useEffect(() => {
if (scrollContainerRef.current && category.videos.length > 0) {
// Wait for content to load, then scroll to middle
setTimeout(() => {
if (scrollContainerRef.current) {
const containerWidth = scrollContainerRef.current.scrollWidth;
const viewportWidth = scrollContainerRef.current.clientWidth;
const middlePosition = (containerWidth - viewportWidth) / 2;
scrollContainerRef.current.scrollTo({
left: middlePosition,
behavior: 'auto'
});
}
}, 100);
}
}, [category.videos.length]);
return (
<div className="relative group mb-8">
<h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">