Fix duration for long events and playback rate for top of the hour

This commit is contained in:
Jason Hunter 2022-02-09 11:53:19 -05:00 committed by Blake Blackshear
parent 21178613de
commit 8de15af7b4
2 changed files with 22 additions and 9 deletions

View File

@ -1,6 +1,14 @@
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { addSeconds, differenceInSeconds, fromUnixTime, format, parseISO, startOfHour } from 'date-fns';
import {
differenceInSeconds,
fromUnixTime,
format,
parseISO,
startOfHour,
differenceInMinutes,
differenceInHours,
} from 'date-fns';
import ArrowDropdown from '../icons/ArrowDropdown';
import ArrowDropup from '../icons/ArrowDropup';
import Link from '../components/Link';
@ -89,9 +97,16 @@ export function ExpandableList({ title, events = 0, children, selected = false }
export function EventCard({ camera, event, delay }) {
const apiHost = useApiHost();
const start = fromUnixTime(event.start_time);
let duration = 0;
let duration = 'In Progress';
if (event.end_time) {
duration = addSeconds(new Date(0), differenceInSeconds(fromUnixTime(event.end_time), start));
const end = fromUnixTime(event.end_time);
const hours = differenceInHours(end, start);
const minutes = differenceInMinutes(end, start) - hours * 60;
const seconds = differenceInSeconds(end, start) - hours * 60 - minutes * 60;
duration = '';
if (hours) duration += `${hours}h `;
if (minutes) duration += `${minutes}m `;
duration += `${seconds}s`;
}
const position = differenceInSeconds(start, startOfHour(start));
const offset = Object.entries(delay)
@ -110,9 +125,7 @@ export function EventCard({ camera, event, delay }) {
<div className="flex-1">
<div className="text-2xl text-white leading-tight capitalize">{event.label}</div>
<div className="text-xs md:text-normal text-gray-300">Start: {format(start, 'HH:mm:ss')}</div>
<div className="text-xs md:text-normal text-gray-300">
Duration: {duration ? format(duration, 'mm:ss') : 'In Progress'}
</div>
<div className="text-xs md:text-normal text-gray-300">Duration: {duration}</div>
</div>
<div className="text-lg text-white text-right leading-tight">{(event.top_score * 100).toFixed(1)}%</div>
</div>

View File

@ -64,11 +64,11 @@ export default function Recording({ camera, date, hour, seconds }) {
this.player.playlist.currentItem(selectedHour);
if (seconds !== undefined) {
this.player.currentTime(seconds);
// Force playback rate to be correct
const playbackRate = this.player.playbackRate();
this.player.defaultPlaybackRate(playbackRate);
}
}
// Force playback rate to be correct
const playbackRate = this.player.playbackRate();
this.player.defaultPlaybackRate(playbackRate);
}
return (