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

Fix desktop vertical camera view

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-27 13:28:54 -06:00
parent 28d3f55fbc
commit d4e2664a7d
3 changed files with 64 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,26 +88,33 @@ export default function HlsVideoPlayer({
const [controlsOpen, setControlsOpen] = useState(false); const [controlsOpen, setControlsOpen] = useState(false);
return ( return (
<div <TransformWrapper minScale={1.0}>
className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`} <div
onMouseOver={ className={`relative w-full ${className ?? ""} ${visible ? "visible" : "hidden"}`}
isDesktop onMouseOver={
? () => { isDesktop
setControls(true); ? () => {
} setControls(true);
: undefined }
} : undefined
onMouseOut={ }
isDesktop onMouseOut={
? () => { isDesktop
setControls(controlsOpen); ? () => {
} setControls(controlsOpen);
: undefined }
} : undefined
onClick={isDesktop ? undefined : () => setControls(!controls)} }
> onClick={isDesktop ? undefined : () => setControls(!controls)}
<TransformWrapper minScale={1.0}> >
<TransformComponent> <TransformComponent
wrapperStyle={{
width: "100%",
}}
contentStyle={{
width: "100%",
}}
>
<video <video
ref={videoRef} ref={videoRef}
className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`} className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
@ -154,41 +161,41 @@ export default function HlsVideoPlayer({
}} }}
/> />
</TransformComponent> </TransformComponent>
</TransformWrapper> <VideoControls
<VideoControls className="absolute bottom-5 left-1/2 -translate-x-1/2"
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} controlsOpen={controlsOpen}
controlsOpen={controlsOpen} setControlsOpen={setControlsOpen}
setControlsOpen={setControlsOpen} playbackRate={videoRef.current?.playbackRate ?? 1}
playbackRate={videoRef.current?.playbackRate ?? 1} hotKeys={hotKeys}
hotKeys={hotKeys} onPlayPause={(play) => {
onPlayPause={(play) => { if (!videoRef.current) {
if (!videoRef.current) { return;
return; }
}
if (play) { if (play) {
videoRef.current.play(); videoRef.current.play();
} else { } else {
videoRef.current.pause(); videoRef.current.pause();
} }
}} }}
onSeek={(diff) => { onSeek={(diff) => {
const currentTime = videoRef.current?.currentTime; const currentTime = videoRef.current?.currentTime;
if (!videoRef.current || !currentTime) { if (!videoRef.current || !currentTime) {
return; return;
} }
videoRef.current.currentTime = Math.max(0, currentTime + diff); videoRef.current.currentTime = Math.max(0, currentTime + diff);
}} }}
onSetPlaybackRate={(rate) => onSetPlaybackRate={(rate) =>
videoRef.current ? (videoRef.current.playbackRate = rate) : null videoRef.current ? (videoRef.current.playbackRate = rate) : null
} }
/> />
{children} {children}
</div> </div>
</TransformWrapper>
); );
} }

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

@ -55,7 +55,7 @@ export default function DynamicVideoPlayer({
if (aspectRatio > 2) { if (aspectRatio > 2) {
return ""; return "";
} else if (aspectRatio < 16 / 9) { } else if (aspectRatio < 16 / 9) {
return "aspect-tall"; return isDesktop ? "" : "aspect-tall";
} else { } else {
return "aspect-video"; return "aspect-video";
} }
@ -169,7 +169,7 @@ export default function DynamicVideoPlayer({
}, [controller, recordings]); }, [controller, recordings]);
return ( return (
<div className={`relative ${className ?? ""}`}> <div className={`w-full relative ${className ?? ""}`}>
<HlsVideoPlayer <HlsVideoPlayer
className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"} className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}
videoRef={playerRef} videoRef={playerRef}

4
web/src/views/events/RecordingView.tsx
View File

@ -215,7 +215,7 @@ export function RecordingView({
if (mainCameraAspect == "wide") { if (mainCameraAspect == "wide") {
return "w-full aspect-wide"; return "w-full aspect-wide";
} else if (isDesktop && mainCameraAspect == "tall") { } else if (isDesktop && mainCameraAspect == "tall") {
return "h-full aspect-tall"; return "h-full aspect-tall flex flex-col justify-center";
} else { } else {
return "w-full aspect-video"; return "w-full aspect-video";
} }
@ -327,7 +327,7 @@ export function RecordingView({
key={mainCamera} key={mainCamera}
className={ className={
isDesktop isDesktop
? `flex justify-center items mb-5 ${mainCameraAspect == "tall" ? "h-[96%]" : "w-[82%]"}` ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-full" : "w-[82%]"}`
: `w-full ${mainCameraAspect == "wide" ? "" : "aspect-video"}` : `w-full ${mainCameraAspect == "wide" ? "" : "aspect-video"}`
} }
> >