From 68dfaaf7672103228b51fe90dc3133c56bfa938c Mon Sep 17 00:00:00 2001
From: Jason Hunter <hunterjm@gmail.com>
Date: Sat, 5 Jun 2021 20:40:52 -0400
Subject: [PATCH] hide recordings page if record is not enabled, show error if
 no recordings available.

---
 frigate/http.py              |  2 +-
 web/src/Sidebar.jsx          | 23 ++++++++++++++---------
 web/src/routes/Cameras.jsx   | 17 ++++++++++-------
 web/src/routes/Recording.jsx | 12 ++++++++++++
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/frigate/http.py b/frigate/http.py
index 8aeb58741..040e66bb3 100644
--- a/frigate/http.py
+++ b/frigate/http.py
@@ -456,7 +456,7 @@ def recordings(camera_name):
     files = glob.glob(f"{RECORD_DIR}/*/*/*/{camera_name}")
 
     if len(files) == 0:
-        return "No recordings found.", 404
+        return jsonify([])
 
     files.sort()
 
diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx
index 60c1e46eb..3a9671160 100644
--- a/web/src/Sidebar.jsx
+++ b/web/src/Sidebar.jsx
@@ -9,7 +9,7 @@ import NavigationDrawer, { Destination, Separator } from './components/Navigatio
 
 export default function Sidebar() {
   const { data: config } = useConfig();
-  const cameras = useMemo(() => Object.keys(config.cameras), [config]);
+  const cameras = useMemo(() => Object.entries(config.cameras), [config]);
 
   return (
     <NavigationDrawer header={<Header />}>
@@ -19,7 +19,7 @@ export default function Sidebar() {
           matches ? (
             <Fragment>
               <Separator />
-              {cameras.map((camera) => (
+              {cameras.map(([camera]) => (
                 <Destination href={`/cameras/${camera}`} text={camera} />
               ))}
               <Separator />
@@ -32,13 +32,18 @@ export default function Sidebar() {
           matches ? (
             <Fragment>
               <Separator />
-              {cameras.map((camera) => (
-                <Destination
-                  path={`/recording/${camera}/:date?/:hour?/:seconds?`}
-                  href={`/recording/${camera}`}
-                  text={camera}
-                />
-              ))}
+              {cameras.map(([camera, conf]) => {
+                if (conf.record.enabled) {
+                  return (
+                    <Destination
+                      path={`/recording/${camera}/:date?/:hour?/:seconds?`}
+                      href={`/recording/${camera}`}
+                      text={camera}
+                    />
+                  );
+                }
+                return null;
+              })}
               <Separator />
             </Fragment>
           ) : null
diff --git a/web/src/routes/Cameras.jsx b/web/src/routes/Cameras.jsx
index a0a1758ea..b0bb5a228 100644
--- a/web/src/routes/Cameras.jsx
+++ b/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(
     () => [
       {
diff --git a/web/src/routes/Recording.jsx b/web/src/routes/Recording.jsx
index 9626bb4cd..0febe56a4 100644
--- a/web/src/routes/Recording.jsx
+++ b/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(),