@amityco/react-native-social-uikit 4.2.0 → 4.2.1-7d6de7d.0

package/src/chat/features/shared/components/VideoPlayer/components/VideoScrubber/styles.ts

@@ -0,0 +1,62 @@
+// Styles for VideoScrubber — ported from AmityUiKitWeb VideoProgressBar.module.css.
+// Geometry: container bottom 2.5rem→40, left/right 0.75rem→12; time row margin-bottom
+// 1rem→16; track container 1.25rem→20 tall with 0.5rem→8 vertical padding; track
+// 0.25rem→4 tall, radius 0.125rem→2; drag dot 0.75rem→12. Track bg is 30% white and
+// the dot is transparent-on-video, so both stay as rgba() (scrim colours are allowed);
+// the solid-white fill/dot use the white text token.
+
+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 white = token(AmityColorToken.TextBaseInverse);
+
+  const styles = StyleSheet.create({
+    container: {
+      position: 'absolute',
+      bottom: 40,
+      left: 12,
+      right: 12,
+    },
+    timeDisplay: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 16,
+    },
+    timeText: {
+      color: white,
+      fontSize: 12,
+    },
+    trackContainer: {
+      height: 20,
+      paddingVertical: 8,
+      justifyContent: 'center',
+    },
+    trackBackground: {
+      width: '100%',
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+      overflow: 'hidden',
+    },
+    trackFill: {
+      height: '100%',
+      borderRadius: 2,
+      backgroundColor: white,
+    },
+    dragDot: {
+      position: 'absolute',
+      top: '50%',
+      marginTop: -6,
+      width: 12,
+      height: 12,
+      borderRadius: 6,
+      backgroundColor: white,
+    },
+  });
+
+  return { styles };
+};

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

@@ -0,0 +1,2 @@
+export * from './VideoControls';
+export * from './VideoScrubber';

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

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

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

@@ -0,0 +1,35 @@
+// Styles for VideoPlayer — the video fills the MediaViewer stage, with the custom
+// control overlay (VideoControls) stacked on top. Web used max-width/max-height 100%
+// with object-fit: contain; RN maps that to a full-bleed container plus
+// resizeMode="contain" on the Video element. No theme colours here.
+
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    // The mute glyph was a bare white icon on the footage and vanished
+    // against light content. Same 32px 50%-black chip the viewer's close button
+    // carries, so the two ends of web's single VideoHeader row match.
+    muteButton: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+
+    stage: {
+      width: '100%',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    video: {
+      width: '100%',
+      height: '100%',
+    },
+  });
+
+  return { styles };
+};

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

@@ -0,0 +1,60 @@
+// YouTile — ported from AmityUiKitWeb features/shared/components/YouTile.
+// The "you" selected-member tile: a rounded avatar with a moderator indicator
+// badge above a single-line caption label. Web resolves the avatar via
+// FileRepository.fileUrlWithSize; RN's useFile already returns a size-scaled
+// URL, so avatarFileId is passed through directly (avatarCustomUrl wins when set).
+//
+// Badge geometry deviates from web (16px chip + 3px ring, inside the frame): the
+// design's "You" tile shows the 16px chip with only a hairline ring, centred on
+// the avatar's bottom-right edge (see styles.ts).
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Avatar } from '../../../../../core/design/atoms/Avatar';
+import { Typography } from '../../../../../core/design/components/Typography';
+import { ModeratorBadge } from '../../../../../core/design/elements/ModeratorBadge';
+import useFile from '../../../../../core/hooks/useFile';
+import { ImageSizeState } from '../../../../../core/enums';
+import { resolveString } from '../../../../../core/localization';
+import { MODERATOR_BADGE_SIZE, useStyles } from './styles';
+
+// 3. Types
+type YouTileProps = {
+  user: Amity.User;
+  label?: string;
+};
+
+// 4. Named function component
+export function YouTile({
+  user,
+  label = resolveString('amity_chat_member_you'),
+}: YouTileProps) {
+  const { styles } = useStyles();
+
+  const displayName = user.displayName ?? user.userId;
+  const initials = displayName.trim().charAt(0).toUpperCase() || '?';
+  const resolvedAvatar = useFile({
+    fileId: user.avatarFileId ?? '',
+    imageSize: ImageSizeState.small,
+  });
+  const imageUrl = user.avatarCustomUrl ?? resolvedAvatar;
+
+  return (
+    <View style={styles.tile}>
+      <Avatar
+        variant={imageUrl ? 'image' : 'text'}
+        shape="rounded"
+        size={40}
+        imageUrl={imageUrl}
+        initials={initials}
+        indicator={<ModeratorBadge size={MODERATOR_BADGE_SIZE} />}
+        indicatorStyle={styles.moderatorBadge}
+      />
+      <Typography variant="caption" style={styles.name} numberOfLines={1}>
+        {label}
+      </Typography>
+    </View>
+  );
+}

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

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

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

@@ -0,0 +1,45 @@
+// Styles for YouTile — ported from YouTile.module.css.
+// Geometry: column, center, gap 0.25rem→4, tile width 4rem→64. Label colour
+// from Text/Avatar/Label/Default.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
+
+// Moderator badge on the 40px "You" avatar, matched against the New group Figma:
+// a 16px chip with only a hairline white ring, centred on the avatar's
+// bottom-right edge. The Avatar atom draws a 3px ring around any indicator;
+// that is far thicker than the design here, so the ring is zeroed and the
+// badge's own 1px white border (Border/Avatar/Indicator/Default) is the ring.
+// Centring a 16px box on the 40px circle's 45° point puts its centre at ~34,
+// i.e. 2px past the frame.
+export const MODERATOR_BADGE_SIZE = 16;
+const MODERATOR_BADGE_RING = 0;
+const MODERATOR_BADGE_OVERHANG = 2;
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    tile: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 4,
+      width: 64,
+    },
+    name: {
+      maxWidth: 64,
+      textAlign: 'center',
+      color: token(AmityColorToken.TextAvatarLabelDefault),
+    },
+    // Override the atom's 3px ring and anchor, then shift the chip out so it
+    // straddles the frame edge as in the design.
+    moderatorBadge: {
+      borderWidth: MODERATOR_BADGE_RING,
+      right: -(MODERATOR_BADGE_RING + MODERATOR_BADGE_OVERHANG),
+      bottom: -(MODERATOR_BADGE_RING + MODERATOR_BADGE_OVERHANG),
+    },
+  });
+
+  return { styles, token };
+};

package/src/chat/features/shared/hooks/index.ts

@@ -0,0 +1,21 @@
+// Barrel for the shared chat orchestration hooks (mirrors AmityUiKitWeb
+// v4/chat/features/shared/hooks/index.ts). useMessageComposer / useChatMessage
+// are owned/exported elsewhere and intentionally not re-exported here.
+export { useMarkAsRead } from './useMarkAsRead';
+export { useBubbleMenu } from './useBubbleMenu';
+export type { UseBubbleMenuReturn } from './useBubbleMenu';
+export { useFailedMessageSheet } from './useFailedMessageSheet';
+export type { UseFailedMessageSheetReturn } from './useFailedMessageSheet';
+export { useMediaViewer } from './useMediaViewer';
+export type {
+  UseMediaViewerReturn,
+  ImageViewerRenderProps,
+  VideoPlayerRenderProps,
+} from './useMediaViewer';
+export { useMessageReactions } from './useMessageReactions';
+export type {
+  UseMessageReactionsReturn,
+  MessageReactionPayload,
+} from './useMessageReactions';
+export { useReactorsCollection } from './useReactorsCollection';
+export type { UseReactorsCollectionReturn } from './useReactorsCollection';

package/src/chat/features/shared/hooks/useBubbleMenu.tsx

@@ -0,0 +1,175 @@
+// useBubbleMenu — ported from AmityUiKitWeb v4/chat/features/shared/hooks/useBubbleMenu.
+// Holds the message action-menu state and the per-action handlers. In RN the menu
+// is long-press triggered (see components/AmityMessageActionMenu) rather than
+// anchored to a DOM node, so `anchor` is kept optional and loosely typed.
+//
+// RN adaptations from web (return shape UseBubbleMenuReturn preserved verbatim so
+// useChatMessage consumes it unchanged):
+//   - Delete goes through the RN `useDeleteMessageQuery` port, which confirms via
+//     the platform `Alert` before deleting (web used ConfirmProvider's modal).
+//   - Copy uses `@react-native-clipboard/clipboard` (`Clipboard.setString`, sync)
+//     instead of `navigator.clipboard.writeText`; the copied-success toast fires
+//     through the useChatNotifications stub.
+//   - Save goes through the RN `useSaveMediaMessageQuery` port, which resolves the
+//     message's file URL, downloads it and writes it into the device gallery via
+//     CameraRoll, then raises the saved/failed chat toast (web downloaded via the
+//     browser). Same hook the media viewer's save icon uses; `handleBubbleSave`
+//     used to be a stub, so tapping Save on an image neither saved to the
+//     gallery nor showed the "Saved photo." toast.
+//   - Report: web opened a Drawer (mobile) / Popup (desktop) with ContentReportReason.
+//     RN keeps the report target in local state (`reportMessage`) and the orchestrator
+//     (useChatMessage) surfaces it so Chat/GroupChat render the full-screen
+//     ContentReportReason Modal — the same overlay pattern as see-more (the
+//     report UI previously appeared as a partial bottom sheet / no-op).
+//   - Reactor-list sheet has no RN component wired here (web opened a Drawer/Popup with
+//     MessageReactorListSheet) — `handleOpenReactorListSheet` is a documented stub;
+//     Chat/GroupChat open the reactor list via the global bottom sheet instead.
+
+import { useState } from 'react';
+
+import Clipboard from '@react-native-clipboard/clipboard';
+
+import { useString } from '../../../../core/localization';
+import {
+  useDeleteMessageQuery,
+  useSaveMediaMessageQuery,
+} from '../../../hooks/queries';
+import { useChatNotifications } from '../../../hooks/useChatNotifications';
+
+type BubbleMenuState = {
+  message: Amity.Message;
+  anchor?: unknown;
+};
+
+type UseBubbleMenuParams = {
+  onEditMessage: (message: Amity.Message) => void;
+  onReplyMessage: (message: Amity.Message) => void;
+  viewerIsMutedInChannel?: boolean;
+};
+
+export type UseBubbleMenuReturn = {
+  bubbleMenu: BubbleMenuState | null;
+  openBubbleMenu: (message: Amity.Message, anchor?: unknown) => void;
+  closeBubbleMenu: () => void;
+  handleBubbleDelete: () => void;
+  handleBubbleEdit: () => void;
+  handleBubbleReply: () => void;
+  handleBubbleCopy: () => Promise<void>;
+  handleBubbleSave: () => void;
+  handleBubbleReport: (message: Amity.Message) => void;
+  handleOpenReactorListSheet: (message: Amity.Message) => void;
+  // The message pending report (drives the ContentReportReason Modal), and its closer.
+  reportMessage: Amity.Message | null;
+  closeReport: () => void;
+  viewerIsMutedInChannel: boolean;
+};
+
+// Mirrors web's chat/utils/getClipboardPayload (inlined; no RN chat/utils dir yet).
+function getClipboardPayload(message: Amity.Message): string | null {
+  if (message.dataType === 'text') {
+    const data = message.data as Amity.Message<'text'>['data'];
+    return data?.text ?? '';
+  }
+  if (message.dataType === 'custom') {
+    const data = (message as Amity.Message<'custom'>).data;
+    if (data == null) return null;
+    if (typeof data === 'string') return data;
+    return JSON.stringify(data);
+  }
+  return null;
+}
+
+export function useBubbleMenu({
+  onEditMessage,
+  onReplyMessage,
+  viewerIsMutedInChannel = false,
+}: UseBubbleMenuParams): UseBubbleMenuReturn {
+  const { success } = useChatNotifications();
+  const copiedToast = useString('amity_chat_toast_copied');
+  const [bubbleMenu, setBubbleMenu] = useState<BubbleMenuState | null>(null);
+  const [reportMessage, setReportMessage] = useState<Amity.Message | null>(
+    null
+  );
+
+  function closeBubbleMenu() {
+    setBubbleMenu(null);
+  }
+
+  const { requestDelete } = useDeleteMessageQuery();
+  const { requestSave } = useSaveMediaMessageQuery();
+
+  function openBubbleMenu(message: Amity.Message, anchor?: unknown) {
+    setBubbleMenu({ message, anchor });
+  }
+
+  function handleBubbleDelete() {
+    if (!bubbleMenu) return;
+    const message = bubbleMenu.message;
+    closeBubbleMenu();
+    requestDelete(message);
+  }
+
+  function handleBubbleEdit() {
+    if (!bubbleMenu) return;
+    const message = bubbleMenu.message;
+    closeBubbleMenu();
+    onEditMessage(message);
+  }
+
+  function handleBubbleReply() {
+    if (!bubbleMenu) return;
+    const message = bubbleMenu.message;
+    closeBubbleMenu();
+    onReplyMessage(message);
+  }
+
+  async function handleBubbleCopy() {
+    if (!bubbleMenu) return;
+    const message = bubbleMenu.message;
+    closeBubbleMenu();
+
+    const payload = getClipboardPayload(message);
+    if (payload) {
+      Clipboard.setString(payload);
+      success({ content: copiedToast, alignment: 'with-composer' });
+    }
+  }
+
+  function handleBubbleSave() {
+    if (!bubbleMenu) return;
+    // Capture the target before closing: closeBubbleMenu clears `bubbleMenu`.
+    const message = bubbleMenu.message;
+    closeBubbleMenu();
+    requestSave(message);
+  }
+
+  function handleBubbleReport(message: Amity.Message) {
+    // Open the full-screen ContentReportReason Modal (rendered by Chat/GroupChat).
+    setReportMessage(message);
+  }
+
+  function closeReport() {
+    setReportMessage(null);
+  }
+
+  function handleOpenReactorListSheet(_message: Amity.Message) {
+    closeBubbleMenu();
+    // TODO: no RN MessageReactorListSheet yet (web opened a Drawer/Popup). Stubbed.
+  }
+
+  return {
+    bubbleMenu,
+    openBubbleMenu,
+    closeBubbleMenu,
+    handleBubbleDelete,
+    handleBubbleEdit,
+    handleBubbleReply,
+    handleBubbleCopy,
+    handleBubbleSave,
+    handleBubbleReport,
+    handleOpenReactorListSheet,
+    reportMessage,
+    closeReport,
+    viewerIsMutedInChannel,
+  };
+}