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

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

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   Alert,
   Image,
@@ -6,15 +12,20 @@ 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, close } from '../../../../v4/assets/icons';
+import { arrowDown } from '../../../../v4/assets/icons';
 import { SvgXml } from 'react-native-svg';
 import { Typography } from '../../../component/Typography/Typography';
 import { useTheme } from 'react-native-paper';
@@ -22,12 +33,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, RoomRepository } from '@amityco/ts-sdk-react-native';
+import { PostRepository, StreamRepository } 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 { RoomStatus } from '../../../enum/roomStatus';
+import { LivestreamStatus } from '../../../enum/livestreamStatus';
 import { AmityThumbnailActionComponent } from '../../Components/AmityThumbnailActionComponent';
 import { StartLivestreamButton } from '../../../elements/StartLivestreamButton';
 import { PageID } from '../../../enum';
@@ -37,18 +48,6 @@ 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';
-
-// 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);
   const minutes = Math.floor(time / 60000);
@@ -65,6 +64,7 @@ const calculateTime = (time: number) => {
 
 function AmityCreateLivestreamPage() {
   const styles = useStyles();
+  const streamRef = useRef<any>(null);
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const theme = useTheme<MyMD3Theme>();
@@ -75,28 +75,15 @@ 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 [room, setRoom] = useState<Amity.Room | null>(null);
-  const timerRef = useRef<number | null>(null);
+  const [stream, setStream] = useState<Amity.Stream | null>(null);
+  const [timer] = useState<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 { showToast } = useToast();
-
-  const frontCamera = useCameraDevice('front');
-  const backCamera = useCameraDevice('back');
-  const cameraDevice = isFrontCamera ? frontCamera : backCamera;
-
   const {
     imageUri,
     isLoading,
@@ -113,43 +100,6 @@ 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) => {
@@ -206,54 +156,37 @@ function AmityCreateLivestreamPage() {
       setIsLive(true);
       setIsConnecting(true);
 
-      const { data: newStream } = await RoomRepository.createRoom({
+      const { data: newStream } = await StreamRepository.createStream({
         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: 'room' as Amity.PostContentType,
+          dataType: 'liveStream' as Amity.PostContentType,
           data: {
             text: `${newStream.title}${
               newStream.description ? `\n\n${newStream.description}` : ''
             }`,
-            roomId: newStream.roomId,
+            streamId: newStream.streamId,
           },
         };
 
         const newPost = await PostRepository.createPost(params);
 
-        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;
+        streamRef.current = StreamRepository.getStreamById(
+          newStream.streamId,
+          ({ data }) => {
+            setStream(data);
+            setPost(newPost.data);
+            streamRef?.current?.startPublish(newStream.streamId);
+          }
+        );
       }
     } catch (error) {
-      console.log('startLiveStream error', error);
       setIsLive(false);
       setIsConnecting(false);
       Alert.alert(
@@ -268,6 +201,17 @@ 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?',
@@ -290,22 +234,21 @@ function AmityCreateLivestreamPage() {
 
   const endLiveStream = useCallback(
     async (showEndPopup = false) => {
-      if (room) {
+      if (stream) {
         setIsEnding(true);
         try {
-          await RoomRepository.stopRoom(room.roomId);
+          await StreamRepository.disposeStream(stream.streamId);
         } catch (e) {
           console.log('disposeStream error', e);
         } finally {
+          streamRef?.current.stopPublish();
+
           setIsLive(false);
-          setRoom(null);
+          setStream(null);
           setTitle('');
           setDescription('');
           setTime(0);
-          if (timerRef.current) {
-            clearInterval(timerRef.current);
-            timerRef.current = null;
-          }
+          clearInterval(timer);
           setIsEnding(false);
           setReconnecting(false);
 
@@ -316,40 +259,15 @@ function AmityCreateLivestreamPage() {
         }
       }
     },
-    [post, room, navigation]
+    [post, stream, timer, navigation]
   );
 
   useEffect(() => {
-    // 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) {
+    const fourHours = 4 * 60 * 60 * 1000;
+    if (streamRef.current && stream && 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,
-    room,
-    time,
-    showToast,
-    toastTriggerTime,
-    fourHours,
-    countdownStart,
-  ]);
+  }, [endLiveStream, stream, time]);
 
   useEffect(() => {
     if (Platform.OS === 'android') checkPermissionAndroid();
@@ -366,34 +284,48 @@ function AmityCreateLivestreamPage() {
     return () => unsubscribe();
   }, []);
 
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      streamRef.current && streamRef.current.switchCamera();
+    }, 300);
+  }, [streamRef]);
+
   useEffect(() => {
     let threeMinutesTimeout: number;
 
-    if (reconnecting && room && room?.status === RoomStatus.live) {
+    if (reconnecting && stream && stream?.status === 'live') {
       threeMinutesTimeout = setTimeout(() => {
         endLiveStream();
       }, 1000 * 60 * 3);
     }
 
-    if (!reconnecting && room && room?.status === RoomStatus.live) {
+    if (
+      !reconnecting &&
+      stream &&
+      stream?.status === 'live' &&
+      streamRef?.current
+    ) {
+      streamRef?.current?.startPublish(stream?.streamId);
+
       if (threeMinutesTimeout) {
         clearTimeout(threeMinutesTimeout);
         threeMinutesTimeout = null;
       }
     }
-  }, [reconnecting, endLiveStream, room]);
+  }, [reconnecting, endLiveStream, stream]);
 
   useEffect(() => {
     const isTerminated =
-      room?.moderation?.terminateLabels &&
-      room?.moderation?.terminateLabels?.length > 0;
+      stream?.moderation?.terminateLabels &&
+      stream?.moderation?.terminateLabels?.length > 0;
     const isLiveOrEnded =
-      room?.status === RoomStatus.live || room?.status === RoomStatus.ended;
+      stream?.status === LivestreamStatus.live ||
+      stream?.status === LivestreamStatus.ended;
 
     if (isLiveOrEnded && isTerminated) {
       navigation.replace('LivestreamTerminated', { type: 'streamer' });
     }
-  }, [room?.moderation?.terminateLabels, room?.status, navigation]);
+  }, [stream?.moderation?.terminateLabels, stream?.status, navigation]);
 
   useEffect(() => {
     const unsubscribe = unsubscribeRef.current;
@@ -413,53 +345,17 @@ function AmityCreateLivestreamPage() {
           style={[styles.overlay, !hasPermission && styles.noPermissionOverlay]}
         />
       )}
-
-      {/* 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>
+      {/* {hasPermission ? (
+        <View style={styles.cameraContainer}>
+          <View style={styles.camera}>
+            <AmityVideoBroadcaster
+              ref={streamRef}
+              bitrate={2 * 1024 * 1024}
+              onBroadcastStateChange={onBroadcastStateChange}
+              resolution={{ width: 1280, height: 720 }}
+            />
           </View>
-        )
+        </View>
       ) : (
         <View style={styles.permission}>
           <Typography.TitleBold style={styles.permissionTitle}>
@@ -478,8 +374,7 @@ function AmityCreateLivestreamPage() {
             </Typography.BodyBold>
           </Button>
         </View>
-      )}
-
+      )} */}
       {isEnding && (
         <View style={styles.connecting}>
           <CircularProgressIndicator size={40} strokeWidth={2} />
@@ -511,46 +406,12 @@ 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>
-            )}
           </>
         )
       ) : (
@@ -582,18 +443,7 @@ function AmityCreateLivestreamPage() {
               />
               <TouchableOpacity
                 style={styles.communityButton}
-                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;
-                  }
-                }}
+                onPress={() => navigation.goBack()}
                 activeOpacity={0.7}
               >
                 <Typography.Body
@@ -602,11 +452,7 @@ function AmityCreateLivestreamPage() {
                   ellipsizeMode="tail"
                 >
                   Live on{' '}
-                  <Typography.BodyBold
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                    style={styles.communityName}
-                  >
+                  <Typography.BodyBold numberOfLines={1} ellipsizeMode="tail">
                     {targetName}
                   </Typography.BodyBold>
                 </Typography.Body>
@@ -721,7 +567,9 @@ function AmityCreateLivestreamPage() {
         )}
         <SwitchCameraButton
           pageId={PageID.create_livestream_page}
-          onPress={switchCamera}
+          onPress={() => {
+            streamRef.current && streamRef.current.switchCamera();
+          }}
         />
       </View>
     </SafeAreaView>

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 - 50;
+  const availableHeight = screenHeight - 80 - 60 - 40 - 40 - 120;
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -26,6 +26,7 @@ export const useStyles = () => {
     },
     overlay: {
       flex: 1,
+      height: '100%',
       top: 0,
       bottom: 0,
       left: 0,
@@ -157,15 +158,8 @@ export const useStyles = () => {
     text: {
       color: theme.colors.background,
     },
-
-    closeButton: {
-      left: 16,
-      zIndex: 100,
-      position: 'absolute',
-      top: 20 + insets.top,
-    },
     timer: {
-      right: 16,
+      left: 16,
       zIndex: 100,
       position: 'absolute',
       top: 20 + insets.top,
@@ -197,69 +191,6 @@ 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;