autoplay first video on mobile

web/package-lock.json

@@ -40,6 +40,7 @@
         "react": "^18.2.0",
         "react-apexcharts": "^1.4.1",
         "react-day-picker": "^8.9.1",
+        "react-device-detect": "^2.2.3",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.48.2",
         "react-icons": "^4.12.0",
@@ -6804,6 +6805,18 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-device-detect": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz",
+      "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==",
+      "dependencies": {
+        "ua-parser-js": "^1.0.33"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0",
+        "react-dom": ">= 0.14.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -8118,6 +8131,28 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ufo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz",

web/package.json

@@ -45,6 +45,7 @@
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-day-picker": "^8.9.1",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-icons": "^4.12.0",

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -1,22 +1,21 @@
 import VideoPlayer from "./VideoPlayer";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { useApiHost } from "@/api";
 import Player from "video.js/dist/types/player";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
-import { isSafari } from "@/utils/browserUtil";
 import { ReviewSegment } from "@/types/review";
 import { Slider } from "../ui/slider";
 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";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
   relevantPreview?: Preview;
-  isMobile: boolean;
+  autoPlayback?: boolean;
   setReviewed?: () => void;
-  onClick?: () => void;
 };
 
 type Preview = {
@@ -30,19 +29,22 @@ type Preview = {
 export default function PreviewThumbnailPlayer({
   review,
   relevantPreview,
-  isMobile,
+  autoPlayback = false,
   setReviewed,
-  onClick,
 }: PreviewPlayerProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
   const playerRef = useRef<Player | null>(null);
 
-  const [visible, setVisible] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
   const [hover, setHover] = useState(false);
   const [progress, setProgress] = useState(0);
 
+  const playingBack = useMemo(
+    () => relevantPreview && (hover || autoPlayback),
+    [hover, autoPlayback, relevantPreview]
+  );
+
   const onPlayback = useCallback(
     (isHovered: Boolean) => {
       if (!relevantPreview) {
@@ -75,72 +77,20 @@ export default function PreviewThumbnailPlayer({
     [hoverTimeout, relevantPreview, review, playerRef]
   );
 
-  const autoPlayObserver = useRef<IntersectionObserver | null>();
-  const preloadObserver = useRef<IntersectionObserver | null>();
-  const inViewRef = useCallback(
-    (node: HTMLElement | null) => {
-      if (!preloadObserver.current) {
-        try {
-          preloadObserver.current = new IntersectionObserver(
-            (entries) => {
-              const [{ isIntersecting }] = entries;
-              setVisible(isIntersecting);
-            },
-            {
-              threshold: 0,
-              root: document.getElementById("pageRoot"),
-              rootMargin: "10% 0px 25% 0px",
-            }
-          );
-          if (node) preloadObserver.current.observe(node);
-        } catch (e) {
-          // no op
-        }
-      }
-
-      if (isMobile && !autoPlayObserver.current) {
-        try {
-          autoPlayObserver.current = new IntersectionObserver(
-            (entries) => {
-              const [{ isIntersecting }] = entries;
-              if (isIntersecting) {
-                onPlayback(true);
-              } else {
-                onPlayback(false);
-              }
-            },
-            {
-              threshold: 1.0,
-              root: document.getElementById("pageRoot"),
-              rootMargin: "-10% 0px -25% 0px",
-            }
-          );
-          if (node) autoPlayObserver.current.observe(node);
-        } catch (e) {
-          // no op
-        }
-      }
-    },
-    [preloadObserver, autoPlayObserver, onPlayback]
-  );
-
   return (
     <div
-      ref={relevantPreview ? inViewRef : null}
       className="relative w-full h-full cursor-pointer"
-      onMouseEnter={() => onPlayback(true)}
+      onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
-      onMouseLeave={() => onPlayback(false)}
+      onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
     >
-      {hover ? (
+      {playingBack ? (
         <PreviewContent
           playerRef={playerRef}
           review={review}
           relevantPreview={relevantPreview}
-          isVisible={isMobile ? visible : true}
+          playback={playingBack}
-          isMobile={isMobile}
           setProgress={setProgress}
           setReviewed={setReviewed}
-          onClick={onClick}
         />
       ) : (
         <img
@@ -148,7 +98,7 @@ export default function PreviewThumbnailPlayer({
           src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
         />
       )}
-      {!hover &&
+      {!playingBack &&
         (review.severity == "alert" || review.severity == "detection") && (
           <div className="absolute top-1 left-[6px] flex gap-1">
             {review.data.objects.map((object) => {
@@ -162,7 +112,7 @@ export default function PreviewThumbnailPlayer({
             })}
           </div>
         )}
-      {!hover && (
+      {!playingBack && (
         <div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
           <TimeAgo time={review.start_time * 1000} />
           {config &&
@@ -176,7 +126,7 @@ export default function PreviewThumbnailPlayer({
       )}
       <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" />
-      {hover && (
+      {playingBack && (
         <Slider
           className="absolute left-0 right-0 bottom-0 z-10"
           value={[progress]}
@@ -185,7 +135,7 @@ export default function PreviewThumbnailPlayer({
           max={100}
         />
       )}
-      {!hover && review.has_been_reviewed && (
+      {!playingBack && review.has_been_reviewed && (
         <div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" />
       )}
     </div>
@@ -196,49 +146,19 @@ type PreviewContentProps = {
   playerRef: React.MutableRefObject<Player | null>;
   review: ReviewSegment;
   relevantPreview: Preview | undefined;
-  isVisible: boolean;
+  playback: boolean;
-  isMobile: boolean;
   setProgress?: (progress: number) => void;
   setReviewed?: () => void;
-  onClick?: () => void;
 };
 function PreviewContent({
   playerRef,
   review,
   relevantPreview,
-  isVisible,
+  playback,
-  isMobile,
   setProgress,
   setReviewed,
-  onClick,
 }: PreviewContentProps) {
-  const slowPlayack = isSafari();
+  if (relevantPreview && playback) {
-
-  // handle touchstart -> touchend as click
-  const [touchStart, setTouchStart] = useState(0);
-  const handleTouchStart = useCallback(() => {
-    setTouchStart(new Date().getTime());
-  }, []);
-  useEffect(() => {
-    if (!isMobile || !playerRef.current || !onClick) {
-      return;
-    }
-
-    playerRef.current.on("touchend", () => {
-      if (!onClick) {
-        return;
-      }
-
-      const touchEnd = new Date().getTime();
-
-      // consider tap less than 100 ms
-      if (touchEnd - touchStart < 100) {
-        onClick();
-      }
-    });
-  }, [playerRef, touchStart]);
-
-  if (relevantPreview && isVisible) {
     return (
       <VideoPlayer
         options={{
@@ -272,7 +192,7 @@ function PreviewContent({
             review.start_time - relevantPreview.start - 8
           );
 
-          player.playbackRate(slowPlayack ? 2 : 8);
+          player.playbackRate(isSafari ? 2 : 8);
           player.currentTime(playerStartTime);
           player.on("timeupdate", () => {
             if (!setProgress || playerRef.current?.paused()) {
@@ -281,7 +201,9 @@ function PreviewContent({
 
             const playerProgress =
               (player.currentTime() || 0) - playerStartTime;
-            const playerDuration = review.end_time - review.start_time;
+
+            // end with a bit of padding
+            const playerDuration = (review.end_time - review.start_time) + 8;
             const playerPercent = (playerProgress / playerDuration) * 100;
 
             if (
@@ -299,9 +221,6 @@ function PreviewContent({
               setProgress(playerPercent);
             }
           });
-          if (isMobile && onClick) {
-            player.on("touchstart", handleTouchStart);
-          }
         }}
         onDispose={() => {
           playerRef.current = null;

web/src/pages/Events.tsx

@@ -1,12 +1,8 @@
 import DesktopEventView from "@/views/events/DesktopEventView";
 import MobileEventView from "@/views/events/MobileEventView";
-import { useMemo } from "react";
+import { isMobile } from 'react-device-detect';
 
 export default function Events() {
-  const isMobile = useMemo(() => {
-    return window.innerWidth < 768;
-  }, []);
-
   if (isMobile) {
     return <MobileEventView />;
   }

web/src/pages/Live.tsx

@@ -5,8 +5,8 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Event as FrigateEvent } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { isSafari } from "@/utils/browserUtil";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { isSafari } from "react-device-detect";
 import useSWR from "swr";
 
 function Live() {
@@ -65,7 +65,6 @@ function Live() {
       .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
   }, [config]);
 
-  const safari = isSafari();
   const [windowVisible, setWindowVisible] = useState(true);
   const visibilityListener = useCallback(() => {
     setWindowVisible(document.visibilityState == "visible");
@@ -111,7 +110,7 @@ function Live() {
               className={`mb-2 md:mb-0 rounded-2xl bg-black ${grow}`}
               windowVisible={windowVisible}
               cameraConfig={camera}
-              preferredLiveMode={safari ? "webrtc" : "mse"}
+              preferredLiveMode={isSafari ? "webrtc" : "mse"}
             />
           );
         })}

web/src/utils/browserUtil.ts

@@ -1,7 +0,0 @@
-import { useMemo } from "react";
-
-export function isSafari() {
-  return useMemo(() => {
-    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-  }, []);
-}

web/src/views/events/DesktopEventView.tsx

@@ -148,7 +148,7 @@ export default function DesktopEventView() {
           setMinimap([...visibleTimestamps]);
         });
       },
-      { root: contentRef.current }
+      { root: contentRef.current, threshold: 0.5 }
     );
 
     return () => {
@@ -305,7 +305,6 @@ export default function DesktopEventView() {
                 <PreviewThumbnailPlayer
                   review={value}
                   relevantPreview={relevantPreview}
-                  isMobile={false}
                   setReviewed={() => setReviewed(value.id)}
                 />
               </div>

web/src/views/events/MobileEventView.tsx

@@ -4,7 +4,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
 import axios from "axios";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
@@ -112,6 +112,70 @@ export default function MobileEventView() {
     [isValidating, isDone]
   );
 
+  const [minimap, setMinimap] = useState<string[]>([]);
+  const minimapObserver = useRef<IntersectionObserver | null>();
+  useEffect(() => {
+    if (!contentRef.current) {
+      return;
+    }
+
+    const visibleTimestamps = new Set<string>();
+    minimapObserver.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const start = (entry.target as HTMLElement).dataset.start;
+          console.log(`${start} has been updated as intersect ${entry.isIntersecting}`)
+
+          if (!start) {
+            return;
+          }
+
+          if (entry.isIntersecting) {
+            visibleTimestamps.add(start);
+          } else {
+            visibleTimestamps.delete(start);
+          }
+
+          setMinimap([...visibleTimestamps]);
+        });
+      }, { threshold: 0.5 }
+    );
+
+    return () => {
+      minimapObserver.current?.disconnect();
+    };
+  }, [contentRef]);
+  const minimapRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (!minimapObserver.current) {
+        return;
+      }
+
+      try {
+        if (node) minimapObserver.current.observe(node);
+      } catch (e) {
+        // no op
+      }
+    },
+    [minimapObserver.current]
+  );
+  const minimapBounds = useMemo(() => {
+    const data = {
+      start: Math.floor(Date.now() / 1000) - 35 * 60,
+      end: Math.floor(Date.now() / 1000) - 21 * 60,
+    };
+    const list = minimap.sort();
+
+    if (list.length > 0) {
+      data.end = parseFloat(list.at(-1)!!);
+      data.start = parseFloat(list[0]);
+    }
+
+    console.log("the new times are " + JSON.stringify(data))
+
+    return data;
+  }, [minimap]);
+
   // review status
 
   const setReviewed = useCallback(
@@ -213,14 +277,14 @@ export default function MobileEventView() {
           return (
             <div
               key={value.id}
-              ref={lastRow ? lastReviewRef : null}
+              ref={lastRow ? lastReviewRef : minimapRef}
               data-start={value.start_time}
             >
               <div className="w-full aspect-video rounded-lg overflow-hidden">
                 <PreviewThumbnailPlayer
                   review={value}
                   relevantPreview={relevantPreview}
-                  isMobile={true}
+                  autoPlayback={minimapBounds.end == value.start_time}
                   setReviewed={() => setReviewed(value.id)}
                 />
               </div>