administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-15 17:46:43 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Refactor menu handling

Browse Source
This commit is contained in:
Nicolas Mowen 2025-09-29 13:27:18 -06:00
parent cd8adcaaf4
commit 223b9bad77
1 changed files with 126 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -507,7 +507,7 @@ export default function LiveCameraView({
)} )}
</Button> </Button>
)} )}
{supportsFullscreen && ( {supportsFullscreen && !debug && (
<CameraFeatureToggle <CameraFeatureToggle
className="p-2 md:p-0" className="p-2 md:p-0"
variant={fullscreen ? "overlay" : "primary"} variant={fullscreen ? "overlay" : "primary"}
@ -521,29 +521,32 @@ export default function LiveCameraView({
onClick={toggleFullscreen} onClick={toggleFullscreen}
/> />
)} )}
{!isIOS && !isFirefox && preferredLiveMode != "jsmpeg" && ( {!isIOS &&
<CameraFeatureToggle !isFirefox &&
className="p-2 md:p-0" !debug &&
variant={fullscreen ? "overlay" : "primary"} preferredLiveMode != "jsmpeg" && (
Icon={LuPictureInPicture} <CameraFeatureToggle
isActive={pip} className="p-2 md:p-0"
title={ variant={fullscreen ? "overlay" : "primary"}
pip Icon={LuPictureInPicture}
? t("button.close", { ns: "common" }) isActive={pip}
: t("button.pictureInPicture", { ns: "common" }) title={
} pip
onClick={() => { ? t("button.close", { ns: "common" })
if (!pip) { : t("button.pictureInPicture", { ns: "common" })
setPip(true);
} else {
document.exitPictureInPicture();
setPip(false);
} }
}} onClick={() => {
disabled={!cameraEnabled} if (!pip) {
/> setPip(true);
)} } else {
{supports2WayTalk && ( document.exitPictureInPicture();
setPip(false);
}
}}
disabled={!cameraEnabled}
/>
)}
{supports2WayTalk && !debug && (
<CameraFeatureToggle <CameraFeatureToggle
className="p-2 md:p-0" className="p-2 md:p-0"
variant={fullscreen ? "overlay" : "primary"} variant={fullscreen ? "overlay" : "primary"}
@ -563,7 +566,7 @@ export default function LiveCameraView({
disabled={!cameraEnabled} disabled={!cameraEnabled}
/> />
)} )}
{supportsAudioOutput && preferredLiveMode != "jsmpeg" && ( {supportsAudioOutput && !debug && preferredLiveMode != "jsmpeg" && (
<CameraFeatureToggle <CameraFeatureToggle
className="p-2 md:p-0" className="p-2 md:p-0"
variant={fullscreen ? "overlay" : "primary"} variant={fullscreen ? "overlay" : "primary"}
@ -888,17 +891,21 @@ function FrigateCameraFeatures({
<> <>
{isAdmin && ( {isAdmin && (
<> <>
<CameraFeatureToggle {!debug && (
className="p-2 md:p-0" <CameraFeatureToggle
variant={fullscreen ? "overlay" : "primary"} className="p-2 md:p-0"
Icon={enabledState == "ON" ? LuPower : LuPowerOff} variant={fullscreen ? "overlay" : "primary"}
isActive={enabledState == "ON"} Icon={enabledState == "ON" ? LuPower : LuPowerOff}
title={ isActive={enabledState == "ON"}
enabledState == "ON" ? t("camera.disable") : t("camera.enable") title={
} enabledState == "ON"
onClick={() => sendEnabled(enabledState == "ON" ? "OFF" : "ON")} ? t("camera.disable")
disabled={false} : t("camera.enable")
/> }
onClick={() => sendEnabled(enabledState == "ON" ? "OFF" : "ON")}
disabled={false}
/>
)}
<CameraFeatureToggle <CameraFeatureToggle
className="p-2 md:p-0" className="p-2 md:p-0"
variant={fullscreen ? "overlay" : "primary"} variant={fullscreen ? "overlay" : "primary"}
@ -993,18 +1000,20 @@ function FrigateCameraFeatures({
)} )}
</> </>
)} )}
<CameraFeatureToggle {!debug && (
className={cn( <CameraFeatureToggle
"p-2 md:p-0", className={cn(
isRecording && "animate-pulse bg-red-500 hover:bg-red-600", "p-2 md:p-0",
)} isRecording && "animate-pulse bg-red-500 hover:bg-red-600",
variant={fullscreen ? "overlay" : "primary"} )}
Icon={isRecording ? TbRecordMail : TbRecordMailOff} variant={fullscreen ? "overlay" : "primary"}
isActive={isRecording} Icon={isRecording ? TbRecordMail : TbRecordMailOff}
title={t("manualRecording." + (isRecording ? "stop" : "start"))} isActive={isRecording}
onClick={handleEventButtonClick} title={t("manualRecording." + (isRecording ? "stop" : "start"))}
disabled={!cameraEnabled} onClick={handleEventButtonClick}
/> disabled={!cameraEnabled}
/>
)}
<DropdownMenu modal={false}> <DropdownMenu modal={false}>
<DropdownMenuTrigger> <DropdownMenuTrigger>
@ -1069,6 +1078,7 @@ function FrigateCameraFeatures({
</Label> </Label>
<Select <Select
value={streamName} value={streamName}
disabled={debug}
onValueChange={(value) => { onValueChange={(value) => {
setStreamName?.(value); setStreamName?.(value);
}} }}
@ -1098,48 +1108,51 @@ function FrigateCameraFeatures({
</SelectContent> </SelectContent>
</Select> </Select>
{preferredLiveMode != "jsmpeg" && isRestreamed && (
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supportsAudioOutput ? (
<>
<LuCheck className="size-4 text-success" />
<div>{t("stream.audio.available")}</div>
</>
) : (
<>
<LuX className="size-4 text-danger" />
<div>{t("stream.audio.unavailable")}</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<span className="sr-only">
{t("button.info", { ns: "common" })}
</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-80 text-xs">
{t("stream.audio.tips.title")}
<div className="mt-2 flex items-center text-primary">
<Link
to={getLocaleDocUrl("configuration/live")}
target="_blank"
rel="noopener noreferrer"
className="inline"
>
{t("readTheDocumentation", {
ns: "common",
})}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</PopoverContent>
</Popover>
</>
)}
</div>
)}
{preferredLiveMode != "jsmpeg" && {preferredLiveMode != "jsmpeg" &&
!debug &&
isRestreamed && (
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supportsAudioOutput ? (
<>
<LuCheck className="size-4 text-success" />
<div>{t("stream.audio.available")}</div>
</>
) : (
<>
<LuX className="size-4 text-danger" />
<div>{t("stream.audio.unavailable")}</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<span className="sr-only">
{t("button.info", { ns: "common" })}
</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-80 text-xs">
{t("stream.audio.tips.title")}
<div className="mt-2 flex items-center text-primary">
<Link
to={getLocaleDocUrl("configuration/live")}
target="_blank"
rel="noopener noreferrer"
className="inline"
>
{t("readTheDocumentation", {
ns: "common",
})}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</PopoverContent>
</Popover>
</>
)}
</div>
)}
{preferredLiveMode != "jsmpeg" &&
!debug &&
isRestreamed && isRestreamed &&
supportsAudioOutput && ( supportsAudioOutput && (
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground"> <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
@ -1185,32 +1198,34 @@ function FrigateCameraFeatures({
</div> </div>
)} )}
{preferredLiveMode == "jsmpeg" && isRestreamed && ( {preferredLiveMode == "jsmpeg" &&
<div className="flex flex-col items-center gap-3"> !debug &&
<div className="flex flex-row items-center gap-2"> isRestreamed && (
<IoIosWarning className="mr-1 size-8 text-danger" /> <div className="flex flex-col items-center gap-3">
<div className="flex flex-row items-center gap-2">
<IoIosWarning className="mr-1 size-8 text-danger" />
<p className="text-sm"> <p className="text-sm">
{t("stream.lowBandwidth.tips")} {t("stream.lowBandwidth.tips")}
</p> </p>
</div>
<Button
className={`flex items-center gap-2.5 rounded-lg`}
aria-label={t("stream.lowBandwidth.resetStream")}
variant="outline"
size="sm"
onClick={() => setLowBandwidth(false)}
>
<MdOutlineRestartAlt className="size-5 text-primary-variant" />
<div className="text-primary-variant">
{t("stream.lowBandwidth.resetStream")}
</div> </div>
</Button> <Button
</div> className={`flex items-center gap-2.5 rounded-lg`}
)} aria-label={t("stream.lowBandwidth.resetStream")}
variant="outline"
size="sm"
onClick={() => setLowBandwidth(false)}
>
<MdOutlineRestartAlt className="size-5 text-primary-variant" />
<div className="text-primary-variant">
{t("stream.lowBandwidth.resetStream")}
</div>
</Button>
</div>
)}
</div> </div>
)} )}
{isRestreamed && ( {isRestreamed && !debug && (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label <Label
@ -1246,6 +1261,7 @@ function FrigateCameraFeatures({
<Switch <Switch
className="ml-1" className="ml-1"
id="showstats" id="showstats"
disabled={debug}
checked={showStats} checked={showStats}
onCheckedChange={(checked) => setShowStats(checked)} onCheckedChange={(checked) => setShowStats(checked)}
/> />