agora-appbuilder-core 4.0.0 → 4.0.2

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

@@ -0,0 +1,250 @@
+/*
+********************************************
+ 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} = 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,
+            },
+          };
+        });
+      } 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,31 +1,57 @@
 import React from 'react';
 import {Text, StyleSheet, View, TextStyle} from 'react-native';
-import {trimText} from '../../utils/common';
+import {isMobileUA, trimText} from '../../utils/common';
 import ThemeConfig from '../../theme';
-import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 
 export interface MeetingTitleProps {
-  textStyle?: TextStyle;
+  prefix?: string;
 }
+const isMobile = isMobileUA();
 const MeetingTitle = (props?: MeetingTitleProps) => {
   const {
     data: {meetingTitle},
-  } = useMeetingInfo();
+  } = useRoomInfo();
+
   return (
-    <Text style={[style.titleHeading, props?.textStyle ? props.textStyle : {}]}>
-      {trimText(meetingTitle)}
-    </Text>
+    <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>
   );
 };
 
 export default MeetingTitle;
 
 const style = StyleSheet.create({
-  titleHeading: {
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: ThemeConfig.FontSize.normal,
-    fontWeight: '600',
+  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',
+  },
+  prefixStyle: {
+    marginRight: 8,
+    color: isMobile
+      ? $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
+      : $config.FONT_COLOR,
   },
 });

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

@@ -16,11 +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 <SelectDevice />;
+export interface DeviceSelectProps {
+  isOnPrecall?: boolean;
+}
+const selectDevice = (props?: DeviceSelectProps) => {
+  return <SelectDevice {...props} />;
 };
 
 export default selectDevice;

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

@@ -14,33 +14,37 @@ 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';
 
 export interface PreCallTextInputProps {
   labelStyle?: TextStyle;
   textInputStyle?: TextStyle;
   isDesktop?: boolean;
+  isOnPrecall?: boolean;
 }
-const PreCallTextInput: React.FC = (props?: PreCallTextInputProps) => {
-  //commented for v1 release
-  // const userNamePlaceholder = useString('userNamePlaceholder')();
-  // const fetchingNamePlaceholder = useString('fetchingNamePlaceholder')();
-  const userNamePlaceholder = 'Enter Your Name';
-  const fetchingNamePlaceholder = 'Getting name...';
+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 {isDesktop = false} = props;
+  const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
+  const {isDesktop = false, isOnPrecall = false} = props;
 
   return (
     <Input
       maxLength={maxInputLimit}
-      label={isDesktop ? ($config.EVENT_MODE ? 'Your Name' : 'Joining as') : ''}
+      label={isOnPrecall ? '' : isDesktop ? joiningAs : ''}
       labelStyle={
         props?.labelStyle
           ? props.labelStyle
@@ -54,16 +58,10 @@ const PreCallTextInput: React.FC = (props?: PreCallTextInputProps) => {
       }
       value={username}
       autoFocus
-      onChangeText={(text) => setUsername(text ? text : '')}
+      onChangeText={text => setUsername(text ? text : '')}
       onSubmitEditing={() => {}}
-      placeholder={
-        isJoinDataFetched
-          ? $config.EVENT_MODE
-            ? 'Luke Skywalker'
-            : userNamePlaceholder
-          : fetchingNamePlaceholder
-      }
-      editable={isJoinDataFetched}
+      placeholder={isJoinDataFetched ? placeHolder : fetchingNamePlaceholder}
+      editable={!isInWaitingRoom && isJoinDataFetched}
     />
   );
 };

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

@@ -9,9 +9,14 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {createContext} from 'react';
+import React, {createContext, useContext, useEffect} 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;
@@ -46,6 +51,33 @@ interface PreCallProviderProps {
 }
 
 const PreCallProvider = (props: PreCallProviderProps) => {
+  const {join, enterRoom} = useContext(SdkApiContext);
+  const roomInfo = useRoomInfo();
+  const {deviceList} = useContext(DeviceContext);
+  const setUsername = useSetName();
+
+  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}}>
       {props.children}

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

@@ -0,0 +1,42 @@
+/*
+********************************************
+ 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';
+
+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(() => {
+    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;

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

@@ -0,0 +1,135 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+  ModalProps,
+  ViewStyle,
+} from 'react-native';
+import React, {SetStateAction} from 'react';
+import IconButton from '../../atoms/IconButton';
+import ThemeConfig from '../../theme';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {isMobileUA, useIsDesktop} from '../../utils/common';
+
+interface RecordingsModalProps extends ModalProps {
+  title?: string;
+  subtitle?: string;
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  showCloseIcon?: boolean;
+  children: React.ReactNode;
+  contentContainerStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+  cancelable?: boolean;
+}
+const RecordingsModal = (props: RecordingsModalProps) => {
+  const {
+    title,
+    modalVisible,
+    setModalVisible,
+    children,
+    cancelable = false,
+  } = props;
+
+  const isDesktop = useIsDesktop()('popup');
+
+  return (
+    <Modal
+      animationType="none"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        setModalVisible(false);
+      }}>
+      <View style={[styles.centeredView, isDesktop && {alignItems: 'center'}]}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            cancelable && setModalVisible(false);
+          }}>
+          <View style={styles.backDrop} />
+        </TouchableWithoutFeedback>
+        <View style={[styles.modalView, props?.contentContainerStyle]}>
+          <View style={styles.header}>
+            <Text style={styles.title}>{title}</Text>
+            <View>
+              <IconButton
+                hoverEffect={true}
+                hoverEffectStyle={{
+                  backgroundColor: $config.ICON_BG_COLOR,
+                  borderRadius: 20,
+                }}
+                iconProps={{
+                  iconType: 'plain',
+                  iconContainerStyle: {
+                    padding: isMobileUA() ? 0 : 5,
+                  },
+                  name: 'close',
+                  tintColor: $config.SECONDARY_ACTION_COLOR,
+                }}
+                onPress={() => {
+                  setModalVisible(false);
+                }}
+              />
+            </View>
+          </View>
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default RecordingsModal;
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  modalView: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
+    maxWidth: 650,
+  },
+  backDrop: {
+    zIndex: 1,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60%'],
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    width: '100%',
+  },
+  title: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.high,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.xLarge,
+    lineHeight: 32,
+    fontWeight: '500',
+    alignSelf: 'center',
+  },
+});