-
Notifications
You must be signed in to change notification settings - Fork 74
/
index.tsx
113 lines (104 loc) · 3.37 KB
/
index.tsx
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
import { FC, useEffect, useState } from "react";
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
import PauseIcon from "@mui/icons-material/Pause";
import StopIcon from "@mui/icons-material/Stop";
import { IconButton, Slider, Stack, Tooltip, Typography } from "@mui/material";
import RepeatIcon from "@mui/icons-material/Repeat";
interface CurrentTrackProps {
isPaused: boolean;
startedAt: string;
duration: number;
repeat: boolean;
onSeek: Function;
onResume: Function;
onPause: Function;
onRepeat: Function;
onStop: Function;
}
export const CurrentTrack: FC<CurrentTrackProps> = (props) => {
const [startedAt, setStartedAt] = useState<string>(props.startedAt);
const [currentTime, setCurrentTime] = useState<number>(
Math.floor(
(new Date().getTime() - new Date(`${startedAt}`).getTime()) / 1000
)
);
const handleChange = (event: Event, newValue: number | number[]) => {
setCurrentTime(newValue as number);
props.onSeek(newValue as number);
};
useEffect(() => {
const interval = setInterval(() => {
if (props.isPaused) {
return;
}
if (currentTime < props.duration) {
setCurrentTime((currentTime) => currentTime + 1);
} else {
// start from beginning again if repeating
// TODO: find correct way
if (props.repeat) {
setCurrentTime(0);
setStartedAt(new Date().toISOString());
return;
}
setCurrentTime(props.duration);
}
}, 1000);
return () => clearInterval(interval);
}, [currentTime, props.duration, props.isPaused, props.repeat]);
function valueLabelFormat(value: number) {
return new Date(1000 * value).toISOString().substr(11, 8);
}
const onPauseOrResume = () => {
props.isPaused ? props.onResume() : props.onPause();
};
return (
<div>
<Stack direction="row" spacing={0} alignItems="center" sx={{ mb: 1 }}>
<Tooltip title={props.isPaused ? "Play" : "Pause"} placement="top">
<IconButton size="large" onClick={() => onPauseOrResume()}>
{props.isPaused ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
</Tooltip>
<Tooltip title="Stop" placement="top">
<IconButton size="large" onClick={() => props.onStop()}>
<StopIcon />
</IconButton>
</Tooltip>
<Tooltip title="Repeat" placement="top">
<IconButton
size="large"
color={props.repeat ? "primary" : "inherit"}
onClick={() => props.onRepeat(!props.repeat)}
>
<RepeatIcon />
</IconButton>
</Tooltip>
<Stack
spacing={2}
direction="row"
sx={{
mb: 1,
flexGrow: 1,
}}
alignItems="center"
>
<Typography sx={{ color: "text.secondary" }}>
{new Date(1000 * currentTime || 0).toISOString().substr(11, 8)}
</Typography>
<Slider
value={currentTime}
valueLabelFormat={valueLabelFormat}
valueLabelDisplay="auto"
onChange={handleChange}
max={props.duration}
min={0}
/>
<Typography sx={{ color: "text.secondary" }}>
{new Date(1000 * props.duration || 0).toISOString().substr(11, 8)}
</Typography>
</Stack>
</Stack>
</div>
);
};