@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

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

@@ -0,0 +1,42 @@
+// 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/social/features/chat/features/shared/components/MutedBanner/index.ts

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

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

@@ -0,0 +1,32 @@
+// 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/social/features/chat/features/shared/components/NewMessageNotification/NewMessageNotification.tsx

@@ -0,0 +1,120 @@
+// 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/social/features/chat/features/shared/components/NewMessageNotification/index.ts

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

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

@@ -0,0 +1,67 @@
+// 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/social/features/chat/features/shared/components/ScrollToLatestButton/ScrollToLatestButton.tsx

@@ -0,0 +1,34 @@
+// 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/social/features/chat/features/shared/components/ScrollToLatestButton/index.ts

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

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

@@ -0,0 +1,18 @@
+// 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/social/features/chat/features/shared/components/SelectedMember/SelectedMember.tsx

@@ -0,0 +1,65 @@
+// 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/social/features/chat/features/shared/components/SelectedMember/index.ts

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

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

@@ -0,0 +1,38 @@
+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/social/features/chat/features/shared/components/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,213 @@
+// 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>
+  );
+}