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

package/package.json

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

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: "",
   CHAT_APP_NAME: "",
   CHAT_URL: "",
-  CLI_VERSION: "3.1.24-beta.1",
-  CORE_VERSION: "4.1.24-beta.1",
+  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;

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

@@ -247,10 +247,12 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
             uid={user.uid}
             hasLeadingIcon={
               currentLayout === DefaultLayouts[1].name &&
+              !isMax &&
               user.uid === secondaryPinnedUid
             }
           />
           {currentLayout === DefaultLayouts[1].name &&
+          !isMax &&
           user.uid === secondaryPinnedUid ? (
             <View
               style={{