Merge branch 'dev' into web-deps

web/package-lock.json

@@ -27,6 +27,7 @@
         "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
+        "@types/react-lazy-load-image-component": "^1.6.3",
         "apexcharts": "^3.45.1",
         "axios": "^1.6.2",
         "class-variance-authority": "^0.7.0",
@@ -45,6 +46,7 @@
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.48.2",
         "react-icons": "^4.12.0",
+        "react-lazy-load-image-component": "^1.6.0",
         "react-router-dom": "^6.20.1",
         "react-transition-group": "^4.4.5",
         "react-use-websocket": "^4.5.0",
@@ -2594,14 +2596,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
-      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.2.41",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.41.tgz",
       "integrity": "sha512-CwOGr/PiLiNBxEBqpJ7fO3kocP/2SSuC9fpH5K7tusrg4xPSRT/193rzolYwQnTN02We/ATXKnb6GqA5w4fRxw==",
-      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2627,6 +2627,15 @@
         "react-icons": "*"
       }
     },
+    "node_modules/@types/react-lazy-load-image-component": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@types/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.3.tgz",
+      "integrity": "sha512-HsIsYz7yWWTh/bftdzGnijKD26JyofLRqM/RM80sxs7Gk13G83ew8R/ra2XzXuiZfjNEjAq/Va+NBHFF9ciwxA==",
+      "dependencies": {
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -2639,8 +2648,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
-      "devOptional": true
     },
     "node_modules/@types/semver": {
       "version": "7.5.6",
@@ -5457,12 +5465,38 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -6690,6 +6724,19 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
+    "node_modules/react-lazy-load-image-component": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.0.tgz",
+      "integrity": "sha512-8KFkDTgjh+0+PVbH+cx0AgxLGbdTsxWMnxXzU5HEUztqewk9ufQAu8cstjZhyvtMIPsdMcPZfA0WAa7HtjQbBQ==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      },
+      "peerDependencies": {
+        "react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x",
+        "react-dom": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",

web/package.json

@@ -32,6 +32,7 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@types/react-lazy-load-image-component": "^1.6.3",
     "apexcharts": "^3.45.1",
     "axios": "^1.6.2",
     "class-variance-authority": "^0.7.0",
@@ -50,6 +51,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-icons": "^4.12.0",
+    "react-lazy-load-image-component": "^1.6.0",
     "react-router-dom": "^6.20.1",
     "react-transition-group": "^4.4.5",
     "react-use-websocket": "^4.5.0",

web/src/components/player/DynamicVideoPlayer.tsx

@@ -199,8 +199,6 @@ export default function DynamicVideoPlayer({
     return <ActivityIndicator />;
   }
 
-  //console.log(`${config.detect.width / config.detect.height < 1.7 ? "16:9" : undefined}`)
-
   return (
     <div className={className}>
       <div
@@ -228,7 +226,7 @@ export default function DynamicVideoPlayer({
             player.on("timeupdate", () => {
               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<Player | undefined>,
@@ -395,30 +396,50 @@ export class DynamicVideoController {
     this.onPlaybackTimestamp = listener;
   }
 
-  onClipEndedEvent(listener: () => void) {
+  onClipChangedEvent(listener: (dir: "forward" | "backward") => void) {
-    this.onClipEnded = listener;
+    this.onClipChange = listener;
   }
 
-  fireClipEndEvent() {
+  fireClipChangeEvent(dir: "forward" | "backward") {
-    if (this.onClipEnded) {
+    if (this.onClipChange) {
-      this.onClipEnded();
+      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) {
-      if (this.seeking) {
+      this.timeToSeek = time;
-        this.timeToSeek = time;
+    } else {
-      } else {
+      this.previewRef.current?.currentTime(
-        this.previewRef.current?.currentTime(time - this.preview.start);
+        Math.max(0, time - this.preview.start)
-        this.seeking = true;
+      );
-      }
+      this.seeking = true;
     }
   }
 
@@ -438,4 +459,9 @@ export class DynamicVideoController {
       this.seeking = false;
     }
   }
+
+  previewReady() {
+    this.previewRef.current?.pause();
+    this.readyToScrub = true;
+  }
 }

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<NodeJS.Timeout | null>();
   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 && (
-            <div className="absolute left-0 top-0 right-0 bottom-0">
+            <div className="absolute left-0 top-0 right-0 bottom-0 animate-in fade-in">
               <PreviewContent
                 review={review}
                 relevantPreview={relevantPreview}
@@ -119,37 +122,48 @@ export default function PreviewThumbnailPlayer({
               />
             </div>
           )}
-          <img
+          <LazyLoadImage
             className={`w-full h-full transition-opacity ${
               playingBack ? "opacity-0" : "opacity-100"
             }`}
-            loading="lazy"
             src={`${apiHost}${review.thumb_path.replace(
               "/media/frigate/",
               ""
             )}`}
+            onLoad={() => {
+              setImgLoaded(true);
+            }}
+            placeholder={<Skeleton className="w-full h-full rounded-xl" />}
           />
-          {(review.severity == "alert" || review.severity == "detection") && (
+
-            <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
+          {!playingBack && imgLoaded && (
-              {review.data.objects.map((object) => {
+            <>
-                return getIconForLabel(object, "w-3 h-3 text-white");
+              <div className="absolute top-0 left-0 right-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none animate-in fade-in">
-              })}
+                <div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm ">
-              {review.data.audio.map((audio) => {
+                  {(review.severity == "alert" ||
-                return getIconForLabel(audio, "w-3 h-3 text-white");
+                    review.severity == "detection") && (
-              })}
+                    <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
-              {review.data.sub_labels?.map((sub) => {
+                      {review.data.objects.map((object) => {
-                return getIconForSubLabel(sub, "w-3 h-3 text-white");
+                        return getIconForLabel(object, "w-3 h-3 text-white");
-              })}
+                      })}
-            </Chip>
+                      {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");
+                      })}
+                    </Chip>
+                  )}
+                </div>
+              </div>
+              <div className="absolute bottom-0 left-0 right-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none animate-in fade-in">
+                <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm ">
+                  <TimeAgo time={review.start_time * 1000} dense />
+                  {formattedDate}
+                </div>
+              </div>
+            </>
           )}
-          {!playingBack && (
-            <div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
-              <TimeAgo time={review.start_time * 1000} dense />
-              {formattedDate}
-            </div>
-          )}
-          <div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none" />
-          <div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none" />
           {playingBack && (
             <Slider
               className="absolute left-0 right-0 bottom-0 z-10"
@@ -159,8 +173,8 @@ export default function PreviewThumbnailPlayer({
               max={100}
             />
           )}
-          {!playingBack && review.has_been_reviewed && (
+          {!playingBack && imgLoaded && review.has_been_reviewed && (
-            <div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" />
+            <div className="absolute left-0 top-0 bottom-0 right-0 z-10 bg-black bg-opacity-60" />
           )}
         </div>
       </ContextMenuTrigger>
@@ -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 (
-      <img
+      <LazyLoadImage
         className="h-full w-full"
-        loading="lazy"
         src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
       />
     );

web/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

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 () => {

web/src/views/events/DesktopRecordingView.tsx

@@ -20,9 +20,13 @@ export default function DesktopRecordingView({
   relevantPreviews,
 }: DesktopRecordingViewProps) {
   const navigate = useNavigate();
-  const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
   const contentRef = useRef<HTMLDivElement | null>(null);
 
+  // controller state
+
+  const [playerReady, setPlayerReady] = useState(false);
+  const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
+
   // timeline time
 
   const timeRange = useMemo(
@@ -44,12 +48,14 @@ export default function DesktopRecordingView({
       return;
     }
 
-    if (selectedRangeIdx < timeRange.ranges.length - 1) {
+    controllerRef.current.onClipChangedEvent((dir) => {
-      controllerRef.current.onClipEndedEvent(() => {
+      if (dir == "forward" && selectedRangeIdx < timeRange.ranges.length - 1) {
         setSelectedRangeIdx(selectedRangeIdx + 1);
-      });
+      } else if (selectedRangeIdx > 0) {
-    }
+        setSelectedRangeIdx(selectedRangeIdx - 1);
-  }, [controllerRef, selectedRangeIdx]);
+      }
+    });
+  }, [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 (
     <div ref={contentRef} className="relative w-full h-full">
@@ -87,6 +93,7 @@ export default function DesktopRecordingView({
           cameraPreviews={relevantPreviews || []}
           onControllerReady={(controller) => {
             controllerRef.current = controller;
+            setPlayerReady(true);
             controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
               setCurrentTime(timestamp);
             });