Video Player

1"use client"
2import React, { useRef, useState } from "react"
3import { Button } from "@/components/ui/button" // Internal path
4import { Play, Pause, Volume2, Volume1, VolumeX } from "lucide-react"
5import { motion, AnimatePresence } from "motion/react"
6import { cn } from "@/lib/utils"
7 
8const formatTime = (seconds: number) => {
9  const minutes = Math.floor(seconds / 60)
10  const remainingSeconds = Math.floor(seconds % 60)
11  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
12}
13 
14const CustomSlider = ({
15  value,
16  onChange,
17  className,
18}: {
19  value: number
20  onChange: (value: number) => void
21  className?: string
22}) => {
23  return (
24    <motion.div
25      className={cn(
26        "bg-secondary relative h-1 w-full cursor-pointer rounded-full",
27        className,
28      )}
29      onClick={(e) => {
30        const rect = e.currentTarget.getBoundingClientRect()
31        const x = e.clientX - rect.left
32        const percentage = (x / rect.width) * 100
33        onChange(Math.min(Math.max(percentage, 0), 100))
34      }}
35    >
36      <motion.div
37        className="bg-primary absolute top-0 left-0 h-full rounded-full"
38        style={{ width: `${value}%` }}
39        initial={{ width: 0 }}
40        animate={{ width: `${value}%` }}
41        transition={{ type: "spring", stiffness: 300, damping: 30 }}
42      />
43    </motion.div>
44  )
45}
46 
47const VideoPlayer = ({ src }: { src: string }) => {
48  const videoRef = useRef<HTMLVideoElement>(null)
49  const [isPlaying, setIsPlaying] = useState(false)
50  const [volume, setVolume] = useState(1)
51  const [progress, setProgress] = useState(0)
52  const [isMuted, setIsMuted] = useState(false)
53  const [playbackSpeed, setPlaybackSpeed] = useState(1)
54  const [showControls, setShowControls] = useState(false)
55  const [currentTime, setCurrentTime] = useState(0)
56  const [duration, setDuration] = useState(0)
57 
58  const togglePlay = () => {
59    if (videoRef.current) {
60      if (isPlaying) {
61        videoRef.current.pause()
62      } else {
63        videoRef.current.play()
64      }
65      setIsPlaying(!isPlaying)
66    }
67  }
68 
69  const handleVolumeChange = (value: number) => {
70    if (videoRef.current) {
71      const newVolume = value / 100
72      videoRef.current.volume = newVolume
73      setVolume(newVolume)
74      setIsMuted(newVolume === 0)
75    }
76  }
77 
78  const handleTimeUpdate = () => {
79    if (videoRef.current) {
80      const progress =
81        (videoRef.current.currentTime / videoRef.current.duration) * 100
82      setProgress(Number.isFinite(progress) ? progress : 0)
83// … truncated