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

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

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import NetInfo from '@react-native-community/netinfo';
 import {
   View,
   TouchableOpacity,
@@ -9,7 +10,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 {
+  mediaRemoveIcon,
+  playBtn,
+  toastIcon,
+  videoControlIcon,
+} from '../../../core/assets/icons/xml';
 import { useStyles } from './styles';
 import Video from 'react-native-video';
 import { useNavigation } from '@react-navigation/native';
@@ -20,6 +26,13 @@ import { useUIKitDispatch } from '../../../core/stores/store';
 
 interface OverlayImageProps {
   source: string;
+  /** Local path to render/decode from, when the item still has one. `source`
+   * stays the identity/bookkeeping key and becomes the remote url once the
+   * upload finishes; decoding the thumbnail from that url means an
+   * already-uploaded frame goes grey the moment the device is offline
+   * Falls back to `source` for edit-mode children, which have no
+   * local file. */
+  displayUri?: string;
   onClose?: (originalPath: string, fileId?: string, postId?: string) => void;
   onLoadFinish?: (
     fileId: string,
@@ -38,7 +51,12 @@ interface OverlayImageProps {
   isEditMode?: boolean;
   fileCount?: number;
   postId?: string;
-  setIsUploading?: (arg: boolean) => void;
+  // Reports this frame's upload state keyed by its own `source`, so the
+  // composer can gate Post on every frame at once. The old shared
+  // `setIsUploading` boolean was flipped back to false by whichever upload
+  // finished first, unlocking Post while the other frames were still in flight.
+  onUploadingChange?: (isUploading: boolean, source: string) => void;
+  carousel?: boolean;
 }
 const LoadingVideo = ({
   source,
@@ -47,13 +65,15 @@ const LoadingVideo = ({
   onLoadFinish,
   onUploadError,
   isUploaded = false,
+  displayUri,
   thumbNail,
   onPlay,
   fileId,
   isEditMode = false,
   fileCount,
   postId,
-  setIsUploading,
+  onUploadingChange,
+  carousel = false,
 }: OverlayImageProps) => {
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
@@ -62,6 +82,10 @@ const LoadingVideo = ({
   const [isProcess, setIsProcess] = useState<boolean>(false);
   const [isUploadError, setIsUploadError] = useState(false);
   const [thumbNailImage, setThumbNailImage] = useState(thumbNail ?? '');
+  // `uploadFileToAmity` is memoised on [source] only, so reading the state
+  // there would capture the empty first-render value. Mirror it into a ref so
+  // the upload callback always sees the frame that was actually decoded.
+  const thumbNailImageRef = useRef(thumbNail ?? '');
   const styles = useStyles();
   const [playingUri, setPlayingUri] = useState<string>('');
   const [isPause, setIsPause] = useState<boolean>(true);
@@ -82,11 +106,12 @@ const LoadingVideo = ({
 
   const handleLoadEnd = () => {
     setLoading(false);
-    setIsUploading(false);
+    onUploadingChange?.(false, source);
   };
 
   const processThumbNail = async () => {
-    const generatedThumbNail = await createVideoThumbnail(source);
+    const generatedThumbNail = await createVideoThumbnail(displayUri ?? source);
+    thumbNailImageRef.current = generatedThumbNail.path;
     setThumbNailImage(generatedThumbNail.path);
   };
   useEffect(() => {
@@ -100,8 +125,25 @@ const LoadingVideo = ({
   }, [progress]);
 
   const uploadFileToAmity = useCallback(async () => {
-    setIsUploading(true);
+    onUploadingChange?.(true, source);
     setIsUploadError(false);
+    // A retry re-enters this function with `loading` already false — the failed
+    // attempt's `handleLoadEnd` cleared it and nothing ever set it back, so
+    // `setLoading` only ever ran downwards in this component. The frame then
+    // re-uploaded with no spinner at all, which reads as "finished instantly"
+    // while Post stays disabled for the length of the upload.
+    // Progress and the processing flag are stale from the failed attempt too,
+    // so reset the whole visual upload state here rather than only in the
+    // mount effect, which does not re-run on a retry.
+    setLoading(true);
+    setProgress(0);
+    setIsProcess(false);
+    // Clearing the local flag alone left this source inside the parent's
+    // `videoErrors` set, and that set is otherwise only cleared by the
+    // mount effect below — which does not re-run on a retry, since none of
+    // `fileId`/`isUploaded`/`source` changed. Post stayed disabled even after
+    // the retry uploaded fine, so tell the parent the error is gone up front.
+    onUploadError?.(false, source);
     try {
       const file: Amity.File<any>[] = await uploadVideoFile(
         source,
@@ -119,7 +161,12 @@ const LoadingVideo = ({
             file[0]?.attributes.name as string,
             index as number,
             source,
-            thumbNail
+            // Hand back the frame this component decoded, not the incoming
+            // prop — for a newly picked video that prop is empty, so the
+            // generated thumbnail used to be dropped on the floor. The
+            // composer stores it so the feed can show it while the server is
+            // still transcoding (PDT-4904).
+            thumbNailImageRef.current || thumbNail
           );
       } else {
         handleLoadEnd();
@@ -137,6 +184,30 @@ const LoadingVideo = ({
     }
   }, [source]);
 
+  // The frame is expected to end up uploaded, and Post enabled, once
+  // connectivity returns. Nothing retried on its own —
+  // the error key only cleared on a manual tap on that specific frame, and the
+  // peek carousel can leave a failed frame off-screen entirely, so Post stayed
+  // disabled with no visible cause. Retry when the device regains a
+  // connection, using the same NetInfo listener idiom as post Detail and the
+  // livestream screens.
+  //
+  // Gated on a disconnected -> connected transition, not merely on being
+  // connected: addEventListener fires immediately with the current state, so a
+  // failure that happened while online (a server error, say) would otherwise
+  // re-fire on every resubscribe and spin.
+  const wasDisconnectedRef = useRef(false);
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      const isConnected = !!state.isConnected;
+      if (isConnected && wasDisconnectedRef.current && isUploadError) {
+        uploadFileToAmity();
+      }
+      wasDisconnectedRef.current = !isConnected;
+    });
+    return () => unsubscribe();
+  }, [isUploadError, uploadFileToAmity]);
+
   const handleDelete = async () => {
     if (fileId && !isEditMode) {
       await deleteAmityFile(fileId);
@@ -156,20 +227,51 @@ const LoadingVideo = ({
   }, [fileId, isUploaded, source]);
 
   const handleOnPlay = () => {
+    // In carousel mode the parent (onPlay) owns the full-screen media viewer,
+    // so this component never mounts the inline <Video> and never receives a
+    // dismiss callback to unpause with. Leaving `isPause` alone keeps the play
+    // icon rendered, which is what the frame shows once the viewer closes
+    // (PDT-4904); toggling it here hid the icon for the rest of the session.
+    if (onPlay) {
+      onPlay(source);
+      return;
+    }
     setIsPause(!isPause);
     playVideoFullScreen(source);
-    onPlay && onPlay(source);
   };
 
+  // A frame can be removed (or its source swapped) while its upload is still
+  // in flight, in which case `handleLoadEnd` never runs and the composer would
+  // keep waiting on an entry no mounted child owns any more — leaving Post
+  // disabled forever. Clearing it from this cleanup keeps the
+  // bookkeeping in the same component that added it.
+  useEffect(() => {
+    return () => {
+      onUploadingChange?.(false, source);
+    };
+  }, [onUploadingChange, source]);
+
   const onRetryUpload = () => {
     uploadFileToAmity();
   };
 
   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 ? (
@@ -193,7 +295,7 @@ const LoadingVideo = ({
         <View style={styles.image} />
       )}
 
-      {loading ? (
+      {loading && (
         <View style={styles.overlay}>
           {isProcess ? (
             <Progress.CircleSnail
@@ -211,19 +313,31 @@ const LoadingVideo = ({
             />
           )}
         </View>
-      ) : isUploadError ? (
+      )}
+      {!loading && isUploadError && (
         <TouchableOpacity style={styles.overlay} onPress={onRetryUpload}>
           <SvgXml xml={toastIcon()} width="24" height="24" />
         </TouchableOpacity>
-      ) : (
-        <TouchableOpacity
-          style={styles.closeButton}
-          disabled={(loading || isProcess) && !isUploadError}
-          onPress={handleDelete}
-        >
-          <SvgXml xml={closeIcon('white')} width="12" height="12" />
-        </TouchableOpacity>
       )}
+
+      {/* Sibling of the overlays, never an `else` branch of them: a failed
+          frame must keep its remove button, otherwise a video that cannot
+          upload can never be taken out of the composer. This is
+          the shape LoadingImage already uses, and it is what the `disabled`
+          guard below was written for — inside the old if/else chain that
+          `!isUploadError` term was unreachable. */}
+      <TouchableOpacity
+        style={styles.closeButton}
+        // The button matches web at 28dp, which is still under Apple's 44pt
+        // minimum touch target. Grow the touch area rather than the black
+        // disc, so the visual stays in parity while the frame stays tappable:
+        // 28 + 8 on each side lands exactly on 44.
+        hitSlop={8}
+        disabled={(loading || isProcess) && !isUploadError}
+        onPress={handleDelete}
+      >
+        <SvgXml xml={mediaRemoveIcon()} width="20" height="20" />
+      </TouchableOpacity>
     </View>
   );
 };

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%',
@@ -37,11 +41,20 @@ export const useStyles = () => {
     },
     closeButton: {
       position: 'absolute',
-      top: 7,
-      right: 7,
-      padding: 7,
-      backgroundColor: 'rgba(255, 255, 255, 0.4)',
+      // Matched to the web UIKit's remove button, which is 20px of icon inside
+      // 4px of padding at an 8px offset. The old 12/7 pair came to nearly the
+      // same 26dp outer size but filled only 46% of the circle with the glyph
+      // against web's 71%, so it read as a heavy black disc with a tiny cross
+      // in it.
+      top: 8,
+      right: 8,
+      padding: 4,
+      // Matches LoadingImage exactly: the icon is closeIcon('white') in both,
+      // so the white scrim this used to carry left a white-on-white button
+      // that all but disappeared over a light frame.
+      backgroundColor: 'rgba(0, 0, 0, 0.4)',
       borderRadius: 72,
+      zIndex: 10,
     },
     playButton: {
       width: 100,

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

@@ -0,0 +1,383 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  FlatList,
+  GestureResponderEvent,
+  Image,
+  ImageStyle,
+  LayoutChangeEvent,
+  Modal,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  PanResponder,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import Video, {
+  type OnLoadData,
+  type OnProgressData,
+  type VideoRef,
+} from 'react-native-video';
+import { SvgXml } from 'react-native-svg';
+import {
+  clearIcon,
+  pauseControlIcon,
+  playControlIcon,
+  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;
+};
+
+const CONTROLS_AUTO_HIDE_MS = 3000;
+
+function formatTime(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return '0:00';
+  const total = Math.floor(seconds);
+  const mins = Math.floor(total / 60);
+  const secs = total % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+export function MediaViewer({
+  visible,
+  items,
+  initialIndex,
+  onClose,
+}: MediaViewerProps) {
+  const { styles } = useStyles();
+  const { width } = useWindowDimensions();
+  const listRef = useRef<FlatList<MediaViewerItem>>(null);
+  const videoRef = useRef<VideoRef | null>(null);
+  const [current, setCurrent] = useState(initialIndex);
+  // The sound setting belongs to the viewing session, not to one frame: the
+  // first video opens unmuted and swiping carries whatever the viewer last
+  // chose. Re-defaulting each new frame to muted meant a swipe silenced a
+  // session the viewer never muted, since opening unmuted is a default rather
+  // than an explicit choice.
+  const [muted, setMuted] = useState(false);
+
+  // --- playback controls (ported from web VideoPlayerControls) ---
+  const [userPaused, setUserPaused] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [scrubbing, setScrubbing] = useState(false);
+  const [controlsVisible, setControlsVisible] = useState(true);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearHideTimer = useCallback(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = null;
+    }
+  }, []);
+
+  const scheduleHide = useCallback(() => {
+    clearHideTimer();
+    hideTimer.current = setTimeout(
+      () => setControlsVisible(false),
+      CONTROLS_AUTO_HIDE_MS
+    );
+  }, [clearHideTimer]);
+
+  const revealControls = useCallback(() => {
+    setControlsVisible(true);
+    scheduleHide();
+  }, [scheduleHide]);
+
+  const resetPlayback = useCallback(() => {
+    setUserPaused(false);
+    setProgress(0);
+    setDuration(0);
+    setScrubbing(false);
+  }, []);
+
+  useEffect(() => {
+    if (!visible) {
+      clearHideTimer();
+      return;
+    }
+    setCurrent(initialIndex);
+    setMuted(false);
+    resetPlayback();
+    revealControls();
+  }, [visible, initialIndex, resetPlayback, revealControls, clearHideTimer]);
+
+  const onMomentumScrollEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!width) return;
+      const idx = Math.round(e.nativeEvent.contentOffset.x / width);
+      if (idx !== current) {
+        setCurrent(idx);
+        resetPlayback();
+        revealControls();
+      }
+    },
+    [width, current, resetPlayback, revealControls]
+  );
+
+  const toggleMute = useCallback(() => {
+    setMuted((prev) => !prev);
+    revealControls();
+  }, [revealControls]);
+
+  const togglePlay = useCallback(() => {
+    setUserPaused((p) => !p);
+    revealControls();
+  }, [revealControls]);
+
+  const onLoad = useCallback((data: OnLoadData) => {
+    setDuration(data.duration ?? 0);
+  }, []);
+
+  const onProgress = useCallback(
+    (data: OnProgressData) => {
+      if (!scrubbing) setProgress(data.currentTime);
+    },
+    [scrubbing]
+  );
+
+  const seekToX = useCallback(
+    (locationX: number) => {
+      if (trackWidth <= 0 || duration <= 0) return;
+      const ratio = Math.max(0, Math.min(1, locationX / trackWidth));
+      setProgress(ratio * duration);
+    },
+    [trackWidth, duration]
+  );
+
+  // Scrubber: a horizontal drag inside a horizontal pager. We claim the gesture
+  // and disable FlatList scroll while scrubbing so the two don't fight.
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (e: GestureResponderEvent) => {
+          setScrubbing(true);
+          clearHideTimer();
+          setControlsVisible(true);
+          seekToX(e.nativeEvent.locationX);
+        },
+        onPanResponderMove: (e: GestureResponderEvent) => {
+          seekToX(e.nativeEvent.locationX);
+        },
+        onPanResponderRelease: (e: GestureResponderEvent) => {
+          const ratio =
+            trackWidth > 0
+              ? Math.max(0, Math.min(1, e.nativeEvent.locationX / trackWidth))
+              : 0;
+          const target = ratio * (duration || 0);
+          videoRef.current?.seek(target);
+          setProgress(target);
+          setScrubbing(false);
+          scheduleHide();
+        },
+        onPanResponderTerminate: () => {
+          setScrubbing(false);
+          scheduleHide();
+        },
+      }),
+    [seekToX, clearHideTimer, scheduleHide, trackWidth, duration]
+  );
+
+  const onTrackLayout = useCallback((e: LayoutChangeEvent) => {
+    setTrackWidth(e.nativeEvent.layout.width);
+  }, []);
+
+  // The control overlay must live INSIDE the page (a descendant of the pager),
+  // so horizontal drags on the tap-target are reclaimed by the FlatList's
+  // native scroll — a container-level sibling overlay would swallow swipes.
+  const renderControls = useCallback(() => {
+    const progressPct =
+      duration > 0 ? Math.max(0, Math.min(1, progress / duration)) : 0;
+    return (
+      <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+        {/* full-surface tap target: taps toggle controls; horizontal moves
+            fall through to the pager (Pressable cancels on move). */}
+        <Pressable
+          style={StyleSheet.absoluteFill}
+          onPress={() =>
+            controlsVisible ? setControlsVisible(false) : revealControls()
+          }
+        />
+        {controlsVisible && (
+          <>
+            {/* Centered play/pause */}
+            <View style={styles.centerControls} pointerEvents="box-none">
+              <TouchableOpacity style={styles.centerBtn} onPress={togglePlay}>
+                <SvgXml
+                  xml={
+                    userPaused
+                      ? playControlIcon('#FFFFFF')
+                      : pauseControlIcon('#FFFFFF')
+                  }
+                  width={24}
+                  height={24}
+                />
+              </TouchableOpacity>
+            </View>
+
+            {/* Bottom bar: time + scrubbable progress */}
+            <View style={styles.controlBar} pointerEvents="box-none">
+              <Text style={styles.controlTime}>
+                {formatTime(progress)} / {formatTime(duration)}
+              </Text>
+              <View
+                style={styles.progressTrack}
+                onLayout={onTrackLayout}
+                {...panResponder.panHandlers}
+              >
+                <View style={styles.progressBg} />
+                <View
+                  style={[
+                    styles.progressFill,
+                    { width: `${progressPct * 100}%` },
+                  ]}
+                />
+              </View>
+            </View>
+          </>
+        )}
+      </View>
+    );
+  }, [
+    styles,
+    controlsVisible,
+    setControlsVisible,
+    revealControls,
+    togglePlay,
+    userPaused,
+    progress,
+    duration,
+    onTrackLayout,
+    panResponder,
+  ]);
+
+  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
+                ref={index === current ? videoRef : undefined}
+                source={
+                  item.videoType
+                    ? { uri: item.uri, type: item.videoType }
+                    : { uri: item.uri }
+                }
+                style={styles.media}
+                resizeMode="contain"
+                paused={index !== current || !visible || userPaused}
+                // Only the frame on screen may be audible. `paused` alone is
+                // not a reliable gag on an off-screen native player, so an
+                // unmuted session must not leave a neighbouring frame able to
+                // emit sound.
+                muted={muted || index !== current}
+                repeat
+                playInBackground={false}
+                playWhenInactive={false}
+                onLoad={index === current ? onLoad : undefined}
+                onProgress={index === current ? onProgress : undefined}
+              />
+            </View>
+            {index === current && renderControls()}
+          </>
+        ) : (
+          <Image
+            source={{ uri: item.uri }}
+            style={styles.media as StyleProp<ImageStyle>}
+            resizeMode="contain"
+          />
+        )}
+      </View>
+    ),
+    [
+      styles,
+      width,
+      current,
+      muted,
+      visible,
+      userPaused,
+      onLoad,
+      onProgress,
+      renderControls,
+    ]
+  );
+
+  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
+          scrollEnabled={!scrubbing}
+          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';