Refactor StoryProgressSegment to have better controlled animations

ts/util/getStoryDuration.ts

@@ -11,6 +11,8 @@ import {
 } from '../types/Attachment';
 import { count } from './grapheme';
 import { SECOND } from './durations';
+import * as log from '../logging/log';
+import * as Errors from '../types/errors';
 
 const DEFAULT_DURATION = 5 * SECOND;
 const MAX_VIDEO_DURATION = 30 * SECOND;
@@ -42,21 +44,39 @@ export async function getStoryDuration(
 
   if (isGIF([attachment]) || isVideo([attachment])) {
     const videoEl = document.createElement('video');
-    if (!attachment.url) {
+    const { url } = attachment;
+
+    if (!url) {
       return DEFAULT_DURATION;
     }
-    videoEl.src = attachment.url;
 
-    await new Promise<void>(resolve => {
-      function resolveAndRemove() {
-        resolve();
-        videoEl.removeEventListener('loadedmetadata', resolveAndRemove);
-      }
+    let duration: number;
+    try {
+      duration = await new Promise<number>((resolve, reject) => {
+        function resolveAndRemove() {
+          resolve(videoEl.duration * SECOND);
+          videoEl.removeEventListener('loadedmetadata', resolveAndRemove);
+        }
 
-      videoEl.addEventListener('loadedmetadata', resolveAndRemove);
-    });
+        videoEl.addEventListener('loadedmetadata', resolveAndRemove);
+        videoEl.addEventListener('error', () => {
+          reject(videoEl.error ?? new Error('Failed to load'));
+        });
 
-    const duration = Math.ceil(videoEl.duration * SECOND);
+        videoEl.src = url;
+      });
+    } catch (error) {
+      log.error(
+        'getStoryDuration: Failed to load video duration',
+        Errors.toLogFormat(error)
+      );
+      return DEFAULT_DURATION;
+    } finally {
+      // Stop loading video
+      videoEl.pause();
+      videoEl.removeAttribute('src'); // empty source
+      videoEl.load();
+    }
 
     if (isGIF([attachment])) {
       // GIFs: Loop gifs 3 times or play for 5 seconds, whichever is longer.