agora-appbuilder-core 3.0.9 → 3.0.10

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 {useRender} 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 {renderList} = useRender();
+  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={renderList[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 meeting 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,
   },
 });