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

Improve background and scrubbing

Browse Source
This commit is contained in:
Nick Mowen 2023-12-31 19:28:54 -07:00
parent 4884a75c6f
commit 34d74a374c
1 changed files with 10 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/views/history/DesktopTimelineView.tsx
View File

@ -44,8 +44,8 @@ export default function DesktopTimelineView({
const [timeToSeek, setTimeToSeek] = useState<number | undefined>(undefined);
const [timelineTime, setTimelineTime] = useState(
initialPlayback.timelineItems.length > 0
? initialPlayback.timelineItems[0].timestamp
: initialPlayback.range.start
? initialPlayback.timelineItems[0].timestamp - initialPlayback.range.start
: 0
);
const annotationOffset = useMemo(() => {
@ -118,24 +118,6 @@ export default function DesktopTimelineView({
[annotationOffset, recordings, playerRef]
);
const onPlayerProgressUpdate = useCallback(() => {
if (!playerRef.current?.currentTime) {
return;
}
const playerTime = playerRef.current.currentTime();
if (!playerTime) {
return;
}
const time = timelineTime - selectedPlayback.range.start;
if (Math.round(playerTime) - time >= 5) {
setTimelineTime(selectedPlayback.range.start + playerTime);
}
}, [selectedPlayback, timelineTime]);
// handle seeking to next frame when seek is finished
useEffect(() => {
if (seeking) {
@ -165,9 +147,6 @@ export default function DesktopTimelineView({
type: "application/vnd.apple.mpegurl",
});
playerRef.current.off("timeupdate", onPlayerProgressUpdate);
playerRef.current.on("timeupdate", onPlayerProgressUpdate);
if (selectedPlayback.relevantPreview) {
previewRef.current.src({
src: selectedPlayback.relevantPreview.src,
@ -233,7 +212,9 @@ export default function DesktopTimelineView({
player.currentTime(0);
}
player.on("playing", () => onSelectItem(undefined));
player.on("timeupdate", onPlayerProgressUpdate);
player.on("timeupdate", () => {
setTimelineTime(Math.floor(player.currentTime() || 0));
});
}}
onDispose={() => {
playerRef.current = undefined;
@ -297,7 +278,7 @@ export default function DesktopTimelineView({
return (
<div
key={timeline.range.start}
className={`p-1 ${isSelected ? "border border-primary" : ""}`}
className={`p-2 ${isSelected ? "bg-secondary bg-opacity-30 rounded-md" : ""}`}
>
<ActivityScrubber
items={[]}
@ -305,7 +286,9 @@ export default function DesktopTimelineView({
isSelected && selectedPlayback.relevantPreview
? [
{
time: new Date(timelineTime * 1000),
time: new Date(
(timeline.range.start + timelineTime) * 1000
),
id: "playback",
},
]
@ -330,7 +313,7 @@ export default function DesktopTimelineView({
const seekTimestamp = data.time.getTime() / 1000;
const seekTime =
seekTimestamp - timeline.relevantPreview.start;
setTimelineTime(seekTimestamp);
setTimelineTime(seekTimestamp - timeline.range.start);
setTimeToSeek(Math.round(seekTime));
}}
timechangedHandler={(data) => {