@amityco/react-native-social-uikit 4.0.0-e833198.0 → 4.0.0-eaa97a5.0

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

@@ -1,131 +1,72 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  View,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  useAnimatedValue,
-} from 'react-native';
+import React, { useEffect, useState, useRef } from 'react';
+import { View, TouchableOpacity, Platform } 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 {
-  getPostTopic,
-  PostRepository,
-  StreamRepository,
-  subscribeTopic,
-} from '@amityco/ts-sdk-react-native';
-import { close, pause, resume } from '../../../assets/icons';
+import { close } from '../../../assets/icons';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../routes/RouteParamList';
-import { LivestreamStatus } from '../../../enum/livestreamStatus';
+import { RoomStatus } from '../../../enum/roomStatus';
 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';
-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 };
-};
+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';
 
 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 [livestream, setLivestream] = useState<Amity.Stream>();
-
-  const { streamId, post } = route.params;
+  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 { roomId, post } = route.params;
   const { subscribedPost } = usePostSubscription(post?.postId);
+  useRoomSubscription({ room });
 
-  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();
-    });
-  };
+  const { client } = useAuth();
+  const videoRef = useRef<any>(null);
+  const isStreamEnding = useRef(false);
 
   useEffect(() => {
-    const unsubscribe = StreamRepository.getStreamById(
-      streamId,
+    const unsubscribe = RoomRepository.getRoom(
+      roomId,
       ({ data, loading, error: streamError }) => {
         if (streamError) setError(streamError);
-        if (!loading && data) setLivestream({ ...data });
+        if (!loading && data) setRoom({ ...data });
       }
     );
 
     return () => unsubscribe();
-  }, [streamId]);
+  }, [roomId]);
 
   useEffect(() => {
-    if (livestream?.isDeleted || subscribedPost?.isDeleted) {
-      navigation.replace('PostDetail', { postId: subscribedPost?.postId });
+    if (room?.status === RoomStatus.live) {
+      setWasLive(true);
     }
-  }, [livestream?.isDeleted, subscribedPost, navigation]);
+  }, [room?.status]);
 
   useEffect(() => {
-    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' });
+    if (room?.isDeleted || subscribedPost?.isDeleted) {
+      navigation.replace('PostDetail', { postId: subscribedPost?.postId });
     }
-  }, [livestream?.moderation?.terminateLabels, livestream?.status, navigation]);
+  }, [room?.isDeleted, subscribedPost, navigation]);
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
@@ -134,24 +75,121 @@ function AmityLiveStreamPlayerPage() {
     return () => unsubscribe();
   }, []);
 
-  if (!livestream || error)
+  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) {
     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}>
-      {livestream.status === LivestreamStatus.ended ? (
+      {shouldShowEndThumbnail ? (
         <>
           <View style={styles.steamEndContainer}>
             <LiveStreamEndThumbnail />
           </View>
-          <TouchableOpacity
-            style={styles.closeButton}
-            onPress={navigation.goBack}
-          >
+
+          <TouchableOpacity style={styles.closeButton} onPress={closePlayer}>
             <SvgXml
               xml={close()}
               width="28"
@@ -160,14 +198,71 @@ function AmityLiveStreamPlayerPage() {
             />
           </TouchableOpacity>
         </>
-      ) : // <AmityStreamPlayer
-      //   ref={ref}
-      //   stream={livestream}
-      //   onBack={navigation.goBack}
-      //   status={livestream.status === 'live' ? 'live' : 'recorded'}
-      // />
-      null}
-      {livestream.status === LivestreamStatus.live && reconnecting && (
+      ) : (
+        <View style={styles.container}>
+          {Platform.OS !== 'android' &&
+            (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) && (
         <View style={styles.connecting}>
           <CircularProgressIndicator size={40} strokeWidth={2} />
           <Typography.TitleBold style={styles.text}>
@@ -179,54 +274,6 @@ 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,9 +13,11 @@ export const useStyles = () => {
       position: 'relative',
       backgroundColor: '#000000',
     },
+
     steamEndContainer: {
       flex: 1,
       justifyContent: 'center',
+      backgroundColor: '#000000',
     },
     indicator: {
       left: 16,

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

@@ -37,10 +37,16 @@ const AmityLivestreamPostTargetSelectionPage = () => {
     navigation.navigate('CreateLivestream', context);
   };
 
+  const onClickClose = () => {
+    if (AmityLivestreamPostTargetSelectionPageBehavior?.onClickClose) {
+      AmityLivestreamPostTargetSelectionPageBehavior.onClickClose();
+    }
+  };
   return (
     <TargetSelectionPage
       onSelectFeed={onSelectFeed}
       pageId={PageID.livestream_post_target_selection_page}
+      onClickClose={onClickClose}
     />
   );
 };

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

@@ -28,11 +28,16 @@ const AmityPollTargetSelectionPage = () => {
     }
     navigation.navigate('PollPostComposer', context);
   };
-
+  const onClickClose = () => {
+    if (AmityPollTargetSelectionPageBehavior?.onClickClose) {
+      AmityPollTargetSelectionPageBehavior.onClickClose();
+    }
+  };
   return (
     <TargetSelectionPage
       onSelectFeed={onSelectFeed}
       pageId={PageID.select_poll_target_page}
+      onClickClose={onClickClose}
     />
   );
 };

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

@@ -60,6 +60,7 @@ import { getPostErrorMessage } from '../../../utils/errors';
 import { MAXIMUM_POST_CHARACTERS } from '../../../constants';
 import { replaceTriggerValues } from 'react-native-controlled-mentions';
 import { useUIKitDispatch } from '../../../../redux/store';
+import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
 
 const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   mode,
@@ -75,6 +76,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     shouldCall: true,
   });
   const pageId = PageID.post_composer_page;
+  const { AmityPostComposerPageBehavior } = useBehaviour();
   const { isExcluded, themeStyles, accessibilityId } = useAmityPage({ pageId });
   const styles = useStyles(themeStyles);
   const { getImage } = useFile();
@@ -286,17 +288,20 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
 
   const onPressClose = useCallback(() => {
     const routes = navigation.getState().routes;
+    if (AmityPostComposerPageBehavior?.onPressPost) {
+      AmityPostComposerPageBehavior.onPressPost();
+    }
     if (routes[routes.length - 2].name === 'PostTargetSelection') {
       navigation.pop(2);
     } else navigation.pop();
-  }, [navigation]);
+  }, [navigation, AmityPostComposerPageBehavior]);
 
   const onClose = useCallback(() => {
     Alert.alert(
       'Discard this post',
       'The post will be permanently deleted. It cannot be undone',
       [
-        { text: 'Keey Editing', style: 'cancel' },
+        { text: 'Keep Editing', style: 'cancel' },
         {
           text: 'Discard',
           style: 'destructive',

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

@@ -81,10 +81,17 @@ const AmityPostTargetSelectionPage = ({
     }
   };
 
+  const onClickClose = () => {
+    if (AmityPostTargetSelectionPageBehavior?.onClickClose) {
+      AmityPostTargetSelectionPageBehavior.onClickClose();
+    }
+  };
+
   return (
     <TargetSelectionPage
       pageId={PageID.select_post_target_page}
       onSelectFeed={onSelectFeed}
+      onClickClose={onClickClose}
     />
   );
 };

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

@@ -3,7 +3,11 @@ import { useCallback, useState } from 'react';
 import { LogBox, SafeAreaView, StyleSheet } from 'react-native';
 import CustomSocialTab from '../../../../v4/component/CustomSocialTab/CustomSocialTab';
 import { useUiKitConfig } from '../../../../v4/hook';
-import { ComponentID, ElementID, PageID } from '../../../../v4/enum/enumUIKitID';
+import {
+  ComponentID,
+  ElementID,
+  PageID,
+} from '../../../../v4/enum/enumUIKitID';
 
 import { useTheme } from 'react-native-paper';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';

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

@@ -24,11 +24,18 @@ const AmityStoryTargetSelectionPage = () => {
     });
   };
 
+  const onClickClose = () => {
+    if (AmityStoryTargetSelectionPageBehavior?.onClickClose) {
+      AmityStoryTargetSelectionPageBehavior.onClickClose();
+    }
+  };
+
   return (
     <TargetSelectionPage
       pageId={PageID.select_story_target_page}
       onSelectFeed={onSelectFeed}
       hideMyTimelineTarget={true}
+      onClickClose={onClickClose}
     />
   );
 };