{
controller.updateProgress(player.currentTime() || 0);
});
- player.on("ended", () => controller.fireClipEndEvent());
+ player.on("ended", () => controller.fireClipChangeEvent("forward"));
if (onControllerReady) {
onControllerReady(controller);
@@ -264,6 +262,7 @@ export default function DynamicVideoPlayer({
previewRef.current = player;
player.pause();
player.on("seeked", () => controller.finishedSeeking());
+ player.on("loadeddata", () => controller.previewReady());
}}
onDispose={() => {
previewRef.current = undefined;
@@ -285,7 +284,8 @@ export class DynamicVideoController {
// playback
private recordings: Recording[] = [];
private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
- private onClipEnded: (() => void) | undefined = undefined;
+ private onClipChange: ((dir: "forward" | "backward") => void) | undefined =
+ undefined;
private annotationOffset: number;
private timeToStart: number | undefined = undefined;
@@ -293,6 +293,7 @@ export class DynamicVideoController {
private preview: Preview | undefined = undefined;
private timeToSeek: number | undefined = undefined;
private seeking = false;
+ private readyToScrub = true;
constructor(
playerRef: MutableRefObject,
@@ -395,30 +396,50 @@ export class DynamicVideoController {
this.onPlaybackTimestamp = listener;
}
- onClipEndedEvent(listener: () => void) {
- this.onClipEnded = listener;
+ onClipChangedEvent(listener: (dir: "forward" | "backward") => void) {
+ this.onClipChange = listener;
}
- fireClipEndEvent() {
- if (this.onClipEnded) {
- this.onClipEnded();
+ fireClipChangeEvent(dir: "forward" | "backward") {
+ if (this.onClipChange) {
+ this.onClipChange(dir);
}
}
scrubToTimestamp(time: number) {
+ if (!this.preview) {
+ return;
+ }
+
+ if (!this.readyToScrub) {
+ return;
+ }
+
+ if (time > this.preview.end) {
+ if (this.playerMode == "scrubbing") {
+ this.playerMode = "playback";
+ this.setScrubbing(false);
+ this.timeToSeek = undefined;
+ this.seeking = false;
+ this.readyToScrub = false;
+ this.fireClipChangeEvent("forward");
+ }
+ return;
+ }
+
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;
- }
+ if (this.seeking) {
+ this.timeToSeek = time;
+ } else {
+ this.previewRef.current?.currentTime(
+ Math.max(0, time - this.preview.start)
+ );
+ this.seeking = true;
}
}
@@ -438,4 +459,9 @@ export class DynamicVideoController {
this.seeking = false;
}
}
+
+ previewReady() {
+ this.previewRef.current?.pause();
+ this.readyToScrub = true;
+ }
}
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index dda4fc2a8e..32bd491dce 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -7,7 +7,7 @@ import { getIconForLabel, getIconForSubLabel } from "@/utils/iconUtil";
import TimeAgo from "../dynamic/TimeAgo";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
-import { isMobile, isSafari } from "react-device-detect";
+import { isFirefox, isMobile, isSafari } from "react-device-detect";
import Chip from "../Chip";
import {
ContextMenu,
@@ -19,6 +19,8 @@ import {
import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
import axios from "axios";
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { Skeleton } from "../ui/skeleton";
+import { LazyLoadImage } from "react-lazy-load-image-component";
type PreviewPlayerProps = {
review: ReviewSegment;
@@ -49,6 +51,7 @@ export default function PreviewThumbnailPlayer({
const [hoverTimeout, setHoverTimeout] = useState();
const [playback, setPlayback] = useState(false);
const [progress, setProgress] = useState(0);
+ const [imgLoaded, setImgLoaded] = useState(false);
const playingBack = useMemo(() => playback, [playback, autoPlayback]);
@@ -110,7 +113,7 @@ export default function PreviewThumbnailPlayer({
onClick={onClick}
>
{playingBack && (
- ![]({`${apiHost}${review.thumb_path.replace("/media/frigate/",)
);
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000000..01b8b6d4f7
--- /dev/null
+++ b/web/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+export { Skeleton }
diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx
index c0e3769841..ef8d2e58b8 100644
--- a/web/src/views/events/DesktopEventView.tsx
+++ b/web/src/views/events/DesktopEventView.tsx
@@ -133,7 +133,7 @@ export default function DesktopEventView({
setMinimap([...visibleTimestamps]);
});
},
- { root: contentRef.current, threshold: 0.5 }
+ { root: contentRef.current, threshold: 0.1 }
);
return () => {
diff --git a/web/src/views/events/DesktopRecordingView.tsx b/web/src/views/events/DesktopRecordingView.tsx
index 4b73e64918..cd908fd225 100644
--- a/web/src/views/events/DesktopRecordingView.tsx
+++ b/web/src/views/events/DesktopRecordingView.tsx
@@ -20,9 +20,13 @@ export default function DesktopRecordingView({
relevantPreviews,
}: DesktopRecordingViewProps) {
const navigate = useNavigate();
- const controllerRef = useRef(undefined);
const contentRef = useRef(null);
+ // controller state
+
+ const [playerReady, setPlayerReady] = useState(false);
+ const controllerRef = useRef(undefined);
+
// timeline time
const timeRange = useMemo(
@@ -44,12 +48,14 @@ export default function DesktopRecordingView({
return;
}
- if (selectedRangeIdx < timeRange.ranges.length - 1) {
- controllerRef.current.onClipEndedEvent(() => {
+ controllerRef.current.onClipChangedEvent((dir) => {
+ if (dir == "forward" && selectedRangeIdx < timeRange.ranges.length - 1) {
setSelectedRangeIdx(selectedRangeIdx + 1);
- });
- }
- }, [controllerRef, selectedRangeIdx]);
+ } else if (selectedRangeIdx > 0) {
+ setSelectedRangeIdx(selectedRangeIdx - 1);
+ }
+ });
+ }, [playerReady, selectedRangeIdx]);
// scrubbing and timeline state
@@ -62,13 +68,13 @@ export default function DesktopRecordingView({
if (scrubbing) {
controllerRef.current?.scrubToTimestamp(currentTime);
}
- }, [controllerRef, currentTime, scrubbing]);
+ }, [currentTime, scrubbing]);
useEffect(() => {
if (!scrubbing) {
controllerRef.current?.seekToTimestamp(currentTime, true);
}
- }, [controllerRef, scrubbing]);
+ }, [scrubbing]);
return (
+
{
+ setImgLoaded(true);
+ }}
+ placeholder={
- {review.data.objects.map((object) => {
- return getIconForLabel(object, "w-3 h-3 text-white");
- })}
- {review.data.audio.map((audio) => {
- return getIconForLabel(audio, "w-3 h-3 text-white");
- })}
- {review.data.sub_labels?.map((sub) => {
- return getIconForSubLabel(sub, "w-3 h-3 text-white");
- })}
-
- )}
- {!playingBack && (
-
@@ -192,7 +206,10 @@ function PreviewContent({
}
// start with a bit of padding
- return Math.max(0, review.start_time - relevantPreview.start - PREVIEW_PADDING);
+ return Math.max(
+ 0,
+ review.start_time - relevantPreview.start - PREVIEW_PADDING
+ );
}, []);
const [lastPercent, setLastPercent] = useState(0.0);
@@ -203,7 +220,7 @@ function PreviewContent({
return;
}
- if (isSafari) {
+ if (isSafari || (isFirefox && isMobile)) {
playerRef.current.pause();
setManualPlayback(true);
} else {
@@ -223,7 +240,8 @@ function PreviewContent({
(playerRef.current?.currentTime || 0) - playerStartTime;
// end with a bit of padding
- const playerDuration = review.end_time - review.start_time + PREVIEW_PADDING;
+ const playerDuration =
+ review.end_time - review.start_time + PREVIEW_PADDING;
const playerPercent = (playerProgress / playerDuration) * 100;
if (
@@ -340,9 +358,8 @@ function InProgressPreview({
if (!previewFrames || previewFrames.length == 0) {
return (
-
-
+
+ {!playingBack && imgLoaded && (
+ <>
+
+
+
+ {(review.severity == "alert" ||
+ review.severity == "detection") && (
+
+ {review.data.objects.map((object) => {
+ return getIconForLabel(object, "w-3 h-3 text-white");
+ })}
+ {review.data.audio.map((audio) => {
+ return getIconForLabel(audio, "w-3 h-3 text-white");
+ })}
+ {review.data.sub_labels?.map((sub) => {
+ return getIconForSubLabel(sub, "w-3 h-3 text-white");
+ })}
+
+ )}
+
+
+
+
)}
-
-
{playingBack && (
+
+
);
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000000..01b8b6d4f7
--- /dev/null
+++ b/web/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+ className,
+ ...props
+}: React.HTMLAttributes
@@ -87,6 +93,7 @@ export default function DesktopRecordingView({
cameraPreviews={relevantPreviews || []}
onControllerReady={(controller) => {
controllerRef.current = controller;
+ setPlayerReady(true);
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp);
});