Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-15 00:04:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #632 from robintown/freedom-screenshare

Browse Source 
Prevent screenshare feeds from collapsing when you're alone in freedom mode
This commit is contained in:
Robin 2022-10-18 11:58:53 -04:00 committed by GitHub
commit 50f7fedfa0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/video-grid/VideoGrid.tsx
View File

@ -111,7 +111,8 @@ const getPipGap = (gridAspectRatio: number): number =>
function getTilePositions( function getTilePositions(
tileCount: number, tileCount: number,
presenterTileCount: number, focusedTileCount: number,
hasPresenter: boolean,
gridWidth: number, gridWidth: number,
gridHeight: number, gridHeight: number,
pipXRatio: number, pipXRatio: number,
@ -119,7 +120,7 @@ function getTilePositions(
layout: Layout layout: Layout
): TilePosition[] { ): TilePosition[] {
if (layout === "freedom") { if (layout === "freedom") {
if (tileCount === 2 && presenterTileCount === 0) { if (tileCount === 2 && !hasPresenter) {
return getOneOnOneLayoutTilePositions( return getOneOnOneLayoutTilePositions(
gridWidth, gridWidth,
gridHeight, gridHeight,
@ -130,7 +131,7 @@ function getTilePositions(
return getFreedomLayoutTilePositions( return getFreedomLayoutTilePositions(
tileCount, tileCount,
presenterTileCount, focusedTileCount,
gridWidth, gridWidth,
gridHeight gridHeight
); );
@ -247,7 +248,7 @@ function getSpotlightLayoutTilePositions(
function getFreedomLayoutTilePositions( function getFreedomLayoutTilePositions(
tileCount: number, tileCount: number,
presenterTileCount: number, focusedTileCount: number,
gridWidth: number, gridWidth: number,
gridHeight: number gridHeight: number
): TilePosition[] { ): TilePosition[] {
@ -261,7 +262,7 @@ function getFreedomLayoutTilePositions(
const { layoutDirection, itemGridRatio } = getGridLayout( const { layoutDirection, itemGridRatio } = getGridLayout(
tileCount, tileCount,
presenterTileCount, focusedTileCount,
gridWidth, gridWidth,
gridHeight gridHeight
); );
@ -277,7 +278,7 @@ function getFreedomLayoutTilePositions(
itemGridHeight = gridHeight; itemGridHeight = gridHeight;
} }
const itemTileCount = tileCount - presenterTileCount; const itemTileCount = tileCount - focusedTileCount;
const { const {
columnCount: itemColumnCount, columnCount: itemColumnCount,
@ -295,65 +296,55 @@ function getFreedomLayoutTilePositions(
); );
const itemGridBounds = getSubGridBoundingBox(itemGridPositions); const itemGridBounds = getSubGridBoundingBox(itemGridPositions);
let presenterGridWidth; let focusedGridWidth: number;
let presenterGridHeight; let focusedGridHeight: number;
if (presenterTileCount === 0) { if (focusedTileCount === 0) {
presenterGridWidth = 0; focusedGridWidth = 0;
presenterGridHeight = 0; focusedGridHeight = 0;
} else if (layoutDirection === "vertical") { } else if (layoutDirection === "vertical") {
presenterGridWidth = gridWidth; focusedGridWidth = gridWidth;
presenterGridHeight = focusedGridHeight =
gridHeight - (itemGridBounds.height + (itemTileCount ? GAP * 2 : 0)); gridHeight - (itemGridBounds.height + (itemTileCount ? GAP * 2 : 0));
} else { } else {
presenterGridWidth = focusedGridWidth =
gridWidth - (itemGridBounds.width + (itemTileCount ? GAP * 2 : 0)); gridWidth - (itemGridBounds.width + (itemTileCount ? GAP * 2 : 0));
presenterGridHeight = gridHeight; focusedGridHeight = gridHeight;
} }
const { const {
columnCount: presenterColumnCount, columnCount: focusedColumnCount,
rowCount: presenterRowCount, rowCount: focusedRowCount,
tileAspectRatio: presenterTileAspectRatio, tileAspectRatio: focusedTileAspectRatio,
} = getSubGridLayout( } = getSubGridLayout(focusedTileCount, focusedGridWidth, focusedGridHeight);
presenterTileCount,
presenterGridWidth, const focusedGridPositions = getSubGridPositions(
presenterGridHeight focusedTileCount,
focusedColumnCount,
focusedRowCount,
focusedTileAspectRatio,
focusedGridWidth,
focusedGridHeight
); );
const presenterGridPositions = getSubGridPositions( const tilePositions = [...focusedGridPositions, ...itemGridPositions];
presenterTileCount,
presenterColumnCount,
presenterRowCount,
presenterTileAspectRatio,
presenterGridWidth,
presenterGridHeight
);
const tilePositions = [...presenterGridPositions, ...itemGridPositions]; centerTiles(focusedGridPositions, focusedGridWidth, focusedGridHeight, 0, 0);
centerTiles(
presenterGridPositions,
presenterGridWidth,
presenterGridHeight,
0,
0
);
if (layoutDirection === "vertical") { if (layoutDirection === "vertical") {
centerTiles( centerTiles(
itemGridPositions, itemGridPositions,
gridWidth, gridWidth,
gridHeight - presenterGridHeight, gridHeight - focusedGridHeight,
0, 0,
presenterGridHeight focusedGridHeight
); );
} else { } else {
centerTiles( centerTiles(
itemGridPositions, itemGridPositions,
gridWidth - presenterGridWidth, gridWidth - focusedGridWidth,
gridHeight, gridHeight,
presenterGridWidth, focusedGridWidth,
0 0
); );
} }
@ -418,14 +409,14 @@ function isMobileBreakpoint(gridWidth: number, gridHeight: number): boolean {
function getGridLayout( function getGridLayout(
tileCount: number, tileCount: number,
presenterTileCount: number, focusedTileCount: number,
gridWidth: number, gridWidth: number,
gridHeight: number gridHeight: number
): { itemGridRatio: number; layoutDirection: LayoutDirection } { ): { itemGridRatio: number; layoutDirection: LayoutDirection } {
let layoutDirection: LayoutDirection = "horizontal"; let layoutDirection: LayoutDirection = "horizontal";
let itemGridRatio = 1; let itemGridRatio = 1;
if (presenterTileCount === 0) { if (focusedTileCount === 0) {
return { itemGridRatio, layoutDirection }; return { itemGridRatio, layoutDirection };
} }
@ -663,29 +654,25 @@ function getSubGridPositions(
// Sets the 'order' property on tiles based on the layout param and // Sets the 'order' property on tiles based on the layout param and
// other properties of the tiles, eg. 'focused' and 'presenter' // other properties of the tiles, eg. 'focused' and 'presenter'
function reorderTiles(tiles: Tile[], layout: Layout) { 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 // 1:1 layout
tiles.forEach((tile) => (tile.order = tile.item.isLocal ? 0 : 1)); tiles.forEach((tile) => (tile.order = tile.item.isLocal ? 0 : 1));
} else { } else {
const focusedTiles: Tile[] = []; const focusedTiles: Tile[] = [];
const presenterTiles: Tile[] = [];
const otherTiles: Tile[] = []; const otherTiles: Tile[] = [];
const orderedTiles: Tile[] = new Array(tiles.length); const orderedTiles: Tile[] = new Array(tiles.length);
tiles.forEach((tile) => (orderedTiles[tile.order] = tile)); tiles.forEach((tile) => (orderedTiles[tile.order] = tile));
orderedTiles.forEach((tile) => orderedTiles.forEach((tile) =>
(tile.focused (tile.focused ? focusedTiles : otherTiles).push(tile)
? focusedTiles
: tile.presenter
? presenterTiles
: otherTiles
).push(tile)
); );
[...focusedTiles, ...presenterTiles, ...otherTiles].forEach( [...focusedTiles, ...otherTiles].forEach((tile, i) => (tile.order = i));
(tile, i) => (tile.order = i)
);
} }
} }
@ -759,11 +746,8 @@ export function VideoGrid({
} }
let focused: boolean; let focused: boolean;
let presenter = false;
if (layout === "spotlight") { if (layout === "spotlight") {
focused = item.focused; focused = item.focused;
presenter = item.presenter;
} else { } else {
focused = layout === lastLayoutRef.current ? tile.focused : false; focused = layout === lastLayoutRef.current ? tile.focused : false;
} }
@ -774,7 +758,7 @@ export function VideoGrid({
item, item,
remove, remove,
focused, focused,
presenter, presenter: item.presenter,
}); });
} }
@ -795,7 +779,7 @@ export function VideoGrid({
item, item,
remove: false, remove: false,
focused: layout === "spotlight" && item.focused, focused: layout === "spotlight" && item.focused,
presenter: layout === "spotlight" && item.presenter, presenter: item.presenter,
}; };
if (existingTile) { if (existingTile) {
@ -821,7 +805,7 @@ export function VideoGrid({
.map((tile) => ({ ...tile })); // clone before reordering .map((tile) => ({ ...tile })); // clone before reordering
reorderTiles(newTiles, layout); reorderTiles(newTiles, layout);
const presenterTileCount = newTiles.reduce( const focusedTileCount = newTiles.reduce(
(count, tile) => count + (tile.focused ? 1 : 0), (count, tile) => count + (tile.focused ? 1 : 0),
0 0
); );
@ -831,7 +815,8 @@ export function VideoGrid({
tiles: newTiles, tiles: newTiles,
tilePositions: getTilePositions( tilePositions: getTilePositions(
newTiles.length, newTiles.length,
presenterTileCount, focusedTileCount,
newTiles.some((t) => t.presenter),
gridBounds.width, gridBounds.width,
gridBounds.height, gridBounds.height,
pipXRatio, pipXRatio,
@ -843,7 +828,7 @@ export function VideoGrid({
}, 250); }, 250);
} }
const presenterTileCount = newTiles.reduce( const focusedTileCount = newTiles.reduce(
(count, tile) => count + (tile.focused ? 1 : 0), (count, tile) => count + (tile.focused ? 1 : 0),
0 0
); );
@ -855,7 +840,8 @@ export function VideoGrid({
tiles: newTiles, tiles: newTiles,
tilePositions: getTilePositions( tilePositions: getTilePositions(
newTiles.length, newTiles.length,
presenterTileCount, focusedTileCount,
newTiles.some((t) => t.presenter),
gridBounds.width, gridBounds.width,
gridBounds.height, gridBounds.height,
pipXRatio, pipXRatio,
@ -959,7 +945,7 @@ export function VideoGrid({
const item = tile.item; const item = tile.item;
setTileState(({ tiles, ...state }) => { setTileState(({ tiles, ...state }) => {
let presenterTileCount = 0; let focusedTileCount = 0;
const newTiles = tiles.map((tile) => { const newTiles = tiles.map((tile) => {
const newTile = { ...tile }; // clone before reordering const newTile = { ...tile }; // clone before reordering
@ -967,7 +953,7 @@ export function VideoGrid({
newTile.focused = !tile.focused; newTile.focused = !tile.focused;
} }
if (newTile.focused) { if (newTile.focused) {
presenterTileCount++; focusedTileCount++;
} }
return newTile; return newTile;
@ -980,7 +966,8 @@ export function VideoGrid({
tiles: newTiles, tiles: newTiles,
tilePositions: getTilePositions( tilePositions: getTilePositions(
newTiles.length, newTiles.length,
presenterTileCount, focusedTileCount,
newTiles.some((t) => t.presenter),
gridBounds.width, gridBounds.width,
gridBounds.height, gridBounds.height,
pipXRatio, pipXRatio,
@ -1012,7 +999,7 @@ export function VideoGrid({
let newTiles = tiles; 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 // We're in 1:1 mode, so only the local tile should be draggable
if (!dragTile.item.isLocal) return; if (!dragTile.item.isLocal) return;