agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

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;

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

@@ -0,0 +1,123 @@
+import React, {useContext} 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 LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../../rtm-events-api/LocalEvents';
+import {useString} from '../../utils/useString';
+import {
+  clearAllWhiteboardPopupHeading,
+  clearAllWhiteboardPopupPrimaryBtnText,
+  clearAllWhiteboardPopupSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
+
+const WhiteboardClearAllPopup = () => {
+  const {showWhiteboardClearAllPopup, setShowWhiteboardClearAllPopup} =
+    useVideoCall();
+  const isDesktop = useIsDesktop()('popup');
+  const recordingLabelHeading = useString(clearAllWhiteboardPopupHeading)();
+  const recordingLabelSubHeading = useString(
+    clearAllWhiteboardPopupSubHeading,
+  )();
+
+  const cancelBtnLabel = useString(cancelText)();
+  const whiteboardClearAllLabel = useString(
+    clearAllWhiteboardPopupPrimaryBtnText,
+  )();
+
+  const clearWhiteboard = () => {
+    LocalEventEmitter.emit(LocalEventsEnum.CLEAR_WHITEBOARD);
+  };
+  return (
+    <Popup
+      modalVisible={showWhiteboardClearAllPopup}
+      setModalVisible={setShowWhiteboardClearAllPopup}
+      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={() => setShowWhiteboardClearAllPopup(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={whiteboardClearAllLabel}
+            onPress={clearWhiteboard}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default WhiteboardClearAllPopup;
+
+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

@@ -24,14 +24,23 @@ import 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';
+import VBButton from '../virtual-background/VBButton';
+import {ToolbarItem} from 'customization-api';
+import IconButton from '../../atoms/IconButton';
+
+interface PreCallProps {
+  isMobileView?: boolean;
+  isSettingsOpen?: boolean;
+  setIsSettingsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  isVBOpen?: boolean;
+  setIsVBOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}
 
-const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
-  const {VideoMute, AudioMute} = useCustomization((data) => {
+const PreCallLocalMute = (props: PreCallProps) => {
+  const {VideoMute, AudioMute} = useCustomization(data => {
     let components: {
       VideoMute: React.ComponentType<LocalAudioMuteProps>;
       AudioMute: React.ComponentType<LocalVideoMuteProps>;
@@ -70,18 +79,25 @@ const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
     // }
     return components;
   });
-  const {isMobileView = false} = props;
+  const {
+    isMobileView = false,
+    isSettingsOpen,
+    setIsSettingsOpen,
+    isVBOpen,
+    setIsVBOpen,
+  } = 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) => {
+
+  const audioDevices = deviceList.filter(device => {
     if (device.kind === 'audioinput') {
       return true;
     }
   });
-  const videoDevices = deviceList.filter((device) => {
+  const videoDevices = deviceList.filter(device => {
     if (device.kind === 'videoinput') {
       return true;
     }
@@ -99,49 +115,59 @@ const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
   }, [videoDevices]);
   return (
     <View
-      style={[style.precallControls, isMobileView && {paddingVertical: 10}]}
+      style={[
+        style.precallControls,
+        isMobileView && {
+          paddingVertical: 10,
+          borderBottomLeftRadius: 12,
+          borderBottomRightRadius: 12,
+          flex: 1,
+        },
+      ]}
       testID="precall-controls">
-      <View style={{width: 52, height: 52}}>
-        <AudioMute
-          isMobileView={isMobileView}
-          showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
-          showToolTip={true}
-        />
-      </View>
+      <AudioMute showToolTip={true} />
 
       {!$config.AUDIO_ROOM && (
-        <>
-          <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>
-        </>
+        <View style={{marginLeft: isMobileView ? 24 : 16}}>
+          <VideoMute showToolTip={true} />
+        </View>
       )}
 
-      {/* Settings View in Mobile */}
-      {isMobileView && !isNative && (
-        <>
-          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />
-          <View
-            style={{
-              width: 52,
-              height: 52,
-            }}>
-            <PreCallSettings />
+      {$config.ENABLE_VIRTUAL_BACKGROUND &&
+        !$config.AUDIO_ROOM &&
+        isMobileView && (
+          <View style={{marginLeft: isMobileView ? 24 : 16}}>
+            <VBButton isVBOpen={isVBOpen} setIsVBOpen={setIsVBOpen} />
           </View>
-        </>
-      )}
+        )}
     </View>
   );
 };
+
+const SettingsButton = ({isSettingsOpen, setIsSettingsOpen}) => {
+  return (
+    <ToolbarItem>
+      <IconButton
+        hoverEffect={true}
+        iconProps={{
+          iconBackgroundColor: isSettingsOpen
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : '',
+          tintColor: $config.SECONDARY_ACTION_COLOR,
+          name: 'settings',
+          iconSize: 26,
+        }}
+        btnTextProps={{
+          textColor: $config.FONT_COLOR,
+          text: isSettingsOpen ? 'Hide Settings' : 'Show Settings',
+        }}
+        onPress={() => {
+          setIsSettingsOpen(prev => !prev);
+        }}
+      />
+    </ToolbarItem>
+  );
+};
 export const PreCallLocalMuteComponentsArray: [
   (props: LocalAudioMuteProps) => JSX.Element,
   (props: LocalVideoMuteProps) => JSX.Element,
@@ -152,11 +178,9 @@ export default PreCallLocalMute;
 const style = StyleSheet.create({
   precallControls: {
     flexDirection: 'row',
-    paddingVertical: 32,
+    padding: 8,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: $config.CARD_LAYER_1_COLOR,
-    // borderBottomLeftRadius: 4,
-    // borderBottomRightRadius: 4,
   },
 });