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

Add support for live view full screen

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-02 09:40:21 -07:00
parent 38d7628c68
commit db5581e72d
2 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/dynamic/CameraFeatureToggle.tsx
View File

@ -8,18 +8,18 @@ import { isDesktop } from "react-device-detect";
const variants = {
primary: {
active: "font-bold text-primary-foreground bg-selected",
inactive: "text-secondary-foreground bg-secondary",
active: "font-bold text-white bg-selected rounded-lg",
inactive: "text-secondary-foreground bg-secondary rounded-lg",
},
secondary: {
active: "font-bold text-primary",
inactive: "text-secondary-foreground",
overlay: {
active: "font-bold text-white bg-selected rounded-full",
inactive: "text-primary-white rounded-full bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500",
},
};
type CameraFeatureToggleProps = {
className?: string;
variant?: "primary" | "secondary";
variant?: "primary" | "overlay";
isActive: boolean;
Icon: IconType;
title: string;
@ -37,7 +37,7 @@ export default function CameraFeatureToggle({
const content = (
<div
onClick={onClick}
className={`${className} flex flex-col justify-center items-center rounded-lg ${
className={`${className} flex flex-col justify-center items-center ${
variants[variant][isActive ? "active" : "inactive"]
}`}
>

29
web/src/views/live/LiveCameraView.tsx
View File

@ -37,6 +37,7 @@ import {
FaAngleLeft,
FaAngleRight,
FaAngleUp,
FaCompress,
FaExpand,
} from "react-icons/fa";
import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
@ -99,20 +100,20 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
const growClassName = useMemo(() => {
const aspect = camera.detect.width / camera.detect.height;
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%]";
}
}
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 (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 {
@ -132,7 +133,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
<div
className={
fullscreen
? `absolute right-24 top-1 z-40`
? `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" : ""}`
}
>
@ -154,9 +155,10 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
>
<CameraFeatureToggle
className="p-2 md:p-0"
Icon={fullscreen ? FaExpand : FaExpand}
variant={fullscreen ? "overlay" : "primary"}
Icon={fullscreen ? FaCompress : FaExpand}
isActive={fullscreen}
title={fullscreen ? "Fullscreen" : "Close"}
title={fullscreen ? "Close" : "Fullscreen"}
onClick={() => {
if (fullscreen) {
document.exitFullscreen();
@ -167,6 +169,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
/>
<CameraFeatureToggle
className="p-2 md:p-0"
variant={fullscreen ? "overlay" : "primary"}
Icon={audio ? GiSpeaker : GiSpeakerOff}
isActive={audio}
title={`${audio ? "Disable" : "Enable"} Camera Audio`}
@ -174,6 +177,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`}
@ -181,6 +185,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`}
@ -188,6 +193,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`}
@ -196,6 +202,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`}