Fix video playback in StoryViewer for multiple videos

ts/components/StoryImage.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { Blurhash } from 'react-blurhash';
 
@@ -23,6 +23,7 @@ import { isVideoTypeSupported } from '../util/GoogleChrome';
 export type PropsType = {
   readonly attachment?: AttachmentType;
   readonly i18n: LocalizerType;
+  readonly isPaused?: boolean;
   readonly isThumbnail?: boolean;
   readonly label: string;
   readonly moduleClassName?: string;
@@ -33,6 +34,7 @@ export type PropsType = {
 export const StoryImage = ({
   attachment,
   i18n,
+  isPaused,
   isThumbnail,
   label,
   moduleClassName,
@@ -44,12 +46,26 @@ export const StoryImage = ({
     !isDownloading(attachment) &&
     !hasNotResolved(attachment);
 
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
   useEffect(() => {
     if (shouldDownloadAttachment) {
       queueStoryDownload(storyId);
     }
   }, [queueStoryDownload, shouldDownloadAttachment, storyId]);
 
+  useEffect(() => {
+    if (!videoRef.current) {
+      return;
+    }
+
+    if (isPaused) {
+      videoRef.current.pause();
+    } else {
+      videoRef.current.play();
+    }
+  }, [isPaused]);
+
   if (!attachment) {
     return null;
   }
@@ -85,7 +101,9 @@ export const StoryImage = ({
         autoPlay
         className={getClassName('__image')}
         controls={false}
+        key={attachment.url}
         loop={shouldLoop}
+        ref={videoRef}
       >
         <source src={attachment.url} />
       </video>

ts/components/StoryViewer.tsx

@@ -318,6 +318,7 @@ export const StoryViewer = ({
             <StoryImage
               attachment={attachment}
               i18n={i18n}
+              isPaused={shouldPauseViewing}
               label={i18n('lightboxImageAlt')}
               moduleClassName="StoryViewer__story"
               queueStoryDownload={queueStoryDownload}

ts/util/lint/exceptions.json

@@ -7699,6 +7699,13 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-11-30T10:15:33.662Z"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/StoryImage.tsx",
+    "line": "  const videoRef = useRef<HTMLVideoElement | null>(null);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-04-29T23:54:21.656Z"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/components/StoryViewsNRepliesModal.tsx",