agora-appbuilder-core 4.1.23 → 4.1.24-beta.2

package/package.json

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

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

@@ -209,6 +209,14 @@ interface ActiveScreenshareLifecycle {
   cleanupPromise?: Promise<void>;
   journeyData: Record<string, unknown>;
 }
+interface ScreenshareJourneyContext {
+  screenshareAttemptId?: string;
+  screenshareSessionId?: string;
+  recordingActive?: boolean;
+  screenShareUid?: UID;
+  stopOrigin?: string;
+  stopActorUid?: UID;
+}
 interface RemoteStream {
   audio?: IRemoteAudioTrack;
   video?: IRemoteVideoTrack;
@@ -883,24 +891,28 @@ export default class RtcEngine {
         user,
         mediaType,
       );
-      if (this.inScreenshare && user.uid === this.screenClient.uid) {
-        (this.eventsMap.get('onRemoteVideoStateChanged') as callbackType)(
-          {},
-          user.uid,
-          2,
-          0,
-          0,
-        );
-      } else {
-        await this.client.subscribe(user, mediaType);
-        logger.log(
-          LogSource.AgoraSDK,
-          'API',
-          'RTC [subscribe] to track successfully done',
-          user,
-          mediaType,
-        );
+      const isOwnScreenshare =
+        this.inScreenshare && user.uid === this.screenClient?.uid;
+      if (isOwnScreenshare) {
+        if (mediaType === 'video') {
+          (this.eventsMap.get('onRemoteVideoStateChanged') as callbackType)(
+            {},
+            user.uid,
+            2,
+            0,
+            0,
+          );
+        }
+        return;
       }
+      await this.client.subscribe(user, mediaType);
+      logger.log(
+        LogSource.AgoraSDK,
+        'API',
+        'RTC [subscribe] to track successfully done',
+        user,
+        mediaType,
+      );
       // If the subscribed track is an audio track
       if (mediaType === 'audio') {
         const audioTrack = user.audioTrack;
@@ -948,6 +960,20 @@ export default class RtcEngine {
         user,
         mediaType,
       );
+      const isOwnScreenshare =
+        this.inScreenshare && user.uid === this.screenClient?.uid;
+      if (isOwnScreenshare) {
+        if (mediaType === 'video') {
+          (this.eventsMap.get('onRemoteVideoStateChanged') as callbackType)(
+            {},
+            user.uid,
+            0,
+            0,
+            0,
+          );
+        }
+        return;
+      }
       if (mediaType === 'video') {
         this.logRemoteScreenshareTermination(
           user.uid,
@@ -1713,6 +1739,9 @@ export default class RtcEngine {
       return;
     }
 
+    // The track-ended callback passes the exact lifecycle object it captured.
+    // A different reference means a newer screen share is now active, so this
+    // older callback must not clean up the current share.
     if (
       expectedLifecycle &&
       this.activeScreenshareLifecycle !== expectedLifecycle
@@ -1814,6 +1843,9 @@ export default class RtcEngine {
         throw error;
       } finally {
         lifecycle.cleaned = true;
+        // Only the lifecycle that is still active may clear shared state and
+        // notify the app. Object identity prevents stale cleanup from ending a
+        // newer screen-share session.
         if (this.activeScreenshareLifecycle === lifecycle) {
           this.activeScreenshareLifecycle = null;
           this.screenStream = {};
@@ -1970,6 +2002,41 @@ export default class RtcEngine {
     }
   }
 
+  async stopScreenshare(
+    journeyContext: ScreenshareJourneyContext = {},
+  ): Promise<void> {
+    const journeyData = {
+      action: 'stop' as const,
+      screenshareAttemptId:
+        journeyContext.screenshareAttemptId || 'rtc-unknown-attempt',
+      screenshareSessionId:
+        journeyContext.screenshareSessionId || 'unknown-session',
+      recordingActive: journeyContext.recordingActive || false,
+      screenShareUid:
+        journeyContext.screenShareUid || this.screenClient?.uid,
+      stopOrigin: journeyContext.stopOrigin || 'unknown',
+      stopActorUid: journeyContext.stopActorUid,
+    };
+    logger.log(
+      LogSource.AgoraSDK,
+      'API',
+      `[SCREENSHARE_JOURNEY] screen share stop entered RTC engine from ${journeyData.stopOrigin}`,
+      {
+        ...journeyData,
+        stage: 'rtc_stop',
+        outcome: 'started',
+        requestedAction: 'stop',
+        executedAction: 'stop',
+        operationState: this.screenshareOperationState,
+      },
+    );
+    await this.cleanupActiveScreenshare(
+      journeyData.stopOrigin,
+      true,
+      journeyData.screenshareAttemptId,
+    );
+  }
+
   async startScreenshare(
     token: string,
     channelName: string,
@@ -1986,18 +2053,10 @@ 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;
-    } = {},
+    journeyContext: ScreenshareJourneyContext = {},
   ): Promise<void> {
     const journeyData = {
-      action: journeyContext.action || (this.inScreenshare ? 'stop' : 'start'),
+      action: 'start' as const,
       screenshareAttemptId:
         journeyContext.screenshareAttemptId || 'rtc-unknown-attempt',
       screenshareSessionId:
@@ -2011,28 +2070,6 @@ export default class RtcEngine {
       ...screenShareConfig,
       encoderConfig: this.screenShareProfile,
     };
-    if (journeyData.action === 'stop') {
-      logger.log(
-        LogSource.AgoraSDK,
-        'API',
-        `[SCREENSHARE_JOURNEY] screen share stop entered RTC engine from ${journeyData.stopOrigin}`,
-        {
-          ...journeyData,
-          stage: 'rtc_stop',
-          outcome: 'started',
-          requestedAction: 'stop',
-          executedAction: 'stop',
-          operationState: this.screenshareOperationState,
-        },
-      );
-      await this.cleanupActiveScreenshare(
-        journeyData.stopOrigin,
-        true,
-        journeyData.screenshareAttemptId,
-      );
-      return;
-    }
-
     if (this.screenshareOperationState !== 'inactive' || this.inScreenshare) {
       const duplicateStartError = Object.assign(
         new Error(

package/template/bridge/rtc/webNg/__tests__/screenshareLifecycle.test.ts

@@ -75,7 +75,7 @@ describe('web RTC screen-share lifecycle', () => {
   let engine: any;
   let screenClient: any;
 
-  const callScreenshare = (action: 'start' | 'stop', sessionId = 'session-1') =>
+  const callStartScreenshare = (sessionId = 'session-1') =>
     engine.startScreenshare(
       'token',
       'channel',
@@ -87,14 +87,21 @@ describe('web RTC screen-share lifecycle', () => {
       {encoderConfig: '1080p_2'},
       'auto',
       {
-        action,
-        screenshareAttemptId: `${action}-request`,
+        screenshareAttemptId: 'start-request',
         screenshareSessionId: sessionId,
         screenShareUid: 101,
         stopOrigin: 'toolbar',
       },
     );
 
+  const callStopScreenshare = (sessionId = 'session-1') =>
+    engine.stopScreenshare({
+      screenshareAttemptId: 'stop-request',
+      screenshareSessionId: sessionId,
+      screenShareUid: 101,
+      stopOrigin: 'toolbar',
+    });
+
   beforeAll(() => {
     (global as any).window = {};
     RtcEngine = require('../RtcEngine').default;
@@ -120,9 +127,9 @@ describe('web RTC screen-share lifecycle', () => {
     const {track} = createTrack();
     mockCreateScreenVideoTrack.mockReturnValueOnce(picker.promise);
 
-    const firstStart = callScreenshare('start');
+    const firstStart = callStartScreenshare();
     await expect(
-      callScreenshare('start', 'duplicate-session'),
+      callStartScreenshare('duplicate-session'),
     ).rejects.toMatchObject({code: 'SCREENSHARE_OPERATION_IN_PROGRESS'});
 
     expect(mockCreateScreenVideoTrack).toHaveBeenCalledTimes(1);
@@ -136,7 +143,7 @@ describe('web RTC screen-share lifecycle', () => {
     const stopped = jest.fn();
     engine.eventsMap.set('onScreenshareStopped', stopped);
 
-    await callScreenshare('stop');
+    await callStopScreenshare();
 
     expect(mockCreateScreenVideoTrack).not.toHaveBeenCalled();
     expect(screenClient.join).not.toHaveBeenCalled();
@@ -153,7 +160,7 @@ describe('web RTC screen-share lifecycle', () => {
       }),
     );
 
-    await expect(callScreenshare('start')).rejects.toMatchObject({
+    await expect(callStartScreenshare()).rejects.toMatchObject({
       code: 'INVALID_OPERATION',
     });
 
@@ -168,7 +175,7 @@ describe('web RTC screen-share lifecycle', () => {
     mockCreateScreenVideoTrack.mockResolvedValueOnce(track);
     screenClient.publish.mockRejectedValueOnce(new Error('publish failed'));
 
-    await expect(callScreenshare('start')).rejects.toThrow('publish failed');
+    await expect(callStartScreenshare()).rejects.toThrow('publish failed');
 
     expect(track.stop).toHaveBeenCalledTimes(1);
     expect(track.close).toHaveBeenCalledTimes(1);
@@ -185,7 +192,7 @@ describe('web RTC screen-share lifecycle', () => {
     mockCreateScreenVideoTrack.mockResolvedValueOnce(track);
     screenClient.publish.mockRejectedValueOnce(publishError);
 
-    await expect(callScreenshare('start')).rejects.toBe(publishError);
+    await expect(callStartScreenshare()).rejects.toBe(publishError);
 
     expect(track.stop).toHaveBeenCalledTimes(1);
     expect(track.close).toHaveBeenCalledTimes(1);
@@ -201,13 +208,13 @@ describe('web RTC screen-share lifecycle', () => {
       }),
     );
 
-    await expect(callScreenshare('start')).rejects.toMatchObject({
+    await expect(callStartScreenshare()).rejects.toMatchObject({
       code: 'PERMISSION_DENIED',
     });
 
     const {track} = createTrack();
     mockCreateScreenVideoTrack.mockResolvedValueOnce(track);
-    await callScreenshare('start', 'session-2');
+    await callStartScreenshare('session-2');
 
     expect(mockCreateScreenVideoTrack).toHaveBeenCalledTimes(2);
     expect(screenClient.join).toHaveBeenCalledTimes(1);
@@ -220,7 +227,7 @@ describe('web RTC screen-share lifecycle', () => {
     const {track} = createTrack();
     mockCreateScreenVideoTrack.mockReturnValueOnce(picker.promise);
 
-    const pendingStart = callScreenshare('start');
+    const pendingStart = callStartScreenshare();
     await engine.release('end_call_cleanup');
     picker.resolve(track);
 
@@ -239,8 +246,8 @@ describe('web RTC screen-share lifecycle', () => {
     engine.eventsMap.set('onScreenshareStopped', stopped);
     mockCreateScreenVideoTrack.mockResolvedValueOnce(track);
 
-    await callScreenshare('start');
-    await callScreenshare('stop');
+    await callStartScreenshare();
+    await callStopScreenshare();
     await handlers['track-ended']();
 
     expect(screenClient.leave).toHaveBeenCalledTimes(1);
@@ -249,6 +256,28 @@ describe('web RTC screen-share lifecycle', () => {
     expect(stopped).toHaveBeenCalledTimes(1);
   });
 
+  it('does not let an older lifecycle clean up a newer screen share', async () => {
+    const first = createTrack();
+    const second = createTrack();
+    const stopped = jest.fn();
+    engine.eventsMap.set('onScreenshareStopped', stopped);
+    mockCreateScreenVideoTrack
+      .mockResolvedValueOnce(first.track)
+      .mockResolvedValueOnce(second.track);
+
+    await callStartScreenshare();
+    await callStopScreenshare();
+    await callStartScreenshare('session-2');
+    await first.handlers['track-ended']();
+
+    expect(engine.activeScreenshareLifecycle.video).toBe(second.track);
+    expect(engine.inScreenshare).toBe(true);
+    expect(screenClient.leave).toHaveBeenCalledTimes(1);
+    expect(second.track.stop).not.toHaveBeenCalled();
+    expect(second.track.close).not.toHaveBeenCalled();
+    expect(stopped).toHaveBeenCalledTimes(1);
+  });
+
   it('joins an existing cleanup when Stop is requested twice', async () => {
     const {track} = createTrack();
     const leave = deferred<void>();
@@ -257,9 +286,9 @@ describe('web RTC screen-share lifecycle', () => {
     mockCreateScreenVideoTrack.mockResolvedValueOnce(track);
     screenClient.leave.mockReturnValueOnce(leave.promise);
 
-    await callScreenshare('start');
-    const firstStop = callScreenshare('stop');
-    const secondStop = callScreenshare('stop');
+    await callStartScreenshare();
+    const firstStop = callStopScreenshare();
+    const secondStop = callStopScreenshare();
     leave.resolve(undefined);
     await Promise.all([firstStop, secondStop]);
 
@@ -278,8 +307,8 @@ describe('web RTC screen-share lifecycle', () => {
       throw new Error('track stop failed');
     });
 
-    await callScreenshare('start');
-    await expect(callScreenshare('stop')).resolves.toBeUndefined();
+    await callStartScreenshare();
+    await expect(callStopScreenshare()).resolves.toBeUndefined();
 
     expect(track.close).toHaveBeenCalledTimes(1);
     expect(screenClient.leave).toHaveBeenCalledTimes(1);
@@ -294,7 +323,7 @@ describe('web RTC screen-share lifecycle', () => {
     mockCreateScreenVideoTrack.mockResolvedValueOnce(track);
     screenClient.leave.mockRejectedValueOnce(new Error('leave failed'));
 
-    await callScreenshare('start');
+    await callStartScreenshare();
     await expect(handlers['track-ended']()).resolves.toBeUndefined();
 
     expect(screenClient.leave).toHaveBeenCalledTimes(1);
@@ -317,7 +346,7 @@ describe('web RTC screen-share lifecycle', () => {
     engine.eventsMap.set('onScreenshareStopped', stopped);
     mockCreateScreenVideoTrack.mockResolvedValueOnce(track);
 
-    await callScreenshare('start');
+    await callStartScreenshare();
     await engine.release('end_call_cleanup');
 
     const {logger} = require('../../../../src/logger/AppBuilderLogger');

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: "",
   CHAT_APP_NAME: "",
   CHAT_URL: "",
-  CLI_VERSION: "3.1.23",
-  CORE_VERSION: "4.1.23",
+  CLI_VERSION: "3.1.24-beta.2",
+  CORE_VERSION: "4.1.24-beta.2",
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/components/PinnedVideo.tsx

@@ -37,6 +37,8 @@ import {
   videoRoomGoToActiveSpeakerText,
 } from '../language/default-labels/videoCallScreenLabels';
 import {useFullScreen} from '..//utils/useFullScreen';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+import {getPinnedLayoutState} from './pinnedLayoutState';
 const {topPinned} = layoutProps;
 
 const PinnedVideo = ({renderData}) => {
@@ -50,12 +52,38 @@ const PinnedVideo = ({renderData}) => {
   const {width} = useWindowDimensions();
   const isDesktop = width > BREAKPOINTS.lg;
   const isSidePinnedlayout = topPinned === true ? false : isDesktop; // if either explicity set to false or auto evaluation
-  const [maxUid, ...minUids] = renderData;
+  const {maximizedUid, sidebarUids} = getPinnedLayoutState(
+    renderData,
+    pinnedUid,
+    secondaryPinnedUid,
+  );
+  const renderDataSnapshot = JSON.stringify(renderData);
+  const sidebarUidsSnapshot = JSON.stringify(sidebarUids);
   const activeSpeaker = useActiveSpeaker();
   const {dispatch} = useContext(DispatchContext);
   const {videoTileInViewPortState} = useVideoCall();
   const {getWhiteboardUid = () => 0} = useWhiteboard();
   const {defaultContent, customContent} = useContent();
+  useEffect(() => {
+    logger.log(
+      LogSource.Internals,
+      'LAYOUT',
+      '[PINNED_LAYOUT] pinned layout UIDs resolved',
+      {
+        renderData: JSON.parse(renderDataSnapshot),
+        pinnedUid: pinnedUid || null,
+        secondaryPinnedUid: secondaryPinnedUid || null,
+        maximizedUid,
+        sidebarUids: JSON.parse(sidebarUidsSnapshot),
+      },
+    );
+  }, [
+    renderDataSnapshot,
+    pinnedUid,
+    secondaryPinnedUid,
+    maximizedUid,
+    sidebarUidsSnapshot,
+  ]);
   useEffect(() => {
     if (activeSpeaker && !videoTileInViewPortState[activeSpeaker] && isOnTop) {
       dispatch({
@@ -85,21 +113,20 @@ const PinnedVideo = ({renderData}) => {
     }
   };
 
-  const isWhiteboard = customContent && customContent[pinnedUid || maxUid];
+  const isWhiteboard = customContent && customContent[maximizedUid];
   const isRemoteScreenshare =
-    (pinnedUid || maxUid) != screenUid &&
+    maximizedUid != screenUid &&
     defaultContent &&
-    defaultContent[pinnedUid || maxUid]?.video &&
-    defaultContent[pinnedUid || maxUid]?.type === 'screenshare';
+    defaultContent[maximizedUid]?.video &&
+    defaultContent[maximizedUid]?.type === 'screenshare';
 
   //fixed issue on expand/collapse for screenshare
   //screen will have the fullscreen functionality
   useEffect(() => {
-    const maximizedUid = pinnedUid || maxUid;
     if (getWhiteboardUid() != maximizedUid && collapse) {
       setCollapse(false);
     }
-  }, [isWhiteboard, collapse, pinnedUid, maxUid, getWhiteboardUid]);
+  }, [isWhiteboard, collapse, maximizedUid, getWhiteboardUid]);
 
   return (
     <View
@@ -129,9 +156,7 @@ const PinnedVideo = ({renderData}) => {
                     marginBottom: 8,
                   }
             }>
-            {secondaryPinnedUid &&
-            secondaryPinnedUid !== pinnedUid &&
-            secondaryPinnedUid !== maxUid ? (
+            {secondaryPinnedUid && sidebarUids.includes(secondaryPinnedUid) ? (
               <Pressable
                 disabled={true}
                 style={
@@ -158,10 +183,8 @@ const PinnedVideo = ({renderData}) => {
               <></>
             )}
             {/* Pinned Video Top View(Desktop minimized and Mobile native and Mobile web) / Side View(Desktop maximized)*/}
-            {minUids?.map((minUid, i) => {
+            {sidebarUids?.map(minUid => {
               if (minUid === secondaryPinnedUid) return null;
-              if (minUid === pinnedUid) return null;
-              if (minUid === maxUid) return null;
               //rendering minimized view
               return (
                 <Pressable
@@ -194,7 +217,7 @@ const PinnedVideo = ({renderData}) => {
                           marginRight: 8,
                         }
                   }
-                  key={'minVideo' + i}
+                  key={'minVideo' + minUid}
                   onPress={() => {}}>
                   <RenderComponent uid={minUid} />
                 </Pressable>
@@ -259,7 +282,7 @@ const PinnedVideo = ({renderData}) => {
           )}
         </>
       )}
-      {(pinnedUid || maxUid) && (
+      {maximizedUid && (
         <View
           style={
             isSidePinnedlayout
@@ -268,7 +291,7 @@ const PinnedVideo = ({renderData}) => {
                 : style.width80
               : style.flex8
           }>
-          <View style={style.flex1} key={'maxVideo' + (pinnedUid || maxUid)}>
+          <View style={style.flex1} key={'maxVideo' + maximizedUid}>
             {isSidePinnedlayout && (isWhiteboard || isRemoteScreenshare) ? (
               <IconButton
                 containerStyle={{
@@ -279,12 +302,9 @@ const PinnedVideo = ({renderData}) => {
                   elevation: 999,
                 }}
                 onPress={() => {
-                  if (
-                    defaultContent &&
-                    defaultContent[pinnedUid || maxUid]?.video
-                  ) {
-                    requestFullscreen(pinnedUid || maxUid);
-                  } else if (customContent[pinnedUid || maxUid]) {
+                  if (defaultContent && defaultContent[maximizedUid]?.video) {
+                    requestFullscreen(maximizedUid);
+                  } else if (customContent[maximizedUid]) {
                     setCollapse(!collapse);
                   }
                 }}
@@ -348,7 +368,7 @@ const PinnedVideo = ({renderData}) => {
               <></>
             )} */}
             {/** Render the maximized view */}
-            <RenderComponent uid={pinnedUid || maxUid} isMax={true} />
+            <RenderComponent uid={maximizedUid} isMax={true} />
           </View>
         </View>
       )}

package/template/src/components/__tests__/pinnedLayoutState.test.ts

@@ -0,0 +1,47 @@
+import {
+  canViewInLarge,
+  getPinnedLayoutState,
+  isUidMaximized,
+} from '../pinnedLayoutState';
+
+describe('pinned layout state', () => {
+  it('keeps every non-maximized UID visible when active-speaker ordering moves another UID to index zero', () => {
+    expect(getPinnedLayoutState([200, 101, 100, 201], 101)).toEqual({
+      maximizedUid: 101,
+      sidebarUids: [200, 100, 201],
+    });
+  });
+
+  it('keeps the secondary pin first without removing any other sidebar UID', () => {
+    expect(getPinnedLayoutState([200, 100, 101, 201], 101, 100)).toEqual({
+      maximizedUid: 101,
+      sidebarUids: [100, 200, 201],
+    });
+  });
+
+  it('falls back to the first render UID when there is no valid primary pin', () => {
+    expect(getPinnedLayoutState([200, 100, 101], 999)).toEqual({
+      maximizedUid: 200,
+      sidebarUids: [100, 101],
+    });
+  });
+
+  it('does not offer View in large for either pinned position', () => {
+    expect(canViewInLarge(101, 101, 100)).toBe(false);
+    expect(canViewInLarge(100, 101, 100)).toBe(false);
+    expect(canViewInLarge(200, 101, 100)).toBe(true);
+  });
+
+  it('does not offer View in large for the fallback maximized UID', () => {
+    expect(canViewInLarge(101, undefined, 100, 101)).toBe(false);
+    expect(canViewInLarge(100, undefined, 100, 101)).toBe(false);
+    expect(canViewInLarge(200, undefined, 100, 101)).toBe(true);
+  });
+
+  it('identifies explicit and fallback maximized UIDs for tile actions', () => {
+    expect(isUidMaximized(101, 101, 200)).toBe(true);
+    expect(isUidMaximized(200, 101, 200)).toBe(false);
+    expect(isUidMaximized(200, undefined, 200)).toBe(true);
+    expect(isUidMaximized(100, undefined, 200)).toBe(false);
+  });
+});

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -77,6 +77,7 @@ import {
   DEFAULT_ACTION_KEYS,
   UserActionMenuItemsConfig,
 } from '../../atoms/UserActionMenuPreset';
+import {canViewInLarge, isUidMaximized} from '../pinnedLayoutState';
 
 interface UserActionMenuOptionsOptionsProps {
   user: ContentInterface;
@@ -207,7 +208,14 @@ export default function UserActionMenuOptionsOptions(
       )
     ) {
       if (enablePinForMe) {
-        if (pinnedUid !== user.uid) {
+        if (
+          canViewInLarge(
+            user.uid,
+            pinnedUid,
+            secondaryPinnedUid,
+            activeUids?.[0],
+          )
+        ) {
           const viewInLargeKey = ActionMenuKeys.VIEW_IN_LARGE;
           const viewInLargeConfig = userActionMenuItems?.[viewInLargeKey] ?? {};
           const isPinned = pinnedUid === user.uid;
@@ -274,9 +282,14 @@ export default function UserActionMenuOptionsOptions(
           const pinToTopKey = ActionMenuKeys.PIN_TO_TOP;
           const pinToTopConfig = userActionMenuItems?.[pinToTopKey] ?? {};
           const isPinnedToTop = user.uid === secondaryPinnedUid;
+          const isMaximized = isUidMaximized(
+            user.uid,
+            pinnedUid,
+            activeUids?.[0],
+          );
           const isOnlyOneActive = activeUids?.length === 1;
 
-          if (!pinToTopConfig.hide) {
+          if (!pinToTopConfig.hide && !isMaximized) {
             items.push({
               key: pinToTopKey,
               disabled: pinToTopConfig.disabled ?? isOnlyOneActive,

package/template/src/components/pinnedLayoutState.ts

@@ -0,0 +1,43 @@
+import {UidType} from '../../agora-rn-uikit';
+
+export const getPinnedLayoutState = (
+  renderData: UidType[],
+  pinnedUid?: UidType,
+  secondaryPinnedUid?: UidType,
+) => {
+  const maximizedUid: UidType =
+    (pinnedUid && renderData.includes(pinnedUid) ? pinnedUid : renderData[0]) ||
+    0;
+  const sidebarUids = renderData.filter(uid => uid !== maximizedUid);
+
+  if (
+    secondaryPinnedUid &&
+    sidebarUids.includes(secondaryPinnedUid) &&
+    sidebarUids[0] !== secondaryPinnedUid
+  ) {
+    return {
+      maximizedUid,
+      sidebarUids: [
+        secondaryPinnedUid,
+        ...sidebarUids.filter(uid => uid !== secondaryPinnedUid),
+      ],
+    };
+  }
+
+  return {maximizedUid, sidebarUids};
+};
+
+export const isUidMaximized = (
+  uid: UidType,
+  pinnedUid?: UidType,
+  fallbackMaximizedUid?: UidType,
+) => uid === (pinnedUid || fallbackMaximizedUid);
+
+export const canViewInLarge = (
+  uid: UidType,
+  pinnedUid?: UidType,
+  secondaryPinnedUid?: UidType,
+  fallbackMaximizedUid?: UidType,
+) =>
+  !isUidMaximized(uid, pinnedUid, fallbackMaximizedUid) &&
+  uid !== secondaryPinnedUid;