agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/components/EventsConfigure.tsx

@@ -9,26 +9,76 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
+import {StyleSheet} from 'react-native';
+import PrimaryButton from '../atoms/PrimaryButton';
 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(() => {
-    events.on(controlMessageEnum.muteVideo, () => {
-      RtcEngine.muteLocalVideoStream(true);
+    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);
       dispatch({
         type: 'LocalMuteVideo',
         value: [0],
       });
     });
-    events.on(controlMessageEnum.muteAudio, () => {
+    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,
+      });
       RtcEngine.muteLocalAudioStream(true);
       dispatch({
         type: 'LocalMuteAudio',
@@ -36,12 +86,73 @@ const EventsConfigure: React.FC<Props> = (props) => {
       });
     });
     events.on(controlMessageEnum.kickUser, () => {
-      dispatch({
-        type: 'EndCall',
-        value: [],
+      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,
       });
     });
+
     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);
@@ -52,3 +163,29 @@ 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-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage'; //'@react-native-community/async-storage';
 
 export const GraphQLContext = createContext<{
   client: ApolloClient<NormalizedCacheObject>;

package/template/src/components/GridVideo.tsx

@@ -9,12 +9,13 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-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 {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 {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);
@@ -35,34 +36,37 @@ const layout = (len: number, isDesktop: boolean = true) => {
 
 const GridVideo: layoutComponent = ({renderData}) => {
   const {dispatch} = useRtc();
-  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;
+  const {rtcProps} = useContext(PropsContext);
+  const {activeUids} = useRender();
+  const isDesktop = useIsDesktop();
 
   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, {paddingHorizontal: isDesktop ? 50 : 0}]}
-      onLayout={onLayout}>
+    <View style={[style.full]}>
       {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({
@@ -77,7 +81,25 @@ const GridVideo: layoutComponent = ({renderData}) => {
                 marginHorizontal: 'auto',
               }}
               key={cidx}>
-              <View style={style.gridVideoContainerInner}>
+              <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}
+                    : {},
+                ]}>
                 <RenderComponent uid={renderData[ridx * dims.c + cidx]} />
               </View>
             </Pressable>
@@ -91,39 +113,32 @@ const GridVideo: layoutComponent = ({renderData}) => {
 const style = StyleSheet.create({
   full: {
     flex: 1,
-    // padding: 20,
   },
   gridRow: {
     flex: 1,
     flexDirection: 'row',
     width: '100%',
-    paddingVertical: 10,
+    paddingVertical: 4,
   },
   gridVideoContainerInner: {
-    // borderColor: '#fff',
-    // borderWidth:2,
-    // width: '100%',
-    borderRadius: 15,
+    //borderRadius: 12,
     flex: 1,
     overflow: 'hidden',
-    // margin: 1,
-    marginHorizontal: 10,
   },
-  MicBackdrop: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignSelf: 'center',
-    marginHorizontal: 10,
-    marginRight: 20,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    display: 'flex',
+  infoTextContainer: {
+    flex: 1,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
     justifyContent: 'center',
+    marginHorizontal: 'auto',
+    marginVertical: 4,
   },
-  MicIcon: {
-    width: '80%',
-    height: '80%',
-    alignSelf: 'center',
+  infoTextStyle: {
+    fontFamily: 'Source Sans Pro',
+    fontWeight: '600',
+    fontSize: 32,
+    color: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+    textAlign: 'center',
+    padding: 12,
   },
 });
 export default GridVideo;

package/template/src/components/HostControlView.tsx

@@ -9,27 +9,76 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import React, {useRef, useState} from 'react';
+import {View, StyleSheet, useWindowDimensions} 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 audios';
-  const onPress = () => muteRemoteAudio(MUTE_REMOTE_TYPE.audio);
-
+  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();
+  };
   return props?.render ? (
     props.render(onPress)
   ) : (
-    <SecondaryButton onPress={onPress} text={muteAllAudioButton} />
+    <>
+      <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}
+      />
+    </>
   );
 };
 
@@ -37,53 +86,83 @@ 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 = 'Mute all videos';
-  const onPress = () => muteRemoteVideo(MUTE_REMOTE_TYPE.video);
-
+  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();
+  };
   return props?.render ? (
     props.render(onPress)
   ) : (
-    <SecondaryButton onPress={onPress} text={muteAllVideoButton} />
+    <>
+      <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}
+      />
+    </>
   );
 };
 
 const HostControlView = () => {
   //commented for v1 release
   //const hostControlsLabel = useString('hostControlsLabel')();
-  const hostControlsLabel = 'Host Controls';
+
   return (
-    <>
-      <Text style={style.heading}>{hostControlsLabel}</Text>
-      <View>
-        <View style={style.btnContainer}>
-          <MuteAllAudioButton />
-        </View>
-        {!$config.AUDIO_ROOM && (
-          <View style={style.btnContainer}>
-            <MuteAllVideoButton />
-          </View>
-        )}
-      </View>
-    </>
+    <View style={style.container}>
+      {!$config.AUDIO_ROOM && <MuteAllVideoButton />}
+      <Spacer horizontal size={16} />
+      <MuteAllAudioButton />
+    </View>
   );
 };
 
 const style = StyleSheet.create({
-  heading: {
-    fontSize: 20,
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-    // marginBottom: 20,
-    alignSelf: 'center',
-  },
-  btnContainer: {
-    alignItems: 'center',
-    marginVertical: 15,
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
   },
+  btn: {},
 });
 
 export default HostControlView;