stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.3

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

@@ -0,0 +1,233 @@
+import React from 'react';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateImageAttachment } 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';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageList } from '../../MessageList/MessageList';
+
+describe('Gallery', () => {
+  const user1 = generateUser();
+
+  const getComponent = async (attachments = []) => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ attachments, user: user1 })],
+    });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    return (
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    );
+  };
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render two portrait images in two columns', async () => {
+    const attachment1 = generateImageAttachment({
+      original_height: 600,
+      original_width: 400,
+    });
+    const attachment2 = generateImageAttachment({
+      original_height: 700,
+      original_width: 400,
+    });
+    const component = await getComponent([attachment1, attachment2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      // expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+    });
+  });
+
+  it('should render portrait and landscape image in two rows', async () => {
+    const attachment1 = generateImageAttachment({
+      original_height: 600,
+      original_width: 400,
+    });
+    const attachment2 = generateImageAttachment({
+      original_height: 200,
+      original_width: 400,
+    });
+    const component = await getComponent([attachment1, attachment2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+    });
+  });
+
+  /**
+   *
+   * ----------
+   * |        |
+   * ----------
+   * |        |
+   * ----------
+   */
+  it('should render two landscape images in two rows', async () => {
+    const attachment1 = generateImageAttachment({
+      original_height: 200,
+      original_width: 400,
+    });
+    const attachment2 = generateImageAttachment({
+      original_height: 300,
+      original_width: 400,
+    });
+    const component = await getComponent([attachment1, attachment2]);
+    const { queryAllByTestId } = render(component);
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+    });
+  });
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * |    |----|
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render 3 images containing a portrait image in two columns, with portrait in its own column', async () => {
+    const portraitImage = generateImageAttachment({
+      original_height: 600,
+      original_width: 300,
+    });
+    const squareImage1 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const squareImage2 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+
+    const component = await getComponent([portraitImage, squareImage1, squareImage2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-column-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
+    });
+  });
+
+  /**
+   * -----------
+   * |         |
+   * |         |
+   * |---------|
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render 3 images containing a landscape image in two rows, with landscape in its own row', async () => {
+    const portraitImage = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+    const squareImage1 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const squareImage2 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+
+    const component = await getComponent([portraitImage, squareImage1, squareImage2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
+    });
+  });
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * -----------
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render 4 images in grid of two columns and 2 rows', async () => {
+    const image1 = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+    const image2 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const image3 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const image4 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+
+    const component = await getComponent([image1, image2, image3, image4]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-column-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-0-item-1').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
+    });
+  });
+});

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

@@ -0,0 +1,131 @@
+import { PixelRatio } from 'react-native';
+
+import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
+import { buildGallery } from '../utils/buildGallery/buildGallery';
+
+describe('buildGallery', () => {
+  const defaultSizeConfig = {
+    gridHeight: 100,
+    gridWidth: 200,
+    maxHeight: 300,
+    maxWidth: 350,
+    minHeight: 10,
+    minWidth: 20,
+  };
+
+  it('gallery size should not exceed max sizes provided by size config', () => {
+    const imageSizeTestCases = [
+      { original_height: 1000, original_width: 2000 },
+      { original_height: 100, original_width: 200 },
+      { original_height: 10, original_width: 20 },
+      { original_height: 200, original_width: 300 },
+    ];
+
+    imageSizeTestCases.forEach((size) => {
+      const attachments = [];
+      for (let numOfImages = 0; numOfImages < 4; numOfImages++) {
+        const a1 = generateImageAttachment({
+          ...size,
+        });
+
+        attachments.push(a1);
+
+        const { height, thumbnailGrid, width } = buildGallery({
+          images: attachments,
+          sizeConfig: defaultSizeConfig,
+        });
+
+        expect(height).toBeLessThanOrEqual(defaultSizeConfig.maxHeight);
+        expect(height).toBeGreaterThanOrEqual(defaultSizeConfig.minHeight);
+
+        expect(width).toBeLessThanOrEqual(defaultSizeConfig.maxWidth);
+        expect(width).toBeGreaterThanOrEqual(defaultSizeConfig.minWidth);
+
+        expect(thumbnailGrid[0][0].height).toBeLessThanOrEqual(height);
+        expect(thumbnailGrid[0][0].width).toBeLessThanOrEqual(width);
+      }
+    });
+  });
+
+  it('aspect ratio of gallery container should be same as that of original image', () => {
+    const sizeConfig = {
+      ...defaultSizeConfig,
+      maxHeight: 10000,
+      maxWidth: 10000,
+      minHeight: 0,
+      minWidth: 0,
+    };
+
+    const imageSizeTestCases = [
+      { original_height: 1000, original_width: 2000 },
+      { original_height: 100, original_width: 200 },
+      { original_height: 10, original_width: 20 },
+      { original_height: 200, original_width: 300 },
+    ];
+
+    imageSizeTestCases.forEach((size) => {
+      const a1 = generateImageAttachment({
+        ...size,
+      });
+
+      const { height, width } = buildGallery({
+        images: [a1],
+        sizeConfig,
+      });
+
+      const originalAspectRatio = size.original_width / size.original_height;
+      const resultingAspectRatio = width / height;
+      expect(originalAspectRatio).toBe(resultingAspectRatio);
+    });
+  });
+
+  it('gallery size should default to gridHeight and gridWidth if original image size is unavailable', () => {
+    const attachments = [];
+    for (let numOfImages = 0; numOfImages < 4; numOfImages++) {
+      // During each iteration, size of attachments goes up.
+      attachments.push(generateImageAttachment());
+      const { height, width } = buildGallery({
+        images: attachments,
+        sizeConfig: defaultSizeConfig,
+      });
+
+      expect(height).toBe(defaultSizeConfig.gridHeight);
+      expect(width).toBe(defaultSizeConfig.gridWidth);
+    }
+  });
+
+  it('thumbnail size should be smaller than the limits set by sizeConfig', () => {
+    const bigImage = generateImageAttachment({
+      image_url:
+        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+      original_height: 1200,
+      original_width: 900,
+    });
+
+    const { thumbnailGrid: tg1 } = buildGallery({
+      images: [bigImage],
+      sizeConfig: defaultSizeConfig,
+    });
+    const t1 = tg1[0][0];
+    expect(t1.url.includes(`h=${PixelRatio.getPixelSizeForLayoutSize(t1.height)}`)).toBe(true);
+    expect(t1.url.includes(`&w=${PixelRatio.getPixelSizeForLayoutSize(t1.width)}`)).toBe(true);
+    expect(t1.url.includes(`&resize=clip`)).toBe(true);
+
+    const smallImage = generateImageAttachment({
+      image_url:
+        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+      original_height: 30,
+      original_width: 20,
+    });
+
+    const { thumbnailGrid: tg2 } = buildGallery({
+      images: [smallImage],
+      sizeConfig: defaultSizeConfig,
+    });
+
+    const t2 = tg2[0][0];
+    expect(t2.url.includes(`h=*`)).toBe(true);
+    expect(t2.url.includes(`&w=*`)).toBe(true);
+    expect(t2.url.includes(`&resize=*`)).toBe(true);
+  });
+});

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

@@ -0,0 +1,75 @@
+import type { Attachment } from 'stream-chat';
+
+import { buildGalleryOfSingleImage } from './buildGalleryOfSingleImage';
+import { buildGalleryOfThreeImages } from './buildGalleryOfThreeImages';
+import { buildGalleryOfTwoImages } from './buildGalleryOfTwoImages';
+
+import { buildThumbnailGrid } from './buildThumbnailGrid';
+
+import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
+
+import type { DefaultAttachmentType, UnknownType } from '../../../../types/types';
+
+/**
+ * Builds and returns a gallery of optimized images to be rendered on UI.
+ * This function take a object parameter with following properties:
+ *
+ * @param {Attachment[]} images - Array of image attachments
+ * @param {GallerySizeConfig} sizeConfig - Theme config for the gallery
+ *
+ * The returned object contains following properties:
+ *
+ * - height {number[]} - Height of the gallery
+ * - width {number[]} - Width of the gallery
+ * - thumbnailGrid {number[][]} - Grid of thumbnail images
+ * - invertedDirections {boolean} - Whether to invert the direction of the grid. By default grid is rendered with column as primary direction and row as secondary direction.
+ *
+ * @return {GallerySizeAndThumbnailGrid}
+ */
+export function buildGallery<At extends UnknownType = DefaultAttachmentType>({
+  images,
+  sizeConfig,
+}: {
+  images: Attachment<At>[];
+  sizeConfig: GallerySizeConfig;
+}): GallerySizeAndThumbnailGrid {
+  if (images.length === 1) {
+    return buildGalleryOfSingleImage({
+      image: images[0],
+      sizeConfig,
+    });
+  }
+
+  if (images.length === 2) {
+    return buildGalleryOfTwoImages({
+      images,
+      sizeConfig,
+    });
+  }
+
+  if (images.length === 3) {
+    return buildGalleryOfThreeImages({
+      images,
+      sizeConfig,
+    });
+  }
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * -----------
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  return buildThumbnailGrid({
+    grid: [
+      [1, 1],
+      [1, 1],
+    ],
+    images: images.slice(0, 4),
+    invertedDirections: false,
+    sizeConfig,
+  });
+}

package/src/components/Attachment/utils/buildGallery/buildGalleryOfSingleImage.ts

@@ -0,0 +1,95 @@
+import type { Attachment } from 'stream-chat';
+
+import { buildThumbnail } from './buildThumbnail';
+
+import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
+
+import type { DefaultAttachmentType } from '../../../../types/types';
+import { getAspectRatio } from '../getAspectRatio';
+
+/**
+ * Bound a number to a range.
+ * @param number The number to bound.
+ * @param min The minimum value.
+ * @param max The maximum value.
+ *
+ * @returns The bounded number.
+ */
+function clamp(number: number, min: number, max: number) {
+  return Math.min(Math.max(number, min), max);
+}
+
+function getContainerSize<At extends DefaultAttachmentType = DefaultAttachmentType>({
+  image,
+  sizeConfig,
+}: {
+  image: Attachment<At>;
+  sizeConfig: GallerySizeConfig;
+}) {
+  const { original_height: height, original_width: width } = image;
+  const { gridHeight, gridWidth, maxHeight, maxWidth, minHeight, minWidth } = sizeConfig;
+
+  if (!height || !width) {
+    return { height: gridHeight, width: gridWidth };
+  }
+
+  const aspectRatio = getAspectRatio(image);
+
+  if (aspectRatio <= 1) {
+    const containerHeight = clamp(height, minHeight, maxHeight);
+    const containerWidth = clamp(containerHeight * aspectRatio, minWidth, maxWidth);
+
+    if (containerWidth === maxWidth) {
+      return {
+        height: clamp(containerWidth / aspectRatio, minHeight, maxHeight),
+        width: containerWidth,
+      };
+    }
+    return {
+      height: containerHeight,
+      width: containerWidth,
+    };
+  }
+
+  const containerWidth = clamp(width, minWidth, maxWidth);
+  const containerHeight = clamp(containerWidth / aspectRatio, minHeight, maxHeight);
+
+  if (containerHeight === maxHeight) {
+    return {
+      height: containerHeight,
+      width: clamp(containerHeight * aspectRatio, minHeight, maxHeight),
+    };
+  }
+
+  return {
+    height: containerHeight,
+    width: containerWidth,
+  };
+}
+
+export function buildGalleryOfSingleImage<
+  At extends DefaultAttachmentType = DefaultAttachmentType,
+>({
+  image,
+  sizeConfig,
+}: {
+  image: Attachment<At>;
+  sizeConfig: GallerySizeConfig;
+}): GallerySizeAndThumbnailGrid {
+  const container = getContainerSize({
+    image,
+    sizeConfig,
+  });
+
+  const thumbnail = buildThumbnail({
+    image,
+    ...container,
+  });
+
+  const column = [thumbnail];
+
+  return {
+    ...container,
+    thumbnailGrid: [column],
+  };
+}

package/src/components/Attachment/utils/buildGallery/buildGalleryOfThreeImages.ts

@@ -0,0 +1,99 @@
+import type { Attachment } from 'stream-chat';
+
+import { buildThumbnailGrid } from './buildThumbnailGrid';
+
+import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
+
+import type { DefaultAttachmentType } from '../../../../types/types';
+import { getAspectRatio } from '../getAspectRatio';
+
+/** function to move item to the front of the array */
+function moveToFront<T>(array: T[], item: T): T[] {
+  const index = array.indexOf(item);
+  if (index === -1) {
+    return array;
+  }
+  const newArray = [...array];
+  newArray.splice(index, 1);
+  newArray.unshift(item);
+  return newArray;
+}
+
+export function buildGalleryOfThreeImages<
+  At extends DefaultAttachmentType = DefaultAttachmentType,
+>({
+  images,
+  sizeConfig,
+}: {
+  images: Attachment<At>[];
+  sizeConfig: GallerySizeConfig;
+}): GallerySizeAndThumbnailGrid {
+  // Find the most ladscape and most portrait image.
+  const { landscapeImage, landscapeImageAspectRatio, portraitImage, portraitImageAspectRatio } =
+    images.reduce(
+      (acc, image) => {
+        const aspectRatio = getAspectRatio(image);
+        const o = { ...acc };
+
+        // Following nested if conditions can be combined, but have been kept
+        // separate intentionally for the sake of readability.
+        if (aspectRatio > 1) {
+          if (!o.landscapeImage || aspectRatio > o.landscapeImageAspectRatio) {
+            o.landscapeImage = image;
+            o.landscapeImageAspectRatio = aspectRatio;
+          }
+        } else {
+          if (!o.portraitImage || aspectRatio < o.portraitImageAspectRatio) {
+            o.portraitImage = image;
+            o.portraitImageAspectRatio = aspectRatio;
+          }
+        }
+
+        return o;
+      },
+      {
+        landscapeImageAspectRatio: 1,
+        portraitImageAspectRatio: 1,
+      } as {
+        landscapeImage: Attachment<At>;
+        landscapeImageAspectRatio: number;
+        portraitImage: Attachment<At>;
+        portraitImageAspectRatio: number;
+      },
+    );
+
+  // Check weather landscape image gets preference or portrait, by comparing aspect ratio.
+  if (landscapeImageAspectRatio > 1 / portraitImageAspectRatio) {
+    /**
+     * -----------
+     * |         |
+     * |         |
+     * |---------|
+     * |    |    |
+     * |    |    |
+     * -----------
+     */
+    return buildThumbnailGrid({
+      grid: [[1], [1, 1]],
+      images: landscapeImage ? moveToFront(images, landscapeImage) : images,
+      invertedDirections: true,
+      sizeConfig,
+    });
+  } else {
+    /**
+     * -----------
+     * |    |    |
+     * |    |    |
+     * |    |----|
+     * |    |    |
+     * |    |    |
+     * -----------
+     */
+    return buildThumbnailGrid({
+      grid: [[1], [1, 1]],
+      images: portraitImage ? moveToFront(images, portraitImage) : images,
+      invertedDirections: false,
+      sizeConfig,
+    });
+  }
+}

package/src/components/Attachment/utils/buildGallery/buildGalleryOfTwoImages.ts

@@ -0,0 +1,64 @@
+import type { Attachment } from 'stream-chat';
+
+import { buildThumbnailGrid } from './buildThumbnailGrid';
+
+import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
+
+import type { DefaultAttachmentType, UnknownType } from '../../../../types/types';
+import { getAspectRatio } from '../getAspectRatio';
+
+export function buildGalleryOfTwoImages<At extends UnknownType = DefaultAttachmentType>({
+  images,
+  sizeConfig,
+}: {
+  images: Attachment<At>[];
+  sizeConfig: GallerySizeConfig;
+}): GallerySizeAndThumbnailGrid {
+  const aspectRatio1 = getAspectRatio(images[0]);
+  const aspectRatio2 = getAspectRatio(images[1]);
+
+  // check if one image is landscape and other is portrait or vice versa
+  const isLandscape1 = aspectRatio1 > 1;
+  const isLandscape2 = aspectRatio2 > 1;
+
+  // Both the images are landscape
+  if (isLandscape1 && isLandscape2) {
+    /**
+     * ----------
+     * |        |
+     * ----------
+     * |        |
+     * ----------
+     */
+    return buildThumbnailGrid({
+      grid: [[1], [1]],
+      images,
+      invertedDirections: true,
+      sizeConfig,
+    });
+  }
+
+  if (!isLandscape1 && !isLandscape2) {
+    /**
+     * -----------
+     * |    |    |
+     * |    |    |
+     * |    |    |
+     * |    |    |
+     * -----------
+     */
+    return buildThumbnailGrid({
+      grid: [[1, 1]],
+      images,
+      invertedDirections: true,
+      sizeConfig,
+    });
+  }
+
+  return buildThumbnailGrid({
+    grid: [[2, 1]],
+    images: isLandscape1 ? images : images.reverse(),
+    invertedDirections: true,
+    sizeConfig,
+  });
+}