Add support for new ribbon timeline.

src/utils/basic.ts

@@ -199,4 +199,24 @@ export const sleep = async (seconds: number) => {
 
 export const isValidDate = (date: Date): boolean => {
   return !isNaN(date.getTime());
-}
+};
+
+/**
+ * Set or remove an attribute on a HTMLElement.
+ * @param element The element.
+ * @param set If `true` sets the attribute, otherwise removes it.
+ * @param name The attribute name.
+ * @param value An optional value to set the attribute to.
+ */
+export const setOrRemoveAttribute = (
+  element: HTMLElement,
+  set: boolean,
+  name: string,
+  value?: string,
+): void => {
+  if (set) {
+    element.setAttribute(name, value ?? '');
+  } else {
+    element.removeAttribute(name);
+  }
+};

src/utils/media-to-view.ts

@@ -171,7 +171,7 @@ export const executeMediaQueryForView = async (
 
   if (options?.select === 'time' && options?.targetTime) {
     queryResults.selectBestResult((media) =>
-      findClosestMediaIndex(media, options.targetTime as Date),
+      findBestMediaIndex(media, options.targetTime as Date),
     );
     viewerContext = {
       mediaViewer: {
@@ -193,39 +193,31 @@ export const executeMediaQueryForView = async (
 };
 
 /**
- * Find the closest matching media object.
+ * Find the longest matching media object that contains a given targetTime.
+ * Longest is chosen to give the most stability to the media viewer.
  * @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
- * the best match.
  * @returns The childindex or null if no matching child is found.
  */
-export const findClosestMediaIndex = (
+export const findBestMediaIndex = (
   mediaArray: ViewMedia[],
-  targetTime: Date,
-  refPoint?: 'start' | 'end',
+  targetTime: Date
 ): number | null => {
   let bestMatch:
     | {
         index: number;
-        delta: number;
+        duration: number;
       }
     | undefined;
 
   for (const [i, media] of mediaArray.entries()) {
-    if (media.includesTime(targetTime)) {
-      const start = media.getStartTime();
-      const end = media.getEndTime();
-      if (!refPoint || !start || !end) {
-        return i;
-      }
-      const delta =
-        refPoint === 'end'
-          ? end.getTime() - targetTime.getTime()
-          : targetTime.getTime() - start.getTime();
-      if (!bestMatch || delta < bestMatch.delta) {
-        bestMatch = { index: i, delta: delta };
+    const start = media.getStartTime();
+    const end = media.getUsableEndTime();
+
+    if (media.includesTime(targetTime) && start && end) {
+      const duration = end.getTime() - start.getTime();
+      if (!bestMatch || duration > bestMatch.duration) {
+        bestMatch = { index: i, duration: duration };
       }
     }
   }

src/utils/timeline-source.ts

@@ -147,8 +147,8 @@ export class TimelineDataSource {
           content: '',
           media: media,
           start: startTime.getTime(),
-          type: endTime ? 'range' : 'point',
-          ...(endTime && { end: endTime.getTime() }),
+          type: 'range',
+          end: endTime?.getTime() ?? startTime.getTime(),
         });
       }
     }