agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/subComponents/RemoteEndCall.tsx

@@ -11,8 +11,7 @@
 */
 import React from 'react';
 import {StyleSheet} from 'react-native';
-import IconButton from '../atoms/IconButton';
-import {UidType} from '../../agora-rn-uikit';
+import {BtnTemplate, UidType} from '../../agora-rn-uikit';
 import useRemoteEndCall from '../utils/useRemoteEndCall';
 
 export interface RemoteEndCallProps {
@@ -22,15 +21,13 @@ export interface RemoteEndCallProps {
 const RemoteEndCall = (props: RemoteEndCallProps) => {
   const endRemoteCall = useRemoteEndCall();
   return props.isHost && String(props.uid)[0] !== '1' ? (
-    <IconButton
+    <BtnTemplate
       style={style.remoteButton}
-      iconProps={{
-        name: 'remove',
-        tintColor: '#FD0845',
-      }}
       onPress={() => {
         endRemoteCall(props.uid);
       }}
+      color="#FD0845"
+      name={'remoteEndCall'} // earlier was endCall, added remoteEndCall
     />
   ) : (
     <></>
@@ -49,7 +46,7 @@ const style = StyleSheet.create({
     borderRightWidth: 0,
     borderLeftWidth: 0,
     marginHorizontal: 0,
-    backgroundColor: $config.SECONDARY_ACTION_COLOR,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
   },
 });
 

package/template/src/subComponents/RemoteVideoMute.tsx

@@ -9,15 +9,11 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useRef} from 'react';
-import {useWindowDimensions} from 'react-native';
-import {UidType} from '../../agora-rn-uikit';
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {BtnTemplate, 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.
@@ -27,79 +23,30 @@ export interface RemoteVideoMuteProps {
   uid: UidType;
   video: boolean;
   isHost: boolean;
-  userContainerRef: any;
 }
 const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
-  const btnRef = useRef(null);
-  const {isHost = false, userContainerRef} = props;
+  const {isHost = false} = 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' ? (
-    <>
-      <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,
-        }}
-      />
-    </>
+    <BtnTemplate
+      disabled={!isHost}
+      onPress={() => {
+        muteRemoteVideo(MUTE_REMOTE_TYPE.video, props.uid);
+      }}
+      style={style.buttonIconCam}
+      name={props.video ? 'videocam' : 'videocamOff'}
+    />
   ) : (
     <></>
   );
 };
 
+const style = StyleSheet.create({
+  buttonIconCam: {
+    width: 25,
+    height: 25,
+  },
+});
+
 export default RemoteVideoMute;

package/template/src/subComponents/ScreenShareNotice.tsx

@@ -12,14 +12,8 @@
 
 import {PropsContext, UidType} from '../../agora-rn-uikit';
 import React, {useContext} from 'react';
-import {StyleSheet, View, Text, TouchableOpacity, Image} from 'react-native';
+import {StyleSheet, View, Text} 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
@@ -27,78 +21,23 @@ import {getPinnedLayoutName} from '../pages/video-call/DefaultLayouts';
  * why its needed : To prevent screensharing tunneling effect
  *
  */
-function ScreenShareNotice({uid, isMax}: {uid: UidType; isMax: boolean}) {
+function ScreenShareNotice({uid}: {uid: UidType}) {
   //commented for v1 release
   // const screensharingActiveOverlayLabel = useString(
   //   'screensharingActiveOverlayLabel',
   // )();
-  const {currentLayout} = useLayout();
-  const {stopUserScreenShare} = useScreenshare();
-  const screensharingActiveOverlayLabel = 'You are sharing your screen';
+  const screensharingActiveOverlayLabel = 'Your screen share is active.';
   const {rtcProps} = useContext(PropsContext);
   return uid === rtcProps?.screenShareUid ? (
     <View style={styles.screenSharingMessageContainer}>
-      <Text
-        style={
-          !isMax && currentLayout === getPinnedLayoutName()
-            ? styles.screensharingMessageMin
-            : styles.screensharingMessage
-        }>
+      <Text style={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,
@@ -109,27 +48,13 @@ const styles = StyleSheet.create({
     height: '100%',
     justifyContent: 'center',
     zIndex: 2,
-    backgroundColor:
-      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['80%'],
-    borderRadius: 4,
-  },
-  screensharingMessageMin: {
-    alignSelf: 'center',
-    textAlign: 'center',
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 20,
-    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    borderRadius: 15,
   },
   screensharingMessage: {
     alignSelf: 'center',
-    textAlign: 'center',
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 32,
-    lineHeight: 40,
-    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
-    paddingBottom: 24,
+    fontSize: 20,
+    color: $config.SECONDARY_FONT_COLOR,
   },
 });