Empty cameras view (#20434)

* Don't define camera by default

* Add empty card component and use for camera view

* Add i18n

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>
+  );
+}