Fix MediaGallery handling of videos - show thumbnail and overlay

js/views/conversation_view.js

@@ -623,13 +623,21 @@
         }
       }
 
-      const media = rawMedia.map(mediaMessage =>
-        Object.assign({}, mediaMessage, {
+      const media = rawMedia.map(mediaMessage => {
+        const { attachments } = mediaMessage;
+        const first = attachments && attachments[0];
+        const { thumbnail } = first;
+
+        return {
+          ...mediaMessage,
+          thumbnailObjectUrl: thumbnail
+            ? getAbsoluteAttachmentPath(thumbnail.path)
+            : null,
           objectURL: getAbsoluteAttachmentPath(
             mediaMessage.attachments[0].path
           ),
-        })
-      );
+        };
+      });
 
       const saveAttachment = async ({ message } = {}) => {
         const attachment = message.attachments[0];

stylesheets/_modules.scss

@@ -1806,13 +1806,45 @@
   margin-right: 4px;
   margin-bottom: 4px;
 }
+
 .module-media-grid-item__image {
   height: 94px;
   width: 94px;
   object-fit: cover;
 }
 
-// Module: Empty State
+.module-media-grid-item__image-container {
+  height: 94px;
+  width: 94px;
+  object-fit: cover;
+  position: relative;
+}
+
+.module-media-grid-item__circle-overlay {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+
+  transform: translate(-50%, -50%);
+
+  width: 42px;
+  height: 42px;
+  background-color: $color-white;
+  border-radius: 21px;
+}
+
+.module-media-grid-item__play-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  height: 36px;
+  width: 36px;
+  @include color-svg('../images/play.svg', $color-signal-blue);
+}
+
+/* Module: Empty State*/
 
 .module-empty-state {
   display: flex;

ts/components/conversation/media-gallery/MediaGallery.md

@@ -33,13 +33,14 @@ const createRandomMessage = ({ startTime, timeWindow } = {}) => props => {
         data: null,
         fileName,
         size: _.random(1000, 1000 * 1000 * 50),
+        contentType: 'image/jpeg',
       },
     ],
 
-    objectURL: `https://placekitten.com/${_.random(50, 150)}/${_.random(
+    thumbnailObjectUrl: `https://placekitten.com/${_.random(
       50,
       150
-    )}`,
+    )}/${_.random(50, 150)}`,
     ...props,
   };
 };
@@ -83,11 +84,11 @@ const messages = _.sortBy(
 const messages = [
   {
     id: '1',
-    objectURL: 'https://placekitten.com/76/67',
+    thumbnailObjectUrl: 'https://placekitten.com/76/67',
     attachments: [
       {
         fileName: 'foo.jpg',
-        contentType: 'application/json',
+        contentType: 'image/jpeg',
       },
     ],
   },

ts/components/conversation/media-gallery/MediaGridItem.md

@@ -3,11 +3,27 @@
 ```jsx
 const message = {
   id: '1',
-  objectURL: 'https://placekitten.com/76/67',
+  thumbnailObjectUrl: 'https://placekitten.com/76/67',
   attachments: [
     {
       fileName: 'foo.jpg',
-      contentType: 'application/json',
+      contentType: 'image/jpeg',
+    },
+  ],
+};
+<MediaGridItem i18n={util.i18n} message={message} />;
+```
+
+## With video
+
+```jsx
+const message = {
+  id: '1',
+  thumbnailObjectUrl: 'https://placekitten.com/76/67',
+  attachments: [
+    {
+      fileName: 'foo.jpg',
+      contentType: 'video/mp4',
     },
   ],
 };

ts/components/conversation/media-gallery/MediaGridItem.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
 
+import {
+  isImageTypeSupported,
+  isVideoTypeSupported,
+} from '../../../util/GoogleChrome';
 import { Message } from './types/Message';
 import { Localizer } from '../../../types/Util';
 
@@ -12,18 +16,42 @@ interface Props {
 export class MediaGridItem extends React.Component<Props> {
   public renderContent() {
     const { message, i18n } = this.props;
+    const { attachments } = message;
 
-    if (!message.objectURL) {
+    if (!message.thumbnailObjectUrl) {
+      return null;
+    }
+    if (!attachments || !attachments.length) {
       return null;
     }
 
-    return (
-      <img
-        alt={i18n('lightboxImageAlt')}
-        className="module-media-grid-item__image"
-        src={message.objectURL}
-      />
-    );
+    const first = attachments[0];
+    const { contentType } = first;
+
+    if (contentType && isImageTypeSupported(contentType)) {
+      return (
+        <img
+          alt={i18n('lightboxImageAlt')}
+          className="module-media-grid-item__image"
+          src={message.thumbnailObjectUrl}
+        />
+      );
+    } else if (contentType && isVideoTypeSupported(contentType)) {
+      return (
+        <div className="module-media-grid-item__image-container">
+          <img
+            alt={i18n('lightboxImageAlt')}
+            className="module-media-grid-item__image"
+            src={message.thumbnailObjectUrl}
+          />
+          <div className="module-media-grid-item__circle-overlay">
+            <div className="module-media-grid-item__play-overlay" />
+          </div>
+        </div>
+      );
+    }
+
+    return null;
   }
 
   public render() {

ts/components/conversation/media-gallery/types/Message.tsx

@@ -10,7 +10,10 @@ export type Message = {
   id: string;
   attachments: Array<Attachment>;
   received_at: number;
-} & { objectURL?: string };
+} & {
+  thumbnailObjectUrl?: string;
+  objectURL?: string;
+};
 
 export const loadWithObjectURL = (loadMessage: MapAsync<Message>) => async (
   messages: Array<Message>