make live view settings drawer scrollable

This commit is contained in:
Josh Hawkins 2025-11-23 12:25:23 -06:00
parent 9242997079
commit bf4f63e50e

View File

@ -1376,8 +1376,9 @@ function FrigateCameraFeatures({
title={t("cameraSettings.title", { camera })}
/>
</DrawerTrigger>
<DrawerContent className="rounded-2xl px-2 py-4">
<div className="mt-2 flex flex-col gap-2">
<DrawerContent className="max-h-[75dvh] overflow-hidden rounded-2xl">
<div className="scrollbar-container mt-2 flex h-auto flex-col gap-2 overflow-y-auto px-2 py-4">
<>
{isAdmin && (
<>
<FilterSwitch
@ -1425,7 +1426,9 @@ function FrigateCameraFeatures({
disabled={audioState == "OFF"}
isChecked={transcriptionState == "ON"}
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">
{!isRestreamed && (
@ -1482,7 +1484,8 @@ function FrigateCameraFeatures({
</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="mb-1 text-sm">{t("stream.title")}</div>
<Select
@ -1526,7 +1529,9 @@ function FrigateCameraFeatures({
</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">
{supportsAudioOutput ? (
<>
@ -1555,7 +1560,9 @@ function FrigateCameraFeatures({
rel="noopener noreferrer"
className="inline"
>
{t("readTheDocumentation", { ns: "common" })}
{t("readTheDocumentation", {
ns: "common",
})}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -1599,7 +1606,9 @@ function FrigateCameraFeatures({
rel="noopener noreferrer"
className="inline"
>
{t("readTheDocumentation", { ns: "common" })}
{t("readTheDocumentation", {
ns: "common",
})}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -1613,7 +1622,9 @@ function FrigateCameraFeatures({
<div className="mt-2 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">{t("stream.lowBandwidth.tips")}</p>
<p className="text-sm">
{t("stream.lowBandwidth.tips")}
</p>
</div>
<Button
className={`flex items-center gap-2.5 rounded-lg`}
@ -1651,7 +1662,8 @@ function FrigateCameraFeatures({
onClick={handleEventButtonClick}
className={cn(
"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}
>
@ -1700,6 +1712,8 @@ function FrigateCameraFeatures({
/>
</div>
</div>
</>
</div>
</DrawerContent>
</Drawer>
);