agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/components/participants/WaitingRoomParticipants.tsx

@@ -0,0 +1,74 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React, {useState} from 'react';
+import {useContent} from 'customization-api';
+import {filterObject} from '../../utils';
+import Participant from './Participant';
+import ParticipantSectionTitle from './ParticipantSectionTitle';
+import {useWaitingRoomContext} from '../contexts/WaitingRoomContext';
+import {useString} from '../../utils/useString';
+import {
+  peoplePanelWaitingText,
+  peoplePanelWantToJoinText,
+  videoRoomUserFallbackText,
+} from '../../language/default-labels/videoCallScreenLabels';
+
+const WaitingRoomParticipants = props => {
+  const wanttojoinLabel = useString(peoplePanelWantToJoinText)();
+  const waitingLabel = useString(peoplePanelWaitingText)();
+  const {defaultContent} = useContent();
+  const [showWaitingRoomSection, setShowWaitingRoomSection] = useState(true);
+  const {isMobile = false, handleClose, updateActionSheet} = props;
+  const WaitingRoomParticipantsLabel = $config.EVENT_MODE
+    ? wanttojoinLabel
+    : waitingLabel;
+
+  const videoRoomUserFallbackTextLabel = useString(videoRoomUserFallbackText)();
+
+  const getParticipantName = uid => {
+    return defaultContent[uid]?.name || videoRoomUserFallbackTextLabel;
+  };
+
+  const getScreenShareUid = uid => {
+    return defaultContent[uid]?.screenUid || '';
+  };
+
+  const {waitingRoomUids} = useWaitingRoomContext();
+
+  return (
+    <>
+      <ParticipantSectionTitle
+        title={WaitingRoomParticipantsLabel}
+        count={waitingRoomUids.length}
+        isOpen={showWaitingRoomSection}
+        onPress={() => setShowWaitingRoomSection(!showWaitingRoomSection)}
+      />
+      {showWaitingRoomSection ? (
+        <View>
+          {waitingRoomUids.map(uid => (
+            <Participant
+              isLocal={false}
+              name={getParticipantName(uid)}
+              user={defaultContent[uid]}
+              showControls={false}
+              isAudienceUser={true}
+              isHostUser={false}
+              key={uid}
+              isMobile={isMobile}
+              handleClose={handleClose}
+              updateActionSheet={updateActionSheet}
+              waitingRoomUser={true}
+              uid={uid}
+              screenUid={getScreenShareUid(uid)}
+            />
+          ))}
+        </View>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default WaitingRoomParticipants;
+
+const styles = StyleSheet.create({});

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

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {
   SHARE_LINK_CONTENT_TYPE,
@@ -21,70 +21,135 @@ 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 {
+  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';
 
 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);
+    getMeeting(phrase).catch(error => {
+      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="Invite others to join this meeting"
+      title={InvitePopupTitle ? InvitePopupTitle : inviteOtherToJoinRoomInfo}
       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);
-              }}
-            />
+      {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>
-        ) : 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>
   );
 };

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 {startUserScreenshare, 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
+      startUserScreenshare && startUserScreenshare(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

@@ -8,17 +8,23 @@ 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 = 'Stop Recording?';
-  const recordingLabelSubHeading =
-    'Are you sure you want to stop recording? You can’t undo this action.';
+  const recordingLabelHeading = useString(stopRecordingPopupHeading)();
+  const recordingLabelSubHeading = useString(stopRecordingPopupSubHeading)();
 
-  const cancelBtnLabel = 'CANCEL';
-  const stopRecordingBtnLabel = 'END RECORDING';
+  const cancelBtnLabel = useString(cancelText)();
+  const stopRecordingBtnLabel = useString(stopRecordingPopupPrimaryBtnText)();
 
   const doStopRecording = () => {
     if (isRecordingActive) {

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 {stopUserScreenShare, 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
+      stopUserScreenShare(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;