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

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

@@ -0,0 +1,196 @@
+/*
+********************************************
+ 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 {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,
+  isValidReactComponent,
+  useIsDesktop,
+} from '../../utils/common';
+import {useVideoCall} from '../useVideoCall';
+import {useParams} from '../Router';
+import useGetMeetingPhrase from '../../utils/useGetMeetingPhrase';
+import {ErrorContext} from '../common';
+import {useCustomization} from 'customization-implementation';
+import {useString} from '../../utils/useString';
+import {
+  invitePopupPrimaryBtnText,
+  invitePopupHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+
+const InvitePopup = () => {
+  const {setShowInvitePopup, showInvitePopup} = useVideoCall();
+  const isDesktop = useIsDesktop();
+  const {copyShareLinkToClipboard} = useShareLink();
+  const {phrase} = useParams<{phrase: string}>();
+  const {setGlobalErrorMessage} = useContext(ErrorContext);
+  const getMeeting = useGetMeetingPhrase();
+  useEffect(() => {
+    getMeeting(phrase).catch(error => {
+      logger.error(
+        LogSource.Internals,
+        'GET_MEETING_PHRASE',
+        'unable to fetch meeting details',
+        error,
+        {
+          networkError: {
+            name: error?.networkError?.name,
+            //@ts-ignore
+            code: error?.networkError?.result?.error?.code,
+            //@ts-ignore
+            message: error?.networkError?.result?.error?.message,
+          },
+        },
+      );
+      setGlobalErrorMessage(error);
+    });
+  }, [phrase]);
+
+  const {InvitePopupContent, InvitePopupTitle} = useCustomization(data => {
+    let components: {
+      InvitePopupContent?: React.ComponentType;
+      InvitePopupTitle?: string;
+    } = {
+      InvitePopupContent: null,
+      InvitePopupTitle: null,
+    };
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall === 'object'
+    ) {
+      if (
+        data?.components?.videoCall?.invitePopup?.renderComponent &&
+        typeof data?.components?.videoCall?.invitePopup?.renderComponent !==
+          'object' &&
+        isValidReactComponent(
+          data?.components?.videoCall?.invitePopup?.renderComponent,
+        )
+      ) {
+        components.InvitePopupContent =
+          data?.components?.videoCall.invitePopup.renderComponent;
+      }
+      if (data?.components?.videoCall?.invitePopup?.title) {
+        components.InvitePopupTitle =
+          data?.components?.videoCall?.invitePopup.title;
+      }
+    }
+    return components;
+  });
+  const inviteOtherToJoinRoomInfo = useString(invitePopupHeading)();
+  const copyInvitationButton = useString(invitePopupPrimaryBtnText)();
+  const cancelLabel = useString(cancelText)();
+  return (
+    <Popup
+      modalVisible={showInvitePopup}
+      setModalVisible={setShowInvitePopup}
+      title={InvitePopupTitle ? InvitePopupTitle : inviteOtherToJoinRoomInfo}
+      showCloseIcon={true}
+      containerStyle={{alignItems: isDesktop('popup') ? 'center' : 'stretch'}}
+      contentContainerStyle={style.contentContainer}>
+      {InvitePopupContent ? (
+        <>
+          <Spacer size={10} />
+          <InvitePopupContent />
+          <Spacer size={10} />
+        </>
+      ) : (
+        <>
+          <CopyMeetingInfo showSubLabel={false} />
+          <View
+            style={
+              isDesktop('popup') ? style.btnContainer : style.btnContainerMobile
+            }>
+            {isDesktop('popup') ? (
+              <View style={{flex: 1}}>
+                <TertiaryButton
+                  text={cancelLabel}
+                  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={copyInvitationButton}
+              />
+            </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/StartScreenSharePopup.native.tsx

@@ -0,0 +1,182 @@
+import React, {useState} 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 {useVideoCall} from '../useVideoCall';
+import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
+import Toggle from '../../atoms/Toggle';
+import {useLocalUserInfo} from '../../app-state/useLocalUserInfo';
+import {useString} from '../../utils/useString';
+import {
+  nativeScreensharePopupHeading,
+  nativeScreensharePopupIncludeDeviceAudioText,
+  nativeScreensharePopupPrimaryBtnText,
+  nativeScreensharePopupSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
+
+const StartScreenSharePopup = () => {
+  const {showStartScreenSharePopup, setShowStartScreenSharePopup} =
+    useVideoCall();
+  const {video} = useLocalUserInfo();
+  const {startScreenshare, isScreenshareActive} = useScreenshare();
+  const isDesktop = useIsDesktop()('popup');
+  const cancelLabel = useString(cancelText)();
+  const proceedLabel = useString(nativeScreensharePopupPrimaryBtnText)();
+  const includeDeviceAudio = useString(
+    nativeScreensharePopupIncludeDeviceAudioText,
+  )();
+  const screenshareLabelHeading = useString(nativeScreensharePopupHeading)();
+  const screenshareLabelSubHeading = useString(
+    nativeScreensharePopupSubHeading,
+  );
+
+  const cancelBtnLabel = cancelLabel;
+  const startShareShareBtnLabel = proceedLabel;
+
+  const doStartScreenShare = () => {
+    if (!isScreenshareActive) {
+      //@ts-ignore native only we will have argument
+      startScreenshare && startScreenshare(shareAudio);
+      setShowStartScreenSharePopup(false);
+    }
+  };
+  const [shareAudio, setShareAudio] = useState(false);
+  return (
+    <Popup
+      modalVisible={showStartScreenSharePopup}
+      setModalVisible={setShowStartScreenSharePopup}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{screenshareLabelHeading}</Text>
+      <Spacer size={12} />
+      <View style={[styles.toggleContainer, styles.lower, styles.upper]}>
+        <View style={styles.infoContainer}>
+          <Text numberOfLines={1} style={styles.toggleLabel}>
+            {includeDeviceAudio}
+          </Text>
+        </View>
+        <View style={styles.infoToggleContainer}>
+          <Toggle isEnabled={shareAudio} toggleSwitch={setShareAudio} />
+        </View>
+      </View>
+      <>
+        <Spacer size={28} />
+        <Text style={styles.subHeading}>
+          {screenshareLabelSubHeading(video)}
+        </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={() => setShowStartScreenSharePopup(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.PRIMARY_ACTION_BRAND_COLOR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={startShareShareBtnLabel}
+            onPress={doStartScreenShare}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default StartScreenSharePopup;
+
+const styles = StyleSheet.create({
+  toggleContainer: {
+    flexDirection: 'row',
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  upper: {
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+  },
+  lower: {
+    borderBottomLeftRadius: 6,
+    borderBottomRightRadius: 6,
+  },
+  toggleLabel: {
+    color: $config.FONT_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    marginRight: 4,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    alignSelf: 'center',
+  },
+  infoContainer: {
+    flexDirection: 'row',
+    flex: 0.8,
+  },
+  infoToggleContainer: {
+    flex: 0.2,
+    alignItems: 'flex-end',
+    alignSelf: 'center',
+  },
+  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,
+    minWidth: 342,
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.FONT_COLOR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});

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

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

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

@@ -0,0 +1,120 @@
+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';
+import {useString} from '../../utils/useString';
+import {
+  stopRecordingPopupHeading,
+  stopRecordingPopupPrimaryBtnText,
+  stopRecordingPopupSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
+
+const StopRecordingPopup = () => {
+  const {showStopRecordingPopup, setShowStopRecordingPopup} = useVideoCall();
+  const {stopRecording, isRecordingActive} = useRecording();
+  const isDesktop = useIsDesktop()('popup');
+  const recordingLabelHeading = useString(stopRecordingPopupHeading)();
+  const recordingLabelSubHeading = useString(stopRecordingPopupSubHeading)();
+
+  const cancelBtnLabel = useString(cancelText)();
+  const stopRecordingBtnLabel = useString(stopRecordingPopupPrimaryBtnText)();
+
+  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/popups/StopScreenSharePopup.native.tsx

@@ -0,0 +1,135 @@
+import React, {useState} 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 {useVideoCall} from '../useVideoCall';
+import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
+import Toggle from '../../atoms/Toggle';
+import useMuteToggleLocal, {
+  MUTE_LOCAL_TYPE,
+} from '../../utils/useMuteToggleLocal';
+import {useString} from '../../utils/useString';
+import {
+  nativeStopScreensharePopupHeading,
+  nativeStopScreensharePopupPrimaryBtnText,
+  nativeStopScreensharePopupSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
+
+const StopScreenSharePopup = () => {
+  const {showStopScreenSharePopup, setShowStopScreenSharePopup} =
+    useVideoCall();
+  const {stopScreenshare, isScreenshareActive} = useScreenshare();
+  const isDesktop = useIsDesktop()('popup');
+  const localMute = useMuteToggleLocal();
+  const screenshareLabelHeading = useString(
+    nativeStopScreensharePopupHeading,
+  )();
+  const screenshareLabelSubHeading = useString(
+    nativeStopScreensharePopupSubHeading,
+  )();
+
+  const cancelBtnLabel = useString(cancelText)();
+  const startShareShareBtnLabel = useString(
+    nativeStopScreensharePopupPrimaryBtnText,
+  )();
+
+  const doStopScreenShare = () => {
+    if (isScreenshareActive) {
+      //true means keep the video enabled and stop only the screenshare
+      //@ts-ignore
+      stopScreenshare(true);
+      setShowStopScreenSharePopup(false);
+    }
+  };
+  return (
+    <Popup
+      modalVisible={showStopScreenSharePopup}
+      setModalVisible={setShowStopScreenSharePopup}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{screenshareLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{screenshareLabelSubHeading}</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={() => setShowStopScreenSharePopup(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.PRIMARY_ACTION_BRAND_COLOR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={startShareShareBtnLabel}
+            onPress={doStopScreenShare}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default StopScreenSharePopup;
+
+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.FONT_COLOR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});

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

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