agora-appbuilder-core 3.0.10 → 3.0.12

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

@@ -1,115 +0,0 @@
-/*
-********************************************
- 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 meeting"
-      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

@@ -1,114 +0,0 @@
-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/PermissionHelper.native.tsx

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

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

@@ -1,126 +0,0 @@
-import {useLocalUserInfo, useRender, useRtc} from 'customization-api';
-import React, {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 {PermissionState} from '../../../agora-rn-uikit';
-
-const PermissionHelper = () => {
-  const {dispatch} = useRtc();
-  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

@@ -1,52 +0,0 @@
-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/useToast.tsx

@@ -1,41 +0,0 @@
-/*
-********************************************
- 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, {useState} from 'react';
-import {createHook} from 'customization-implementation';
-
-interface ToastContextInterface {
-  isActionSheetVisible: boolean;
-  setActionSheetVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const ToastContext = React.createContext<ToastContextInterface>({
-  isActionSheetVisible: false,
-  setActionSheetVisible: () => {},
-});
-
-const ToastProvider = (props: {children: React.ReactNode}) => {
-  const [isActionSheetVisible, setActionSheetVisible] = useState(false);
-
-  return (
-    <ToastContext.Provider
-      value={{
-        isActionSheetVisible,
-        setActionSheetVisible,
-      }}>
-      {props.children}
-    </ToastContext.Provider>
-  );
-};
-
-const useToast = createHook(ToastContext);
-
-export {useToast, ToastContext, ToastProvider};

package/template/src/components/useVideoCall.tsx

@@ -1,65 +0,0 @@
-/*
-********************************************
- 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, {SetStateAction, useState} from 'react';
-import {createHook} from 'customization-implementation';
-import InvitePopup from './popups/InvitePopup';
-import StopRecordingPopup from './popups/StopRecordingPopup';
-
-export interface VideoCallContextInterface {
-  showInvitePopup: boolean;
-  setShowInvitePopup: React.Dispatch<SetStateAction<boolean>>;
-  showStopRecordingPopup: boolean;
-  setShowStopRecordingPopup: React.Dispatch<SetStateAction<boolean>>;
-  showLayoutOption: boolean;
-  setShowLayoutOption: React.Dispatch<SetStateAction<boolean>>;
-}
-
-const VideoCallContext = React.createContext<VideoCallContextInterface>({
-  showInvitePopup: false,
-  setShowInvitePopup: () => {},
-  showStopRecordingPopup: false,
-  setShowStopRecordingPopup: () => {},
-  showLayoutOption: false,
-  setShowLayoutOption: () => {},
-});
-
-interface VideoCallProviderProps {
-  children: React.ReactNode;
-}
-const VideoCallProvider = (props: VideoCallProviderProps) => {
-  const [showLayoutOption, setShowLayoutOption] = useState(false);
-  const [showInvitePopup, setShowInvitePopup] = useState(false);
-  const [showStopRecordingPopup, setShowStopRecordingPopup] = useState(false);
-  return (
-    <VideoCallContext.Provider
-      value={{
-        showInvitePopup,
-        setShowInvitePopup,
-        showStopRecordingPopup,
-        setShowStopRecordingPopup,
-        showLayoutOption,
-        setShowLayoutOption,
-      }}>
-      <StopRecordingPopup />
-      <InvitePopup />
-      {props.children}
-    </VideoCallContext.Provider>
-  );
-};
-
-/**
- *
- */
-const useVideoCall = createHook(VideoCallContext);
-
-export {VideoCallProvider, useVideoCall};

package/template/src/pages/Endcall.tsx

@@ -1,148 +0,0 @@
-import React, {useContext, useEffect, useState} from 'react';
-import {StyleSheet, View, Text, Platform} from 'react-native';
-import PrimaryButton from '../atoms/PrimaryButton';
-import TertiaryButton from '../atoms/TertiaryButton';
-import Spacer from '../atoms/Spacer';
-import {Logo} from '../components/common';
-import {useHistory} from '../components/Router';
-import StorageContext from '../components/StorageContext';
-import ThemeConfig from '../theme';
-import ReactNativeForegroundService from '@supersami/rn-foreground-service';
-import CircularProgress from '../atoms/CircularProgress';
-import {useIsDesktop} from '../utils/common';
-
-/* For android only, bg audio */
-const StopForegroundService = () => {
-  if (Platform.OS === 'android') {
-    ReactNativeForegroundService.stop();
-    console.log('stopping foreground service');
-  }
-};
-
-const Endcall = () => {
-  const leftMeetingLabel = 'You have left the meeting.';
-  const rejoinBtnLabel = 'REJOIN';
-  const createMeetingLabel = 'START NEW MEETING';
-  const returnToHomeLabel = 'Returning to the home screen';
-  const {store} = useContext(StorageContext);
-  const history = useHistory();
-
-  const onComplete = React.useCallback(() => {
-    history.push('/');
-    StopForegroundService();
-  }, []);
-
-  const isDesktop = useIsDesktop();
-
-  const reJoin = () => {
-    StopForegroundService();
-  };
-  const goToCreate = () => {
-    history.push('/');
-    StopForegroundService();
-  };
-  return (
-    <View style={styles.main}>
-      <View
-        style={[
-          styles.contentContainer,
-          isDesktop() && {alignItems: 'center'},
-        ]}>
-        <View style={{alignSelf: 'center'}}>
-          <Logo />
-        </View>
-        <Spacer size={20} />
-        <Text
-          style={[
-            styles.heading,
-            !isDesktop() && {fontSize: 20, lineHeight: 25},
-          ]}>
-          {leftMeetingLabel}
-        </Text>
-        <Spacer size={40} />
-        <View
-          style={isDesktop() ? styles.btnContainer : styles.btnContainerMobile}>
-          <TertiaryButton
-            containerStyle={{
-              height: 60,
-              paddingHorizontal: 34,
-              paddingVertical: 20,
-              borderRadius: 8,
-              minWidth: isDesktop() ? 'auto' : '100%',
-              marginRight: isDesktop() ? 12 : 0,
-            }}
-            textStyle={styles.btnText}
-            text={rejoinBtnLabel}
-            onPress={() => {
-              reJoin();
-            }}
-          />
-
-          <PrimaryButton
-            containerStyle={{
-              height: 60,
-              minWidth: isDesktop() ? 'auto' : '100%',
-              marginBottom: isDesktop() ? 0 : 20,
-              paddingHorizontal: 30,
-              paddingVertical: 20,
-            }}
-            text={createMeetingLabel}
-            textStyle={styles.btnText}
-            onPress={() => {
-              goToCreate();
-            }}
-          />
-        </View>
-      </View>
-      <View style={styles.bottomContainer}>
-        <CircularProgress onComplete={onComplete} timer={60} />
-        <Spacer size={10} />
-        <Text style={styles.returnHomeText}>{returnToHomeLabel}</Text>
-      </View>
-    </View>
-  );
-};
-
-export default Endcall;
-
-const styles = StyleSheet.create({
-  returnHomeText: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.small,
-    lineHeight: 18,
-    color: $config.FONT_COLOR,
-    textAlign: 'center',
-  },
-  bottomContainer: {
-    marginBottom: 28,
-  },
-  main: {
-    flex: 1,
-    paddingHorizontal: 40,
-  },
-  contentContainer: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  btnContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  btnText: {
-    fontWeight: '600',
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  btnContainerMobile: {
-    flexDirection: 'column-reverse',
-  },
-  heading: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 40,
-    lineHeight: 40,
-    color: $config.FONT_COLOR,
-    alignSelf: 'center',
-  },
-});