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.
90 lines
2.3 KiB
90 lines
2.3 KiB
import { FC, MutableRefObject } from "react";
|
|
|
|
import Box from "@mui/material/Box";
|
|
import Tooltip from "@mui/material/Tooltip";
|
|
|
|
import Fullscreen from "@mui/icons-material/Fullscreen";
|
|
import Pause from "@mui/icons-material/Pause";
|
|
import PlayArrow from "@mui/icons-material/PlayArrow";
|
|
import Settings from "@mui/icons-material/Settings";
|
|
import SkipNext from "@mui/icons-material/SkipNext";
|
|
import Subtitles from "@mui/icons-material/Subtitles";
|
|
import VolumeUp from "@mui/icons-material/VolumeUp";
|
|
|
|
import { VideoStatus } from "@interfaces/videoPlayer";
|
|
|
|
import useVideoState from "@utils/hooks/useVideoState";
|
|
|
|
import Time from "@components/Player/Time";
|
|
|
|
const iconStyles = {
|
|
mr: 1.5,
|
|
cursor: "pointer"
|
|
};
|
|
|
|
const Actions: FC<{
|
|
duration: number;
|
|
videoRef: MutableRefObject<HTMLVideoElement | null>;
|
|
}> = ({ duration, videoRef }) => {
|
|
const togglePlaying = useVideoState((state) => state.togglePlaying);
|
|
const playing = useVideoState((state) => state.playing);
|
|
|
|
const muted = useVideoState((state) => state.muted);
|
|
const toggleMuted = useVideoState((state) => state.toggleMuted);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
display: "flex",
|
|
width: "100%",
|
|
height: 40,
|
|
px: 1.5,
|
|
bottom: 5,
|
|
left: 0
|
|
}}
|
|
>
|
|
<Box sx={{ flexGrow: 1, display: "flex", alignItems: "center" }}>
|
|
<Tooltip title={playing == VideoStatus.Playing ? "Pause" : "Play"}>
|
|
<Box
|
|
sx={{
|
|
...iconStyles,
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}
|
|
onClick={() => togglePlaying()}
|
|
>
|
|
{playing == VideoStatus.Playing ? <Pause /> : <PlayArrow />}
|
|
</Box>
|
|
</Tooltip>
|
|
<Tooltip title="Play next video">
|
|
<SkipNext sx={iconStyles} />
|
|
</Tooltip>
|
|
<Tooltip title={muted ? "Unmute" : "Mute"}>
|
|
<VolumeUp onClick={() => toggleMuted()} sx={iconStyles} />
|
|
</Tooltip>
|
|
<Time duration={duration} videoRef={videoRef} />
|
|
</Box>
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
<Tooltip title="Turn on captions">
|
|
<Subtitles sx={iconStyles} />
|
|
</Tooltip>
|
|
<Tooltip title="Change quality">
|
|
<Settings sx={iconStyles} />
|
|
</Tooltip>
|
|
<Tooltip title="Fullscreen">
|
|
<Fullscreen
|
|
sx={{
|
|
...iconStyles,
|
|
transition: "font-size .2s",
|
|
"&:hover": { fontSize: "2rem" }
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Actions;
|