@amityco/react-native-social-uikit 4.0.0-RC9 → 4.0.0-a9cb7bb.0

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

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { Track } from 'livekit-client';
+import { VideoTrack, useLocalParticipant } from '@livekit/react-native';
+import { useStyles } from './styles';
+
+interface RoomViewProps {
+  onLocalParticipantReady?: (participant: any) => void;
+  isFrontCamera: boolean;
+}
+
+export const RoomView: React.FC<RoomViewProps> = ({
+  onLocalParticipantReady,
+  isFrontCamera,
+}) => {
+  const { localParticipant } = useLocalParticipant();
+  const styles = useStyles();
+
+  useEffect(() => {
+    if (localParticipant && onLocalParticipantReady) {
+      onLocalParticipantReady(localParticipant);
+    }
+  }, [localParticipant, onLocalParticipantReady]);
+
+  if (!localParticipant?.isCameraEnabled) {
+    return <View style={styles.roomContainer} />;
+  }
+
+  const cameraTrack = localParticipant.getTrackPublication(Track.Source.Camera);
+
+  if (!cameraTrack?.track) {
+    return <View style={styles.roomContainer} />;
+  }
+
+  return (
+    <View style={styles.roomContainer}>
+      <VideoTrack
+        trackRef={{
+          participant: localParticipant,
+          publication: cameraTrack,
+          source: Track.Source.Camera,
+        }}
+        style={styles.videoTrack}
+        mirror={isFrontCamera}
+      />
+    </View>
+  );
+};

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

@@ -8,7 +8,7 @@ export const useStyles = () => {
   const { height: screenHeight } = Dimensions.get('window');
   const insets = useSafeAreaInsets();
 
-  const availableHeight = screenHeight - 80 - 60 - 40 - 40 - 120;
+  const availableHeight = screenHeight - 80 - 60 - 40 - 40 - 120 - 50;
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -26,7 +26,6 @@ export const useStyles = () => {
     },
     overlay: {
       flex: 1,
-      height: '100%',
       top: 0,
       bottom: 0,
       left: 0,
@@ -158,12 +157,19 @@ export const useStyles = () => {
     text: {
       color: theme.colors.background,
     },
-    timer: {
+
+    closeButton: {
       left: 16,
       zIndex: 100,
       position: 'absolute',
       top: 20 + insets.top,
     },
+    timer: {
+      right: 16,
+      zIndex: 100,
+      position: 'absolute',
+      top: 20 + insets.top,
+    },
     permission: {
       flex: 1,
       top: 80 + insets.top,
@@ -191,6 +197,69 @@ export const useStyles = () => {
       color: theme.colors.background,
       textAlign: 'center',
     },
+    containerRoom: {
+      flex: 1,
+      alignItems: 'stretch',
+      justifyContent: 'center',
+      padding: 10,
+    },
+    participantView: {
+      flex: 1,
+      margin: 5,
+      height: 200,
+      backgroundColor: '#ccc',
+    },
+    roomContainer: {
+      flex: 1,
+      width: '100%',
+      height: '100%',
+    },
+    videoTrack: {
+      width: '100%',
+      height: '100%',
+    },
+    countdownOverlay: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 80,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      zIndex: 150,
+    },
+    countdownContainer: {
+      alignItems: 'center',
+      gap: 24,
+    },
+    countdownCircle: {
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 72,
+      height: 72,
+    },
+    countdownNumberContainer: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    countdownNumber: {
+      fontSize: 32,
+      fontWeight: '700',
+      color: theme.colors.background,
+    },
+    countdownText: {
+      fontSize: 24,
+      fontWeight: '500',
+      color: theme.colors.background,
+      textAlign: 'center',
+    },
   });
 
   return styles;

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

@@ -1,131 +1,75 @@
-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 } 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 { RoomRepository } from '@amityco/ts-sdk-react-native';
+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';
 
 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 [error, setError] = useState<Error | null>(null);
+  const [wasLive, setWasLive] = useState(false);
+  const [showEndThumbnail, setShowEndThumbnail] = useState(false);
+  const { roomId, post } = route.params;
+  const { client } = useAuth();
+  const videoRef = useRef<any>(null);
+  const isProgrammaticDismiss = useRef(false);
 
   const { subscribedPost } = usePostSubscription(post?.postId);
 
-  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();
-    });
-  };
+  useRoomSubscription({ room });
 
   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) {
+    if (room?.isDeleted || subscribedPost?.isDeleted) {
       navigation.replace('PostDetail', { postId: subscribedPost?.postId });
     }
-  }, [livestream?.isDeleted, subscribedPost, navigation]);
+  }, [room?.isDeleted, subscribedPost, navigation]);
 
   useEffect(() => {
     const isTerminated =
-      livestream?.moderation?.terminateLabels &&
-      livestream?.moderation?.terminateLabels?.length > 0;
+      room?.moderation?.terminateLabels &&
+      room?.moderation?.terminateLabels?.length > 0;
     const isLiveOrEnded =
-      livestream?.status === LivestreamStatus.live ||
-      livestream?.status === LivestreamStatus.ended;
+      room?.status === RoomStatus.live || room?.status === RoomStatus.ended;
 
     if (isLiveOrEnded && isTerminated) {
       navigation.replace('LivestreamTerminated', { type: 'viewer' });
     }
-  }, [livestream?.moderation?.terminateLabels, livestream?.status, navigation]);
+  }, [room?.moderation?.terminateLabels, room?.status, navigation]);
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
@@ -134,24 +78,73 @@ function AmityLiveStreamPlayerPage() {
     return () => unsubscribe();
   }, []);
 
-  if (!livestream || error)
+  // Track if user was watching live
+  useEffect(() => {
+    if (room?.status === RoomStatus.live) {
+      setWasLive(true);
+    }
+  }, [room?.status]);
+
+  // Dismiss fullscreen player when stream ends
+  useEffect(() => {
+    const shouldShowEndThumbnail =
+      room?.status === RoomStatus.ended ||
+      (room?.status === RoomStatus.recorded && wasLive);
+
+    if (shouldShowEndThumbnail && videoRef.current) {
+      isProgrammaticDismiss.current = true;
+      videoRef.current?.dismissFullscreenPlayer();
+      // Delay showing end thumbnail to allow fullscreen dismiss to complete
+      setTimeout(() => {
+        setShowEndThumbnail(true);
+      }, 300);
+    } else if (shouldShowEndThumbnail && !videoRef.current) {
+      // If video ref is already null, show end thumbnail immediately
+      setShowEndThumbnail(true);
+    } else if (!shouldShowEndThumbnail) {
+      setShowEndThumbnail(false);
+    }
+  }, [room?.status, wasLive]);
+
+  // Start in fullscreen mode on iOS
+  useEffect(() => {
+    if (videoRef.current && room && room.status !== RoomStatus.ended) {
+      const timer = setTimeout(() => {
+        videoRef.current?.presentFullscreenPlayer();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [room]);
+
+  if (!room || error) {
     return (
       <SafeAreaView style={styles.container}>
         <LiveStreamIdleThumbnail />
       </SafeAreaView>
     );
+  }
+
+  const closePlayer = () => {
+    navigation.goBack();
+  };
+
+  const handleFullscreenDismiss = () => {
+    // Only navigate back if user manually dismissed, not programmatically
+    if (!isProgrammaticDismiss.current) {
+      closePlayer();
+    }
+    isProgrammaticDismiss.current = false;
+  };
 
   return (
     <SafeAreaView style={styles.container}>
-      {livestream.status === LivestreamStatus.ended ? (
+      {showEndThumbnail ? (
         <>
           <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 +153,52 @@ 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}>
+          {(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>
+          )}
+          <Video
+            ref={videoRef}
+            source={{
+              uri:
+                room.status === RoomStatus.recorded
+                  ? room.recordedPlaybackInfos[0]?.url
+                  : room.livePlaybackUrl,
+              headers: {
+                Authorization: `Bearer ${client.token.accessToken}`,
+              },
+
+              type: 'm3u8',
+            }}
+            style={styles.container}
+            resizeMode="contain"
+            controls={room.status === RoomStatus.recorded}
+            fullscreen={true}
+            fullscreenOrientation="landscape"
+            paused={false}
+            muted={false}
+            volume={1.0}
+            audioOutput="speaker"
+            playInBackground={false}
+            playWhenInactive={false}
+            onError={(e) => {
+              console.log('Video Player Error: ', e);
+            }}
+            onFullscreenPlayerDidDismiss={handleFullscreenDismiss}
+          />
+        </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 +210,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,6 +13,7 @@ export const useStyles = () => {
       position: 'relative',
       backgroundColor: '#000000',
     },
+
     steamEndContainer: {
       flex: 1,
       justifyContent: 'center',

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

@@ -301,7 +301,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
       '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/component/LivestreamContent/index.tsx

@@ -7,14 +7,14 @@ import {
   ImageStyle,
 } from 'react-native';
 import React, { useEffect, useState, useCallback, Fragment } from 'react';
-import { FileRepository, StreamRepository } from '@amityco/ts-sdk-react-native';
+import { FileRepository, RoomRepository } from '@amityco/ts-sdk-react-native';
 import { useStyles } from './styles';
 import { useNavigation } from '@react-navigation/native';
 import { SvgXml } from 'react-native-svg';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { play } from '../../assets/icons';
 import { Typography } from '../Typography/Typography';
-import { LivestreamStatus } from '../../enum/livestreamStatus';
+import { RoomStatus } from '../../enum/roomStatus';
 import LiveStreamEndThumbnail from './LivestreamEndedThumbnail';
 import LiveStreamIdleThumbnail from './LivestreamIdleThumbnail';
 import RenderTextWithMention from '../RenderTextWithMention/RenderTextWithMention';
@@ -22,14 +22,14 @@ import { RootStackParamList } from '../../routes/RouteParamList';
 import LiveStreamTerminatedThumbnail from './LivestreamTerminatedThumbnail';
 
 interface ILivestreamContent {
-  streamId: Amity.Stream['streamId'];
+  roomId: Amity.Room['roomId'];
   onPressPost: () => void;
   post: Amity.Post;
 }
 
 const LivestreamContent: React.FC<ILivestreamContent> = ({
   post,
-  streamId,
+  roomId,
   onPressPost,
 }) => {
   const { styles, theme } = useStyles();
@@ -39,18 +39,18 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     >();
 
   const [error, setError] = useState<boolean>(false);
-  const [livestream, setLivestream] = useState<Amity.Stream>();
+  const [livestream, setLivestream] = useState<Amity.Room>();
   const [thumbnailUrl, setThumbnailUrl] = useState<ImageSourcePropType>();
   const [isUpcoming, setIsUpcoming] = useState<boolean>(false);
 
   const onPlayLivestream = useCallback(() => {
     navigation.navigate('LivestreamPlayer', {
       post,
-      streamId: livestream.streamId,
+      roomId: livestream.roomId,
     });
   }, [livestream, navigation, post]);
 
-  const getLivestreamThumbnail = async (currentStream: Amity.Stream) => {
+  const getLivestreamThumbnail = async (currentStream: Amity.Room) => {
     const defaultThumbnail = require('../../assets/images/livestream.png');
 
     if (currentStream.thumbnailFileId) {
@@ -71,8 +71,8 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
 
   useEffect(() => {
     setIsUpcoming(true);
-    const unsubscribe = StreamRepository.getStreamById(
-      streamId,
+    const unsubscribe = RoomRepository.getRoom(
+      roomId,
       ({ data, loading, error: streamError }) => {
         if (streamError) setError(!!streamError);
         if (!loading && data) {
@@ -86,13 +86,13 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     return () => {
       unsubscribe();
     };
-  }, [streamId]);
+  }, [roomId]);
 
   if (!livestream) return null;
 
   if (error || livestream?.isDeleted) {
     return (
-      <View key={livestream.streamId} style={styles.container}>
+      <View key={livestream.roomId} style={styles.container}>
         <LiveStreamIdleThumbnail />
       </View>
     );
@@ -102,12 +102,12 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     livestream?.moderation?.terminateLabels &&
     livestream?.moderation?.terminateLabels?.length > 0;
   const isLiveOrEnded =
-    livestream?.status === LivestreamStatus.live ||
-    livestream?.status === LivestreamStatus.ended;
+    livestream?.status === RoomStatus.live ||
+    livestream?.status === RoomStatus.ended;
 
   if (isTerminated && isLiveOrEnded) {
     return (
-      <View key={livestream.streamId} style={styles.container}>
+      <View key={livestream.roomId} style={styles.container}>
         <LiveStreamTerminatedThumbnail />
       </View>
     );
@@ -129,7 +129,7 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
         )}
       </Pressable>
       <View style={styles.container}>
-        {(livestream.status === LivestreamStatus.idle || isUpcoming) &&
+        {(livestream.status === RoomStatus.idle || isUpcoming) &&
           thumbnailUrl && (
             <View style={styles.content}>
               <Image
@@ -144,12 +144,10 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
             </View>
           )}
 
-        {livestream.status === LivestreamStatus.ended && (
-          <LiveStreamEndThumbnail />
-        )}
+        {livestream.status === RoomStatus.ended && <LiveStreamEndThumbnail />}
 
-        {(livestream.status === LivestreamStatus.live ||
-          livestream.status === LivestreamStatus.recorded) &&
+        {(livestream.status === RoomStatus.live ||
+          livestream.status === RoomStatus.recorded) &&
           thumbnailUrl &&
           !isUpcoming && (
             <View style={styles.content}>
@@ -157,14 +155,15 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
                 source={thumbnailUrl}
                 style={styles.streamImageCover as ImageStyle}
               />
-              {livestream.status === LivestreamStatus.live && (
+              {(livestream.status === RoomStatus.live ||
+                livestream.status === RoomStatus.waiting_reconnect) && (
                 <View style={styles.streamStatusLive}>
                   <Typography.CaptionBold style={styles.streamStatusText}>
                     LIVE
                   </Typography.CaptionBold>
                 </View>
               )}
-              {livestream.status === LivestreamStatus.recorded && (
+              {livestream.status === RoomStatus.recorded && (
                 <View style={styles.streamStatusRecorded}>
                   <Typography.CaptionBold style={styles.streamStatusText}>
                     RECORDED