352 lines
9 KiB
JavaScript
352 lines
9 KiB
JavaScript
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
import { useDrag } from "react-use-gesture";
|
|
import { useSprings, animated, useSpring } from "@react-spring/web";
|
|
import styles from "./GridDemo.module.css";
|
|
import useMeasure from "react-use-measure";
|
|
|
|
function isInside([x, y], dragTile, targetTile) {
|
|
const cursorX = dragTile.x + x;
|
|
const cursorY = dragTile.y + y;
|
|
|
|
const left = targetTile.x;
|
|
const top = targetTile.y;
|
|
const bottom = targetTile.y + targetTile.height;
|
|
const right = targetTile.x + targetTile.width;
|
|
|
|
if (cursorX < left || cursorX > right || cursorY < top || cursorY > bottom) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
export function GridDemo() {
|
|
const tileKey = useRef(0);
|
|
const [stream, setStream] = useState();
|
|
const [{ tiles, tilePositions }, setTileState] = useState({
|
|
tiles: [],
|
|
tilePositions: [],
|
|
});
|
|
const draggingTileRef = useRef(null);
|
|
|
|
// Contains tile indices
|
|
// Tiles are displayed in the order that they appear
|
|
const tileOrderRef = useRef([]);
|
|
|
|
const [gridRef, gridBounds] = useMeasure();
|
|
|
|
const getTilePositions = useCallback((tiles, gridBounds) => {
|
|
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 {
|
|
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;
|
|
}
|
|
}
|
|
|
|
let tileHeight = Math.round(
|
|
(gridHeight - gap * (rowCount + 1)) / rowCount
|
|
);
|
|
let tileWidth = Math.round(
|
|
(gridWidth - gap * (columnCount + 1)) / columnCount
|
|
);
|
|
|
|
const tileAspectRatio = tileWidth / tileHeight;
|
|
|
|
if (tileAspectRatio > 16 / 9) {
|
|
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,
|
|
});
|
|
}
|
|
}
|
|
|
|
return newTilePositions;
|
|
}, []);
|
|
|
|
const startWebcam = useCallback(async () => {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
setStream(stream);
|
|
tileOrderRef.current.push(tileOrderRef.current.length);
|
|
setTileState(() => {
|
|
const tiles = [{ stream, key: tileKey.current++, remove: false }];
|
|
const tilePositions = getTilePositions(tiles, gridBounds);
|
|
return { tiles, tilePositions };
|
|
});
|
|
}, [gridBounds]);
|
|
|
|
const addTile = useCallback(() => {
|
|
const newStream = stream.clone();
|
|
|
|
tileOrderRef.current.push(tileOrderRef.current.length);
|
|
|
|
setTileState(({ tiles }) => {
|
|
const newTiles = [
|
|
...tiles,
|
|
{ stream: newStream, key: tileKey.current++, remove: false },
|
|
];
|
|
const tilePositions = getTilePositions(newTiles, gridBounds);
|
|
return { tiles: newTiles, tilePositions };
|
|
});
|
|
}, [stream, gridBounds]);
|
|
|
|
const removeTile = useCallback(
|
|
(tile) => {
|
|
const tileKey = tile.key;
|
|
|
|
setTileState(({ tiles, tilePositions }) => {
|
|
return {
|
|
tiles: tiles.map((tile) => ({
|
|
...tile,
|
|
remove: tile.key === tileKey,
|
|
})),
|
|
tilePositions,
|
|
};
|
|
});
|
|
|
|
setTimeout(() => {
|
|
setTileState(({ tiles }) => {
|
|
const newTiles = tiles.filter((t) => t.key !== tileKey);
|
|
const tilePositions = getTilePositions(newTiles, gridBounds);
|
|
return { tiles: newTiles, tilePositions };
|
|
});
|
|
}, 250);
|
|
},
|
|
[gridBounds]
|
|
);
|
|
|
|
useEffect(() => {
|
|
setTileState(({ tiles }) => ({
|
|
tiles,
|
|
tilePositions: getTilePositions(tiles, gridBounds),
|
|
}));
|
|
}, [gridBounds]);
|
|
|
|
const animate = useCallback(
|
|
(order) => (index) => {
|
|
const tileIndex = order[index];
|
|
const tilePosition = tilePositions[tileIndex];
|
|
const draggingTile = draggingTileRef.current;
|
|
const dragging =
|
|
draggingTileRef.current && tileIndex === 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,
|
|
};
|
|
}
|
|
},
|
|
[tilePositions]
|
|
);
|
|
|
|
const [springs, api] = useSprings(
|
|
tiles.length,
|
|
animate(tileOrderRef.current),
|
|
[tilePositions]
|
|
);
|
|
|
|
const bind = useDrag(({ args: [index], active, movement }) => {
|
|
let order = tileOrderRef.current;
|
|
let dragIndex = index;
|
|
|
|
// const tileIndex = tileOrderRef.current[index];
|
|
// const tilePosition = tilePositions[tileIndex];
|
|
|
|
// for (let i = 0; i < tileOrderRef.current.length; i++) {
|
|
// if (i === index) {
|
|
// continue;
|
|
// }
|
|
|
|
// const hoverTileIndex = tileOrderRef.current[i];
|
|
// const hoverTilePosition = tilePositions[hoverTileIndex];
|
|
|
|
// if (isInside(movement, tilePosition, hoverTilePosition)) {
|
|
// order = [...tileOrderRef.current];
|
|
// const [toBeMoved] = order.splice(i, 1);
|
|
// order.splice(index, 0, toBeMoved);
|
|
// dragIndex = i;
|
|
// break;
|
|
// }
|
|
// }
|
|
|
|
if (active) {
|
|
draggingTileRef.current = {
|
|
index: dragIndex,
|
|
x: movement[0],
|
|
y: movement[1],
|
|
};
|
|
} else {
|
|
draggingTileRef.current = null;
|
|
//tileOrderRef.current = order;
|
|
}
|
|
|
|
api.start(animate(order));
|
|
});
|
|
|
|
return (
|
|
<div className={styles.gridDemo}>
|
|
<div className={styles.buttons}>
|
|
{!stream && <button onClick={startWebcam}>Start Webcam</button>}
|
|
{stream && tiles.length < 12 && (
|
|
<button onClick={addTile}>Add Tile</button>
|
|
)}
|
|
{stream && tiles.length > 0 && (
|
|
<button onClick={() => removeTile(tiles[tiles.length - 1])}>
|
|
Remove Tile
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className={styles.grid} ref={gridRef}>
|
|
{springs.map(({ shadow, ...style }, i) => {
|
|
const tileIndex = tileOrderRef.current[i];
|
|
const tile = tiles[tileIndex];
|
|
|
|
return (
|
|
<ParticipantTile
|
|
{...bind(i)}
|
|
key={tile.key}
|
|
style={{
|
|
boxShadow: shadow.to(
|
|
(s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
|
|
),
|
|
...style,
|
|
}}
|
|
{...tile}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ParticipantTile({
|
|
style,
|
|
stream,
|
|
remove,
|
|
finishRemovingTile,
|
|
tileKey,
|
|
...rest
|
|
}) {
|
|
const videoRef = useRef();
|
|
|
|
useEffect(() => {
|
|
if (stream) {
|
|
videoRef.current.srcObject = stream;
|
|
videoRef.current.play();
|
|
} else {
|
|
videoRef.current.srcObject = null;
|
|
}
|
|
}, [stream]);
|
|
|
|
const [springStyles, api] = useSpring(() => ({
|
|
from: {
|
|
scale: 0,
|
|
opacity: 0,
|
|
},
|
|
to: {
|
|
scale: 1,
|
|
opacity: 1,
|
|
},
|
|
}));
|
|
|
|
useEffect(() => {
|
|
if (remove) {
|
|
api.start({
|
|
scale: 0,
|
|
opacity: 0,
|
|
});
|
|
}
|
|
}, [remove]);
|
|
|
|
return (
|
|
<animated.div
|
|
className={styles.participantTile}
|
|
style={{
|
|
...style,
|
|
...springStyles,
|
|
}}
|
|
{...rest}
|
|
>
|
|
<video ref={videoRef} playsInline />
|
|
</animated.div>
|
|
);
|
|
}
|