From a51ffda7a824a5a0fd150bcaea9865bd05f16a9b Mon Sep 17 00:00:00 2001
From: Eric Blohm <eblohm93@gmail.com>
Date: Wed, 27 Oct 2021 15:03:01 -0400
Subject: [PATCH] Add links for live/recording views on live/recording pages

---
 web/src/components/ButtonsTabbed.jsx | 62 ++++++++++++++++++++++------
 web/src/routes/Camera.jsx            |  2 +-
 web/src/routes/Recording.jsx         |  2 +
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/web/src/components/ButtonsTabbed.jsx b/web/src/components/ButtonsTabbed.jsx
index ba68cf409..707b8709e 100644
--- a/web/src/components/ButtonsTabbed.jsx
+++ b/web/src/components/ButtonsTabbed.jsx
@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import { useCallback, useState } from 'preact/hooks';
+import Link from './Link';
 
 export default function ButtonsTabbed({
   viewModes = [''],
@@ -7,7 +8,9 @@ export default function ButtonsTabbed({
   setHeader = null,
   headers = [''],
   className = 'text-gray-600 py-0 px-4 block hover:text-gray-500',
-  selectedClassName = `${className} focus:outline-none border-b-2 font-medium border-gray-500`
+  selectedClassName = `${className} focus:outline-none border-b-2 font-medium border-gray-500`,
+  camera='',
+  currentPage=''
 }) {
   const [selected, setSelected] = useState(0);
   const captitalize = (str) => { return (`${str.charAt(0).toUpperCase()}${str.slice(1)}`); };
@@ -23,15 +26,50 @@ export default function ButtonsTabbed({
   }, [setViewMode, setHeader, setSelected, viewModes, getHeader]);
 
   setHeader && setHeader(getHeader(selected));
-  return (
-    <nav className="flex justify-end">
-      {viewModes.map((item, i) => {
-        return (
-          <button onClick={() => handleClick(i)} className={i === selected ? selectedClassName : className}>
-            {captitalize(item)}
-          </button>
-        );
-      })}
-    </nav>
-  );
+
+  if(currentPage === '' || currentPage === 'live') {
+    return (
+      <nav className="flex justify-end">
+        {viewModes.map((item, i) => {
+          return (
+            item === 'recordings' ? (
+              <Link className={className} href={`/recording/${camera}`}>Recordings</Link>
+            ) : (
+              <button onClick={() => handleClick(i)} className={i === selected ? selectedClassName : className}>
+                {captitalize(item)}
+              </button>
+            )
+          )
+        })}
+      </nav>
+    );
+  } else if (currentPage === 'recording') {
+    return (
+      <nav className="flex justify-end">
+        {viewModes.map((item, i) => {
+          return (
+            item === 'live' ? (
+              <Link className={className} href={`/cameras/${camera}`}>Live</Link>
+            ) : (
+              <button onClick={() => handleClick(i)} className={selectedClassName}>
+                {captitalize(item)}
+              </button>
+            )
+          )
+        })}
+      </nav>
+    );
+  } else {
+    return (
+      <nav className="flex justify-end">
+        {viewModes.map((item, i) => {
+          return (
+            <button onClick={() => handleClick(i)} className={i === selected ? selectedClassName : className}>
+              {captitalize(item)}
+            </button>
+          );
+        })}
+      </nav>
+    );
+  }
 }
diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx
index 503bf55d5..15fd95444 100644
--- a/web/src/routes/Camera.jsx
+++ b/web/src/routes/Camera.jsx
@@ -114,7 +114,7 @@ export default function Camera({ camera }) {
   return (
     <div className="space-y-4">
       <Heading size="2xl">{camera}</Heading>
-      <ButtonsTabbed viewModes={['live', 'debug']} setViewMode={setViewMode} />
+      <ButtonsTabbed viewModes={['live', 'debug', 'recordings']} setViewMode={setViewMode} camera={camera} currentPage={'live'} />
 
       {player}
 
diff --git a/web/src/routes/Recording.jsx b/web/src/routes/Recording.jsx
index 0febe56a4..af1896287 100644
--- a/web/src/routes/Recording.jsx
+++ b/web/src/routes/Recording.jsx
@@ -4,6 +4,7 @@ import ActivityIndicator from '../components/ActivityIndicator';
 import Heading from '../components/Heading';
 import RecordingPlaylist from '../components/RecordingPlaylist';
 import VideoPlayer from '../components/VideoPlayer';
+import ButtonsTabbed from '../components/ButtonsTabbed';
 import { FetchStatus, useApiHost, useRecording } from '../api';
 
 export default function Recording({ camera, date, hour, seconds }) {
@@ -71,6 +72,7 @@ export default function Recording({ camera, date, hour, seconds }) {
   return (
     <div className="space-y-4">
       <Heading>{camera} Recordings</Heading>
+      <ButtonsTabbed viewModes={['live', 'recordings']} camera={camera} currentPage={'recording'} />
 
       <VideoPlayer
         onReady={(player) => {