fix: show play button in video quote attachments

ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx

@@ -24,7 +24,7 @@ const StyledQuoteIconContainer = styled.div`
   position: relative;
 `;
 
-export const StyledQuoteIcon = styled.div`
+const StyledQuoteIcon = styled.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -37,7 +37,7 @@ export const StyledQuoteIcon = styled.div`
   justify-content: center;
 `;
 
-export const StyledQuoteIconBackground = styled.div`
+const StyledQuoteIconBackground = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -58,16 +58,13 @@ export const StyledQuoteIconBackground = styled.div`
   }
 `;
 
-export type QuoteIconTypes = Extract<
-  SessionIconType,
-  'file' | 'image' | 'play' | 'movie' | 'microphone'
->;
+type QuoteIconTypes = Extract<SessionIconType, 'file' | 'image' | 'play' | 'movie' | 'microphone'>;
 
 type QuoteIconProps = {
   icon: QuoteIconTypes;
 };
 
-export const QuoteIcon = (props: QuoteIconProps) => {
+const QuoteIcon = (props: QuoteIconProps) => {
   const { icon } = props;
   const iconProps = icons[icon];
 
@@ -113,8 +110,8 @@ export const QuoteIconContainer = (
       <QuoteImage
         url={objectUrl}
         contentType={MIME.IMAGE_JPEG}
-        icon="play"
         handleImageErrorBound={noop}
+        showPlayButton={true}
       />
     ) : (
       <QuoteIcon icon="movie" />

ts/components/conversation/message/message-content/quote/QuoteImage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDisableDrag } from '../../../../../hooks/useDisableDrag';
 import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch';
 import styled from 'styled-components';
-import { QuoteIcon, QuoteIconTypes } from './QuoteIconContainer';
+import { icons } from '../../../../icon';
 
 const StyledQuoteImage = styled.div`
   flex: initial;
@@ -19,20 +19,54 @@ const StyledQuoteImage = styled.div`
   }
 `;
 
+const StyledPlayButton = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+    background-color: var(--chat-buttons-background-color);
+
+    padding-left: 3px;
+
+    &:hover {
+      background-color: var(--chat-buttons-background-hover-color);
+    }
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+    fill: var(--chat-buttons-icon-color);
+  }
+`;
+
 export const QuoteImage = (props: {
   handleImageErrorBound: () => void;
   url: string;
   contentType: string;
-  icon?: QuoteIconTypes;
+  showPlayButton?: boolean;
 }) => {
-  const { url, icon, contentType, handleImageErrorBound } = props;
+  const { url, showPlayButton, contentType, handleImageErrorBound } = props;
   const disableDrag = useDisableDrag();
 
   const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false);
   const srcData = !loading ? urlToLoad : '';
 
-  const iconElement = icon ? <QuoteIcon icon={icon} /> : null;
-
   return (
     <StyledQuoteImage>
       <img
@@ -41,7 +75,15 @@ export const QuoteImage = (props: {
         onDragStart={disableDrag}
         onError={handleImageErrorBound}
       />
-      {iconElement}
+      {showPlayButton && (
+        <StyledPlayButton>
+          <div>
+            <svg viewBox={icons['play'].viewBox}>
+              <path d={icons['play'].path} />
+            </svg>
+          </div>
+        </StyledPlayButton>
+      )}
     </StyledQuoteImage>
   );
 };