forked from Github/frigate
Add support for live fullscreen mode (#10191)
* Fix timeline colors * Add support for full screen mode * Add support for live view full screen * Cleanup * Add border to sidebar and statusbar
This commit is contained in:
Nicolas Mowen
@@ -18,7 +18,13 @@ import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
||||
import { CameraConfig } from "@/types/frigateConfig";
|
||||
import { CameraPtzInfo } from "@/types/ptz";
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
isDesktop,
|
||||
isMobile,
|
||||
@@ -31,6 +37,8 @@ import {
|
||||
FaAngleLeft,
|
||||
FaAngleRight,
|
||||
FaAngleUp,
|
||||
FaCompress,
|
||||
FaExpand,
|
||||
} from "react-icons/fa";
|
||||
import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
|
||||
import { IoMdArrowBack } from "react-icons/io";
|
||||
@@ -52,6 +60,7 @@ type LiveCameraViewProps = {
|
||||
export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
const navigate = useNavigate();
|
||||
const { isPortrait } = useMobileOrientation();
|
||||
const mainRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// camera features
|
||||
|
||||
@@ -66,45 +75,105 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
);
|
||||
const { payload: audioState, send: sendAudio } = useAudioState(camera.name);
|
||||
|
||||
// fullscreen state
|
||||
|
||||
useEffect(() => {
|
||||
if (mainRef.current == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const listener = () => {
|
||||
setFullscreen(document.fullscreenElement != null);
|
||||
};
|
||||
document.addEventListener("fullscreenchange", listener);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("fullscreenchange", listener);
|
||||
};
|
||||
}, [mainRef]);
|
||||
|
||||
// playback state
|
||||
|
||||
const [audio, setAudio] = useState(false);
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
|
||||
const growClassName = useMemo(() => {
|
||||
const aspect = camera.detect.width / camera.detect.height;
|
||||
|
||||
if (isMobile) {
|
||||
if (isPortrait) {
|
||||
return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
|
||||
} else {
|
||||
return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
|
||||
if (aspect > 16 / 9) {
|
||||
return "absolute left-12 top-[50%] -translate-y-[50%]";
|
||||
} else {
|
||||
return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
|
||||
}
|
||||
}
|
||||
} else if (camera.detect.width / camera.detect.height > 2) {
|
||||
}
|
||||
|
||||
if (fullscreen) {
|
||||
if (aspect > 16 / 9) {
|
||||
return "absolute inset-x-0 top-[50%] -translate-y-[50%]";
|
||||
} else {
|
||||
return "absolute inset-y-0 left-[50%] -translate-x-[50%]";
|
||||
}
|
||||
} else if (aspect > 2) {
|
||||
return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
|
||||
} else {
|
||||
return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
|
||||
}
|
||||
}, [camera, isPortrait]);
|
||||
}, [camera, fullscreen, isPortrait]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`}
|
||||
ref={mainRef}
|
||||
className={
|
||||
fullscreen
|
||||
? `fixed inset-0 bg-black z-30`
|
||||
: `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`}
|
||||
className={
|
||||
fullscreen
|
||||
? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:left-2 landscape:right-auto landscape:bottom-1 landscape:top-auto" : ""}`
|
||||
: `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`
|
||||
}
|
||||
>
|
||||
<Button
|
||||
className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
|
||||
size={isMobile ? "icon" : "default"}
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<IoMdArrowBack className="size-5 lg:mr-[10px]" />
|
||||
{isDesktop && "Back"}
|
||||
</Button>
|
||||
{!fullscreen ? (
|
||||
<Button
|
||||
className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
|
||||
size={isMobile ? "icon" : "default"}
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<IoMdArrowBack className="size-5 lg:mr-[10px]" />
|
||||
{isDesktop && "Back"}
|
||||
</Button>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
<TooltipProvider>
|
||||
<div
|
||||
className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
|
||||
>
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
variant={fullscreen ? "overlay" : "primary"}
|
||||
Icon={fullscreen ? FaCompress : FaExpand}
|
||||
isActive={fullscreen}
|
||||
title={fullscreen ? "Close" : "Fullscreen"}
|
||||
onClick={() => {
|
||||
if (fullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
mainRef.current?.requestFullscreen();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
variant={fullscreen ? "overlay" : "primary"}
|
||||
Icon={audio ? GiSpeaker : GiSpeakerOff}
|
||||
isActive={audio}
|
||||
title={`${audio ? "Disable" : "Enable"} Camera Audio`}
|
||||
@@ -112,6 +181,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
/>
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
variant={fullscreen ? "overlay" : "primary"}
|
||||
Icon={detectState == "ON" ? MdPersonSearch : MdPersonOff}
|
||||
isActive={detectState == "ON"}
|
||||
title={`${detectState == "ON" ? "Disable" : "Enable"} Detect`}
|
||||
@@ -119,6 +189,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
/>
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
variant={fullscreen ? "overlay" : "primary"}
|
||||
Icon={recordState == "ON" ? LuVideo : LuVideoOff}
|
||||
isActive={recordState == "ON"}
|
||||
title={`${recordState == "ON" ? "Disable" : "Enable"} Recording`}
|
||||
@@ -126,6 +197,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
/>
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
variant={fullscreen ? "overlay" : "primary"}
|
||||
Icon={snapshotState == "ON" ? MdPhotoCamera : MdNoPhotography}
|
||||
isActive={snapshotState == "ON"}
|
||||
title={`${snapshotState == "ON" ? "Disable" : "Enable"} Snapshots`}
|
||||
@@ -134,6 +206,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
{camera.audio.enabled_in_config && (
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
variant={fullscreen ? "overlay" : "primary"}
|
||||
Icon={audioState == "ON" ? LuEar : LuEarOff}
|
||||
isActive={audioState == "ON"}
|
||||
title={`${audioState == "ON" ? "Disable" : "Enable"} Audio Detect`}
|
||||
@@ -143,7 +216,6 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div className="relative size-full">
|
||||
<div
|
||||
className={growClassName}
|
||||
@@ -151,7 +223,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
>
|
||||
<LivePlayer
|
||||
key={camera.name}
|
||||
className="size-full"
|
||||
className={`size-full ${fullscreen ? "*:rounded-none" : ""}`}
|
||||
windowVisible
|
||||
showStillWithoutActivity={false}
|
||||
cameraConfig={camera}
|
||||
|
||||
Reference in New Issue
Block a user