administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 01:05:20 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Eric Blohm 2021-10-27 15:03:01 -04:00
parent 26ae6084ea
commit a51ffda7a8
3 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/components/ButtonsTabbed.jsx
View File

@ -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>
);
}
}

2
web/src/routes/Camera.jsx
View File

@ -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}

2
web/src/routes/Recording.jsx
View File

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