Add links for live/recording views on live/recording pages

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">
+  if(currentPage === '' || currentPage === 'live') {
-      {viewModes.map((item, i) => {
+    return (
-        return (
+      <nav className="flex justify-end">
-          <button onClick={() => handleClick(i)} className={i === selected ? selectedClassName : className}>
+        {viewModes.map((item, i) => {
-            {captitalize(item)}
+          return (
-          </button>
+            item === 'recordings' ? (
-        );
+              <Link className={className} href={`/recording/${camera}`}>Recordings</Link>
-      })}
+            ) : (
-    </nav>
+              <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>
+    );
+  }
 }

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}
 

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) => {