agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

package/template/src/pages/video-call/VideoRenderer.tsx

@@ -1,33 +1,57 @@
 import React, {useState, useRef, useContext, useEffect} from 'react';
-import {View, StyleSheet, Platform} from 'react-native';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import {
-  DispatchContext,
   PropsContext,
+  DispatchContext,
   ContentInterface,
-  UidType,
 } from '../../../agora-rn-uikit';
 import ScreenShareNotice from '../../subComponents/ScreenShareNotice';
 import {MaxVideoView} from '../../../agora-rn-uikit';
 import FallbackLogo from '../../subComponents/FallbackLogo';
 import NetworkQualityPill from '../../subComponents/NetworkQualityPill';
 import NameWithMicIcon from './NameWithMicIcon';
-import useActiveSpeaker from '../../utils/useActiveSpeaker';
-import {useLayout, useContent} from 'customization-api';
-import {getGridLayoutName, getPinnedLayoutName} from './DefaultLayouts';
+import {useLayout, useContent, useRtc, customEvents} from 'customization-api';
+import {
+  DefaultLayouts,
+  getGridLayoutName,
+  getPinnedLayoutName,
+} from './DefaultLayouts';
 import IconButton from '../../atoms/IconButton';
 import UserActionMenuOptionsOptions from '../../components/participants/UserActionMenuOptions';
 import {isMobileUA, isWebInternal} from '../../utils/common';
 import ThemeConfig from '../../theme';
 import {createHook} from 'customization-implementation';
-
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {useScreenContext} from '../../components/contexts/ScreenShareContext';
+import ZoomableWrapper from './ZoomableWrapper';
+import {isAndroid} from '../../utils/common';
+import {isIOS} from '../../utils/common';
+import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
+import useActiveSpeaker from '../../utils/useActiveSpeaker';
+import {useVideoCall} from '../../components/useVideoCall';
+import VisibilitySensor from './VisibilitySensor';
+import ImageIcon from '../../atoms/ImageIcon';
+import {useWhiteboard} from '../../components/whiteboard/WhiteboardConfigure';
+import {useString} from '../../utils/useString';
+import {
+  moreBtnViewInLarge,
+  moreBtnViewWhiteboard,
+} from '../../language/default-labels/videoCallScreenLabels';
 interface VideoRendererProps {
   user: ContentInterface;
   isMax?: boolean;
+  CustomChild?: React.ComponentType;
 }
-const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
+const VideoRenderer: React.FC<VideoRendererProps> = ({
+  user,
+  isMax = false,
+  CustomChild,
+}) => {
+  const {height, width} = useWindowDimensions();
   const {dispatch} = useContext(DispatchContext);
+  const {RtcEngineUnsafe} = useRtc();
+  const {pinnedUid, secondaryPinnedUid} = useContent();
   const activeSpeaker = useActiveSpeaker();
-  const {pinnedUid, activeUids} = useContent();
   const isActiveSpeaker = activeSpeaker === user.uid;
   const [isHovered, setIsHovered] = useState(false);
   const {rtcProps} = useContext(PropsContext);
@@ -43,11 +67,77 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
   const [avatarSize, setAvatarSize] = useState(100);
   const videoMoreMenuRef = useRef(null);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
+  const {setVideoTileInViewPortState} = useVideoCall();
+  const {getWhiteboardUid = () => 0} = useWhiteboard();
+  const [landscapeMode, setLandscapeMode] = useState(
+    isAndroid() || isIOS() ? true : false,
+  );
+  const landscapeModeRef = useRef({landscapeMode});
+  const {
+    screenShareData,
+    setScreenShareData,
+    isScreenShareOnFullView,
+    setScreenShareOnFullView,
+  } = useScreenContext();
+
+  const {isScreenshareActive} = useScreenshare();
+
+  useEffect(() => {
+    landscapeModeRef.current.landscapeMode = landscapeMode;
+  }, [landscapeMode]);
+
+  useEffect(() => {
+    //if screenshare is on fullscreen then get the width/height to set landscape mode
+    if (isScreenShareOnFullView) {
+      if (isAndroid() || isIOS()) {
+        const cb = args => {
+          if (
+            args?.uid == user.uid &&
+            args?.width &&
+            args?.height &&
+            args.height > args.width
+          ) {
+            landscapeModeRef.current.landscapeMode && setLandscapeMode(false);
+          }
+        };
+        const subscription = RtcEngineUnsafe.addListener(
+          'RemoteVideoStats',
+          cb,
+        );
+        setTimeout(() => {
+          subscription.remove();
+        }, 5000);
+      } else {
+        if (screenShareData && screenShareData?.[user.uid] && isMobileUA()) {
+          //@ts-ignore
+          const data = RtcEngineUnsafe.getRemoteVideoStats(user.uid);
+          if (
+            data &&
+            data?.receiveResolutionHeight &&
+            data?.receiveResolutionWidth &&
+            data?.receiveResolutionHeight > data.receiveResolutionWidth
+          ) {
+            setLandscapeMode(false);
+          }
+        }
+      }
+    }
+  }, [screenShareData, isScreenShareOnFullView]);
+
+  const isNativeScreenShareActive =
+    (isAndroid() || isIOS()) && isScreenshareActive;
+  const enableExpandButton = isNativeScreenShareActive ? false : true;
+
+  const {enablePinForMe} = useVideoCall();
+
+  const viewinlargeLabel = useString(moreBtnViewInLarge)();
+  const viewwhiteboardlabel = useString(moreBtnViewWhiteboard)();
+
   return (
     <>
       <UserActionMenuOptionsOptions
         actionMenuVisible={actionMenuVisible}
-        setActionMenuVisible={(flag) => {
+        setActionMenuVisible={flag => {
           //once user clicks action menu item -> hide the action menu and set parent isHovered false
           if (!flag) {
             setIsHovered(false);
@@ -70,7 +160,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
           }}
           style={[
             maxStyle.container,
-            isActiveSpeaker
+            !CustomChild && isActiveSpeaker
               ? maxStyle.activeContainerStyle
               : user.video
               ? maxStyle.noVideoStyle
@@ -79,30 +169,164 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
           {!showReplacePin && !showPinForMe && (
             <ScreenShareNotice uid={user.uid} isMax={isMax} />
           )}
-          <NetworkQualityPill uid={user.uid} />
-          <MaxVideoView
-            fallback={() => {
-              return FallbackLogo(
-                user?.name,
-                isActiveSpeaker,
-                (showReplacePin || showPinForMe) && !isMobileUA()
-                  ? true
-                  : false,
-                isMax,
-                avatarSize,
-              );
-            }}
-            user={user}
-            containerStyle={{
-              width: '100%',
-              height: '100%',
-            }}
-            key={user.uid}
-          />
-          <VideoContainerProvider value={{videoTileWidth}}>
-            <NameWithMicIcon name={user.name} muted={!user.audio} />
-          </VideoContainerProvider>
-          {user.uid !== rtcProps?.screenShareUid &&
+          {currentLayout === DefaultLayouts[1].name &&
+          user.uid === secondaryPinnedUid ? (
+            <View
+              style={{
+                position: 'absolute',
+                zIndex: 2,
+                borderRadius: 50,
+                padding: 8,
+                top: 8,
+                left: 8,
+                backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+              }}>
+              <ImageIcon
+                iconType="plain"
+                name={'pin-filled'}
+                iconSize={16}
+                tintColor={$config.FONT_COLOR}
+              />
+            </View>
+          ) : (
+            <></>
+          )}
+          {enableExpandButton &&
+          screenShareData &&
+          screenShareData?.[user.uid] &&
+          isMobileUA() ? (
+            <IconButton
+              containerStyle={
+                isScreenShareOnFullView && landscapeMode
+                  ? {
+                      position: 'absolute',
+                      top: 8,
+                      right: 8,
+                      transform: [{rotate: '90deg'}],
+                      zIndex: 999,
+                      elevation: 999,
+                    }
+                  : {
+                      position: 'absolute',
+                      top: 8,
+                      left:
+                        pinnedUid &&
+                        pinnedUid == user.uid &&
+                        !isScreenShareOnFullView
+                          ? 160 + (isAndroid() ? 15 : 0)
+                          : 8,
+                      zIndex: 999,
+                      elevation: 999,
+                    }
+              }
+              onPress={() => {
+                setScreenShareOnFullView(
+                  !screenShareData[user.uid]?.isExpanded,
+                );
+                setScreenShareData(prevState => {
+                  return {
+                    ...prevState,
+                    [user.uid]: {
+                      ...prevState[user.uid],
+                      isExpanded: !prevState[user.uid]?.isExpanded,
+                    },
+                  };
+                });
+              }}
+              iconProps={{
+                iconContainerStyle: {
+                  padding: 8,
+                  backgroundColor:
+                    $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['10%'],
+                  transform: [{rotate: '-45deg'}],
+                },
+                name:
+                  screenShareData?.[user?.uid]?.isExpanded === true
+                    ? 'collapse'
+                    : 'expand',
+                tintColor: $config.SECONDARY_ACTION_COLOR,
+                iconSize: 20,
+              }}
+            />
+          ) : (
+            <></>
+          )}
+          {!isScreenShareOnFullView && !CustomChild && (
+            <NetworkQualityPill uid={user?.uid} />
+          )}
+          <ZoomableWrapper
+            enableZoom={
+              isScreenShareOnFullView &&
+              screenShareData &&
+              screenShareData?.[user.uid]
+                ? true
+                : false
+            }>
+            <VisibilitySensor
+              trigger={activeSpeaker}
+              onChange={isVisible => {
+                setVideoTileInViewPortState(user.uid, isVisible);
+              }}>
+              {CustomChild ? (
+                <CustomChild />
+              ) : (
+                <MaxVideoView
+                  fallback={() => {
+                    return FallbackLogo(
+                      user?.name,
+                      isActiveSpeaker,
+                      enablePinForMe &&
+                        (showReplacePin || showPinForMe) &&
+                        !isMobileUA()
+                        ? true
+                        : false,
+                      isMax,
+                      avatarSize,
+                    );
+                  }}
+                  user={isNativeScreenShareActive ? {...user, video: 0} : user}
+                  containerStyle={{
+                    width:
+                      landscapeMode && isScreenShareOnFullView
+                        ? height
+                        : '100%',
+                    height:
+                      landscapeMode && isScreenShareOnFullView ? width : '100%',
+                    // width: '100%',
+                    // height: '100%',
+                    borderRadius: 4,
+                    overflow: 'hidden',
+                  }}
+                  key={user.uid}
+                  landscapeMode={
+                    landscapeMode && isScreenShareOnFullView ? true : false
+                  }
+                />
+              )}
+            </VisibilitySensor>
+          </ZoomableWrapper>
+          {(!isScreenShareOnFullView && !CustomChild) ||
+          (CustomChild &&
+            (pinnedUid !== getWhiteboardUid() || currentLayout === 'grid')) ? (
+            <VideoContainerProvider value={{videoTileWidth}}>
+              <NameWithMicIcon
+                name={user.name}
+                muted={CustomChild ? undefined : !user.audio}
+                customBgColor={
+                  CustomChild ? $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR : null
+                }
+                customTextColor={
+                  CustomChild
+                    ? $config.FONT_COLOR + hexadecimalTransparency['80%']
+                    : null
+                }
+              />
+            </VideoContainerProvider>
+          ) : (
+            <></>
+          )}
+          {!isScreenShareOnFullView &&
+          // user.uid !== rtcProps?.screenShareUid &&
           (isHovered || actionMenuVisible || isMobileUA()) ? (
             <MoreMenu
               videoMoreMenuRef={videoMoreMenuRef}
@@ -111,27 +335,41 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
           ) : (
             <></>
           )}
-          {(showReplacePin || showPinForMe) && !isMobileUA() ? (
+          {enablePinForMe &&
+          (showReplacePin || showPinForMe) &&
+          !isMobileUA() ? (
             <IconButton
               onPress={() => {
                 dispatch({type: 'UserPin', value: [user.uid]});
               }}
-              containerStyle={maxStyle.replacePinContainer}
+              containerStyle={
+                user.uid === getWhiteboardUid()
+                  ? maxStyle.replacePinContainer2
+                  : maxStyle.replacePinContainer
+              }
               btnTextProps={{
-                text: showReplacePin ? 'Replace Pin' : 'Pin for me',
+                //text: showReplacePin ? 'Replace Pin' : 'View in large',
+                text:
+                  user.uid === getWhiteboardUid()
+                    ? viewwhiteboardlabel
+                    : viewinlargeLabel,
                 textColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
                 textStyle: {
                   marginTop: 0,
                   fontWeight: '700',
-                  marginLeft: 6,
+                  marginLeft: user.uid === getWhiteboardUid() ? 0 : 6,
                 },
               }}
-              iconProps={{
-                name: 'pin-filled',
-                iconSize: 20,
-                iconType: 'plain',
-                tintColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
-              }}
+              iconProps={
+                user.uid === getWhiteboardUid()
+                  ? null
+                  : {
+                      name: 'pin-filled',
+                      iconSize: 20,
+                      iconType: 'plain',
+                      tintColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+                    }
+              }
             />
           ) : (
             <></>
@@ -147,12 +385,11 @@ interface MoreMenuProps {
   videoMoreMenuRef: any;
 }
 const MoreMenu = ({setActionMenuVisible, videoMoreMenuRef}: MoreMenuProps) => {
-  const {activeUids} = useContent();
+  const {activeUids, customContent} = useContent();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
   const {currentLayout} = useLayout();
   const reduceSpace =
-    isMobileUA() &&
-    activeUids.length > 4 &&
-    currentLayout === getGridLayoutName();
+    isMobileUA() && activeUidsLen > 4 && currentLayout === getGridLayoutName();
   return (
     <>
       <View
@@ -170,8 +407,10 @@ const MoreMenu = ({setActionMenuVisible, videoMoreMenuRef}: MoreMenuProps) => {
           }}
           iconProps={{
             iconContainerStyle: {
-              padding: reduceSpace && activeUids.length > 12 ? 2 : 8,
-              backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+              padding: reduceSpace && activeUidsLen > 12 ? 2 : 8,
+              backgroundColor:
+                $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR +
+                hexadecimalTransparency['25%'],
             },
             name: 'more-menu',
             iconSize: 20,
@@ -186,7 +425,7 @@ const MoreMenu = ({setActionMenuVisible, videoMoreMenuRef}: MoreMenuProps) => {
 const PlatformWrapper = ({children, setIsHovered, isHovered}) => {
   return isWebInternal() && !isMobileUA() ? (
     <div
-      style={{width: '100%', height: '100%'}}
+      style={{width: '100%', height: '100%', borderRadius: 4}}
       /**
        * why onMouseOver is used instead of onMouseEnter
        * when user clicks close icon the participant then video tile will expand and
@@ -226,6 +465,23 @@ const maxStyle = StyleSheet.create({
     maxWidth: 120,
     maxHeight: 32,
   },
+  replacePinContainer2: {
+    justifyContent: 'center',
+    zIndex: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+    borderRadius: 8,
+    flexDirection: 'row',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+    maxWidth: 120,
+    maxHeight: 32,
+  },
   container: {
     width: '100%',
     height: '100%',
@@ -233,6 +489,7 @@ const maxStyle = StyleSheet.create({
     overflow: 'hidden',
     borderRadius: ThemeConfig.BorderRadius.small,
     borderWidth: 2,
+    borderColor: 'red',
   },
   activeContainerStyle: {
     borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,

package/template/src/pages/video-call/VisibilitySensor.tsx

@@ -0,0 +1,104 @@
+import React, {useEffect, useState, useRef, ReactNode, FC} from 'react';
+import {View, Dimensions} from 'react-native';
+
+export interface IDimensionData {
+  rectTop: number;
+  rectBottom: number;
+  rectWidth: number;
+}
+
+export interface Props {
+  /** Function that is triggered when component enters the viewport */
+  onChange(visible: boolean): any;
+  /** The component that needs to be in the viewport */
+  children: ReactNode;
+  trigger: any;
+}
+
+const RNView = View as any;
+
+const VisibilitySensor: FC<Props> = ({children, onChange, trigger}) => {
+  const myView: any = useRef(null);
+  const [lastValue, setLastValue] = useState<boolean>(false);
+  const [dimensions, setDimensions] = useState<IDimensionData>({
+    rectTop: 0,
+    rectBottom: 0,
+    rectWidth: 0,
+  });
+
+  let interval: any = null;
+
+  useEffect(() => {
+    setLastValue(false);
+    startWatching();
+    isInViewPort();
+    return stopWatching;
+  }, [
+    dimensions.rectTop,
+    dimensions.rectBottom,
+    dimensions.rectWidth,
+    trigger,
+  ]);
+
+  const startWatching = () => {
+    if (interval) {
+      return;
+    }
+
+    interval = setInterval(() => {
+      if (!myView || !myView.current) {
+        return;
+      }
+
+      myView.current.measure(
+        async (
+          _x: number,
+          _y: number,
+          width: number,
+          height: number,
+          pageX: number,
+          pageY: number,
+        ) => {
+          setDimensions({
+            rectTop: pageY,
+            rectBottom: pageY + height,
+            rectWidth: pageX + width,
+          });
+        },
+      );
+    }, 1000);
+  };
+
+  const stopWatching = () => {
+    interval = clearInterval(interval);
+  };
+
+  const isInViewPort = () => {
+    const window = Dimensions.get('window');
+    const isVisible =
+      dimensions.rectBottom != 0 &&
+      dimensions.rectTop >= 0 &&
+      dimensions.rectBottom <= window.height &&
+      dimensions.rectWidth > 0 &&
+      dimensions.rectWidth <= window.width;
+
+    if (lastValue !== isVisible) {
+      setLastValue(isVisible);
+      onChange(isVisible);
+    } else {
+      onChange(isVisible);
+    }
+  };
+
+  return (
+    <RNView
+      style={{width: '100%', height: '100%'}}
+      collapsable={false}
+      ref={myView}>
+      {children}
+      <View />
+    </RNView>
+  );
+};
+
+export default VisibilitySensor;

package/template/src/pages/video-call/ZoomableWrapper.native.tsx

@@ -0,0 +1,34 @@
+import {ReactNativeZoomableView} from '@openspacelabs/react-native-zoomable-view';
+import {isAndroid} from '../../utils/common';
+import React from 'react';
+import {View} from 'react-native';
+import {PinchableView} from './PinchableView';
+
+const ZoomableWrapper = (props) => {
+  if (!props?.enableZoom) {
+    return <>{props.children}</>;
+  }
+
+  if (isAndroid()) {
+    return (
+      <View
+        style={{
+          flexShrink: 1,
+          height: '100%',
+          width: '100%',
+        }}>
+        <ReactNativeZoomableView
+          maxZoom={30}
+          zoomStep={1}
+          initialZoom={1}
+          style={{
+            flex: 1,
+          }}>
+          {props.children}
+        </ReactNativeZoomableView>
+      </View>
+    );
+  }
+  return <PinchableView>{props.children}</PinchableView>;
+};
+export default ZoomableWrapper;

package/template/src/pages/video-call/ZoomableWrapper.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const ZoomableWrapper = (props) => {
+  return <>{props.children}</>;
+};
+export default ZoomableWrapper;

package/template/src/pages/video-call/index.ts

@@ -22,6 +22,7 @@ import Controls, {
 import ChatBubble from '../../subComponents/ChatBubble';
 import {ChatInput} from '../../subComponents/ChatInput';
 import SettingsView from '../../components/SettingsView';
+import WhiteboardButton from '../../components/whiteboard/WhiteboardButton';
 
 const ToolbarComponents = {
   MeetingTitleToolbarItem,
@@ -39,6 +40,7 @@ const ToolbarComponents = {
   ScreenShareToolbarItem,
   RecordingToolbarItem,
   LocalEndcallToolbarItem,
+  WhiteboardToolbarItem: WhiteboardButton,
 };
 export {
   ParticipantsView,

package/template/src/rtm/RTMEngine.ts

@@ -11,6 +11,7 @@
 */
 
 import RtmEngine from 'agora-react-native-rtm';
+import {isAndroid, isIOS} from '../utils/common';
 
 class RTMEngine {
   engine!: RtmEngine;
@@ -32,7 +33,9 @@ class RTMEngine {
 
   private async destroyClientInstance() {
     await this.engine.logout();
-    await this.engine.destroyClient();
+    if (isIOS() || isAndroid()) {
+      await this.engine.destroyClient();
+    }
   }
 
   private constructor() {
@@ -64,10 +67,12 @@ class RTMEngine {
   get channelUid() {
     return this.channelId;
   }
-  destroy() {
+  async destroy() {
     try {
-      this.destroyClientInstance();
-      RTMEngine._instance = null;
+      await this.destroyClientInstance();
+      if (isIOS() || isAndroid()) {
+        RTMEngine._instance = null;
+      }
       this.localUID = '';
       this.channelId = '';
     } catch (error) {

package/template/src/rtm-events/constants.ts

@@ -33,6 +33,18 @@ const NAME_ATTRIBUTE = 'name';
 // 5. VIDEO ROOM ROLE
 const VIDEO_MEETING_HOST = 'VIDEO_MEETING_HOST';
 const VIDEO_MEETING_ATTENDEE = 'VIDEO_MEETING_ATTENDEE';
+// 6. STT
+const STT_ACTIVE = 'STT_IS_ACTIVE';
+const STT_LANGUAGE = 'STT_LANGUAGE_CHANGED';
+// 7. WAITING ROOM
+const WAITING_ROOM_REQUEST = 'WAITING_ROOM_REQUEST';
+const WAITING_ROOM_RESPONSE = 'WAITING_ROOM_RESPONSE';
+const WAITING_ROOM_STATUS_UPDATE = 'WAITING_ROOM_STATUS_UPDATE';
+// 8 .WHITEBOARD
+const WHITEBOARD_ACTIVE = 'WHITEBOARD_ACTIVE';
+const BOARD_COLOR_CHANGED = 'BOARD_COLOR_CHANGED';
+const WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION = 'WHITEBOARD_L_I_U_P';
+
 const EventNames = {
   RECORDING_ATTRIBUTE,
   RAISED_ATTRIBUTE,
@@ -43,6 +55,14 @@ const EventNames = {
   NAME_ATTRIBUTE,
   VIDEO_MEETING_HOST,
   VIDEO_MEETING_ATTENDEE,
+  STT_ACTIVE,
+  STT_LANGUAGE,
+  WAITING_ROOM_REQUEST,
+  WAITING_ROOM_RESPONSE,
+  WAITING_ROOM_STATUS_UPDATE,
+  WHITEBOARD_ACTIVE,
+  BOARD_COLOR_CHANGED,
+  WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION,
 };
 /** ***** EVENT NAMES ENDS ***** */