@amityco/react-native-social-uikit 4.0.0-354a3a5.0 → 4.0.0-417229c2.0

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

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Alert,
   Image,
@@ -12,20 +6,15 @@ import {
   Platform,
   TextInput,
   TouchableOpacity,
-  // Linking,
   View,
   ImageStyle,
+  Linking,
 } from 'react-native';
 import { useStyles } from './styles';
 import { SafeAreaView } from 'react-native-safe-area-context';
-// import {
-//   AmityStreamBroadcasterState,
-//   AmityVideoBroadcaster,
-//   // @ts-ignore
-// } from '@amityco/video-broadcaster-react-native';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import useImagePicker from '../../../../v4/hook/useImagePicker';
-import { arrowDown } from '../../../../v4/assets/icons';
+import { arrowDown, close } from '../../../../v4/assets/icons';
 import { SvgXml } from 'react-native-svg';
 import { Typography } from '../../../component/Typography/Typography';
 import { useTheme } from 'react-native-paper';
@@ -33,12 +22,12 @@ import { MyMD3Theme } from '../../../../providers/amity-ui-kit-provider';
 import { useBottomSheet } from '../../../../redux/slices/bottomSheetSlice';
 import { CircularProgressIndicator } from '../../../component/CircularProgressIndicator';
 import { RootStackParamList } from '../../../../v4/routes/RouteParamList';
-import { PostRepository, StreamRepository } from '@amityco/ts-sdk-react-native';
+import { PostRepository, RoomRepository } from '@amityco/ts-sdk-react-native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-// import Button from '../../../component/Button/Button';
+import Button from '../../../component/Button/Button';
 import { useRequestPermission } from '../../../../v4/hook/useCamera';
 import NetInfo from '@react-native-community/netinfo';
-import { LivestreamStatus } from '../../../enum/livestreamStatus';
+import { RoomStatus } from '../../../enum/roomStatus';
 import { AmityThumbnailActionComponent } from '../../Components/AmityThumbnailActionComponent';
 import { StartLivestreamButton } from '../../../elements/StartLivestreamButton';
 import { PageID } from '../../../enum';
@@ -47,6 +36,18 @@ import { CancelCreateLivestreamButton } from '../../../elements/CancelCreateLive
 import { EndLiveStreamButton } from '../../../elements/EndLiveStreamButton';
 import { AddThumbnailButton } from '../../../elements/AddThumbnailButton';
 import { SwitchCameraButton } from '../../../elements/SwitchCameraButton';
+import { Track, LocalVideoTrack } from 'livekit-client';
+import { LiveKitRoom, registerGlobals } from '@livekit/react-native';
+import { RoomView } from './RoomView';
+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';
+
+// Register WebRTC globals required for LiveKit
+registerGlobals();
+
+const serverUrl = 'wss://sp-live-3tr59jrk.livekit.cloud';
 
 const calculateTime = (time: number) => {
   const hours = Math.floor(time / 3600000);
@@ -64,7 +65,6 @@ const calculateTime = (time: number) => {
 
 function AmityCreateLivestreamPage() {
   const styles = useStyles();
-  const streamRef = useRef<any>(null);
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const theme = useTheme<MyMD3Theme>();
@@ -75,15 +75,31 @@ function AmityCreateLivestreamPage() {
   const [isLive, setIsLive] = useState<boolean>(false);
   const [description, setDescription] = useState<string>('');
   const [isEnding, setIsEnding] = useState<boolean>(false);
+  const [countdown, setCountdown] = useState<number | null>(null);
   const [post, setPost] = useState<Amity.Post | null>(null);
-  const [stream, setStream] = useState<Amity.Stream | null>(null);
-  const [timer] = useState<number | null>(null);
+  const [room, setRoom] = useState<Amity.Room | null>(null);
+  const timerRef = useRef<number | null>(null);
   const [isConnecting, setIsConnecting] = useState<boolean>(false);
   const [androidPermission, setAndroidPermission] = useState<boolean>(false);
   const [iOSPermission, setIOSPermission] = useState<boolean>(true);
   const [reconnecting, setReconnecting] = useState<boolean>(false);
+  const [livekitParticipant, setLivekitParticipant] = useState<any>(null);
+  const [isFrontCamera, setIsFrontCamera] = useState<boolean>(true);
+  const [roomToken, setRoomToken] = useState<Amity.BroadcasterData | null>(
+    null
+  );
   const unsubscribeRef = useRef<Amity.Unsubscriber>(null);
 
+  useRoomSubscription({ room });
+
+  const { subscribedPost } = usePostSubscription(post?.postId || '');
+
+  const { showToast } = useToast();
+
+  const frontCamera = useCameraDevice('front');
+  const backCamera = useCameraDevice('back');
+  const cameraDevice = isFrontCamera ? frontCamera : backCamera;
+
   const {
     imageUri,
     isLoading,
@@ -100,6 +116,43 @@ function AmityCreateLivestreamPage() {
     (Platform.OS === 'android' && androidPermission) ||
     (Platform.OS === 'ios' && iOSPermission);
 
+  const fourHours = 4 * 60 * 60 * 1000; // 4 hours
+  const countdownStart = fourHours - 10 * 1000; // Start countdown 10 seconds before end
+  const toastTriggerTime = fourHours - 3 * 60 * 1000; // Show toast 3 minutes before end
+
+  const switchCamera = useCallback(async () => {
+    if (isLive && livekitParticipant) {
+      try {
+        const cameraPublication = livekitParticipant.getTrackPublication(
+          Track.Source.Camera
+        );
+
+        if (cameraPublication?.track) {
+          const videoTrack = cameraPublication.track as LocalVideoTrack;
+
+          // Stop current camera
+          await videoTrack.stop();
+
+          // Get new facing mode
+          const newFacingMode = isFrontCamera ? 'environment' : 'user';
+
+          // Restart camera with new facing mode
+          await videoTrack.restartTrack({
+            facingMode: newFacingMode,
+          });
+
+          // Toggle the camera state
+          setIsFrontCamera((prev) => !prev);
+        }
+      } catch (error) {
+        console.error('Failed to switch camera:', error);
+      }
+    } else {
+      // Just toggle the camera state for preview
+      setIsFrontCamera((prev) => !prev);
+    }
+  }, [livekitParticipant, isFrontCamera, isLive]);
+
   useRequestPermission({
     shouldCall: Platform.OS === 'ios',
     onRequestPermissionFailed: (callback?: () => void) => {
@@ -156,37 +209,54 @@ function AmityCreateLivestreamPage() {
       setIsLive(true);
       setIsConnecting(true);
 
-      const { data: newStream } = await StreamRepository.createStream({
+      const { data: newStream } = await RoomRepository.createRoom({
         title,
         description: description || undefined,
         thumbnailFileId: uploadedImage?.fileId,
+        type: 'coHosts',
       });
 
+      setRoom(newStream);
+
       if (newStream) {
+        const roomTokenResponse = await RoomRepository.getBroadcasterData(
+          newStream.roomId
+        );
+
+        setRoomToken(roomTokenResponse);
+
         const params = {
           targetId,
           targetType,
-          dataType: 'liveStream' as Amity.PostContentType,
+          dataType: 'room' as Amity.PostContentType,
           data: {
             text: `${newStream.title}${
               newStream.description ? `\n\n${newStream.description}` : ''
             }`,
-            streamId: newStream.streamId,
+            roomId: newStream.roomId,
           },
         };
 
         const newPost = await PostRepository.createPost(params);
 
-        streamRef.current = StreamRepository.getStreamById(
-          newStream.streamId,
-          ({ data }) => {
-            setStream(data);
-            setPost(newPost.data);
-            streamRef?.current?.startPublish(newStream.streamId);
-          }
-        );
+        setPost(newPost.data);
+
+        // Set isConnecting to false since LiveKit room is already connected
+        setIsConnecting(false);
+
+        // Start the timer when live stream actually starts
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+        }
+
+        const intervalId = setInterval(() => {
+          setTime((prev) => prev + 1000);
+        }, 1000);
+
+        timerRef.current = intervalId;
       }
     } catch (error) {
+      console.log('startLiveStream error', error);
       setIsLive(false);
       setIsConnecting(false);
       Alert.alert(
@@ -201,17 +271,6 @@ function AmityCreateLivestreamPage() {
     }
   };
 
-  // const onBroadcastStateChange = (state: AmityStreamBroadcasterState) => {
-  //   if (state === AmityStreamBroadcasterState.CONNECTED) {
-  //     setIsConnecting(false);
-  //     setReconnecting(false);
-  //     const intervalId = setInterval(() => {
-  //       setTime((prev) => prev + 1000);
-  //     }, 1000);
-  //     setTimer(intervalId);
-  //   }
-  // };
-
   const confirmEndStreamAlert = () => {
     Alert.alert(
       'End live stream?',
@@ -234,21 +293,22 @@ function AmityCreateLivestreamPage() {
 
   const endLiveStream = useCallback(
     async (showEndPopup = false) => {
-      if (stream) {
+      if (room) {
         setIsEnding(true);
         try {
-          await StreamRepository.disposeStream(stream.streamId);
+          await RoomRepository.stopRoom(room.roomId);
         } catch (e) {
           console.log('disposeStream error', e);
         } finally {
-          streamRef?.current.stopPublish();
-
           setIsLive(false);
-          setStream(null);
+          setRoom(null);
           setTitle('');
           setDescription('');
           setTime(0);
-          clearInterval(timer);
+          if (timerRef.current) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+          }
           setIsEnding(false);
           setReconnecting(false);
 
@@ -259,15 +319,40 @@ function AmityCreateLivestreamPage() {
         }
       }
     },
-    [post, stream, timer, navigation]
+    [post, room, navigation]
   );
 
   useEffect(() => {
-    const fourHours = 4 * 60 * 60 * 1000;
-    if (streamRef.current && stream && time >= fourHours) {
+    // Show toast when 3 minutes left
+    if (room && time >= toastTriggerTime && time < toastTriggerTime + 1000) {
+      showToast({
+        type: 'informative',
+        message:
+          'Your live will automatically end once it reaches 4-hour limit.',
+        duration: 3000,
+        bottomPosition: 96,
+      });
+    }
+
+    if (room && time >= fourHours) {
       endLiveStream(true);
+      setCountdown(null);
+    } else if (room && time >= countdownStart && time < fourHours) {
+      // Calculate countdown from 10 to 0
+      const remaining = Math.ceil((fourHours - time) / 1000);
+      setCountdown(remaining);
+    } else {
+      setCountdown(null);
     }
-  }, [endLiveStream, stream, time]);
+  }, [
+    endLiveStream,
+    room,
+    time,
+    showToast,
+    toastTriggerTime,
+    fourHours,
+    countdownStart,
+  ]);
 
   useEffect(() => {
     if (Platform.OS === 'android') checkPermissionAndroid();
@@ -284,48 +369,45 @@ function AmityCreateLivestreamPage() {
     return () => unsubscribe();
   }, []);
 
-  useLayoutEffect(() => {
-    setTimeout(() => {
-      streamRef.current && streamRef.current.switchCamera();
-    }, 300);
-  }, [streamRef]);
-
   useEffect(() => {
     let threeMinutesTimeout: number;
 
-    if (reconnecting && stream && stream?.status === 'live') {
+    if (reconnecting && room && room?.status === RoomStatus.live) {
       threeMinutesTimeout = setTimeout(() => {
         endLiveStream();
       }, 1000 * 60 * 3);
     }
 
-    if (
-      !reconnecting &&
-      stream &&
-      stream?.status === 'live' &&
-      streamRef?.current
-    ) {
-      streamRef?.current?.startPublish(stream?.streamId);
-
+    if (!reconnecting && room && room?.status === RoomStatus.live) {
       if (threeMinutesTimeout) {
         clearTimeout(threeMinutesTimeout);
         threeMinutesTimeout = null;
       }
     }
-  }, [reconnecting, endLiveStream, stream]);
+  }, [reconnecting, endLiveStream, room]);
 
   useEffect(() => {
     const isTerminated =
-      stream?.moderation?.terminateLabels &&
-      stream?.moderation?.terminateLabels?.length > 0;
+      room?.moderation?.terminateLabels &&
+      room?.moderation?.terminateLabels?.length > 0;
     const isLiveOrEnded =
-      stream?.status === LivestreamStatus.live ||
-      stream?.status === LivestreamStatus.ended;
+      room?.status === RoomStatus.live || room?.status === RoomStatus.ended;
 
     if (isLiveOrEnded && isTerminated) {
       navigation.replace('LivestreamTerminated', { type: 'streamer' });
     }
-  }, [stream?.moderation?.terminateLabels, stream?.status, navigation]);
+  }, [room?.moderation?.terminateLabels, room?.status, navigation]);
+
+  useEffect(() => {
+    if (room?.isDeleted || subscribedPost?.isDeleted) {
+      navigation.replace('PostDetail', { postId: subscribedPost?.postId });
+    }
+  }, [
+    navigation,
+    room?.isDeleted,
+    subscribedPost?.postId,
+    subscribedPost?.isDeleted,
+  ]);
 
   useEffect(() => {
     const unsubscribe = unsubscribeRef.current;
@@ -345,17 +427,53 @@ function AmityCreateLivestreamPage() {
           style={[styles.overlay, !hasPermission && styles.noPermissionOverlay]}
         />
       )}
-      {/* {hasPermission ? (
-        <View style={styles.cameraContainer}>
-          <View style={styles.camera}>
-            <AmityVideoBroadcaster
-              ref={streamRef}
-              bitrate={2 * 1024 * 1024}
-              onBroadcastStateChange={onBroadcastStateChange}
-              resolution={{ width: 1280, height: 720 }}
-            />
+
+      {/* Preview camera part */}
+
+      {hasPermission ? (
+        roomToken ? (
+          <LiveKitRoom
+            serverUrl={serverUrl}
+            token={roomToken.coHostToken}
+            connect={true}
+            options={{
+              adaptiveStream: { pixelDensity: 'screen' },
+            }}
+            audio={{
+              echoCancellation: true,
+              noiseSuppression: true,
+              autoGainControl: true,
+            }}
+            video={{
+              facingMode: isFrontCamera ? 'user' : 'environment',
+            }}
+            onConnected={() => {
+              setIsConnecting(false);
+              setReconnecting(false);
+            }}
+          >
+            <View style={styles.cameraContainer}>
+              <View style={styles.camera}>
+                <RoomView
+                  onLocalParticipantReady={setLivekitParticipant}
+                  isFrontCamera={isFrontCamera}
+                />
+              </View>
+            </View>
+          </LiveKitRoom>
+        ) : (
+          <View style={styles.cameraContainer}>
+            <View style={styles.camera}>
+              {cameraDevice && (
+                <Camera
+                  style={{ flex: 1 }}
+                  device={cameraDevice}
+                  isActive={true}
+                />
+              )}
+            </View>
           </View>
-        </View>
+        )
       ) : (
         <View style={styles.permission}>
           <Typography.TitleBold style={styles.permissionTitle}>
@@ -374,7 +492,8 @@ function AmityCreateLivestreamPage() {
             </Typography.BodyBold>
           </Button>
         </View>
-      )} */}
+      )}
+
       {isEnding && (
         <View style={styles.connecting}>
           <CircularProgressIndicator size={40} strokeWidth={2} />
@@ -406,12 +525,46 @@ function AmityCreateLivestreamPage() {
                 </Typography.Caption>
               </View>
             )}
+
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => confirmEndStreamAlert()}
+            >
+              <SvgXml
+                xml={close()}
+                width="28"
+                height="28"
+                color={theme.colors.background}
+              />
+            </TouchableOpacity>
+
             <View style={styles.timer}>
               <LiveTimerStatus
                 time={calculateTime(time)}
                 pageId={PageID.create_livestream_page}
               />
             </View>
+            {countdown !== null && (
+              <View style={styles.countdownOverlay}>
+                <View style={styles.countdownContainer}>
+                  <Typography.TitleBold style={styles.countdownText}>
+                    Live stream ends in
+                  </Typography.TitleBold>
+                  <View style={styles.countdownCircle}>
+                    <CircularProgressIndicator
+                      size={64}
+                      strokeWidth={2}
+                      progress={((10 - countdown) / 10) * 100}
+                    />
+                    <View style={styles.countdownNumberContainer}>
+                      <Typography.Title style={styles.countdownNumber}>
+                        {countdown}
+                      </Typography.Title>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            )}
           </>
         )
       ) : (
@@ -443,7 +596,18 @@ function AmityCreateLivestreamPage() {
               />
               <TouchableOpacity
                 style={styles.communityButton}
-                onPress={() => navigation.goBack()}
+                onPress={() => {
+                  const state = navigation.getState();
+                  const routes = state.routes;
+                  const currentIndex = state.index;
+                  const previousRoute = routes[currentIndex - 1];
+
+                  if (previousRoute?.name === 'LivestreamPostTargetSelection') {
+                    navigation.goBack();
+                  } else {
+                    return;
+                  }
+                }}
                 activeOpacity={0.7}
               >
                 <Typography.Body
@@ -452,7 +616,11 @@ function AmityCreateLivestreamPage() {
                   ellipsizeMode="tail"
                 >
                   Live on{' '}
-                  <Typography.BodyBold numberOfLines={1} ellipsizeMode="tail">
+                  <Typography.BodyBold
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                    style={styles.communityName}
+                  >
                     {targetName}
                   </Typography.BodyBold>
                 </Typography.Body>
@@ -567,9 +735,7 @@ function AmityCreateLivestreamPage() {
         )}
         <SwitchCameraButton
           pageId={PageID.create_livestream_page}
-          onPress={() => {
-            streamRef.current && streamRef.current.switchCamera();
-          }}
+          onPress={switchCamera}
         />
       </View>
     </SafeAreaView>

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;