Empty cameras view (#20434)

* Don't define camera by default

* Add empty card component and use for camera view

* Add i18n

frigate/config/config.py

@@ -80,18 +80,7 @@ DEFAULT_CONFIG = """
 mqtt:
   enabled: False
 
-cameras:
-  name_of_your_camera: # <------ Name the camera
-    enabled: True
-    ffmpeg:
-      inputs:
-        - path: rtsp://10.0.10.10:554/rtsp # <----- The stream you want to use for detection
-          roles:
-            - detect
-    detect:
-      enabled: False # <---- disable detection until you have a working camera feed
-      width: 1280
-      height: 720
+cameras: {}  # No cameras defined, UI wizard should be used
 """
 
 DEFAULT_DETECTORS = {"cpu": {"type": "cpu"}}

web/public/locales/en/views/live.json

@@ -168,5 +168,10 @@
       "label": "Edit Camera Group"
     },
     "exitEdit": "Exit Editing"
+  },
+  "noCameras": {
+    "title": "No Cameras Set Up",
+    "description": "Get started by connecting a camera.",
+    "buttonText": "Add Camera"
   }
 }

web/src/components/card/EmptyCard.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Button } from "../ui/button";
+import Heading from "../ui/heading";
+
+type EmptyCardProps = {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  buttonText?: string;
+};
+export function EmptyCard({
+  icon,
+  title,
+  description,
+  buttonText,
+}: EmptyCardProps) {
+  return (
+    <div className="flex flex-col items-center gap-2">
+      {icon}
+      <Heading as="h4">{title}</Heading>
+      <div className="text-secondary-foreground">{description}</div>
+      {buttonText?.length && (
+        <Button size="sm" variant="select">
+          {buttonText}
+        </Button>
+      )}
+    </div>
+  );
+}

web/src/views/live/LiveDashboardView.tsx

@@ -44,6 +44,8 @@ import { useResizeObserver } from "@/hooks/resize-observer";
 import LiveContextMenu from "@/components/menu/LiveContextMenu";
 import { useStreamingSettings } from "@/context/streaming-settings-provider";
 import { useTranslation } from "react-i18next";
+import { EmptyCard } from "@/components/card/EmptyCard";
+import { BsFillCameraVideoOffFill } from "react-icons/bs";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
@@ -352,6 +354,10 @@ export default function LiveDashboardView({
     onSaveMuting(true);
   };
 
+  if (cameras.length == 0) {
+    return <NoCameraView />;
+  }
+
   return (
     <div
       className="scrollbar-container size-full select-none overflow-y-auto px-1 pt-2 md:p-2"
@@ -608,3 +614,18 @@ export default function LiveDashboardView({
     </div>
   );
 }
+
+function NoCameraView() {
+  const { t } = useTranslation(["views/live"]);
+
+  return (
+    <div className="flex size-full items-center justify-center">
+      <EmptyCard
+        icon={<BsFillCameraVideoOffFill className="size-8" />}
+        title={t("noCameras.title")}
+        description={t("noCameras.description")}
+        buttonText={t("noCameras.buttonText")}
+      />
+    </div>
+  );
+}