hide recordings page if record is not enabled, show error if no recor…

…dings available.
LordNex · Jun 6, 2021 · 68dfaaf · 68dfaaf
1 parent 0bb998c
commit 68dfaaf
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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(),