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

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

@@ -0,0 +1,147 @@
+// VideoControls — the custom dark control overlay for the chat full-screen video
+// player, ported from AmityUiKitWeb's VideoPlayer MOBILE branch (VideoHeader +
+// mobileControlsRow + VideoProgressBar). Web's header had a close on the left and a
+// mute on the right; the RN MediaViewer shell already owns a persistent close, so this
+// header renders the mute toggle only (see report). The layer fades with `visible`
+// and drops pointer events when hidden so the tap layer beneath can re-show it.
+
+// 1. React / RN imports
+import { useEffect, useRef } from 'react';
+import { Animated, Pressable, View } from 'react-native';
+
+// 2. Third-party imports
+import LinearGradient from 'react-native-linear-gradient';
+
+// 3. Internal imports
+import { AmityIcon } from '../../../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../../../core/design/tokens/amity-color-tokens';
+import { VideoScrubber } from '../VideoScrubber';
+import { useStyles } from './styles';
+
+// 4. Types
+type VideoControlsProps = {
+  visible: boolean;
+  paused: boolean;
+  isScrubbing: boolean;
+  muted: boolean;
+  currentTime: number;
+  duration: number;
+  onTogglePlay: () => void;
+  onToggleMute: () => void;
+  onSkipBackward: () => void;
+  onSkipForward: () => void;
+  onScrubStart: () => void;
+  onScrubEnd: (seconds: number) => void;
+};
+
+const WHITE_ICON = AmityColorToken.IconIconButtonTransparentPrimaryDefault;
+
+// 5. Named function component
+export function VideoControls({
+  visible,
+  paused,
+  isScrubbing,
+  muted,
+  currentTime,
+  duration,
+  onTogglePlay,
+  onToggleMute,
+  onSkipBackward,
+  onSkipForward,
+  onScrubStart,
+  onScrubEnd,
+}: VideoControlsProps) {
+  const { styles } = useStyles();
+  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [visible, opacity]);
+
+  return (
+    <Animated.View
+      style={[styles.overlay, { opacity }]}
+      pointerEvents={visible ? 'box-none' : 'none'}
+    >
+      {/* Top bar: dark gradient scrim + mute toggle (close lives on the shell). */}
+      <LinearGradient
+        colors={['rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0)']}
+        style={styles.header}
+        pointerEvents="box-none"
+      >
+        <Pressable
+          style={styles.headerButton}
+          hitSlop={8}
+          onPress={onToggleMute}
+          accessibilityRole="button"
+          accessibilityLabel={muted ? 'Unmute' : 'Mute'}
+        >
+          <AmityIcon
+            name={muted ? 'volume-slash-s' : 'volume-high-s'}
+            size={24}
+            tokenColor={WHITE_ICON}
+          />
+        </Pressable>
+      </LinearGradient>
+
+      {/* Center row: skip back 10 · play/pause · skip forward 10.
+          Hidden while scrubbing — mirrors web's `!isDragging` gate. */}
+      {!isScrubbing ? (
+        <View style={styles.centerWrap} pointerEvents="box-none">
+          <View style={styles.centerRow}>
+            <Pressable
+              style={styles.circleButton}
+              onPress={onSkipBackward}
+              accessibilityRole="button"
+              accessibilityLabel="Skip back 10 seconds"
+            >
+              <AmityIcon
+                name="Video-Backward10-r"
+                size={24}
+                tokenColor={WHITE_ICON}
+              />
+            </Pressable>
+
+            <Pressable
+              style={styles.circleButton}
+              onPress={onTogglePlay}
+              accessibilityRole="button"
+              accessibilityLabel={paused ? 'Play' : 'Pause'}
+            >
+              <AmityIcon
+                name={paused ? 'video-play-s' : 'video-pause-s'}
+                size={24}
+                tokenColor={WHITE_ICON}
+              />
+            </Pressable>
+
+            <Pressable
+              style={styles.circleButton}
+              onPress={onSkipForward}
+              accessibilityRole="button"
+              accessibilityLabel="Skip forward 10 seconds"
+            >
+              <AmityIcon
+                name="Video-Forward10-r"
+                size={24}
+                tokenColor={WHITE_ICON}
+              />
+            </Pressable>
+          </View>
+        </View>
+      ) : null}
+
+      {/* Bottom scrubber. */}
+      <VideoScrubber
+        currentTime={currentTime}
+        duration={duration}
+        onScrubStart={onScrubStart}
+        onScrubEnd={onScrubEnd}
+      />
+    </Animated.View>
+  );
+}

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

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

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

@@ -0,0 +1,54 @@
+// Styles for VideoControls — ported from AmityUiKitWeb VideoPlayer.module.css +
+// VideoHeader.module.css (mobile layout). Geometry: header padding 1rem/0.75rem→16/12
+// with a top→bottom black scrim; header icon button 1.5rem→24, transparent bg; center
+// row gap 2rem→32; each control button 2.5rem→40 circle, 0.5rem→8 padding, 50% black
+// fill, 1.5rem→24 white icon. Button fills / scrims are rgba() (allowed).
+
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+    },
+    header: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      paddingVertical: 16,
+      paddingHorizontal: 12,
+    },
+    headerButton: {
+      width: 24,
+      height: 24,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'transparent',
+    },
+    centerWrap: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    centerRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 32,
+    },
+    circleButton: {
+      width: 40,
+      height: 40,
+      padding: 8,
+      borderRadius: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+  });
+
+  return { styles };
+};

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

@@ -0,0 +1,131 @@
+// VideoScrubber — ported from AmityUiKitWeb VideoProgressBar (mobile layout).
+// A draggable bottom scrubber: a MM:SS / MM:SS time row above a 4px track with a
+// solid-white fill and a 12px drag dot. Web set video.currentTime on every touch
+// move; per the RN plan we instead track a local fraction while dragging and seek
+// only on release (onScrubEnd), pausing during the drag (onScrubStart) and resuming
+// upstream. Built with core RN PanResponder because the whole player lives inside a
+// native <Modal>, where react-native-gesture-handler gestures do not fire.
+
+// 1. React / RN imports
+import { useMemo, useRef, useState } from 'react';
+import {
+  PanResponder,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+} from 'react-native';
+
+// 2. Internal imports
+import { useStyles } from './styles';
+
+// 3. Types
+type VideoScrubberProps = {
+  currentTime: number;
+  duration: number;
+  onScrubStart: () => void;
+  onScrubEnd: (seconds: number) => void;
+};
+
+// MM:SS, zero-padded — mirrors web VideoProgressBar.formatTime.
+function formatTime(seconds: number): string {
+  if (Number.isNaN(seconds) || seconds < 0) return '00:00';
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds
+    .toString()
+    .padStart(2, '0')}`;
+}
+
+// 4. Named function component
+export function VideoScrubber({
+  currentTime,
+  duration,
+  onScrubStart,
+  onScrubEnd,
+}: VideoScrubberProps) {
+  const { styles } = useStyles();
+  const [trackWidth, setTrackWidth] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragFraction, setDragFraction] = useState(0);
+  const dragFractionRef = useRef(0);
+  const trackWidthRef = useRef(0);
+
+  const setDrag = (fraction: number) => {
+    dragFractionRef.current = fraction;
+    setDragFraction(fraction);
+  };
+
+  const fractionFromX = (x: number) => {
+    const width = trackWidthRef.current;
+    if (width <= 0) return 0;
+    return Math.max(0, Math.min(1, x / width));
+  };
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (e: GestureResponderEvent) => {
+          setIsDragging(true);
+          onScrubStart();
+          setDrag(fractionFromX(e.nativeEvent.locationX));
+        },
+        onPanResponderMove: (e: GestureResponderEvent) => {
+          setDrag(fractionFromX(e.nativeEvent.locationX));
+        },
+        onPanResponderRelease: (e: GestureResponderEvent) => {
+          const fraction = fractionFromX(e.nativeEvent.locationX);
+          setDrag(fraction);
+          setIsDragging(false);
+          onScrubEnd(fraction * duration);
+        },
+        onPanResponderTerminate: () => {
+          setIsDragging(false);
+          onScrubEnd(dragFractionRef.current * duration);
+        },
+      }),
+    // fractionFromX reads width via ref, so it need not be a dependency.
+
+    [duration, onScrubStart, onScrubEnd]
+  );
+
+  const handleTrackLayout = (e: LayoutChangeEvent) => {
+    const width = e.nativeEvent.layout.width;
+    trackWidthRef.current = width;
+    setTrackWidth(width);
+  };
+
+  const fraction = isDragging
+    ? dragFraction
+    : duration > 0
+    ? Math.min(1, currentTime / duration)
+    : 0;
+  const displayCurrent = isDragging ? dragFraction * duration : currentTime;
+
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      <View style={styles.timeDisplay}>
+        <Text style={styles.timeText}>{formatTime(displayCurrent)}</Text>
+        <Text style={styles.timeText}>{formatTime(duration)}</Text>
+      </View>
+
+      <View
+        style={styles.trackContainer}
+        onLayout={handleTrackLayout}
+        {...panResponder.panHandlers}
+      >
+        <View style={styles.trackBackground}>
+          <View style={[styles.trackFill, { width: `${fraction * 100}%` }]} />
+        </View>
+        {isDragging ? (
+          <View
+            style={[styles.dragDot, { left: fraction * trackWidth - 6 }]}
+            pointerEvents="none"
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+}

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

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

package/src/social/features/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/social/features/chat/features/shared/components/VideoPlayer/components/index.ts

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

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

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

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

@@ -0,0 +1,23 @@
+// 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({
+    stage: {
+      width: '100%',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    video: {
+      width: '100%',
+      height: '100%',
+    },
+  });
+
+  return { styles };
+};

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

@@ -0,0 +1,55 @@
+// 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).
+
+// 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 { 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 />}
+      />
+      <Typography variant="caption" style={styles.name} numberOfLines={1}>
+        {label}
+      </Typography>
+    </View>
+  );
+}

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

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

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

@@ -0,0 +1,27 @@
+// 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';
+
+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),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/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';