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.
This commit is contained in:
Robin Townsend
parent
af4c1280f5
commit
c5eb9f0b99
1 changed files with 55 additions and 60 deletions
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue