@amityco/react-native-social-uikit 4.0.0-b511cc3d.0 → 4.0.0-d2b8337.0

package/src/v4/PublicApi/Pages/AmityLivestreamPlayerPage/AmityLivestreamPlayerPage.tsx

@@ -1,72 +1,131 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { View, TouchableOpacity, Platform } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  useAnimatedValue,
+} from 'react-native';
 import { useStyles } from './styles';
+// @ts-ignore
+// import { AmityStreamPlayer } from '@amityco/video-player-react-native';
 import LiveStreamEndThumbnail from '../../../component/LivestreamContent/LivestreamEndedThumbnail';
+import { Animated } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-import { close } from '../../../assets/icons';
+import {
+  getPostTopic,
+  PostRepository,
+  StreamRepository,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+import { close, pause, resume } from '../../../assets/icons';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../routes/RouteParamList';
-import { RoomStatus } from '../../../enum/roomStatus';
+import { LivestreamStatus } from '../../../enum/livestreamStatus';
 import LiveStreamIdleThumbnail from '../../../component/LivestreamContent/LivestreamIdleThumbnail';
 import { Typography } from '../../../component/Typography/Typography';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import NetInfo from '@react-native-community/netinfo';
 import { CircularProgressIndicator } from '../../../component/CircularProgressIndicator';
-import Video from 'react-native-video';
-import useAuth from '../../../../hooks/useAuth';
-import {
-  usePostSubscription,
-  useRoomSubscription,
-} from '../../../../v4/hook/index';
-import { RoomRepository } from '@amityco/ts-sdk-react-native';
+const usePostSubscription = (postId: string) => {
+  const [subscribedPost, setSubscribedPost] = useState<Amity.Post>(null);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (postId) {
+      unsubscribe = PostRepository.getPost(postId, ({ data }) => {
+        setSubscribedPost(data);
+      });
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [postId]);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (subscribedPost) {
+      unsubscribe = subscribeTopic(getPostTopic(subscribedPost));
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [subscribedPost]);
+
+  return { subscribedPost };
+};
 
 function AmityLiveStreamPlayerPage() {
+  const ref = useRef<any>(null);
   const { styles, theme } = useStyles();
+  const controlOpacity = useAnimatedValue(0);
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const route = useRoute<RouteProp<RootStackParamList, 'LivestreamPlayer'>>();
 
+  const [error, setError] = useState<any>(null);
+  const [isPlaying, setIsPlaying] = useState(true);
   const [reconnecting, setReconnecting] = useState(false);
-  const [room, setRoom] = useState<Amity.Room | null>(null);
-  const [videoError, setVideoError] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [, setPlayerInitialized] = useState(false);
-  const [videoKey, setVideoKey] = useState(0);
-  const [isPaused, setIsPaused] = useState(false);
-  const [wasLive, setWasLive] = useState(false);
+  const [livestream, setLivestream] = useState<Amity.Stream>();
+
+  const { streamId, post } = route.params;
 
-  const { roomId, post } = route.params;
   const { subscribedPost } = usePostSubscription(post?.postId);
-  useRoomSubscription({ room });
 
-  const { client } = useAuth();
-  const videoRef = useRef<any>(null);
-  const isStreamEnding = useRef(false);
+  const onStopPlayer = () => {
+    ref.current && ref.current.pause();
+    setIsPlaying(false);
+  };
+
+  const onStartPlayer = () => {
+    ref.current && ref.current.play();
+    setIsPlaying(true);
+  };
+
+  const onPressControlButton = () => {
+    isPlaying ? onStopPlayer() : onStartPlayer();
+  };
+
+  const onToggleControl = () => {
+    controlOpacity.stopAnimation((currentValue) => {
+      Animated.timing(controlOpacity, {
+        toValue: currentValue === 0 ? 1 : 0,
+        duration: 300,
+        useNativeDriver: false,
+      }).start();
+    });
+  };
 
   useEffect(() => {
-    const unsubscribe = RoomRepository.getRoom(
-      roomId,
+    const unsubscribe = StreamRepository.getStreamById(
+      streamId,
       ({ data, loading, error: streamError }) => {
         if (streamError) setError(streamError);
-        if (!loading && data) setRoom({ ...data });
+        if (!loading && data) setLivestream({ ...data });
       }
     );
 
     return () => unsubscribe();
-  }, [roomId]);
+  }, [streamId]);
 
   useEffect(() => {
-    if (room?.status === RoomStatus.live) {
-      setWasLive(true);
+    if (livestream?.isDeleted || subscribedPost?.isDeleted) {
+      navigation.replace('PostDetail', { postId: subscribedPost?.postId });
     }
-  }, [room?.status]);
+  }, [livestream?.isDeleted, subscribedPost, navigation]);
 
   useEffect(() => {
-    if (room?.isDeleted || subscribedPost?.isDeleted) {
-      navigation.replace('PostDetail', { postId: subscribedPost?.postId });
+    const isTerminated =
+      livestream?.moderation?.terminateLabels &&
+      livestream?.moderation?.terminateLabels?.length > 0;
+    const isLiveOrEnded =
+      livestream?.status === LivestreamStatus.live ||
+      livestream?.status === LivestreamStatus.ended;
+
+    if (isLiveOrEnded && isTerminated) {
+      navigation.replace('LivestreamTerminated', { type: 'viewer' });
     }
-  }, [room?.isDeleted, subscribedPost, navigation]);
+  }, [livestream?.moderation?.terminateLabels, livestream?.status, navigation]);
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
@@ -75,121 +134,24 @@ function AmityLiveStreamPlayerPage() {
     return () => unsubscribe();
   }, []);
 
-  useEffect(() => {
-    if (!room?.status) return;
-
-    const shouldEnd =
-      room.status === RoomStatus.ended ||
-      (room.status === RoomStatus.recorded && wasLive);
-
-    if (!shouldEnd || isStreamEnding.current) return;
-
-    isStreamEnding.current = true;
-    setIsPaused(true);
-
-    if (Platform.OS === 'ios') {
-      // iOS: ONLY dismiss fullscreen. DO NOT touch key. DO NOT unmount.
-      requestAnimationFrame(() => {
-        videoRef.current?.dismissFullscreenPlayer?.();
-      });
-    } else {
-      // Android: HARD destroy
-      setTimeout(() => {
-        setVideoKey((prev) => prev + 1);
-      }, 50);
-    }
-  }, [room?.status, wasLive]);
-
-  useEffect(() => {
-    let timer: ReturnType<typeof setTimeout> | null = null;
-
-    if (
-      videoRef.current &&
-      room &&
-      room.status === RoomStatus.live &&
-      !videoError &&
-      Platform.OS === 'ios'
-    ) {
-      const isTerminated =
-        room?.moderation?.terminateLabels &&
-        room?.moderation?.terminateLabels?.length > 0;
-
-      if (!isTerminated) {
-        timer = setTimeout(() => {
-          videoRef.current?.presentFullscreenPlayer();
-        }, 100);
-      }
-    }
-
-    return () => {
-      if (timer !== null) {
-        clearTimeout(timer);
-      }
-    };
-  }, [room, videoError]);
-
-  const isTerminated =
-    room?.moderation?.terminateLabels &&
-    room?.moderation?.terminateLabels?.length > 0;
-
-  const shouldShowEndThumbnail =
-    room?.status === RoomStatus.ended ||
-    (room?.status === RoomStatus.recorded && wasLive) ||
-    isTerminated;
-
-  useEffect(() => {
-    if (!room?.status) return;
-
-    const shouldEnd =
-      room.status === RoomStatus.ended ||
-      (room.status === RoomStatus.recorded && wasLive);
-
-    if (!shouldEnd || isStreamEnding.current) return;
-
-    isStreamEnding.current = true;
-    setIsPaused(true);
-
-    if (Platform.OS === 'ios') {
-      // iOS: just dismiss fullscreen, DO NOT destroy immediately
-      if (videoRef.current) {
-        try {
-          videoRef.current.dismissFullscreenPlayer?.();
-        } catch {}
-      }
-    } else {
-      // Android: HARD destroy
-      setTimeout(() => {
-        setVideoKey((prev) => prev + 1);
-      }, 50);
-    }
-  }, [room?.status, wasLive]);
-
-  if (!room || error) {
+  if (!livestream || error)
     return (
       <SafeAreaView style={styles.container}>
         <LiveStreamIdleThumbnail />
       </SafeAreaView>
     );
-  }
-
-  const closePlayer = () => {
-    navigation.goBack();
-  };
-
-  const videoUrl =
-    room.status === RoomStatus.recorded
-      ? room.recordedPlaybackInfos[0]?.url
-      : room.livePlaybackUrl;
 
   return (
     <SafeAreaView style={styles.container}>
-      {shouldShowEndThumbnail ? (
+      {livestream.status === LivestreamStatus.ended ? (
         <>
           <View style={styles.steamEndContainer}>
             <LiveStreamEndThumbnail />
           </View>
-
-          <TouchableOpacity style={styles.closeButton} onPress={closePlayer}>
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={navigation.goBack}
+          >
             <SvgXml
               xml={close()}
               width="28"
@@ -198,70 +160,14 @@ function AmityLiveStreamPlayerPage() {
             />
           </TouchableOpacity>
         </>
-      ) : (
-        <View style={styles.container}>
-          {(room.status === RoomStatus.live ||
-            room.status === RoomStatus.waiting_reconnect) && (
-            <View style={styles.indicator}>
-              <View style={styles.status}>
-                <Typography.CaptionBold style={styles.live}>
-                  LIVE
-                </Typography.CaptionBold>
-              </View>
-            </View>
-          )}
-
-          {!shouldShowEndThumbnail && (
-            <Video
-              key={
-                Platform.OS === 'android' ? `${videoUrl}-${videoKey}` : videoUrl
-              }
-              ref={videoRef}
-              source={{
-                uri:
-                  room.status === RoomStatus.recorded
-                    ? room.recordedPlaybackInfos[0]?.url
-                    : room.livePlaybackUrl,
-                headers: {
-                  Authorization: `Bearer ${client.token.accessToken}`,
-                },
-              }}
-              style={styles.container}
-              resizeMode="contain"
-              controls={room?.status === RoomStatus.recorded && !wasLive}
-              fullscreen={
-                Platform.OS === 'ios' && room.status !== RoomStatus.recorded
-              }
-              fullscreenOrientation="landscape"
-              paused={isPaused}
-              muted={false}
-              volume={1.0}
-              audioOutput="speaker"
-              playInBackground={false}
-              playWhenInactive={false}
-              repeat={false}
-              onLoad={() => {
-                setPlayerInitialized(true);
-                if (room.status === RoomStatus.recorded) {
-                  setIsPaused(false);
-                }
-              }}
-              onError={(e) => {
-                console.log('Video Error: ', e);
-                setVideoError(true);
-              }}
-              onFullscreenPlayerDidDismiss={() => {
-                if (Platform.OS === 'ios') {
-                  closePlayer();
-                }
-              }}
-            />
-          )}
-        </View>
-      )}
-
-      {((room.status === RoomStatus.live && reconnecting) ||
-        room.status === RoomStatus.waiting_reconnect) && (
+      ) : // <AmityStreamPlayer
+      //   ref={ref}
+      //   stream={livestream}
+      //   onBack={navigation.goBack}
+      //   status={livestream.status === 'live' ? 'live' : 'recorded'}
+      // />
+      null}
+      {livestream.status === LivestreamStatus.live && reconnecting && (
         <View style={styles.connecting}>
           <CircularProgressIndicator size={40} strokeWidth={2} />
           <Typography.TitleBold style={styles.text}>
@@ -273,6 +179,54 @@ function AmityLiveStreamPlayerPage() {
           </Typography.Caption>
         </View>
       )}
+      {livestream.status === LivestreamStatus.live && (
+        <>
+          <View style={styles.indicator}>
+            <View style={styles.status}>
+              <Typography.CaptionBold style={styles.live}>
+                LIVE
+              </Typography.CaptionBold>
+            </View>
+          </View>
+          <TouchableWithoutFeedback onPress={onToggleControl}>
+            <Animated.View
+              style={[styles.control, { opacity: controlOpacity }]}
+            >
+              <TouchableOpacity
+                style={styles.closeButton}
+                onPress={navigation.goBack}
+              >
+                <SvgXml
+                  xml={close()}
+                  width="28"
+                  height="28"
+                  color={theme.colors.background}
+                />
+              </TouchableOpacity>
+
+              <View style={styles.controller}>
+                <TouchableOpacity onPress={onPressControlButton}>
+                  {isPlaying ? (
+                    <SvgXml
+                      width={32}
+                      height={32}
+                      xml={pause()}
+                      color={theme.colors.background}
+                    />
+                  ) : (
+                    <SvgXml
+                      width={32}
+                      height={32}
+                      xml={resume()}
+                      color={theme.colors.background}
+                    />
+                  )}
+                </TouchableOpacity>
+              </View>
+            </Animated.View>
+          </TouchableWithoutFeedback>
+        </>
+      )}
     </SafeAreaView>
   );
 }

package/src/v4/PublicApi/Pages/AmityLivestreamPlayerPage/styles.ts

@@ -13,11 +13,9 @@ export const useStyles = () => {
       position: 'relative',
       backgroundColor: '#000000',
     },
-
     steamEndContainer: {
       flex: 1,
       justifyContent: 'center',
-      backgroundColor: '#000000',
     },
     indicator: {
       left: 16,

package/src/v4/PublicApi/Pages/AmityPostComposerPage/AmityPostComposerPage.tsx

@@ -107,12 +107,16 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const [deletedPostIds, setDeletedPostIds] = useState<string[]>([]);
   const [isUploading, setIsUploading] = useState(false);
   const [hasChangedAttachment, setHasChangedAttachment] = useState(false);
+  const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());
+  const [videoErrors, setVideoErrors] = useState<Set<string>>(new Set());
   const privateCommunityId = !community?.isPublic && community?.communityId;
   const title = isEditMode
     ? 'Edit Post'
     : community?.displayName ?? 'My Timeline';
   const isInputValid =
     !isUploading &&
+    imageErrors.size === 0 &&
+    videoErrors.size === 0 &&
     inputMessage.trim().length <= MAXIMUM_POST_CHARACTERS &&
     (inputMessage.trim().length > 0 ||
       displayImages.length > 0 ||
@@ -598,10 +602,45 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     }
   }, [displayVideos.length, processMedia]);
 
+  const handleImageUploadError = useCallback(
+    (hasError: boolean, source: string) => {
+      setImageErrors((prev) => {
+        const newSet = new Set(prev);
+        if (hasError) {
+          newSet.add(source);
+        } else {
+          newSet.delete(source);
+        }
+        return newSet;
+      });
+    },
+    []
+  );
+
+  const handleVideoUploadError = useCallback(
+    (hasError: boolean, source: string) => {
+      setVideoErrors((prev) => {
+        const newSet = new Set(prev);
+        if (hasError) {
+          newSet.add(source);
+        } else {
+          newSet.delete(source);
+        }
+        return newSet;
+      });
+    },
+    []
+  );
+
   const handleOnCloseImage = useCallback(
     (originalPath: string, _, postId: string) => {
       setHasChangedAttachment(true);
       setDeletedPostIds((prev) => [...prev, postId]);
+      setImageErrors((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(originalPath);
+        return newSet;
+      });
       setDisplayImages((prevData) => {
         const newData = prevData.filter(
           (item: IDisplayImage) => item.url !== originalPath
@@ -615,6 +654,11 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     (originalPath: string, _, postId: string) => {
       setHasChangedAttachment(true);
       setDeletedPostIds((prev) => [...prev, postId]);
+      setVideoErrors((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(originalPath);
+        return newSet;
+      });
       setDisplayVideos((prevData) => {
         const newData = prevData.filter(
           (item: IDisplayImage) => item.url !== originalPath
@@ -760,6 +804,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
                       onClose={handleOnCloseImage}
                       index={index} //TODO: Fix this without index
                       onLoadFinish={handleOnFinishImage}
+                      onUploadError={handleImageUploadError}
                       isUploaded={item.isUploaded}
                       fileId={item.fileId}
                       fileCount={displayImages.length}
@@ -783,6 +828,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
                       onClose={handleOnCloseVideo}
                       index={index} //TODO: Fix this without index
                       onLoadFinish={handleOnFinishVideo}
+                      onUploadError={handleVideoUploadError}
                       isUploaded={item.isUploaded}
                       fileId={item.fileId}
                       thumbNail={item.thumbNail as string}