xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix order of tiles in 1:1 layout

Browse source
This commit is contained in:
Robin Townsend 2022-05-24 16:54:33 -04:00
parent 426e1a433b
commit 266861bdad
1 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/video-grid/VideoGrid.jsx
View file

@ -603,26 +603,31 @@ function getSubGridPositions(
return newTilePositions; return newTilePositions;
} }
function reorderTiles(tiles) { function reorderTiles(tiles, layout) {
const focusedTiles = []; if (layout === "freedom" && tiles.length === 2) {
const presenterTiles = []; // 1:1 layout
const otherTiles = []; tiles.forEach((tile) => tile.order = tile.item.isLocal ? 0 : 1);
} else {
const focusedTiles = [];
const presenterTiles = [];
const otherTiles = [];
const orderedTiles = new Array(tiles.length); const orderedTiles = 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 ? focusedTiles
: tile.presenter : tile.presenter
? presenterTiles ? presenterTiles
: otherTiles : otherTiles
).push(tile) ).push(tile)
); );
[...focusedTiles, ...presenterTiles, ...otherTiles].forEach( [...focusedTiles, ...presenterTiles, ...otherTiles].forEach(
(tile, i) => (tile.order = i) (tile, i) => (tile.order = i)
); );
}
} }
export function VideoGrid({ items, layout, disableAnimations, children }) { export function VideoGrid({ items, layout, disableAnimations, children }) {
@ -707,7 +712,7 @@ export function VideoGrid({ items, layout, disableAnimations, children }) {
} }
} }
reorderTiles(newTiles); reorderTiles(newTiles, layout);
if (removedTileKeys.size > 0) { if (removedTileKeys.size > 0) {
setTimeout(() => { setTimeout(() => {
@ -719,7 +724,7 @@ export function VideoGrid({ items, layout, disableAnimations, children }) {
const newTiles = tiles const newTiles = tiles
.filter((tile) => !removedTileKeys.has(tile.key)) .filter((tile) => !removedTileKeys.has(tile.key))
.map((tile) => ({ ...tile })); // clone before reordering .map((tile) => ({ ...tile })); // clone before reordering
reorderTiles(newTiles); reorderTiles(newTiles, layout);
const presenterTileCount = newTiles.reduce( const presenterTileCount = newTiles.reduce(
(count, tile) => count + (tile.focused ? 1 : 0), (count, tile) => count + (tile.focused ? 1 : 0),
@ -873,7 +878,7 @@ export function VideoGrid({ items, layout, disableAnimations, children }) {
return newTile; return newTile;
}); });
reorderTiles(newTiles); reorderTiles(newTiles, layout);
return { return {
...state, ...state,
@ -974,7 +979,7 @@ export function VideoGrid({ items, layout, disableAnimations, children }) {
return { ...tile, order, focused }; return { ...tile, order, focused };
}); });
reorderTiles(newTiles); reorderTiles(newTiles, layout);
setTileState((state) => ({ ...state, tiles: newTiles })); setTileState((state) => ({ ...state, tiles: newTiles }));
} }