administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Simplify recordings view

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-10 07:26:28 -06:00
parent ca8e3ad3b5
commit 8d8a07c02a
2 changed files with 103 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -19,7 +19,6 @@ const unsupportedErrorCodes = [
]; ];
type HlsVideoPlayerProps = { type HlsVideoPlayerProps = {
className: string;
children?: ReactNode; children?: ReactNode;
videoRef: MutableRefObject<HTMLVideoElement | null>; videoRef: MutableRefObject<HTMLVideoElement | null>;
visible: boolean; visible: boolean;
@ -31,7 +30,6 @@ type HlsVideoPlayerProps = {
onPlaying?: () => void; onPlaying?: () => void;
}; };
export default function HlsVideoPlayer({ export default function HlsVideoPlayer({
className,
children, children,
videoRef, videoRef,
visible, visible,
@ -91,116 +89,118 @@ export default function HlsVideoPlayer({
return ( return (
<TransformWrapper minScale={1.0}> <TransformWrapper minScale={1.0}>
<div <TransformComponent
className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`} wrapperStyle={{
onMouseOver={ position: "relative",
isDesktop display: visible ? undefined : "none",
? () => { width: "100%",
setControls(true); height: "100%",
} }}
: undefined contentStyle={{
} width: "100%",
onMouseOut={ height: isMobile ? "100%" : undefined,
isDesktop }}
? () => {
setControls(controlsOpen);
}
: undefined
}
onClick={isDesktop ? undefined : () => setControls(!controls)}
> >
<TransformComponent <video
wrapperStyle={{ ref={videoRef}
width: "100%", className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
height: "100%", preload="auto"
}} autoPlay
contentStyle={{ controls={false}
width: "100%", playsInline
height: isMobile ? "100%" : undefined, muted
}} onPlay={() => {
> setIsPlaying(true);
<video
ref={videoRef}
className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
preload="auto"
autoPlay
controls={false}
playsInline
muted
onPlay={() => {
setIsPlaying(true);
if (isMobile) { if (isMobile) {
setControls(true); setControls(true);
setMobileCtrlTimeout( setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000));
setTimeout(() => setControls(false), 4000),
);
}
}}
onPlaying={onPlaying}
onPause={() => {
setIsPlaying(false);
if (isMobile && mobileCtrlTimeout) {
clearTimeout(mobileCtrlTimeout);
}
}}
onTimeUpdate={() =>
onTimeUpdate && videoRef.current
? onTimeUpdate(videoRef.current.currentTime)
: undefined
}
onLoadedData={onPlayerLoaded}
onLoadedMetadata={() => setLoadedMetadata(true)}
onEnded={onClipEnded}
onError={(e) => {
if (
!hlsRef.current &&
// @ts-expect-error code does exist
unsupportedErrorCodes.includes(e.target.error.code) &&
videoRef.current
) {
setLoadedMetadata(false);
setUseHlsCompat(true);
}
}}
/>
</TransformComponent>
<VideoControls
className="absolute bottom-5 left-1/2 -translate-x-1/2"
video={videoRef.current}
isPlaying={isPlaying}
show={controls}
controlsOpen={controlsOpen}
setControlsOpen={setControlsOpen}
playbackRate={videoRef.current?.playbackRate ?? 1}
hotKeys={hotKeys}
onPlayPause={(play) => {
if (!videoRef.current) {
return;
}
if (play) {
videoRef.current.play();
} else {
videoRef.current.pause();
} }
}} }}
onSeek={(diff) => { onPlaying={onPlaying}
const currentTime = videoRef.current?.currentTime; onPause={() => {
setIsPlaying(false);
if (!videoRef.current || !currentTime) { if (isMobile && mobileCtrlTimeout) {
return; clearTimeout(mobileCtrlTimeout);
} }
videoRef.current.currentTime = Math.max(0, currentTime + diff);
}} }}
onSetPlaybackRate={(rate) => onTimeUpdate={() =>
videoRef.current ? (videoRef.current.playbackRate = rate) : null onTimeUpdate && videoRef.current
? onTimeUpdate(videoRef.current.currentTime)
: undefined
} }
onLoadedData={onPlayerLoaded}
onLoadedMetadata={() => setLoadedMetadata(true)}
onEnded={onClipEnded}
onError={(e) => {
if (
!hlsRef.current &&
// @ts-expect-error code does exist
unsupportedErrorCodes.includes(e.target.error.code) &&
videoRef.current
) {
setLoadedMetadata(false);
setUseHlsCompat(true);
}
}}
/> />
{children} <div
</div> className="absolute inset-0"
onMouseOver={
isDesktop
? () => {
setControls(true);
}
: undefined
}
onMouseOut={
isDesktop
? () => {
setControls(controlsOpen);
}
: undefined
}
onClick={isDesktop ? undefined : () => setControls(!controls)}
>
<div className={`size-full relative ${visible ? "" : "hidden"}`}>
<VideoControls
className="absolute bottom-5 left-1/2 -translate-x-1/2"
video={videoRef.current}
isPlaying={isPlaying}
show={controls}
controlsOpen={controlsOpen}
setControlsOpen={setControlsOpen}
playbackRate={videoRef.current?.playbackRate ?? 1}
hotKeys={hotKeys}
onPlayPause={(play) => {
if (!videoRef.current) {
return;
}
if (play) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}}
onSeek={(diff) => {
const currentTime = videoRef.current?.currentTime;
if (!videoRef.current || !currentTime) {
return;
}
videoRef.current.currentTime = Math.max(0, currentTime + diff);
}}
onSetPlaybackRate={(rate) =>
videoRef.current ? (videoRef.current.playbackRate = rate) : null
}
/>
{children}
</div>
</div>
</TransformComponent>
</TransformWrapper> </TransformWrapper>
); );
} }

1
web/src/components/player/dynamic/DynamicVideoPlayer.tsx
View File

@ -150,7 +150,6 @@ export default function DynamicVideoPlayer({
return ( return (
<> <>
<HlsVideoPlayer <HlsVideoPlayer
className={className ?? ""}
videoRef={playerRef} videoRef={playerRef}
visible={!(isScrubbing || isLoading)} visible={!(isScrubbing || isLoading)}
currentSource={source} currentSource={source}