administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-08 22:35:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

make live view settings drawer scrollable

Browse Source
This commit is contained in:
Josh Hawkins 2025-11-23 12:25:23 -06:00
parent 9242997079
commit bf4f63e50e
1 changed files with 311 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1376,8 +1376,9 @@ function FrigateCameraFeatures({
title={t("cameraSettings.title", { camera })} title={t("cameraSettings.title", { camera })}
/> />
</DrawerTrigger> </DrawerTrigger>
<DrawerContent className="rounded-2xl px-2 py-4"> <DrawerContent className="max-h-[75dvh] overflow-hidden rounded-2xl">
<div className="mt-2 flex flex-col gap-2"> <div className="scrollbar-container mt-2 flex h-auto flex-col gap-2 overflow-y-auto px-2 py-4">
<>
{isAdmin && ( {isAdmin && (
<> <>
<FilterSwitch <FilterSwitch
@ -1425,7 +1426,9 @@ function FrigateCameraFeatures({
disabled={audioState == "OFF"} disabled={audioState == "OFF"}
isChecked={transcriptionState == "ON"} isChecked={transcriptionState == "ON"}
onCheckedChange={() => onCheckedChange={() =>
sendTranscription(transcriptionState == "ON" ? "OFF" : "ON") sendTranscription(
transcriptionState == "ON" ? "OFF" : "ON",
)
} }
/> />
)} )}
@ -1440,7 +1443,6 @@ function FrigateCameraFeatures({
)} )}
</> </>
)} )}
</div>
<div className="mt-3 flex flex-col gap-5"> <div className="mt-3 flex flex-col gap-5">
{!isRestreamed && ( {!isRestreamed && (
@ -1482,7 +1484,8 @@ function FrigateCameraFeatures({
</div> </div>
</div> </div>
)} )}
{isRestreamed && Object.values(camera.live.streams).length > 0 && ( {isRestreamed &&
Object.values(camera.live.streams).length > 0 && (
<div className="mt-1 p-2"> <div className="mt-1 p-2">
<div className="mb-1 text-sm">{t("stream.title")}</div> <div className="mb-1 text-sm">{t("stream.title")}</div>
<Select <Select
@ -1526,7 +1529,9 @@ function FrigateCameraFeatures({
</div> </div>
)} )}
{preferredLiveMode != "jsmpeg" && !debug && isRestreamed && ( {preferredLiveMode != "jsmpeg" &&
!debug &&
isRestreamed && (
<div className="mt-1 flex flex-row items-center gap-1 text-sm text-muted-foreground"> <div className="mt-1 flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supportsAudioOutput ? ( {supportsAudioOutput ? (
<> <>
@ -1555,7 +1560,9 @@ function FrigateCameraFeatures({
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline" className="inline"
> >
{t("readTheDocumentation", { ns: "common" })} {t("readTheDocumentation", {
ns: "common",
})}
<LuExternalLink className="ml-2 inline-flex size-3" /> <LuExternalLink className="ml-2 inline-flex size-3" />
</Link> </Link>
</div> </div>
@ -1599,7 +1606,9 @@ function FrigateCameraFeatures({
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline" className="inline"
> >
{t("readTheDocumentation", { ns: "common" })} {t("readTheDocumentation", {
ns: "common",
})}
<LuExternalLink className="ml-2 inline-flex size-3" /> <LuExternalLink className="ml-2 inline-flex size-3" />
</Link> </Link>
</div> </div>
@ -1613,7 +1622,9 @@ function FrigateCameraFeatures({
<div className="mt-2 flex flex-col items-center gap-3"> <div className="mt-2 flex flex-col items-center gap-3">
<div className="flex flex-row items-center gap-2"> <div className="flex flex-row items-center gap-2">
<IoIosWarning className="mr-1 size-8 text-danger" /> <IoIosWarning className="mr-1 size-8 text-danger" />
<p className="text-sm">{t("stream.lowBandwidth.tips")}</p> <p className="text-sm">
{t("stream.lowBandwidth.tips")}
</p>
</div> </div>
<Button <Button
className={`flex items-center gap-2.5 rounded-lg`} className={`flex items-center gap-2.5 rounded-lg`}
@ -1651,7 +1662,8 @@ function FrigateCameraFeatures({
onClick={handleEventButtonClick} onClick={handleEventButtonClick}
className={cn( className={cn(
"h-auto w-full whitespace-normal", "h-auto w-full whitespace-normal",
isRecording && "animate-pulse bg-red-500 hover:bg-red-600", isRecording &&
"animate-pulse bg-red-500 hover:bg-red-600",
)} )}
disabled={debug} disabled={debug}
> >
@ -1700,6 +1712,8 @@ function FrigateCameraFeatures({
/> />
</div> </div>
</div> </div>
</>
</div>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
); );