"use client"; import React, { useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Play, Pause, Volume2, Volume1, VolumeX } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; const formatTime = (seconds: number) => { const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds % 60); return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`; }; const CustomSlider = ({ value, onChange, className, }: { value: number; onChange: (value: number) => void; className?: string; }) => { return ( { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const percentage = (x / rect.width) * 100; onChange(Math.min(Math.max(percentage, 0), 100)); }} > ); }; const VideoPlayer = ({ src }: { src: string }) => { const videoRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [volume, setVolume] = useState(1); const [progress, setProgress] = useState(0); const [isMuted, setIsMuted] = useState(false); const [playbackSpeed, setPlaybackSpeed] = useState(1); const [showControls, setShowControls] = useState(false); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const togglePlay = () => { if (videoRef.current) { if (isPlaying) { videoRef.current.pause(); } else { videoRef.current.play(); } setIsPlaying(!isPlaying); } }; const handleVolumeChange = (value: number) => { if (videoRef.current) { const newVolume = value / 100; videoRef.current.volume = newVolume; setVolume(newVolume); setIsMuted(newVolume === 0); } }; const handleTimeUpdate = () => { if (videoRef.current) { const progress = (videoRef.current.currentTime / videoRef.current.duration) * 100; setProgress(isFinite(progress) ? progress : 0); setCurrentTime(videoRef.current.currentTime); setDuration(videoRef.current.duration); } }; const handleSeek = (value: number) => { if (videoRef.current && videoRef.current.duration) { const time = (value / 100) * videoRef.current.duration; if (isFinite(time)) { videoRef.current.currentTime = time; setProgress(value); } } }; const toggleMute = () => { if (videoRef.current) { videoRef.current.muted = !isMuted; setIsMuted(!isMuted); if (!isMuted) { setVolume(0); } else { setVolume(1); videoRef.current.volume = 1; } } }; const setSpeed = (speed: number) => { if (videoRef.current) { videoRef.current.playbackRate = speed; setPlaybackSpeed(speed); } }; return ( setShowControls(true)} onMouseLeave={() => setShowControls(false)} >

); }; export default VideoPlayer;