Repair video playback in viewer

ts/components/StoryImage.stories.tsx

@@ -14,6 +14,7 @@ import {
   fakeAttachment,
   fakeThumbnail,
 } from '../test-both/helpers/fakeAttachment';
+import { VIDEO_MP4 } from '../types/MIME';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -87,3 +88,13 @@ story.add('Broken Image (thumbnail)', () => (
     isThumbnail
   />
 ));
+
+story.add('Video', () => (
+  <StoryImage
+    {...getDefaultProps()}
+    attachment={fakeAttachment({
+      contentType: VIDEO_MP4,
+      url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+    })}
+  />
+));

ts/components/StoryImage.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { Blurhash } from 'react-blurhash';
 
@@ -12,15 +12,17 @@ import { TextAttachment } from './TextAttachment';
 import { ThemeType } from '../types/Util';
 import {
   defaultBlurHash,
-  isDownloaded,
   hasNotResolved,
+  isDownloaded,
   isDownloading,
+  isGIF,
 } from '../types/Attachment';
 import { getClassNamesFor } from '../util/getClassNamesFor';
+import { isVideoTypeSupported } from '../util/GoogleChrome';
 
 export type PropsType = {
   readonly attachment?: AttachmentType;
-  i18n: LocalizerType;
+  readonly i18n: LocalizerType;
   readonly isThumbnail?: boolean;
   readonly label: string;
   readonly moduleClassName?: string;
@@ -37,8 +39,6 @@ export const StoryImage = ({
   queueStoryDownload,
   storyId,
 }: PropsType): JSX.Element | null => {
-  const [attachmentBroken, setAttachmentBroken] = useState<boolean>(false);
-
   const shouldDownloadAttachment =
     !isDownloaded(attachment) && !isDownloading(attachment);
 
@@ -54,6 +54,7 @@ export const StoryImage = ({
 
   const isPending = Boolean(attachment.pending) && !attachment.textAttachment;
   const isNotReadyToShow = hasNotResolved(attachment) || isPending;
+  const isSupportedVideo = isVideoTypeSupported(attachment.contentType);
 
   const getClassName = getClassNamesFor('StoryImage', moduleClassName);
 
@@ -70,19 +71,24 @@ export const StoryImage = ({
         width={attachment.width}
       />
     );
-  } else if (attachmentBroken) {
+  } else if (!isThumbnail && isSupportedVideo) {
+    const shouldLoop = isGIF(attachment ? [attachment] : undefined);
+
     storyElement = (
-      <div
-        aria-label={i18n('StoryImage__error')}
-        className="StoryImage__error"
-      />
+      <video
+        autoPlay
+        className={getClassName('__image')}
+        controls={false}
+        loop={shouldLoop}
+      >
+        <source src={attachment.url} />
+      </video>
     );
   } else {
     storyElement = (
       <img
         alt={label}
         className={getClassName('__image')}
-        onError={() => setAttachmentBroken(true)}
         src={
           isThumbnail && attachment.thumbnail
             ? attachment.thumbnail.url

ts/components/StoryViewer.tsx

@@ -15,12 +15,11 @@ import { Intl } from './Intl';
 import { MessageTimestamp } from './conversation/MessageTimestamp';
 import { StoryImage } from './StoryImage';
 import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
-import { isDownloaded, isDownloading } from '../types/Attachment';
 import { getAvatarColor } from '../types/Colors';
+import { getStoryDuration } from '../util/getStoryDuration';
+import { isDownloaded, isDownloading } from '../types/Attachment';
 import { useEscapeHandling } from '../hooks/useEscapeHandling';
 
-const STORY_DURATION = 5000;
-
 export type PropsType = {
   getPreferredBadge: PreferredBadgeSelectorType;
   group?: ConversationType;
@@ -72,6 +71,7 @@ export const StoryViewer = ({
   views,
 }: PropsType): JSX.Element => {
   const [currentStoryIndex, setCurrentStoryIndex] = useState(0);
+  const [storyDuration, setStoryDuration] = useState<number | undefined>();
 
   const visibleStory = stories[currentStoryIndex];
 
@@ -120,10 +120,25 @@ export const StoryViewer = ({
     }
   }, [currentStoryIndex, onPrevUserStories]);
 
+  useEffect(() => {
+    let shouldCancel = false;
+    (async function hydrateStoryDuration() {
+      if (!attachment) {
+        return;
+      }
+      const duration = await getStoryDuration(attachment);
+      if (shouldCancel) {
+        return;
+      }
+      setStoryDuration(duration);
+    })();
+
+    return () => {
+      shouldCancel = true;
+    };
+  }, [attachment]);
+
   const [styles, spring] = useSpring(() => ({
-    config: {
-      duration: STORY_DURATION,
-    },
     from: { width: 0 },
     to: { width: 100 },
     loop: true,
@@ -133,6 +148,9 @@ export const StoryViewer = ({
   // that this useEffect should run whenever the story changes.
   useEffect(() => {
     spring.start({
+      config: {
+        duration: storyDuration,
+      },
       from: { width: 0 },
       to: { width: 100 },
       onRest: {
@@ -147,7 +165,7 @@ export const StoryViewer = ({
     return () => {
       spring.stop();
     };
-  }, [currentStoryIndex, showNextStory, spring]);
+  }, [currentStoryIndex, showNextStory, spring, storyDuration]);
 
   useEffect(() => {
     if (hasReplyModal) {