From c5eb9f0b9951d2b150f9bc32c3f9edb560af30f8 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Tue, 18 Oct 2022 00:30:37 -0400 Subject: [PATCH] Prevent screenshare feeds from collapsing when you're alone in freedom mode The code was previously confusing focused and presenter tiles quite a bit, and also had a couple different spots that would mistakenly engage 1:1 layout behavior when you're alone with your own screensharing feed. --- src/video-grid/VideoGrid.tsx | 115 +++++++++++++++++------------------ 1 file changed, 55 insertions(+), 60 deletions(-) diff --git a/src/video-grid/VideoGrid.tsx b/src/video-grid/VideoGrid.tsx index dc42b78..a428738 100644 --- a/src/video-grid/VideoGrid.tsx +++ b/src/video-grid/VideoGrid.tsx @@ -111,7 +111,8 @@ const getPipGap = (gridAspectRatio: number): number => function getTilePositions( tileCount: number, - presenterTileCount: number, + focusedTileCount: number, + hasPresenter: boolean, gridWidth: number, gridHeight: number, pipXRatio: number, @@ -119,7 +120,7 @@ function getTilePositions( layout: Layout ): TilePosition[] { if (layout === "freedom") { - if (tileCount === 2 && presenterTileCount === 0) { + if (tileCount === 2 && !hasPresenter) { return getOneOnOneLayoutTilePositions( gridWidth, gridHeight, @@ -130,7 +131,7 @@ function getTilePositions( return getFreedomLayoutTilePositions( tileCount, - presenterTileCount, + focusedTileCount, gridWidth, gridHeight ); @@ -247,7 +248,7 @@ function getSpotlightLayoutTilePositions( function getFreedomLayoutTilePositions( tileCount: number, - presenterTileCount: number, + focusedTileCount: number, gridWidth: number, gridHeight: number ): TilePosition[] { @@ -261,7 +262,7 @@ function getFreedomLayoutTilePositions( const { layoutDirection, itemGridRatio } = getGridLayout( tileCount, - presenterTileCount, + focusedTileCount, gridWidth, gridHeight ); @@ -277,7 +278,7 @@ function getFreedomLayoutTilePositions( itemGridHeight = gridHeight; } - const itemTileCount = tileCount - presenterTileCount; + const itemTileCount = tileCount - focusedTileCount; const { columnCount: itemColumnCount, @@ -295,47 +296,47 @@ function getFreedomLayoutTilePositions( ); const itemGridBounds = getSubGridBoundingBox(itemGridPositions); - let presenterGridWidth; - let presenterGridHeight; + let focusedGridWidth: number; + let focusedGridHeight: number; - if (presenterTileCount === 0) { - presenterGridWidth = 0; - presenterGridHeight = 0; + if (focusedTileCount === 0) { + focusedGridWidth = 0; + focusedGridHeight = 0; } else if (layoutDirection === "vertical") { - presenterGridWidth = gridWidth; - presenterGridHeight = + focusedGridWidth = gridWidth; + focusedGridHeight = gridHeight - (itemGridBounds.height + (itemTileCount ? GAP * 2 : 0)); } else { - presenterGridWidth = + focusedGridWidth = gridWidth - (itemGridBounds.width + (itemTileCount ? GAP * 2 : 0)); - presenterGridHeight = gridHeight; + focusedGridHeight = gridHeight; } const { - columnCount: presenterColumnCount, - rowCount: presenterRowCount, - tileAspectRatio: presenterTileAspectRatio, + columnCount: focusedColumnCount, + rowCount: focusedRowCount, + tileAspectRatio: focusedTileAspectRatio, } = getSubGridLayout( - presenterTileCount, - presenterGridWidth, - presenterGridHeight + focusedTileCount, + focusedGridWidth, + focusedGridHeight ); - const presenterGridPositions = getSubGridPositions( - presenterTileCount, - presenterColumnCount, - presenterRowCount, - presenterTileAspectRatio, - presenterGridWidth, - presenterGridHeight + const focusedGridPositions = getSubGridPositions( + focusedTileCount, + focusedColumnCount, + focusedRowCount, + focusedTileAspectRatio, + focusedGridWidth, + focusedGridHeight ); - const tilePositions = [...presenterGridPositions, ...itemGridPositions]; + const tilePositions = [...focusedGridPositions, ...itemGridPositions]; centerTiles( - presenterGridPositions, - presenterGridWidth, - presenterGridHeight, + focusedGridPositions, + focusedGridWidth, + focusedGridHeight, 0, 0 ); @@ -344,16 +345,16 @@ function getFreedomLayoutTilePositions( centerTiles( itemGridPositions, gridWidth, - gridHeight - presenterGridHeight, + gridHeight - focusedGridHeight, 0, - presenterGridHeight + focusedGridHeight ); } else { centerTiles( itemGridPositions, - gridWidth - presenterGridWidth, + gridWidth - focusedGridWidth, gridHeight, - presenterGridWidth, + focusedGridWidth, 0 ); } @@ -418,14 +419,14 @@ function isMobileBreakpoint(gridWidth: number, gridHeight: number): boolean { function getGridLayout( tileCount: number, - presenterTileCount: number, + focusedTileCount: number, gridWidth: number, gridHeight: number ): { itemGridRatio: number; layoutDirection: LayoutDirection } { let layoutDirection: LayoutDirection = "horizontal"; let itemGridRatio = 1; - if (presenterTileCount === 0) { + if (focusedTileCount === 0) { return { itemGridRatio, layoutDirection }; } @@ -663,27 +664,21 @@ function getSubGridPositions( // Sets the 'order' property on tiles based on the layout param and // other properties of the tiles, eg. 'focused' and 'presenter' function reorderTiles(tiles: Tile[], layout: Layout) { - if (layout === "freedom" && tiles.length === 2) { + if (layout === "freedom" && tiles.length === 2 && !tiles.some(t => t.presenter)) { // 1:1 layout tiles.forEach((tile) => (tile.order = tile.item.isLocal ? 0 : 1)); } else { const focusedTiles: Tile[] = []; - const presenterTiles: Tile[] = []; const otherTiles: Tile[] = []; const orderedTiles: Tile[] = new Array(tiles.length); tiles.forEach((tile) => (orderedTiles[tile.order] = tile)); orderedTiles.forEach((tile) => - (tile.focused - ? focusedTiles - : tile.presenter - ? presenterTiles - : otherTiles - ).push(tile) + (tile.focused ? focusedTiles : otherTiles).push(tile) ); - [...focusedTiles, ...presenterTiles, ...otherTiles].forEach( + [...focusedTiles, ...otherTiles].forEach( (tile, i) => (tile.order = i) ); } @@ -759,11 +754,8 @@ export function VideoGrid({ } let focused: boolean; - let presenter = false; - if (layout === "spotlight") { focused = item.focused; - presenter = item.presenter; } else { focused = layout === lastLayoutRef.current ? tile.focused : false; } @@ -774,7 +766,7 @@ export function VideoGrid({ item, remove, focused, - presenter, + presenter: item.presenter, }); } @@ -795,7 +787,7 @@ export function VideoGrid({ item, remove: false, focused: layout === "spotlight" && item.focused, - presenter: layout === "spotlight" && item.presenter, + presenter: item.presenter, }; if (existingTile) { @@ -821,7 +813,7 @@ export function VideoGrid({ .map((tile) => ({ ...tile })); // clone before reordering reorderTiles(newTiles, layout); - const presenterTileCount = newTiles.reduce( + const focusedTileCount = newTiles.reduce( (count, tile) => count + (tile.focused ? 1 : 0), 0 ); @@ -831,7 +823,8 @@ export function VideoGrid({ tiles: newTiles, tilePositions: getTilePositions( newTiles.length, - presenterTileCount, + focusedTileCount, + newTiles.some(t => t.presenter), gridBounds.width, gridBounds.height, pipXRatio, @@ -843,7 +836,7 @@ export function VideoGrid({ }, 250); } - const presenterTileCount = newTiles.reduce( + const focusedTileCount = newTiles.reduce( (count, tile) => count + (tile.focused ? 1 : 0), 0 ); @@ -855,7 +848,8 @@ export function VideoGrid({ tiles: newTiles, tilePositions: getTilePositions( newTiles.length, - presenterTileCount, + focusedTileCount, + newTiles.some(t => t.presenter), gridBounds.width, gridBounds.height, pipXRatio, @@ -959,7 +953,7 @@ export function VideoGrid({ const item = tile.item; setTileState(({ tiles, ...state }) => { - let presenterTileCount = 0; + let focusedTileCount = 0; const newTiles = tiles.map((tile) => { const newTile = { ...tile }; // clone before reordering @@ -967,7 +961,7 @@ export function VideoGrid({ newTile.focused = !tile.focused; } if (newTile.focused) { - presenterTileCount++; + focusedTileCount++; } return newTile; @@ -980,7 +974,8 @@ export function VideoGrid({ tiles: newTiles, tilePositions: getTilePositions( newTiles.length, - presenterTileCount, + focusedTileCount, + newTiles.some(t => t.presenter), gridBounds.width, gridBounds.height, pipXRatio, @@ -1012,7 +1007,7 @@ export function VideoGrid({ let newTiles = tiles; - if (tiles.length === 2) { + if (tiles.length === 2 && !tiles.some(t => t.presenter)) { // We're in 1:1 mode, so only the local tile should be draggable if (!dragTile.item.isLocal) return;