Video Carousel

1"use client"
2 
3import React, { useEffect, useRef, useState, useCallback } from "react"
4import { useInView, animate } from "framer-motion"
5import { HugeiconsIcon } from "@hugeicons/react"
6import { PauseIcon, PlayIcon } from "@hugeicons/core-free-icons"
7 
8export interface VideoItem {
9    url: string
10    duration: number
11}
12 
13export interface VideoCarouselProps {
14    videos: VideoItem[]
15    className?: string
16}
17 
18interface VideoState {
19    currentVideoId: number
20    isPlaying: boolean
21    hasStarted: boolean
22}
23 
24export function VideoCarousel({ videos, className = "" }: VideoCarouselProps) {
25    const containerRef = useRef<HTMLDivElement>(null)
26    const carouselRef = useRef<HTMLDivElement>(null)
27    const sliderRef = useRef<HTMLDivElement>(null)
28    const videoRef = useRef<(HTMLVideoElement | null)[]>([])
29    const videoSpanRef = useRef<(HTMLSpanElement | null)[]>([])
30    const videoDivRef = useRef<(HTMLSpanElement | null)[]>([])
31 
32    const [containerWidth, setContainerWidth] = useState(0)
33    const [videoState, setVideoState] = useState<VideoState>({
34        currentVideoId: 0,
35        isPlaying: false,
36        hasStarted: false,
37    })
38 
39    const { currentVideoId, isPlaying, hasStarted } = videoState
40    const isInView = useInView(carouselRef, { once: true, amount: 0.5 })
41 
42    const getVideoWidth = useCallback((): number => {
43        if (!containerWidth) return 0
44        return containerWidth < 640 ? containerWidth * 0.88 : containerWidth * 0.7
45    }, [containerWidth])
46 
47    const getGap = useCallback((): number => {
48        if (!containerWidth) return 80
49        return containerWidth < 640 ? 40 : 80
50    }, [containerWidth])
51 
52    const getTranslateValue = useCallback((): number => {
53        if (!containerWidth) return 0
54        const videoWidth = getVideoWidth()
55        const gap = getGap()
56        const offset = (containerWidth - videoWidth) / 2
57        const slideOffset = currentVideoId * (videoWidth + gap)
58        return offset - slideOffset
59    }, [containerWidth, currentVideoId, getVideoWidth, getGap])
60 
61    const getResponsiveWidth = useCallback((): string => {
62        if (!containerWidth) return "60px"
63        if (containerWidth < 480) return `${containerWidth * 0.15}px`
64        if (containerWidth < 760) return `${containerWidth * 0.12}px`
65        if (containerWidth < 1200) return `${containerWidth * 0.1}px`
66        return `${containerWidth * 0.08}px`
67    }, [containerWidth])
68 
69    useEffect(() => {
70        const updateWidth = () => {
71// … truncated