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

added scrollIntoView when event has been mounted

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-22 21:12:51 +02:00
parent 4db0780169
commit e2a76e4bfe
2 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/routes/Event.jsx
View File

@ -1,5 +1,5 @@
import { h, Fragment } from 'preact'; import { h, Fragment } from 'preact';
import { useCallback, useState } from 'preact/hooks'; import { useCallback, useState, useEffect } from 'preact/hooks';
import ActivityIndicator from '../components/ActivityIndicator'; import ActivityIndicator from '../components/ActivityIndicator';
import Button from '../components/Button'; import Button from '../components/Button';
import Clip from '../icons/Clip'; import Clip from '../icons/Clip';
@ -11,13 +11,18 @@ import Heading from '../components/Heading';
import VideoPlayer from '../components/VideoPlayer'; import VideoPlayer from '../components/VideoPlayer';
import { FetchStatus, useApiHost, useEvent, useDelete } from '../api'; import { FetchStatus, useApiHost, useEvent, useDelete } from '../api';
export default function Event({ eventId, close }) { export default function Event({ eventId, close, scrollIntoView }) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data, status } = useEvent(eventId); const { data, status } = useEvent(eventId);
const [showDialog, setShowDialog] = useState(false); const [showDialog, setShowDialog] = useState(false);
const [deleteStatus, setDeleteStatus] = useState(FetchStatus.NONE); const [deleteStatus, setDeleteStatus] = useState(FetchStatus.NONE);
const setDeleteEvent = useDelete(); const setDeleteEvent = useDelete();
useEffect(() => {
// Call Events.js scroll when this event has been mounted.
scrollIntoView(eventId);
}, []);
const handleClickDelete = () => { const handleClickDelete = () => {
setShowDialog(true); setShowDialog(true);
}; };

28
web/src/routes/Events.jsx
View File

@ -128,19 +128,16 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
//Set event id to be rendered. //Set event id to be rendered.
setViewEvent(id); setViewEvent(id);
};
//scroll the event into view // Called from the mounted event.js to prevent
// race condition between scollIntoView and if component has been mounted.
const scrollIntoView = (id) => {
if (id in scrollToRef) scrollToRef[id].scrollIntoView(); if (id in scrollToRef) scrollToRef[id].scrollIntoView();
}; };
const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]); const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]);
const viewEventById = (eventId) => (
<Tr className="border-b-1">
<Td colSpan="8">
<Event eventId={eventId} close={() => setViewEvent(null)} />
</Td>
</Tr>
);
return ( return (
<div className="space-y-4 w-full"> <div className="space-y-4 w-full">
<Heading>Events</Heading> <Heading>Events</Heading>
@ -163,10 +160,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
</Thead> </Thead>
<Tbody> <Tbody>
{events.map( {events.map(
( ({ camera, id, label, start_time: startTime, end_time: endTime, top_score: score, zones }, i) => {
{ camera, id, label, start_time: startTime, end_time: endTime, thumbnail, top_score: score, zones },
i
) => {
const start = new Date(parseInt(startTime * 1000, 10)); const start = new Date(parseInt(startTime * 1000, 10));
const end = new Date(parseInt(endTime * 1000, 10)); const end = new Date(parseInt(endTime * 1000, 10));
const ref = i === events.length - 1 ? lastCellRef : undefined; const ref = i === events.length - 1 ? lastCellRef : undefined;
@ -228,7 +222,13 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
<Td>{start.toLocaleTimeString()}</Td> <Td>{start.toLocaleTimeString()}</Td>
<Td>{end.toLocaleTimeString()}</Td> <Td>{end.toLocaleTimeString()}</Td>
</Tr> </Tr>
{viewEvent === id ? viewEventById(viewEvent) : null} {viewEvent === id ? (
<Tr className="border-b-1">
<Td colSpan="8">
<Event scrollIntoView={scrollIntoView} eventId={id} close={() => setViewEvent(null)} />
</Td>
</Tr>
) : null}
</Fragment> </Fragment>
); );
} }
@ -236,7 +236,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
</Tbody> </Tbody>
<Tfoot> <Tfoot>
<Tr> <Tr>
<Td className="text-center p-4" colspan="8"> <Td className="text-center p-4" colSpan="8">
{status === FetchStatus.LOADING ? <ActivityIndicator /> : reachedEnd ? 'No more events' : null} {status === FetchStatus.LOADING ? <ActivityIndicator /> : reachedEnd ? 'No more events' : null}
</Td> </Td>
</Tr> </Tr>