1 && aspectRatio < 1.5
+ aspectRatio > 1 && aspectRatio < ASPECT_PORTRAIT_LAYOUT
? "lg:basis-3/5"
: "lg:basis-2/5",
)}
diff --git a/web/src/components/settings/CameraEditForm.tsx b/web/src/components/settings/CameraEditForm.tsx
index c18b5ffd3..50db13882 100644
--- a/web/src/components/settings/CameraEditForm.tsx
+++ b/web/src/components/settings/CameraEditForm.tsx
@@ -16,7 +16,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, useFieldArray } from "react-hook-form";
import { z } from "zod";
import axios from "axios";
-import { toast, Toaster } from "sonner";
+import { toast } from "sonner";
import { useTranslation } from "react-i18next";
import { useState, useMemo, useEffect } from "react";
import { LuTrash2, LuPlus } from "react-icons/lu";
@@ -26,6 +26,7 @@ import useSWR from "swr";
import { processCameraName } from "@/utils/cameraUtil";
import { Label } from "@/components/ui/label";
import { ConfigSetBody } from "@/types/cameraWizard";
+import { Toaster } from "../ui/sonner";
const RoleEnum = z.enum(["audio", "detect", "record"]);
type Role = z.infer
;
diff --git a/web/src/types/record.ts b/web/src/types/record.ts
index 25820c3d9..dbe43653a 100644
--- a/web/src/types/record.ts
+++ b/web/src/types/record.ts
@@ -44,4 +44,5 @@ export type RecordingStartingPoint = {
export type RecordingPlayerError = "stalled" | "startup";
export const ASPECT_VERTICAL_LAYOUT = 1.5;
+export const ASPECT_PORTRAIT_LAYOUT = 1.333;
export const ASPECT_WIDE_LAYOUT = 2;
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index e9729182f..dd8bb83f5 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -447,7 +447,7 @@ export default function LiveDashboardView({
)}
{cameras.length == 0 && !includeBirdseye ? (
-
+
) : (
<>
{!fullscreen && events && events.length > 0 && (
@@ -666,28 +666,39 @@ export default function LiveDashboardView({
);
}
-function NoCameraView() {
+function NoCameraView({ cameraGroup }: { cameraGroup?: string }) {
const { t } = useTranslation(["views/live"]);
const { auth } = useContext(AuthContext);
const isAdmin = useIsAdmin();
- // Check if this is a restricted user with no cameras in this group
+ const isDefault = cameraGroup === "default";
const isRestricted = !isAdmin && auth.isAuthenticated;
+ let type: "default" | "group" | "restricted";
+ if (isRestricted) {
+ type = "restricted";
+ } else if (isDefault) {
+ type = "default";
+ } else {
+ type = "group";
+ }
+
return (
}
- title={
- isRestricted ? t("noCameras.restricted.title") : t("noCameras.title")
+ title={t(`noCameras.${type}.title`)}
+ description={t(`noCameras.${type}.description`)}
+ buttonText={
+ type !== "restricted" && isDefault
+ ? t(`noCameras.${type}.buttonText`)
+ : undefined
}
- description={
- isRestricted
- ? t("noCameras.restricted.description")
- : t("noCameras.description")
+ link={
+ type !== "restricted" && isDefault
+ ? "/settings?page=cameraManagement"
+ : undefined
}
- buttonText={!isRestricted ? t("noCameras.buttonText") : undefined}
- link={!isRestricted ? "/settings?page=cameraManagement" : undefined}
/>
);
diff --git a/web/src/views/settings/CameraManagementView.tsx b/web/src/views/settings/CameraManagementView.tsx
index 8f1b5eae5..77231de45 100644
--- a/web/src/views/settings/CameraManagementView.tsx
+++ b/web/src/views/settings/CameraManagementView.tsx
@@ -1,6 +1,6 @@
import Heading from "@/components/ui/heading";
import { useCallback, useEffect, useMemo, useState } from "react";
-import { Toaster } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
import { Button } from "@/components/ui/button";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
diff --git a/web/src/views/settings/CameraReviewSettingsView.tsx b/web/src/views/settings/CameraReviewSettingsView.tsx
index 7a7b92e4e..974ed1ed6 100644
--- a/web/src/views/settings/CameraReviewSettingsView.tsx
+++ b/web/src/views/settings/CameraReviewSettingsView.tsx
@@ -1,6 +1,7 @@
import Heading from "@/components/ui/heading";
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { Toaster, toast } from "sonner";
+import { toast } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
import {
Form,
FormControl,
@@ -158,11 +159,12 @@ export default function CameraReviewSettingsView({
});
}
setChangedValue(true);
+ setUnsavedChanges(true);
setSelectDetections(isChecked as boolean);
},
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
- [watchedAlertsZones],
+ [watchedAlertsZones, setUnsavedChanges],
);
const saveToConfig = useCallback(
@@ -197,6 +199,8 @@ export default function CameraReviewSettingsView({
position: "top-center",
},
);
+ setChangedValue(false);
+ setUnsavedChanges(false);
updateConfig();
} else {
toast.error(
@@ -229,7 +233,14 @@ export default function CameraReviewSettingsView({
setIsLoading(false);
});
},
- [updateConfig, setIsLoading, selectedCamera, cameraConfig, t],
+ [
+ updateConfig,
+ setIsLoading,
+ selectedCamera,
+ cameraConfig,
+ t,
+ setUnsavedChanges,
+ ],
);
const onCancel = useCallback(() => {
@@ -495,6 +506,7 @@ export default function CameraReviewSettingsView({
)}
onCheckedChange={(checked) => {
setChangedValue(true);
+ setUnsavedChanges(true);
return checked
? field.onChange([
...field.value,
@@ -600,6 +612,8 @@ export default function CameraReviewSettingsView({
zone.name,
)}
onCheckedChange={(checked) => {
+ setChangedValue(true);
+ setUnsavedChanges(true);
return checked
? field.onChange([
...field.value,
@@ -699,7 +713,6 @@ export default function CameraReviewSettingsView({
)}
/>