From bf2a6ca6af351991bdd652a02ba682a447e5fb94 Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Fri, 29 Aug 2025 17:18:40 +0000 Subject: [PATCH] Improve carousel by scrolling to the middle on load 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 --- client/src/components/simple-carousel.tsx | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx index 82acf33..690f6b1 100644 --- a/client/src/components/simple-carousel.tsx +++ b/client/src/components/simple-carousel.tsx @@ -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 (