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

Naive tile position animations

Browse Source
This commit is contained in:
Robert Long 2021-08-13 12:27:00 -07:00
parent b9ae002c5f
commit 6e7cc62c14
2 changed files with 214 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
src/GridDemo.jsx
View File

@ -9,14 +9,8 @@ export function GridDemo() {
const tileKey = useRef(0); const tileKey = useRef(0);
const [stream, setStream] = useState(); const [stream, setStream] = useState();
const [tiles, setTiles] = useState([]); const [tiles, setTiles] = useState([]);
const [tileStyles, setTileStyles] = useState({}); const tilePositionsRef = useRef([]);
const draggingTileRef = useRef(null);
const [springs, api] = useSprings(tiles.length, (index) => ({
from: { x: 0, y: 0, zIndex: 0, shadow: 1, scale: 1 },
config: {
tension: 250,
},
}));
const startWebcam = useCallback(async () => { const startWebcam = useCallback(async () => {
const stream = await navigator.mediaDevices.getUserMedia({ video: true }); const stream = await navigator.mediaDevices.getUserMedia({ video: true });
@ -42,113 +36,234 @@ export function GridDemo() {
const [gridRef, gridBounds] = useMeasure(); const [gridRef, gridBounds] = useMeasure();
useEffect(() => { // useEffect(() => {
const newTileStyles = {}; // const newTilePositions = [];
const tileCount = tiles.length; // const tileCount = tiles.length;
const { width: gridWidth, height: gridHeight } = gridBounds; // const { width: gridWidth, height: gridHeight } = gridBounds;
const gap = 8; // const gap = 8;
if (tileCount > 0) { // if (tileCount > 0) {
const aspectRatio = gridWidth / gridHeight; // const aspectRatio = gridWidth / gridHeight;
let columnCount, rowCount; // let columnCount, rowCount;
if (aspectRatio < 1) { // if (aspectRatio < 1) {
if (tileCount <= 4) { // if (tileCount <= 4) {
columnCount = 1; // columnCount = 1;
rowCount = tileCount; // rowCount = tileCount;
} else if (tileCount <= 12) { // } else if (tileCount <= 12) {
columnCount = 2; // columnCount = 2;
rowCount = Math.ceil(tileCount / 2); // rowCount = Math.ceil(tileCount / 2);
} // }
} else { // } else {
if (tileCount === 1) { // if (tileCount === 1) {
columnCount = 1; // columnCount = 1;
rowCount = 1; // rowCount = 1;
} else if (tileCount === 2) { // } else if (tileCount === 2) {
columnCount = 2; // columnCount = 2;
rowCount = 1; // rowCount = 1;
} else if (tileCount <= 4) { // } else if (tileCount <= 4) {
columnCount = 2; // columnCount = 2;
rowCount = 2; // rowCount = 2;
} else if (tileCount <= 6) { // } else if (tileCount <= 6) {
columnCount = 3; // columnCount = 3;
rowCount = 2; // rowCount = 2;
} else if (tileCount <= 8) { // } else if (tileCount <= 8) {
columnCount = 4; // columnCount = 4;
rowCount = 2; // rowCount = 2;
} else if (tileCount <= 10) { // } else if (tileCount <= 10) {
columnCount = 5; // columnCount = 5;
rowCount = 2; // rowCount = 2;
} else if (tileCount <= 12) { // } else if (tileCount <= 12) {
columnCount = 4; // columnCount = 4;
rowCount = 3; // rowCount = 3;
} // }
} // }
let tileHeight = Math.round( // let tileHeight = Math.round(
(gridHeight - gap * (rowCount + 1)) / rowCount // (gridHeight - gap * (rowCount + 1)) / rowCount
); // );
let tileWidth = Math.round( // let tileWidth = Math.round(
(gridWidth - gap * (columnCount + 1)) / columnCount // (gridWidth - gap * (columnCount + 1)) / columnCount
); // );
const tileAspectRatio = tileWidth / tileHeight; // const tileAspectRatio = tileWidth / tileHeight;
if (tileAspectRatio > 16 / 9) { // if (tileAspectRatio > 16 / 9) {
tileWidth = (16 * tileHeight) / 9; // tileWidth = (16 * tileHeight) / 9;
} // }
for (let i = 0; i < tiles.length; i++) { // for (let i = 0; i < tiles.length; i++) {
const tile = tiles[i]; // const verticalIndex = Math.floor(i / columnCount);
// const top = verticalIndex * tileHeight + (verticalIndex + 1) * gap;
const verticalIndex = Math.floor(i / columnCount); // let rowItemCount;
const top = verticalIndex * tileHeight + (verticalIndex + 1) * gap;
let rowItemCount; // if (verticalIndex + 1 === rowCount && tileCount % rowCount !== 0) {
// rowItemCount = Math.floor(tileCount / rowCount);
// } else {
// rowItemCount = Math.ceil(tileCount / rowCount);
// }
if (verticalIndex + 1 === rowCount && tileCount % rowCount !== 0) { // const horizontalIndex = i % columnCount;
rowItemCount = Math.floor(tileCount / rowCount); // const totalRowGapWidth = (rowItemCount + 1) * gap;
// const totalRowTileWidth = rowItemCount * tileWidth;
// const rowLeftMargin = Math.round(
// (gridWidth - (totalRowTileWidth + totalRowGapWidth)) / 2
// );
// const left =
// tileWidth * horizontalIndex +
// rowLeftMargin +
// (horizontalIndex + 1) * gap;
// newTilePositions.push({
// width: tileWidth,
// height: tileHeight,
// x: left,
// y: top,
// });
// }
// }
// tilePositionsRef.current = newTilePositions;
// console.log("update tile positions", newTilePositions);
// }, [gridBounds, tiles]);
const animate = useCallback(
(index) => {
const newTilePositions = [];
const tileCount = tiles.length;
const { width: gridWidth, height: gridHeight } = gridBounds;
const gap = 8;
if (tileCount > 0) {
const aspectRatio = gridWidth / gridHeight;
let columnCount, rowCount;
if (aspectRatio < 1) {
if (tileCount <= 4) {
columnCount = 1;
rowCount = tileCount;
} else if (tileCount <= 12) {
columnCount = 2;
rowCount = Math.ceil(tileCount / 2);
}
} else { } else {
rowItemCount = Math.ceil(tileCount / rowCount); if (tileCount === 1) {
columnCount = 1;
rowCount = 1;
} else if (tileCount === 2) {
columnCount = 2;
rowCount = 1;
} else if (tileCount <= 4) {
columnCount = 2;
rowCount = 2;
} else if (tileCount <= 6) {
columnCount = 3;
rowCount = 2;
} else if (tileCount <= 8) {
columnCount = 4;
rowCount = 2;
} else if (tileCount <= 10) {
columnCount = 5;
rowCount = 2;
} else if (tileCount <= 12) {
columnCount = 4;
rowCount = 3;
}
} }
const horizontalIndex = i % columnCount; let tileHeight = Math.round(
const totalRowGapWidth = (rowItemCount + 1) * gap; (gridHeight - gap * (rowCount + 1)) / rowCount
const totalRowTileWidth = rowItemCount * tileWidth; );
const rowLeftMargin = Math.round( let tileWidth = Math.round(
(gridWidth - (totalRowTileWidth + totalRowGapWidth)) / 2 (gridWidth - gap * (columnCount + 1)) / columnCount
); );
const left =
tileWidth * horizontalIndex +
rowLeftMargin +
(horizontalIndex + 1) * gap;
newTileStyles[tile.key] = { const tileAspectRatio = tileWidth / tileHeight;
width: tileWidth,
height: tileHeight, if (tileAspectRatio > 16 / 9) {
transform: `translate(${left}px, ${top}px)`, tileWidth = (16 * tileHeight) / 9;
}
for (let i = 0; i < tiles.length; i++) {
const verticalIndex = Math.floor(i / columnCount);
const top = verticalIndex * tileHeight + (verticalIndex + 1) * gap;
let rowItemCount;
if (verticalIndex + 1 === rowCount && tileCount % rowCount !== 0) {
rowItemCount = Math.floor(tileCount / rowCount);
} else {
rowItemCount = Math.ceil(tileCount / rowCount);
}
const horizontalIndex = i % columnCount;
const totalRowGapWidth = (rowItemCount + 1) * gap;
const totalRowTileWidth = rowItemCount * tileWidth;
const rowLeftMargin = Math.round(
(gridWidth - (totalRowTileWidth + totalRowGapWidth)) / 2
);
const left =
tileWidth * horizontalIndex +
rowLeftMargin +
(horizontalIndex + 1) * gap;
newTilePositions.push({
width: tileWidth,
height: tileHeight,
x: left,
y: top,
});
}
}
tilePositionsRef.current = newTilePositions;
const tilePosition = tilePositionsRef.current[index];
const draggingTile = draggingTileRef.current;
const dragging =
draggingTileRef.current && index === draggingTileRef.current.index;
if (dragging) {
return {
width: tilePosition.width,
height: tilePosition.height,
x: tilePosition.x + draggingTile.x,
y: tilePosition.y + draggingTile.y,
scale: 1.1,
zIndex: 1,
shadow: 15,
immediate: (key) => key === "zIndex" || key === "x" || key === "y",
};
} else {
return {
...tilePosition,
scale: 1,
zIndex: 0,
shadow: 1,
immediate: false,
}; };
} }
},
[tiles, gridBounds]
);
const [springs, api] = useSprings(tiles.length, animate, [tiles, gridBounds]);
const bind = useDrag(({ args: [index], active, movement: [x, y] }) => {
if (active) {
draggingTileRef.current = {
index,
x,
y,
};
} else {
draggingTileRef.current = null;
} }
setTileStyles(newTileStyles); api.start(animate);
}, [gridBounds, tiles]);
const bind = useDrag(({ args: [index], down, movement: [x, y] }) => {
api.start((springIndex) => {
const dragging = springIndex === index && down;
return {
x: dragging ? x : 0,
y: dragging ? y : 0,
scale: dragging ? 1.1 : 1,
zIndex: dragging ? 1 : 0,
shadow: dragging ? 15 : 1,
immediate: dragging
? (key) => key === "zIndex" || key === "x" || key === "y"
: false,
};
});
}); });
return ( return (
@ -159,20 +274,14 @@ export function GridDemo() {
{stream && <button onClick={removeTile}>Remove Tile</button>} {stream && <button onClick={removeTile}>Remove Tile</button>}
</div> </div>
<div className={styles.grid} ref={gridRef}> <div className={styles.grid} ref={gridRef}>
{springs.map(({ shadow, ...springStyles }, i) => { {springs.map((style, i) => {
const tile = tiles[i]; const tile = tiles[i];
return ( return (
<ParticipantTile <ParticipantTile
{...bind(i)} {...bind(i)}
key={tile.key} key={tile.key}
style={{ style={style}
...tileStyles[tile.key],
...springStyles,
boxShadow: shadow.to(
(s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
),
}}
{...tile} {...tile}
/> />
); );

2
src/GridDemo.module.css
View File

@ -17,7 +17,7 @@
.participantTile { .participantTile {
position: absolute; position: absolute;
will-change: transform, width, height, opacity; will-change: transform, width, height, opacity, box-shadow;
border-radius: 24px; border-radius: 24px;
overflow: hidden; overflow: hidden;
} }