stream-chat-react-native-core 4.0.0-beta.1 → 4.0.0-beta.5

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,
+  });
+}

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

@@ -0,0 +1,46 @@
+import type { ImageResizeMode } from 'react-native';
+
+import type { Attachment } from 'stream-chat';
+
+import type { Thumbnail } from './types';
+
+import type { DefaultAttachmentType, UnknownType } from '../../../../types/types';
+
+import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
+import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
+
+export function buildThumbnail<At extends UnknownType = DefaultAttachmentType>({
+  height,
+  image,
+  resizeMode,
+  width,
+}: {
+  height: number;
+  image: Attachment<At>;
+  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,186 @@
+import type { Attachment } from 'stream-chat';
+
+import { buildThumbnail } from './buildThumbnail';
+import type { GallerySizeAndThumbnailGrid, GallerySizeConfig, ThumbnailGrid } from './types';
+
+import type { DefaultAttachmentType, UnknownType } 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<At extends UnknownType = DefaultAttachmentType>({
+  grid,
+  images,
+  invertedDirections = false,
+  sizeConfig,
+}: {
+  grid: number[][];
+  images: Attachment<At>[];
+  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,
+  };
+}

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

@@ -0,0 +1,27 @@
+import type { ImageResizeMode } from 'react-native';
+
+export type Thumbnail = {
+  height: number;
+  resizeMode: ImageResizeMode;
+  url: string;
+  width: number;
+  id?: string;
+};
+
+export type GallerySizeConfig = {
+  gridHeight: number;
+  gridWidth: number;
+  maxHeight: number;
+  maxWidth: number;
+  minHeight: number;
+  minWidth: number;
+};
+
+export type ThumbnailGrid = Thumbnail[][];
+
+export type GallerySizeAndThumbnailGrid = {
+  height: number;
+  thumbnailGrid: ThumbnailGrid;
+  width: number;
+  invertedDirections?: boolean;
+};

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

@@ -0,0 +1,21 @@
+import type { Attachment } from 'stream-chat';
+
+import type { DefaultAttachmentType, UnknownType } from '../../../types/types';
+
+/**
+ * Returns the aspect ratio of an image attachment.
+ *
+ * @param image Image attachment.
+ * @returns {number}
+ */
+export function getAspectRatio<At extends UnknownType = DefaultAttachmentType>(
+  image: Attachment<At>,
+) {
+  if (image.type !== 'image') {
+    throw new Error('getAspectRatio() can only be called on an image attachment');
+  }
+
+  if (!image.original_width || !image.original_height) return 1;
+
+  return image.original_width / image.original_height;
+}

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

@@ -0,0 +1,71 @@
+import type { GallerySizeConfig } from './buildGallery/types';
+
+import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+
+type Params = {
+  colIndex: number;
+  numOfColumns: number;
+  numOfRows: number;
+  rowIndex: number;
+  sizeConfig: GallerySizeConfig;
+  hasThreadReplies?: boolean;
+  height?: number;
+  invertedDirections?: boolean;
+  messageText?: string;
+  threadList?: boolean;
+  width?: number;
+} & Pick<MessageContextValue, 'groupStyles' | 'alignment'>;
+
+export function getGalleryImageBorderRadius({
+  alignment,
+  colIndex,
+  groupStyles,
+  hasThreadReplies,
+  height,
+  invertedDirections,
+  messageText,
+  numOfColumns,
+  numOfRows,
+  rowIndex,
+  sizeConfig,
+  threadList,
+  width,
+}: Params) {
+  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  const isSingleImage = numOfColumns === 1 && numOfRows === 1;
+  const isImageSmallerThanMinContainerSize =
+    isSingleImage &&
+    height &&
+    width &&
+    ((height > width && width === sizeConfig.minWidth) ||
+      (height < width && height === sizeConfig.minHeight));
+  const topLeftEdgeExposed = colIndex === 0 && rowIndex === 0;
+  const bottomLeftEdgeExposed =
+    (!invertedDirections && colIndex === 0 && rowIndex === numOfRows - 1) ||
+    (invertedDirections && colIndex === numOfColumns - 1 && rowIndex === 0);
+  const topRightEdgeExposed =
+    (!invertedDirections && colIndex === numOfColumns - 1 && rowIndex === 0) ||
+    (invertedDirections && colIndex === 0 && rowIndex === numOfRows - 1);
+  const bottomRightEdgeExposed = colIndex === numOfColumns && rowIndex === numOfRows - 1;
+
+  return {
+    borderBottomLeftRadius:
+      !isImageSmallerThanMinContainerSize &&
+      bottomLeftEdgeExposed &&
+      !messageText &&
+      ((groupStyle !== 'left_bottom' && groupStyle !== 'left_single') ||
+        (hasThreadReplies && !threadList))
+        ? 14
+        : 0,
+    borderBottomRightRadius:
+      !isImageSmallerThanMinContainerSize &&
+      bottomRightEdgeExposed &&
+      !messageText &&
+      ((groupStyle !== 'right_bottom' && groupStyle !== 'right_single') ||
+        (hasThreadReplies && !threadList))
+        ? 14
+        : 0,
+    borderTopLeftRadius: !isImageSmallerThanMinContainerSize && topLeftEdgeExposed ? 14 : 0,
+    borderTopRightRadius: !isImageSmallerThanMinContainerSize && topRightEdgeExposed ? 14 : 0,
+  };
+}