forked from Github/frigate
Improve graph using pandas (#9234)
* Ensure viewport is always full screen * Protect against hour with no cards and ensure data is consistent * Reduce grouped up image refreshes * Include current hour and fix scrubbing bugginess * Scroll initially selected timeline in to view * Expand timelne class type * Use poster image for preview on video player instead of using separate image view * Fix available streaming modes * Incrase timing for grouping timline items * Fix audio activity listener * Fix player not switching views correctly * Use player time to convert to timeline time * Update sub labels for previous timeline items * Show mini timeline bar for non selected items * Rewrite desktop timeline to use separate dynamic video player component * Extend improvements to mobile as well * Improve time formatting * Fix scroll * Fix no preview case * Mobile fixes * Audio toggle fixes * More fixes for mobile * Improve scaling of graph motion activity * Add keyboard shortcut hook and support shortcuts for playback page * Fix sizing of dialog * Improve height scaling of dialog * simplify and fix layout system for timeline * Fix timeilne items not working * Implement basic Frigate+ submitting from timeline
This commit is contained in:
Nicolas Mowen
committed by
Blake Blackshear
Blake Blackshear
parent
9c4b69191b
commit
af3f6dadcb
@@ -1,17 +1,17 @@
|
||||
import { useApiHost } from "@/api";
|
||||
import TimelineEventOverlay from "@/components/overlay/TimelineDataOverlay";
|
||||
import VideoPlayer from "@/components/player/VideoPlayer";
|
||||
import ActivityScrubber from "@/components/scrubber/ActivityScrubber";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import Player from "video.js/dist/types/player";
|
||||
import TimelineItemCard from "@/components/card/TimelineItemCard";
|
||||
import { getTimelineHoursForDay } from "@/utils/historyUtil";
|
||||
import { GraphDataPoint } from "@/types/graph";
|
||||
import TimelineGraph from "@/components/graph/TimelineGraph";
|
||||
import TimelineBar from "@/components/bar/TimelineBar";
|
||||
import DynamicVideoPlayer, {
|
||||
DynamicVideoController,
|
||||
} from "@/components/player/DynamicVideoPlayer";
|
||||
|
||||
type DesktopTimelineViewProps = {
|
||||
timelineData: CardsData;
|
||||
@@ -24,7 +24,6 @@ export default function DesktopTimelineView({
|
||||
allPreviews,
|
||||
initialPlayback,
|
||||
}: DesktopTimelineViewProps) {
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const timezone = useMemo(
|
||||
() =>
|
||||
@@ -32,137 +31,31 @@ export default function DesktopTimelineView({
|
||||
[config]
|
||||
);
|
||||
|
||||
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
||||
const initialScrollRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const [selectedPlayback, setSelectedPlayback] = useState(initialPlayback);
|
||||
const [timelineTime, setTimelineTime] = useState(0);
|
||||
|
||||
const playerRef = useRef<Player | undefined>(undefined);
|
||||
const previewRef = useRef<Player | undefined>(undefined);
|
||||
|
||||
const [scrubbing, setScrubbing] = useState(false);
|
||||
const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
const [seeking, setSeeking] = useState(false);
|
||||
const [timeToSeek, setTimeToSeek] = useState<number | undefined>(undefined);
|
||||
const [timelineTime, setTimelineTime] = useState(
|
||||
initialPlayback.timelineItems.length > 0
|
||||
? initialPlayback.timelineItems[0].timestamp - initialPlayback.range.start
|
||||
: 0
|
||||
);
|
||||
|
||||
const annotationOffset = useMemo(() => {
|
||||
if (!config) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return (
|
||||
(config.cameras[initialPlayback.camera]?.detect?.annotation_offset || 0) /
|
||||
1000
|
||||
);
|
||||
}, [config]);
|
||||
|
||||
const recordingParams = useMemo(() => {
|
||||
return {
|
||||
before: selectedPlayback.range.end,
|
||||
after: selectedPlayback.range.start,
|
||||
};
|
||||
}, [selectedPlayback]);
|
||||
const { data: recordings } = useSWR<Recording[]>(
|
||||
selectedPlayback
|
||||
? [`${selectedPlayback.camera}/recordings`, recordingParams]
|
||||
: null,
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const playbackUri = useMemo(() => {
|
||||
if (!selectedPlayback) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const date = new Date(selectedPlayback.range.start * 1000);
|
||||
return `${apiHost}vod/${date.getFullYear()}-${
|
||||
date.getMonth() + 1
|
||||
}/${date.getDate()}/${date.getHours()}/${
|
||||
selectedPlayback.camera
|
||||
}/${timezone.replaceAll("/", ",")}/master.m3u8`;
|
||||
}, [selectedPlayback]);
|
||||
|
||||
const onSelectItem = useCallback(
|
||||
(timeline: Timeline | undefined) => {
|
||||
if (timeline) {
|
||||
setFocusedItem(timeline);
|
||||
const selected = timeline.timestamp;
|
||||
playerRef.current?.pause();
|
||||
|
||||
let seekSeconds = 0;
|
||||
(recordings || []).every((segment) => {
|
||||
// if the next segment is past the desired time, stop calculating
|
||||
if (segment.start_time > selected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (segment.end_time < selected) {
|
||||
seekSeconds += segment.end_time - segment.start_time;
|
||||
return true;
|
||||
}
|
||||
|
||||
seekSeconds +=
|
||||
segment.end_time -
|
||||
segment.start_time -
|
||||
(segment.end_time - selected);
|
||||
return true;
|
||||
});
|
||||
playerRef.current?.currentTime(seekSeconds);
|
||||
} else {
|
||||
setFocusedItem(undefined);
|
||||
}
|
||||
},
|
||||
[annotationOffset, recordings, playerRef]
|
||||
);
|
||||
|
||||
// handle seeking to next frame when seek is finished
|
||||
// handle scrolling to initial timeline item
|
||||
useEffect(() => {
|
||||
if (seeking) {
|
||||
return;
|
||||
if (initialScrollRef.current != null) {
|
||||
initialScrollRef.current.scrollIntoView();
|
||||
}
|
||||
}, [initialScrollRef]);
|
||||
|
||||
if (timeToSeek && timeToSeek != previewRef.current?.currentTime()) {
|
||||
setSeeking(true);
|
||||
previewRef.current?.currentTime(timeToSeek);
|
||||
}
|
||||
}, [timeToSeek, seeking]);
|
||||
|
||||
// handle loading main / preview playback when selected hour changes
|
||||
useEffect(() => {
|
||||
if (!playerRef.current || !previewRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimelineTime(
|
||||
selectedPlayback.timelineItems.length > 0
|
||||
? selectedPlayback.timelineItems[0].timestamp
|
||||
: selectedPlayback.range.start
|
||||
);
|
||||
|
||||
playerRef.current.src({
|
||||
src: playbackUri,
|
||||
type: "application/vnd.apple.mpegurl",
|
||||
const cameraPreviews = useMemo(() => {
|
||||
return allPreviews.filter((preview) => {
|
||||
return preview.camera == initialPlayback.camera;
|
||||
});
|
||||
|
||||
if (selectedPlayback.relevantPreview) {
|
||||
previewRef.current.src({
|
||||
src: selectedPlayback.relevantPreview.src,
|
||||
type: selectedPlayback.relevantPreview.type,
|
||||
});
|
||||
}
|
||||
}, [playerRef, previewRef, selectedPlayback]);
|
||||
}, []);
|
||||
|
||||
const timelineStack = useMemo(
|
||||
() =>
|
||||
getTimelineHoursForDay(
|
||||
selectedPlayback.camera,
|
||||
timelineData,
|
||||
allPreviews,
|
||||
cameraPreviews,
|
||||
selectedPlayback.range.start + 60
|
||||
),
|
||||
[]
|
||||
@@ -179,31 +72,29 @@ export default function DesktopTimelineView({
|
||||
],
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const timelineGraphData = useMemo(() => {
|
||||
if (!activity) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const graphData: {
|
||||
[hour: string]: { objects: GraphDataPoint[]; motion: GraphDataPoint[] };
|
||||
[hour: string]: { objects: number[]; motion: GraphDataPoint[] };
|
||||
} = {};
|
||||
|
||||
Object.entries(activity).forEach(([hour, data]) => {
|
||||
const objects: GraphDataPoint[] = [];
|
||||
const objects: number[] = [];
|
||||
const motion: GraphDataPoint[] = [];
|
||||
|
||||
data.forEach((seg) => {
|
||||
if (seg.type == "objects") {
|
||||
objects.push({
|
||||
x: new Date(seg.date * 1000),
|
||||
y: seg.count,
|
||||
});
|
||||
} else {
|
||||
motion.push({
|
||||
x: new Date(seg.date * 1000),
|
||||
y: seg.count,
|
||||
});
|
||||
data.forEach((seg, idx) => {
|
||||
if (seg.hasObjects) {
|
||||
objects.push(idx);
|
||||
}
|
||||
|
||||
motion.push({
|
||||
x: new Date(seg.date * 1000),
|
||||
y: seg.count,
|
||||
});
|
||||
});
|
||||
|
||||
graphData[hour] = { objects, motion };
|
||||
@@ -217,191 +108,133 @@ export default function DesktopTimelineView({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex">
|
||||
<>
|
||||
<div className="w-2/3 bg-black flex justify-center items-center">
|
||||
<div
|
||||
className={`w-full relative ${
|
||||
selectedPlayback.relevantPreview != undefined && scrubbing
|
||||
? "hidden"
|
||||
: "visible"
|
||||
}`}
|
||||
>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: true,
|
||||
sources: [
|
||||
{
|
||||
src: playbackUri,
|
||||
type: "application/vnd.apple.mpegurl",
|
||||
},
|
||||
],
|
||||
controlBar: {
|
||||
remainingTimeDisplay: false,
|
||||
progressControl: {
|
||||
seekBar: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
seekOptions={{ forward: 10, backward: 5 }}
|
||||
onReady={(player) => {
|
||||
playerRef.current = player;
|
||||
<div className="w-full flex flex-col">
|
||||
<div className="flex max-h-[60%]">
|
||||
<DynamicVideoPlayer
|
||||
className="w-2/3 bg-black flex justify-center items-center"
|
||||
camera={initialPlayback.camera}
|
||||
timeRange={selectedPlayback.range}
|
||||
cameraPreviews={cameraPreviews}
|
||||
onControllerReady={(controller) => {
|
||||
controllerRef.current = controller;
|
||||
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
|
||||
setTimelineTime(timestamp);
|
||||
});
|
||||
|
||||
if (selectedPlayback.timelineItems.length > 0) {
|
||||
player.currentTime(
|
||||
selectedPlayback.timelineItems[0].timestamp -
|
||||
selectedPlayback.range.start
|
||||
);
|
||||
} else {
|
||||
player.currentTime(0);
|
||||
}
|
||||
player.on("playing", () => onSelectItem(undefined));
|
||||
player.on("timeupdate", () => {
|
||||
setTimelineTime(Math.floor(player.currentTime() || 0));
|
||||
});
|
||||
}}
|
||||
onDispose={() => {
|
||||
playerRef.current = undefined;
|
||||
}}
|
||||
>
|
||||
{focusedItem && (
|
||||
<TimelineEventOverlay
|
||||
timeline={focusedItem}
|
||||
cameraConfig={config.cameras[selectedPlayback.camera]}
|
||||
/>
|
||||
)}
|
||||
</VideoPlayer>
|
||||
</div>
|
||||
{selectedPlayback.relevantPreview && (
|
||||
<div className={`w-full ${scrubbing ? "visible" : "hidden"}`}>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: false,
|
||||
controls: false,
|
||||
muted: true,
|
||||
loadingSpinner: false,
|
||||
sources: [
|
||||
{
|
||||
src: `${selectedPlayback.relevantPreview?.src}`,
|
||||
type: "video/mp4",
|
||||
},
|
||||
],
|
||||
}}
|
||||
seekOptions={{}}
|
||||
onReady={(player) => {
|
||||
previewRef.current = player;
|
||||
player.on("seeked", () => setSeeking(false));
|
||||
}}
|
||||
onDispose={() => {
|
||||
previewRef.current = undefined;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
<div className="px-2 h-[608px] overflow-auto">
|
||||
if (initialPlayback.timelineItems.length > 0) {
|
||||
controllerRef.current?.seekToTimestamp(
|
||||
selectedPlayback.timelineItems[0].timestamp,
|
||||
true
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="px-2 h-full w-1/3 overflow-y-auto overflow-x-hidden">
|
||||
{selectedPlayback.timelineItems.map((timeline) => {
|
||||
return (
|
||||
<TimelineItemCard
|
||||
key={timeline.timestamp}
|
||||
timeline={timeline}
|
||||
relevantPreview={selectedPlayback.relevantPreview}
|
||||
onSelect={() => onSelectItem(timeline)}
|
||||
onSelect={() => {
|
||||
controllerRef.current?.seekToTimelineItem(timeline);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-1 max-h-72 2xl:max-h-80 3xl:max-h-96 overflow-auto">
|
||||
{timelineStack.playbackItems.map((timeline) => {
|
||||
const isSelected =
|
||||
timeline.range.start == selectedPlayback.range.start;
|
||||
const graphData = timelineGraphData[timeline.range.start];
|
||||
<div className="mt-4 w-full h-full relative">
|
||||
<div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto">
|
||||
{timelineStack.playbackItems.map((timeline) => {
|
||||
const isInitiallySelected =
|
||||
initialPlayback.range.start == timeline.range.start;
|
||||
const isSelected =
|
||||
timeline.range.start == selectedPlayback.range.start;
|
||||
const graphData = timelineGraphData[timeline.range.start];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={timeline.range.start}
|
||||
className={`relative p-2 ${
|
||||
isSelected ? "bg-secondary bg-opacity-30 rounded-md" : ""
|
||||
}`}
|
||||
>
|
||||
<ActivityScrubber
|
||||
items={[]}
|
||||
timeBars={
|
||||
isSelected && selectedPlayback.relevantPreview
|
||||
? [
|
||||
{
|
||||
time: new Date(
|
||||
(timeline.range.start + timelineTime) * 1000
|
||||
),
|
||||
id: "playback",
|
||||
},
|
||||
]
|
||||
: []
|
||||
}
|
||||
options={{
|
||||
snap: null,
|
||||
min: new Date(timeline.range.start * 1000),
|
||||
max: new Date(timeline.range.end * 1000),
|
||||
zoomable: false,
|
||||
}}
|
||||
timechangeHandler={(data) => {
|
||||
if (!timeline.relevantPreview) {
|
||||
return;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
ref={isInitiallySelected ? initialScrollRef : null}
|
||||
key={timeline.range.start}
|
||||
>
|
||||
{isSelected ? (
|
||||
<div className="p-2 relative bg-secondary bg-opacity-30 rounded-md">
|
||||
<ActivityScrubber
|
||||
timeBars={
|
||||
isSelected
|
||||
? [
|
||||
{
|
||||
time: new Date(
|
||||
Math.max(timeline.range.start, timelineTime) *
|
||||
1000
|
||||
),
|
||||
id: "playback",
|
||||
},
|
||||
]
|
||||
: []
|
||||
}
|
||||
options={{
|
||||
snap: null,
|
||||
min: new Date(timeline.range.start * 1000),
|
||||
max: new Date(timeline.range.end * 1000),
|
||||
start: new Date(timeline.range.start * 1000),
|
||||
end: new Date(timeline.range.end * 1000),
|
||||
zoomable: false,
|
||||
height: "120px",
|
||||
}}
|
||||
timechangeHandler={(data) => {
|
||||
controllerRef.current?.scrubToTimestamp(
|
||||
data.time.getTime() / 1000
|
||||
);
|
||||
setTimelineTime(data.time.getTime() / 1000);
|
||||
}}
|
||||
timechangedHandler={(data) => {
|
||||
controllerRef.current?.seekToTimestamp(
|
||||
data.time.getTime() / 1000,
|
||||
true
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{isSelected && graphData && (
|
||||
<div className="absolute left-2 right-2 top-0 h-[84px]">
|
||||
<TimelineGraph
|
||||
id={timeline.range.start.toString()}
|
||||
data={[
|
||||
{
|
||||
name: "Motion",
|
||||
data: graphData.motion,
|
||||
},
|
||||
]}
|
||||
objects={graphData.objects}
|
||||
start={graphData.motion[0].x.getTime()}
|
||||
end={graphData.motion.at(-1)!!.x.getTime()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<TimelineBar
|
||||
startTime={timeline.range.start}
|
||||
graphData={graphData}
|
||||
onClick={() => {
|
||||
setSelectedPlayback(timeline);
|
||||
|
||||
if (playerRef.current?.paused() == false) {
|
||||
setScrubbing(true);
|
||||
playerRef.current?.pause();
|
||||
}
|
||||
let startTs;
|
||||
if (timeline.timelineItems.length > 0) {
|
||||
startTs = selectedPlayback.timelineItems[0].timestamp;
|
||||
} else {
|
||||
startTs = timeline.range.start;
|
||||
}
|
||||
|
||||
const seekTimestamp = data.time.getTime() / 1000;
|
||||
const seekTime =
|
||||
seekTimestamp - timeline.relevantPreview.start;
|
||||
setTimelineTime(seekTimestamp - timeline.range.start);
|
||||
setTimeToSeek(Math.round(seekTime));
|
||||
}}
|
||||
timechangedHandler={(data) => {
|
||||
const playbackTime = data.time.getTime() / 1000;
|
||||
playerRef.current?.currentTime(
|
||||
playbackTime - timeline.range.start
|
||||
);
|
||||
setScrubbing(false);
|
||||
playerRef.current?.play();
|
||||
}}
|
||||
selectHandler={(data) => {
|
||||
if (data.items.length > 0) {
|
||||
const selected = data.items[0];
|
||||
onSelectItem(
|
||||
selectedPlayback.timelineItems.find(
|
||||
(timeline) => timeline.timestamp == selected
|
||||
)
|
||||
);
|
||||
}
|
||||
}}
|
||||
doubleClickHandler={() => setSelectedPlayback(timeline)}
|
||||
/>
|
||||
{isSelected && graphData && (
|
||||
<div className="w-full absolute left-0 top-0 h-[84px]">
|
||||
<TimelineGraph
|
||||
id={timeline.range.start.toString()}
|
||||
data={[
|
||||
{
|
||||
name: "Motion",
|
||||
data: graphData.motion,
|
||||
},
|
||||
{ name: "Active Objects", data: graphData.objects },
|
||||
]}
|
||||
controllerRef.current?.seekToTimestamp(startTs, true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
import { useApiHost } from "@/api";
|
||||
import TimelineEventOverlay from "@/components/overlay/TimelineDataOverlay";
|
||||
import VideoPlayer from "@/components/player/VideoPlayer";
|
||||
import ActivityScrubber, {
|
||||
ScrubberItem,
|
||||
} from "@/components/scrubber/ActivityScrubber";
|
||||
@@ -11,9 +8,11 @@ import {
|
||||
getTimelineIcon,
|
||||
} from "@/utils/timelineUtil";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import Player from "video.js/dist/types/player";
|
||||
import DynamicVideoPlayer, {
|
||||
DynamicVideoController,
|
||||
} from "@/components/player/DynamicVideoPlayer";
|
||||
|
||||
type MobileTimelineViewProps = {
|
||||
playback: TimelinePlayback;
|
||||
@@ -22,34 +21,9 @@ type MobileTimelineViewProps = {
|
||||
export default function MobileTimelineView({
|
||||
playback,
|
||||
}: MobileTimelineViewProps) {
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const timezone = useMemo(
|
||||
() =>
|
||||
config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
[config]
|
||||
);
|
||||
|
||||
const playerRef = useRef<Player | undefined>(undefined);
|
||||
const previewRef = useRef<Player | undefined>(undefined);
|
||||
|
||||
const [scrubbing, setScrubbing] = useState(false);
|
||||
const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
const [seeking, setSeeking] = useState(false);
|
||||
const [timeToSeek, setTimeToSeek] = useState<number | undefined>(undefined);
|
||||
|
||||
const annotationOffset = useMemo(() => {
|
||||
if (!config) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return (
|
||||
(config.cameras[playback.camera]?.detect?.annotation_offset || 0) / 1000
|
||||
);
|
||||
}, [config]);
|
||||
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
||||
|
||||
const [timelineTime, setTimelineTime] = useState(
|
||||
playback.timelineItems.length > 0
|
||||
@@ -68,197 +42,69 @@ export default function MobileTimelineView({
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const playbackUri = useMemo(() => {
|
||||
if (!playback) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const date = new Date(playback.range.start * 1000);
|
||||
return `${apiHost}vod/${date.getFullYear()}-${
|
||||
date.getMonth() + 1
|
||||
}/${date.getDate()}/${date.getHours()}/${
|
||||
playback.camera
|
||||
}/${timezone.replaceAll("/", ",")}/master.m3u8`;
|
||||
}, [playback]);
|
||||
|
||||
const onSelectItem = useCallback(
|
||||
(timeline: Timeline | undefined) => {
|
||||
if (timeline) {
|
||||
setFocusedItem(timeline);
|
||||
const selected = timeline.timestamp;
|
||||
playerRef.current?.pause();
|
||||
|
||||
let seekSeconds = 0;
|
||||
(recordings || []).every((segment) => {
|
||||
// if the next segment is past the desired time, stop calculating
|
||||
if (segment.start_time > selected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (segment.end_time < selected) {
|
||||
seekSeconds += segment.end_time - segment.start_time;
|
||||
return true;
|
||||
}
|
||||
|
||||
seekSeconds +=
|
||||
segment.end_time -
|
||||
segment.start_time -
|
||||
(segment.end_time - selected);
|
||||
return true;
|
||||
});
|
||||
playerRef.current?.currentTime(seekSeconds);
|
||||
} else {
|
||||
setFocusedItem(undefined);
|
||||
}
|
||||
},
|
||||
[annotationOffset, recordings, playerRef]
|
||||
);
|
||||
|
||||
const onScrubTime = useCallback(
|
||||
(data: { time: Date }) => {
|
||||
if (!playback.relevantPreview) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (playerRef.current?.paused() == false) {
|
||||
setScrubbing(true);
|
||||
playerRef.current?.pause();
|
||||
}
|
||||
|
||||
const seekTimestamp = data.time.getTime() / 1000;
|
||||
const seekTime = seekTimestamp - playback.relevantPreview.start;
|
||||
setTimelineTime(seekTimestamp);
|
||||
setTimeToSeek(Math.round(seekTime));
|
||||
},
|
||||
[scrubbing, playerRef, playback]
|
||||
);
|
||||
|
||||
const onStopScrubbing = useCallback(
|
||||
(data: { time: Date }) => {
|
||||
const playbackTime = data.time.getTime() / 1000;
|
||||
playerRef.current?.currentTime(playbackTime - playback.range.start);
|
||||
setScrubbing(false);
|
||||
playerRef.current?.play();
|
||||
},
|
||||
[playback, playerRef]
|
||||
);
|
||||
|
||||
// handle seeking to next frame when seek is finished
|
||||
useEffect(() => {
|
||||
if (seeking) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (timeToSeek && timeToSeek != previewRef.current?.currentTime()) {
|
||||
setSeeking(true);
|
||||
previewRef.current?.currentTime(timeToSeek);
|
||||
}
|
||||
}, [timeToSeek, seeking]);
|
||||
|
||||
if (!config || !recordings) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<>
|
||||
<div
|
||||
className={`relative ${
|
||||
playback.relevantPreview && scrubbing ? "hidden" : "visible"
|
||||
}`}
|
||||
>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: true,
|
||||
sources: [
|
||||
{
|
||||
src: playbackUri,
|
||||
type: "application/vnd.apple.mpegurl",
|
||||
},
|
||||
],
|
||||
}}
|
||||
seekOptions={{ forward: 10, backward: 5 }}
|
||||
onReady={(player) => {
|
||||
playerRef.current = player;
|
||||
player.currentTime(timelineTime - playback.range.start);
|
||||
player.on("playing", () => {
|
||||
onSelectItem(undefined);
|
||||
});
|
||||
}}
|
||||
onDispose={() => {
|
||||
playerRef.current = undefined;
|
||||
}}
|
||||
>
|
||||
{config && focusedItem ? (
|
||||
<TimelineEventOverlay
|
||||
timeline={focusedItem}
|
||||
cameraConfig={config.cameras[playback.camera]}
|
||||
/>
|
||||
) : undefined}
|
||||
</VideoPlayer>
|
||||
</div>
|
||||
{playback.relevantPreview && (
|
||||
<div className={`${scrubbing ? "visible" : "hidden"}`}>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: true,
|
||||
controls: false,
|
||||
muted: true,
|
||||
loadingSpinner: false,
|
||||
sources: [
|
||||
{
|
||||
src: `${playback.relevantPreview?.src}`,
|
||||
type: "video/mp4",
|
||||
},
|
||||
],
|
||||
}}
|
||||
seekOptions={{}}
|
||||
onReady={(player) => {
|
||||
previewRef.current = player;
|
||||
player.pause();
|
||||
player.on("seeked", () => setSeeking(false));
|
||||
}}
|
||||
onDispose={() => {
|
||||
previewRef.current = undefined;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<DynamicVideoPlayer
|
||||
camera={playback.camera}
|
||||
timeRange={playback.range}
|
||||
cameraPreviews={
|
||||
playback.relevantPreview ? [playback.relevantPreview] : []
|
||||
}
|
||||
onControllerReady={(controller) => {
|
||||
controllerRef.current = controller;
|
||||
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
|
||||
setTimelineTime(timestamp);
|
||||
});
|
||||
|
||||
if (playback.timelineItems.length > 0) {
|
||||
controllerRef.current?.seekToTimestamp(
|
||||
playback.timelineItems[0].timestamp,
|
||||
true
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="m-1">
|
||||
{playback != undefined && (
|
||||
<ActivityScrubber
|
||||
items={timelineItemsToScrubber(playback.timelineItems)}
|
||||
timeBars={
|
||||
playback.relevantPreview
|
||||
? [{ time: new Date(timelineTime * 1000), id: "playback" }]
|
||||
: []
|
||||
}
|
||||
timeBars={[{ time: new Date(timelineTime * 1000), id: "playback" }]}
|
||||
options={{
|
||||
start: new Date(
|
||||
Math.max(playback.range.start, timelineTime - 300) * 1000
|
||||
),
|
||||
end: new Date(
|
||||
Math.min(playback.range.end, timelineTime + 300) * 1000
|
||||
),
|
||||
start: new Date(playback.range.start * 1000),
|
||||
end: new Date(playback.range.end * 1000),
|
||||
snap: null,
|
||||
min: new Date(playback.range.start * 1000),
|
||||
max: new Date(playback.range.end * 1000),
|
||||
timeAxis: { scale: "minute", step: 5 },
|
||||
timeAxis: { scale: "minute", step: 15 },
|
||||
zoomable: false,
|
||||
}}
|
||||
timechangeHandler={(data) => {
|
||||
controllerRef.current?.scrubToTimestamp(
|
||||
data.time.getTime() / 1000
|
||||
);
|
||||
setTimelineTime(data.time.getTime() / 1000);
|
||||
}}
|
||||
timechangedHandler={(data) => {
|
||||
controllerRef.current?.seekToTimestamp(
|
||||
data.time.getTime() / 1000,
|
||||
true
|
||||
);
|
||||
}}
|
||||
timechangeHandler={onScrubTime}
|
||||
timechangedHandler={onStopScrubbing}
|
||||
selectHandler={(data) => {
|
||||
if (data.items.length > 0) {
|
||||
const selected = parseFloat(data.items[0].split("-")[0]);
|
||||
|
||||
onSelectItem(
|
||||
playback.timelineItems.find(
|
||||
(timeline) => timeline.timestamp == selected
|
||||
)
|
||||
const timeline = playback.timelineItems.find(
|
||||
(timeline) => timeline.timestamp == selected
|
||||
);
|
||||
|
||||
if (timeline) {
|
||||
controllerRef.current?.seekToTimelineItem(timeline);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user