agora-appbuilder-core 3.0.8 → 4.0.0-api.0

package/template/src/components/popups/InvitePopup.tsx

@@ -0,0 +1,115 @@
+/*
+********************************************
+ 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, {useEffect} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {
+  SHARE_LINK_CONTENT_TYPE,
+  useShareLink,
+} from '../../components/useShareLink';
+import Popup from '../../atoms/Popup';
+import Spacer from '../../atoms/Spacer';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import TertiaryButton from '../../atoms/TertiaryButton';
+import ThemeConfig from '../../theme';
+import {CopyMeetingInfo} from '../../components/Share';
+import {isMobileUA, useIsDesktop} from '../../utils/common';
+import {useVideoCall} from '../useVideoCall';
+import {useParams} from '../Router';
+import useGetMeetingPhrase from '../../utils/useGetMeetingPhrase';
+
+const InvitePopup = () => {
+  const {setShowInvitePopup, showInvitePopup} = useVideoCall();
+  const isDesktop = useIsDesktop();
+  const {copyShareLinkToClipboard} = useShareLink();
+  const {phrase} = useParams<{phrase: string}>();
+  const getMeeting = useGetMeetingPhrase();
+  useEffect(() => {
+    getMeeting(phrase);
+  }, [phrase]);
+  return (
+    <Popup
+      modalVisible={showInvitePopup}
+      setModalVisible={setShowInvitePopup}
+      title="Invite others to join this room"
+      showCloseIcon={true}
+      containerStyle={{alignItems: isDesktop('popup') ? 'center' : 'stretch'}}
+      contentContainerStyle={style.contentContainer}>
+      <CopyMeetingInfo showSubLabel={false} />
+      <View
+        style={
+          isDesktop('popup') ? style.btnContainer : style.btnContainerMobile
+        }>
+        {isDesktop('popup') ? (
+          <View style={{flex: 1}}>
+            <TertiaryButton
+              text={'CANCEL'}
+              textStyle={style.btnText}
+              containerStyle={{
+                width: '100%',
+                height: 48,
+                paddingVertical: 12,
+                paddingHorizontal: 12,
+                borderRadius: ThemeConfig.BorderRadius.medium,
+              }}
+              onPress={() => {
+                setShowInvitePopup(false);
+              }}
+            />
+          </View>
+        ) : null}
+        {isDesktop('popup') ? <Spacer size={10} horizontal={true} /> : <></>}
+        <View style={{flex: 1}}>
+          <PrimaryButton
+            textStyle={style.btnText}
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            onPress={() => {
+              copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.MEETING_INVITE);
+            }}
+            text={'COPY INVITATION'}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default InvitePopup;
+
+const style = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 48,
+  },
+  btnContainerMobile: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 30,
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  contentContainer: {
+    padding: isMobileUA() ? 24 : 40,
+    minWidth: 342,
+  },
+});

package/template/src/components/popups/StopRecordingPopup.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Spacer from '../../atoms/Spacer';
+import Popup from '../../atoms/Popup';
+import TertiaryButton from '../../atoms/TertiaryButton';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import ThemeConfig from '../../theme';
+import {useIsDesktop} from '../../utils/common';
+import {useRecording} from 'customization-api';
+import {useVideoCall} from '../useVideoCall';
+
+const StopRecordingPopup = () => {
+  const {showStopRecordingPopup, setShowStopRecordingPopup} = useVideoCall();
+  const {stopRecording, isRecordingActive} = useRecording();
+  const isDesktop = useIsDesktop()('popup');
+  const recordingLabelHeading = 'Stop Recording?';
+  const recordingLabelSubHeading =
+    'Are you sure you want to stop recording? You can’t undo this action.';
+
+  const cancelBtnLabel = 'CANCEL';
+  const stopRecordingBtnLabel = 'END RECORDING';
+
+  const doStopRecording = () => {
+    if (isRecordingActive) {
+      stopRecording && stopRecording();
+      setShowStopRecordingPopup(false);
+    }
+  };
+  return (
+    <Popup
+      modalVisible={showStopRecordingPopup}
+      setModalVisible={setShowStopRecordingPopup}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{recordingLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{recordingLabelSubHeading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: isDesktop ? 90 : '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={cancelBtnLabel}
+            onPress={() => setShowStopRecordingPopup(false)}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 2}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={stopRecordingBtnLabel}
+            onPress={doStopRecording}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default StopRecordingPopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});

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

@@ -9,18 +9,28 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
+import React, {useState, useEffect, useContext} from 'react';
 import {View, StyleSheet} from 'react-native';
 import {useCustomization} from 'customization-implementation';
-import {isValidReactComponent} from '../../utils/common';
+import {
+  isAndroid,
+  isIOS,
+  isMobileUA,
+  isValidReactComponent,
+} from '../../utils/common';
 import LocalVideoMute, {
   LocalVideoMuteProps,
 } from '../../subComponents/LocalVideoMute';
 import LocalAudioMute, {
   LocalAudioMuteProps,
 } from '../../subComponents/LocalAudioMute';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import PreCallSettings from './PreCallSettings';
+import Spacer from '../../atoms/Spacer';
+import {usePreCall} from './usePreCall';
+import DeviceContext from '../DeviceContext';
 
-const PreCallLocalMute: React.FC = () => {
+const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
   const {VideoMute, AudioMute} = useCustomization((data) => {
     let components: {
       VideoMute: React.ComponentType<LocalAudioMuteProps>;
@@ -60,15 +70,74 @@ const PreCallLocalMute: React.FC = () => {
     // }
     return components;
   });
+  const {isMobileView = false} = props;
+  const isNative = isAndroid() || isIOS();
+  // for mweb check for camera * mic availablity for desktop it happens in settings panel
+  // refactor later to set mic/camera availablity oustside settings panel <selectDevice>
+  const {deviceList} = useContext(DeviceContext);
+  const {setCameraAvailable, setMicAvailable} = usePreCall();
+  const audioDevices = deviceList.filter((device) => {
+    if (device.kind === 'audioinput') {
+      return true;
+    }
+  });
+  const videoDevices = deviceList.filter((device) => {
+    if (device.kind === 'videoinput') {
+      return true;
+    }
+  });
+  useEffect(() => {
+    if (audioDevices && audioDevices.length) {
+      isMobileView && !isNative && setMicAvailable(true);
+    }
+  }, [audioDevices]);
+
+  useEffect(() => {
+    if (videoDevices && videoDevices.length) {
+      isMobileView && !isNative && setCameraAvailable(true);
+    }
+  }, [videoDevices]);
   return (
-    <View style={style.precallControls}>
-      <View style={{alignSelf: 'center'}}>
-        <AudioMute />
+    <View
+      style={[style.precallControls, isMobileView && {paddingVertical: 10}]}
+      testID="precall-controls">
+      <View style={{width: 52, height: 52}}>
+        <AudioMute
+          isMobileView={isMobileView}
+          showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
+          showToolTip={true}
+        />
       </View>
+
       {!$config.AUDIO_ROOM && (
-        <View style={{alignSelf: 'center'}}>
-          <VideoMute />
-        </View>
+        <>
+          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />
+          <View
+            style={{
+              width: 52,
+              height: 52,
+            }}>
+            <VideoMute
+              isMobileView={isMobileView}
+              showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
+              showToolTip={true}
+            />
+          </View>
+        </>
+      )}
+
+      {/* Settings View in Mobile */}
+      {isMobileView && !isNative && (
+        <>
+          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />
+          <View
+            style={{
+              width: 52,
+              height: 52,
+            }}>
+            <PreCallSettings />
+          </View>
+        </>
       )}
     </View>
   );
@@ -83,10 +152,11 @@ export default PreCallLocalMute;
 const style = StyleSheet.create({
   precallControls: {
     flexDirection: 'row',
-    alignSelf: 'center',
-    padding: 10,
-    width: '40%',
-    justifyContent: 'space-around',
-    marginVertical: '5%',
+    paddingVertical: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    // borderBottomLeftRadius: 4,
+    // borderBottomRightRadius: 4,
   },
 });

package/template/src/components/precall/{LocalMute.native.tsx → LocalMute1.native.tsx}

@@ -10,7 +10,7 @@
 *********************************************
 */
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
+import {View, StyleSheet, Text} from 'react-native';
 import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent} from '../../utils/common';
 import LocalAudioMute, {
@@ -22,6 +22,7 @@ import LocalVideoMute, {
 import LocalSwitchCamera, {
   LocalSwitchCameraProps,
 } from '../../subComponents/LocalSwitchCamera';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 
 const PreCallLocalMute: React.FC = () => {
   const {VideoMute, AudioMute} = useCustomization((data) => {
@@ -63,9 +64,18 @@ const PreCallLocalMute: React.FC = () => {
     // }
     return components;
   });
+
   return (
-    <>
-      <View style={style.width50}>
+    <View style={style.precallControls} testID="precall-controls">
+      {!$config.AUDIO_ROOM && (
+        <View style={{alignSelf: 'center', marginRight: 30}}>
+          <VideoMute />
+        </View>
+      )}
+      <View style={{alignSelf: 'center'}}>
+        <AudioMute />
+      </View>
+      {/* <View style={style.width50}>
         <AudioMute />
       </View>
       {!$config.AUDIO_ROOM && (
@@ -79,8 +89,8 @@ const PreCallLocalMute: React.FC = () => {
             <LocalSwitchCamera />
           </View>
         </>
-      )}
-    </>
+      )} */}
+    </View>
   );
 };
 export const PreCallLocalMuteComponentsArray: [
@@ -92,4 +102,10 @@ export default PreCallLocalMute;
 
 const style = StyleSheet.create({
   width50: {width: 50},
+  precallControls: {
+    flexDirection: 'row',
+    paddingVertical: 10,
+    justifyContent: 'center',
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+  },
 });

package/template/src/components/precall/PermissionHelper.native.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const PermissionHelper = () => {
+  return <></>;
+};
+export default PermissionHelper;

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

@@ -0,0 +1,126 @@
+import {useLocalUserInfo} from 'customization-api';
+import React, {useContext, useEffect, useState} from 'react';
+import {
+  View,
+  Image,
+  Modal,
+  TouchableOpacity,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import Popup from '../../atoms/Popup';
+import ThemeConfig from '../../theme';
+//@ts-ignore
+import permissionHelper from '../../assets/permission.png';
+import {DispatchContext, PermissionState} from '../../../agora-rn-uikit';
+
+const PermissionHelper = () => {
+  const {dispatch} = useContext(DispatchContext);
+  const {permissionStatus} = useLocalUserInfo();
+  const [showPopup, setShowPopup] = useState(false);
+
+  const closePopup = () => {
+    dispatch({
+      type: 'LocalPermissionState',
+      value: [PermissionState.CANCELLED],
+    });
+  };
+  useEffect(() => {
+    //If permission already given it will take few milliseconds to resolve the promise. it will show the popup which not required. so added timeout
+    setTimeout(() => {
+      setShowPopup(true);
+    }, 500);
+  }, []);
+  //todo hari update the modal message based the veritical
+  return (
+    showPopup && (
+      <Popup
+        modalVisible={permissionStatus === PermissionState.REQUESTED}
+        setModalVisible={closePopup}
+        showCloseIcon={false}
+        contentContainerStyle={styles.modal}>
+        <View style={styles.modalImageContainer}>
+          <Image
+            style={styles.modalImage}
+            resizeMode={'contain'}
+            source={{uri: permissionHelper}}
+          />
+        </View>
+        <View style={styles.modalContent}>
+          <Text style={styles.infoMessage1}>
+            {$config.AUDIO_ROOM
+              ? 'Allow access to microphone'
+              : 'Allow access to camera and microphone'}
+          </Text>
+          <Text style={styles.infoMessage2}>
+            Select
+            <Text style={styles.infoMessage2Highlight}>{` “Allow” `}</Text>
+            {$config.AUDIO_ROOM
+              ? 'for others to hear you'
+              : 'for others to see and hear you'}
+          </Text>
+          <TouchableOpacity
+            onPress={() => {
+              closePopup();
+            }}>
+            <Text style={styles.dismissBtn}>Dismiss</Text>
+          </TouchableOpacity>
+        </View>
+      </Popup>
+    )
+  );
+};
+
+const styles = StyleSheet.create({
+  dismissBtn: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+    paddingVertical: 32,
+  },
+  infoMessage1: {
+    paddingHorizontal: 76,
+    paddingTop: 32,
+    paddingBottom: 12,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '700',
+    fontSize: ThemeConfig.FontSize.large,
+    textAlign: 'center',
+    color: $config.FONT_COLOR,
+  },
+  infoMessage2: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+  },
+  infoMessage2Highlight: {
+    fontWeight: '700',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.small,
+  },
+  modal: {
+    flex: 1,
+    flexDirection: 'column',
+    maxHeight: 386,
+    width: 441,
+    borderRadius: 20,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    borderWidth: 0,
+  },
+  modalImageContainer: {
+    minHeight: 190,
+  },
+  modalImage: {width: '100%', height: '100%'},
+  modalContent: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+  },
+});
+export default PermissionHelper;

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

@@ -0,0 +1,52 @@
+import {StyleSheet, Text, TouchableOpacity} from 'react-native';
+import React, {useState} from 'react';
+import SettingsView from '../SettingsView';
+import Popup from '../../atoms/Popup';
+import ImageIcon from '../../atoms/ImageIcon';
+
+interface PreCallSettingsProps {
+  isMobileView?: boolean;
+}
+
+const PreCallSettings = (props: PreCallSettingsProps) => {
+  const [isSettingsVisible, setIsSettingsVisible] = useState(false);
+  const {isMobileView = true} = props;
+
+  return (
+    <>
+      <Popup
+        modalVisible={isSettingsVisible}
+        setModalVisible={setIsSettingsVisible}
+        title=""
+        containerStyle={styles.containerStyle}
+        contentContainerStyle={styles.contentContainer}
+        showCloseIcon={false}>
+        <SettingsView
+          hideName={true}
+          handleClose={() => setIsSettingsVisible(false)}
+        />
+      </Popup>
+
+      <TouchableOpacity onPress={() => setIsSettingsVisible(true)}>
+        <ImageIcon
+          name={'settings'}
+          tintColor={$config.SECONDARY_ACTION_COLOR}
+        />
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default PreCallSettings;
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: 4,
+    padding: 0,
+    width: '100%',
+  },
+  containerStyle: {},
+});

package/template/src/components/precall/VideoPreview.native.tsx

@@ -10,16 +10,18 @@
 *********************************************
 */
 
-import {useRender, useRtc} from 'customization-api';
+import {useContent, useRtc} from 'customization-api';
 import React from 'react';
-import {View} from 'react-native';
+import {View, StyleSheet} from 'react-native';
 import {MaxVideoView} from '../../../agora-rn-uikit';
+import PreCallLocalMute from './LocalMute';
+import {ImageIcon as UiKitImageIcon} from '../../../agora-rn-uikit';
 
 const VideoPreview: React.FC = () => {
   const rtc = useRtc();
-  rtc?.RtcEngine?.startPreview();
+  rtc?.RtcEngineUnsafe?.startPreview();
 
-  const {renderList, activeUids} = useRender();
+  const {defaultContent, activeUids} = useContent();
   const [maxUid] = activeUids;
 
   if (!maxUid) {
@@ -27,9 +29,52 @@ const VideoPreview: React.FC = () => {
   }
 
   return (
-    <View style={{borderRadius: 10, flex: 1}}>
-      <MaxVideoView user={renderList[maxUid]} key={maxUid} />
+    <View style={styles.container}>
+      <View style={{flex: 1}}>
+        <MaxVideoView
+          user={defaultContent[maxUid]}
+          key={maxUid}
+          fallback={Fallback}
+          containerStyle={{
+            width: '100%',
+            height: '100%',
+            borderBottomLeftRadius: 8,
+            borderBottomRightRadius: 8,
+          }}
+        />
+      </View>
+      <PreCallLocalMute isMobileView={true} />
     </View>
   );
 };
 export default VideoPreview;
+
+const Fallback = () => {
+  return (
+    <View style={styles.fallbackRootContainer}>
+      <View style={styles.avatar}>
+        {/*TODO fix ttf file <ImageIcon name="profile" customSize={{width: 100, height: 100}} /> */}
+        <UiKitImageIcon name={'profile'} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+    justifyContent: 'space-between',
+  },
+  avatar: {
+    height: 100,
+    width: 100,
+  },
+  fallbackRootContainer: {
+    flex: 1,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+});