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