agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/components/precall/joinWaitingRoomBtn.tsx

@@ -0,0 +1,255 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React, {useContext, useEffect} from 'react';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import {usePreCall} from './usePreCall';
+import {useString, useStringRef} from '../../utils/useString';
+import {
+  ChannelProfile,
+  DispatchContext,
+  PropsContext,
+  useLocalUid,
+} from '../../../agora-rn-uikit';
+import {
+  PrecallJoinBtnTextInterface,
+  precallJoinBtnText,
+} from '../../language/default-labels/precallScreenLabels';
+
+import useGetName from '../../utils/useGetName';
+import {useWakeLock} from '../useWakeLock';
+import isMobileOrTablet from '../../utils/isMobileOrTablet';
+import {isWebInternal} from '../../utils/common';
+import useSetName from '../../utils/useSetName';
+import {useUserPreference} from '../useUserPreference';
+import {useSetRoomInfo} from '../room-info/useSetRoomInfo';
+import {EventNames} from '../../rtm-events';
+import {WaitingRoomStatus, useRoomInfo} from '../room-info/useRoomInfo';
+import Toast from '../../../react-native-toast-message';
+
+import events from '../../rtm-events-api';
+import useWaitingRoomAPI from '../../subComponents/waiting-rooms/useWaitingRoomAPI';
+import {UserType} from '../RTMConfigure';
+import {useContent} from 'customization-api';
+import {
+  waitingRoomApprovalRejectionToastHeading,
+  waitingRoomApprovalRejectionToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+
+const audio = new Audio(
+  'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
+);
+
+export interface PreCallJoinWaitingRoomBtnProps {
+  render?: (
+    onPress: () => void,
+    title: string,
+    disabled: boolean,
+  ) => JSX.Element;
+}
+
+let shouldWaitingRoomPoll = null;
+const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
+  const headinglabel = useStringRef(waitingRoomApprovalRejectionToastHeading);
+  const subheadinglabel = useStringRef(
+    waitingRoomApprovalRejectionToastSubHeading,
+  );
+  let pollingTimeout = React.useRef(null);
+  const {rtcProps} = useContext(PropsContext);
+  const {setCallActive, callActive} = usePreCall();
+  const username = useGetName();
+  const setUsername = useSetName();
+  const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
+  const {awake, request} = useWakeLock();
+  const {saveName} = useUserPreference();
+  const waitingRoomButton =
+    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
+  const {setRoomInfo} = useSetRoomInfo();
+  const {request: requestToJoin} = useWaitingRoomAPI();
+
+  const {activeUids} = useContent();
+  const activeUidsRef = React.useRef(activeUids);
+
+  React.useEffect(() => {
+    activeUidsRef.current = activeUids;
+  }, [activeUids]);
+
+  const [buttonText, setButtonText] = React.useState(
+    waitingRoomButton({
+      waitingRoom: true,
+      ready: isInWaitingRoom,
+    }),
+  );
+
+  const {dispatch} = useContext(DispatchContext);
+  const localUid = useLocalUid();
+
+  const {
+    data: {token, isHost},
+  } = useRoomInfo();
+
+  useEffect(() => {
+    if ($config.ENABLE_WAITING_ROOM && !isHost && token) {
+      setCallActive(true);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    events.on(EventNames.WAITING_ROOM_RESPONSE, data => {
+      const {approved, mainUser, screenShare, whiteboard, chat} = JSON.parse(
+        data?.payload,
+      );
+      // stop polling if user has responsed with yes / no
+
+      pollingTimeout.current && clearTimeout(pollingTimeout.current);
+      shouldWaitingRoomPoll = false;
+
+      if (callActive) return;
+      // on approve/reject response from host, waiting room permission is reset
+      // update waitinng room status on uid
+      dispatch({
+        type: 'UpdateRenderList',
+        value: [localUid, {isInWaitingRoom: false}],
+      });
+
+      if (approved) {
+        setRoomInfo(prev => {
+          return {
+            ...prev,
+            isInWaitingRoom: false,
+            waitingRoomStatus: WaitingRoomStatus.APPROVED,
+            data: {
+              ...prev.data,
+              token: mainUser.rtc,
+              screenShareToken: screenShare.rtc,
+              screenShareUid: screenShare.uid,
+              whiteboard,
+              chat: {
+                user_token: chat?.userToken,
+                group_id: chat?.groupId,
+                is_group_owner: chat?.isGroupOwner,
+              },
+            },
+          };
+        });
+      } else {
+        setRoomInfo(prev => {
+          return {
+            ...prev,
+            isInWaitingRoom: false,
+            waitingRoomStatus: WaitingRoomStatus.REJECTED,
+          };
+        });
+        // inform user that entry was denied by the host
+        Toast.show({
+          leadingIconName: 'info',
+          text1: headinglabel?.current(),
+          text2: subheadinglabel?.current(),
+          visibilityTime: 3000,
+          type: 'error',
+          primaryBtn: null,
+          secondaryBtn: null,
+        });
+      }
+    });
+    return () => {
+      clearTimeout(pollingTimeout.current);
+      shouldWaitingRoomPoll = false;
+    };
+  }, []);
+
+  const requestServerToJoinRoom = async () => {
+    // polling for every 30 seconds
+    const pollFunction = async () => {
+      if (shouldWaitingRoomPoll) {
+        const res = await requestToJoin({send_event: true});
+        pollingTimeout.current = setTimeout(() => {
+          clearTimeout(pollingTimeout.current);
+          pollFunction();
+        }, 15000);
+      }
+
+      if (!shouldWaitingRoomPoll) {
+        // If the request is approved/rejected stop polling
+        clearTimeout(pollingTimeout.current);
+      }
+    };
+
+    // Call the polling function immediately
+    pollFunction();
+  };
+
+  const onSubmit = () => {
+    shouldWaitingRoomPoll = true;
+    setUsername(username.trim());
+    //updating name in the backend
+    saveName(username.trim());
+    //setCallActive(true);
+
+    // add the waitingRoomStatus to the uid
+    dispatch({
+      type: 'UpdateRenderList',
+      value: [localUid, {isInWaitingRoom: true}],
+    });
+    // Enter waiting rooom;
+    setRoomInfo(prev => {
+      return {...prev, isInWaitingRoom: true};
+    });
+
+    // join request API to server, server will send RTM message to all hosts regarding request from this user,
+    requestServerToJoinRoom();
+
+    // Play a sound to avoid autoblocking in safari
+    if (isWebInternal() || isMobileOrTablet()) {
+      audio.volume = 0;
+      audio.play().then(() => {
+        // pause directly once played
+        audio.pause();
+      });
+    }
+    // Avoid Sleep only on mobile browsers
+    if (isWebInternal() && isMobileOrTablet() && !awake) {
+      // Request wake lock
+      request();
+    }
+  };
+
+  useEffect(() => {
+    setButtonText(
+      waitingRoomButton({
+        waitingRoom: true,
+        ready: !isInWaitingRoom,
+      }),
+    );
+  }, [isInWaitingRoom]);
+
+  const title = buttonText;
+  const onPress = () => onSubmit();
+  const disabled = isInWaitingRoom || username?.trim() === '';
+  return props?.render ? (
+    props.render(onPress, title, disabled)
+  ) : (
+    <PrimaryButton
+      // iconName={'video-on'}
+      onPress={onPress}
+      disabled={disabled}
+      text={title}
+      containerStyle={{
+        minWidth: '100%',
+        paddingHorizontal: 10,
+      }}
+      textStyle={{textAlign: 'center'}}
+    />
+  );
+};
+
+export default JoinWaitingRoomBtn;

package/template/src/components/precall/meetingTitle.tsx

@@ -1,28 +1,57 @@
 import React from 'react';
-import {Text, StyleSheet, View} from 'react-native';
-import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import {Text, StyleSheet, View, TextStyle} from 'react-native';
+import {isMobileUA, trimText} from '../../utils/common';
+import ThemeConfig from '../../theme';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 
-const MeetingTitle: React.FC = () => {
+export interface MeetingTitleProps {
+  prefix?: string;
+}
+const isMobile = isMobileUA();
+const MeetingTitle = (props?: MeetingTitleProps) => {
   const {
     data: {meetingTitle},
-  } = useMeetingInfo();
+  } = useRoomInfo();
+
   return (
-    <>
-      <Text style={[style.titleHeading, {color: $config.PRIMARY_COLOR}]}>
-        {meetingTitle}
+    <View style={isMobile ? style.mobileContainer : style.desktopContainer}>
+      <Text
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={[style.textStyle, style.prefixStyle]}>
+        {props.prefix}
+      </Text>
+      <Text style={[style.textStyle, {fontWeight: '600'}]}>
+        {trimText(meetingTitle)}
       </Text>
-      <View style={{height: 50}} />
-    </>
+    </View>
   );
 };
 
 export default MeetingTitle;
 
 const style = StyleSheet.create({
-  titleHeading: {
-    fontSize: 28,
-    fontWeight: '700',
+  mobileContainer: {
+    flexDirection: 'column',
+    alignSelf: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  desktopContainer: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+  },
+  textStyle: {
+    fontSize: ThemeConfig.FontSize.large,
+    lineHeight: 28,
+    fontWeight: '400',
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
     textAlign: 'center',
-    color: $config.SECONDARY_FONT_COLOR,
+  },
+  prefixStyle: {
+    marginRight: 8,
+    color: isMobile
+      ? $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
+      : $config.FONT_COLOR,
   },
 });

package/template/src/components/precall/selectDevice.tsx

@@ -16,31 +16,11 @@ import {isWebInternal} from '../../utils/common';
 import SelectDevice from '../../subComponents/SelectDevice';
 import {useString} from '../../utils/useString';
 
-const selectDevice: React.FC = () => {
-  //commented for v1 release
-  //const selectInputDeviceLabel = useString('selectInputDeviceLabel')();
-  const selectInputDeviceLabel = 'Select Input Device';
-  return (
-    <>
-      <Text style={style.subHeading}>{selectInputDeviceLabel}</Text>
-      <View
-        style={{
-          flex: 1,
-          maxWidth: isWebInternal() ? '25vw' : 'auto',
-          marginVertical: 30,
-        }}>
-        <SelectDevice />
-      </View>
-    </>
-  );
+export interface DeviceSelectProps {
+  isOnPrecall?: boolean;
+}
+const selectDevice = (props?: DeviceSelectProps) => {
+  return <SelectDevice {...props} />;
 };
 
 export default selectDevice;
-
-const style = StyleSheet.create({
-  subHeading: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-  },
-});

package/template/src/components/precall/textInput.tsx

@@ -11,31 +11,57 @@
 */
 
 import React from 'react';
+import {TextStyle} from 'react-native';
 import TextInput from '../../atoms/TextInput';
 import {useString} from '../../utils/useString';
-import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 import useSetName from '../../utils/useSetName';
 import useGetName from '../../utils/useGetName';
+import Input from '../../atoms/Input';
+import ThemeConfig from '../../theme';
+import {maxInputLimit} from '../../utils/common';
+import {
+  precallInputGettingName,
+  precallNameInputPlaceholderText,
+  precallYouAreJoiningAsHeading,
+} from '../../language/default-labels/precallScreenLabels';
 
-const PreCallTextInput: React.FC = () => {
-  //commented for v1 release
-  // const userNamePlaceholder = useString('userNamePlaceholder')();
-  // const fetchingNamePlaceholder = useString('fetchingNamePlaceholder')();
-  const userNamePlaceholder = 'Display name*';
-  const fetchingNamePlaceholder = 'Getting name...';
+export interface PreCallTextInputProps {
+  labelStyle?: TextStyle;
+  textInputStyle?: TextStyle;
+  isDesktop?: boolean;
+  isOnPrecall?: boolean;
+}
+const PreCallTextInput = (props?: PreCallTextInputProps) => {
+  const placeHolder = useString(precallNameInputPlaceholderText)();
+  const joiningAs = useString(precallYouAreJoiningAsHeading)();
+  const fetchingNamePlaceholder = useString(precallInputGettingName)();
   const username = useGetName();
   const setUsername = useSetName();
-  const {isJoinDataFetched} = useMeetingInfo();
+  const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
+  const {isDesktop = false, isOnPrecall = false} = props;
 
   return (
-    <TextInput
+    <Input
+      maxLength={maxInputLimit}
+      label={isOnPrecall ? '' : isDesktop ? joiningAs : ''}
+      labelStyle={
+        props?.labelStyle
+          ? props.labelStyle
+          : {
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              fontWeight: '400',
+              fontSize: ThemeConfig.FontSize.small,
+              lineHeight: ThemeConfig.FontSize.small,
+              color: $config.FONT_COLOR,
+            }
+      }
       value={username}
-      onChangeText={(text) => setUsername(text ? text : '')}
+      autoFocus
+      onChangeText={text => setUsername(text ? text : '')}
       onSubmitEditing={() => {}}
-      placeholder={
-        isJoinDataFetched ? userNamePlaceholder : fetchingNamePlaceholder
-      }
-      editable={isJoinDataFetched}
+      placeholder={isJoinDataFetched ? placeHolder : fetchingNamePlaceholder}
+      editable={!isInWaitingRoom && isJoinDataFetched}
     />
   );
 };

package/template/src/components/precall/usePreCall.tsx

@@ -9,19 +9,40 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {createContext} from 'react';
+import React, {createContext, useContext, useEffect, useState} from 'react';
 import {createHook} from 'customization-implementation';
 import {ApolloError} from '@apollo/client';
+import {SdkApiContext} from '../SdkApiContext';
+import {useRoomInfo} from '../room-info/useRoomInfo';
+import SDKEvents from '../../utils/SdkEvents';
+import DeviceContext from '../DeviceContext';
+import useSetName from '../../utils/useSetName';
 
 export interface PreCallContextInterface {
   callActive: boolean;
   setCallActive: React.Dispatch<React.SetStateAction<boolean>>;
   error?: ApolloError;
+  isCameraAvailable?: boolean;
+  setCameraAvailable: React.Dispatch<React.SetStateAction<boolean>>;
+  isMicAvailable?: boolean;
+  setMicAvailable: React.Dispatch<React.SetStateAction<boolean>>;
+  isSpeakerAvailable?: boolean;
+  setSpeakerAvailable: React.Dispatch<React.SetStateAction<boolean>>;
+  isPermissionRequested: boolean;
+  setIsPermissionRequested: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const PreCallContext = createContext<PreCallContextInterface>({
   callActive: false,
   setCallActive: () => {},
+  isCameraAvailable: false,
+  isMicAvailable: false,
+  isSpeakerAvailable: false,
+  setCameraAvailable: () => {},
+  setMicAvailable: () => {},
+  setSpeakerAvailable: () => {},
+  isPermissionRequested: false,
+  setIsPermissionRequested: () => {},
 });
 
 interface PreCallProviderProps {
@@ -30,8 +51,51 @@ interface PreCallProviderProps {
 }
 
 const PreCallProvider = (props: PreCallProviderProps) => {
+  const {join, enterRoom} = useContext(SdkApiContext);
+  const roomInfo = useRoomInfo();
+  const {deviceList} = useContext(DeviceContext);
+  const setUsername = useSetName();
+  const [isCameraAvailable, setCameraAvailable] = useState(false);
+  const [isMicAvailable, setMicAvailable] = useState(false);
+  const [isSpeakerAvailable, setSpeakerAvailable] = useState(false);
+  const [isPermissionRequested, setIsPermissionRequested] = useState(false);
+
+  const value = {
+    ...props.value,
+    setCameraAvailable,
+    isCameraAvailable,
+    isMicAvailable,
+    setMicAvailable,
+    isSpeakerAvailable,
+    setSpeakerAvailable,
+    isPermissionRequested,
+    setIsPermissionRequested,
+  };
+
+  useEffect(() => {
+    if (join.initialized && join.phrase) {
+      if (join.userName) {
+        setUsername(join.userName);
+      }
+
+      //@ts-ignore
+      join?.promise?.res([
+        roomInfo.data,
+        (userName: string) => {
+          return new Promise((res, rej) => {
+            setUsername(userName);
+            enterRoom.set({res, rej});
+            props.value.setCallActive(true);
+          });
+        },
+      ]);
+    }
+
+    SDKEvents.emit('ready-to-join', roomInfo.data.meetingTitle, deviceList);
+  }, []);
+
   return (
-    <PreCallContext.Provider value={{...props.value}}>
+    <PreCallContext.Provider value={value}>
       {props.children}
     </PreCallContext.Provider>
   );

package/template/src/components/recording-bot/RecordingBotRoute.tsx

@@ -0,0 +1,48 @@
+/*
+********************************************
+ Copyright © 2024 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {useContext, useEffect, useState} from 'react';
+import type {RouteProps} from 'react-router';
+import StorageContext from '../StorageContext';
+import Loading from '../../subComponents/Loading';
+import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
+
+interface RecordingBotRouteProps extends RouteProps {
+  children: React.ReactNode;
+  history: any;
+}
+
+const RecordingBotRoute: React.FC<RecordingBotRouteProps> = props => {
+  const {setStore, store} = useContext(StorageContext);
+  const [ready, setReady] = useState(false);
+  const {recordingBotToken} = useIsRecordingBot();
+  useEffect(() => {
+    logger.log(
+      LogSource.Internals,
+      'RECORDING',
+      'Inside the bot route wrapper',
+    );
+    setStore &&
+      setStore(prevState => ({
+        ...prevState,
+        token: recordingBotToken,
+      }));
+  }, []);
+
+  useEffect(() => {
+    store?.token === recordingBotToken && setReady(true);
+  }, [store?.token, recordingBotToken]);
+
+  return ready ? <>{props.children}</> : <Loading text={'Loading...'} />;
+};
+
+export default RecordingBotRoute;

package/template/src/components/recordings/RecordingsDateTable.tsx

@@ -0,0 +1,62 @@
+import React, {useState, useEffect} from 'react';
+import {View, Text} from 'react-native';
+import {style} from './style';
+import {RTableHeader, RTableBody, RTableFooter} from './recording-table';
+import {useRecording} from '../../subComponents/recording/useRecording';
+
+function RecordingsDateTable() {
+  const [state, setState] = React.useState({
+    status: 'idle',
+    data: {
+      pagination: {},
+      recordings: [],
+    },
+    error: null,
+  });
+  const {
+    status,
+    data: {pagination, recordings},
+    error,
+  } = state;
+
+  const {fetchRecordings} = useRecording();
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    setState(prev => ({...prev, status: 'pending'}));
+    fetchRecordings(currentPage).then(
+      response =>
+        setState(prev => ({
+          ...prev,
+          status: 'resolved',
+          data: {
+            recordings: response?.recordings || [],
+            pagination: response?.pagination || {},
+          },
+        })),
+      error => setState(prev => ({...prev, status: 'rejected', error})),
+    );
+  }, [fetchRecordings, currentPage]);
+
+  if (status === 'rejected') {
+    return (
+      <Text style={[style.ttime, style.pv10, style.ph20]}>
+        {error?.message}
+      </Text>
+    );
+  }
+  return (
+    <View style={style.ttable}>
+      <RTableHeader />
+      <RTableBody status={status} recordings={recordings} />
+      <RTableFooter
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        pagination={pagination}
+      />
+    </View>
+  );
+}
+
+export default RecordingsDateTable;