fix: make sure single videos behave like single images

Author: isekovanic

package/src/components/Attachment/Gallery.tsx

@@ -64,7 +64,7 @@ export type GalleryPropsWithContext = Pick<ImageGalleryContextValue, 'imageGalle
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
     channelId: string | undefined;
-    messageHasOnlyOneImage: boolean;
+    messageHasOnlyOneMedia: boolean;
   };
 
 const GalleryWithContext = (props: GalleryPropsWithContext) => {
@@ -83,7 +83,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     setOverlay,
     videos,
     VideoThumbnail,
-    messageHasOnlyOneImage = false,
+    messageHasOnlyOneMedia = false,
   } = props;
 
   const { resizableCDNHosts } = useChatConfigContext();
@@ -144,7 +144,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
           flexDirection: invertedDirections ? 'column' : 'row',
           alignSelf: alignment === 'right' ? 'flex-end' : 'flex-start',
         },
-        images.length !== 1
+        imagesAndVideos.length !== 1
           ? { width: gridWidth, height: gridHeight }
           : {
               minHeight: height,
@@ -178,7 +178,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
                 rowIndex,
                 sizeConfig,
                 width,
-                messageHasOnlyOneImage,
+                messageHasOnlyOneMedia,
               });
 
               if (!message) {
@@ -542,6 +542,7 @@ export const Gallery = (props: GalleryProps) => {
 
   const images = propImages || contextImages;
   const videos = propVideos || contextVideos;
+  const imagesAndVideos = [...images, ...videos];
   const message = propMessage || contextMessage;
   const alignment = propAlignment || contextAlignment;
   if (!images.length && !videos.length) {
@@ -562,10 +563,10 @@ export const Gallery = (props: GalleryProps) => {
   const myMessageTheme = propMyMessageTheme || contextMyMessageTheme;
   const messageContentOrder = propMessageContentOrder || contextMessageContentOrder;
 
-  const messageHasOnlyOneImage =
+  const messageHasOnlyOneMedia =
     messageContentOrder?.length === 1 &&
     messageContentOrder?.includes('gallery') &&
-    images.length === 1;
+    imagesAndVideos.length === 1;
 
   return (
     <MemoizedGallery
@@ -586,7 +587,7 @@ export const Gallery = (props: GalleryProps) => {
         setOverlay,
         videos,
         VideoThumbnail,
-        messageHasOnlyOneImage,
+        messageHasOnlyOneMedia,
         messageContentOrder,
       }}
     />

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 
 import { fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
@@ -99,6 +100,27 @@ describe('Gallery', () => {
     });
   });
 
+  it('should use single-media sizing for a single video attachment', async () => {
+    const attachment = generateVideoAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+    const component = await getComponent([attachment]);
+    render(component);
+
+    await waitFor(() => {
+      expect(screen.queryAllByTestId('gallery-container').length).toBe(1);
+      expect(screen.getAllByLabelText('Video Thumbnail').length).toBe(1);
+    });
+
+    const containerStyle = StyleSheet.flatten(screen.getByTestId('gallery-container').props.style);
+
+    expect(containerStyle.width).toBeUndefined();
+    expect(containerStyle.height).toBeUndefined();
+    expect(containerStyle.minWidth).toBe(256);
+    expect(containerStyle.minHeight).toBe(128);
+  });
+
   it('should render portrait and landscape image in two rows', async () => {
     const attachment1 = generateImageAttachment({
       original_height: 600,

package/src/components/Attachment/utils/getGalleryImageBorderRadius.ts

@@ -18,7 +18,7 @@ type Params = {
   height?: number;
   invertedDirections?: boolean;
   width?: number;
-  messageHasOnlyOneImage?: boolean;
+  messageHasOnlyOneMedia?: boolean;
 };
 
 export function getGalleryImageBorderRadius({
@@ -30,7 +30,7 @@ export function getGalleryImageBorderRadius({
   rowIndex,
   sizeConfig,
   width,
-  messageHasOnlyOneImage = false,
+  messageHasOnlyOneMedia = false,
 }: Params) {
   const isSingleImage = numOfColumns === 1 && numOfRows === 1;
   const isImageSmallerThanMinContainerSize =
@@ -51,12 +51,12 @@ export function getGalleryImageBorderRadius({
   return {
     borderTopLeftRadius: !isImageSmallerThanMinContainerSize && topLeftEdgeExposed ? 12 : 8,
     borderTopRightRadius: !isImageSmallerThanMinContainerSize && topRightEdgeExposed ? 12 : 8,
-    borderBottomLeftRadius: messageHasOnlyOneImage
+    borderBottomLeftRadius: messageHasOnlyOneMedia
       ? primitives.radiusNone
       : !isImageSmallerThanMinContainerSize && bottomLeftEdgeExposed
         ? primitives.radiusLg
         : primitives.radiusMd,
-    borderBottomRightRadius: messageHasOnlyOneImage
+    borderBottomRightRadius: messageHasOnlyOneMedia
       ? primitives.radiusNone
       : !isImageSmallerThanMinContainerSize && bottomRightEdgeExposed
         ? primitives.radiusLg

package/src/components/Message/Message.tsx

@@ -438,6 +438,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
               isVideoPlayerAvailable()
             ) {
               acc.videos.push({
+                ...cur,
                 image_url: cur.asset_url,
                 thumb_url: cur.thumb_url,
                 type: FileTypes.Video,

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -546,6 +546,7 @@ export const MessageContent = (props: MessageContentProps) => {
     threadList,
     files,
     images,
+    videos,
   } = useMessageContext();
   const {
     additionalPressableProps,
@@ -562,10 +563,10 @@ export const MessageContent = (props: MessageContentProps) => {
   const { t } = useTranslationContext();
   const isSingleFile = files.length === 1;
   const messageHasPoll = messageContentOrder.includes('poll');
-  const messageHasSingleImage =
+  const messageHasSingleMedia =
     messageContentOrder.length === 1 &&
     messageContentOrder.includes('gallery') &&
-    images.length === 1;
+    images.length + videos.length === 1;
   const messageHasSingleFile =
     messageContentOrder.length === 1 && messageContentOrder[0] === 'files' && isSingleFile;
   const messageHasOnlyText = messageContentOrder.length === 1 && messageContentOrder[0] === 'text';
@@ -576,17 +577,17 @@ export const MessageContent = (props: MessageContentProps) => {
 
   const hidePaddingTop =
     messageHasPoll ||
-    messageHasSingleImage ||
+    messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
     messageHasGiphyOrImgur;
 
   const hidePaddingHorizontal =
-    messageHasPoll || messageHasSingleImage || messageHasSingleFile || messageHasGiphyOrImgur;
+    messageHasPoll || messageHasSingleMedia || messageHasSingleFile || messageHasGiphyOrImgur;
 
   const hidePaddingBottom =
     messageHasPoll ||
-    messageHasSingleImage ||
+    messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
     messageHasGiphyOrImgur ||

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -1,12 +1,13 @@
 import React, { useEffect } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+import { generateVideoAttachment } from '../../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
@@ -182,6 +183,51 @@ describe('MessageContent', () => {
     });
   });
 
+  it('removes content padding for a single video attachment', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [
+        generateVideoAttachment({
+          original_height: 300,
+          original_width: 600,
+        }),
+      ],
+      html: '',
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('gallery-container')).toBeTruthy();
+    });
+
+    const galleryContainer = screen.getByTestId('gallery-container');
+    let ancestor = galleryContainer.parent;
+    let contentContainerStyle;
+
+    while (ancestor && !contentContainerStyle) {
+      const flattenedStyle = StyleSheet.flatten(ancestor.props.style);
+      if (
+        flattenedStyle &&
+        'paddingTop' in flattenedStyle &&
+        'paddingHorizontal' in flattenedStyle &&
+        'paddingBottom' in flattenedStyle
+      ) {
+        contentContainerStyle = flattenedStyle;
+        break;
+      }
+      ancestor = ancestor.parent;
+    }
+
+    expect(contentContainerStyle).toBeTruthy();
+    expect(contentContainerStyle.paddingTop).toBe(0);
+    expect(contentContainerStyle.paddingHorizontal).toBe(0);
+    expect(contentContainerStyle.paddingBottom).toBe(0);
+  });
+
   it('renders the FileAttachment component when a file attachment exists', async () => {
     const user = generateUser();
     const message = generateMessage({