Rename flag and fix screenshare case

frontend/src/utils/helpers/getLayoutBoxes/getLayoutBoxes.ts

@@ -26,15 +26,22 @@ const getLayoutBoxes = ({
   if (!wrapRef.current) {
     return {};
   }
-  const fixBigRatio = layoutProps.pinnedSubscriberCount > 1;
+  // For multiple pinned participants with no screenshare we make all large tiles landscape
+  const fixLargeTilesLandscape =
+    layoutProps.pinnedSubscriberCount > 1 && !layoutProps.sessionHasScreenshare;
+
   // Boxes are returned at the same index as the layout Element passed in
   // See: https://github.com/aullman/opentok-layout-js/?tab=readme-ov-file#usage
   // So for us:
   // index 0 - publisher box
   // last index n - hidden tile participant if present
   // last index n after popping hidden tile - local screenshare box
   // remaining indices between 1 and n after popping screenshare - subscriber boxes in display order
-  const boxes = getLayout(wrapDimensions, getLayoutElementArray(layoutProps), fixBigRatio);
+  const boxes = getLayout(
+    wrapDimensions,
+    getLayoutElementArray(layoutProps),
+    fixLargeTilesLandscape
+  );
   const publisherBox = boxes.shift();
   const hiddenParticipantsBox = layoutProps.hiddenSubscribers.length ? boxes.pop() : undefined;
   const localScreenshareBox = layoutProps.isSharingScreen ? boxes.pop() : undefined;

frontend/src/utils/layoutManager.spec.ts

@@ -30,7 +30,7 @@ describe('LayoutManager', () => {
     );
   });
 
-  it('should set bigMaxRatio to 9 / 16 if fixBigRatio flag is true', () => {
+  it('should set bigMaxRatio to 9 / 16 if fixLargeTilesLandscape flag is true', () => {
     layoutManager.getLayout({ width: 100, height: 150 }, [], true);
     expect(mockConstructor).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -39,7 +39,7 @@ describe('LayoutManager', () => {
     );
   });
 
-  it('should set bigMaxRatio to 3 / 2 if fixBigRatio flag is false', () => {
+  it('should set bigMaxRatio to 3 / 2 if fixLargeTilesLandscape flag is false', () => {
     layoutManager.getLayout({ width: 100, height: 150 }, [], false);
     expect(mockConstructor).toHaveBeenCalledWith(
       expect.objectContaining({

frontend/src/utils/layoutManager.ts

@@ -15,7 +15,10 @@ export type MaybeElement = {
 class LayoutManager {
   manager?: LayoutContainer;
 
-  init(containerDimensions: { height: number; width: number }, fixBigRatio: boolean = false) {
+  init(
+    containerDimensions: { height: number; width: number },
+    fixLargeTilesLandscape: boolean = false
+  ) {
     // Layout options see: https://github.com/aullman/opentok-layout-js?tab=readme-ov-file#usage
     this.manager = OpenTokLayoutManager({
       fixedRatio: false,
@@ -33,7 +36,7 @@ class LayoutManager {
       smallMaxHeight: Infinity,
       bigMaxWidth: Infinity,
       bigMaxHeight: Infinity,
-      bigMaxRatio: fixBigRatio ? 9 / 16 : 3 / 2,
+      bigMaxRatio: fixLargeTilesLandscape ? 9 / 16 : 3 / 2,
       bigMinRatio: 9 / 16,
       bigFirst: true,
       containerWidth: containerDimensions.width,
@@ -43,9 +46,9 @@ class LayoutManager {
   getLayout(
     containerDimensions: { height: number; width: number },
     boxes: Element[],
-    fixBigRatio: boolean
+    fixLargeTilesLandscape: boolean
   ): Box[] {
-    this.init(containerDimensions, fixBigRatio);
+    this.init(containerDimensions, fixLargeTilesLandscape);
     // Currently the layout manager doesn't support updating dimensions on the fly so we must re-create the manager every time
     // https://github.com/aullman/opentok-layout-js/issues/141
     return this.manager?.getLayout(boxes)?.boxes ?? [];