import { useState, useRef, useEffect } from "react"; // A new component to handle individual video item logic const GalleryItem = ({ item, videoId, hoveredVideo, setHoveredVideo, }: { item: string; videoId: string; hoveredVideo: string | null; setHoveredVideo: (id: string | null) => void; }) => { // Create a ref to access the video element directly const videoRef = useRef(null); useEffect(() => { const videoElement = videoRef.current; if (!videoElement) return; // Logic to play or pause the video based on the shared hover state if (hoveredVideo === null || hoveredVideo === videoId) { // Play if no video is hovered, or if this is the hovered video videoElement.play().catch((error) => { // Autoplay can be blocked, this prevents console errors console.log("Video play failed:", error); }); } else { // Pause if a different video is being hovered videoElement.pause(); } }, [hoveredVideo, videoId]); // Rerun this effect when the hoveredVideo changes return (

setHoveredVideo(videoId)} // Reset to null when the mouse leaves onMouseLeave={() => setHoveredVideo(null)}>

{item}

); }; const GalleryColumn = ({ items, direction, columnIndex, hoveredVideo, setHoveredVideo, }: { items: string[]; direction: "up" | "down"; columnIndex: number; hoveredVideo: string | null; setHoveredVideo: (id: string | null) => void; }) => (

{[...items, ...items].map((item, index) => { // Create a unique ID for each video item const videoId = `${columnIndex}-${index}`; return ( ); })}

); const GallerySection = () => { const galleryItems1 = [ "FIT CHECK", "THE DEGENERATES", "Alt Spectrum", "ZOO BREAK", ]; const galleryItems2 = [ "PASSENGERS", "It's all yarn", "MICROVERSE", "Mobile Homes", ]; const galleryItems3 = [ "Off season Santa", "MUNDO QUESO", "ULTRA WIDE", "WINDOW SEAT", ]; // Shared state to track the currently hovered video const [hoveredVideo, setHoveredVideo] = useState(null); return (

); }; export default GallerySection;

Scroll Gallery Section

Preview

Dependencies

Source