hide recordings page if record is not enabled, show error if no recordings available.

This commit is contained in:
Jason Hunter 2021-06-05 20:40:52 -04:00 committed by Blake Blackshear
parent 0bb998c465
commit 68dfaaf767
4 changed files with 37 additions and 17 deletions

View File

@ -456,7 +456,7 @@ def recordings(camera_name):
files = glob.glob(f"{RECORD_DIR}/*/*/*/{camera_name}") files = glob.glob(f"{RECORD_DIR}/*/*/*/{camera_name}")
if len(files) == 0: if len(files) == 0:
return "No recordings found.", 404 return jsonify([])
files.sort() files.sort()

View File

@ -9,7 +9,7 @@ import NavigationDrawer, { Destination, Separator } from './components/Navigatio
export default function Sidebar() { export default function Sidebar() {
const { data: config } = useConfig(); const { data: config } = useConfig();
const cameras = useMemo(() => Object.keys(config.cameras), [config]); const cameras = useMemo(() => Object.entries(config.cameras), [config]);
return ( return (
<NavigationDrawer header={<Header />}> <NavigationDrawer header={<Header />}>
@ -19,7 +19,7 @@ export default function Sidebar() {
matches ? ( matches ? (
<Fragment> <Fragment>
<Separator /> <Separator />
{cameras.map((camera) => ( {cameras.map(([camera]) => (
<Destination href={`/cameras/${camera}`} text={camera} /> <Destination href={`/cameras/${camera}`} text={camera} />
))} ))}
<Separator /> <Separator />
@ -32,13 +32,18 @@ export default function Sidebar() {
matches ? ( matches ? (
<Fragment> <Fragment>
<Separator /> <Separator />
{cameras.map((camera) => ( {cameras.map(([camera, conf]) => {
<Destination if (conf.record.enabled) {
path={`/recording/${camera}/:date?/:hour?/:seconds?`} return (
href={`/recording/${camera}`} <Destination
text={camera} path={`/recording/${camera}/:date?/:hour?/:seconds?`}
/> href={`/recording/${camera}`}
))} text={camera}
/>
);
}
return null;
})}
<Separator /> <Separator />
</Fragment> </Fragment>
) : null ) : null

View File

@ -16,22 +16,25 @@ export default function Cameras() {
<ActivityIndicator /> <ActivityIndicator />
) : ( ) : (
<div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{Object.keys(config.cameras).map((camera) => ( {Object.entries(config.cameras).map(([camera, conf]) => (
<Camera name={camera} /> <Camera name={camera} conf={conf} />
))} ))}
</div> </div>
); );
} }
function Camera({ name }) { function Camera({ name, conf }) {
const { payload: detectValue, send: sendDetect } = useDetectState(name); const { payload: detectValue, send: sendDetect } = useDetectState(name);
const { payload: clipValue, send: sendClips } = useClipsState(name); const { payload: clipValue, send: sendClips } = useClipsState(name);
const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name); const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name);
const href = `/cameras/${name}`; const href = `/cameras/${name}`;
const buttons = useMemo(() => [ const buttons = useMemo(() => {
{ name: 'Events', href: `/events?camera=${name}` }, const result = [{ name: 'Events', href: `/events?camera=${name}` }];
{ name: 'Recordings', href: `/recording/${name}` } if (conf.record.enabled) {
], [name]); result.push({ name: 'Recordings', href: `/recording/${name}` });
}
return result;
}, [name, conf.record.enabled]);
const icons = useMemo( const icons = useMemo(
() => [ () => [
{ {

View File

@ -14,6 +14,18 @@ export default function Recording({ camera, date, hour, seconds }) {
return <ActivityIndicator />; 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 recordingDates = data.map((item) => item.date);
const selectedDate = closestTo( const selectedDate = closestTo(
date ? parseISO(date) : new Date(), date ? parseISO(date) : new Date(),