Enable smooth panning between past/live.

src/utils/media-info.ts

@@ -44,12 +44,12 @@ export function createMediaLoadedInfo(
  * @param source An event or HTMLElement that should be used as a source.
  */
 export function dispatchMediaLoadedEvent(
-  element: HTMLElement,
+  target: HTMLElement,
   source: Event | HTMLElement,
 ): void {
   const mediaLoadedInfo = createMediaLoadedInfo(source);
   if (mediaLoadedInfo) {
-    dispatchExistingMediaLoadedInfoAsEvent(element, mediaLoadedInfo);
+    dispatchExistingMediaLoadedInfoAsEvent(target, mediaLoadedInfo);
   }
 }
 
@@ -59,10 +59,10 @@ export function dispatchMediaLoadedEvent(
  * @param MediaLoadedInfo The MediaLoadedInfo object to send.
  */
 export function dispatchExistingMediaLoadedInfoAsEvent(
-  element: HTMLElement,
+  target: EventTarget,
   MediaLoadedInfo: MediaLoadedInfo,
 ): void {
-  dispatchFrigateCardEvent<MediaLoadedInfo>(element, 'media:loaded', MediaLoadedInfo);
+  dispatchFrigateCardEvent<MediaLoadedInfo>(target, 'media:loaded', MediaLoadedInfo);
 }
 
 /**

src/utils/media-to-view.ts

@@ -214,25 +214,19 @@ export const findClosestMediaIndex = (
     | undefined;
 
   for (const [i, media] of mediaArray.entries()) {
-    if (!refPoint) {
-      if (media.includesTime(targetTime)) {
+    if (media.includesTime(targetTime)) {
+      const start = media.getStartTime();
+      const end = media.getEndTime();
+      if (!refPoint || !start || !end) {
         return i;
       }
-      continue;
-    }
-
-    const start = media.getStartTime();
-    const end = media.getEndTime() ?? start;
-    if (!start || !end) {
-      continue;
-    }
-
-    const delta =
-      refPoint === 'end'
-        ? end.getTime() - targetTime.getTime()
-        : targetTime.getTime() - start.getTime();
-    if (delta > 0 && (!bestMatch || delta < bestMatch.delta)) {
-      bestMatch = { index: i, delta: delta };
+      const delta =
+        refPoint === 'end'
+          ? end.getTime() - targetTime.getTime()
+          : targetTime.getTime() - start.getTime();
+      if (!bestMatch || delta < bestMatch.delta) {
+        bestMatch = { index: i, delta: delta };
+      }
     }
   }
   return bestMatch ? bestMatch.index : null;

src/utils/media.ts

@@ -31,7 +31,6 @@ export const hideMediaControlsTemporarily = (
 };
 
 /**
- * 
  * @param player The Frigate Card Media Player object.
  * @param video An underlying video or media player upon which to call play.
  */
@@ -43,10 +42,14 @@ export const playMediaMutingIfNecessary = async (
   // and then try again. This works around some browsers that prevent
   // auto-play unless the video is muted.
   if (video?.play) {
-    video.play().catch((ev) => {
+    video.play().catch(async (ev) => {
       if (ev.name === 'NotAllowedError' && !player.isMuted()) {
-        player.mute();
-        video.play().catch();
+        await player.mute();
+        try {
+          await video.play();
+        } catch (_) {
+          // Pass.
+        }
       }
     });
   }