agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/components/Precall.native.tsx

@@ -1,212 +1,56 @@
 /*
 ********************************************
  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.
+ 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, {useState, useContext, useEffect} from 'react';
-import {View, Text, StyleSheet, ScrollView} from 'react-native';
-import {PropsContext, ClientRole} from '../../agora-rn-uikit';
-import {isValidReactComponent, isWebInternal, trimText} from '../utils/common';
-import ColorContext from './ColorContext';
-import {useMeetingInfo} from './meeting-info/useMeetingInfo';
-import PreCallLogo from './common/Logo';
+import React, {useContext} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {ClientRole, PropsContext} from '../../agora-rn-uikit';
 import {useCustomization} from 'customization-implementation';
-import PreCallLocalMute from './precall/LocalMute';
+import {useString} from '../utils/useString';
+import {isValidReactComponent} from '../utils/common';
 import {
   PreCallJoinBtn,
+  PreCallVideoPreview,
   PreCallTextInput,
+  PreCallLocalMute,
   PreCallMeetingTitle,
-  PreCallSelectDevice,
-  PreCallVideoPreview,
-  PreCallJoinCallBtnProps,
 } from './precall/index';
-import SDKEvents from '../utils/SdkEvents';
-import isSDKCheck from '../utils/isSDK';
-import Logo from './common/Logo';
-import Card from '../atoms/Card';
-import Spacer from '../atoms/Spacer';
-import {useRtc} from 'customization-api';
-import {MeetingTitleProps} from './precall/meetingTitle';
-import {PreCallTextInputProps} from './precall/textInput';
-
-import StorageContext from './StorageContext';
-import ThemeConfig from '../theme';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {VideoPreviewProps} from './precall/VideoPreview';
 
-const JoinRoomInputView = ({isDesktop}) => {
+const Precall = () => {
   const {rtcProps} = useContext(PropsContext);
-  const {JoinButton, Textbox} = useCustomization((data) => {
-    let components: {
-      JoinButton: React.ComponentType<PreCallJoinCallBtnProps>;
-      Textbox: React.ComponentType<PreCallTextInputProps>;
-    } = {
-      Textbox: PreCallTextInput,
-      JoinButton: PreCallJoinBtn,
-    };
-    // commented for v1 release
-    // if (
-    //   data?.components?.precall &&
-    //   typeof data?.components?.precall === 'object'
-    // ) {
-    //   if (
-    //     data?.components?.precall?.joinButton &&
-    //     typeof data?.components?.precall?.joinButton !== 'object'
-    //   ) {
-    //     if (isValidReactComponent(data?.components?.precall?.joinButton)) {
-    //       components.JoinButton = data?.components?.precall?.joinButton;
-    //     }
-    //   }
-
-    //   if (
-    //     data?.components?.precall?.textBox &&
-    //     typeof data?.components?.precall?.textBox !== 'object'
-    //   ) {
-    //     if (isValidReactComponent(data?.components?.precall?.textBox)) {
-    //       components.Textbox = data?.components?.precall?.textBox;
-    //     }
-    //   }
-    // }
-    return components;
-  });
-  return (
-    <View
-      style={$config.EVENT_MODE ? style.lsBtnContainer : style.btnContainer}>
-      <Textbox
-        isDesktop={isDesktop}
-        labelStyle={$config.EVENT_MODE ? style.labelStyle : {}}
-      />
-      {$config.EVENT_MODE ? (
-        <>
-          {/* <Text style={style.subTextStyle}>
-            Enter the name you would like to join the room as
-          </Text> */}
-          {rtcProps.role == ClientRole.Audience && <Spacer size={40} />}
-        </>
-      ) : (
-        <></>
-      )}
-      <View
-        style={
-          $config.EVENT_MODE &&
-          rtcProps.role == ClientRole.Audience && {
-            justifyContent: 'space-between',
-            flex: 1,
-          }
-        }>
-        <Spacer size={10} />
-        <View
-          style={
-            $config.EVENT_MODE && isDesktop
-              ? style.btnContainerStyle
-              : {width: '100%'}
-          }>
-          <JoinButton />
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const JoinRoomName = ({isDesktop}) => {
-  const {JoinButton, Textbox} = useCustomization((data) => {
-    let components: {
-      JoinButton: React.ComponentType<PreCallJoinCallBtnProps>;
-      Textbox: React.ComponentType<PreCallTextInputProps>;
-    } = {
-      Textbox: PreCallTextInput,
-      JoinButton: PreCallJoinBtn,
-    };
-    // commented for v1 release
-    // if (
-    //   data?.components?.precall &&
-    //   typeof data?.components?.precall === 'object'
-    // ) {
-    //   if (
-    //     data?.components?.precall?.joinButton &&
-    //     typeof data?.components?.precall?.joinButton !== 'object'
-    //   ) {
-    //     if (isValidReactComponent(data?.components?.precall?.joinButton)) {
-    //       components.JoinButton = data?.components?.precall?.joinButton;
-    //     }
-    //   }
-
-    //   if (
-    //     data?.components?.precall?.textBox &&
-    //     typeof data?.components?.precall?.textBox !== 'object'
-    //   ) {
-    //     if (isValidReactComponent(data?.components?.precall?.textBox)) {
-    //       components.Textbox = data?.components?.precall?.textBox;
-    //     }
-    //   }
-    // }
-    return components;
-  });
-  return <Textbox isDesktop={isDesktop} />;
-};
-
-const JoinRoomButton = () => {
-  const {JoinButton, Textbox} = useCustomization((data) => {
-    let components: {
-      JoinButton: React.ComponentType<PreCallJoinCallBtnProps>;
-      Textbox: React.ComponentType;
-    } = {Textbox: PreCallTextInput, JoinButton: PreCallJoinBtn};
-    // commented for v1 release
-    // if (
-    //   data?.components?.precall &&
-    //   typeof data?.components?.precall === 'object'
-    // ) {
-    //   if (
-    //     data?.components?.precall?.joinButton &&
-    //     typeof data?.components?.precall?.joinButton !== 'object'
-    //   ) {
-    //     if (isValidReactComponent(data?.components?.precall?.joinButton)) {
-    //       components.JoinButton = data?.components?.precall?.joinButton;
-    //     }
-    //   }
-
-    //   if (
-    //     data?.components?.precall?.textBox &&
-    //     typeof data?.components?.precall?.textBox !== 'object'
-    //   ) {
-    //     if (isValidReactComponent(data?.components?.precall?.textBox)) {
-    //       components.Textbox = data?.components?.precall?.textBox;
-    //     }
-    //   }
-    // }
-    return components;
-  });
-  return <JoinButton />;
-};
+  //commented for v1 release
+  //const precallLabel = useString('precallLabel')();
+  const precallLabel = 'Precall';
 
-const Precall = (props: any) => {
-  const {primaryColor} = useContext(ColorContext);
-  const {rtcProps} = useContext(PropsContext);
   const {
     VideoPreview,
     MeetingName,
-    DeviceSelect,
+    JoinButton,
+    Textbox,
     PrecallAfterView,
     PrecallBeforeView,
   } = useCustomization((data) => {
     const components: {
       PrecallAfterView: React.ComponentType;
       PrecallBeforeView: React.ComponentType;
-      DeviceSelect: React.ComponentType;
-      VideoPreview: React.ComponentType<VideoPreviewProps>;
-      MeetingName: React.ComponentType<MeetingTitleProps>;
+      VideoPreview: React.ComponentType;
+      MeetingName: React.ComponentType;
+      JoinButton: React.ComponentType;
+      Textbox: React.ComponentType;
     } = {
       PrecallAfterView: React.Fragment,
       PrecallBeforeView: React.Fragment,
+      JoinButton: PreCallJoinBtn,
       MeetingName: PreCallMeetingTitle,
+      Textbox: PreCallTextInput,
       VideoPreview: PreCallVideoPreview,
-      DeviceSelect: PreCallSelectDevice,
     };
     // commented for v1 release
     // if (
@@ -236,11 +80,20 @@ const Precall = (props: any) => {
     //   }
 
     //   if (
-    //     data?.components?.precall?.deviceSelect &&
-    //     typeof data?.components?.precall?.deviceSelect !== 'object'
+    //     data?.components?.precall?.joinButton &&
+    //     typeof data?.components?.precall?.joinButton !== 'object'
     //   ) {
-    //     if (isValidReactComponent(data?.components?.precall?.deviceSelect)) {
-    //       components.DeviceSelect = data?.components?.precall?.deviceSelect;
+    //     if (isValidReactComponent(data?.components?.precall?.joinButton)) {
+    //       components.JoinButton = data?.components?.precall?.joinButton;
+    //     }
+    //   }
+
+    //   if (
+    //     data?.components?.precall?.textBox &&
+    //     typeof data?.components?.precall?.textBox !== 'object'
+    //   ) {
+    //     if (isValidReactComponent(data?.components?.precall?.textBox)) {
+    //       components.Textbox = data?.components?.precall?.textBox;
     //     }
     //   }
 
@@ -255,48 +108,8 @@ const Precall = (props: any) => {
     // }
     return components;
   });
-  const {
-    isJoinDataFetched,
-    data: {meetingTitle},
-  } = useMeetingInfo();
-  const rtc = useRtc();
-  const isSDK = isSDKCheck();
-
-  //permission helper modal show/hide
-  const [isVisible, setIsVisible] = useState(false);
-  const {store} = useContext(StorageContext);
-
-  useEffect(() => {
-    if (isWebInternal() && !isSDK) {
-      if (meetingTitle) {
-        document.title = trimText(meetingTitle) + ' | ' + $config.APP_NAME;
-      }
-    }
-  });
-
-  useEffect(() => {
-    if (isJoinDataFetched) {
-      new Promise((res) =>
-        // @ts-ignore
-        rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
-          res(devices);
-        }),
-      ).then((devices: MediaDeviceInfo[]) => {
-        SDKEvents.emit('preJoin', meetingTitle, devices);
-      });
-    }
-  }, [isJoinDataFetched]);
-
-  useEffect(() => {
-    if (store?.permissionPopupSeen) {
-      const flag = JSON.parse(store?.permissionPopupSeen);
-      if (flag === false) {
-        setIsVisible(true);
-      }
-    } else {
-      setIsVisible(true);
-    }
-  }, []);
+  const isAudienceInLiveStreaming = () =>
+    $config.EVENT_MODE && rtcProps?.role == ClientRole.Audience;
 
   const FpePrecallComponent = useCustomization((data) => {
     // commented for v1 release
@@ -312,55 +125,33 @@ const Precall = (props: any) => {
     return undefined;
   });
 
-  if (!isJoinDataFetched) return <Text style={style.titleFont}>Loading..</Text>;
   return FpePrecallComponent ? (
     <FpePrecallComponent />
   ) : (
     <>
       <PrecallBeforeView />
-      <View style={{flex: 1}}>
-        <ScrollView
-          contentContainerStyle={style.mainMobile}
-          testID="precall-screen">
-          {/* Precall screen only changes for audience in Live Stream event */}
-          {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
-            //  Live (Audience) - Mobile
-            <View style={{flex: 1}}>
-              <MeetingName textStyle={style.meetingTitleStyle} />
-              <Spacer size={24} />
-              <View testID="precall-mobile-join" style={{flex: 1}}>
-                <JoinRoomInputView isDesktop={false} />
-              </View>
-            </View>
-          ) : (
-            // Conferncing / Live (Host)
-            <View style={{flex: 1}}>
-              <MeetingName textStyle={{textAlign: 'center'}} />
-              <Spacer size={24} />
-              <View style={{flex: 1}}>
-                <View
-                  style={{
-                    flex: 1,
-                  }}
-                  testID="precall-mobile-preview">
-                  <VideoPreview isMobileView={true} />
-                </View>
-                <Spacer size={40} />
-                <View
-                  testID="precall-mobile-join"
-                  style={{
-                    // flex: $config.EVENT_MODE ? 2 : 1,
-                    //width: '100%',
-                    flexDirection: 'row',
-                    //alignItems: 'center',
-                    //justifyContent: 'center',
-                  }}>
-                  <JoinRoomInputView isDesktop={false} />
-                </View>
-              </View>
-            </View>
-          )}
-        </ScrollView>
+      <View style={style.full}>
+        <View style={style.heading}>
+          <Text style={style.headingText}>{precallLabel}</Text>
+        </View>
+        <MeetingName />
+        {!isAudienceInLiveStreaming() && (
+          <View style={style.full}>
+            <VideoPreview />
+          </View>
+        )}
+        <View style={style.textInputHolder}>
+          <Textbox />
+        </View>
+        <View style={{height: 20}} />
+        {!isAudienceInLiveStreaming() && (
+          <View style={style.controls}>
+            <PreCallLocalMute />
+          </View>
+        )}
+        <View style={{marginBottom: 50, alignItems: 'center'}}>
+          <JoinButton />
+        </View>
       </View>
       <PrecallAfterView />
     </>
@@ -368,104 +159,74 @@ const Precall = (props: any) => {
 };
 
 const style = StyleSheet.create({
-  full: {flex: 1},
-  labelStyle: {
-    paddingLeft: 8,
-  },
-  subTextStyle: {
-    marginTop: 8,
-    marginLeft: 8,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.small,
-    lineHeight: 18,
-    color: $config.SEMANTIC_NEUTRAL,
-    textAlign: 'left',
-  },
-  btnContainerStyle: {maxWidth: 337, alignSelf: 'center', marginTop: 50},
-  main: {
-    flexGrow: 1,
-    padding: 32,
+  full: {
+    flex: 1,
+    paddingLeft: 15,
+    paddingRight: 15,
     justifyContent: 'center',
   },
-  mainMobile: {
-    flexGrow: 1,
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingTop: 25,
-    paddingBottom: 32,
-    justifyContent: 'center',
+  heading: {flex: 0.1, justifyContent: 'center'},
+  headingText: {
+    fontSize: 24,
+    color: $config.PRIMARY_FONT_COLOR,
+    fontWeight: '700',
+    alignSelf: 'center',
   },
-  nav: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row',
+  textInputHolder: {
+    flex: 0.1,
     alignItems: 'center',
-    justifyContent: 'center',
+    paddingTop: 20,
+    width: '100%',
   },
-  container: {
+  textInput: {
+    width: '80%',
+    paddingLeft: 8,
+    borderColor: $config.PRIMARY_COLOR,
+    borderWidth: 2,
+    color: $config.PRIMARY_FONT_COLOR,
+    fontSize: 16,
+    minHeight: 45,
+    alignSelf: 'center',
+  },
+  controls: {
+    flex: 0.2,
     flexDirection: 'row',
-    alignItems: 'center',
-    minHeight: '80%',
-  },
-  leftContent: {
-    flex: 2.5,
-    borderRadius: ThemeConfig.BorderRadius.large,
-    overflow: 'hidden',
-  },
-  boxStyle: {
-    borderWidth: 1,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOffset: {width: 0, height: 4},
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 5,
-    height: '100%',
-  },
-  mobileBoxStyle: {
-    marginRight: 0,
-    borderRadius: ThemeConfig.BorderRadius.large,
-    flex: 3,
-  },
-  rightContent: {
-    borderRadius: ThemeConfig.BorderRadius.large,
-    flex: 1,
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-    maxWidth: 450,
-    height: '100%',
-    justifyContent: 'space-between',
-  },
-  rightInputContent: {
-    padding: 32,
-  },
-  titleFont: {
-    textAlign: 'center',
-    fontSize: 20,
-    color: $config.PRIMARY_ACTION_TEXT_COLOR,
-  },
-  btnContainer: {
-    flex: 1,
-    width: '100%',
+    alignSelf: 'center',
+    padding: 5,
+  },
+  width50: {width: 50},
+  buttonActive: {
+    backgroundColor: $config.PRIMARY_COLOR,
+    height: 50,
+    width: 180,
+    alignSelf: 'center',
+    alignContent: 'center',
     justifyContent: 'center',
-    //alignItems: 'center',
-  },
-  lsBtnContainer: {
-    flex: 1,
-    width: '100%',
+    marginBottom: 50,
+  },
+  buttonDisabled: {
+    backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
+    height: 50,
+    width: 180,
+    alignSelf: 'center',
+    alignContent: 'center',
     justifyContent: 'center',
+    marginBottom: 50,
   },
-  meetingTitleContainer: {
-    marginVertical: 10,
+  buttonText: {
+    width: '100%',
+    height: 45,
+    lineHeight: 45,
+    fontSize: 20,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    color: $config.SECONDARY_FONT_COLOR,
   },
-  meetingTitleStyle: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
+  titleHeading: {
+    fontSize: 22,
     fontWeight: '700',
-    fontSize: ThemeConfig.FontSize.extraLarge,
-    lineHeight: ThemeConfig.FontSize.extraLarge,
-    color: $config.FONT_COLOR,
-    paddingLeft: 0,
+    textAlign: 'center',
+    color: $config.SECONDARY_FONT_COLOR,
   },
 });