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

package/src/social/components/LoadingVideo/index.tsx

@@ -9,7 +9,12 @@ import {
 import * as Progress from 'react-native-progress';
 import { SvgXml } from 'react-native-svg';
 import { deleteAmityFile, uploadVideoFile } from '../../../core/legacy/file';
-import { closeIcon, playBtn, toastIcon } from '../../../core/assets/icons/xml';
+import {
+  closeIcon,
+  playBtn,
+  toastIcon,
+  videoControlIcon,
+} from '../../../core/assets/icons/xml';
 import { useStyles } from './styles';
 import Video from 'react-native-video';
 import { useNavigation } from '@react-navigation/native';
@@ -39,6 +44,7 @@ interface OverlayImageProps {
   fileCount?: number;
   postId?: string;
   setIsUploading?: (arg: boolean) => void;
+  carousel?: boolean;
 }
 const LoadingVideo = ({
   source,
@@ -54,6 +60,7 @@ const LoadingVideo = ({
   fileCount,
   postId,
   setIsUploading,
+  carousel = false,
 }: OverlayImageProps) => {
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
@@ -157,8 +164,13 @@ const LoadingVideo = ({
 
   const handleOnPlay = () => {
     setIsPause(!isPause);
+    // In carousel mode the parent (onPlay) opens the full-screen media viewer,
+    // so skip the default single-video route navigation.
+    if (onPlay) {
+      onPlay(source);
+      return;
+    }
     playVideoFullScreen(source);
-    onPlay && onPlay(source);
   };
 
   const onRetryUpload = () => {
@@ -166,10 +178,22 @@ const LoadingVideo = ({
   };
 
   return (
-    <View style={fileCount >= 3 ? styles.image3XContainer : styles.container}>
+    <View
+      style={
+        carousel
+          ? styles.carouselContainer
+          : fileCount >= 3
+          ? styles.image3XContainer
+          : styles.container
+      }
+    >
       {!loading && !isUploadError && isPause && (
         <TouchableOpacity style={styles.playButton} onPress={handleOnPlay}>
-          <SvgXml xml={playBtn} width="50" height="50" />
+          <SvgXml
+            xml={carousel ? videoControlIcon : playBtn}
+            width={carousel ? 40 : 50}
+            height={carousel ? 40 : 50}
+          />
         </TouchableOpacity>
       )}
       {playingUri && !isPause ? (

package/src/social/components/LoadingVideo/styles.ts

@@ -13,6 +13,10 @@ export const useStyles = () => {
       height: width / 3 - 16,
       margin: 3,
     },
+    carouselContainer: {
+      width: '100%',
+      height: '100%',
+    },
     image: {
       width: '100%',
       height: '100%',

package/src/social/components/MediaSelector/MediaSelector.tsx

@@ -0,0 +1,231 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  FlatList,
+  Image,
+  Modal,
+  PermissionsAndroid,
+  Platform,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {
+  CameraRoll,
+  type PhotoIdentifier,
+} from '@react-native-camera-roll/camera-roll';
+import { useStyles } from './styles';
+
+type MediaSelectorProps = {
+  visible: boolean;
+  mediaType: 'photo' | 'video';
+  /** URIs already added to the composer — used for silent duplicate detection. */
+  existing: string[];
+  /** How many more items may be added (10 - current count). */
+  remaining: number;
+  onClose: () => void;
+  /** New, de-duplicated URIs in the order they were selected. */
+  onConfirm: (uris: string[]) => void;
+};
+
+const PAGE_SIZE = 90;
+
+async function ensureLibraryPermission(
+  mediaType: 'photo' | 'video'
+): Promise<boolean> {
+  if (Platform.OS !== 'android') return true;
+  const version =
+    typeof Platform.Version === 'number'
+      ? Platform.Version
+      : parseInt(Platform.Version, 10);
+  const perms =
+    version >= 33
+      ? [
+          mediaType === 'photo'
+            ? PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES
+            : PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO,
+        ]
+      : [PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE];
+  try {
+    const result = await PermissionsAndroid.requestMultiple(perms);
+    return Object.values(result).every(
+      (status) => status === PermissionsAndroid.RESULTS.GRANTED
+    );
+  } catch {
+    return false;
+  }
+}
+
+function formatDuration(seconds?: number): string {
+  if (!seconds || seconds <= 0) return '';
+  const total = Math.round(seconds);
+  const mins = Math.floor(total / 60);
+  const secs = total % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+export function MediaSelector({
+  visible,
+  mediaType,
+  existing,
+  remaining,
+  onClose,
+  onConfirm,
+}: MediaSelectorProps) {
+  const { styles } = useStyles();
+  const [items, setItems] = useState<PhotoIdentifier[]>([]);
+  const [selected, setSelected] = useState<string[]>([]);
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const loadPage = useCallback(
+    async (after?: string) => {
+      if (loading) return;
+      setLoading(true);
+      try {
+        const res = await CameraRoll.getPhotos({
+          first: PAGE_SIZE,
+          after,
+          assetType: mediaType === 'photo' ? 'Photos' : 'Videos',
+          include: ['filename', 'playableDuration'],
+        });
+        setItems((prev) => (after ? [...prev, ...res.edges] : res.edges));
+        setCursor(res.page_info.end_cursor);
+        setHasNextPage(res.page_info.has_next_page);
+      } catch {
+        // permission denied / empty library — leave the list empty
+      } finally {
+        setLoading(false);
+      }
+    },
+    [loading, mediaType]
+  );
+
+  // Reset and (re)load whenever the selector opens. A fresh open starts with an
+  // empty selection; previously-added items are handled by duplicate detection.
+  useEffect(() => {
+    if (!visible) return;
+    setSelected([]);
+    setItems([]);
+    setCursor(undefined);
+    setHasNextPage(false);
+    (async () => {
+      const granted = await ensureLibraryPermission(mediaType);
+      if (granted) loadPage();
+    })();
+  }, [visible, mediaType]);
+
+  const toggle = useCallback(
+    (uri: string) => {
+      setSelected((prev) => {
+        const index = prev.indexOf(uri);
+        if (index !== -1) {
+          // Deselect: removing from the array renumbers the rest automatically.
+          return prev.filter((u) => u !== uri);
+        }
+        if (prev.length >= remaining) return prev; // respect the cap silently
+        return [...prev, uri];
+      });
+    },
+    [remaining]
+  );
+
+  const handleConfirm = useCallback(() => {
+    const deduped = selected.filter((uri) => !existing.includes(uri));
+    onConfirm(deduped);
+  }, [selected, existing, onConfirm]);
+
+  const onEndReached = useCallback(() => {
+    if (hasNextPage && !loading) loadPage(cursor);
+  }, [hasNextPage, loading, cursor, loadPage]);
+
+  const renderItem = useCallback(
+    ({ item }: { item: PhotoIdentifier }) => {
+      const uri = item.node.image.uri;
+      const order = selected.indexOf(uri);
+      const isSelected = order !== -1;
+      const duration =
+        mediaType === 'video'
+          ? formatDuration(item.node.image.playableDuration)
+          : '';
+      return (
+        <TouchableWithoutFeedback onPress={() => toggle(uri)}>
+          <View style={styles.cell}>
+            <Image style={styles.cell__image} source={{ uri }} />
+            {!!duration && (
+              <Text style={styles.cell__videoDuration}>{duration}</Text>
+            )}
+            {isSelected ? (
+              <>
+                <View style={styles.cell__selectedOverlay} />
+                <View style={styles.cell__badge}>
+                  <Text style={styles.cell__badgeLabel}>{order + 1}</Text>
+                </View>
+              </>
+            ) : (
+              <View style={styles.cell__badgeEmpty} />
+            )}
+          </View>
+        </TouchableWithoutFeedback>
+      );
+    },
+    [selected, mediaType, toggle, styles]
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      onRequestClose={onClose}
+      presentationStyle="fullScreen"
+    >
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <TouchableOpacity style={styles.headerButton} onPress={onClose}>
+            <Text style={styles.headerClose}>Cancel</Text>
+          </TouchableOpacity>
+          <Text style={styles.headerTitle}>
+            {mediaType === 'photo' ? 'Photos' : 'Videos'}
+          </Text>
+          <TouchableOpacity
+            style={styles.headerButton__right}
+            disabled={selected.length === 0}
+            onPress={handleConfirm}
+          >
+            <Text
+              style={
+                selected.length === 0
+                  ? styles.headerAdd__disabled
+                  : styles.headerAdd
+              }
+            >
+              {selected.length > 0 ? `Add (${selected.length})` : 'Add'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <FlatList
+          data={items}
+          numColumns={3}
+          keyExtractor={(item) => item.node.image.uri}
+          renderItem={renderItem}
+          contentContainerStyle={styles.grid}
+          onEndReached={onEndReached}
+          onEndReachedThreshold={0.6}
+          initialNumToRender={30}
+          windowSize={5}
+          ListEmptyComponent={
+            !loading ? (
+              <View style={styles.empty}>
+                <Text style={styles.empty__text}>
+                  No {mediaType === 'photo' ? 'photos' : 'videos'} found on this
+                  device.
+                </Text>
+              </View>
+            ) : null
+          }
+        />
+      </View>
+    </Modal>
+  );
+}

package/src/social/components/MediaSelector/index.tsx

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

package/src/social/components/MediaSelector/styles.ts

@@ -0,0 +1,124 @@
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
+
+const NUM_COLUMNS = 3;
+const CELL_GAP = 2;
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+  const { width } = useWindowDimensions();
+  const cellSize = Math.floor(
+    (width - CELL_GAP * (NUM_COLUMNS - 1)) / NUM_COLUMNS
+  );
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      height: 56,
+    },
+    headerButton: {
+      minWidth: 64,
+    },
+    headerButton__right: {
+      minWidth: 64,
+      alignItems: 'flex-end',
+    },
+    headerTitle: {
+      color: theme.colors.base,
+      fontSize: 16,
+      fontWeight: '600',
+    },
+    headerClose: {
+      color: theme.colors.base,
+      fontSize: 16,
+    },
+    headerAdd: {
+      color: theme.colors.primary,
+      fontSize: 16,
+      fontWeight: '600',
+    },
+    headerAdd__disabled: {
+      color: theme.colors.baseShade3,
+      fontSize: 16,
+      fontWeight: '600',
+    },
+    grid: {
+      paddingBottom: 24,
+    },
+    cell: {
+      width: cellSize,
+      height: cellSize,
+      marginRight: CELL_GAP,
+      marginBottom: CELL_GAP,
+      backgroundColor: theme.colors.baseShade4,
+    },
+    cell__image: {
+      width: '100%',
+      height: '100%',
+    },
+    cell__selectedOverlay: {
+      ...StyleSheet.absoluteFillObject,
+      borderWidth: 2,
+      borderColor: theme.colors.primary,
+    },
+    cell__badge: {
+      position: 'absolute',
+      top: 6,
+      right: 6,
+      minWidth: 22,
+      height: 22,
+      borderRadius: 11,
+      paddingHorizontal: 5,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.primary,
+    },
+    cell__badgeEmpty: {
+      position: 'absolute',
+      top: 6,
+      right: 6,
+      width: 22,
+      height: 22,
+      borderRadius: 11,
+      borderWidth: 1.5,
+      borderColor: '#FFFFFF',
+      backgroundColor: 'rgba(0,0,0,0.2)',
+    },
+    cell__badgeLabel: {
+      color: '#FFFFFF',
+      fontSize: 12,
+      fontWeight: '700',
+    },
+    cell__videoDuration: {
+      position: 'absolute',
+      bottom: 6,
+      right: 6,
+      color: '#FFFFFF',
+      fontSize: 11,
+      fontWeight: '600',
+      textShadowColor: 'rgba(0,0,0,0.6)',
+      textShadowRadius: 2,
+    },
+    empty: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 32,
+    },
+    empty__text: {
+      color: theme.colors.baseShade1,
+      fontSize: 14,
+      textAlign: 'center',
+    },
+  });
+
+  return { styles, theme };
+};

package/src/social/components/MediaViewer/MediaViewer.tsx

@@ -0,0 +1,168 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  FlatList,
+  Image,
+  ImageStyle,
+  Modal,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import Video from 'react-native-video';
+import { SvgXml } from 'react-native-svg';
+import {
+  clearIcon,
+  soundOnIcon,
+  soundOffIcon,
+} from '../../../core/assets/icons/xml';
+import { useStyles } from './styles';
+
+export type MediaViewerItem = {
+  type: 'image' | 'video';
+  uri: string;
+  /** e.g. 'm3u8' for HLS (published) videos; omit for local files. */
+  videoType?: string;
+};
+
+type MediaViewerProps = {
+  visible: boolean;
+  items: MediaViewerItem[];
+  initialIndex: number;
+  /** Called with the last-viewed index so the caller can decide where to
+   * return (published: last-viewed; composer: originally-tapped). */
+  onClose: (lastIndex: number) => void;
+};
+
+export function MediaViewer({
+  visible,
+  items,
+  initialIndex,
+  onClose,
+}: MediaViewerProps) {
+  const { styles } = useStyles();
+  const { width } = useWindowDimensions();
+  const listRef = useRef<FlatList<MediaViewerItem>>(null);
+  const [current, setCurrent] = useState(initialIndex);
+  // Mute-carry (PDT-4309 / PDT-4312): the first video plays unmuted; each swipe
+  // defaults the next video to muted — until the user unmutes, after which
+  // subsequent videos stay unmuted.
+  const [muted, setMuted] = useState(false);
+  const keepUnmutedRef = useRef(false);
+
+  useEffect(() => {
+    if (!visible) return;
+    setCurrent(initialIndex);
+    setMuted(false);
+    keepUnmutedRef.current = false;
+  }, [visible, initialIndex]);
+
+  const onMomentumScrollEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!width) return;
+      const idx = Math.round(e.nativeEvent.contentOffset.x / width);
+      if (idx !== current) {
+        setCurrent(idx);
+        setMuted(!keepUnmutedRef.current);
+      }
+    },
+    [width, current]
+  );
+
+  const toggleMute = useCallback(() => {
+    setMuted((prev) => {
+      const next = !prev;
+      keepUnmutedRef.current = !next; // user unmuted -> keep unmuted afterwards
+      return next;
+    });
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: MediaViewerItem; index: number }) => (
+      <View style={[styles.page, { width }]}>
+        {item.type === 'video' ? (
+          // pointerEvents none so horizontal swipes reach the pager instead of
+          // being captured by the native video view.
+          <View style={styles.media} pointerEvents="none">
+            <Video
+              source={
+                item.videoType
+                  ? { uri: item.uri, type: item.videoType }
+                  : { uri: item.uri }
+              }
+              style={styles.media}
+              resizeMode="contain"
+              paused={index !== current || !visible}
+              muted={muted && index === current}
+              repeat
+              playInBackground={false}
+              playWhenInactive={false}
+            />
+          </View>
+        ) : (
+          <Image
+            source={{ uri: item.uri }}
+            style={styles.media as StyleProp<ImageStyle>}
+            resizeMode="contain"
+          />
+        )}
+      </View>
+    ),
+    [styles, width, current, muted, visible]
+  );
+
+  const currentIsVideo = items[current]?.type === 'video';
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={() => onClose(current)}
+    >
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <TouchableOpacity
+            style={styles.headerBtn}
+            onPress={() => onClose(current)}
+          >
+            <SvgXml xml={clearIcon('white')} width={28} height={28} />
+          </TouchableOpacity>
+          <Text style={styles.counter}>
+            {current + 1}/{items.length}
+          </Text>
+          <View style={styles.headerBtn__right}>
+            {currentIsVideo && (
+              <TouchableOpacity onPress={toggleMute}>
+                <SvgXml
+                  xml={muted ? soundOffIcon('#FFFFFF') : soundOnIcon('#FFFFFF')}
+                  width={24}
+                  height={24}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+        <FlatList
+          ref={listRef}
+          data={items}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          keyExtractor={(it, i) => `${it.uri}-${i}`}
+          renderItem={renderItem}
+          getItemLayout={(_, index) => ({
+            length: width,
+            offset: width * index,
+            index,
+          })}
+          initialScrollIndex={initialIndex}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+        />
+      </View>
+    </Modal>
+  );
+}

package/src/social/components/MediaViewer/index.tsx

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

package/src/social/components/MediaViewer/styles.ts

@@ -0,0 +1,53 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#000000',
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      height: 56,
+      zIndex: 2,
+    },
+    headerBtn: {
+      minWidth: 44,
+      height: 44,
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+    },
+    headerBtn__right: {
+      minWidth: 44,
+      height: 44,
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+    },
+    counter: {
+      color: '#FFFFFF',
+      fontSize: 14,
+      fontWeight: '600',
+    },
+    muteGlyph: {
+      fontSize: 20,
+    },
+    page: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    media: {
+      width: '100%',
+      height: '100%',
+    },
+  });
+
+  return { styles, theme };
+};