stream-chat-react-native-core 9.4.0-beta.9 → 9.4.0

package/src/components/ChannelDetails/components/navigation-section/FileAttachmentList.tsx

@@ -0,0 +1,204 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  SectionList,
+  type SectionListProps,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import type { MessageResponse, SearchSourceState } from 'stream-chat';
+
+import { FileAttachmentListLoadingSkeleton } from './FileAttachmentListLoadingSkeleton';
+import { FileAttachmentListSectionHeader } from './FileAttachmentListSectionHeader';
+
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  ChannelFileAttachmentListProvider,
+  useChannelFileAttachmentListContext,
+} from '../../../../contexts/channelFileAttachmentListContext/ChannelFileAttachmentListContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
+import { useStateStore } from '../../../../hooks/useStateStore';
+import { Folder } from '../../../../icons/folder';
+import { primitives } from '../../../../theme';
+import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
+import { NotificationList } from '../../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../../Notifications/NotificationTargetContext';
+import { EmptyList } from '../../../UIComponents/EmptyList';
+import {
+  type FileAttachmentSection,
+  type FileAttachmentTile,
+  useFileAttachmentListSections,
+} from '../../hooks/useFileAttachmentListSections';
+
+export type FileAttachmentListProps = {
+  /**
+   * Besides the existing default behavior of the file attachment list, you can attach
+   * additional props to the underlying React Native SectionList.
+   *
+   * See https://reactnative.dev/docs/sectionlist#props for the full list.
+   */
+  additionalSectionListProps?: Partial<SectionListProps<FileAttachmentTile, FileAttachmentSection>>;
+};
+
+const keyExtractor = (item: FileAttachmentTile, index: number) => `${item.message.id}-${index}`;
+
+const listStateSelector = (state: SearchSourceState<MessageResponse>) => ({
+  error: state.lastQueryError,
+  hasNext: state.hasNext,
+  loading: state.isLoading,
+  messages: state.items,
+});
+
+const FileAttachmentListContent = ({ additionalSectionListProps }: FileAttachmentListProps) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: { fileAttachmentList },
+    },
+  } = useTheme();
+  const styles = useStyles();
+  const { FileAttachmentItem } = useComponentsContext();
+
+  const { addNotification } = useNotificationApi();
+
+  const { channel, searchSource } = useChannelFileAttachmentListContext();
+  const { error, hasNext, loading, messages } = useStateStore(
+    searchSource.state,
+    listStateSelector,
+  );
+
+  const initialized = useRef(false);
+  useEffect(() => {
+    if (!initialized.current) {
+      initialized.current = true;
+      searchSource.search();
+    }
+  }, [searchSource]);
+
+  const [isEmpty, setIsEmpty] = useState<boolean | undefined>(undefined);
+  useEffect(() => {
+    if (!messages || isEmpty !== undefined) {
+      return;
+    }
+    if (messages.length === 0) {
+      setIsEmpty(true);
+    } else {
+      setIsEmpty(false);
+    }
+  }, [isEmpty, messages]);
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+    addNotification({
+      message: t('Failed to load files'),
+      options: {
+        ...getNotificationErrorOptions(error),
+        severity: 'error',
+        type: 'api:channel:query-file-attachments:failed',
+      },
+      origin: { context: { channel }, emitter: 'ChannelFileAttachmentList' },
+    });
+  }, [error, addNotification, channel, t]);
+
+  const sections = useFileAttachmentListSections(messages);
+
+  const renderItem = useCallback(
+    ({ item }: { item: FileAttachmentTile }) => (
+      <FileAttachmentItem attachment={item.attachment} message={item.message} />
+    ),
+    [FileAttachmentItem],
+  );
+
+  const renderSectionHeader = useCallback(
+    ({ section }: { section: FileAttachmentSection }) => (
+      <FileAttachmentListSectionHeader title={section.title} />
+    ),
+    [],
+  );
+
+  const loadMore = useCallback(() => {
+    // hasNext is true by default, !!messages prevents calling search on initial load
+    if (hasNext && !!messages) {
+      searchSource.search();
+    }
+  }, [hasNext, messages, searchSource]);
+
+  const emptyState =
+    loading || isEmpty === undefined ? (
+      <FileAttachmentListLoadingSkeleton />
+    ) : (
+      <EmptyList icon={Folder} subtitle={t('Share a file to see it here')} title={t('No files')} />
+    );
+
+  const loadingMoreIndicator = (
+    <>{loading && messages && messages.length > 0 && <ActivityIndicator />}</>
+  );
+
+  return (
+    <View style={[styles.container, fileAttachmentList.container]}>
+      <SectionList
+        contentContainerStyle={[styles.listContent, fileAttachmentList.listContent]}
+        keyboardDismissMode='interactive'
+        keyboardShouldPersistTaps='handled'
+        keyExtractor={keyExtractor}
+        ListEmptyComponent={emptyState}
+        ListFooterComponent={loadingMoreIndicator}
+        onEndReached={loadMore}
+        onEndReachedThreshold={0.2}
+        renderItem={renderItem}
+        renderSectionHeader={renderSectionHeader}
+        sections={sections}
+        stickySectionHeadersEnabled
+        style={[styles.list, fileAttachmentList.list]}
+        testID='file-attachment-list'
+        {...additionalSectionListProps}
+      />
+      <NotificationList />
+    </View>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const FileAttachmentList = (props: FileAttachmentListProps) => {
+  const { channel } = useChannelDetailsContext();
+  const notificationHostId = channel?.cid ? `file-attachment-list:${channel.cid}` : undefined;
+
+  if (!notificationHostId) {
+    return null;
+  }
+
+  return (
+    <ChannelFileAttachmentListProvider channel={channel}>
+      <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+        <FileAttachmentListContent {...props} />
+      </NotificationTargetProvider>
+    </ChannelFileAttachmentListProvider>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+        list: {
+          flex: 1,
+        },
+        listContent: {
+          flexGrow: 1,
+          paddingBottom: primitives.spacingXl,
+        },
+      }),
+    [],
+  );
+};

package/src/components/ChannelDetails/components/navigation-section/FileAttachmentListLoadingSkeleton.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { GenericListLoadingSkeleton } from '../../../UIComponents/GenericListLoadingSkeleton';
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const FileAttachmentListLoadingSkeleton = () => {
+  const {
+    theme: { fileAttachmentListSkeleton },
+  } = useTheme();
+
+  return (
+    <GenericListLoadingSkeleton
+      skeleton={fileAttachmentListSkeleton}
+      testID='file-attachment-list-loading-skeleton'
+    />
+  );
+};
+
+FileAttachmentListLoadingSkeleton.displayName =
+  'FileAttachmentListLoadingSkeleton{fileAttachmentListSkeleton}';

package/src/components/ChannelDetails/components/navigation-section/FileAttachmentListSectionHeader.tsx

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../../theme';
+
+export type FileAttachmentListSectionHeaderProps = {
+  /** The already-formatted section title (e.g. "March 2026"). */
+  title: string;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const FileAttachmentListSectionHeader = ({
+  title,
+}: FileAttachmentListSectionHeaderProps) => {
+  const {
+    theme: {
+      channelDetails: { fileAttachmentList },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <View style={[styles.container, fileAttachmentList.sectionHeader]}>
+      <Text style={[styles.text, fileAttachmentList.sectionHeaderText]}>{title}</Text>
+    </View>
+  );
+};
+
+FileAttachmentListSectionHeader.displayName = 'FileAttachmentListSectionHeader{fileAttachmentList}';
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          backgroundColor: semantics.backgroundCoreSurfaceSubtle,
+          paddingHorizontal: primitives.spacingMd,
+          paddingVertical: primitives.spacingXs,
+        },
+        text: {
+          color: semantics.chatTextSystem,
+          fontSize: primitives.typographyFontSizeSm,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
+        },
+      }),
+    [semantics],
+  );
+};

package/src/components/ChannelDetails/components/navigation-section/MediaItem.tsx

@@ -0,0 +1,160 @@
+import React, { useMemo, useRef } from 'react';
+import { findNodeHandle, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { Attachment, MessageResponse } from 'stream-chat';
+
+import { useChatConfigContext } from '../../../../contexts/chatConfigContext/ChatConfigContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { Recorder } from '../../../../icons/video-fill';
+import { primitives } from '../../../../theme';
+import { FileTypes } from '../../../../types/types';
+import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
+import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
+import { getDurationLabelFromDuration } from '../../../../utils/utils';
+import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
+
+/**
+ * The shape passed to `MediaItem`'s `onPress` callback, identifying the rendered attachment, the
+ * message it belongs to, and the tile's native node handle (used as the open-animation origin when
+ * launching the fullscreen image gallery).
+ *
+ * @experimental This type is experimental and is subject to change.
+ */
+export type MediaItemPressParams = {
+  attachment: Attachment;
+  message: MessageResponse;
+  requesterNode: number | null;
+};
+
+export type MediaItemProps = {
+  /** The image/video attachment rendered by this tile. */
+  attachment: Attachment;
+  /** The message the attachment belongs to. */
+  message: MessageResponse;
+  /** Side length of the square tile, in points. */
+  size: number;
+  /**
+   * Fired with the tile's attachment and message when the tile is pressed. The media list passes
+   * its gallery-opening handler here via `renderItem`.
+   */
+  onPress?: (params: MediaItemPressParams) => void;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const MediaItem = (props: MediaItemProps) => {
+  const { ImageComponent: Image } = useComponentsContext();
+  const { attachment, message, onPress, size } = props;
+  const {
+    theme: {
+      channelDetails: { mediaItem },
+      semantics,
+    },
+  } = useTheme();
+  const { resizableCDNHosts } = useChatConfigContext();
+  const styles = useStyles();
+  const containerRef = useRef<View>(null);
+
+  const isVideo = attachment.type === FileTypes.Video;
+  const url = attachment.thumb_url || getUrlOfImageAttachment(attachment);
+  const thumbnailUrl = url
+    ? getResizedImageUrl({ height: size, resizableCDNHosts, url, width: size })
+    : undefined;
+  const durationLabel = isVideo
+    ? getDurationLabelFromDuration(attachment.duration ?? 0)
+    : undefined;
+
+  return (
+    <Pressable
+      onPress={
+        onPress
+          ? () =>
+              onPress({ attachment, message, requesterNode: findNodeHandle(containerRef.current) })
+          : undefined
+      }
+      ref={containerRef}
+      style={[
+        styles.container,
+        { backgroundColor: semantics.backgroundCoreSurfaceStrong, width: size },
+        mediaItem.container,
+      ]}
+      testID={`media-item-${message.id}`}
+    >
+      {thumbnailUrl ? (
+        <Image
+          source={{ uri: thumbnailUrl }}
+          style={[styles.thumbnail, mediaItem.thumbnail]}
+          testID='media-item-thumbnail'
+        />
+      ) : null}
+      {message.user ? (
+        <UserAvatar size='sm' style={[styles.avatar, mediaItem.avatar]} user={message.user} />
+      ) : null}
+      {isVideo ? (
+        <View
+          style={[
+            styles.videoBadge,
+            { backgroundColor: semantics.badgeBgInverse },
+            mediaItem.videoBadge,
+          ]}
+        >
+          <Recorder fill={semantics.badgeTextOnInverse} size={12} />
+          <Text
+            style={[
+              styles.videoBadgeText,
+              { color: semantics.badgeTextOnInverse },
+              mediaItem.videoBadgeText,
+            ]}
+          >
+            {durationLabel}
+          </Text>
+        </View>
+      ) : null}
+    </Pressable>
+  );
+};
+
+MediaItem.displayName = 'MediaItem{mediaItem}';
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        avatar: {
+          left: primitives.spacingXs,
+          position: 'absolute',
+          top: primitives.spacingXs,
+        },
+        container: {
+          aspectRatio: 1,
+          borderRadius: primitives.radiusXxs,
+          overflow: 'hidden',
+        },
+        thumbnail: {
+          bottom: 0,
+          left: 0,
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        },
+        videoBadge: {
+          alignItems: 'center',
+          borderRadius: primitives.radiusMax,
+          bottom: primitives.spacingXs,
+          flexDirection: 'row',
+          gap: primitives.spacingXxs,
+          left: primitives.spacingXs,
+          paddingHorizontal: primitives.spacingXs,
+          paddingVertical: primitives.spacingXxs,
+          position: 'absolute',
+        },
+        videoBadgeText: {
+          fontSize: primitives.typographyFontSizeXxs,
+          fontWeight: primitives.typographyFontWeightBold,
+        },
+      }),
+    [],
+  );
+};

package/src/components/ChannelDetails/components/navigation-section/MediaList.tsx

@@ -0,0 +1,244 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  type FlatListProps,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+
+import { formatMessage, type MessageResponse, type SearchSourceState } from 'stream-chat';
+
+import { type MediaItemPressParams } from './MediaItem';
+import { MediaListLoadingSkeleton } from './MediaListLoadingSkeleton';
+
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  ChannelMediaListProvider,
+  useChannelMediaListContext,
+} from '../../../../contexts/channelMediaListContext/ChannelMediaListContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useImageGalleryContext } from '../../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useOverlayContext } from '../../../../contexts/overlayContext/OverlayContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
+import { useStateStore } from '../../../../hooks/useStateStore';
+import { Picture } from '../../../../icons/image';
+import { isVideoPlayerAvailable } from '../../../../native';
+import { primitives } from '../../../../theme';
+import { FileTypes } from '../../../../types/types';
+import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
+import { openUrlSafely } from '../../../Attachment/utils/openUrlSafely';
+import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
+import { NotificationList } from '../../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../../Notifications/NotificationTargetContext';
+import { EmptyList } from '../../../UIComponents/EmptyList';
+import { type MediaTile, useMediaList } from '../../hooks/useMediaList';
+
+const NUMBER_OF_COLUMNS = 3;
+const GRID_GAP = primitives.spacingXxxs;
+
+export type MediaListProps = {
+  /**
+   * Besides the existing default behavior of the media list, you can attach additional props to
+   * the underlying React Native FlatList.
+   *
+   * See https://reactnative.dev/docs/flatlist#props for the full list.
+   */
+  additionalFlatListProps?: Partial<FlatListProps<MediaTile>>;
+};
+
+const keyExtractor = (item: MediaTile, index: number) => `${item.message.id}-${index}`;
+
+const listStateSelector = (state: SearchSourceState<MessageResponse>) => ({
+  error: state.lastQueryError,
+  hasNext: state.hasNext,
+  loading: state.isLoading,
+  messages: state.items,
+});
+
+const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: { mediaList },
+    },
+  } = useTheme();
+  const styles = useStyles();
+  const { width } = useWindowDimensions();
+  const { MediaItem } = useComponentsContext();
+
+  const { addNotification } = useNotificationApi();
+
+  const { channel, searchSource } = useChannelMediaListContext();
+  const { imageGalleryStateStore } = useImageGalleryContext();
+  const { setOverlay } = useOverlayContext();
+  const { error, hasNext, loading, messages } = useStateStore(
+    searchSource.state,
+    listStateSelector,
+  );
+
+  const initialized = useRef(false);
+  useEffect(() => {
+    if (!initialized.current) {
+      initialized.current = true;
+      searchSource.search();
+    }
+  }, [searchSource]);
+
+  const [isEmpty, setIsEmpty] = useState<boolean | undefined>(undefined);
+  useEffect(() => {
+    if (!messages || isEmpty !== undefined) {
+      return;
+    }
+    if (messages.length === 0) {
+      setIsEmpty(true);
+    } else {
+      setIsEmpty(false);
+    }
+  }, [isEmpty, messages]);
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+    addNotification({
+      message: t('Failed to load media'),
+      options: {
+        ...getNotificationErrorOptions(error),
+        severity: 'error',
+        type: 'api:channel:query-media:failed',
+      },
+      origin: { context: { channel }, emitter: 'ChannelMediaList' },
+    });
+  }, [error, addNotification, channel, t]);
+
+  const tiles = useMediaList(messages);
+
+  // Tile side length: full width minus the inter-column gaps, split across the columns.
+  const tileSize = useMemo(
+    () => (width - GRID_GAP * (NUMBER_OF_COLUMNS - 1)) / NUMBER_OF_COLUMNS,
+    [width],
+  );
+
+  // Opens the fullscreen gallery over the whole loaded collection, selecting the tapped attachment.
+  // Mirrors the in-message gallery (`components/Attachment/Gallery.tsx`), but passes every loaded
+  // message so the viewer can swipe across all media in the list rather than a single message.
+  const handlePressItem = useCallback(
+    ({ attachment, requesterNode }: MediaItemPressParams) => {
+      const url = getUrlOfImageAttachment(attachment);
+      if (!url) {
+        return;
+      }
+      if (attachment.type === FileTypes.Video && !isVideoPlayerAvailable()) {
+        // Safeguard for customizations that render videos without a player installed.
+        openUrlSafely(url);
+        return;
+      }
+      imageGalleryStateStore.openImageGallery({
+        messages: messages?.map((message) => formatMessage(message)) ?? [],
+        requesterNode,
+        selectedAttachmentUrl: url,
+      });
+      setOverlay('gallery');
+    },
+    [imageGalleryStateStore, messages, setOverlay],
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: MediaTile }) => (
+      <MediaItem
+        attachment={item.attachment}
+        message={item.message}
+        onPress={handlePressItem}
+        size={tileSize}
+      />
+    ),
+    [handlePressItem, tileSize, MediaItem],
+  );
+
+  const loadMore = useCallback(() => {
+    // hasNext is true by default, !!messages prevents calling search on initial load
+    if (hasNext && !!messages) {
+      searchSource.search();
+    }
+  }, [hasNext, messages, searchSource]);
+
+  const emptyState =
+    loading || isEmpty === undefined ? (
+      <MediaListLoadingSkeleton />
+    ) : (
+      <EmptyList
+        icon={Picture}
+        subtitle={t('Share a photo or video to see it here')}
+        title={t('No photos or videos')}
+      />
+    );
+
+  const loadingMoreIndicator = <>{loading && tiles.length > 0 && <ActivityIndicator />}</>;
+
+  return (
+    <View style={[styles.container, mediaList.container]}>
+      <FlatList
+        columnWrapperStyle={tiles.length > 0 ? styles.columnWrapper : undefined}
+        contentContainerStyle={[styles.listContent, mediaList.listContent]}
+        data={tiles}
+        keyExtractor={keyExtractor}
+        ListEmptyComponent={emptyState}
+        ListFooterComponent={loadingMoreIndicator}
+        numColumns={NUMBER_OF_COLUMNS}
+        onEndReached={loadMore}
+        onEndReachedThreshold={0.2}
+        renderItem={renderItem}
+        style={[styles.list, mediaList.list]}
+        testID='media-list'
+        {...additionalFlatListProps}
+      />
+      <NotificationList />
+    </View>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const MediaList = (props: MediaListProps) => {
+  const { channel } = useChannelDetailsContext();
+  const notificationHostId = channel?.cid ? `media-list:${channel.cid}` : undefined;
+
+  if (!notificationHostId) {
+    return null;
+  }
+
+  return (
+    <ChannelMediaListProvider channel={channel}>
+      <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+        <MediaListContent {...props} />
+      </NotificationTargetProvider>
+    </ChannelMediaListProvider>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        columnWrapper: {
+          gap: GRID_GAP,
+        },
+        container: {
+          flex: 1,
+        },
+        list: {
+          flex: 1,
+        },
+        listContent: {
+          flexGrow: 1,
+          gap: GRID_GAP,
+        },
+      }),
+    [],
+  );
+};