1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
"use client";
import { useRef, useEffect } from "react";
import { Button } from "./button";
import { Play, Pause, Volume2 } from "lucide-react";
import { usePlaybackStore } from "@/stores/playback-store";
interface VideoPlayerProps {
src: string;
poster?: string;
className?: string;
startTime?: number;
}
export function VideoPlayer({ src, poster, className = "", startTime = 0 }: VideoPlayerProps) {
const videoRef = useRef<HTMLVideoElement>(null);
const { isPlaying, currentTime, volume, play, pause, setVolume, setDuration, setCurrentTime } = usePlaybackStore();
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const handleTimeUpdate = () => {
setCurrentTime(video.currentTime);
};
const handleLoadedMetadata = () => {
setDuration(video.duration);
if (startTime > 0) {
video.currentTime = startTime;
}
};
const handleSeekEvent = (e: CustomEvent) => {
video.currentTime = e.detail.time;
};
video.addEventListener("timeupdate", handleTimeUpdate);
video.addEventListener("loadedmetadata", handleLoadedMetadata);
window.addEventListener("playback-seek", handleSeekEvent as EventListener);
return () => {
video.removeEventListener("timeupdate", handleTimeUpdate);
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
window.removeEventListener("playback-seek", handleSeekEvent as EventListener);
};
}, [setCurrentTime, setDuration]);
useEffect(() => {
const video = videoRef.current;
if (!video) return;
if (isPlaying) {
video.play().catch(console.error);
} else {
video.pause();
}
}, [isPlaying]);
useEffect(() => {
const video = videoRef.current;
if (!video) return;
video.volume = volume;
}, [volume]);
const handleSeek = (e: React.MouseEvent<HTMLVideoElement>) => {
const video = videoRef.current;
if (!video) return;
const rect = video.getBoundingClientRect();
const x = e.clientX - rect.left;
const percentage = x / rect.width;
const newTime = percentage * video.duration;
video.currentTime = newTime;
setCurrentTime(newTime);
};
return (
<div className={`relative group ${className}`}>
<video
ref={videoRef}
src={src}
poster={poster}
className="w-full h-full object-cover cursor-pointer"
onClick={handleSeek}
playsInline
preload="metadata"
/>
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
<div className="absolute bottom-2 left-2 right-2 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<Button
variant="ghost"
size="icon"
className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
onClick={isPlaying ? pause : play}
>
{isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
</Button>
<div className="flex-1 h-1 bg-white/30 rounded-full overflow-hidden">
<div
className="h-full bg-white transition-all duration-100"
style={{ width: `${(currentTime / usePlaybackStore.getState().duration) * 100}%` }}
/>
</div>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
onClick={() => setVolume(volume > 0 ? 0 : 1)}
>
<Volume2 className="h-4 w-4" />
</Button>
</div>
</div>
);
}
|
