Repair video playback in viewer

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