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
@@ -5,7 +5,7 @@ type TWrapperProps = {
|
||||
};
|
||||
|
||||
const Wrapper = ({ children }: TWrapperProps) => {
|
||||
return <main className="flex flex-col max-h-screen">{children}</main>;
|
||||
return <main className="flex flex-col h-screen">{children}</main>;
|
||||
};
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
191
web/src/components/bar/TimelineBar.tsx
Normal file
191
web/src/components/bar/TimelineBar.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { GraphDataPoint } from "@/types/graph";
|
||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||
import useSWR from "swr";
|
||||
import ActivityIndicator from "../ui/activity-indicator";
|
||||
|
||||
type TimelineBarProps = {
|
||||
startTime: number;
|
||||
graphData:
|
||||
| {
|
||||
objects: number[];
|
||||
motion: GraphDataPoint[];
|
||||
}
|
||||
| undefined;
|
||||
onClick?: () => void;
|
||||
};
|
||||
export default function TimelineBar({
|
||||
startTime,
|
||||
graphData,
|
||||
onClick,
|
||||
}: TimelineBarProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
if (!config) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="my-1 p-1 w-full h-18 border rounded cursor-pointer hover:bg-secondary hover:bg-opacity-30"
|
||||
onClick={onClick}
|
||||
>
|
||||
{graphData != undefined && (
|
||||
<div className="relative w-full h-8 flex">
|
||||
{getHourBlocks().map((idx) => {
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={`h-2 flex-auto ${
|
||||
(graphData.motion.at(idx)?.y || 0) == 0
|
||||
? ""
|
||||
: graphData.objects.includes(idx)
|
||||
? "bg-object"
|
||||
: "bg-motion"
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<div className="absolute left-0 top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:00" : "%I:00%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[8.3%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:05" : "%I:05%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[16.7%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:10" : "%I:10%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[25%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:15" : "%I:15%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[33.3%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:20" : "%I:20%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[41.7%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:25" : "%I:25%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[50%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:30" : "%I:30%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[58.3%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:35" : "%I:35%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[66.7%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:40" : "%I:40%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[75%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:45" : "%I:45%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[83.3%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:50" : "%I:50%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[91.7%] top-0 bottom-0 align-bottom border-l border-gray-500">
|
||||
<div className="absolute ml-1 bottom-0 text-sm text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:55" : "%I:55%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-gray-500">
|
||||
{formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt:
|
||||
config.ui.time_format == "24hour" ? "%m/%d %H:%M" : "%m/%d %I:%M%P",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getHourBlocks() {
|
||||
const arr = [];
|
||||
|
||||
for (let x = 0; x <= 59; x++) {
|
||||
arr.push(x);
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
@@ -1,11 +1,15 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { AspectRatio } from "../ui/aspect-ratio";
|
||||
import CameraImage from "./CameraImage";
|
||||
import { LuEar } from "react-icons/lu";
|
||||
import { CameraConfig } from "@/types/frigateConfig";
|
||||
import { TbUserScan } from "react-icons/tb";
|
||||
import { MdLeakAdd } from "react-icons/md";
|
||||
import { useFrigateEvents, useMotionActivity } from "@/api/ws";
|
||||
import {
|
||||
useAudioActivity,
|
||||
useFrigateEvents,
|
||||
useMotionActivity,
|
||||
} from "@/api/ws";
|
||||
|
||||
type DynamicCameraImageProps = {
|
||||
camera: CameraConfig;
|
||||
@@ -21,10 +25,14 @@ export default function DynamicCameraImage({
|
||||
}: DynamicCameraImageProps) {
|
||||
const [key, setKey] = useState(Date.now());
|
||||
const [activeObjects, setActiveObjects] = useState<string[]>([]);
|
||||
const hasActiveObjects = useMemo(
|
||||
() => activeObjects.length > 0,
|
||||
[activeObjects]
|
||||
);
|
||||
|
||||
const { payload: detectingMotion } = useMotionActivity(camera.name);
|
||||
const { payload: event } = useFrigateEvents();
|
||||
const { payload: audioRms } = useMotionActivity(camera.name);
|
||||
const { payload: audioRms } = useAudioActivity(camera.name);
|
||||
|
||||
useEffect(() => {
|
||||
if (!event) {
|
||||
@@ -50,7 +58,6 @@ export default function DynamicCameraImage({
|
||||
if (eventIndex == -1) {
|
||||
const newActiveObjects = [...activeObjects, event.after.id];
|
||||
setActiveObjects(newActiveObjects);
|
||||
setKey(Date.now());
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -58,8 +65,9 @@ export default function DynamicCameraImage({
|
||||
|
||||
const handleLoad = useCallback(() => {
|
||||
const loadTime = Date.now() - key;
|
||||
const loadInterval =
|
||||
activeObjects.length > 0 ? INTERVAL_ACTIVE_MS : INTERVAL_INACTIVE_MS;
|
||||
const loadInterval = hasActiveObjects
|
||||
? INTERVAL_ACTIVE_MS
|
||||
: INTERVAL_INACTIVE_MS;
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
@@ -67,7 +75,7 @@ export default function DynamicCameraImage({
|
||||
},
|
||||
loadTime > loadInterval ? 1 : loadInterval
|
||||
);
|
||||
}, [activeObjects, key]);
|
||||
}, [key]);
|
||||
|
||||
return (
|
||||
<AspectRatio
|
||||
@@ -91,7 +99,7 @@ export default function DynamicCameraImage({
|
||||
activeObjects.length > 0 ? "text-object" : "text-gray-600"
|
||||
}`}
|
||||
/>
|
||||
{camera.audio.enabled && (
|
||||
{camera.audio.enabled_in_config && (
|
||||
<LuEar
|
||||
className={`${
|
||||
parseInt(audioRms) >= camera.audio.min_volume
|
||||
|
||||
@@ -6,6 +6,20 @@ import useSWR from "swr";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import VideoPlayer from "../player/VideoPlayer";
|
||||
import { Card } from "../ui/card";
|
||||
import { useApiHost } from "@/api";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "../ui/alert-dialog";
|
||||
import { useCallback } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
type TimelineItemCardProps = {
|
||||
timeline: Timeline;
|
||||
@@ -18,37 +32,55 @@ export default function TimelineItemCard({
|
||||
onSelect,
|
||||
}: TimelineItemCardProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const apiHost = useApiHost();
|
||||
|
||||
const onSubmitToPlus = useCallback(
|
||||
async (falsePositive: boolean) => {
|
||||
falsePositive
|
||||
? await axios.put(`events/${timeline.source_id}/false_positive`)
|
||||
: await axios.post(`events/${timeline.source_id}/plus`, {
|
||||
include_annotation: 1,
|
||||
});
|
||||
},
|
||||
[timeline]
|
||||
);
|
||||
|
||||
return (
|
||||
<Card className="relative m-2 flex w-full h-32 cursor-pointer" onClick={onSelect}>
|
||||
<div className="w-1/2 p-2">
|
||||
{relevantPreview && (
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
height: "114",
|
||||
width: "202",
|
||||
autoplay: true,
|
||||
controls: false,
|
||||
fluid: false,
|
||||
muted: true,
|
||||
loadingSpinner: false,
|
||||
sources: [
|
||||
{
|
||||
src: `${relevantPreview.src}`,
|
||||
type: "video/mp4",
|
||||
},
|
||||
],
|
||||
}}
|
||||
seekOptions={{}}
|
||||
onReady={(player) => {
|
||||
<Card
|
||||
className="relative m-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
|
||||
onClick={onSelect}
|
||||
>
|
||||
<div className="w-32 xl:w-40 3xl:w-44 4xl:w-60 p-2">
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: true,
|
||||
controls: false,
|
||||
aspectRatio: "16:9",
|
||||
muted: true,
|
||||
loadingSpinner: false,
|
||||
poster: relevantPreview
|
||||
? ""
|
||||
: `${apiHost}api/preview/${timeline.camera}/${timeline.timestamp}/thumbnail.jpg`,
|
||||
sources: relevantPreview
|
||||
? [
|
||||
{
|
||||
src: `${relevantPreview.src}`,
|
||||
type: "video/mp4",
|
||||
},
|
||||
]
|
||||
: [],
|
||||
}}
|
||||
seekOptions={{}}
|
||||
onReady={(player) => {
|
||||
if (relevantPreview) {
|
||||
player.pause(); // autoplay + pause is required for iOS
|
||||
player.currentTime(timeline.timestamp - relevantPreview.start);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-2 py-1 w-1/2">
|
||||
<div className="py-1">
|
||||
<div className="capitalize font-semibold text-sm">
|
||||
{getTimelineItemDescription(timeline)}
|
||||
</div>
|
||||
@@ -60,16 +92,52 @@ export default function TimelineItemCard({
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
<Button
|
||||
className="absolute bottom-1 right-1"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
>
|
||||
<div className="w-8 h-8">
|
||||
<Logo />
|
||||
</div>
|
||||
+
|
||||
</Button>
|
||||
{timeline.source == "tracked_object" && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
className="absolute bottom-1 right-1 hidden xl:flex"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
>
|
||||
<div className="w-8 h-8">
|
||||
<Logo />
|
||||
</div>
|
||||
+
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Submit To Frigate+</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Objects in locations you want to avoid are not false
|
||||
positives. Submitting them as false positives will confuse the
|
||||
model.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<img
|
||||
className="flex-grow-0"
|
||||
src={`${apiHost}api/events/${timeline.source_id}/snapshot.jpg`}
|
||||
alt={`${timeline.data.label}`}
|
||||
/>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-success"
|
||||
onClick={() => onSubmitToPlus(false)}
|
||||
>
|
||||
This is a {timeline.data.label}
|
||||
</AlertDialogAction>
|
||||
<AlertDialogAction
|
||||
className="bg-danger"
|
||||
onClick={() => onSubmitToPlus(true)}
|
||||
>
|
||||
This is not a {timeline.data.label}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -4,17 +4,34 @@ import Chart from "react-apexcharts";
|
||||
type TimelineGraphProps = {
|
||||
id: string;
|
||||
data: GraphData[];
|
||||
start: number;
|
||||
end: number;
|
||||
objects: number[];
|
||||
};
|
||||
|
||||
/**
|
||||
* A graph meant to be overlaid on top of a timeline
|
||||
*/
|
||||
export default function TimelineGraph({ id, data }: TimelineGraphProps) {
|
||||
export default function TimelineGraph({
|
||||
id,
|
||||
data,
|
||||
start,
|
||||
end,
|
||||
objects,
|
||||
}: TimelineGraphProps) {
|
||||
return (
|
||||
<Chart
|
||||
type="bar"
|
||||
options={{
|
||||
colors: ["#991b1b", "#06b6d4", "#ea580c"],
|
||||
colors: [
|
||||
({ dataPointIndex }: { dataPointIndex: number }) => {
|
||||
if (objects.includes(dataPointIndex)) {
|
||||
return "#06b6d4";
|
||||
} else {
|
||||
return "#991b1b";
|
||||
}
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
id: id,
|
||||
selection: {
|
||||
@@ -30,11 +47,27 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
|
||||
dataLabels: { enabled: false },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
bottom: 2,
|
||||
top: -12,
|
||||
left: -20,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: "100%",
|
||||
barHeight: "100%",
|
||||
hideZeroBarsWhenGrouped: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 0,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
@@ -49,13 +82,16 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
min: start,
|
||||
max: end,
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
logarithmic: true,
|
||||
logBase: 10,
|
||||
},
|
||||
}}
|
||||
series={data}
|
||||
|
||||
@@ -14,6 +14,10 @@ export default function TimelineEventOverlay({
|
||||
timeline,
|
||||
cameraConfig,
|
||||
}: TimelineEventOverlayProps) {
|
||||
if (!timeline.data.box) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const boxLeftEdge = Math.round(timeline.data.box[0] * 100);
|
||||
const boxTopEdge = Math.round(timeline.data.box[1] * 100);
|
||||
const boxRightEdge = Math.round(
|
||||
@@ -25,6 +29,10 @@ export default function TimelineEventOverlay({
|
||||
|
||||
const [isHovering, setIsHovering] = useState<boolean>(false);
|
||||
const getHoverStyle = () => {
|
||||
if (!timeline.data.box) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (boxLeftEdge < 15) {
|
||||
// show object stats on right side
|
||||
return {
|
||||
@@ -40,12 +48,20 @@ export default function TimelineEventOverlay({
|
||||
};
|
||||
|
||||
const getObjectArea = () => {
|
||||
if (!timeline.data.box) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const width = timeline.data.box[2] * cameraConfig.detect.width;
|
||||
const height = timeline.data.box[3] * cameraConfig.detect.height;
|
||||
return Math.round(width * height);
|
||||
};
|
||||
|
||||
const getObjectRatio = () => {
|
||||
if (!timeline.data.box) {
|
||||
return 0.0;
|
||||
}
|
||||
|
||||
const width = timeline.data.box[2] * cameraConfig.detect.width;
|
||||
const height = timeline.data.box[3] * cameraConfig.detect.height;
|
||||
return Math.round(100 * (width / height)) / 100;
|
||||
|
||||
411
web/src/components/player/DynamicVideoPlayer.tsx
Normal file
411
web/src/components/player/DynamicVideoPlayer.tsx
Normal file
@@ -0,0 +1,411 @@
|
||||
import {
|
||||
MutableRefObject,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import VideoPlayer from "./VideoPlayer";
|
||||
import Player from "video.js/dist/types/player";
|
||||
import TimelineEventOverlay from "../overlay/TimelineDataOverlay";
|
||||
import { useApiHost } from "@/api";
|
||||
import useSWR from "swr";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import ActivityIndicator from "../ui/activity-indicator";
|
||||
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
||||
|
||||
/**
|
||||
* Dynamically switches between video playback and scrubbing preview player.
|
||||
*/
|
||||
type DynamicVideoPlayerProps = {
|
||||
className?: string;
|
||||
camera: string;
|
||||
timeRange: { start: number; end: number };
|
||||
cameraPreviews: Preview[];
|
||||
onControllerReady?: (controller: DynamicVideoController) => void;
|
||||
};
|
||||
export default function DynamicVideoPlayer({
|
||||
className,
|
||||
camera,
|
||||
timeRange,
|
||||
cameraPreviews,
|
||||
onControllerReady,
|
||||
}: DynamicVideoPlayerProps) {
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const timezone = useMemo(
|
||||
() =>
|
||||
config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
[config]
|
||||
);
|
||||
|
||||
// controlling playback
|
||||
|
||||
const playerRef = useRef<Player | undefined>(undefined);
|
||||
const previewRef = useRef<Player | undefined>(undefined);
|
||||
const [isScrubbing, setIsScrubbing] = useState(false);
|
||||
const [hasPreview, setHasPreview] = useState(false);
|
||||
const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
|
||||
undefined
|
||||
);
|
||||
const controller = useMemo(() => {
|
||||
if (!config) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return new DynamicVideoController(
|
||||
playerRef,
|
||||
previewRef,
|
||||
(config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
|
||||
setIsScrubbing,
|
||||
setFocusedItem
|
||||
);
|
||||
}, [config]);
|
||||
|
||||
// keyboard control
|
||||
const onKeyboardShortcut = useCallback(
|
||||
(key: string, down: boolean, repeat: boolean) => {
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
if (down) {
|
||||
const currentTime = playerRef.current?.currentTime();
|
||||
|
||||
if (currentTime) {
|
||||
playerRef.current?.currentTime(Math.max(0, currentTime - 5));
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "ArrowRight":
|
||||
if (down) {
|
||||
const currentTime = playerRef.current?.currentTime();
|
||||
|
||||
if (currentTime) {
|
||||
playerRef.current?.currentTime(currentTime + 5);
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "m":
|
||||
if (down && !repeat && playerRef.current) {
|
||||
playerRef.current.muted(!playerRef.current.muted());
|
||||
}
|
||||
break;
|
||||
case " ":
|
||||
if (down && playerRef.current) {
|
||||
if (playerRef.current.paused()) {
|
||||
playerRef.current.play();
|
||||
} else {
|
||||
playerRef.current.pause();
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
[playerRef]
|
||||
);
|
||||
useKeyboardListener(
|
||||
["ArrowLeft", "ArrowRight", "m", " "],
|
||||
onKeyboardShortcut
|
||||
);
|
||||
|
||||
// initial state
|
||||
|
||||
const initialPlaybackSource = useMemo(() => {
|
||||
const date = new Date(timeRange.start * 1000);
|
||||
return {
|
||||
src: `${apiHost}vod/${date.getFullYear()}-${
|
||||
date.getMonth() + 1
|
||||
}/${date.getDate()}/${date.getHours()}/${camera}/${timezone.replaceAll(
|
||||
"/",
|
||||
","
|
||||
)}/master.m3u8`,
|
||||
type: "application/vnd.apple.mpegurl",
|
||||
};
|
||||
}, []);
|
||||
const initialPreviewSource = useMemo(() => {
|
||||
const preview = cameraPreviews.find(
|
||||
(preview) =>
|
||||
Math.round(preview.start) >= timeRange.start &&
|
||||
Math.floor(preview.end) <= timeRange.end
|
||||
);
|
||||
|
||||
if (preview) {
|
||||
setHasPreview(true);
|
||||
return {
|
||||
src: preview.src,
|
||||
type: preview.type,
|
||||
};
|
||||
} else {
|
||||
setHasPreview(false);
|
||||
return undefined;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// state of playback player
|
||||
|
||||
const recordingParams = useMemo(() => {
|
||||
return {
|
||||
before: timeRange.end,
|
||||
after: timeRange.start,
|
||||
};
|
||||
}, [timeRange]);
|
||||
const { data: recordings } = useSWR<Recording[]>(
|
||||
[`${camera}/recordings`, recordingParams],
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!controller || !recordings || recordings.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const date = new Date(timeRange.start * 1000);
|
||||
const playbackUri = `${apiHost}vod/${date.getFullYear()}-${
|
||||
date.getMonth() + 1
|
||||
}/${date.getDate()}/${date.getHours()}/${camera}/${timezone.replaceAll(
|
||||
"/",
|
||||
","
|
||||
)}/master.m3u8`;
|
||||
|
||||
const preview = cameraPreviews.find(
|
||||
(preview) =>
|
||||
Math.round(preview.start) >= timeRange.start &&
|
||||
Math.floor(preview.end) <= timeRange.end
|
||||
);
|
||||
setHasPreview(preview != undefined);
|
||||
|
||||
controller.newPlayback({
|
||||
recordings,
|
||||
playbackUri,
|
||||
preview,
|
||||
});
|
||||
}, [controller, recordings]);
|
||||
|
||||
if (!controller) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div
|
||||
className={`w-full relative ${
|
||||
hasPreview && isScrubbing ? "hidden" : "visible"
|
||||
}`}
|
||||
>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: true,
|
||||
sources: [initialPlaybackSource],
|
||||
controlBar: {
|
||||
remainingTimeDisplay: false,
|
||||
progressControl: {
|
||||
seekBar: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
seekOptions={{ forward: 10, backward: 5 }}
|
||||
onReady={(player) => {
|
||||
playerRef.current = player;
|
||||
player.on("playing", () => setFocusedItem(undefined));
|
||||
player.on("timeupdate", () => {
|
||||
controller.updateProgress(player.currentTime() || 0);
|
||||
});
|
||||
|
||||
if (onControllerReady) {
|
||||
onControllerReady(controller);
|
||||
}
|
||||
}}
|
||||
onDispose={() => {
|
||||
playerRef.current = undefined;
|
||||
}}
|
||||
>
|
||||
{config && focusedItem && (
|
||||
<TimelineEventOverlay
|
||||
timeline={focusedItem}
|
||||
cameraConfig={config.cameras[camera]}
|
||||
/>
|
||||
)}
|
||||
</VideoPlayer>
|
||||
</div>
|
||||
<div
|
||||
className={`w-full ${hasPreview && isScrubbing ? "visible" : "hidden"}`}
|
||||
>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: true,
|
||||
controls: false,
|
||||
muted: true,
|
||||
loadingSpinner: false,
|
||||
sources: hasPreview ? initialPreviewSource : null,
|
||||
}}
|
||||
seekOptions={{}}
|
||||
onReady={(player) => {
|
||||
previewRef.current = player;
|
||||
player.pause();
|
||||
player.on("seeked", () => controller.finishedSeeking());
|
||||
}}
|
||||
onDispose={() => {
|
||||
previewRef.current = undefined;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export class DynamicVideoController {
|
||||
// main state
|
||||
private playerRef: MutableRefObject<Player | undefined>;
|
||||
private previewRef: MutableRefObject<Player | undefined>;
|
||||
private setScrubbing: (isScrubbing: boolean) => void;
|
||||
private setFocusedItem: (timeline: Timeline) => void;
|
||||
private playerMode: "playback" | "scrubbing" = "playback";
|
||||
|
||||
// playback
|
||||
private recordings: Recording[] = [];
|
||||
private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
|
||||
private annotationOffset: number;
|
||||
private timeToStart: number | undefined = undefined;
|
||||
|
||||
// preview
|
||||
private preview: Preview | undefined = undefined;
|
||||
private timeToSeek: number | undefined = undefined;
|
||||
private seeking = false;
|
||||
|
||||
constructor(
|
||||
playerRef: MutableRefObject<Player | undefined>,
|
||||
previewRef: MutableRefObject<Player | undefined>,
|
||||
annotationOffset: number,
|
||||
setScrubbing: (isScrubbing: boolean) => void,
|
||||
setFocusedItem: (timeline: Timeline) => void
|
||||
) {
|
||||
this.playerRef = playerRef;
|
||||
this.previewRef = previewRef;
|
||||
this.annotationOffset = annotationOffset;
|
||||
this.setScrubbing = setScrubbing;
|
||||
this.setFocusedItem = setFocusedItem;
|
||||
}
|
||||
|
||||
newPlayback(newPlayback: DynamicPlayback) {
|
||||
this.recordings = newPlayback.recordings;
|
||||
|
||||
this.playerRef.current?.src({
|
||||
src: newPlayback.playbackUri,
|
||||
type: "application/vnd.apple.mpegurl",
|
||||
});
|
||||
|
||||
if (this.timeToStart) {
|
||||
this.seekToTimestamp(this.timeToStart);
|
||||
this.timeToStart = undefined;
|
||||
}
|
||||
|
||||
this.preview = newPlayback.preview;
|
||||
if (this.preview && this.previewRef.current) {
|
||||
this.previewRef.current.src({
|
||||
src: this.preview.src,
|
||||
type: this.preview.type,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
seekToTimestamp(time: number, play: boolean = false) {
|
||||
if (this.playerMode != "playback") {
|
||||
this.playerMode = "playback";
|
||||
this.setScrubbing(false);
|
||||
this.timeToSeek = undefined;
|
||||
this.seeking = false;
|
||||
}
|
||||
|
||||
if (this.recordings.length == 0) {
|
||||
this.timeToStart = time;
|
||||
}
|
||||
|
||||
let seekSeconds = 0;
|
||||
(this.recordings || []).every((segment) => {
|
||||
// if the next segment is past the desired time, stop calculating
|
||||
if (segment.start_time > time) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (segment.end_time < time) {
|
||||
seekSeconds += segment.end_time - segment.start_time;
|
||||
return true;
|
||||
}
|
||||
|
||||
seekSeconds +=
|
||||
segment.end_time - segment.start_time - (segment.end_time - time);
|
||||
return true;
|
||||
});
|
||||
this.playerRef.current?.currentTime(seekSeconds);
|
||||
|
||||
if (play) {
|
||||
this.playerRef.current?.play();
|
||||
}
|
||||
}
|
||||
|
||||
seekToTimelineItem(timeline: Timeline) {
|
||||
this.playerRef.current?.pause();
|
||||
this.seekToTimestamp(timeline.timestamp + this.annotationOffset);
|
||||
this.setFocusedItem(timeline);
|
||||
}
|
||||
|
||||
updateProgress(playerTime: number) {
|
||||
if (this.onPlaybackTimestamp) {
|
||||
// take a player time in seconds and convert to timestamp in timeline
|
||||
let timestamp = 0;
|
||||
let totalTime = 0;
|
||||
(this.recordings || []).every((segment) => {
|
||||
if (totalTime + segment.duration > playerTime) {
|
||||
// segment is here
|
||||
timestamp = segment.start_time + (playerTime - totalTime);
|
||||
return false;
|
||||
} else {
|
||||
totalTime += segment.duration;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
this.onPlaybackTimestamp(timestamp);
|
||||
}
|
||||
}
|
||||
|
||||
onPlayerTimeUpdate(listener: (timestamp: number) => void) {
|
||||
this.onPlaybackTimestamp = listener;
|
||||
}
|
||||
|
||||
scrubToTimestamp(time: number) {
|
||||
if (this.playerMode != "scrubbing") {
|
||||
this.playerMode = "scrubbing";
|
||||
this.playerRef.current?.pause();
|
||||
this.setScrubbing(true);
|
||||
}
|
||||
|
||||
if (this.preview) {
|
||||
if (this.seeking) {
|
||||
this.timeToSeek = time;
|
||||
} else {
|
||||
this.previewRef.current?.currentTime(time - this.preview.start);
|
||||
this.seeking = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
finishedSeeking() {
|
||||
if (!this.preview || this.playerMode == "playback") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
this.timeToSeek &&
|
||||
this.timeToSeek != this.previewRef.current?.currentTime()
|
||||
) {
|
||||
this.previewRef.current?.currentTime(
|
||||
this.timeToSeek - this.preview.start
|
||||
);
|
||||
} else {
|
||||
this.seeking = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,4 @@
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import VideoPlayer from "./VideoPlayer";
|
||||
import useSWR from "swr";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
@@ -12,6 +10,7 @@ import { useApiHost } from "@/api";
|
||||
import Player from "video.js/dist/types/player";
|
||||
import { AspectRatio } from "../ui/aspect-ratio";
|
||||
import { LuPlayCircle } from "react-icons/lu";
|
||||
import { isCurrentHour } from "@/utils/dateUtil";
|
||||
|
||||
type PreviewPlayerProps = {
|
||||
camera: string;
|
||||
@@ -38,7 +37,6 @@ export default function PreviewThumbnailPlayer({
|
||||
isMobile,
|
||||
onClick,
|
||||
}: PreviewPlayerProps) {
|
||||
const { data: config } = useSWR("config");
|
||||
const playerRef = useRef<Player | null>(null);
|
||||
const isSafari = useMemo(() => {
|
||||
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
||||
@@ -54,7 +52,10 @@ export default function PreviewThumbnailPlayer({
|
||||
}
|
||||
|
||||
if (!playerRef.current) {
|
||||
setIsInitiallyVisible(true);
|
||||
if (isHovered) {
|
||||
setIsInitiallyVisible(true);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -105,6 +106,7 @@ export default function PreviewThumbnailPlayer({
|
||||
{
|
||||
threshold: 1.0,
|
||||
root: document.getElementById("pageRoot"),
|
||||
rootMargin: "-10% 0px -25% 0px",
|
||||
}
|
||||
);
|
||||
if (node) autoPlayObserver.current.observe(node);
|
||||
@@ -131,7 +133,6 @@ export default function PreviewThumbnailPlayer({
|
||||
isInitiallyVisible={isInitiallyVisible}
|
||||
startTs={startTs}
|
||||
camera={camera}
|
||||
config={config}
|
||||
eventId={eventId}
|
||||
isMobile={isMobile}
|
||||
isSafari={isSafari}
|
||||
@@ -143,7 +144,6 @@ export default function PreviewThumbnailPlayer({
|
||||
|
||||
type PreviewContentProps = {
|
||||
playerRef: React.MutableRefObject<Player | null>;
|
||||
config: FrigateConfig;
|
||||
camera: string;
|
||||
relevantPreview: Preview | undefined;
|
||||
eventId: string;
|
||||
@@ -156,7 +156,6 @@ type PreviewContentProps = {
|
||||
};
|
||||
function PreviewContent({
|
||||
playerRef,
|
||||
config,
|
||||
camera,
|
||||
relevantPreview,
|
||||
eventId,
|
||||
@@ -195,22 +194,13 @@ function PreviewContent({
|
||||
|
||||
if (relevantPreview && !isVisible) {
|
||||
return <div />;
|
||||
} else if (!relevantPreview) {
|
||||
if (isCurrentHour(startTs)) {
|
||||
return (
|
||||
<img
|
||||
className={`${getPreviewWidth(camera, config)}`}
|
||||
src={`${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<img
|
||||
className="w-[160px]"
|
||||
src={`${apiHost}api/events/${eventId}/thumbnail.jpg`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else if (!relevantPreview && !isCurrentHour(startTs)) {
|
||||
return (
|
||||
<img
|
||||
className="w-[160px]"
|
||||
src={`${apiHost}api/events/${eventId}/thumbnail.jpg`}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
@@ -223,17 +213,26 @@ function PreviewContent({
|
||||
controls: false,
|
||||
muted: true,
|
||||
loadingSpinner: false,
|
||||
sources: [
|
||||
{
|
||||
src: `${relevantPreview.src}`,
|
||||
type: "video/mp4",
|
||||
},
|
||||
],
|
||||
poster: relevantPreview
|
||||
? ""
|
||||
: `${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`,
|
||||
sources: relevantPreview
|
||||
? [
|
||||
{
|
||||
src: `${relevantPreview.src}`,
|
||||
type: "video/mp4",
|
||||
},
|
||||
]
|
||||
: [],
|
||||
}}
|
||||
seekOptions={{}}
|
||||
onReady={(player) => {
|
||||
playerRef.current = player;
|
||||
|
||||
if (!relevantPreview) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isInitiallyVisible) {
|
||||
player.pause(); // autoplay + pause is required for iOS
|
||||
}
|
||||
@@ -249,28 +248,10 @@ function PreviewContent({
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<LuPlayCircle className="absolute z-10 left-1 bottom-1 w-4 h-4 text-white text-opacity-60" />
|
||||
{relevantPreview && (
|
||||
<LuPlayCircle className="absolute z-10 left-1 bottom-1 w-4 h-4 text-white text-opacity-60" />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function isCurrentHour(timestamp: number) {
|
||||
const now = new Date();
|
||||
now.setMinutes(0, 0, 0);
|
||||
return timestamp > now.getTime() / 1000;
|
||||
}
|
||||
|
||||
function getPreviewWidth(camera: string, config: FrigateConfig) {
|
||||
const detect = config.cameras[camera].detect;
|
||||
|
||||
if (detect.width / detect.height < 1) {
|
||||
return "w-1/2";
|
||||
}
|
||||
|
||||
if (detect.width / detect.height < 16 / 9) {
|
||||
return "w-2/3";
|
||||
}
|
||||
|
||||
return "w-full";
|
||||
}
|
||||
|
||||
@@ -9,6 +9,8 @@ import {
|
||||
} from "vis-timeline";
|
||||
import type { DataGroup, DataItem, TimelineEvents } from "vis-timeline/types";
|
||||
import "./scrubber.css";
|
||||
import useSWR from "swr";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
|
||||
export type TimelineEventsWithMissing =
|
||||
| TimelineEvents
|
||||
@@ -89,14 +91,13 @@ function ActivityScrubber({
|
||||
options,
|
||||
...eventHandlers
|
||||
}: ActivityScrubberProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const timelineRef = useRef<{ timeline: VisTimeline | null }>({
|
||||
timeline: null,
|
||||
});
|
||||
const [currentTime, setCurrentTime] = useState(Date.now());
|
||||
const [_, setCustomTimes] = useState<
|
||||
{ id: IdType; time: DateType }[]
|
||||
>([]);
|
||||
const [_, setCustomTimes] = useState<{ id: IdType; time: DateType }[]>([]);
|
||||
|
||||
const defaultOptions: TimelineOptions = {
|
||||
width: "100%",
|
||||
@@ -110,8 +111,11 @@ function ActivityScrubber({
|
||||
max: currentTime,
|
||||
format: {
|
||||
minorLabels: {
|
||||
minute: "h:mma",
|
||||
hour: "ha",
|
||||
minute: config?.ui.time_format == "24hour" ? "HH:mm" : "hh:mma",
|
||||
},
|
||||
majorLabels: {
|
||||
minute:
|
||||
config?.ui.time_format == "24hour" ? "MM/DD HH:mm" : "MM/DD hh:mma",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -139,8 +143,8 @@ function ActivityScrubber({
|
||||
|
||||
const timelineInstance = new VisTimeline(
|
||||
divElement,
|
||||
items as DataItem[],
|
||||
groups as DataGroup[],
|
||||
(items || []) as DataItem[],
|
||||
(groups || []) as DataGroup[],
|
||||
timelineOptions
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user