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

Use common type for time range

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-26 09:05:39 -06:00
parent 4384d4b1d8
commit 985ee97e1c
5 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/components/player/PreviewPlayer.tsx
View File

@ -14,11 +14,12 @@ import { isCurrentHour } from "@/utils/dateUtil";
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { isAndroid, isChrome, isMobile, isSafari } from "react-device-detect"; import { isAndroid, isChrome, isMobile, isSafari } from "react-device-detect";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { TimeRange } from "@/types/timeline";
type PreviewPlayerProps = { type PreviewPlayerProps = {
className?: string; className?: string;
camera: string; camera: string;
timeRange: { start: number; end: number }; timeRange: TimeRange;
cameraPreviews: Preview[]; cameraPreviews: Preview[];
startTime?: number; startTime?: number;
isScrubbing: boolean; isScrubbing: boolean;
@ -37,7 +38,7 @@ export default function PreviewPlayer({
}: PreviewPlayerProps) { }: PreviewPlayerProps) {
const [currentHourFrame, setCurrentHourFrame] = useState<string>(); const [currentHourFrame, setCurrentHourFrame] = useState<string>();
if (isCurrentHour(timeRange.end)) { if (isCurrentHour(timeRange.before)) {
return ( return (
<PreviewFramesPlayer <PreviewFramesPlayer
className={className} className={className}
@ -84,7 +85,7 @@ export abstract class PreviewController {
type PreviewVideoPlayerProps = { type PreviewVideoPlayerProps = {
className?: string; className?: string;
camera: string; camera: string;
timeRange: { start: number; end: number }; timeRange: TimeRange;
cameraPreviews: Preview[]; cameraPreviews: Preview[];
startTime?: number; startTime?: number;
isScrubbing: boolean; isScrubbing: boolean;
@ -148,8 +149,8 @@ function PreviewVideoPlayer({
return cameraPreviews.find( return cameraPreviews.find(
(preview) => (preview) =>
preview.camera == camera && preview.camera == camera &&
Math.round(preview.start) >= timeRange.start && Math.round(preview.start) >= timeRange.after &&
Math.floor(preview.end) <= timeRange.end, Math.floor(preview.end) <= timeRange.before,
); );
// we only want to calculate this once // we only want to calculate this once
@ -179,8 +180,8 @@ function PreviewVideoPlayer({
const preview = cameraPreviews.find( const preview = cameraPreviews.find(
(preview) => (preview) =>
preview.camera == camera && preview.camera == camera &&
Math.round(preview.start) >= timeRange.start && Math.round(preview.start) >= timeRange.after &&
Math.floor(preview.end) <= timeRange.end, Math.floor(preview.end) <= timeRange.before,
); );
if (preview != currentPreview) { if (preview != currentPreview) {
@ -292,7 +293,7 @@ function PreviewVideoPlayer({
class PreviewVideoController extends PreviewController { class PreviewVideoController extends PreviewController {
// main state // main state
private previewRef: MutableRefObject<HTMLVideoElement | null>; private previewRef: MutableRefObject<HTMLVideoElement | null>;
private timeRange: { start: number; end: number } | undefined = undefined; private timeRange: TimeRange | undefined = undefined;
// preview // preview
private preview: Preview | undefined = undefined; private preview: Preview | undefined = undefined;
@ -377,7 +378,7 @@ class PreviewVideoController extends PreviewController {
type PreviewFramesPlayerProps = { type PreviewFramesPlayerProps = {
className?: string; className?: string;
camera: string; camera: string;
timeRange: { start: number; end: number }; timeRange: TimeRange;
startTime?: number; startTime?: number;
onControllerReady: (controller: PreviewController) => void; onControllerReady: (controller: PreviewController) => void;
onClick?: () => void; onClick?: () => void;
@ -395,8 +396,8 @@ function PreviewFramesPlayer({
// frames data // frames data
const { data: previewFrames } = useSWR<string[]>( const { data: previewFrames } = useSWR<string[]>(
`preview/${camera}/start/${Math.floor(timeRange.start)}/end/${Math.ceil( `preview/${camera}/start/${Math.floor(timeRange.after)}/end/${Math.ceil(
timeRange.end, timeRange.before,
)}/frames`, )}/frames`,
{ revalidateOnFocus: false }, { revalidateOnFocus: false },
); );
@ -457,7 +458,7 @@ function PreviewFramesPlayer({
} }
if (!startTime) { if (!startTime) {
controller.scrubToTimestamp(frameTimes?.at(-1) ?? timeRange.start); controller.scrubToTimestamp(frameTimes?.at(-1) ?? timeRange.after);
} else { } else {
controller.scrubToTimestamp(startTime); controller.scrubToTimestamp(startTime);
} }

12
web/src/components/player/dynamic/DynamicVideoPlayer.tsx
View File

@ -8,7 +8,7 @@ import { Preview } from "@/types/preview";
import PreviewPlayer, { PreviewController } from "../PreviewPlayer"; import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
import { DynamicVideoController } from "./DynamicVideoController"; import { DynamicVideoController } from "./DynamicVideoController";
import HlsVideoPlayer from "../HlsVideoPlayer"; import HlsVideoPlayer from "../HlsVideoPlayer";
import { Timeline } from "@/types/timeline"; import { TimeRange, Timeline } from "@/types/timeline";
/** /**
* Dynamically switches between video playback and scrubbing preview player. * Dynamically switches between video playback and scrubbing preview player.
@ -16,7 +16,7 @@ import { Timeline } from "@/types/timeline";
type DynamicVideoPlayerProps = { type DynamicVideoPlayerProps = {
className?: string; className?: string;
camera: string; camera: string;
timeRange: { start: number; end: number }; timeRange: TimeRange;
cameraPreviews: Preview[]; cameraPreviews: Preview[];
startTimestamp?: number; startTimestamp?: number;
isScrubbing: boolean; isScrubbing: boolean;
@ -100,7 +100,7 @@ export default function DynamicVideoPlayer({
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [source, setSource] = useState( const [source, setSource] = useState(
`${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`, `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
); );
// start at correct time // start at correct time
@ -134,8 +134,8 @@ export default function DynamicVideoPlayer({
const recordingParams = useMemo(() => { const recordingParams = useMemo(() => {
return { return {
before: timeRange.end, before: timeRange.before,
after: timeRange.start, after: timeRange.after,
}; };
}, [timeRange]); }, [timeRange]);
const { data: recordings } = useSWR<Recording[]>( const { data: recordings } = useSWR<Recording[]>(
@ -153,7 +153,7 @@ export default function DynamicVideoPlayer({
} }
setSource( setSource(
`${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`, `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
); );
setIsLoading(true); setIsLoading(true);

3
web/src/types/playback.ts
View File

@ -1,5 +1,6 @@
import { Preview } from "./preview"; import { Preview } from "./preview";
import { Recording } from "./record"; import { Recording } from "./record";
import { TimeRange } from "./timeline";
export type DynamicPlayback = { export type DynamicPlayback = {
recordings: Recording[]; recordings: Recording[];
@ -7,5 +8,5 @@ export type DynamicPlayback = {
export type PreviewPlayback = { export type PreviewPlayback = {
preview: Preview | undefined; preview: Preview | undefined;
timeRange: { end: number; start: number }; timeRange: TimeRange;
}; };

14
web/src/utils/timelineUtil.tsx
View File

@ -21,7 +21,7 @@ import {
} from "react-icons/md"; } from "react-icons/md";
import { FaBicycle } from "react-icons/fa"; import { FaBicycle } from "react-icons/fa";
import { endOfHourOrCurrentTime } from "./dateUtil"; import { endOfHourOrCurrentTime } from "./dateUtil";
import { Timeline } from "@/types/timeline"; import { TimeRange, Timeline } from "@/types/timeline";
export function getTimelineIcon(timelineItem: Timeline) { export function getTimelineIcon(timelineItem: Timeline) {
switch (timelineItem.class_type) { switch (timelineItem.class_type) {
@ -124,7 +124,7 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
export function getChunkedTimeDay(timestamp: number) { export function getChunkedTimeDay(timestamp: number) {
const endOfThisHour = new Date(); const endOfThisHour = new Date();
endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0); endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
const data: { start: number; end: number }[] = []; const data: TimeRange[] = [];
const startDay = new Date(timestamp * 1000); const startDay = new Date(timestamp * 1000);
startDay.setHours(0, 0, 0, 0); startDay.setHours(0, 0, 0, 0);
const startTimestamp = startDay.getTime() / 1000; const startTimestamp = startDay.getTime() / 1000;
@ -140,8 +140,8 @@ export function getChunkedTimeDay(timestamp: number) {
end = endOfHourOrCurrentTime(startDay.getTime() / 1000); end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
data.push({ data.push({
start, after: start,
end, before: end,
}); });
start = startDay.getTime() / 1000; start = startDay.getTime() / 1000;
} }
@ -155,7 +155,7 @@ export function getChunkedTimeRange(
) { ) {
const endOfThisHour = new Date(); const endOfThisHour = new Date();
endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0); endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
const data: { start: number; end: number }[] = []; const data: TimeRange[] = [];
const startDay = new Date(startTimestamp * 1000); const startDay = new Date(startTimestamp * 1000);
startDay.setMinutes(0, 0, 0); startDay.setMinutes(0, 0, 0);
let start = startDay.getTime() / 1000; let start = startDay.getTime() / 1000;
@ -170,8 +170,8 @@ export function getChunkedTimeRange(
end = endOfHourOrCurrentTime(startDay.getTime() / 1000); end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
data.push({ data.push({
start, after: start,
end, before: end,
}); });
start = startDay.getTime() / 1000; start = startDay.getTime() / 1000;
} }

13
web/src/views/events/RecordingView.tsx
View File

@ -68,7 +68,7 @@ export function RecordingView({
const timeRange = useMemo(() => getChunkedTimeDay(startTime), [startTime]); const timeRange = useMemo(() => getChunkedTimeDay(startTime), [startTime]);
const [selectedRangeIdx, setSelectedRangeIdx] = useState( const [selectedRangeIdx, setSelectedRangeIdx] = useState(
timeRange.ranges.findIndex((chunk) => { timeRange.ranges.findIndex((chunk) => {
return chunk.start <= startTime && chunk.end >= startTime; return chunk.after <= startTime && chunk.before >= startTime;
}), }),
); );
const currentTimeRange = useMemo( const currentTimeRange = useMemo(
@ -97,7 +97,7 @@ export function RecordingView({
const updateSelectedSegment = useCallback( const updateSelectedSegment = useCallback(
(currentTime: number, updateStartTime: boolean) => { (currentTime: number, updateStartTime: boolean) => {
const index = timeRange.ranges.findIndex( const index = timeRange.ranges.findIndex(
(seg) => seg.start <= currentTime && seg.end >= currentTime, (seg) => seg.after <= currentTime && seg.before >= currentTime,
); );
if (index != -1) { if (index != -1) {
@ -114,8 +114,8 @@ export function RecordingView({
useEffect(() => { useEffect(() => {
if (scrubbing) { if (scrubbing) {
if ( if (
currentTime > currentTimeRange.end + 60 || currentTime > currentTimeRange.before + 60 ||
currentTime < currentTimeRange.start - 60 currentTime < currentTimeRange.after - 60
) { ) {
updateSelectedSegment(currentTime, false); updateSelectedSegment(currentTime, false);
return; return;
@ -139,8 +139,8 @@ export function RecordingView({
if (!scrubbing) { if (!scrubbing) {
if (Math.abs(currentTime - playerTime) > 10) { if (Math.abs(currentTime - playerTime) > 10) {
if ( if (
currentTimeRange.start <= currentTime && currentTimeRange.after <= currentTime &&
currentTimeRange.end >= currentTime currentTimeRange.before >= currentTime
) { ) {
mainControllerRef.current?.seekToTimestamp(currentTime, true); mainControllerRef.current?.seekToTimestamp(currentTime, true);
} else { } else {
@ -244,7 +244,6 @@ export function RecordingView({
reviewSummary={reviewSummary} reviewSummary={reviewSummary}
filter={filter} filter={filter}
onUpdateFilter={updateFilter} onUpdateFilter={updateFilter}
severity={"alert"}
motionOnly={false} motionOnly={false}
setMotionOnly={() => {}} setMotionOnly={() => {}}
/> />