You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
665 B
28 lines
665 B
2 years ago
|
import { FC, MutableRefObject } from "react";
|
||
|
|
||
|
import Typography from "@mui/material/Typography";
|
||
|
import { useTheme } from "@mui/material/styles";
|
||
|
|
||
|
import { formatTime } from "@src/utils/";
|
||
|
|
||
|
import useVideoState from "@utils/hooks/useVideoState";
|
||
|
|
||
|
const Time: FC<{
|
||
|
videoRef: MutableRefObject<HTMLVideoElement | null>;
|
||
|
duration: number;
|
||
|
}> = ({ videoRef, duration }) => {
|
||
|
const theme = useTheme();
|
||
|
|
||
|
const progress = useVideoState((state) => state.progress);
|
||
|
|
||
|
return (
|
||
|
<Typography variant="subtitle1" color={theme.palette.text.secondary}>
|
||
|
{formatTime(Math.round(progress))}
|
||
|
<> / </>
|
||
|
{formatTime(duration)}
|
||
|
</Typography>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default Time;
|