agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/components/EventsConfigure.tsx

@@ -9,76 +9,26 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useEffect, useRef} from 'react';
-import {StyleSheet} from 'react-native';
-import PrimaryButton from '../atoms/PrimaryButton';
+import React, {useContext, useEffect} from 'react';
 import {RtcContext} from '../../agora-rn-uikit';
 import events from '../rtm-events-api';
 import {controlMessageEnum} from '../components/ChatContext';
-import Toast from '../../react-native-toast-message';
-import TertiaryButton from '../atoms/TertiaryButton';
-import {useRender} from 'customization-api';
-import {useParams} from '../components/Router';
-import StorageContext from './StorageContext';
-import {isWebInternal, trimText} from '../utils/common';
 
 interface Props {
   children: React.ReactNode;
 }
 
 const EventsConfigure: React.FC<Props> = (props) => {
-  const {setStore} = useContext(StorageContext);
   const {RtcEngine, dispatch} = useContext(RtcContext);
-  const {renderList} = useRender();
-  const renderListRef = useRef({renderList});
-  const {phrase} = useParams<{phrase: string}>();
   useEffect(() => {
-    renderListRef.current.renderList = renderList;
-  }, [renderList]);
-  useEffect(() => {
-    //user joined event listener
-    // events.on(controlMessageEnum.newUserJoined, ({payload}) => {
-    //   const data = JSON.parse(payload);
-    //   if (data?.name) {
-    //     Toast.show({
-    //       text1: `${trimText(data.name)} has joined the call`,
-    //       visibilityTime: 3000,
-    //       type: 'info',
-    //       primaryBtn: null,
-    //       secondaryBtn: null,
-    //     });
-    //   }
-    // });
-    events.on(controlMessageEnum.muteVideo, async ({payload, sender}) => {
-      Toast.show({
-        type: 'info',
-        // text1: `${
-        //   renderListRef.current.renderList[sender].name || 'The host'
-        // } muted you.`,
-        text1: 'The host has muted your video.',
-        visibilityTime: 3000,
-        primaryBtn: null,
-        secondaryBtn: null,
-      });
-      isWebInternal()
-        ? await RtcEngine.muteLocalVideoStream(true)
-        : await RtcEngine.enableLocalVideo(false);
+    events.on(controlMessageEnum.muteVideo, () => {
+      RtcEngine.muteLocalVideoStream(true);
       dispatch({
         type: 'LocalMuteVideo',
         value: [0],
       });
     });
-    events.on(controlMessageEnum.muteAudio, ({sender}) => {
-      Toast.show({
-        type: 'info',
-        // text1: `${
-        //   renderListRef.current.renderList[sender].name || 'The host'
-        // } muted you.`,
-        text1: 'The host has muted your audio.',
-        visibilityTime: 3000,
-        primaryBtn: null,
-        secondaryBtn: null,
-      });
+    events.on(controlMessageEnum.muteAudio, () => {
       RtcEngine.muteLocalAudioStream(true);
       dispatch({
         type: 'LocalMuteAudio',
@@ -86,73 +36,12 @@ const EventsConfigure: React.FC<Props> = (props) => {
       });
     });
     events.on(controlMessageEnum.kickUser, () => {
-      Toast.show({
-        type: 'info',
-        text1: 'The host has removed you from the meeting.',
-        visibilityTime: 5000,
-        primaryBtn: null,
-        secondaryBtn: null,
-      });
-      setTimeout(() => {
-        dispatch({
-          type: 'EndCall',
-          value: [],
-        });
-      }, 5000);
-    });
-    events.on(controlMessageEnum.requestAudio, () => {
-      Toast.show({
-        type: 'info',
-        text1: 'The host has requested you to speak',
-        visibilityTime: 3000,
-        primaryBtn: (
-          <PrimaryButton
-            containerStyle={style.primaryBtn}
-            textStyle={{fontWeight: '600', fontSize: 16, paddingLeft: 0}}
-            text="UNMUTE"
-            onPress={() => {
-              RtcEngine.muteLocalAudioStream(false);
-              dispatch({
-                type: 'LocalMuteAudio',
-                value: [1],
-              });
-              Toast.hide();
-            }}
-          />
-        ),
-        secondaryBtn: SecondaryBtn,
-      });
-    });
-    events.on(controlMessageEnum.requestVideo, () => {
-      Toast.show({
-        type: 'info',
-        text1: 'The host has asked you to start your video.',
-        visibilityTime: 3000,
-        primaryBtn: (
-          <PrimaryButton
-            containerStyle={style.primaryBtn}
-            textStyle={style.primaryBtnText}
-            text="UNMUTE"
-            onPress={async () => {
-              isWebInternal()
-                ? await RtcEngine.muteLocalVideoStream(false)
-                : await RtcEngine.enableLocalVideo(true);
-              dispatch({
-                type: 'LocalMuteVideo',
-                value: [1],
-              });
-              Toast.hide();
-            }}
-          />
-        ),
-        secondaryBtn: SecondaryBtn,
+      dispatch({
+        type: 'EndCall',
+        value: [],
       });
     });
-
     return () => {
-      //events.off(controlMessageEnum.newUserJoined);
-      events.off(controlMessageEnum.requestAudio);
-      events.off(controlMessageEnum.requestVideo);
       events.off(controlMessageEnum.muteVideo);
       events.off(controlMessageEnum.muteAudio);
       events.off(controlMessageEnum.kickUser);
@@ -163,29 +52,3 @@ const EventsConfigure: React.FC<Props> = (props) => {
 };
 
 export default EventsConfigure;
-
-const style = StyleSheet.create({
-  secondaryBtn: {marginLeft: 16, height: 40, paddingVertical: 5},
-  primaryBtn: {
-    maxWidth: 109,
-    minWidth: 109,
-    height: 40,
-    borderRadius: 4,
-    paddingVertical: 5,
-    paddingHorizontal: 12,
-  },
-  primaryBtnText: {
-    fontWeight: '600',
-    fontSize: 16,
-    paddingLeft: 0,
-  },
-});
-const SecondaryBtn = (
-  <TertiaryButton
-    containerStyle={style.secondaryBtn}
-    text="LATER"
-    onPress={() => {
-      Toast.hide();
-    }}
-  />
-);

package/template/src/components/GraphQLProvider.tsx

@@ -20,7 +20,7 @@ import {setContext} from '@apollo/client/link/context';
 // import useMount from './useMount';
 import React, {createContext, useContext, useRef} from 'react';
 import StorageContext from './StorageContext';
-import AsyncStorage from '@react-native-async-storage/async-storage'; //'@react-native-community/async-storage';
+import AsyncStorage from '@react-native-community/async-storage';
 
 export const GraphQLContext = createContext<{
   client: ApolloClient<NormalizedCacheObject>;

package/template/src/components/GridVideo.tsx

@@ -9,13 +9,12 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {layoutComponent, useRender, useRtc} from 'customization-api';
-import React, {useContext, useMemo, useState} from 'react';
-import {View, StyleSheet, Pressable, Text} from 'react-native';
-import {isWebInternal, useIsDesktop} from '../utils/common';
+import {layoutComponent, useRtc} from 'customization-api';
+import React, {useMemo, useState} from 'react';
+import {View, StyleSheet, Dimensions, Pressable} from 'react-native';
+import {isWebInternal} from '../utils/common';
 import {useSetPinnedLayout} from '../pages/video-call/DefaultLayouts';
 import RenderComponent from '../pages/video-call/RenderComponent';
-import {ClientRole, PropsContext} from '../../agora-rn-uikit';
 const layout = (len: number, isDesktop: boolean = true) => {
   const rows = Math.round(Math.sqrt(len));
   const cols = Math.ceil(len / rows);
@@ -36,37 +35,34 @@ const layout = (len: number, isDesktop: boolean = true) => {
 
 const GridVideo: layoutComponent = ({renderData}) => {
   const {dispatch} = useRtc();
-  const {rtcProps} = useContext(PropsContext);
-  const {activeUids} = useRender();
-  const isDesktop = useIsDesktop();
+  let onLayout = (e: any) => {
+    setDim([
+      e.nativeEvent.layout.width,
+      e.nativeEvent.layout.height,
+      e.nativeEvent.layout.width > e.nativeEvent.layout.height,
+    ]);
+  };
+  const [dim, setDim] = useState<[number, number, boolean]>([
+    Dimensions.get('window').width,
+    Dimensions.get('window').height,
+    Dimensions.get('window').width > Dimensions.get('window').height,
+  ]);
+  const isDesktop = dim[0] > dim[1] + 100;
 
   let {matrix, dims} = useMemo(
-    () => layout(renderData.length, isDesktop()),
-    [renderData.length, isDesktop()],
+    () => layout(renderData.length, isDesktop),
+    [renderData.length, isDesktop],
   );
 
   const setPinnedLayout = useSetPinnedLayout();
-
-  //livestreaming audience will see this if no host joined the call
-  if (
-    $config.EVENT_MODE &&
-    rtcProps?.role === ClientRole.Audience &&
-    activeUids.length === 0
-  ) {
-    return (
-      <View style={style.infoTextContainer}>
-        <Text style={style.infoTextStyle}>Waiting for the host to join...</Text>
-      </View>
-    );
-  }
-
   return (
-    <View style={[style.full]}>
+    <View
+      style={[style.full, {paddingHorizontal: isDesktop ? 50 : 0}]}
+      onLayout={onLayout}>
       {matrix.map((r, ridx) => (
         <View style={style.gridRow} key={ridx}>
           {r.map((c, cidx) => (
             <Pressable
-              disabled={renderData.length === 1}
               onPress={() => {
                 if (!(ridx === 0 && cidx === 0)) {
                   dispatch({
@@ -81,25 +77,7 @@ const GridVideo: layoutComponent = ({renderData}) => {
                 marginHorizontal: 'auto',
               }}
               key={cidx}>
-              <View
-                style={[
-                  style.gridVideoContainerInner,
-                  //if only one item no margin required
-                  r?.length > 1
-                    ? //first item will have marginRight in the row
-                      cidx === 0
-                      ? {marginRight: 4}
-                      : //last item will have marginLeft in the row
-                      cidx === r?.length - 1
-                      ? {marginLeft: 4}
-                      : //middle item will have marginHorizontal
-                        {marginHorizontal: 4}
-                    : //if more than one row than add marginHorizontal
-                    //for ex: 7 people in the call with 3 column layout. last person tile should be aligned propert
-                    ridx > 1
-                    ? {marginHorizontal: 4}
-                    : {},
-                ]}>
+              <View style={style.gridVideoContainerInner}>
                 <RenderComponent uid={renderData[ridx * dims.c + cidx]} />
               </View>
             </Pressable>
@@ -113,32 +91,39 @@ const GridVideo: layoutComponent = ({renderData}) => {
 const style = StyleSheet.create({
   full: {
     flex: 1,
+    // padding: 20,
   },
   gridRow: {
     flex: 1,
     flexDirection: 'row',
     width: '100%',
-    paddingVertical: 4,
+    paddingVertical: 10,
   },
   gridVideoContainerInner: {
-    //borderRadius: 12,
+    // borderColor: '#fff',
+    // borderWidth:2,
+    // width: '100%',
+    borderRadius: 15,
     flex: 1,
     overflow: 'hidden',
+    // margin: 1,
+    marginHorizontal: 10,
   },
-  infoTextContainer: {
-    flex: 1,
-    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+  MicBackdrop: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    alignSelf: 'center',
+    marginHorizontal: 10,
+    marginRight: 20,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    display: 'flex',
     justifyContent: 'center',
-    marginHorizontal: 'auto',
-    marginVertical: 4,
   },
-  infoTextStyle: {
-    fontFamily: 'Source Sans Pro',
-    fontWeight: '600',
-    fontSize: 32,
-    color: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
-    textAlign: 'center',
-    padding: 12,
+  MicIcon: {
+    width: '80%',
+    height: '80%',
+    alignSelf: 'center',
   },
 });
 export default GridVideo;

package/template/src/components/HostControlView.tsx

@@ -9,76 +9,27 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useRef, useState} from 'react';
-import {View, StyleSheet, useWindowDimensions} from 'react-native';
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
 import SecondaryButton from '../atoms/SecondaryButton';
 import {useString} from '../utils/useString';
 import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
-import TertiaryButton from '../atoms/TertiaryButton';
-import Spacer from '../atoms/Spacer';
-import RemoteMutePopup from '../subComponents/RemoteMutePopup';
-import {calculatePosition} from '../utils/common';
 
 export interface MuteAllAudioButtonProps {
   render?: (onPress: () => void) => JSX.Element;
 }
 
 export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
-  const [showAudioMuteModal, setShowAudioMuteModal] = useState(false);
-  const audioBtnRef = useRef(null);
-  const [modalPosition, setModalPosition] = useState({});
   const muteRemoteAudio = useRemoteMute();
   //commented for v1 release
   //const muteAllAudioButton = useString('muteAllAudioButton')();
-  const muteAllAudioButton = 'Mute all';
-  const onPressAction = () => muteRemoteAudio(MUTE_REMOTE_TYPE.audio);
-  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
-  const showAudioModal = () => {
-    audioBtnRef?.current?.measure(
-      (_fx, _fy, localWidth, localHeight, px, py) => {
-        const data = calculatePosition({
-          px,
-          py,
-          localHeight,
-          localWidth,
-          globalHeight,
-          globalWidth,
-          extra: {
-            bottom: 10,
-            left: localWidth / 2,
-            right: -(localWidth / 2),
-          },
-          popupWidth: 290,
-        });
-        setModalPosition(data);
-        setShowAudioMuteModal(true);
-      },
-    );
-  };
-  const onPress = () => {
-    showAudioModal();
-  };
+  const muteAllAudioButton = 'Mute all audios';
+  const onPress = () => muteRemoteAudio(MUTE_REMOTE_TYPE.audio);
+
   return props?.render ? (
     props.render(onPress)
   ) : (
-    <>
-      <RemoteMutePopup
-        type="audio"
-        actionMenuVisible={showAudioMuteModal}
-        setActionMenuVisible={setShowAudioMuteModal}
-        name={null}
-        modalPosition={modalPosition}
-        onMutePress={() => {
-          onPressAction();
-          setShowAudioMuteModal(false);
-        }}
-      />
-      <TertiaryButton
-        setRef={(ref) => (audioBtnRef.current = ref)}
-        onPress={onPress}
-        text={muteAllAudioButton}
-      />
-    </>
+    <SecondaryButton onPress={onPress} text={muteAllAudioButton} />
   );
 };
 
@@ -86,83 +37,53 @@ export interface MuteAllVideoButtonProps {
   render?: (onPress: () => void) => JSX.Element;
 }
 export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
-  const [showVideoMuteModal, setShowVideoMuteModal] = useState(false);
-  const videoBtnRef = useRef(null);
-  const [modalPosition, setModalPosition] = useState({});
   const muteRemoteVideo = useRemoteMute();
-  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+
   //commented for v1 release
   //const muteAllVideoButton = useString('muteAllVideoButton')();
-  const muteAllVideoButton = 'Turn off all cameras';
-  const onPressAction = () => muteRemoteVideo(MUTE_REMOTE_TYPE.video);
-  const showVideoModal = () => {
-    videoBtnRef?.current?.measure(
-      (_fx, _fy, localWidth, localHeight, px, py) => {
-        const data = calculatePosition({
-          px,
-          py,
-          localHeight,
-          localWidth,
-          globalHeight,
-          globalWidth,
-          extra: {
-            bottom: 10,
-            left: globalWidth < 720 ? 0 : localWidth / 2,
-            right: globalHeight < 720 ? 0 : -(localWidth / 2),
-          },
-          popupWidth: 290,
-        });
-        setModalPosition(data);
-        setShowVideoMuteModal(true);
-      },
-    );
-  };
-  const onPress = () => {
-    showVideoModal();
-  };
+  const muteAllVideoButton = 'Mute all videos';
+  const onPress = () => muteRemoteVideo(MUTE_REMOTE_TYPE.video);
+
   return props?.render ? (
     props.render(onPress)
   ) : (
-    <>
-      <RemoteMutePopup
-        type="video"
-        actionMenuVisible={showVideoMuteModal}
-        setActionMenuVisible={setShowVideoMuteModal}
-        name={null}
-        modalPosition={modalPosition}
-        onMutePress={() => {
-          onPressAction();
-          setShowVideoMuteModal(false);
-        }}
-      />
-      <TertiaryButton
-        setRef={(ref) => (videoBtnRef.current = ref)}
-        onPress={onPress}
-        text={muteAllVideoButton}
-      />
-    </>
+    <SecondaryButton onPress={onPress} text={muteAllVideoButton} />
   );
 };
 
 const HostControlView = () => {
   //commented for v1 release
   //const hostControlsLabel = useString('hostControlsLabel')();
-
+  const hostControlsLabel = 'Host Controls';
   return (
-    <View style={style.container}>
-      {!$config.AUDIO_ROOM && <MuteAllVideoButton />}
-      <Spacer horizontal size={16} />
-      <MuteAllAudioButton />
-    </View>
+    <>
+      <Text style={style.heading}>{hostControlsLabel}</Text>
+      <View>
+        <View style={style.btnContainer}>
+          <MuteAllAudioButton />
+        </View>
+        {!$config.AUDIO_ROOM && (
+          <View style={style.btnContainer}>
+            <MuteAllVideoButton />
+          </View>
+        )}
+      </View>
+    </>
   );
 };
 
 const style = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'center',
+  heading: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: $config.PRIMARY_FONT_COLOR,
+    // marginBottom: 20,
+    alignSelf: 'center',
+  },
+  btnContainer: {
+    alignItems: 'center',
+    marginVertical: 15,
   },
-  btn: {},
 });
 
 export default HostControlView;