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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
import React, { useEffect, useState, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faPlay,
faPause,
faExpand,
faCompress,
faVolumeUp,
faVolumeMute
} from '@fortawesome/free-solid-svg-icons';
// Define a TypeScript interface for the component's props
interface VideoControlsProps {
videoRef: React.RefObject<HTMLVideoElement | null>;
isPlaying: boolean;
onPlayStateChange: (isPlaying: boolean) => void;
}
const VideoControls: React.FC<VideoControlsProps> = ({ videoRef, isPlaying, onPlayStateChange }) => {
const [isFullscreen, setIsFullscreen] = useState(false);
const [progress, setProgress] = useState(0);
const [volume, setVolume] = useState(1);
const [showVolumeSlider, setShowVolumeSlider] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const formatTime = (seconds: number) => {
const hrs = Math.floor(seconds / 3600);
const mins = Math.floor((seconds % 3600) / 60);
const secs = Math.floor(seconds % 60);
if (hrs === 0) {
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
useEffect(() => {
const updateProgress = () => {
const newProgress = (videoRef.current?.currentTime / videoRef.current?.duration) * 100;
setCurrentTime(videoRef.current?.currentTime || 0);
setProgress(newProgress || 0);
};
const currentVideoRef = videoRef.current;
currentVideoRef?.addEventListener('timeupdate', updateProgress);
return () => currentVideoRef?.removeEventListener('timeupdate', updateProgress);
}, [videoRef]);
const handlePlayPause = () => {
if (videoRef.current?.paused) {
videoRef.current?.play();
} else {
videoRef.current?.pause();
}
onPlayStateChange(!videoRef.current?.paused);
};
const handleProgressChange = (e) => {
const newTime = (e.target.value / 100) * videoRef.current?.duration;
videoRef.current.currentTime = newTime;
setProgress(e.target.value);
};
const handleVolumeChange = (e) => {
const vol = e.target.value;
if (videoRef.current) {
videoRef.current.volume = vol;
}
setVolume(vol);
};
const toggleFullscreen = () => {
if (!document.fullscreenElement) {
videoRef.current?.requestFullscreen();
setIsFullscreen(true);
} else {
document.exitFullscreen();
setIsFullscreen(false);
}
};
const handleWheel = (e) => {
e.preventDefault();
e.target.blur();
};
return (
<div className="video-controls bg-gray-700 bg-opacity-75 p-1 rounded space-x-4 flex items-center">
<button
onClick={handlePlayPause}
className="p-2 rounded-full hover:bg-gray-600 transition"
>
<FontAwesomeIcon
icon={isPlaying ? faPause : faPlay}
className="text-white"
size="lg"
/>
</button>
<div className="text-white ml-3">
{formatTime(currentTime)} /{" "}
{formatTime(videoRef.current?.duration || 0)}
</div>
<div className="relative flex-grow mx-4 flex items-center">
<input
type="range"
value={progress}
onChange={handleProgressChange}
onWheel={handleWheel}
className="w-full cursor-pointer slider-thumb bg-red-500"
title=""
/>
</div>
<button
onClick={() => setShowVolumeSlider(!showVolumeSlider)}
className="p-2 rounded-full hover:bg-gray-600 transition relative"
>
<FontAwesomeIcon
icon={volume > 0 ? faVolumeUp : faVolumeMute}
className="text-white"
size="lg"
/>
{showVolumeSlider && (
<div className="absolute mb-7 bottom-8 left-1/2 transform -translate-x-1/2 w-20">
<input
type="range"
value={volume}
onChange={handleVolumeChange}
min="0"
max="1"
step="0.01"
className="w-full cursor-pointer slider-thumb mb-4"
title=""
style={{ transform: "rotate(270deg)" }}
/>
</div>
)}
</button>
<button
onClick={toggleFullscreen}
className="p-2 rounded-full hover:bg-gray-600 transition"
>
<FontAwesomeIcon
icon={isFullscreen ? faCompress : faExpand}
className="text-white"
size="lg"
/>
</button>
</div>
);
};
export default VideoControls;
|
