Use empty card with dynamic text for review based on the user's config

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

@@ -9,7 +9,11 @@
   "empty": {
     "alert": "There are no alerts to review",
     "detection": "There are no detections to review",
-    "motion": "No motion data found"
+    "motion": "No motion data found",
+    "recordingsDisabled": {
+      "title": "Recordings must be enabled",
+      "description": "Review items can only be created for a camera when recordings are enabled for that camera."
+    }
   },
   "timeline": "Timeline",
   "timeline.aria": "Select timeline",

web/src/components/card/EmptyCard.tsx

@@ -2,15 +2,18 @@ import React from "react";
 import { Button } from "../ui/button";
 import Heading from "../ui/heading";
 import { Link } from "react-router-dom";
+import { cn } from "@/lib/utils";
 
 type EmptyCardProps = {
+  className?: string;
   icon: React.ReactNode;
   title: string;
-  description: string;
+  description?: string;
   buttonText?: string;
   link?: string;
 };
 export function EmptyCard({
+  className,
   icon,
   title,
   description,
@@ -18,10 +21,12 @@ export function EmptyCard({
   link,
 }: EmptyCardProps) {
   return (
-    <div className="flex flex-col items-center gap-2">
+    <div className={cn("flex flex-col items-center gap-2", className)}>
       {icon}
       <Heading as="h4">{title}</Heading>
+      {description && (
         <div className="mb-3 text-secondary-foreground">{description}</div>
+      )}
       {buttonText?.length && (
         <Button size="sm" variant="select">
           <Link to={link ?? "#"}>{buttonText}</Link>

web/src/types/card.ts

@@ -0,0 +1,4 @@
+export type EmptyCardData = {
+  title: string;
+  description?: string;
+};

web/src/views/events/EventView.tsx

@@ -56,6 +56,8 @@ import { GiSoundWaves } from "react-icons/gi";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { useTranslation } from "react-i18next";
+import { EmptyCard } from "@/components/card/EmptyCard";
+import { EmptyCardData } from "@/types/card";
 
 type EventViewProps = {
   reviewItems?: SegmentedReviewData;
@@ -132,6 +134,24 @@ export default function EventView({
     }
   }, [filter, showReviewed, reviewSummary]);
 
+  const emptyCardData: EmptyCardData = useMemo(() => {
+    if (
+      !config ||
+      Object.values(config.cameras).find(
+        (cam) => cam.record.enabled_in_config,
+      ) != undefined
+    ) {
+      return {
+        title: t("empty." + severity.replace(/_/g, " ")),
+      };
+    }
+
+    return {
+      title: t("empty.recordingsDisabled.title"),
+      description: t("empty.recordingsDisabled.description"),
+    };
+  }, [config, severity, t]);
+
   // review interaction
 
   const [selectedReviews, setSelectedReviews] = useState<ReviewSegment[]>([]);
@@ -412,6 +432,7 @@ export default function EventView({
             timeRange={timeRange}
             startTime={startTime}
             loading={severity != severityToggle}
+            emptyCardData={emptyCardData}
             markItemAsReviewed={markItemAsReviewed}
             markAllItemsAsReviewed={markAllItemsAsReviewed}
             onSelectReview={onSelectReview}
@@ -430,6 +451,7 @@ export default function EventView({
             startTime={startTime}
             filter={filter}
             motionOnly={motionOnly}
+            emptyCardData={emptyCardData}
             onOpenRecording={onOpenRecording}
           />
         )}
@@ -455,6 +477,7 @@ type DetectionReviewProps = {
   timeRange: { before: number; after: number };
   startTime?: number;
   loading: boolean;
+  emptyCardData: EmptyCardData;
   markItemAsReviewed: (review: ReviewSegment) => void;
   markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
   onSelectReview: (
@@ -478,6 +501,7 @@ function DetectionReview({
   timeRange,
   startTime,
   loading,
+  emptyCardData,
   markItemAsReviewed,
   markAllItemsAsReviewed,
   onSelectReview,
@@ -737,10 +761,12 @@ function DetectionReview({
         )}
 
         {!loading && currentItems?.length === 0 && (
-          <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
+          <EmptyCard
-            <LuFolderCheck className="size-16" />
+            className="y-translate-1/2 absolute left-[50%] top-[50%] -translate-x-1/2"
-            {t("empty." + severity.replace(/_/g, " "))}
+            title={emptyCardData.title}
-          </div>
+            description={emptyCardData.description}
+            icon={<LuFolderCheck className="size-16" />}
+          />
         )}
 
         <div
@@ -875,6 +901,7 @@ type MotionReviewProps = {
   startTime?: number;
   filter?: ReviewFilter;
   motionOnly?: boolean;
+  emptyCardData: EmptyCardData;
   onOpenRecording: (data: RecordingStartingPoint) => void;
 };
 function MotionReview({
@@ -885,9 +912,9 @@ function MotionReview({
   startTime,
   filter,
   motionOnly = false,
+  emptyCardData,
   onOpenRecording,
 }: MotionReviewProps) {
-  const { t } = useTranslation(["views/events"]);
   const segmentDuration = 30;
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -1080,9 +1107,12 @@ function MotionReview({
 
   if (motionData?.length === 0) {
     return (
-      <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-        <LuFolderX className="size-16" />
+        <EmptyCard
-        {t("empty.motion")}
+          title={emptyCardData.title}
+          description={emptyCardData.description}
+          icon={<LuFolderX className="size-16" />}
+        />
       </div>
     );
   }