agora-appbuilder-core 3.0.9 → 4.0.0-api.0

package/template/src/subComponents/RemoteMutePopup.tsx

@@ -0,0 +1,193 @@
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import React, {SetStateAction} from 'react';
+import ThemeConfig from '../theme';
+import Spacer from '../atoms/Spacer';
+import PlatformWrapper from '../utils/PlatformWrapper';
+import {isMobileOrTablet} from 'customization-api';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+export interface ActionMenuProps {
+  actionMenuVisible: boolean;
+  setActionMenuVisible: React.Dispatch<SetStateAction<boolean>>;
+  modalPosition?: {
+    top?: number;
+    right?: number;
+    left?: number;
+    bottom?: number;
+  };
+  name: string;
+  onMutePress: () => void;
+  type: 'video' | 'audio';
+  action?: 'mute' | 'request';
+}
+
+const RemoteMutePopup = (props: ActionMenuProps) => {
+  const {height} = useWindowDimensions();
+  const {
+    actionMenuVisible,
+    setActionMenuVisible,
+    modalPosition,
+    action = 'mute',
+  } = props;
+  let message = '';
+
+  if (props.name) {
+    //mute action
+    if (action === 'mute') {
+      message = `Mute ${props.name}'s ${props.type} for everyone on the call? Only ${props.name} can unmute themselves.`;
+    }
+    //request action
+    else {
+      if (props?.type === 'audio') {
+        message = `Request ${props.name} to turn on their microphone?`;
+      } else {
+        message = `Request ${props.name} to turn on their camera?`;
+      }
+    }
+  } else {
+    message = `Mute everyone's ${props.type} on the call?`;
+  }
+
+  return (
+    <View>
+      <Modal
+        testID="action-menu"
+        animationType="none"
+        transparent={true}
+        visible={actionMenuVisible}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            setActionMenuVisible(false);
+          }}>
+          <View
+            style={[
+              styles.backDrop,
+              isMobileOrTablet()
+                ? {
+                    backgroundColor:
+                      $config.HARD_CODED_BLACK_COLOR +
+                      hexadecimalTransparency['50%'],
+                  }
+                : {},
+            ]}
+          />
+        </TouchableWithoutFeedback>
+        <View
+          style={
+            isMobileOrTablet()
+              ? [styles.modalViewUA, {marginTop: height / 3}]
+              : [styles.modalView, modalPosition]
+          }>
+          <View style={styles.container}>
+            <Text style={styles.messageStyle}>{message}</Text>
+            <View style={styles.btnContainer}>
+              <PlatformWrapper>
+                {(isHovered: boolean) => {
+                  return (
+                    <TouchableOpacity
+                      style={isHovered ? styles.onHoverBtnStyle : {}}
+                      onPress={() => props.setActionMenuVisible(false)}>
+                      <Text style={styles.btnText}>Cancel</Text>
+                    </TouchableOpacity>
+                  );
+                }}
+              </PlatformWrapper>
+              <Spacer size={8} horizontal={true} />
+              <PlatformWrapper>
+                {(isHovered: boolean) => {
+                  return (
+                    <TouchableOpacity
+                      style={isHovered ? styles.onHoverBtnStyle : {}}
+                      onPress={() => props.onMutePress()}>
+                      <Text style={styles.btnText}>
+                        {action === 'mute' ? 'Mute' : 'Request'}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                }}
+              </PlatformWrapper>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default RemoteMutePopup;
+
+const styles = StyleSheet.create({
+  onHoverBtnStyle: {
+    backgroundColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: 8,
+  },
+  container: {
+    paddingHorizontal: 12,
+    paddingTop: 24,
+    paddingBottom: 14,
+  },
+  messageStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR,
+    paddingBottom: 18,
+  },
+  btnText: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  btnContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  modalView: {
+    position: 'absolute',
+    width: 290,
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+  modalViewUA: {
+    alignSelf: 'center',
+    maxWidth: '80%',
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/template/src/subComponents/RemoteVideoMute.tsx

@@ -9,11 +9,15 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {BtnTemplate, UidType} from '../../agora-rn-uikit';
+import React, {useState, useRef} from 'react';
+import {useWindowDimensions} from 'react-native';
+import {UidType} from '../../agora-rn-uikit';
 import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
-
+import IconButton from '../atoms/IconButton';
+import RemoteMutePopup from './RemoteMutePopup';
+import {useContent} from 'customization-api';
+import {calculatePosition} from '../utils/common';
+import useRemoteRequest, {REQUEST_REMOTE_TYPE} from '../utils/useRemoteRequest';
 /**
  * Component to mute / unmute remote video.
  * Sends a control message to another user over RTM if the local user is a host.
@@ -23,30 +27,79 @@ export interface RemoteVideoMuteProps {
   uid: UidType;
   video: boolean;
   isHost: boolean;
+  userContainerRef: any;
 }
 const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
-  const {isHost = false} = props;
+  const btnRef = useRef(null);
+  const {isHost = false, userContainerRef} = props;
   const muteRemoteVideo = useRemoteMute();
-
+  const requestRemoteVideo = useRemoteRequest();
+  const [showModal, setShowModal] = useState(false);
+  const [pos, setPos] = useState({});
+  const {defaultContent} = useContent();
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const onPress = () => {
+    props?.video
+      ? muteRemoteVideo(MUTE_REMOTE_TYPE.video, props.uid)
+      : requestRemoteVideo(REQUEST_REMOTE_TYPE.video, props.uid);
+    setShowModal(false);
+  };
   return String(props.uid)[0] !== '1' ? (
-    <BtnTemplate
-      disabled={!isHost}
-      onPress={() => {
-        muteRemoteVideo(MUTE_REMOTE_TYPE.video, props.uid);
-      }}
-      style={style.buttonIconCam}
-      name={props.video ? 'videocam' : 'videocamOff'}
-    />
+    <>
+      <RemoteMutePopup
+        action={props?.video ? 'mute' : 'request'}
+        type="video"
+        actionMenuVisible={showModal}
+        setActionMenuVisible={setShowModal}
+        name={defaultContent[props.uid]?.name}
+        modalPosition={pos}
+        onMutePress={onPress}
+      />
+      <IconButton
+        hoverEffect={true}
+        hoverEffectStyle={{
+          backgroundColor: $config.ICON_BG_COLOR,
+          borderRadius: 20,
+        }}
+        setRef={(ref) => (btnRef.current = ref)}
+        disabled={!isHost}
+        onPress={() => {
+          btnRef?.current?.measure(
+            (
+              _fx: number,
+              _fy: number,
+              localWidth: number,
+              localHeight: number,
+              px: number,
+              py: number,
+            ) => {
+              const data = calculatePosition({
+                px,
+                py,
+                localHeight,
+                localWidth,
+                globalHeight,
+                globalWidth,
+              });
+              setPos(data);
+              setShowModal(true);
+            },
+          );
+        }}
+        iconProps={{
+          iconContainerStyle: {padding: 8},
+          name: props?.video ? 'video-on' : 'video-off',
+          iconSize: 20,
+          iconType: 'plain',
+          tintColor: props.video
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : $config.SEMANTIC_NEUTRAL,
+        }}
+      />
+    </>
   ) : (
     <></>
   );
 };
 
-const style = StyleSheet.create({
-  buttonIconCam: {
-    width: 25,
-    height: 25,
-  },
-});
-
 export default RemoteVideoMute;

package/template/src/subComponents/RemoveMeetingPopup.tsx

@@ -0,0 +1,109 @@
+import React, {SetStateAction, 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';
+
+interface RemoveMeetingPopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  removeUserFromMeeting: () => void;
+  username: string;
+}
+const RemoveMeetingPopup = (props: RemoveMeetingPopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const removeMeetingLabelHeading = 'Remove ' + props.username + '?';
+  const removeMeetingLabelSubHeading = `Once removed, ${props.username} will still be able to rejoin the room later.`;
+
+  const cancelBtnLabel = 'CANCEL';
+  const removeBtnLabel = 'REMOVE';
+  return (
+    <Popup
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{removeMeetingLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{removeMeetingLabelSubHeading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              width: '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={cancelBtnLabel}
+            onPress={() => props.setModalVisible(false)}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 1}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={removeBtnLabel}
+            onPress={() => {
+              props.removeUserFromMeeting();
+              props.setModalVisible(false);
+            }}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default RemoveMeetingPopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 14,
+    color: $config.FONT_COLOR,
+  },
+});

package/template/src/subComponents/RemoveScreensharePopup.tsx

@@ -0,0 +1,109 @@
+import React, {SetStateAction, 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';
+
+interface RemoveScreensharePopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  removeScreenShareFromMeeting: () => void;
+  username: string;
+}
+const RemoveScreensharePopup = (props: RemoveScreensharePopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const removeMeetingLabelHeading = 'Remove Screenshare?';
+  const removeMeetingLabelSubHeading = `Once removed, ${props.username} will still be able to screen share later.`;
+
+  const cancelBtnLabel = 'CANCEL';
+  const removeBtnLabel = 'REMOVE';
+  return (
+    <Popup
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{removeMeetingLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{removeMeetingLabelSubHeading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              width: '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={cancelBtnLabel}
+            onPress={() => props.setModalVisible(false)}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 1}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={removeBtnLabel}
+            onPress={() => {
+              props.removeScreenShareFromMeeting();
+              props.setModalVisible(false);
+            }}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default RemoveScreensharePopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 14,
+    color: $config.FONT_COLOR,
+  },
+});

package/template/src/subComponents/ScreenShareNotice.tsx

@@ -12,8 +12,14 @@
 
 import {PropsContext, UidType} from '../../agora-rn-uikit';
 import React, {useContext} from 'react';
-import {StyleSheet, View, Text} from 'react-native';
+import {StyleSheet, View, Text, TouchableOpacity, Image} from 'react-native';
 import {useString} from '../utils/useString';
+import {useScreenshare} from './screenshare/useScreenshare';
+import ImageIcon from '../atoms/ImageIcon';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {useLayout} from 'customization-api';
+import {getPinnedLayoutName} from '../pages/video-call/DefaultLayouts';
 /**
  *
  * @param uid - uid of the user
@@ -21,23 +27,78 @@ import {useString} from '../utils/useString';
  * why its needed : To prevent screensharing tunneling effect
  *
  */
-function ScreenShareNotice({uid}: {uid: UidType}) {
+function ScreenShareNotice({uid, isMax}: {uid: UidType; isMax: boolean}) {
   //commented for v1 release
   // const screensharingActiveOverlayLabel = useString(
   //   'screensharingActiveOverlayLabel',
   // )();
-  const screensharingActiveOverlayLabel = 'Your screen share is active.';
+  const {currentLayout} = useLayout();
+  const {stopUserScreenShare} = useScreenshare();
+  const screensharingActiveOverlayLabel = 'You are sharing your screen';
   const {rtcProps} = useContext(PropsContext);
   return uid === rtcProps?.screenShareUid ? (
     <View style={styles.screenSharingMessageContainer}>
-      <Text style={styles.screensharingMessage}>
+      <Text
+        style={
+          !isMax && currentLayout === getPinnedLayoutName()
+            ? styles.screensharingMessageMin
+            : styles.screensharingMessage
+        }>
         {screensharingActiveOverlayLabel}
       </Text>
+      {!isMax && currentLayout === getPinnedLayoutName() ? (
+        <></>
+      ) : (
+        <TouchableOpacity
+          style={styles.btnContainer}
+          onPress={() => stopUserScreenShare()}>
+          <View style={styles.iconContainer}>
+            <ImageIcon
+              iconType="plain"
+              iconSize={20}
+              name={'close'}
+              tintColor={$config.SEMANTIC_ERROR}
+            />
+          </View>
+          <View style={styles.btnTextContainer}>
+            <Text style={styles.btnText}>Stop Sharing</Text>
+          </View>
+        </TouchableOpacity>
+      )}
     </View>
   ) : null;
 }
 
 const styles = StyleSheet.create({
+  iconContainer: {
+    marginVertical: 12,
+    marginLeft: 16,
+    marginRight: 12,
+    backgroundColor: $config.PRIMARY_ACTION_TEXT_COLOR,
+    alignSelf: 'center',
+    width: 20,
+    height: 20,
+  },
+  btnContainer: {
+    alignSelf: 'center',
+    backgroundColor: $config.SEMANTIC_ERROR,
+    borderRadius: 8,
+    height: 40,
+    maxWidth: 129,
+    flexDirection: 'row',
+  },
+  btnTextContainer: {
+    marginVertical: 12,
+    marginRight: 16,
+  },
+  btnText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 12,
+    lineHeight: 16,
+    textAlign: 'center',
+    color: $config.PRIMARY_ACTION_TEXT_COLOR,
+  },
   screenSharingMessageContainer: {
     position: 'absolute',
     top: 0,
@@ -48,13 +109,27 @@ const styles = StyleSheet.create({
     height: '100%',
     justifyContent: 'center',
     zIndex: 2,
-    backgroundColor: 'rgba(0,0,0,0.9)',
-    borderRadius: 15,
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['80%'],
+    borderRadius: 4,
   },
-  screensharingMessage: {
+  screensharingMessageMin: {
     alignSelf: 'center',
+    textAlign: 'center',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
     fontSize: 20,
-    color: $config.SECONDARY_FONT_COLOR,
+    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+  },
+  screensharingMessage: {
+    alignSelf: 'center',
+    textAlign: 'center',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 32,
+    lineHeight: 40,
+    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+    paddingBottom: 24,
   },
 });