Modify timeline to allow pan into past/future.

src/utils/media-to-view.ts

@@ -194,7 +194,7 @@ export const executeMediaQueryForView = async (
 
 /**
  * Find the closest matching media object.
- * @param mediaArray The media. Must be sorted most recent first.
+ * @param mediaArray The media.
  * @param targetTime The target time used to find the relevant child.
  * @param refPoint Whether to find based on the start or end of the
  * event/recording. If not specified, the first match is returned rather than
@@ -214,19 +214,25 @@ export const findClosestMediaIndex = (
     | undefined;
 
   for (const [i, media] of mediaArray.entries()) {
-    if (media.includesTime(targetTime)) {
-      const start = media.getStartTime();
-      const end = media.getEndTime();
-      if (!refPoint || !start || !end) {
+    if (!refPoint) {
+      if (media.includesTime(targetTime)) {
         return i;
       }
-      const delta =
-        refPoint === 'end'
-          ? end.getTime() - targetTime.getTime()
-          : targetTime.getTime() - start.getTime();
-      if (!bestMatch || delta < bestMatch.delta) {
-        bestMatch = { index: i, delta: delta };
-      }
+      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 };
     }
   }
   return bestMatch ? bestMatch.index : null;