Fix lightbox for tap-to-view GIFs

ts/components/Lightbox.tsx

@@ -170,22 +170,29 @@ export function Lightbox({
     };
   }, [onKeyDown]);
 
+  const { attachment, contentType, loop = false, objectURL, message } =
+    media[selectedIndex] || {};
+
+  const isAttachmentGIF = isGIF([attachment]);
+
   useEffect(() => {
     playVideo();
 
-    if (videoElement && isViewOnce) {
-      videoElement.addEventListener('timeupdate', onTimeUpdate);
-
-      return () => {
-        videoElement.removeEventListener('timeupdate', onTimeUpdate);
-      };
+    if (!videoElement || !isViewOnce) {
+      return noop;
     }
 
-    return noop;
-  }, [isViewOnce, onTimeUpdate, playVideo, videoElement]);
+    if (isAttachmentGIF) {
+      return noop;
+    }
+
+    videoElement.addEventListener('timeupdate', onTimeUpdate);
+
+    return () => {
+      videoElement.removeEventListener('timeupdate', onTimeUpdate);
+    };
+  }, [isViewOnce, isAttachmentGIF, onTimeUpdate, playVideo, videoElement]);
 
-  const { attachment, contentType, loop = false, objectURL, message } =
-    media[selectedIndex] || {};
   const caption = attachment?.caption;
 
   let content: JSX.Element;
@@ -239,7 +246,8 @@ export function Lightbox({
         );
       }
     } else if (isVideoTypeSupported) {
-      const shouldLoop = loop || isGIF([attachment]) || isViewOnce;
+      const shouldLoop = loop || isAttachmentGIF || isViewOnce;
+
       content = (
         <video
           className="Lightbox__object"

ts/components/conversation/Message.stories.tsx

@@ -1062,6 +1062,25 @@ story.add('TapToView Video', () => {
   return renderBothDirections(props);
 });
 
+story.add('TapToView GIF', () => {
+  const props = createProps({
+    attachments: [
+      {
+        contentType: VIDEO_MP4,
+        flags: SignalService.AttachmentPointer.Flags.GIF,
+        fileName: 'cat-gif.mp4',
+        url: '/fixtures/cat-gif.mp4',
+        width: 400,
+        height: 332,
+      },
+    ],
+    isTapToView: true,
+    status: 'sent',
+  });
+
+  return renderBothDirections(props);
+});
+
 story.add('TapToView Expired', () => {
   const props = createProps({
     attachments: [

ts/components/conversation/Message.tsx

@@ -2122,11 +2122,6 @@ export class Message extends React.PureComponent<Props, State> {
 
     const isAttachmentPending = this.isAttachmentPending();
 
-    if (isGIF(attachments)) {
-      window.log.info("<Message> handleOpen: lightbox doesn't open for GIFs");
-      return;
-    }
-
     if (isTapToView) {
       if (isAttachmentPending) {
         window.log.info(