administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +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

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

@ -88,8 +88,9 @@ export default function HlsVideoPlayer({
const [controlsOpen, setControlsOpen] = useState(false); const [controlsOpen, setControlsOpen] = useState(false);
return ( return (
<TransformWrapper minScale={1.0}>
<div <div
className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`} className={`relative w-full ${className ?? ""} ${visible ? "visible" : "hidden"}`}
onMouseOver={ onMouseOver={
isDesktop isDesktop
? () => { ? () => {
@ -106,8 +107,14 @@ export default function HlsVideoPlayer({
} }
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,7 +161,6 @@ 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}
@ -190,5 +196,6 @@ export default function HlsVideoPlayer({
/> />
{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"}`
} }
> >