@amityco/react-native-social-uikit 4.0.0-9b57f0b0.0 → 4.0.0-RC.22

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

@@ -43,6 +43,7 @@ import { Camera, useCameraDevice } from 'react-native-vision-camera';
 import { useRoomSubscription } from '../../../../v4/hook/useRoomSubscription';
 import { useToast } from '../../../../v4/stores/slices/toast';
 import { usePostSubscription } from '../../../../v4/hook';
+import { useRoom } from '../../../../v4/features/room/hooks/useRoom';
 
 // Register WebRTC globals required for LiveKit
 registerGlobals();
@@ -77,8 +78,11 @@ function AmityCreateLivestreamPage() {
   const [isEnding, setIsEnding] = useState<boolean>(false);
   const [countdown, setCountdown] = useState<number | null>(null);
   const [post, setPost] = useState<Amity.Post | null>(null);
-  const [room, setRoom] = useState<Amity.Room | null>(null);
+  const [roomId, setRoomId] = useState<string>('');
   const timerRef = useRef<number | null>(null);
+  const connectionLossTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
   const [isConnecting, setIsConnecting] = useState<boolean>(false);
   const [androidPermission, setAndroidPermission] = useState<boolean>(false);
   const [iOSPermission, setIOSPermission] = useState<boolean>(true);
@@ -90,6 +94,8 @@ function AmityCreateLivestreamPage() {
   );
   const unsubscribeRef = useRef<Amity.Unsubscriber>(null);
 
+  const room = useRoom(roomId);
+
   useRoomSubscription({ room });
 
   const { subscribedPost } = usePostSubscription(post?.postId || '');
@@ -216,7 +222,7 @@ function AmityCreateLivestreamPage() {
         type: 'coHosts',
       });
 
-      setRoom(newStream);
+      setRoomId(newStream.roomId);
 
       if (newStream) {
         const roomTokenResponse = await RoomRepository.getBroadcasterData(
@@ -261,7 +267,7 @@ function AmityCreateLivestreamPage() {
       setIsConnecting(false);
       Alert.alert(
         'Cannot start live stream',
-        'Something went wrong while trying to complete your request.Please try again.',
+        'Something went wrong while trying to complete your request. Please try again.',
         [
           {
             text: 'OK',
@@ -301,7 +307,7 @@ function AmityCreateLivestreamPage() {
           console.log('disposeStream error', e);
         } finally {
           setIsLive(false);
-          setRoom(null);
+          setRoomId('');
           setTitle('');
           setDescription('');
           setTime(0);
@@ -370,33 +376,30 @@ function AmityCreateLivestreamPage() {
   }, []);
 
   useEffect(() => {
-    let threeMinutesTimeout: number;
-
-    if (reconnecting && room && room?.status === RoomStatus.live) {
-      threeMinutesTimeout = setTimeout(() => {
+    if (reconnecting && room?.status === RoomStatus.live) {
+      connectionLossTimeoutRef.current = setTimeout(() => {
         endLiveStream();
       }, 1000 * 60 * 3);
+    } else {
+      if (connectionLossTimeoutRef.current) {
+        clearTimeout(connectionLossTimeoutRef.current);
+        connectionLossTimeoutRef.current = null;
+      }
     }
 
-    if (!reconnecting && room && room?.status === RoomStatus.live) {
-      if (threeMinutesTimeout) {
-        clearTimeout(threeMinutesTimeout);
-        threeMinutesTimeout = null;
+    return () => {
+      if (connectionLossTimeoutRef.current) {
+        clearTimeout(connectionLossTimeoutRef.current);
+        connectionLossTimeoutRef.current = null;
       }
-    }
-  }, [reconnecting, endLiveStream, room]);
+    };
+  }, [reconnecting, endLiveStream, room?.status]);
 
   useEffect(() => {
-    const isTerminated =
-      room?.moderation?.terminateLabels &&
-      room?.moderation?.terminateLabels?.length > 0;
-    const isLiveOrEnded =
-      room?.status === RoomStatus.live || room?.status === RoomStatus.ended;
-
-    if (isLiveOrEnded && isTerminated) {
+    if (room?.status === RoomStatus.terminated) {
       navigation.replace('LivestreamTerminated', { type: 'streamer' });
     }
-  }, [room?.moderation?.terminateLabels, room?.status, navigation]);
+  }, [room?.status, navigation]);
 
   useEffect(() => {
     if (room?.isDeleted || subscribedPost?.isDeleted) {
@@ -451,6 +454,9 @@ function AmityCreateLivestreamPage() {
               setIsConnecting(false);
               setReconnecting(false);
             }}
+            onDisconnected={() => {
+              setReconnecting(true);
+            }}
           >
             <View style={styles.cameraContainer}>
               <View style={styles.camera}>
@@ -557,9 +563,9 @@ function AmityCreateLivestreamPage() {
                       progress={((10 - countdown) / 10) * 100}
                     />
                     <View style={styles.countdownNumberContainer}>
-                      <Typography.Title style={styles.countdownNumber}>
+                      <Typography style={styles.countdownNumber}>
                         {countdown}
-                      </Typography.Title>
+                      </Typography>
                     </View>
                   </View>
                 </View>

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

@@ -29,9 +29,8 @@ function AmityLiveStreamPlayerPage() {
 
   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 [isVideoLoading, setIsVideoLoading] = useState(true);
   const [videoKey, setVideoKey] = useState(0);
   const [isPaused, setIsPaused] = useState(false);
   const [wasLive, setWasLive] = useState(false);
@@ -64,7 +63,10 @@ function AmityLiveStreamPlayerPage() {
 
   useEffect(() => {
     if (room?.isDeleted || subscribedPost?.isDeleted) {
-      navigation.replace('PostDetail', { postId: subscribedPost?.postId });
+      navigation.replace('PostDetail', {
+        postId: subscribedPost?.postId,
+        isDeleted: subscribedPost?.isDeleted,
+      });
     }
   }, [
     navigation,
@@ -106,68 +108,15 @@ function AmityLiveStreamPlayerPage() {
   }, [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);
-      }
+    if (room?.status === RoomStatus.terminated) {
+      navigation.replace('LivestreamTerminated', { type: 'viewer' });
     }
-
-    return () => {
-      if (timer !== null) {
-        clearTimeout(timer);
-      }
-    };
-  }, [room, videoError]);
-
-  const isTerminated =
-    room?.moderation?.terminateLabels &&
-    room?.moderation?.terminateLabels?.length > 0;
+  }, [room?.status, navigation]);
 
   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]);
+    (room as any)?.user?.isGlobalBan;
 
   if (!room || error) {
     return (
@@ -206,7 +155,7 @@ function AmityLiveStreamPlayerPage() {
       ) : (
         <View style={styles.container}>
           {(room.status === RoomStatus.live ||
-            room.status === RoomStatus.waiting_reconnect) && (
+            room.status === RoomStatus.waitingReconnect) && (
             <View style={styles.indicator}>
               <View style={styles.status}>
                 <Typography.CaptionBold style={styles.live}>
@@ -228,15 +177,13 @@ function AmityLiveStreamPlayerPage() {
                     ? room.recordedPlaybackInfos[0]?.url
                     : room.livePlaybackUrl,
                 headers: {
-                  Authorization: `Bearer ${client.token.accessToken}`,
+                  Authorization: `Bearer ${client?.token?.accessToken}`,
                 },
+                type: 'm3u8',
               }}
               style={styles.container}
-              resizeMode="contain"
-              controls={room?.status === RoomStatus.recorded && !wasLive}
-              fullscreen={
-                Platform.OS === 'ios' && room.status !== RoomStatus.recorded
-              }
+              resizeMode="cover"
+              controls={true}
               fullscreenOrientation="landscape"
               paused={isPaused}
               muted={false}
@@ -246,27 +193,24 @@ function AmityLiveStreamPlayerPage() {
               playWhenInactive={false}
               repeat={false}
               onLoad={() => {
-                setPlayerInitialized(true);
+                setIsVideoLoading(false);
                 if (room.status === RoomStatus.recorded) {
                   setIsPaused(false);
                 }
               }}
-              onError={(e) => {
-                console.log('Video Error: ', e);
-                setVideoError(true);
-              }}
-              onFullscreenPlayerDidDismiss={() => {
-                if (Platform.OS === 'ios') {
-                  closePlayer();
-                }
-              }}
             />
           )}
+
+          {isVideoLoading && (
+            <View style={styles.connecting}>
+              <CircularProgressIndicator size={40} strokeWidth={2} />
+            </View>
+          )}
         </View>
       )}
 
       {((room.status === RoomStatus.live && reconnecting) ||
-        room.status === RoomStatus.waiting_reconnect) && (
+        room.status === RoomStatus.waitingReconnect) && (
         <View style={styles.connecting}>
           <CircularProgressIndicator size={40} strokeWidth={2} />
           <Typography.TitleBold style={styles.text}>

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

@@ -22,7 +22,7 @@ export const useStyles = () => {
     indicator: {
       left: 16,
       zIndex: 1,
-      top: insets.top + 20,
+      top: 20,
       position: 'absolute',
     },
     status: {

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}

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

@@ -40,6 +40,8 @@ import { closeIcon } from '../../../../svg/svg-xml-list';
 import { SvgXml } from 'react-native-svg';
 import { IMentionPosition } from '../../../../types';
 import uiSlice from '../../../../redux/slices/uiSlice';
+import NetInfo from '@react-native-community/netinfo';
+import { useToast } from '../../../../v4/stores/slices/toast';
 import MyAvatar from '../../../../v4/component/MyAvatar/MyAvatar';
 import {
   comment_contains_inapproproate_word,
@@ -64,6 +66,7 @@ type AmityPostDetailPageType = {
   isFromComponent?: boolean;
   showEndPopup?: boolean;
   category?: AmityPostCategory;
+  isDeleted?: boolean;
 };
 
 const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
@@ -71,6 +74,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
   isFromComponent,
   showEndPopup,
   category,
+  isDeleted,
 }) => {
   const pageId = PageID.post_detail_page;
   const dispatch = useUIKitDispatch();
@@ -80,6 +84,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const { isExcluded, themeStyles, accessibilityId } = useAmityPage({ pageId });
   const styles = useStyles(themeStyles);
+  const { showToast } = useToast();
   const [postData, setPostData] = useState<Amity.Post<any>>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -108,6 +113,20 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 
   const { showToastMessage } = uiSlice.actions;
 
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      if (!state.isConnected) {
+        showToast({
+          type: 'failed',
+          message: 'No internet connection.',
+          duration: 3000,
+          bottomPosition: 96,
+        });
+      }
+    });
+    return () => unsubscribe();
+  }, [showToast]);
+
   useLayoutEffect(() => {
     if (!postId) return () => {};
     setLoading(true);
@@ -304,7 +323,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 
   if (isExcluded) return null;
 
-  if (postData?.isDeleted) {
+  if (isDeleted || postData?.isDeleted) {
     return (
       <ErrorComponent
         themeStyle={themeStyles}

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

@@ -31,7 +31,6 @@ const AmitySocialGlobalSearchPage = () => {
       />
     </View>
   );
-
   const isCommunity = searchType === TabName.Communities;
   if (isExcluded) return null;
   return (

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useCallback, useState } from 'react';
-import { LogBox, SafeAreaView, StyleSheet } from 'react-native';
+import { useCallback, useRef, useState } from 'react';
+import { SafeAreaView, StyleSheet, View } from 'react-native';
 import CustomSocialTab from '../../../../v4/component/CustomSocialTab/CustomSocialTab';
 import { useUiKitConfig } from '../../../../v4/hook';
 import {
@@ -12,15 +12,11 @@ import {
 import { useTheme } from 'react-native-paper';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
 import AmitySocialHomeTopNavigationComponent from '../../../../v4/PublicApi/Components/AmitySocialHomeTopNavigationComponent/AmitySocialHomeTopNavigationComponent';
-import AmityEmptyNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityEmptyNewsFeedComponent/AmityEmptyNewsFeedComponent';
 import AmityMyCommunitiesComponent from '../../../../v4/PublicApi/Components/AmityMyCommunitiesComponent/AmityMyCommunitiesComponent';
 import AmityNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityNewsFeedComponent/AmityNewsFeedComponent';
 import AmityExploreComponent from '../../../../v4/PublicApi/Components/AmityExploreComponent/AmityExploreComponent';
-import NewsFeedLoadingComponent from '../../../../v4/component/NewsFeedLoadingComponent/NewsFeedLoadingComponent';
-import { useCustomRankingGlobalFeed } from '../../../../v4/hook/useCustomRankingGlobalFeed';
 import { MyMD3Theme } from '../../../../providers/amity-ui-kit-provider';
 
-LogBox.ignoreAllLogs(true);
 const AmitySocialHomePage = () => {
   const theme = useTheme() as MyMD3Theme;
   const styles = StyleSheet.create({
@@ -31,8 +27,6 @@ const AmitySocialHomePage = () => {
   });
 
   const { AmitySocialHomePageBehaviour } = useBehaviour();
-  const { itemWithAds: globalFeedPosts, loading } =
-    useCustomRankingGlobalFeed();
 
   const [newsFeedTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -56,11 +50,13 @@ const AmitySocialHomePage = () => {
   }) as string[];
 
   const [activeTab, setActiveTab] = useState<string>(newsFeedTab);
+  const visitedTabs = useRef<Set<string>>(new Set([newsFeedTab]));
 
   const onTabChange = useCallback(
     (tabName: string) => {
       if (AmitySocialHomePageBehaviour.onChooseTab)
         return AmitySocialHomePageBehaviour.onChooseTab(tabName);
+      visitedTabs.current.add(tabName);
       setActiveTab(tabName);
     },
     [AmitySocialHomePageBehaviour]
@@ -70,30 +66,10 @@ const AmitySocialHomePage = () => {
     onTabChange(exploreTab);
   }, [exploreTab, onTabChange]);
 
-  const renderNewsFeed = () => {
-    if (loading) return <NewsFeedLoadingComponent />;
-    if (activeTab === exploreTab)
-      return <AmityExploreComponent pageId={PageID.social_home_page} />;
-
-    if (activeTab === newsFeedTab) {
-      if (!loading && globalFeedPosts?.length === 0)
-        return (
-          <AmityEmptyNewsFeedComponent
-            pageId={PageID.social_home_page}
-            onPressExploreCommunity={onPressExploreCommunity}
-          />
-        );
-      return <AmityNewsFeedComponent pageId={PageID.social_home_page} />;
-    }
-    if (activeTab === myCommunitiesTab)
-      return (
-        <AmityMyCommunitiesComponent
-          pageId={PageID.social_home_page}
-          componentId={ComponentID.my_communities}
-        />
-      );
-    return null;
-  };
+  const tabStyle = (tab: string) => ({
+    flex: 1,
+    display: activeTab === tab ? ('flex' as const) : ('none' as const),
+  });
 
   return (
     <SafeAreaView
@@ -108,7 +84,25 @@ const AmitySocialHomePage = () => {
         onTabChange={onTabChange}
         activeTab={activeTab}
       />
-      {renderNewsFeed()}
+      <View style={tabStyle(newsFeedTab)}>
+        <AmityNewsFeedComponent
+          pageId={PageID.social_home_page}
+          onPressExploreCommunity={onPressExploreCommunity}
+        />
+      </View>
+      {visitedTabs.current.has(exploreTab) && (
+        <View style={tabStyle(exploreTab)}>
+          <AmityExploreComponent pageId={PageID.social_home_page} />
+        </View>
+      )}
+      {visitedTabs.current.has(myCommunitiesTab) && (
+        <View style={tabStyle(myCommunitiesTab)}>
+          <AmityMyCommunitiesComponent
+            pageId={PageID.social_home_page}
+            componentId={ComponentID.my_communities}
+          />
+        </View>
+      )}
     </SafeAreaView>
   );
 };

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

@@ -152,7 +152,9 @@ function UserProfile({
         </TouchableOpacity>
       ),
       headerLeft: () => {
-        return isShowBackButton ? <BackButton onPress={handleGoBack} /> : null;
+        return isShowBackButton ? (
+          <BackButton goBack={false} onPress={handleGoBack} />
+        ) : null;
       },
     });
   }, [
@@ -174,17 +176,32 @@ function UserProfile({
   }, [client]);
 
   useEffect(() => {
-    if (!user?.avatarFileId) {
-      return setAvatar(defaultAvatarUri);
-    }
-    (async () => {
+    const loadAvatar = async () => {
+      if (!user) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
+      if (user.avatarCustomUrl) {
+        setAvatar(user.avatarCustomUrl);
+        return;
+      }
+
+      if (!user.avatarFileId) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
       const avatarUrl = await getImage({
         fileId: user.avatarFileId,
         imageSize: ImageSizeState.small,
       });
+
       setAvatar(avatarUrl ?? defaultAvatarUri);
-    })();
-  }, [getImage, user?.avatarFileId]);
+    };
+
+    loadAvatar();
+  }, [getImage, user]);
 
   useFocusEffect(
     useCallback(() => {