agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

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

@@ -1,20 +1,64 @@
 import ParticipantsView from '../../components/ParticipantsView';
 import Chat from '../../components/Chat';
-import Navbar, {NavBarComponentsArray} from '../../components/Navbar';
-import SettingsView from '../../components/SettingsView';
-import Controls, {ControlsComponentsArray} from '../../components/Controls';
+import Navbar, {
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+  ChatToolbarItem,
+  ParticipantToolbarItem,
+  SettingsToobarItem,
+} from '../../components/Navbar';
+import Controls, {
+  LayoutToolbarItem,
+  InviteToolbarItem,
+  RaiseHandToolbarItem,
+  LocalAudioToolbarItem,
+  LocalVideoToolbarItem,
+  SwitchCameraToolbarItem,
+  ScreenShareToolbarItem,
+  RecordingToolbarItem,
+  LocalEndcallToolbarItem,
+  MoreButtonToolbarItem,
+} from '../../components/Controls';
 import ChatBubble from '../../subComponents/ChatBubble';
-import {ChatTextInput, ChatSendButton} from '../../subComponents/ChatInput';
+import {ChatInput} from '../../subComponents/ChatInput';
+import {ChatAttachmentButton} from '../../subComponents/chat/ChatAttachment';
+import ChatSendButton from '../../subComponents/chat/ChatSendButton';
+import ChatUploadStatus from '../../subComponents/chat/ChatUploadStatus';
+import {ChatEmojiButton} from '../../subComponents/chat/ChatEmoji';
+import SettingsView from '../../components/SettingsView';
+import WhiteboardButton from '../../components/whiteboard/WhiteboardButton';
 
+const ToolbarComponents = {
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+  ChatToolbarItem,
+  ParticipantToolbarItem,
+  SettingsToobarItem,
+  LayoutToolbarItem,
+  InviteToolbarItem,
+  RaiseHandToolbarItem,
+  LocalAudioToolbarItem,
+  LocalVideoToolbarItem,
+  SwitchCameraToolbarItem,
+  ScreenShareToolbarItem,
+  RecordingToolbarItem,
+  LocalEndcallToolbarItem,
+  WhiteboardToolbarItem: WhiteboardButton,
+  MoreButtonToolbarItem,
+};
 export {
   ParticipantsView,
   Chat,
   Navbar,
-  NavBarComponentsArray,
   SettingsView,
   Controls,
-  ControlsComponentsArray,
   ChatBubble,
-  ChatTextInput,
+  ChatInput,
+  ChatAttachmentButton,
+  ChatEmojiButton,
+  ChatUploadStatus,
   ChatSendButton,
+  ToolbarComponents,
 };

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() {
@@ -48,20 +51,35 @@ class RTMEngine {
     return RTMEngine._instance;
   }
 
+  setLocalUID(localUID: string) {
+    this.localUID = localUID;
+  }
+
+  setChannelId(channelID: string) {
+    this.channelId = channelID;
+  }
+
   setLoginInfo(localUID: string, channelID: string) {
     this.localUID = localUID;
     this.channelId = channelID;
   }
+
   get localUid() {
     return this.localUID;
   }
+
   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) {
       console.log('Error destroying instance error: ', error);
     }

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

@@ -1,14 +1,9 @@
 /** ***** EVENTS ACTIONS BEGINS***** */
-//  1. RECORDING
-const RECORDING_STARTED = 'RECORDING_STARTED';
-const RECORDING_STOPPED = 'RECORDING_STOPPED';
-// 2. SCREENSHARE
+// 1. SCREENSHARE
 const SCREENSHARE_STARTED = 'SCREENSHARE_STARTED';
 const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
 
 const EventActions = {
-  RECORDING_STARTED,
-  RECORDING_STOPPED,
   SCREENSHARE_STARTED,
   SCREENSHARE_STOPPED,
 };
@@ -17,7 +12,8 @@ const EventActions = {
 
 /** ***** EVENT NAMES BEGINS ***** */
 // 1. RECORDING
-const RECORDING_ATTRIBUTE = 'recording';
+const RECORDING_STATE_ATTRIBUTE = 'recording_state';
+const RECORDING_STARTED_BY_ATTRIBUTE = 'recording_started_by';
 // 2. SCREENSHARE
 const SCREENSHARE_ATTRIBUTE = 'screenshare';
 // 2. LIVE STREAMING
@@ -28,11 +24,24 @@ const PUBLIC_CHAT_MESSAGE = 'PUBLIC_CHAT_MESSAGE';
 const PRIVATE_CHAT_MESSAGE = 'PRIVATE_CHAT_MESSAGE';
 // 4. NAME ATTRIBUTE
 const NAME_ATTRIBUTE = 'name';
-// 5. VIDEO MEETING ROLE
+// 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,
+  RECORDING_STATE_ATTRIBUTE,
+  RECORDING_STARTED_BY_ATTRIBUTE,
   RAISED_ATTRIBUTE,
   ROLE_ATTRIBUTE,
   PUBLIC_CHAT_MESSAGE,
@@ -41,6 +50,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 ***** */
 

package/template/src/rtm-events-api/Events.ts

@@ -18,9 +18,11 @@ import {
   ReceiverUid,
   EventCallback,
   EventSource,
-  EventPersistLevel,
+  PersistanceLevel,
+  RTMAttributePayload,
 } from './types';
 import {adjustUID} from '../rtm/utils';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 class Events {
   private source: EventSource = EventSource.core;
@@ -45,8 +47,10 @@ class Events {
       // Step 1: Call RTM API to update local attributes
       await rtmEngine.addOrUpdateLocalUserAttributes([rtmAttribute]);
     } catch (error) {
-      console.log(
-        'CUSTOM_EVENT_API error occured while updating the value ',
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'error occured while updating the value ',
         error,
       );
     }
@@ -95,7 +99,10 @@ class Events {
    * @param {ReceiverUid} toUid uid or uids[] of user
    * @api private
    */
-  private _send = async (rtmPayload: any, toUid?: ReceiverUid) => {
+  private _send = async (
+    rtmPayload: RTMAttributePayload,
+    toUid?: ReceiverUid,
+  ) => {
     const to = typeof toUid == 'string' ? parseInt(toUid) : toUid;
     const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
 
@@ -106,18 +113,31 @@ class Events {
       (typeof to === 'number' && to <= 0) ||
       (Array.isArray(to) && to?.length === 0)
     ) {
-      console.log('CUSTOM_EVENT_API: case 1 executed');
+      logger.debug(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'case 1 executed - sending in channel',
+      );
       try {
         const channelId = RTMEngine.getInstance().channelUid;
         await rtmEngine.sendMessageByChannelId(channelId, text);
       } catch (error) {
-        console.log('CUSTOM_EVENT_API: send event case 1 error : ', error);
+        logger.error(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'send event case 1 error',
+          error,
+        );
         throw error;
       }
     }
     // Case 2: send to indivdual
-    if (typeof to === 'number' && to !== 0) {
-      console.log('CUSTOM_EVENT_API: case 2 executed', to);
+    if (typeof to === 'number' && to >= 0) {
+      logger.debug(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        `case 2 executed - sending to individual ${to}`,
+      );
       const adjustedUID = adjustUID(to);
       try {
         await rtmEngine.sendMessageToPeer({
@@ -126,14 +146,23 @@ class Events {
           text,
         });
       } catch (error) {
-        console.log('CUSTOM_EVENT_API: send event case 2 error : ', error);
+        logger.error(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'send event case 2 error',
+          error,
+        );
         throw error;
       }
     }
     // Case 3: send to multiple individuals
     if (typeof to === 'object' && Array.isArray(to)) {
-      console.log('CUSTOM_EVENT_API: case 3 executed', to);
-
+      logger.debug(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'case 3 executed - sending to multiple individuals',
+        to,
+      );
       try {
         for (const uid of to) {
           const adjustedUID = adjustUID(uid);
@@ -144,12 +173,43 @@ class Events {
           });
         }
       } catch (error) {
-        console.log('CUSTOM_EVENT_API: send event case 3 error : ', error);
+        logger.error(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'send event case 3 error',
+          error,
+        );
         throw error;
       }
     }
   };
 
+  private _sendAsChannelAttribute = async (rtmPayload: RTMAttributePayload) => {
+    // Case 1: send to channel
+    logger.debug(
+      LogSource.Events,
+      'CUSTOM_EVENTS',
+      'updating channel attributes',
+    );
+    try {
+      const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
+      const channelId = RTMEngine.getInstance().channelUid;
+      const rtmAttribute = [{key: rtmPayload.evt, value: rtmPayload.value}];
+      // Step 1: Call RTM API to update local attributes
+      await rtmEngine.addOrUpdateChannelAttributes(channelId, rtmAttribute, {
+        enableNotificationToChannelMembers: true,
+      });
+    } catch (error) {
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'updating channel attributes error',
+        error,
+      );
+      throw error;
+    }
+  };
+
   /**
    * Listen on a new event by eventName and listener.
    * When the specified event happens, the Events API triggers the callback that you pass.
@@ -162,14 +222,22 @@ class Events {
    */
   on = (eventName: string, listener: EventCallback): Function => {
     try {
-      if (!this._validateEvt(eventName) || !this._validateListener(listener))
+      if (!this._validateEvt(eventName) || !this._validateListener(listener)) {
         return;
+      }
       EventUtils.addListener(eventName, listener, this.source);
+      console.log('CUSTOM_EVENT_API event listener registered', eventName);
       return () => {
+        //@ts-ignore
         EventUtils.removeListener(eventName, listener, this.source);
       };
     } catch (error) {
-      console.log('CUSTOM_EVENT_API on error: ', error);
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'Error: events.on',
+        error,
+      );
     }
   };
 
@@ -187,6 +255,7 @@ class Events {
       if (listener) {
         if (this._validateListener(listener) && this._validateEvt(eventName)) {
           // listen off an event by eventName and listener
+          //@ts-ignore
           EventUtils.removeListener(eventName, listener, this.source);
         }
       } else if (eventName) {
@@ -199,7 +268,12 @@ class Events {
         EventUtils.removeAll(this.source);
       }
     } catch (error) {
-      console.log('CUSTOM_EVENT_API off error: ', error);
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'Error: events.off',
+        error,
+      );
     }
   };
 
@@ -218,10 +292,12 @@ class Events {
   send = async (
     eventName: string = '',
     payload: string = '',
-    persistLevel: EventPersistLevel = EventPersistLevel.LEVEL1,
+    persistLevel: PersistanceLevel = PersistanceLevel.None,
     receiver: ReceiverUid = -1,
   ) => {
-    if (!this._validateEvt(eventName)) return;
+    if (!this._validateEvt(eventName)) {
+      return;
+    }
 
     const persistValue = JSON.stringify({
       payload,
@@ -229,25 +305,40 @@ class Events {
       source: this.source,
     });
 
-    const rtmPayload = {
+    const rtmPayload: RTMAttributePayload = {
       evt: eventName,
       value: persistValue,
     };
 
     if (
-      persistLevel === EventPersistLevel.LEVEL2 ||
-      persistLevel === EventPersistLevel.LEVEL3
+      persistLevel === PersistanceLevel.Sender ||
+      persistLevel === PersistanceLevel.Session
     ) {
       try {
         await this._persist(eventName, persistValue);
       } catch (error) {
-        console.log('CUSTOM_EVENT_API persist error: ', error);
+        logger.error(LogSource.Events, 'CUSTOM_EVENTS', 'persist error', error);
       }
     }
     try {
-      await this._send(rtmPayload, receiver);
+      logger.log(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        `sending event -> ${eventName}`,
+        persistValue,
+      );
+      if (persistLevel === PersistanceLevel.Channel) {
+        await this._sendAsChannelAttribute(rtmPayload);
+      } else {
+        await this._send(rtmPayload, receiver);
+      }
     } catch (error) {
-      console.log('CUSTOM_EVENT_API: sending failed. ', error);
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'sending event failed',
+        error,
+      );
     }
   };
 }

package/template/src/rtm-events-api/LocalEvents.ts

@@ -0,0 +1,15 @@
+import {EventEmitter} from 'events';
+export enum LocalEventsEnum {
+  ACTIVE_SPEAKER = 'ACTIVE_SPEAKER',
+  WHITEBOARD_FILE_UPLOAD = 'WHITEBOARD_FILE_UPLOAD',
+  WHITEBOARD_ACTIVE_LOCAL = 'WHITEBOARD_ACTIVE_LOCAL',
+  BOARD_COLOR_CHANGED_LOCAL = 'BOARD_COLOR_CHANGED_LOCAL',
+  WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION_LOCAL = 'WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION_LOCAL',
+  WHITEBOARD_ON = 'WHITEBOARD_ON',
+  WHITEBOARD_OFF = 'WHITEBOARD_OFF',
+  MIC_CHANGED = 'MIC_CHANGED',
+  CLEAR_WHITEBOARD = 'CLEAR_WHITEBOARD',
+  USER_KICKED_OFF_BY_REMOTE_HOST = 'USER_KICKED_OFF_BY_REMOTE_HOST',
+}
+const LocalEventEmitter = new EventEmitter();
+export default LocalEventEmitter;

package/template/src/rtm-events-api/types.ts

@@ -8,14 +8,19 @@ export enum EventSource {
   core = 'core',
   fpe = 'fpe',
 }
-export enum EventPersistLevel {
-  'LEVEL1' = 1,
-  'LEVEL2',
-  'LEVEL3',
+export enum PersistanceLevel {
+  'None' = 1,
+  'Sender',
+  'Session',
+  'Channel',
+}
+export interface RTMAttributePayload {
+  evt: string;
+  value: string;
 }
 interface EventCallbackPayload {
   payload: string;
-  persistLevel: EventPersistLevel;
+  persistLevel: PersistanceLevel;
   sender: UidType;
   ts: number;
 }