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

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,77 @@
+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 { DefaultStreamChatGenerics } 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<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  images,
+  sizeConfig,
+}: {
+  images: Attachment<StreamChatGenerics>[];
+  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,91 @@
+import type { Attachment } from 'stream-chat';
+
+import { buildThumbnail } from './buildThumbnail';
+
+import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
+
+import type { DefaultStreamChatGenerics } 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<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({ image, sizeConfig }: { image: Attachment<StreamChatGenerics>; 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<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  image,
+  sizeConfig,
+}: {
+  image: Attachment<StreamChatGenerics>;
+  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 { DefaultStreamChatGenerics } 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<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  images,
+  sizeConfig,
+}: {
+  images: Attachment<StreamChatGenerics>[];
+  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<StreamChatGenerics>;
+        landscapeImageAspectRatio: number;
+        portraitImage: Attachment<StreamChatGenerics>;
+        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,66 @@
+import type { Attachment } from 'stream-chat';
+
+import { buildThumbnailGrid } from './buildThumbnailGrid';
+
+import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
+
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import { getAspectRatio } from '../getAspectRatio';
+
+export function buildGalleryOfTwoImages<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  images,
+  sizeConfig,
+}: {
+  images: Attachment<StreamChatGenerics>[];
+  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,
+  });
+}

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

@@ -0,0 +1,48 @@
+import type { ImageResizeMode } from 'react-native';
+
+import type { Attachment } from 'stream-chat';
+
+import type { Thumbnail } from './types';
+
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
+import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
+import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
+
+export function buildThumbnail<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  height,
+  image,
+  resizeMode,
+  width,
+}: {
+  height: number;
+  image: Attachment<StreamChatGenerics>;
+  width: number;
+  resizeMode?: ImageResizeMode;
+}): Thumbnail {
+  const { original_height: originalImageHeight, original_width: originalImageWidth } = image;
+
+  // Only resize if the original image is larger than the thumbnail container size.
+  const shouldResize =
+    originalImageHeight && originalImageWidth
+      ? originalImageHeight + originalImageWidth > height + width
+      : true;
+  const imageUrl = getUrlOfImageAttachment(image) as string;
+
+  return {
+    height,
+    resizeMode: resizeMode
+      ? resizeMode
+      : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode),
+    url: shouldResize
+      ? getResizedImageUrl({
+          height,
+          url: imageUrl,
+          width,
+        })
+      : imageUrl,
+    width,
+  };
+}

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

@@ -0,0 +1,188 @@
+import type { Attachment } from 'stream-chat';
+
+import { buildThumbnail } from './buildThumbnail';
+import type { GallerySizeAndThumbnailGrid, GallerySizeConfig, ThumbnailGrid } from './types';
+
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
+/**
+ * Builds a grid of thumbnail images from image attachments.
+ * This function take a object parameter with following properties:
+ *
+ * @params
+ *
+ * - {number[][]} grid - Grid pattern of the gallery. Each numeric value in the array represents the flex value of corresponding image in grid.
+ * - {Attachment[]} images - Array of image attachments.
+ * - {GallerySizeConfig} sizeConfig - Theme config for the gallery.
+ * - {boolean} invertedDirections - Whether to invert the direction of the grid. By default grid is rendered with column as primary direction and row as secondary direction.
+ *
+ * @usage
+ *
+ * ```
+ * const { thumbnailGrid, invertedDirection } = buildThumbnailGrid({
+ *  grid: [[1], [1]],
+ *  images: [image1, image2],
+ *  sizeConfig: {
+ *    gridHeight: 200,
+ *    gridWidth: 200,
+ *    maxHeight: 200,
+ *    maxWidth: 200,
+ *    minHeight: 200,
+ *    minWidth: 200,
+ *  },
+ * })
+ *
+ * Rendering logic on UI:
+ *
+ * ```
+ * <View style={{ flexDirection: invertedDirection ? 'row' : 'column }}>
+ * {
+ *  thumbnailGrid.forEach(rows => {
+ *    return (
+ *      <View style={{ flexDirection: invertedDirection ? 'column' : 'row' }}>
+ *       {
+ *        rows.forEach(thumbnail => (
+ *          <Image
+ *            source={{ uri: thumbnail.url }}
+ *            resizeMode={thumbnail.resizeMode}
+ *            width={thumbnail.width}
+ *            height={thumbnail.height}
+ *          />
+ *       ))}
+ *      </View>
+ *    )});
+ * }
+ * </View>
+ * ```
+ *
+ * Lets look at different examples of grid and invertedDirections param:
+ *
+ * EXAMPLE 1:
+ *
+ * ```
+ * {
+ *  grid: [[2, 1], [2, 1]]
+ *  invertedDirections: false
+ * }
+ * ```
+ *
+ * Resulting thumbnail grid on rendered UI:
+ *
+ *  __________________
+ * |            |     |
+ * |            |     |
+ * |------------------|
+ * |            |     |
+ * |            |     |
+ *  ------------------
+ *
+ * EXAMPLE 2:
+ *
+ * ```
+ * {
+ *  grid: [[2, 1], [2, 1]]
+ *  invertedDirections: true
+ * }
+ * ```
+ * Resulting thumbnail grid on rendered UI:
+ *  __________________
+ * |         |        |
+ * |         |        |
+ * |         |        |
+ * |         |        |
+ * |------------------|
+ * |         |        |
+ * |         |        |
+ *  ------------------
+ *
+ * EXAMPLE 3:
+ *
+ * ```
+ * {
+ *  grid: [[2, 1]]
+ *  invertedDirections: false
+ * }
+ * ```
+ * Resulting thumbnail grid on rendered UI:
+ *  __________________
+ * |                  |
+ * |                  |
+ * |                  |
+ * |                  |
+ * |------------------|
+ * |                  |
+ * |                  |
+ *  ------------------
+ *
+ * EXAMPLE 4:
+ *
+ * ```
+ * {
+ *  grid: [[2, 1]]
+ *  invertedDirections: true
+ * }
+ * ```
+ * Resulting thumbnail grid on rendered UI:
+ *  __________________
+ * |            |     |
+ * |            |     |
+ * |            |     |
+ * |            |     |
+ * |            |     |
+ *  ------------------
+ *
+ * @return {GallerySizeAndThumbnailGrid}
+ */
+export function buildThumbnailGrid<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  grid,
+  images,
+  invertedDirections = false,
+  sizeConfig,
+}: {
+  grid: number[][];
+  images: Attachment<StreamChatGenerics>[];
+  invertedDirections: boolean;
+  sizeConfig: GallerySizeConfig;
+}): GallerySizeAndThumbnailGrid {
+  const { gridHeight, gridWidth } = sizeConfig;
+
+  let imageIndex = 0;
+  const thumbnailGrid: ThumbnailGrid = [];
+  const numOfColumns = grid.length;
+  grid.forEach((rows, colIndex) => {
+    const totalFlexValue = rows.reduce((acc, curr) => acc + curr, 0);
+
+    rows.forEach((flexValue) => {
+      const tHeight = invertedDirections
+        ? gridHeight / numOfColumns
+        : gridHeight * (flexValue / totalFlexValue);
+
+      const tWidth = invertedDirections
+        ? gridWidth * (flexValue / totalFlexValue)
+        : gridWidth / numOfColumns;
+
+      const currentImage = images[imageIndex];
+      const thumbnail = buildThumbnail({
+        height: tHeight,
+        image: currentImage,
+        resizeMode: 'cover',
+        width: tWidth,
+      });
+
+      if (!thumbnailGrid[colIndex]) {
+        thumbnailGrid[colIndex] = [];
+      }
+
+      thumbnailGrid[colIndex].push(thumbnail);
+      imageIndex++;
+    });
+  });
+  return {
+    height: gridHeight,
+    invertedDirections,
+    thumbnailGrid,
+    width: gridWidth,
+  };
+}