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
|
import React from "react";
import YouTube from "react-youtube";
import { IoPlay, IoPause } from "react-icons/io5";
import { playTimes } from "../../constants";
import * as Styled from "./index.styled";
interface Props {
id: string;
currentTry: number;
}
export function Player({ id, currentTry }: Props) {
const opts = {
width: "0",
height: "0",
};
// react-youtube doesn't export types for this
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const playerRef = React.useRef<any>(null);
const currentPlayTime = playTimes[currentTry];
const [play, setPlay] = React.useState<boolean>(false);
const [currentTime, setCurrentTime] = React.useState<number>(0);
const [isReady, setIsReady] = React.useState<boolean>(false);
React.useEffect(() => {
setInterval(() => {
playerRef.current?.internalPlayer
.getCurrentTime()
.then((time: number) => {
setCurrentTime(time);
});
}, 250);
}, []);
React.useEffect(() => {
if (play) {
if (currentTime * 1000 >= currentPlayTime) {
playerRef.current?.internalPlayer.pauseVideo();
playerRef.current?.internalPlayer.seekTo(0);
setPlay(false);
}
}
}, [play, currentTime]);
// don't call play video each time currentTime changes
const startPlayback = React.useCallback(() => {
playerRef.current?.internalPlayer.playVideo();
setPlay(true);
}, []);
const setReady = React.useCallback(() => {
setIsReady(true);
}, []);
return (
<>
<YouTube opts={opts} videoId={id} onReady={setReady} ref={playerRef} />
{isReady ? (
<>
<Styled.ProgressBackground>
{currentTime !== 0 && <Styled.Progress value={currentTime} />}
{playTimes.map((playTime) => (
<Styled.Separator
style={{ left: `${(playTime / 16000) * 100}%` }}
key={playTime}
/>
))}
</Styled.ProgressBackground>
<Styled.TimeStamps>
<Styled.TimeStamp>1s</Styled.TimeStamp>
<Styled.TimeStamp>16s</Styled.TimeStamp>
</Styled.TimeStamps>
{!play && (
<IoPlay
style={{ cursor: "pointer" }}
size={36}
color="var(--cl-green-6)"
onClick={startPlayback}
/>
)}
{play && (
<IoPause
style={{ cursor: "pointer" }}
size={36}
color="var(--cl-green-6)"
onClick={startPlayback}
/>
)}
</>
) : (
<p>Loading player...</p>
)}
</>
);
}
|
