hide recordings page if record is not enabled, show error if no recordings available.

web/src/routes/Cameras.jsx

@@ -16,22 +16,25 @@ export default function Cameras() {
     <ActivityIndicator />
   ) : (
     <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
-      {Object.keys(config.cameras).map((camera) => (
-        <Camera name={camera} />
+      {Object.entries(config.cameras).map(([camera, conf]) => (
+        <Camera name={camera} conf={conf} />
       ))}
     </div>
   );
 }
 
-function Camera({ name }) {
+function Camera({ name, conf }) {
   const { payload: detectValue, send: sendDetect } = useDetectState(name);
   const { payload: clipValue, send: sendClips } = useClipsState(name);
   const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name);
   const href = `/cameras/${name}`;
-  const buttons = useMemo(() => [
-    { name: 'Events', href: `/events?camera=${name}` },
-    { name: 'Recordings', href: `/recording/${name}` }
-  ], [name]);
+  const buttons = useMemo(() => {
+    const result = [{ name: 'Events', href: `/events?camera=${name}` }];
+    if (conf.record.enabled) {
+      result.push({ name: 'Recordings', href: `/recording/${name}` });
+    }
+    return result;
+  }, [name, conf.record.enabled]);
   const icons = useMemo(
     () => [
       {

web/src/routes/Recording.jsx

@@ -14,6 +14,18 @@ export default function Recording({ camera, date, hour, seconds }) {
     return <ActivityIndicator />;
   }
 
+  if (data.length === 0) {
+    return (
+      <div className="space-y-4">
+        <Heading>{camera} Recordings</Heading>
+        <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
+          <p class="font-bold">No Recordings Found</p>
+          <p>Make sure you have enabled the record role in your configuration for the {camera} camera.</p>
+        </div>
+      </div>
+    );
+  }
+
   const recordingDates = data.map((item) => item.date);
   const selectedDate = closestTo(
     date ? parseISO(date) : new Date(),