Attachment previews

import { Pressable, StyleSheet, View } from "react-native";
import type { LocalImageAttachment, LocalVideoAttachment } from "stream-chat";
import {
  useComponentsContext,
  usePendingUploadsEnabled,
  useTheme,
} from "stream-chat-react-native";
import type {
  ImageAttachmentUploadPreviewProps,
  UploadAttachmentPreviewProps,
} from "stream-chat-react-native";

type SquarePreviewProps = UploadAttachmentPreviewProps<
  LocalImageAttachment | LocalVideoAttachment
> & {
  isVideo?: boolean;
  uri: string;
};

const SquarePreview = ({
  attachment,
  handleRetry,
  isVideo,
  removeAttachments,
  uri,
}: SquarePreviewProps) => {
  const {
    icons,
    ImageComponent,
    ImageUploadInProgressIndicator,
    ImageUploadNotSupportedIndicator,
    ImageUploadRetryIndicator,
  } = useComponentsContext();
  const pendingUploadsEnabled = usePendingUploadsEnabled();
  const {
    theme: { semantics },
  } = useTheme();
  const { id, previewUri, uploadState } = attachment.localMetadata;

  return (
    <View style={styles.container}>
      <View
        style={[styles.thumbnail, { borderColor: semantics.borderCoreDefault }]}
      >
        <ImageComponent source={{ uri }} style={StyleSheet.absoluteFill} />
        {isVideo ? (
          <icons.Play
            height={16}
            pathFill={semantics.textOnInverse}
            width={16}
          />
        ) : null}
        {!pendingUploadsEnabled && uploadState === "uploading" ? (
          <ImageUploadInProgressIndicator localId={id} sourceUrl={previewUri} />
        ) : null}
        {!pendingUploadsEnabled && uploadState === "failed" ? (
          <ImageUploadRetryIndicator
            onRetryHandler={() => handleRetry(attachment)}
          />
        ) : null}
        {uploadState === "blocked" ? (
          <ImageUploadNotSupportedIndicator />
        ) : null}
      </View>
      <Pressable
        accessibilityLabel="Remove attachment"
        accessibilityRole="button"
        hitSlop={12}
        onPress={() => removeAttachments([id])}
        style={[
          styles.remove,
          { backgroundColor: semantics.controlRemoveControlBg },
        ]}
      >
        <icons.NewClose
          height={12}
          stroke={semantics.controlRemoveControlIcon}
          width={12}
        />
      </Pressable>
    </View>
  );
};

export const SquareImagePreview = (
  props: ImageAttachmentUploadPreviewProps,
) => {
  const { attachment } = props;
  // The local file, or the uploaded image when the composer was restored from a draft or an edit.
  const uri = attachment.localMetadata.previewUri ?? attachment.image_url;

  return uri ? <SquarePreview {...props} uri={uri} /> : null;
};

export const SquareVideoPreview = (
  props: UploadAttachmentPreviewProps<LocalVideoAttachment>,
) => {
  const { FileAttachmentUploadPreview } = useComponentsContext();
  const { thumb_url } = props.attachment;

  // A video without a thumbnail from its picker shows as a file row.
  return thumb_url ? (
    <SquarePreview {...props} isVideo uri={thumb_url} />
  ) : (
    <FileAttachmentUploadPreview {...props} />
  );
};

const styles = StyleSheet.create({
  container: { padding: 4 },
  remove: {
    borderRadius: 10,
    padding: 2,
    position: "absolute",
    right: 0,
    top: 0,
  },
  thumbnail: {
    alignItems: "center",
    borderRadius: 8,
    borderWidth: 1,
    height: 48,
    justifyContent: "center",
    overflow: "hidden",
    width: 48,
  },
});

import { StyleSheet, Text, View } from "react-native";
import type { CircularProgressIndicatorProps } from "stream-chat-react-native";

export const UploadPercentRing = ({
  filledColor,
  progress,
  size = 16,
  style,
  testID,
}: CircularProgressIndicatorProps) => (
  <View
    style={[styles.container, { minHeight: size, minWidth: size }, style]}
    testID={testID}
  >
    <Text style={[styles.percent, { color: filledColor }]}>
      {Math.round(progress)}%
    </Text>
  </View>
);

const styles = StyleSheet.create({
  container: { alignItems: "center", justifyContent: "center" },
  percent: { fontSize: 11, fontVariant: ["tabular-nums"], fontWeight: "600" },
});

import { Pressable, StyleSheet, Text, View } from "react-native";
import { isLocalVoiceRecordingAttachment } from "stream-chat";
import {
  AudioAttachmentUploadPreview,
  useComponentsContext,
  usePendingUploadsEnabled,
  useTheme,
} from "stream-chat-react-native";
import type { AudioAttachmentUploadPreviewProps } from "stream-chat-react-native";

const formatDuration = (seconds = 0) => {
  const total = Math.round(seconds);
  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
};

export const CompactVoiceRecordingPreview = (
  props: AudioAttachmentUploadPreviewProps,
) => {
  const { attachment, handleRetry, removeAttachments } = props;
  const { icons } = useComponentsContext();
  const pendingUploadsEnabled = usePendingUploadsEnabled();
  const {
    theme: { semantics },
  } = useTheme();

  // Audio files keep the SDK's player.
  if (!isLocalVoiceRecordingAttachment(attachment)) {
    return <AudioAttachmentUploadPreview {...props} />;
  }

  const { id, uploadState } = attachment.localMetadata;

  return (
    <View style={[styles.row, { borderColor: semantics.borderCoreDefault }]}>
      <icons.Mic height={16} stroke={semantics.textSecondary} width={16} />
      <Text style={[styles.label, { color: semantics.textPrimary }]}>
        Voice message, {formatDuration(attachment.custom.duration)}
      </Text>
      {!pendingUploadsEnabled && uploadState === "failed" ? (
        <Pressable
          accessibilityRole="button"
          onPress={() => handleRetry(attachment)}
        >
          <Text style={{ color: semantics.textLink }}>Retry</Text>
        </Pressable>
      ) : null}
      <Pressable
        accessibilityLabel="Remove voice message"
        accessibilityRole="button"
        hitSlop={12}
        onPress={() => removeAttachments([id])}
      >
        <icons.NewClose
          height={16}
          stroke={semantics.textSecondary}
          width={16}
        />
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  label: { flex: 1 },
  row: {
    alignItems: "center",
    borderRadius: 12,
    borderWidth: 1,
    flexDirection: "row",
    gap: 8,
    marginVertical: 4,
    padding: 8,
  },
});

import type { Channel as StreamChannel } from "stream-chat";
import {
  Channel,
  MessageComposer,
  MessageList,
  WithComponents,
} from "stream-chat-react-native";
import type { ComponentOverrides } from "stream-chat-react-native";
import { CompactVoiceRecordingPreview } from "./CompactVoiceRecordingPreview";
import { SquareImagePreview, SquareVideoPreview } from "./SquareMediaPreviews";
import { UploadPercentRing } from "./UploadPercentRing";

const overrides: ComponentOverrides = {
  AudioAttachmentUploadPreview: CompactVoiceRecordingPreview,
  CircularProgressIndicator: UploadPercentRing,
  ImageAttachmentUploadPreview: SquareImagePreview,
  VideoAttachmentUploadPreview: SquareVideoPreview,
};

export const ChannelScreen = ({ channel }: { channel: StreamChannel }) => (
  <WithComponents overrides={overrides}>
    <Channel audioRecordingEnabled channel={channel}>
      <MessageList />
      <MessageComposer />
    </Channel>
  </WithComponents>
);