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

Fix start time with clip

Browse Source
This commit is contained in:
Nick Mowen 2023-04-21 08:33:35 -06:00
parent e2348102a1
commit 5d0e4f799d
1 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/components/TimelineSummary.jsx
View File

@ -9,9 +9,11 @@ import { Zone } from '../icons/Zone';
import { useState } from 'preact/hooks'; import { useState } from 'preact/hooks';
import { useApiHost } from '../api'; import { useApiHost } from '../api';
import Button from './Button'; import Button from './Button';
import VideoPlayer from './VideoPlayer';
export default function TimelineSummary({ event }) { export default function TimelineSummary({ event }) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const eventDuration = event.end_time - event.start_time;
const { data: eventTimeline } = useSWR([ const { data: eventTimeline } = useSWR([
'timeline', 'timeline',
{ {
@ -23,6 +25,16 @@ export default function TimelineSummary({ event }) {
const [timeIndex, setTimeIndex] = useState(0); const [timeIndex, setTimeIndex] = useState(0);
const onSelectMoment = async (index) => {
setTimeIndex(index);
if (this.player) {
const videoOffset = this.player.duration() - eventDuration;
const startTime = videoOffset + (eventTimeline[index].timestamp - event.start_time);
this.player.currentTime(startTime);
}
};
if (!eventTimeline || !config) { if (!eventTimeline || !config) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
@ -38,7 +50,7 @@ export default function TimelineSummary({ event }) {
type="text" type="text"
color={index == timeIndex ? 'blue' : 'gray'} color={index == timeIndex ? 'blue' : 'gray'}
aria-label={getTimelineItemDescription(config, item, event)} aria-label={getTimelineItemDescription(config, item, event)}
onClick={() => setTimeIndex(index)} onClick={() => onSelectMoment(index)}
> >
{item.class_type == 'visible' ? <PlayIcon className="w-8" /> : <ExitIcon className="w-8" />} {item.class_type == 'visible' ? <PlayIcon className="w-8" /> : <ExitIcon className="w-8" />}
</Button> </Button>
@ -48,7 +60,7 @@ export default function TimelineSummary({ event }) {
type="text" type="text"
color={index == timeIndex ? 'blue' : 'gray'} color={index == timeIndex ? 'blue' : 'gray'}
aria-label={getTimelineItemDescription(config, item, event)} aria-label={getTimelineItemDescription(config, item, event)}
onClick={() => setTimeIndex(index)} onClick={() => onSelectMoment(index)}
> >
<Zone className="w-8" /> <Zone className="w-8" />
</Button> </Button>
@ -59,12 +71,25 @@ export default function TimelineSummary({ event }) {
<div className="text-center"> <div className="text-center">
<Heading size="sm">{getTimelineItemDescription(config, eventTimeline[timeIndex], event)}</Heading> <Heading size="sm">{getTimelineItemDescription(config, eventTimeline[timeIndex], event)}</Heading>
<div className="flex justify-center p-2 py-4"> <VideoPlayer
<img options={{
className="flex-grow-0" preload: 'auto',
src={`${apiHost}/api/${event.camera}/recordings/${eventTimeline[timeIndex].timestamp}/snapshot.png`} autoplay: false,
/> sources: [
</div> {
src: `${apiHost}vod/event/${event.id}/master.m3u8`,
type: 'application/vnd.apple.mpegurl',
},
],
}}
seekOptions={{ forward: 10, backward: 5 }}
onReady={(player) => {
this.player = player;
}}
onDispose={() => {
this.player = null;
}}
/>
</div> </div>
</div> </div>
); );