mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-12 22:25:24 +03:00
Make searching functional
This commit is contained in:
Nicolas Mowen
parent
bc6b2d5659
commit
4e4916c816
@ -7,10 +7,10 @@ import { REVIEW_PADDING, ReviewSegment } from "@/types/review";
|
|||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { RecordingStartingPoint } from "@/types/record";
|
import { RecordingStartingPoint } from "@/types/record";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { VideoPreview } from "../player/PreviewThumbnailPlayer";
|
|
||||||
import { isCurrentHour } from "@/utils/dateUtil";
|
import { isCurrentHour } from "@/utils/dateUtil";
|
||||||
import { useCameraPreviews } from "@/hooks/use-camera-previews";
|
import { useCameraPreviews } from "@/hooks/use-camera-previews";
|
||||||
import { baseUrl } from "@/api/baseUrl";
|
import { baseUrl } from "@/api/baseUrl";
|
||||||
|
import { VideoPreview } from "../preview/ScrubbablePreview";
|
||||||
|
|
||||||
type AnimatedEventCardProps = {
|
type AnimatedEventCardProps = {
|
||||||
event: ReviewSegment;
|
event: ReviewSegment;
|
||||||
|
|||||||
@ -28,7 +28,6 @@ type SearchFilterGroupProps = {
|
|||||||
filter?: ReviewFilter;
|
filter?: ReviewFilter;
|
||||||
filterList?: FilterList;
|
filterList?: FilterList;
|
||||||
onUpdateFilter: (filter: ReviewFilter) => void;
|
onUpdateFilter: (filter: ReviewFilter) => void;
|
||||||
setMotionOnly: React.Dispatch<React.SetStateAction<boolean>>;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function SearchFilterGroup({
|
export default function SearchFilterGroup({
|
||||||
|
|||||||
@ -1,10 +1,4 @@
|
|||||||
import React, {
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} from "react";
|
|
||||||
import { useApiHost } from "@/api";
|
import { useApiHost } from "@/api";
|
||||||
import { isCurrentHour } from "@/utils/dateUtil";
|
import { isCurrentHour } from "@/utils/dateUtil";
|
||||||
import { ReviewSegment } from "@/types/review";
|
import { ReviewSegment } from "@/types/review";
|
||||||
@ -12,7 +6,7 @@ import { getIconForLabel } from "@/utils/iconUtil";
|
|||||||
import TimeAgo from "../dynamic/TimeAgo";
|
import TimeAgo from "../dynamic/TimeAgo";
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
import { isFirefox, isIOS, isMobile, isSafari } from "react-device-detect";
|
import { isIOS, isMobile, isSafari } from "react-device-detect";
|
||||||
import Chip from "@/components/indicators/Chip";
|
import Chip from "@/components/indicators/Chip";
|
||||||
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||||
import useImageLoaded from "@/hooks/use-image-loaded";
|
import useImageLoaded from "@/hooks/use-image-loaded";
|
||||||
@ -22,10 +16,9 @@ import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
|
|||||||
import useContextMenu from "@/hooks/use-contextmenu";
|
import useContextMenu from "@/hooks/use-contextmenu";
|
||||||
import ActivityIndicator from "../indicators/activity-indicator";
|
import ActivityIndicator from "../indicators/activity-indicator";
|
||||||
import { TimeRange } from "@/types/timeline";
|
import { TimeRange } from "@/types/timeline";
|
||||||
import { NoThumbSlider } from "../ui/slider";
|
|
||||||
import { PREVIEW_FPS, PREVIEW_PADDING } from "@/types/preview";
|
|
||||||
import { capitalizeFirstLetter } from "@/utils/stringUtil";
|
import { capitalizeFirstLetter } from "@/utils/stringUtil";
|
||||||
import { baseUrl } from "@/api/baseUrl";
|
import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
|
||||||
|
import { Preview } from "@/types/preview";
|
||||||
|
|
||||||
type PreviewPlayerProps = {
|
type PreviewPlayerProps = {
|
||||||
review: ReviewSegment;
|
review: ReviewSegment;
|
||||||
@ -37,14 +30,6 @@ type PreviewPlayerProps = {
|
|||||||
onClick: (review: ReviewSegment, ctrl: boolean) => void;
|
onClick: (review: ReviewSegment, ctrl: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type Preview = {
|
|
||||||
camera: string;
|
|
||||||
src: string;
|
|
||||||
type: string;
|
|
||||||
start: number;
|
|
||||||
end: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function PreviewThumbnailPlayer({
|
export default function PreviewThumbnailPlayer({
|
||||||
review,
|
review,
|
||||||
allPreviews,
|
allPreviews,
|
||||||
@ -341,438 +326,3 @@ function PreviewContent({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
type VideoPreviewProps = {
|
|
||||||
relevantPreview: Preview;
|
|
||||||
startTime: number;
|
|
||||||
endTime?: number;
|
|
||||||
showProgress?: boolean;
|
|
||||||
loop?: boolean;
|
|
||||||
setReviewed: () => void;
|
|
||||||
setIgnoreClick: (ignore: boolean) => void;
|
|
||||||
isPlayingBack: (ended: boolean) => void;
|
|
||||||
onTimeUpdate?: (time: number | undefined) => void;
|
|
||||||
windowVisible: boolean;
|
|
||||||
};
|
|
||||||
export function VideoPreview({
|
|
||||||
relevantPreview,
|
|
||||||
startTime,
|
|
||||||
endTime,
|
|
||||||
showProgress = true,
|
|
||||||
loop = false,
|
|
||||||
setReviewed,
|
|
||||||
setIgnoreClick,
|
|
||||||
isPlayingBack,
|
|
||||||
onTimeUpdate,
|
|
||||||
windowVisible,
|
|
||||||
}: VideoPreviewProps) {
|
|
||||||
const playerRef = useRef<HTMLVideoElement | null>(null);
|
|
||||||
const sliderRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
|
|
||||||
// keep track of playback state
|
|
||||||
|
|
||||||
const [progress, setProgress] = useState(0);
|
|
||||||
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout>();
|
|
||||||
const playerStartTime = useMemo(() => {
|
|
||||||
if (!relevantPreview) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// start with a bit of padding
|
|
||||||
return Math.max(0, startTime - relevantPreview.start - PREVIEW_PADDING);
|
|
||||||
|
|
||||||
// we know that these deps are correct
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []);
|
|
||||||
const playerDuration = useMemo(
|
|
||||||
() => (endTime ?? relevantPreview.end) - startTime + PREVIEW_PADDING,
|
|
||||||
// we know that these deps are correct
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
const [lastPercent, setLastPercent] = useState(0.0);
|
|
||||||
|
|
||||||
// initialize player correctly
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!playerRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isSafari || (isFirefox && isMobile)) {
|
|
||||||
playerRef.current.pause();
|
|
||||||
setManualPlayback(true);
|
|
||||||
} else {
|
|
||||||
playerRef.current.currentTime = playerStartTime;
|
|
||||||
playerRef.current.playbackRate = PREVIEW_FPS;
|
|
||||||
}
|
|
||||||
|
|
||||||
// we know that these deps are correct
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [playerRef]);
|
|
||||||
|
|
||||||
// time progress update
|
|
||||||
|
|
||||||
const onProgress = useCallback(() => {
|
|
||||||
if (!windowVisible) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (onTimeUpdate) {
|
|
||||||
onTimeUpdate(
|
|
||||||
relevantPreview.start + (playerRef.current?.currentTime || 0),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const playerProgress =
|
|
||||||
(playerRef.current?.currentTime || 0) - playerStartTime;
|
|
||||||
|
|
||||||
// end with a bit of padding
|
|
||||||
const playerPercent = (playerProgress / playerDuration) * 100;
|
|
||||||
|
|
||||||
if (setReviewed && lastPercent < 50 && playerPercent > 50) {
|
|
||||||
setReviewed();
|
|
||||||
}
|
|
||||||
|
|
||||||
setLastPercent(playerPercent);
|
|
||||||
|
|
||||||
if (playerPercent > 100) {
|
|
||||||
setReviewed();
|
|
||||||
|
|
||||||
if (loop && playerRef.current) {
|
|
||||||
if (manualPlayback) {
|
|
||||||
setManualPlayback(false);
|
|
||||||
setTimeout(() => setManualPlayback(true), 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
playerRef.current.currentTime = playerStartTime;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isMobile) {
|
|
||||||
isPlayingBack(false);
|
|
||||||
|
|
||||||
if (onTimeUpdate) {
|
|
||||||
onTimeUpdate(undefined);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
playerRef.current?.pause();
|
|
||||||
}
|
|
||||||
|
|
||||||
setManualPlayback(false);
|
|
||||||
setProgress(100.0);
|
|
||||||
} else {
|
|
||||||
setProgress(playerPercent);
|
|
||||||
}
|
|
||||||
|
|
||||||
// we know that these deps are correct
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [setProgress, lastPercent, windowVisible]);
|
|
||||||
|
|
||||||
// manual playback
|
|
||||||
// safari is incapable of playing at a speed > 2x
|
|
||||||
// so manual seeking is required on iOS
|
|
||||||
|
|
||||||
const [manualPlayback, setManualPlayback] = useState(false);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!manualPlayback || !playerRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let counter = 0;
|
|
||||||
const intervalId: NodeJS.Timeout = setInterval(() => {
|
|
||||||
if (playerRef.current) {
|
|
||||||
playerRef.current.currentTime = playerStartTime + counter;
|
|
||||||
counter += 1;
|
|
||||||
}
|
|
||||||
}, 1000 / PREVIEW_FPS);
|
|
||||||
return () => clearInterval(intervalId);
|
|
||||||
|
|
||||||
// we know that these deps are correct
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [manualPlayback, playerRef]);
|
|
||||||
|
|
||||||
// user interaction
|
|
||||||
|
|
||||||
const onManualSeek = useCallback(
|
|
||||||
(values: number[]) => {
|
|
||||||
const value = values[0];
|
|
||||||
|
|
||||||
if (!playerRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (manualPlayback) {
|
|
||||||
setManualPlayback(false);
|
|
||||||
setIgnoreClick(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (playerRef.current.paused == false) {
|
|
||||||
playerRef.current.pause();
|
|
||||||
setIgnoreClick(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (setReviewed) {
|
|
||||||
setReviewed();
|
|
||||||
}
|
|
||||||
|
|
||||||
setProgress(value);
|
|
||||||
playerRef.current.currentTime =
|
|
||||||
playerStartTime + (value / 100.0) * playerDuration;
|
|
||||||
},
|
|
||||||
|
|
||||||
// we know that these deps are correct
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
[
|
|
||||||
manualPlayback,
|
|
||||||
playerDuration,
|
|
||||||
playerRef,
|
|
||||||
playerStartTime,
|
|
||||||
setIgnoreClick,
|
|
||||||
],
|
|
||||||
);
|
|
||||||
|
|
||||||
const onStopManualSeek = useCallback(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
setIgnoreClick(false);
|
|
||||||
setHoverTimeout(undefined);
|
|
||||||
|
|
||||||
if (isSafari || (isFirefox && isMobile)) {
|
|
||||||
setManualPlayback(true);
|
|
||||||
} else {
|
|
||||||
playerRef.current?.play();
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
}, [playerRef, setIgnoreClick]);
|
|
||||||
|
|
||||||
const onProgressHover = useCallback(
|
|
||||||
(event: React.MouseEvent<HTMLDivElement>) => {
|
|
||||||
if (!sliderRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rect = sliderRef.current.getBoundingClientRect();
|
|
||||||
const positionX = event.clientX - rect.left;
|
|
||||||
const width = sliderRef.current.clientWidth;
|
|
||||||
onManualSeek([Math.round((positionX / width) * 100)]);
|
|
||||||
|
|
||||||
if (hoverTimeout) {
|
|
||||||
clearTimeout(hoverTimeout);
|
|
||||||
}
|
|
||||||
|
|
||||||
setHoverTimeout(setTimeout(() => onStopManualSeek(), 500));
|
|
||||||
},
|
|
||||||
[sliderRef, hoverTimeout, onManualSeek, onStopManualSeek, setHoverTimeout],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative aspect-video size-full bg-black">
|
|
||||||
<video
|
|
||||||
ref={playerRef}
|
|
||||||
className="pointer-events-none aspect-video size-full bg-black"
|
|
||||||
autoPlay
|
|
||||||
playsInline
|
|
||||||
preload="auto"
|
|
||||||
muted
|
|
||||||
onTimeUpdate={onProgress}
|
|
||||||
>
|
|
||||||
<source
|
|
||||||
src={`${baseUrl}${relevantPreview.src.substring(1)}`}
|
|
||||||
type={relevantPreview.type}
|
|
||||||
/>
|
|
||||||
</video>
|
|
||||||
{showProgress && (
|
|
||||||
<NoThumbSlider
|
|
||||||
ref={sliderRef}
|
|
||||||
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${hoverTimeout != undefined ? "h-4" : "h-2"}`}
|
|
||||||
value={[progress]}
|
|
||||||
onValueChange={onManualSeek}
|
|
||||||
onValueCommit={onStopManualSeek}
|
|
||||||
min={0}
|
|
||||||
step={1}
|
|
||||||
max={100}
|
|
||||||
onMouseMove={isMobile ? undefined : onProgressHover}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const MIN_LOAD_TIMEOUT_MS = 200;
|
|
||||||
type InProgressPreviewProps = {
|
|
||||||
review: ReviewSegment;
|
|
||||||
timeRange: TimeRange;
|
|
||||||
showProgress?: boolean;
|
|
||||||
loop?: boolean;
|
|
||||||
setReviewed: (reviewId: string) => void;
|
|
||||||
setIgnoreClick: (ignore: boolean) => void;
|
|
||||||
isPlayingBack: (ended: boolean) => void;
|
|
||||||
onTimeUpdate?: (time: number | undefined) => void;
|
|
||||||
windowVisible: boolean;
|
|
||||||
};
|
|
||||||
export function InProgressPreview({
|
|
||||||
review,
|
|
||||||
timeRange,
|
|
||||||
showProgress = true,
|
|
||||||
loop = false,
|
|
||||||
setReviewed,
|
|
||||||
setIgnoreClick,
|
|
||||||
isPlayingBack,
|
|
||||||
onTimeUpdate,
|
|
||||||
windowVisible,
|
|
||||||
}: InProgressPreviewProps) {
|
|
||||||
const apiHost = useApiHost();
|
|
||||||
const sliderRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
const { data: previewFrames } = useSWR<string[]>(
|
|
||||||
`preview/${review.camera}/start/${Math.floor(review.start_time) - PREVIEW_PADDING}/end/${
|
|
||||||
Math.ceil(review.end_time ?? timeRange.before) + PREVIEW_PADDING
|
|
||||||
}/frames`,
|
|
||||||
{ revalidateOnFocus: false },
|
|
||||||
);
|
|
||||||
const [manualFrame, setManualFrame] = useState(false);
|
|
||||||
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout>();
|
|
||||||
const [key, setKey] = useState(0);
|
|
||||||
|
|
||||||
const handleLoad = useCallback(() => {
|
|
||||||
if (!previewFrames || !windowVisible) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (onTimeUpdate) {
|
|
||||||
onTimeUpdate(review.start_time - PREVIEW_PADDING + key);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (manualFrame) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (key == previewFrames.length - 1) {
|
|
||||||
if (!review.has_been_reviewed) {
|
|
||||||
setReviewed(review.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (loop) {
|
|
||||||
setKey(0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isMobile) {
|
|
||||||
isPlayingBack(false);
|
|
||||||
|
|
||||||
if (onTimeUpdate) {
|
|
||||||
onTimeUpdate(undefined);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
if (setReviewed && key == Math.floor(previewFrames.length / 2)) {
|
|
||||||
setReviewed(review.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (previewFrames[key + 1]) {
|
|
||||||
setKey(key + 1);
|
|
||||||
}
|
|
||||||
}, MIN_LOAD_TIMEOUT_MS);
|
|
||||||
|
|
||||||
// we know that these deps are correct
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [key, manualFrame, previewFrames]);
|
|
||||||
|
|
||||||
// user interaction
|
|
||||||
|
|
||||||
const onManualSeek = useCallback(
|
|
||||||
(values: number[]) => {
|
|
||||||
const value = values[0];
|
|
||||||
|
|
||||||
if (!manualFrame) {
|
|
||||||
setManualFrame(true);
|
|
||||||
setIgnoreClick(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!review.has_been_reviewed) {
|
|
||||||
setReviewed(review.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
setKey(value);
|
|
||||||
},
|
|
||||||
|
|
||||||
// we know that these deps are correct
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
[manualFrame, setIgnoreClick, setManualFrame, setKey],
|
|
||||||
);
|
|
||||||
|
|
||||||
const onStopManualSeek = useCallback(
|
|
||||||
(values: number[]) => {
|
|
||||||
const value = values[0];
|
|
||||||
setTimeout(() => {
|
|
||||||
setIgnoreClick(false);
|
|
||||||
setManualFrame(false);
|
|
||||||
setKey(value - 1);
|
|
||||||
}, 500);
|
|
||||||
},
|
|
||||||
[setManualFrame, setIgnoreClick],
|
|
||||||
);
|
|
||||||
|
|
||||||
const onProgressHover = useCallback(
|
|
||||||
(event: React.MouseEvent<HTMLDivElement>) => {
|
|
||||||
if (!sliderRef.current || !previewFrames) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rect = sliderRef.current.getBoundingClientRect();
|
|
||||||
const positionX = event.clientX - rect.left;
|
|
||||||
const width = sliderRef.current.clientWidth;
|
|
||||||
const progress = [Math.round((positionX / width) * previewFrames.length)];
|
|
||||||
onManualSeek(progress);
|
|
||||||
|
|
||||||
if (hoverTimeout) {
|
|
||||||
clearTimeout(hoverTimeout);
|
|
||||||
}
|
|
||||||
|
|
||||||
setHoverTimeout(setTimeout(() => onStopManualSeek(progress), 500));
|
|
||||||
},
|
|
||||||
[
|
|
||||||
sliderRef,
|
|
||||||
hoverTimeout,
|
|
||||||
previewFrames,
|
|
||||||
onManualSeek,
|
|
||||||
onStopManualSeek,
|
|
||||||
setHoverTimeout,
|
|
||||||
],
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!previewFrames || previewFrames.length == 0) {
|
|
||||||
return (
|
|
||||||
<img
|
|
||||||
className="size-full"
|
|
||||||
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex size-full items-center bg-black">
|
|
||||||
<img
|
|
||||||
className="pointer-events-none size-full object-contain"
|
|
||||||
src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`}
|
|
||||||
onLoad={handleLoad}
|
|
||||||
/>
|
|
||||||
{showProgress && (
|
|
||||||
<NoThumbSlider
|
|
||||||
ref={sliderRef}
|
|
||||||
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${manualFrame ? "h-4" : "h-2"}`}
|
|
||||||
value={[key]}
|
|
||||||
onValueChange={onManualSeek}
|
|
||||||
onValueCommit={onStopManualSeek}
|
|
||||||
min={0}
|
|
||||||
step={1}
|
|
||||||
max={previewFrames.length - 1}
|
|
||||||
onMouseMove={isMobile ? undefined : onProgressHover}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
305
web/src/components/player/SearchThumbnailPlayer.tsx
Normal file
305
web/src/components/player/SearchThumbnailPlayer.tsx
Normal file
@ -0,0 +1,305 @@
|
|||||||
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { useApiHost } from "@/api";
|
||||||
|
import { isCurrentHour } from "@/utils/dateUtil";
|
||||||
|
import { getIconForLabel } from "@/utils/iconUtil";
|
||||||
|
import TimeAgo from "../dynamic/TimeAgo";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
|
import { isIOS, isMobile, isSafari } from "react-device-detect";
|
||||||
|
import Chip from "@/components/indicators/Chip";
|
||||||
|
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||||
|
import useImageLoaded from "@/hooks/use-image-loaded";
|
||||||
|
import { useSwipeable } from "react-swipeable";
|
||||||
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||||
|
import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
|
||||||
|
import ActivityIndicator from "../indicators/activity-indicator";
|
||||||
|
import { capitalizeFirstLetter } from "@/utils/stringUtil";
|
||||||
|
import { VideoPreview } from "../preview/ScrubbablePreview";
|
||||||
|
import { Preview } from "@/types/preview";
|
||||||
|
import { SearchResult } from "@/types/search";
|
||||||
|
|
||||||
|
type SearchPlayerProps = {
|
||||||
|
searchResult: SearchResult;
|
||||||
|
allPreviews?: Preview[];
|
||||||
|
scrollLock?: boolean;
|
||||||
|
onTimeUpdate?: (time: number | undefined) => void;
|
||||||
|
onClick: (searchResult: SearchResult, ctrl: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SearchThumbnailPlayer({
|
||||||
|
searchResult,
|
||||||
|
allPreviews,
|
||||||
|
scrollLock = false,
|
||||||
|
onClick,
|
||||||
|
onTimeUpdate,
|
||||||
|
}: SearchPlayerProps) {
|
||||||
|
const apiHost = useApiHost();
|
||||||
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
|
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
|
||||||
|
|
||||||
|
// interaction
|
||||||
|
|
||||||
|
const [ignoreClick, setIgnoreClick] = useState(false);
|
||||||
|
const handleOnClick = useCallback(
|
||||||
|
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
if (!ignoreClick) {
|
||||||
|
onClick(searchResult, e.metaKey);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[ignoreClick, searchResult, onClick],
|
||||||
|
);
|
||||||
|
|
||||||
|
const swipeHandlers = useSwipeable({
|
||||||
|
onSwipedLeft: () => setPlayback(false),
|
||||||
|
onSwipedRight: () => setPlayback(true),
|
||||||
|
preventScrollOnSwipe: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// playback
|
||||||
|
|
||||||
|
const relevantPreview = useMemo(() => {
|
||||||
|
if (!allPreviews) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
let multiHour = false;
|
||||||
|
const firstIndex = Object.values(allPreviews).findIndex((preview) => {
|
||||||
|
if (
|
||||||
|
preview.camera != searchResult.camera ||
|
||||||
|
preview.end < searchResult.start_time
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((searchResult.end_time ?? Date.now() / 1000) > preview.end) {
|
||||||
|
multiHour = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (firstIndex == -1) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!multiHour) {
|
||||||
|
return allPreviews[firstIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstPrev = allPreviews[firstIndex];
|
||||||
|
const firstDuration = firstPrev.end - searchResult.start_time;
|
||||||
|
const secondDuration =
|
||||||
|
(searchResult.end_time ?? Date.now() / 1000) - firstPrev.end;
|
||||||
|
|
||||||
|
if (firstDuration > secondDuration) {
|
||||||
|
// the first preview is longer than the second, return the first
|
||||||
|
return firstPrev;
|
||||||
|
} else {
|
||||||
|
// the second preview is longer, return the second if it exists
|
||||||
|
if (firstIndex < allPreviews.length - 1) {
|
||||||
|
return allPreviews.find(
|
||||||
|
(preview, idx) =>
|
||||||
|
idx > firstIndex && preview.camera == searchResult.camera,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}, [allPreviews, searchResult]);
|
||||||
|
|
||||||
|
// Hover Playback
|
||||||
|
|
||||||
|
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
|
||||||
|
const [playback, setPlayback] = useState(false);
|
||||||
|
const [tooltipHovering, setTooltipHovering] = useState(false);
|
||||||
|
const playingBack = useMemo(
|
||||||
|
() => playback && !tooltipHovering,
|
||||||
|
[playback, tooltipHovering],
|
||||||
|
);
|
||||||
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isHovered && scrollLock) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isHovered && !tooltipHovering) {
|
||||||
|
setHoverTimeout(
|
||||||
|
setTimeout(() => {
|
||||||
|
setPlayback(true);
|
||||||
|
setHoverTimeout(null);
|
||||||
|
}, 500),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
if (hoverTimeout) {
|
||||||
|
clearTimeout(hoverTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
setPlayback(false);
|
||||||
|
|
||||||
|
if (onTimeUpdate) {
|
||||||
|
onTimeUpdate(undefined);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// we know that these deps are correct
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [isHovered, scrollLock, tooltipHovering]);
|
||||||
|
|
||||||
|
// date
|
||||||
|
|
||||||
|
const formattedDate = useFormattedTimestamp(
|
||||||
|
searchResult.start_time,
|
||||||
|
config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative size-full cursor-pointer"
|
||||||
|
onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
|
||||||
|
onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
|
||||||
|
onClick={handleOnClick}
|
||||||
|
{...swipeHandlers}
|
||||||
|
>
|
||||||
|
{playingBack && (
|
||||||
|
<div className="absolute inset-0 animate-in fade-in">
|
||||||
|
<PreviewContent
|
||||||
|
searchResult={searchResult}
|
||||||
|
relevantPreview={relevantPreview}
|
||||||
|
setIgnoreClick={setIgnoreClick}
|
||||||
|
isPlayingBack={setPlayback}
|
||||||
|
onTimeUpdate={onTimeUpdate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<ImageLoadingIndicator
|
||||||
|
className="absolute inset-0"
|
||||||
|
imgLoaded={imgLoaded}
|
||||||
|
/>
|
||||||
|
<div className={`${imgLoaded ? "visible" : "invisible"}`}>
|
||||||
|
<img
|
||||||
|
ref={imgRef}
|
||||||
|
className={`size-full select-none transition-opacity ${
|
||||||
|
playingBack ? "opacity-0" : "opacity-100"
|
||||||
|
}`}
|
||||||
|
style={
|
||||||
|
isIOS
|
||||||
|
? {
|
||||||
|
WebkitUserSelect: "none",
|
||||||
|
WebkitTouchCallout: "none",
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
draggable={false}
|
||||||
|
src={
|
||||||
|
searchResult.thumb_path
|
||||||
|
? `${apiHost}${searchResult.thumb_path.replace("/media/frigate/", "")}`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
loading={isSafari ? "eager" : "lazy"}
|
||||||
|
onLoad={() => {
|
||||||
|
onImgLoad();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="absolute left-0 top-2 z-40">
|
||||||
|
<Tooltip>
|
||||||
|
<div
|
||||||
|
className="flex"
|
||||||
|
onMouseEnter={() => setTooltipHovering(true)}
|
||||||
|
onMouseLeave={() => setTooltipHovering(false)}
|
||||||
|
>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<div className="mx-3 pb-1 text-sm text-white">
|
||||||
|
{
|
||||||
|
<>
|
||||||
|
<Chip
|
||||||
|
className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} "bg-gray-500 z-0 bg-gradient-to-br from-gray-400 to-gray-500`}
|
||||||
|
>
|
||||||
|
{getIconForLabel(
|
||||||
|
searchResult.label,
|
||||||
|
"size-3 text-white",
|
||||||
|
)}
|
||||||
|
</Chip>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</TooltipTrigger>
|
||||||
|
</div>
|
||||||
|
<TooltipContent className="capitalize">
|
||||||
|
{[...new Set([searchResult.label])]
|
||||||
|
.filter(
|
||||||
|
(item) => item !== undefined && !item.includes("-verified"),
|
||||||
|
)
|
||||||
|
.map((text) => capitalizeFirstLetter(text))
|
||||||
|
.sort()
|
||||||
|
.join(", ")
|
||||||
|
.replaceAll("-verified", "")}
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
{!playingBack && (
|
||||||
|
<>
|
||||||
|
<div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
|
||||||
|
<div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
|
||||||
|
<div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
|
||||||
|
{searchResult.end_time ? (
|
||||||
|
<TimeAgo time={searchResult.start_time * 1000} dense />
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<ActivityIndicator size={24} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{formattedDate}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type PreviewContentProps = {
|
||||||
|
searchResult: SearchResult;
|
||||||
|
relevantPreview: Preview | undefined;
|
||||||
|
setIgnoreClick: (ignore: boolean) => void;
|
||||||
|
isPlayingBack: (ended: boolean) => void;
|
||||||
|
onTimeUpdate?: (time: number | undefined) => void;
|
||||||
|
};
|
||||||
|
function PreviewContent({
|
||||||
|
searchResult,
|
||||||
|
relevantPreview,
|
||||||
|
setIgnoreClick,
|
||||||
|
isPlayingBack,
|
||||||
|
onTimeUpdate,
|
||||||
|
}: PreviewContentProps) {
|
||||||
|
// preview
|
||||||
|
|
||||||
|
if (relevantPreview) {
|
||||||
|
return (
|
||||||
|
<VideoPreview
|
||||||
|
relevantPreview={relevantPreview}
|
||||||
|
startTime={searchResult.start_time}
|
||||||
|
endTime={searchResult.end_time}
|
||||||
|
setIgnoreClick={setIgnoreClick}
|
||||||
|
isPlayingBack={isPlayingBack}
|
||||||
|
onTimeUpdate={onTimeUpdate}
|
||||||
|
windowVisible={true}
|
||||||
|
setReviewed={() => {}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (isCurrentHour(searchResult.start_time)) {
|
||||||
|
return (
|
||||||
|
/*<InProgressPreview
|
||||||
|
review={review}
|
||||||
|
timeRange={timeRange}
|
||||||
|
setIgnoreClick={setIgnoreClick}
|
||||||
|
isPlayingBack={isPlayingBack}
|
||||||
|
onTimeUpdate={onTimeUpdate}
|
||||||
|
windowVisible={true}
|
||||||
|
setReviewed={() => { }}
|
||||||
|
/>*/
|
||||||
|
<div />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
450
web/src/components/preview/ScrubbablePreview.tsx
Normal file
450
web/src/components/preview/ScrubbablePreview.tsx
Normal file
@ -0,0 +1,450 @@
|
|||||||
|
import React, {
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
|
import { useApiHost } from "@/api";
|
||||||
|
import { ReviewSegment } from "@/types/review";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import { isFirefox, isMobile, isSafari } from "react-device-detect";
|
||||||
|
import { TimeRange } from "@/types/timeline";
|
||||||
|
import { NoThumbSlider } from "../ui/slider";
|
||||||
|
import { PREVIEW_FPS, PREVIEW_PADDING, Preview } from "@/types/preview";
|
||||||
|
import { baseUrl } from "@/api/baseUrl";
|
||||||
|
|
||||||
|
type VideoPreviewProps = {
|
||||||
|
relevantPreview: Preview;
|
||||||
|
startTime: number;
|
||||||
|
endTime?: number;
|
||||||
|
showProgress?: boolean;
|
||||||
|
loop?: boolean;
|
||||||
|
setReviewed: () => void;
|
||||||
|
setIgnoreClick: (ignore: boolean) => void;
|
||||||
|
isPlayingBack: (ended: boolean) => void;
|
||||||
|
onTimeUpdate?: (time: number | undefined) => void;
|
||||||
|
windowVisible: boolean;
|
||||||
|
};
|
||||||
|
export function VideoPreview({
|
||||||
|
relevantPreview,
|
||||||
|
startTime,
|
||||||
|
endTime,
|
||||||
|
showProgress = true,
|
||||||
|
loop = false,
|
||||||
|
setReviewed,
|
||||||
|
setIgnoreClick,
|
||||||
|
isPlayingBack,
|
||||||
|
onTimeUpdate,
|
||||||
|
windowVisible,
|
||||||
|
}: VideoPreviewProps) {
|
||||||
|
const playerRef = useRef<HTMLVideoElement | null>(null);
|
||||||
|
const sliderRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
// keep track of playback state
|
||||||
|
|
||||||
|
const [progress, setProgress] = useState(0);
|
||||||
|
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout>();
|
||||||
|
const playerStartTime = useMemo(() => {
|
||||||
|
if (!relevantPreview) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// start with a bit of padding
|
||||||
|
return Math.max(0, startTime - relevantPreview.start - PREVIEW_PADDING);
|
||||||
|
|
||||||
|
// we know that these deps are correct
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
const playerDuration = useMemo(
|
||||||
|
() => (endTime ?? relevantPreview.end) - startTime + PREVIEW_PADDING,
|
||||||
|
// we know that these deps are correct
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
const [lastPercent, setLastPercent] = useState(0.0);
|
||||||
|
|
||||||
|
// initialize player correctly
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!playerRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isSafari || (isFirefox && isMobile)) {
|
||||||
|
playerRef.current.pause();
|
||||||
|
setManualPlayback(true);
|
||||||
|
} else {
|
||||||
|
playerRef.current.currentTime = playerStartTime;
|
||||||
|
playerRef.current.playbackRate = PREVIEW_FPS;
|
||||||
|
}
|
||||||
|
|
||||||
|
// we know that these deps are correct
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [playerRef]);
|
||||||
|
|
||||||
|
// time progress update
|
||||||
|
|
||||||
|
const onProgress = useCallback(() => {
|
||||||
|
if (!windowVisible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (onTimeUpdate) {
|
||||||
|
onTimeUpdate(
|
||||||
|
relevantPreview.start + (playerRef.current?.currentTime || 0),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const playerProgress =
|
||||||
|
(playerRef.current?.currentTime || 0) - playerStartTime;
|
||||||
|
|
||||||
|
// end with a bit of padding
|
||||||
|
const playerPercent = (playerProgress / playerDuration) * 100;
|
||||||
|
|
||||||
|
if (setReviewed && lastPercent < 50 && playerPercent > 50) {
|
||||||
|
setReviewed();
|
||||||
|
}
|
||||||
|
|
||||||
|
setLastPercent(playerPercent);
|
||||||
|
|
||||||
|
if (playerPercent > 100) {
|
||||||
|
setReviewed();
|
||||||
|
|
||||||
|
if (loop && playerRef.current) {
|
||||||
|
if (manualPlayback) {
|
||||||
|
setManualPlayback(false);
|
||||||
|
setTimeout(() => setManualPlayback(true), 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
playerRef.current.currentTime = playerStartTime;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
isPlayingBack(false);
|
||||||
|
|
||||||
|
if (onTimeUpdate) {
|
||||||
|
onTimeUpdate(undefined);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
playerRef.current?.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
setManualPlayback(false);
|
||||||
|
setProgress(100.0);
|
||||||
|
} else {
|
||||||
|
setProgress(playerPercent);
|
||||||
|
}
|
||||||
|
|
||||||
|
// we know that these deps are correct
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [setProgress, lastPercent, windowVisible]);
|
||||||
|
|
||||||
|
// manual playback
|
||||||
|
// safari is incapable of playing at a speed > 2x
|
||||||
|
// so manual seeking is required on iOS
|
||||||
|
|
||||||
|
const [manualPlayback, setManualPlayback] = useState(false);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!manualPlayback || !playerRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let counter = 0;
|
||||||
|
const intervalId: NodeJS.Timeout = setInterval(() => {
|
||||||
|
if (playerRef.current) {
|
||||||
|
playerRef.current.currentTime = playerStartTime + counter;
|
||||||
|
counter += 1;
|
||||||
|
}
|
||||||
|
}, 1000 / PREVIEW_FPS);
|
||||||
|
return () => clearInterval(intervalId);
|
||||||
|
|
||||||
|
// we know that these deps are correct
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [manualPlayback, playerRef]);
|
||||||
|
|
||||||
|
// user interaction
|
||||||
|
|
||||||
|
const onManualSeek = useCallback(
|
||||||
|
(values: number[]) => {
|
||||||
|
const value = values[0];
|
||||||
|
|
||||||
|
if (!playerRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (manualPlayback) {
|
||||||
|
setManualPlayback(false);
|
||||||
|
setIgnoreClick(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (playerRef.current.paused == false) {
|
||||||
|
playerRef.current.pause();
|
||||||
|
setIgnoreClick(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (setReviewed) {
|
||||||
|
setReviewed();
|
||||||
|
}
|
||||||
|
|
||||||
|
setProgress(value);
|
||||||
|
playerRef.current.currentTime =
|
||||||
|
playerStartTime + (value / 100.0) * playerDuration;
|
||||||
|
},
|
||||||
|
|
||||||
|
// we know that these deps are correct
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[
|
||||||
|
manualPlayback,
|
||||||
|
playerDuration,
|
||||||
|
playerRef,
|
||||||
|
playerStartTime,
|
||||||
|
setIgnoreClick,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onStopManualSeek = useCallback(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setIgnoreClick(false);
|
||||||
|
setHoverTimeout(undefined);
|
||||||
|
|
||||||
|
if (isSafari || (isFirefox && isMobile)) {
|
||||||
|
setManualPlayback(true);
|
||||||
|
} else {
|
||||||
|
playerRef.current?.play();
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
}, [playerRef, setIgnoreClick]);
|
||||||
|
|
||||||
|
const onProgressHover = useCallback(
|
||||||
|
(event: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
if (!sliderRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rect = sliderRef.current.getBoundingClientRect();
|
||||||
|
const positionX = event.clientX - rect.left;
|
||||||
|
const width = sliderRef.current.clientWidth;
|
||||||
|
onManualSeek([Math.round((positionX / width) * 100)]);
|
||||||
|
|
||||||
|
if (hoverTimeout) {
|
||||||
|
clearTimeout(hoverTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
setHoverTimeout(setTimeout(() => onStopManualSeek(), 500));
|
||||||
|
},
|
||||||
|
[sliderRef, hoverTimeout, onManualSeek, onStopManualSeek, setHoverTimeout],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative aspect-video size-full bg-black">
|
||||||
|
<video
|
||||||
|
ref={playerRef}
|
||||||
|
className="pointer-events-none aspect-video size-full bg-black"
|
||||||
|
autoPlay
|
||||||
|
playsInline
|
||||||
|
preload="auto"
|
||||||
|
muted
|
||||||
|
onTimeUpdate={onProgress}
|
||||||
|
>
|
||||||
|
<source
|
||||||
|
src={`${baseUrl}${relevantPreview.src.substring(1)}`}
|
||||||
|
type={relevantPreview.type}
|
||||||
|
/>
|
||||||
|
</video>
|
||||||
|
{showProgress && (
|
||||||
|
<NoThumbSlider
|
||||||
|
ref={sliderRef}
|
||||||
|
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${hoverTimeout != undefined ? "h-4" : "h-2"}`}
|
||||||
|
value={[progress]}
|
||||||
|
onValueChange={onManualSeek}
|
||||||
|
onValueCommit={onStopManualSeek}
|
||||||
|
min={0}
|
||||||
|
step={1}
|
||||||
|
max={100}
|
||||||
|
onMouseMove={isMobile ? undefined : onProgressHover}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const MIN_LOAD_TIMEOUT_MS = 200;
|
||||||
|
type InProgressPreviewProps = {
|
||||||
|
review: ReviewSegment;
|
||||||
|
timeRange: TimeRange;
|
||||||
|
showProgress?: boolean;
|
||||||
|
loop?: boolean;
|
||||||
|
setReviewed: (reviewId: string) => void;
|
||||||
|
setIgnoreClick: (ignore: boolean) => void;
|
||||||
|
isPlayingBack: (ended: boolean) => void;
|
||||||
|
onTimeUpdate?: (time: number | undefined) => void;
|
||||||
|
windowVisible: boolean;
|
||||||
|
};
|
||||||
|
export function InProgressPreview({
|
||||||
|
review,
|
||||||
|
timeRange,
|
||||||
|
showProgress = true,
|
||||||
|
loop = false,
|
||||||
|
setReviewed,
|
||||||
|
setIgnoreClick,
|
||||||
|
isPlayingBack,
|
||||||
|
onTimeUpdate,
|
||||||
|
windowVisible,
|
||||||
|
}: InProgressPreviewProps) {
|
||||||
|
const apiHost = useApiHost();
|
||||||
|
const sliderRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const { data: previewFrames } = useSWR<string[]>(
|
||||||
|
`preview/${review.camera}/start/${Math.floor(review.start_time) - PREVIEW_PADDING}/end/${
|
||||||
|
Math.ceil(review.end_time ?? timeRange.before) + PREVIEW_PADDING
|
||||||
|
}/frames`,
|
||||||
|
{ revalidateOnFocus: false },
|
||||||
|
);
|
||||||
|
const [manualFrame, setManualFrame] = useState(false);
|
||||||
|
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout>();
|
||||||
|
const [key, setKey] = useState(0);
|
||||||
|
|
||||||
|
const handleLoad = useCallback(() => {
|
||||||
|
if (!previewFrames || !windowVisible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (onTimeUpdate) {
|
||||||
|
onTimeUpdate(review.start_time - PREVIEW_PADDING + key);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (manualFrame) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key == previewFrames.length - 1) {
|
||||||
|
if (!review.has_been_reviewed) {
|
||||||
|
setReviewed(review.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loop) {
|
||||||
|
setKey(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
isPlayingBack(false);
|
||||||
|
|
||||||
|
if (onTimeUpdate) {
|
||||||
|
onTimeUpdate(undefined);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (setReviewed && key == Math.floor(previewFrames.length / 2)) {
|
||||||
|
setReviewed(review.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (previewFrames[key + 1]) {
|
||||||
|
setKey(key + 1);
|
||||||
|
}
|
||||||
|
}, MIN_LOAD_TIMEOUT_MS);
|
||||||
|
|
||||||
|
// we know that these deps are correct
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [key, manualFrame, previewFrames]);
|
||||||
|
|
||||||
|
// user interaction
|
||||||
|
|
||||||
|
const onManualSeek = useCallback(
|
||||||
|
(values: number[]) => {
|
||||||
|
const value = values[0];
|
||||||
|
|
||||||
|
if (!manualFrame) {
|
||||||
|
setManualFrame(true);
|
||||||
|
setIgnoreClick(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!review.has_been_reviewed) {
|
||||||
|
setReviewed(review.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
setKey(value);
|
||||||
|
},
|
||||||
|
|
||||||
|
// we know that these deps are correct
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[manualFrame, setIgnoreClick, setManualFrame, setKey],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onStopManualSeek = useCallback(
|
||||||
|
(values: number[]) => {
|
||||||
|
const value = values[0];
|
||||||
|
setTimeout(() => {
|
||||||
|
setIgnoreClick(false);
|
||||||
|
setManualFrame(false);
|
||||||
|
setKey(value - 1);
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
[setManualFrame, setIgnoreClick],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onProgressHover = useCallback(
|
||||||
|
(event: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
if (!sliderRef.current || !previewFrames) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rect = sliderRef.current.getBoundingClientRect();
|
||||||
|
const positionX = event.clientX - rect.left;
|
||||||
|
const width = sliderRef.current.clientWidth;
|
||||||
|
const progress = [Math.round((positionX / width) * previewFrames.length)];
|
||||||
|
onManualSeek(progress);
|
||||||
|
|
||||||
|
if (hoverTimeout) {
|
||||||
|
clearTimeout(hoverTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
setHoverTimeout(setTimeout(() => onStopManualSeek(progress), 500));
|
||||||
|
},
|
||||||
|
[
|
||||||
|
sliderRef,
|
||||||
|
hoverTimeout,
|
||||||
|
previewFrames,
|
||||||
|
onManualSeek,
|
||||||
|
onStopManualSeek,
|
||||||
|
setHoverTimeout,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!previewFrames || previewFrames.length == 0) {
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
className="size-full"
|
||||||
|
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative flex size-full items-center bg-black">
|
||||||
|
<img
|
||||||
|
className="pointer-events-none size-full object-contain"
|
||||||
|
src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`}
|
||||||
|
onLoad={handleLoad}
|
||||||
|
/>
|
||||||
|
{showProgress && (
|
||||||
|
<NoThumbSlider
|
||||||
|
ref={sliderRef}
|
||||||
|
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${manualFrame ? "h-4" : "h-2"}`}
|
||||||
|
value={[key]}
|
||||||
|
onValueChange={onManualSeek}
|
||||||
|
onValueCommit={onStopManualSeek}
|
||||||
|
min={0}
|
||||||
|
step={1}
|
||||||
|
max={previewFrames.length - 1}
|
||||||
|
onMouseMove={isMobile ? undefined : onProgressHover}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,12 +1,38 @@
|
|||||||
import SearchFilterGroup from "@/components/filter/SearchFilterGroup";
|
import SearchFilterGroup from "@/components/filter/SearchFilterGroup";
|
||||||
|
import SearchThumbnailPlayer from "@/components/player/SearchThumbnailPlayer";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Toaster } from "@/components/ui/sonner";
|
import { Toaster } from "@/components/ui/sonner";
|
||||||
import { useState } from "react";
|
import { SearchResult } from "@/types/search";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
import { LuSearchCheck } from "react-icons/lu";
|
import { LuSearchCheck } from "react-icons/lu";
|
||||||
|
import useSWR from "swr";
|
||||||
|
|
||||||
export default function Search() {
|
export default function Search() {
|
||||||
|
// search field handler
|
||||||
|
|
||||||
|
const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout>();
|
||||||
|
const [search, setSearch] = useState("");
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
|
||||||
|
// search api
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (searchTimeout) {
|
||||||
|
clearTimeout(searchTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
setSearchTimeout(
|
||||||
|
setTimeout(() => {
|
||||||
|
setSearchTimeout(undefined);
|
||||||
|
setSearchTerm(search);
|
||||||
|
}, 500),
|
||||||
|
);
|
||||||
|
}, [search]);
|
||||||
|
|
||||||
|
const { data: searchResults } = useSWR<SearchResult[]>(
|
||||||
|
searchTerm.length > 0 ? ["events/search", { query: searchTerm }] : null,
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex size-full flex-col pt-2 md:py-2">
|
<div className="flex size-full flex-col pt-2 md:py-2">
|
||||||
<Toaster closeButton={true} />
|
<Toaster closeButton={true} />
|
||||||
@ -15,11 +41,11 @@ export default function Search() {
|
|||||||
<Input
|
<Input
|
||||||
className="w-full bg-muted md:w-1/3"
|
className="w-full bg-muted md:w-1/3"
|
||||||
placeholder="Search for a specific detection..."
|
placeholder="Search for a specific detection..."
|
||||||
value={searchTerm}
|
value={search}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<SearchFilterGroup />
|
<SearchFilterGroup onUpdateFilter={() => {}} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
|
<div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
|
||||||
@ -29,6 +55,33 @@ export default function Search() {
|
|||||||
Search For Detections
|
Search For Detections
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{searchResults &&
|
||||||
|
searchResults.map((value) => {
|
||||||
|
const selected = false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={value.id}
|
||||||
|
data-start={value.start_time}
|
||||||
|
className="review-item relative rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="aspect-video overflow-hidden rounded-lg">
|
||||||
|
<SearchThumbnailPlayer
|
||||||
|
searchResult={value}
|
||||||
|
allPreviews={[]}
|
||||||
|
scrollLock={false}
|
||||||
|
onClick={() => {}}
|
||||||
|
//onTimeUpdate={onPreviewTimeUpdate}
|
||||||
|
//onClick={onSelectReview}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-severity_alert outline-severity_alert` : "outline-transparent duration-500"}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
12
web/src/types/search.ts
Normal file
12
web/src/types/search.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
export type SearchResult = {
|
||||||
|
id: string;
|
||||||
|
camera: string;
|
||||||
|
description?: string;
|
||||||
|
start_time: number;
|
||||||
|
end_time?: number;
|
||||||
|
score: number;
|
||||||
|
label: string;
|
||||||
|
sub_label?: string;
|
||||||
|
thumb_path?: string;
|
||||||
|
zones: string[];
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user