@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

package/src/chat/features/shared/components/MutedBanner/MutedBanner.tsx

@@ -1,42 +0,0 @@
-// MutedBanner — ported from AmityUiKitWeb features/shared/components/MutedBanner.
-// A full-width subdued banner explaining why the composer is unavailable
-// (user muted / channel moderator-only / blocked). All three strings are
-// resolved unconditionally (matches web) to respect rules-of-hooks.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports
-import { Typography } from '../../../../../core/design/components/Typography';
-import { useString } from '../../../../../core/localization';
-import { useStyles } from './styles';
-
-// 3. Types
-type MutedBannerProps = {
-  variant: 'user' | 'channel' | 'blocked';
-};
-
-// 4. Named function component
-export function MutedBanner({ variant }: MutedBannerProps) {
-  const { styles } = useStyles();
-  const userMutedMessage = useString('amity_chat_user_is_muted');
-  const channelMutedMessage = useString(
-    'amity_chat_group_permission_only_moderators_banner'
-  );
-  const blockedMessage = useString('amity_chat_blocked_message');
-
-  const message =
-    variant === 'user'
-      ? userMutedMessage
-      : variant === 'channel'
-      ? channelMutedMessage
-      : blockedMessage;
-
-  return (
-    <View style={styles.banner} accessibilityRole="text">
-      <Typography variant="caption" style={styles.text}>
-        {message}
-      </Typography>
-    </View>
-  );
-}

package/src/chat/features/shared/components/MutedBanner/index.ts

@@ -1 +0,0 @@
-export { MutedBanner } from './MutedBanner';

package/src/chat/features/shared/components/MutedBanner/styles.ts

@@ -1,32 +0,0 @@
-// Styles for MutedBanner — ported from MutedBanner.module.css.
-// Geometry: padding 0.75rem/1rem→12/16. Text fills + centers. Colours via
-// tokens, matched 1:1 to the web CSS variables (surface + text description).
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    banner: {
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      backgroundColor: token(AmityColorToken.SurfaceBannerSubdueGeneral),
-    },
-    text: {
-      flex: 1,
-      textAlign: 'center',
-      // Web uses text-banner-subdue-textdescription-general; the cleverden SoT (717)
-      // doesn't ship the Subdue text variant, so use the color-identical GreyBG variant
-      // (same alias chain {Information/700}/{Information/300} → same hex). Web slug is
-      // allowlisted in check-fidelity until the SoT adds the Subdue banner token.
-      color: token(AmityColorToken.TextBannerSubdueTextDescriptionGeneral),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/shared/components/NewMessageNotification/NewMessageNotification.tsx

@@ -1,120 +0,0 @@
-// NewMessageNotification — ported from AmityUiKitWeb features/shared/components/
-// NewMessageNotification. A floating toast pinned to the bottom of the message
-// list showing the latest incoming message (avatar + preview text + optional
-// media thumbnail) that scrolls to it on press.
-//
-// RN adaptations from web:
-//   - react-aria `Button` → RN `Pressable`.
-//   - Web resolved the media thumb via `useFile` + `FileRepository.fileUrlWithSize`;
-//     RN `useFile` already returns a size-scaled URL, so it is called with the
-//     'small' size directly (avatar/image/video-thumb calls kept unconditional to
-//     respect rules-of-hooks, passing '' when not applicable).
-//   - Web `<img>` → RN `<Image>`; broken/missing thumb → media-broken icon.
-//   - AmityIcon has no `style`; the arrow's 180° rotation lives on a wrapping View.
-
-// 1. React / RN imports
-import { Pressable, View, Image } from 'react-native';
-
-// 2. Internal imports
-import { Typography } from '../../../../../core/design/components/Typography';
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { resolveString } from '../../../../../core/localization';
-import useFile from '../../../../../core/hooks/useFile';
-import { ImageSizeState } from '../../../../../core/enums';
-import { Avatar } from '../../../../elements/Avatar';
-import { useStyles } from './styles';
-
-// 3. Types
-type NewMessageNotificationProps = {
-  message: Amity.Message;
-  onPress: () => void;
-};
-
-function getPreviewText(message: Amity.Message): string {
-  switch (message.dataType) {
-    case 'text':
-      return (message.data as { text?: string } | undefined)?.text ?? '';
-    case 'image':
-      return resolveString('amity_chat_preview_sent_photo');
-    case 'video':
-      return resolveString('amity_chat_preview_sent_video');
-    case 'custom':
-      return resolveString('amity_chat_preview_message');
-    default:
-      return resolveString('amity_chat_preview_message');
-  }
-}
-
-// 4. Named function component
-export function NewMessageNotification({
-  message,
-  onPress,
-}: NewMessageNotificationProps) {
-  const { styles } = useStyles();
-
-  const isImage = message.dataType === 'image';
-  const isVideo = message.dataType === 'video';
-  const imageFileId = isImage
-    ? (message.data as { fileId?: string } | undefined)?.fileId ?? ''
-    : '';
-  const videoThumbFileId = isVideo
-    ? (message.data as { thumbnailFileId?: string } | undefined)
-        ?.thumbnailFileId ?? ''
-    : '';
-
-  const creator = message.creator;
-  const avatarUrl = useFile({ fileId: creator?.avatarFileId ?? '' });
-  const imageThumb = useFile({
-    fileId: imageFileId,
-    imageSize: ImageSizeState.small,
-  });
-  const videoThumb = useFile({
-    fileId: videoThumbFileId,
-    imageSize: ImageSizeState.small,
-  });
-  const mediaThumb = isImage ? imageThumb : isVideo ? videoThumb : undefined;
-
-  return (
-    <Pressable
-      style={styles.notification}
-      onPress={onPress}
-      accessibilityRole="button"
-    >
-      <View style={styles.left}>
-        {creator ? (
-          <Avatar.User
-            avatarUrl={avatarUrl}
-            displayName={creator.displayName}
-            size="sm"
-          />
-        ) : null}
-        <Typography variant="body" style={styles.preview} numberOfLines={1}>
-          {getPreviewText(message)}
-        </Typography>
-      </View>
-      <View style={styles.right}>
-        {isImage || isVideo ? (
-          <View style={styles.thumb}>
-            {mediaThumb ? (
-              <Image source={{ uri: mediaThumb }} style={styles.thumbImg} />
-            ) : (
-              <AmityIcon
-                name="image-r"
-                size={18}
-                tokenColor={AmityColorToken.IconMediaImageBroken}
-              />
-            )}
-          </View>
-        ) : null}
-        <View style={styles.arrow}>
-          <AmityIcon
-            name="arrow-up-r"
-            size={10}
-            tokenColor={AmityColorToken.TextCustomToastDefault}
-          />
-        </View>
-      </View>
-    </Pressable>
-  );
-}

package/src/chat/features/shared/components/NewMessageNotification/index.ts

@@ -1 +0,0 @@
-export { NewMessageNotification } from './NewMessageNotification';

package/src/chat/features/shared/components/NewMessageNotification/styles.ts

@@ -1,67 +0,0 @@
-// Styles for NewMessageNotification — ported from NewMessageNotification.module.css.
-// Geometry: pinned left/right 1rem→16, bottom 0.5rem→8, height 2.5rem→40,
-// padding 0.375rem/0.625rem→ top/bottom 6, left 6, right 10; radius 0.5rem→8;
-// gaps 0.5rem/0.625rem→8/10; thumb 1.75rem→28, radius 0.25rem→4; arrow 0.625rem→10
-// rotated 180°. box-shadow dropped (RN, no hex allowed). Colours via tokens.
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    notification: {
-      position: 'absolute',
-      left: 16,
-      right: 16,
-      bottom: 8,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: 8,
-      height: 40,
-      paddingTop: 6,
-      paddingBottom: 6,
-      paddingLeft: 6,
-      paddingRight: 10,
-      borderRadius: 8,
-      backgroundColor: token(AmityColorToken.SurfaceCustomToastDefaultDefault),
-    },
-    left: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 10,
-    },
-    preview: {
-      flexShrink: 1,
-      color: token(AmityColorToken.TextCustomToastDefault),
-    },
-    right: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 10,
-      flexShrink: 0,
-    },
-    thumb: {
-      width: 28,
-      height: 28,
-      borderRadius: 4,
-      overflow: 'hidden',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: token(AmityColorToken.SurfaceMediaImageLoaded),
-    },
-    thumbImg: {
-      width: '100%',
-      height: '100%',
-    },
-    arrow: {
-      transform: [{ rotate: '180deg' }],
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/shared/components/ScrollToLatestButton/ScrollToLatestButton.tsx

@@ -1,34 +0,0 @@
-// ScrollToLatestButton — ported from AmityUiKitWeb features/shared/components/
-// ScrollToLatestButton. A circular filled-secondary icon button pinned to the
-// bottom-right of the message list that scrolls to the latest message.
-//
-// Web uses the `Button.Icon` (IconButton) atom with styleType="filled" /
-// hierarchy="secondary" / size={40}; RN uses the ported Button.Icon atom. The
-// bottom-right pin (web .scrollToLatestButton) is passed as a positioning-only
-// style. box-shadow dropped (RN, no hex allowed).
-
-// 1. Internal imports
-import { Button } from '../../../../../core/design/atoms/Button';
-import { useStyles } from './styles';
-
-// 2. Types
-type ScrollToLatestButtonProps = {
-  onPress: () => void;
-};
-
-// 3. Named function component
-export function ScrollToLatestButton({ onPress }: ScrollToLatestButtonProps) {
-  const { styles } = useStyles();
-
-  return (
-    <Button.Icon
-      icon="chevron-down"
-      styleType="filled"
-      hierarchy="secondary"
-      size={40}
-      style={styles.button}
-      onPress={onPress}
-      accessibilityLabel="Scroll to latest message"
-    />
-  );
-}

package/src/chat/features/shared/components/ScrollToLatestButton/index.ts

@@ -1 +0,0 @@
-export { ScrollToLatestButton } from './ScrollToLatestButton';

package/src/chat/features/shared/components/ScrollToLatestButton/styles.ts

@@ -1,18 +0,0 @@
-// Styles for ScrollToLatestButton — positioning only. The 40×40 filled/secondary
-// circle (container + surface + states) is owned by the Button.Icon atom; this
-// pins it bottom-right (web .scrollToLatestButton: right 1rem→16, bottom 0.5rem→8).
-// box-shadow dropped (RN, no hex allowed).
-
-import { StyleSheet } from 'react-native';
-
-export const useStyles = () => {
-  const styles = StyleSheet.create({
-    button: {
-      position: 'absolute',
-      right: 16,
-      bottom: 8,
-    },
-  });
-
-  return { styles };
-};

package/src/chat/features/shared/components/SelectedMember/SelectedMember.tsx

@@ -1,65 +0,0 @@
-// SelectedMember — ported from AmityUiKitWeb chat/features/shared/components/
-// SelectedMember. A compact tile for a chosen member: rounded avatar with a
-// top-right remove button, and the display name underneath (single line,
-// ellipsised).
-//
-// RN adaptations from web:
-//   - Web resolved the avatar via `FileRepository.fileUrlWithSize(user.avatar.fileUrl)`;
-//     RN resolves `user.avatarFileId` through `useFile` (small size), mirroring
-//     NewMessageNotification. The core Avatar atom is replaced by the chat
-//     `Avatar.User` element (rounded, initials fallback).
-//   - Web `Button.Icon` (react-aria) remove control → RN `Button.Icon` atom.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports
-import { Button } from '../../../../../core/design/atoms/Button';
-import { Typography } from '../../../../../core/design/components/Typography';
-import useFile from '../../../../../core/hooks/useFile';
-import { ImageSizeState } from '../../../../../core/enums';
-import { Avatar } from '../../../../elements/Avatar';
-import { useStyles } from './styles';
-
-// 3. Types
-export type SelectedMemberProps = {
-  user: Amity.User;
-  onRemove?: (userId: string) => void;
-};
-
-// 4. Named function component
-export function SelectedMember({ user, onRemove }: SelectedMemberProps) {
-  const { styles } = useStyles();
-
-  const displayName = user.displayName ?? user.userId;
-  const avatarUrl = useFile({
-    fileId: user.avatarFileId ?? '',
-    imageSize: ImageSizeState.small,
-  });
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.avatarWrapper}>
-        <Avatar.User
-          avatarUrl={avatarUrl}
-          displayName={displayName}
-          size="md"
-        />
-        {onRemove ? (
-          <Button.Icon
-            icon="cross-s"
-            styleType="transparent"
-            hierarchy="primary"
-            size={16}
-            style={styles.removeButton}
-            onPress={() => onRemove(user.userId)}
-            accessibilityLabel={`Remove ${displayName}`}
-          />
-        ) : null}
-      </View>
-      <Typography variant="caption" style={styles.name} numberOfLines={1}>
-        {displayName}
-      </Typography>
-    </View>
-  );
-}

package/src/chat/features/shared/components/SelectedMember/index.ts

@@ -1,2 +0,0 @@
-export { SelectedMember } from './SelectedMember';
-export type { SelectedMemberProps } from './SelectedMember';

package/src/chat/features/shared/components/SelectedMember/styles.ts

@@ -1,38 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-// Geometry ported from AmityUiKitWeb SelectedMember.module.css (rem -> px, x16):
-// tile width 4rem=64, column gap 0.25rem=4; avatar wrapper 2.5rem=40; name max
-// width 4rem=64. Remove button pinned top-right — its 16px container + transparent
-// surface come from the Button.Icon atom (transparent/primary/16); this style is
-// positioning only (web .selectedMember__removeButton: absolute, top 0, right 0).
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    container: {
-      flexShrink: 0,
-      alignItems: 'center',
-      gap: 4,
-      width: 64,
-    },
-    avatarWrapper: {
-      position: 'relative',
-      width: 40,
-      height: 40,
-    },
-    removeButton: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-    },
-    name: {
-      maxWidth: 64,
-      textAlign: 'center',
-      color: token(AmityColorToken.TextAvatarLabelDefault),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/shared/components/VideoPlayer/VideoPlayer.tsx

@@ -1,213 +0,0 @@
-// VideoPlayer — ported from AmityUiKitWeb chat/features/shared/components/VideoPlayer.
-// Resolves the message's video fileId to its raw playable URL, then plays it inside the
-// shared MediaViewer shell (close / delete / save chrome). Replaces react-native-video's
-// NATIVE controls with a custom dark control overlay ported from the web SOCIAL player's
-// MOBILE layout (VideoControls): tap the video to toggle controls, which auto-hide after
-// 1s while playing; a header mute toggle, a centre play/pause + ±10s skip row, and a
-// draggable bottom scrubber. Playback is driven from react-native-video callbacks + ref.
-
-// 1. React / RN imports
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
-
-// 2. Third-party imports
-import Video, { type VideoRef } from 'react-native-video';
-
-// 3. Internal imports
-import { MediaViewer } from '../MediaViewer';
-import { useVideoFileUrl } from '../../../../hooks/useVideoFileUrl';
-import { VideoControls } from './components/VideoControls';
-import { useStyles } from './styles';
-
-// Ported from AmityUiKitWeb src/v4/social/constants (VIDEO_CONTROLS_AUTO_HIDE_MS).
-const VIDEO_CONTROLS_AUTO_HIDE_MS = 1000;
-const SKIP_SECONDS = 10;
-
-// 4. Types
-type VideoPlayerProps = {
-  message: Amity.Message;
-  onClose: () => void;
-  isOwn?: boolean;
-  onDelete?: () => void;
-  /**
-   * NOT FORWARDED — PDT-4127 hides the save/download button for video this
-   * release (saving is affected by play/pause, and livestream needs a backend
-   * fix). Web did the same in dba25aa77 by dropping onSave from its video
-   * player props and making it optional. Images keep their save button.
-   * Still accepted here (and still supplied by useMediaViewer) so re-enabling
-   * is one line: pass `onSave={onSave}` to MediaViewer below.
-   */
-  onSave?: () => void;
-};
-
-// 5. Named function component
-export function VideoPlayer({
-  message,
-  onClose,
-  isOwn = false,
-  onDelete,
-}: VideoPlayerProps) {
-  const { styles } = useStyles();
-  const fileId = (message.data as { fileId?: string } | undefined)?.fileId;
-  const src = useVideoFileUrl(fileId);
-
-  const videoRef = useRef<VideoRef>(null);
-  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const wasPlayingBeforeScrubRef = useRef(false);
-
-  const [paused, setPaused] = useState(false);
-  const [muted, setMuted] = useState(false);
-  const [duration, setDuration] = useState(0);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [controlsVisible, setControlsVisible] = useState(true);
-  const [isScrubbing, setIsScrubbing] = useState(false);
-
-  const clearHideTimer = useCallback(() => {
-    if (hideTimerRef.current) {
-      clearTimeout(hideTimerRef.current);
-      hideTimerRef.current = null;
-    }
-  }, []);
-
-  const scheduleHide = useCallback(() => {
-    clearHideTimer();
-    hideTimerRef.current = setTimeout(() => {
-      setControlsVisible(false);
-    }, VIDEO_CONTROLS_AUTO_HIDE_MS);
-  }, [clearHideTimer]);
-
-  // Mirror web: while playing, arm the auto-hide; when paused, keep controls shown.
-  useEffect(() => {
-    if (paused) {
-      setControlsVisible(true);
-      clearHideTimer();
-    } else {
-      scheduleHide();
-    }
-  }, [paused, scheduleHide, clearHideTimer]);
-
-  useEffect(() => clearHideTimer, [clearHideTimer]);
-
-  const handleTapArea = useCallback(() => {
-    setControlsVisible((prev) => {
-      const next = !prev;
-      if (next && !paused) {
-        scheduleHide();
-      } else {
-        clearHideTimer();
-      }
-      return next;
-    });
-  }, [paused, scheduleHide, clearHideTimer]);
-
-  const handleTogglePlay = useCallback(() => {
-    if (paused && duration > 0 && currentTime >= duration - 0.25) {
-      // Replay from the start when resuming after the video ended.
-      videoRef.current?.seek(0);
-      setCurrentTime(0);
-    }
-    setPaused((prev) => !prev);
-  }, [paused, duration, currentTime]);
-
-  const handleToggleMute = useCallback(() => {
-    setMuted((prev) => !prev);
-  }, []);
-
-  const seekTo = useCallback(
-    (seconds: number) => {
-      const clamped = Math.max(
-        0,
-        duration > 0 ? Math.min(duration, seconds) : seconds
-      );
-      videoRef.current?.seek(clamped);
-      setCurrentTime(clamped);
-      if (!paused) scheduleHide();
-    },
-    [duration, paused, scheduleHide]
-  );
-
-  const handleSkipBackward = useCallback(() => {
-    seekTo(currentTime - SKIP_SECONDS);
-  }, [currentTime, seekTo]);
-
-  const handleSkipForward = useCallback(() => {
-    seekTo(currentTime + SKIP_SECONDS);
-  }, [currentTime, seekTo]);
-
-  const handleScrubStart = useCallback(() => {
-    wasPlayingBeforeScrubRef.current = !paused;
-    setIsScrubbing(true);
-    clearHideTimer();
-    if (!paused) setPaused(true);
-  }, [paused, clearHideTimer]);
-
-  const handleScrubEnd = useCallback(
-    (seconds: number) => {
-      const clamped = Math.max(
-        0,
-        duration > 0 ? Math.min(duration, seconds) : seconds
-      );
-      videoRef.current?.seek(clamped);
-      setCurrentTime(clamped);
-      setIsScrubbing(false);
-      if (wasPlayingBeforeScrubRef.current) setPaused(false);
-    },
-    [duration]
-  );
-
-  return (
-    <MediaViewer
-      accessibilityLabel="Video player"
-      onClose={onClose}
-      isOwn={isOwn}
-      onDelete={onDelete}
-      // onSave deliberately omitted — hides the download button (MediaViewer
-      // renders a spacer in its place, so delete keeps its position).
-    >
-      {src ? (
-        <View style={styles.stage}>
-          <Video
-            ref={videoRef}
-            source={{ uri: src }}
-            paused={paused}
-            muted={muted}
-            resizeMode="contain"
-            playWhenInactive={false}
-            playInBackground={false}
-            onLoad={(e) => setDuration(e.duration)}
-            onProgress={(e) => setCurrentTime(e.currentTime)}
-            onEnd={() => {
-              setPaused(true);
-              setControlsVisible(true);
-              clearHideTimer();
-            }}
-            style={styles.video}
-          />
-
-          {/* Full-area tap layer: toggles control visibility. */}
-          <Pressable
-            style={StyleSheet.absoluteFill}
-            onPress={handleTapArea}
-            accessibilityRole="button"
-            accessibilityLabel="Toggle video controls"
-          />
-
-          <VideoControls
-            visible={controlsVisible}
-            paused={paused}
-            isScrubbing={isScrubbing}
-            muted={muted}
-            currentTime={currentTime}
-            duration={duration}
-            onTogglePlay={handleTogglePlay}
-            onToggleMute={handleToggleMute}
-            onSkipBackward={handleSkipBackward}
-            onSkipForward={handleSkipForward}
-            onScrubStart={handleScrubStart}
-            onScrubEnd={handleScrubEnd}
-          />
-        </View>
-      ) : null}
-    </MediaViewer>
-  );
-}