agora-appbuilder-core 4.1.19-beta.4 → 4.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.19-beta.4",
+  "version": "4.1.20",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -45,6 +45,7 @@ import {
   type ScreenEncoderConfigurationPreset,
   type VideoEncoderConfiguration,
 } from '../../../src/app-state/useVideoQuality';
+import {getScreenshareReleaseOrigin} from '../../../src/subComponents/screenshare/screenshareJourney';
 
 interface MediaDeviceInfo {
   readonly deviceId: string;
@@ -54,6 +55,21 @@ interface MediaDeviceInfo {
 
 type callbackType = (uid?: UID) => void;
 
+const getScreenshareErrorDetails = (error: unknown) => {
+  const sdkError = error as {
+    code?: string | number;
+    name?: string;
+    message?: string;
+  };
+  return {
+    sdkErrorCode: sdkError?.code,
+    sdkErrorName: sdkError?.name,
+    sdkErrorMessage:
+      sdkError?.message ||
+      (error instanceof Error ? error.message : String(error)),
+  };
+};
+
 declare global {
   interface Window {
     engine: RtcEngine;
@@ -237,6 +253,13 @@ export default class RtcEngine {
   public screenStream: ScreenStream = {};
   public remoteStreams = new Map<UID, RemoteStream>();
   private inScreenshare: Boolean = false;
+  private isScreenshareCleanupInProgress = false;
+  private activeScreenshareJourneyContext: {
+    screenshareSessionId?: string;
+    recordingActive?: boolean;
+    screenShareUid?: UID;
+    stopActorUid?: UID;
+  } | null = null;
   private videoProfile:
     | VideoEncoderConfigurationPreset
     | VideoEncoderConfiguration;
@@ -1466,13 +1489,13 @@ export default class RtcEngine {
         this.client.setEncryptionConfig(
           mode,
           config.encryptionKey,
-          config.encryptionMode === 1? null:config.encryptionKdfSalt,
+          config.encryptionMode === 1 ? null : config.encryptionKdfSalt,
           true, // encryptDataStream
         ),
         this.screenClient.setEncryptionConfig(
           mode,
           config.encryptionKey,
-          config.encryptionMode === 1? null:config.encryptionKdfSalt,
+          config.encryptionMode === 1 ? null : config.encryptionKdfSalt,
           true, // encryptDataStream
         ),
       ]);
@@ -1518,14 +1541,75 @@ export default class RtcEngine {
   //   this.client.removeAllListeners(eventName);
   // }
 
-  async release(): Promise<void> {
+  async release(
+    requestedStopOrigin?: 'end_call_cleanup' | 'page_unload',
+  ): Promise<void> {
+    const stopOrigin = getScreenshareReleaseOrigin(
+      requestedStopOrigin,
+      typeof document !== 'undefined' ? document.visibilityState : undefined,
+    );
     if (this.inScreenshare) {
-      (this.eventsMap.get('onUserOffline') as callbackType)(
-        {},
-        this.screenClient.uid,
+      const screenshareAttemptId = `release-${Date.now()}`;
+      const journeyData = {
+        action: 'stop',
+        stage: 'release',
+        outcome: 'started',
+        screenshareAttemptId,
+        screenshareSessionId:
+          this.activeScreenshareJourneyContext?.screenshareSessionId ||
+          'unknown-session',
+        recordingActive:
+          this.activeScreenshareJourneyContext?.recordingActive || false,
+        screenShareUid:
+          this.activeScreenshareJourneyContext?.screenShareUid ||
+          this.screenClient.uid,
+        stopOrigin,
+        stopActorUid:
+          this.activeScreenshareJourneyContext?.stopActorUid || undefined,
+      };
+      logger.log(
+        LogSource.AgoraSDK,
+        'API',
+        `[SCREENSHARE_JOURNEY] screen share stop release cleanup calling screenClient.leave from ${stopOrigin}`,
+        journeyData,
       );
-      this.screenClient.leave();
-      (this.eventsMap.get('onScreenshareStopped') as callbackType)();
+      try {
+        (this.eventsMap.get('onUserOffline') as callbackType)(
+          {},
+          this.screenClient.uid,
+        );
+        this.screenStream.audio?.stop();
+        this.screenStream.video?.stop();
+        this.screenStream.audio?.close();
+        this.screenStream.video?.close();
+        await this.screenClient.leave();
+        this.inScreenshare = false;
+        (this.eventsMap.get('onScreenshareStopped') as callbackType)(
+          stopOrigin,
+          screenshareAttemptId,
+          journeyData.screenshareSessionId,
+          journeyData.stopActorUid,
+        );
+        logger.log(
+          LogSource.AgoraSDK,
+          'API',
+          `[SCREENSHARE_JOURNEY] screen share stop release cleanup completed successfully from ${stopOrigin}`,
+          {...journeyData, outcome: 'success'},
+        );
+      } catch (error) {
+        logger.error(
+          LogSource.AgoraSDK,
+          'API',
+          `[SCREENSHARE_JOURNEY] screen share stop release cleanup failed from ${stopOrigin}`,
+          {
+            ...journeyData,
+            outcome: 'failure',
+            ...getScreenshareErrorDetails(error),
+          },
+        );
+      } finally {
+        this.activeScreenshareJourneyContext = null;
+      }
     }
     this.eventsMap.forEach((callback, event, map) => {
       this.client.off(event, callback);
@@ -1587,17 +1671,110 @@ export default class RtcEngine {
       encoderConfig: this.screenShareProfile,
     },
     audio: 'enable' | 'disable' | 'auto' = 'auto',
+    journeyContext: {
+      action?: 'start' | 'stop';
+      screenshareAttemptId?: string;
+      screenshareSessionId?: string;
+      recordingActive?: boolean;
+      screenShareUid?: UID;
+      stopOrigin?: string;
+      stopActorUid?: UID;
+    } = {},
   ): Promise<void> {
+    const journeyData = {
+      action: journeyContext.action || (this.inScreenshare ? 'stop' : 'start'),
+      screenshareAttemptId:
+        journeyContext.screenshareAttemptId || 'rtc-unknown-attempt',
+      screenshareSessionId:
+        journeyContext.screenshareSessionId || 'unknown-session',
+      recordingActive: journeyContext.recordingActive || false,
+      screenShareUid: journeyContext.screenShareUid || optionalUid,
+      stopOrigin: journeyContext.stopOrigin || 'unknown',
+      stopActorUid: journeyContext.stopActorUid,
+    };
     const config: ScreenVideoTrackInitConfig = {
       ...screenShareConfig,
       encoderConfig: this.screenShareProfile,
     };
+    let joined = false;
+    let cleanupCompleted = false;
+    const cleanupScreenshare = async (
+      stopOrigin: string,
+      notifyScreenshareStopped: boolean,
+      screenshareAttemptId = journeyData.screenshareAttemptId,
+    ) => {
+      const cleanupJourneyData = notifyScreenshareStopped
+        ? {
+            ...journeyData,
+            action: 'stop',
+            screenshareAttemptId,
+            stopOrigin,
+          }
+        : journeyData;
+      if (this.isScreenshareCleanupInProgress || cleanupCompleted) {
+        logger.log(
+          LogSource.AgoraSDK,
+          'API',
+          `[SCREENSHARE_JOURNEY] screen share ${cleanupJourneyData.action} cleanup skipped because cleanup is already running or completed`,
+          {
+            ...cleanupJourneyData,
+            stage: 'cleanup',
+            outcome: 'skipped',
+            stopOrigin,
+          },
+        );
+        return;
+      }
+      this.isScreenshareCleanupInProgress = true;
+      try {
+        if (joined || this.inScreenshare) {
+          (this.eventsMap.get('onUserOffline') as callbackType)(
+            {},
+            this.screenClient.uid,
+          );
+        }
+        this.screenStream.audio?.stop();
+        this.screenStream.video?.stop();
+        this.screenStream.audio?.close();
+        this.screenStream.video?.close();
+        if (joined || this.inScreenshare) {
+          await this.screenClient.leave();
+        }
+        this.screenStream = {};
+        this.inScreenshare = false;
+        this.activeScreenshareJourneyContext = null;
+        if (notifyScreenshareStopped) {
+          (this.eventsMap.get('onScreenshareStopped') as callbackType)(
+            stopOrigin,
+            screenshareAttemptId,
+            cleanupJourneyData.screenshareSessionId,
+            cleanupJourneyData.stopActorUid,
+          );
+        }
+        logger.log(
+          LogSource.AgoraSDK,
+          'API',
+          `[SCREENSHARE_JOURNEY] screen share ${cleanupJourneyData.action} RTC cleanup completed`,
+          {
+            ...cleanupJourneyData,
+            stage: 'cleanup',
+            outcome: 'success',
+            stopOrigin,
+          },
+        );
+        cleanupCompleted = true;
+      } finally {
+        this.isScreenshareCleanupInProgress = false;
+      }
+    };
     if (!this.inScreenshare) {
+      let stage = 'encryption';
       try {
         logger.debug(
           LogSource.AgoraSDK,
           'Log',
-          'RTC start screenshare, creating screen stream',
+          '[SCREENSHARE_JOURNEY] screen share start entered RTC engine',
+          {...journeyData, stage: 'rtc_start', outcome: 'started'},
         );
         if (encryption && encryption.screenKey && encryption.mode) {
           let mode: EncryptionMode;
@@ -1611,7 +1788,8 @@ export default class RtcEngine {
             logger.log(
               LogSource.AgoraSDK,
               'Log',
-              'RTC [setEncryptionConfig] setting encryption again on screen client',
+              '[SCREENSHARE_JOURNEY] screen share start configuring RTC screen-client encryption',
+              {...journeyData, stage, outcome: 'started'},
             );
             await this.screenClient.setEncryptionConfig(
               mode,
@@ -1619,21 +1797,44 @@ export default class RtcEngine {
               encryption.salt,
               true, // encryptDataStream
             );
+            logger.log(
+              LogSource.AgoraSDK,
+              'Log',
+              '[SCREENSHARE_JOURNEY] screen share start RTC screen-client encryption configured successfully',
+              {...journeyData, stage, outcome: 'success'},
+            );
           } catch (e) {
             logger.error(
               LogSource.AgoraSDK,
               'Log',
-              'RTC [setEncryptionConfig] Error setting encryption for screenshare failed',
-              e,
+              '[SCREENSHARE_JOURNEY] screen share start RTC screen-client encryption configuration failed',
+              {
+                ...journeyData,
+                stage,
+                outcome: 'failure',
+                ...getScreenshareErrorDetails(e),
+              },
             );
+            throw e;
           }
+        } else {
+          logger.log(
+            LogSource.AgoraSDK,
+            'Log',
+            '[SCREENSHARE_JOURNEY] screen share start RTC screen-client encryption skipped because encryption is not configured',
+            {...journeyData, stage, outcome: 'skipped'},
+          );
         }
 
+        stage = 'create_screen_video_track';
         logger.log(
           LogSource.AgoraSDK,
           'API',
-          'RTC [createScreenVideoTrack] Trying to create screenshare tracks',
+          '[SCREENSHARE_JOURNEY] screen share start calling AgoraRTC.createScreenVideoTrack',
           {
+            ...journeyData,
+            stage,
+            outcome: 'started',
             config,
           },
         );
@@ -1641,98 +1842,134 @@ export default class RtcEngine {
           config,
           audio,
         );
+        const isSingleScreenTrack = this.isSingleTrack(screenTracks);
         logger.log(
           LogSource.AgoraSDK,
           'API',
-          'RTC [createScreenVideoTrack] screenshare tracks created successfully',
+          '[SCREENSHARE_JOURNEY] screen share start AgoraRTC.createScreenVideoTrack completed successfully',
           {
-            tracks: screenTracks,
+            ...journeyData,
+            stage,
+            outcome: 'success',
+            hasVideoTrack: Boolean(
+              isSingleScreenTrack ? screenTracks : screenTracks[0],
+            ),
+            hasAudioTrack: Boolean(
+              isSingleScreenTrack ? false : screenTracks[1],
+            ),
           },
         );
-        if (this.isSingleTrack(screenTracks)) {
+        if (isSingleScreenTrack) {
           this.screenStream.video = screenTracks;
         } else {
           this.screenStream.video = screenTracks[0];
           this.screenStream.audio = screenTracks[1];
         }
+        stage = 'rtc_join';
+        logger.log(
+          LogSource.AgoraSDK,
+          'API',
+          '[SCREENSHARE_JOURNEY] screen share start calling screenClient.join',
+          {...journeyData, stage, outcome: 'started', channelName, optionalUid},
+        );
+        await this.screenClient.join(
+          this.appId,
+          channelName,
+          token || null,
+          optionalUid || null,
+        );
+        joined = true;
+        this.inScreenshare = true;
+        logger.log(
+          LogSource.AgoraSDK,
+          'API',
+          '[SCREENSHARE_JOURNEY] screen share start screenClient.join completed successfully',
+          {...journeyData, stage, outcome: 'success'},
+        );
+        stage = 'rtc_publish';
+        logger.log(
+          LogSource.AgoraSDK,
+          'API',
+          '[SCREENSHARE_JOURNEY] screen share start calling screenClient.publish',
+          {...journeyData, stage, outcome: 'started'},
+        );
+        await this.screenClient.publish(
+          this.screenStream.audio
+            ? [this.screenStream.video, this.screenStream.audio]
+            : this.screenStream.video,
+        );
+        logger.log(
+          LogSource.AgoraSDK,
+          'API',
+          '[SCREENSHARE_JOURNEY] screen share start screenClient.publish completed successfully',
+          {...journeyData, stage, outcome: 'success'},
+        );
+        this.activeScreenshareJourneyContext = {
+          screenshareSessionId: journeyData.screenshareSessionId,
+          recordingActive: journeyData.recordingActive,
+          screenShareUid: journeyData.screenShareUid,
+          stopActorUid: journeyData.stopActorUid,
+        };
+        this.screenStream.video.on('track-ended', async () => {
+          const nativeStopAttemptId = `${
+            journeyData.screenshareAttemptId
+          }-native-${Date.now()}`;
+          const mediaTrack = this.screenStream.video?.getMediaStreamTrack?.();
+          logger.log(
+            LogSource.AgoraSDK,
+            'API',
+            '[SCREENSHARE_JOURNEY] screen share stop detected from browser native control through video track-ended',
+            {
+              ...journeyData,
+              action: 'stop',
+              screenshareAttemptId: nativeStopAttemptId,
+              stage: 'track_ended',
+              outcome: 'started',
+              stopOrigin: 'browser_native_control',
+              mediaTrack: mediaTrack
+                ? {
+                    readyState: mediaTrack.readyState,
+                    enabled: mediaTrack.enabled,
+                    muted: mediaTrack.muted,
+                    label: mediaTrack.label,
+                    settings: mediaTrack.getSettings?.(),
+                  }
+                : null,
+            },
+          );
+          await cleanupScreenshare(
+            'browser_native_control',
+            true,
+            nativeStopAttemptId,
+          );
+        });
       } catch (e) {
         logger.error(
           LogSource.AgoraSDK,
           'API',
-          'RTC [createScreenVideoTrack] Error while creating screenshare tracks',
-          e,
+          `[SCREENSHARE_JOURNEY] screen share start failed inside RTC engine at ${stage}`,
+          {
+            ...journeyData,
+            stage,
+            outcome: 'failure',
+            joined,
+            ...getScreenshareErrorDetails(e),
+          },
         );
+        if (joined || this.screenStream.video || this.screenStream.audio) {
+          await cleanupScreenshare('startup_failure', false);
+        }
         throw e;
       }
-
-      logger.log(
-        LogSource.AgoraSDK,
-        'API',
-        'RTC [join] joining channel of screenclient',
-        {
-          appId: this.appId,
-          channelName,
-          token,
-          optionalUid,
-        },
-      );
-      await this.screenClient.join(
-        this.appId,
-        channelName,
-        token || null,
-        optionalUid || null,
-      );
-      logger.log(
-        LogSource.AgoraSDK,
-        'API',
-        'RTC [join] joined channel successfully',
-      );
-      this.inScreenshare = true;
-      logger.log(
-        LogSource.AgoraSDK,
-        'API',
-        'RTC [publish] trying to publish screen tracks',
-      );
-      await this.screenClient.publish(
-        this.screenStream.audio
-          ? [this.screenStream.video, this.screenStream.audio]
-          : this.screenStream.video,
-      );
+    } else {
       logger.log(
         LogSource.AgoraSDK,
         'API',
-        'RTC [publish] screenshare tracks published successfully',
+        `[SCREENSHARE_JOURNEY] screen share stop entered RTC engine from ${journeyData.stopOrigin}`,
+        {...journeyData, stage: 'rtc_stop', outcome: 'started'},
       );
-      this.screenStream.video.on('track-ended', () => {
-        (this.eventsMap.get('onUserOffline') as callbackType)(
-          {},
-          this.screenClient.uid,
-        );
-
-        this.screenClient.leave();
-
-        this.screenStream.audio?.close();
-        this.screenStream.video?.close();
-        this.screenStream = {};
-
-        (this.eventsMap.get('onScreenshareStopped') as callbackType)();
-        this.inScreenshare = false;
-      });
-    } else {
-      (this.eventsMap.get('onUserOffline') as callbackType)(
-        {},
-        this.screenClient.uid,
-      );
-      this.screenClient.leave();
-      (this.eventsMap.get('onScreenshareStopped') as callbackType)();
-      try {
-        this.screenStream.audio?.close();
-        this.screenStream.video?.close();
-        this.screenStream = {};
-      } catch (err) {
-        throw err;
-      }
-      this.inScreenshare = false;
+      await cleanupScreenshare(journeyData.stopOrigin, true);
+      this.activeScreenshareJourneyContext = null;
     }
   }
 }

package/template/customization-api/atoms.ts

@@ -8,5 +8,3 @@ export {default as TertiaryButton} from '../src/atoms/TertiaryButton';
 export {default as ActionMenu} from '../src/atoms/ActionMenu';
 export {default as IconButton} from '../src/atoms/IconButton';
 export {default as Dropdown} from '../src/atoms/Dropdown';
-export {default as Popup} from '../src/atoms/Popup';
-export {default as Tooltip} from '../src/atoms/Tooltip';

package/template/customization-api/customEvents.ts

@@ -5,13 +5,10 @@ import {
   PersistanceLevel,
   EventCallback,
 } from '../src/rtm-events-api';
-import LocalEventEmitter, {
-  LocalEventsEnum,
-} from '../src/rtm-events-api/LocalEvents';
 
 // 2. Initialize with source "fpe"
 const customEvents = new Events(EventSource.fpe);
 
 // 3. export
-export {customEvents, PersistanceLevel, LocalEventEmitter, LocalEventsEnum};
+export {customEvents, PersistanceLevel};
 export type {EventCallback};

package/template/customization-api/index.ts

@@ -26,7 +26,6 @@ export * from './typeDefinition';
 export * from './utils';
 export * from './types';
 export * from './atoms';
-export * from './ai-agent';
 
 //TODO: hari remove later - used for simple-practice demo
 export * from './temp';

package/template/customization-api/typeDefinition.ts

@@ -53,7 +53,6 @@ export interface SidePanelItem {
   name: string;
   title: string;
   component: React.ComponentType;
-  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
 }
 
@@ -75,10 +74,6 @@ export type CustomLogger = (
 export interface CustomAgentInterfaceProps {
   connectionState: AIAgentState;
 }
-export interface CreateInterface extends BeforeAndAfterInterface {
-  headerRightSlot?: React.ComponentType;
-}
-
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
   topToolBar?: ToolbarType;
@@ -114,7 +109,7 @@ export type ComponentsInterface = {
   precall?: PreCallInterface;
   preferenceWrapper?: React.ComponentType;
   //precall?: React.ComponentType;
-  create?: React.ComponentType | CreateInterface;
+  create?: React.ComponentType;
   //share?: React.ComponentType;
   //join?: React.ComponentType;
   videoCall?: VideoCallInterface;

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: "",
   CHAT_APP_NAME: "",
   CHAT_URL: "",
-  CLI_VERSION: "3.1.19-beta.4",
-  CORE_VERSION: "4.1.19-beta.4",
+  CLI_VERSION: "3.1.20",
+  CORE_VERSION: "4.1.20",
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/components/Controls.tsx

@@ -719,7 +719,9 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         title: screenShareButton(isScreenshareActive),
         onPress: () => {
           setActionMenuVisible(false);
-          isScreenshareActive ? stopScreenshare() : startScreenshare();
+          isScreenshareActive
+            ? stopScreenshare('mobile_action_menu')
+            : startScreenshare();
         },
       });
     }

package/template/src/components/CustomSidePanel.tsx

@@ -10,18 +10,23 @@
 *********************************************
 */
 import React from 'react';
-import {View, StyleSheet, ScrollView} from 'react-native';
+import {View, Text, StyleSheet, ScrollView} from 'react-native';
 import {isMobileUA, isWebInternal, useIsSmall} from '../utils/common';
 import CommonStyles from './CommonStyles';
-import useCaptionWidth from '../subComponents/caption/useCaptionWidth';
-import {CustomSidePanelHeader} from '../pages/video-call/SidePanelHeader';
+import SidePanelHeader, {
+  SidePanelStyles,
+} from '../subComponents/SidePanelHeader';
 import {useLayout} from '../utils/useLayout';
 import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
+import useCaptionWidth from '../subComponents/caption/useCaptionWidth';
+import {useSidePanel} from '../utils/useSidePanel';
+import {SidePanelType} from '../subComponents/SidePanelEnum';
+import {CustomSidePanelHeader} from '../pages/video-call/SidePanelHeader';
+
 export interface CustomSidePanelViewInterface {
   name: string;
   title?: string;
   content: React.ComponentType;
-  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
   showHeader?: boolean;
 }
@@ -32,12 +37,12 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
     showHeader = true,
     name,
     title,
-    headerRightSlot,
     onClose,
   } = props;
+  const {currentLayout} = useLayout();
   const {transcriptHeight} = useCaptionWidth();
+  const {setSidePanel} = useSidePanel();
   const isSmall = useIsSmall();
-  const {currentLayout} = useLayout();
 
   return (
     <View
@@ -52,18 +57,13 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
           : // desktop maximized
             CommonStyles.sidePanelContainerWeb,
         isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
-          ? {marginTop: 4}
+          ? {marginVertical: 4}
           : {},
         //@ts-ignore
         transcriptHeight && !isMobileUA() && {height: transcriptHeight},
       ]}>
       {showHeader && (
-        <CustomSidePanelHeader
-          name={name}
-          title={title}
-          headerRightSlot={headerRightSlot}
-          onClose={onClose}
-        />
+        <CustomSidePanelHeader name={name} title={title} onClose={onClose} />
       )}
       <ScrollView contentContainerStyle={[style.bodyContainer]}>
         {CustomSidePanelContent ? <CustomSidePanelContent /> : <></>}