mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-10 05:05:26 +03:00
Move controls to separate component and make features configurable
This commit is contained in:
Nicolas Mowen
parent
83517f59b4
commit
ed5cf4df87
@ -3,31 +3,14 @@ import {
|
|||||||
ReactNode,
|
ReactNode,
|
||||||
useCallback,
|
useCallback,
|
||||||
useEffect,
|
useEffect,
|
||||||
useMemo,
|
|
||||||
useRef,
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
import Hls from "hls.js";
|
import Hls from "hls.js";
|
||||||
import { isDesktop, isMobile, isSafari } from "react-device-detect";
|
import { isDesktop, isMobile } from "react-device-detect";
|
||||||
import { LuPause, LuPlay } from "react-icons/lu";
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuRadioGroup,
|
|
||||||
DropdownMenuRadioItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "../ui/dropdown-menu";
|
|
||||||
import {
|
|
||||||
MdForward10,
|
|
||||||
MdReplay10,
|
|
||||||
MdVolumeDown,
|
|
||||||
MdVolumeMute,
|
|
||||||
MdVolumeOff,
|
|
||||||
MdVolumeUp,
|
|
||||||
} from "react-icons/md";
|
|
||||||
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
||||||
import { Slider } from "../ui/slider-volume";
|
|
||||||
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
|
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
|
||||||
|
import VideoControls from "./PlayerControls";
|
||||||
|
|
||||||
const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
|
const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
|
||||||
const unsupportedErrorCodes = [
|
const unsupportedErrorCodes = [
|
||||||
@ -221,6 +204,7 @@ export default function HlsVideoPlayer({
|
|||||||
</TransformComponent>
|
</TransformComponent>
|
||||||
</TransformWrapper>
|
</TransformWrapper>
|
||||||
<VideoControls
|
<VideoControls
|
||||||
|
className="absolute bottom-5 left-1/2 -translate-x-1/2"
|
||||||
video={videoRef.current}
|
video={videoRef.current}
|
||||||
isPlaying={isPlaying}
|
isPlaying={isPlaying}
|
||||||
show={controls}
|
show={controls}
|
||||||
@ -231,147 +215,3 @@ export default function HlsVideoPlayer({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
type VideoControlsProps = {
|
|
||||||
video: HTMLVideoElement | null;
|
|
||||||
isPlaying: boolean;
|
|
||||||
show: boolean;
|
|
||||||
controlsOpen: boolean;
|
|
||||||
setControlsOpen: (open: boolean) => void;
|
|
||||||
};
|
|
||||||
function VideoControls({
|
|
||||||
video,
|
|
||||||
isPlaying,
|
|
||||||
show,
|
|
||||||
controlsOpen,
|
|
||||||
setControlsOpen,
|
|
||||||
}: VideoControlsProps) {
|
|
||||||
const playbackRates = useMemo(() => {
|
|
||||||
if (isSafari) {
|
|
||||||
return [0.5, 1, 2];
|
|
||||||
} else {
|
|
||||||
return [0.5, 1, 2, 4, 8, 16];
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onReplay = useCallback(
|
|
||||||
(e: React.MouseEvent<SVGElement>) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
const currentTime = video?.currentTime;
|
|
||||||
|
|
||||||
if (!video || !currentTime) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
video.currentTime = Math.max(0, currentTime - 10);
|
|
||||||
},
|
|
||||||
[video],
|
|
||||||
);
|
|
||||||
|
|
||||||
const onSkip = useCallback(
|
|
||||||
(e: React.MouseEvent<SVGElement>) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
const currentTime = video?.currentTime;
|
|
||||||
|
|
||||||
if (!video || !currentTime) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
video.currentTime = currentTime + 10;
|
|
||||||
},
|
|
||||||
[video],
|
|
||||||
);
|
|
||||||
|
|
||||||
const onTogglePlay = useCallback(
|
|
||||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
if (!video) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isPlaying) {
|
|
||||||
video.pause();
|
|
||||||
} else {
|
|
||||||
video.play();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[isPlaying, video],
|
|
||||||
);
|
|
||||||
|
|
||||||
// volume control
|
|
||||||
|
|
||||||
const VolumeIcon = useMemo(() => {
|
|
||||||
if (!video || video?.muted) {
|
|
||||||
return MdVolumeOff;
|
|
||||||
} else if (video.volume <= 0.33) {
|
|
||||||
return MdVolumeMute;
|
|
||||||
} else if (video.volume <= 0.67) {
|
|
||||||
return MdVolumeDown;
|
|
||||||
} else {
|
|
||||||
return MdVolumeUp;
|
|
||||||
}
|
|
||||||
// only update when specific fields change
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [video?.volume, video?.muted]);
|
|
||||||
|
|
||||||
if (!video || !show) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`absolute bottom-5 left-1/2 -translate-x-1/2 px-4 py-2 flex justify-between items-center gap-8 text-white z-50 bg-black bg-opacity-60 rounded-lg`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-normal items-center gap-2">
|
|
||||||
<VolumeIcon
|
|
||||||
className="size-5"
|
|
||||||
onClick={(e: React.MouseEvent) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
video.muted = !video.muted;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{video.muted == false && (
|
|
||||||
<Slider
|
|
||||||
className="w-20"
|
|
||||||
value={[video.volume]}
|
|
||||||
min={0}
|
|
||||||
max={1}
|
|
||||||
step={0.02}
|
|
||||||
onValueChange={(value) => (video.volume = value[0])}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<MdReplay10 className="size-5 cursor-pointer" onClick={onReplay} />
|
|
||||||
<div className="cursor-pointer" onClick={onTogglePlay}>
|
|
||||||
{isPlaying ? (
|
|
||||||
<LuPause className="size-5 fill-white" />
|
|
||||||
) : (
|
|
||||||
<LuPlay className="size-5 fill-white" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<MdForward10 className="size-5 cursor-pointer" onClick={onSkip} />
|
|
||||||
<DropdownMenu
|
|
||||||
open={controlsOpen}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
setControlsOpen(open);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DropdownMenuTrigger>{`${video.playbackRate}x`}</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent>
|
|
||||||
<DropdownMenuRadioGroup
|
|
||||||
onValueChange={(rate) => (video.playbackRate = parseInt(rate))}
|
|
||||||
>
|
|
||||||
{playbackRates.map((rate) => (
|
|
||||||
<DropdownMenuRadioItem key={rate} value={rate.toString()}>
|
|
||||||
{rate}x
|
|
||||||
</DropdownMenuRadioItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuRadioGroup>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
187
web/src/components/player/PlayerControls.tsx
Normal file
187
web/src/components/player/PlayerControls.tsx
Normal file
@ -0,0 +1,187 @@
|
|||||||
|
import { useCallback, useMemo } from "react";
|
||||||
|
import { isSafari } from "react-device-detect";
|
||||||
|
import { LuPause, LuPlay } from "react-icons/lu";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "../ui/dropdown-menu";
|
||||||
|
import {
|
||||||
|
MdForward10,
|
||||||
|
MdReplay10,
|
||||||
|
MdVolumeDown,
|
||||||
|
MdVolumeMute,
|
||||||
|
MdVolumeOff,
|
||||||
|
MdVolumeUp,
|
||||||
|
} from "react-icons/md";
|
||||||
|
import { Slider } from "../ui/slider-volume";
|
||||||
|
|
||||||
|
type VideoControls = {
|
||||||
|
volume?: boolean;
|
||||||
|
seek?: boolean;
|
||||||
|
playbackRate?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const CONTROLS_DEFAULT: VideoControls = {
|
||||||
|
volume: true,
|
||||||
|
seek: true,
|
||||||
|
playbackRate: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
type VideoControlsProps = {
|
||||||
|
className?: string;
|
||||||
|
video: HTMLVideoElement | null;
|
||||||
|
features?: VideoControls;
|
||||||
|
isPlaying: boolean;
|
||||||
|
show: boolean;
|
||||||
|
controlsOpen: boolean;
|
||||||
|
setControlsOpen: (open: boolean) => void;
|
||||||
|
};
|
||||||
|
export default function VideoControls({
|
||||||
|
className,
|
||||||
|
video,
|
||||||
|
features = CONTROLS_DEFAULT,
|
||||||
|
isPlaying,
|
||||||
|
show,
|
||||||
|
controlsOpen,
|
||||||
|
setControlsOpen,
|
||||||
|
}: VideoControlsProps) {
|
||||||
|
const playbackRates = useMemo(() => {
|
||||||
|
if (isSafari) {
|
||||||
|
return [0.5, 1, 2];
|
||||||
|
} else {
|
||||||
|
return [0.5, 1, 2, 4, 8, 16];
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onReplay = useCallback(
|
||||||
|
(e: React.MouseEvent<SVGElement>) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
const currentTime = video?.currentTime;
|
||||||
|
|
||||||
|
if (!video || !currentTime) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
video.currentTime = Math.max(0, currentTime - 10);
|
||||||
|
},
|
||||||
|
[video],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onSkip = useCallback(
|
||||||
|
(e: React.MouseEvent<SVGElement>) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
const currentTime = video?.currentTime;
|
||||||
|
|
||||||
|
if (!video || !currentTime) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
video.currentTime = currentTime + 10;
|
||||||
|
},
|
||||||
|
[video],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onTogglePlay = useCallback(
|
||||||
|
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
if (!video) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isPlaying) {
|
||||||
|
video.pause();
|
||||||
|
} else {
|
||||||
|
video.play();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[isPlaying, video],
|
||||||
|
);
|
||||||
|
|
||||||
|
// volume control
|
||||||
|
|
||||||
|
const VolumeIcon = useMemo(() => {
|
||||||
|
if (!video || video?.muted) {
|
||||||
|
return MdVolumeOff;
|
||||||
|
} else if (video.volume <= 0.33) {
|
||||||
|
return MdVolumeMute;
|
||||||
|
} else if (video.volume <= 0.67) {
|
||||||
|
return MdVolumeDown;
|
||||||
|
} else {
|
||||||
|
return MdVolumeUp;
|
||||||
|
}
|
||||||
|
// only update when specific fields change
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [video?.volume, video?.muted]);
|
||||||
|
|
||||||
|
if (!video || !show) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`px-4 py-2 flex justify-between items-center gap-8 text-white z-50 bg-black bg-opacity-60 rounded-lg ${className ?? ""}`}
|
||||||
|
>
|
||||||
|
{features.volume && (
|
||||||
|
<div className="flex justify-normal items-center gap-2">
|
||||||
|
<VolumeIcon
|
||||||
|
className="size-5"
|
||||||
|
onClick={(e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
video.muted = !video.muted;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{video.muted == false && (
|
||||||
|
<Slider
|
||||||
|
className="w-20"
|
||||||
|
value={[video.volume]}
|
||||||
|
min={0}
|
||||||
|
max={1}
|
||||||
|
step={0.02}
|
||||||
|
onValueChange={(value) => (video.volume = value[0])}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{features.seek && (
|
||||||
|
<MdReplay10 className="size-5 cursor-pointer" onClick={onReplay} />
|
||||||
|
)}
|
||||||
|
<div className="cursor-pointer" onClick={onTogglePlay}>
|
||||||
|
{isPlaying ? (
|
||||||
|
<LuPause className="size-5 fill-white" />
|
||||||
|
) : (
|
||||||
|
<LuPlay className="size-5 fill-white" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{features.seek && (
|
||||||
|
<MdForward10 className="size-5 cursor-pointer" onClick={onSkip} />
|
||||||
|
)}
|
||||||
|
{features.playbackRate && (
|
||||||
|
<DropdownMenu
|
||||||
|
open={controlsOpen}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
setControlsOpen(open);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DropdownMenuTrigger>{`${video.playbackRate}x`}</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent>
|
||||||
|
<DropdownMenuRadioGroup
|
||||||
|
onValueChange={(rate) => (video.playbackRate = parseInt(rate))}
|
||||||
|
>
|
||||||
|
{playbackRates.map((rate) => (
|
||||||
|
<DropdownMenuRadioItem key={rate} value={rate.toString()}>
|
||||||
|
{rate}x
|
||||||
|
</DropdownMenuRadioItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuRadioGroup>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user