Integrate video grid into conference room
This commit is contained in:
Robert Long
parent
f303cb345f
commit
0f312b5faa
3 changed files with 230 additions and 205 deletions
|
|
@ -160,7 +160,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
|
|||
const onParticipantsChanged = () => {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
participants: manager.participants,
|
||||
participants: [...manager.participants],
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
@ -250,7 +250,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
|
|||
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
participants: manager.participants,
|
||||
participants: [...manager.participants],
|
||||
joined: false,
|
||||
joining: false,
|
||||
}));
|
||||
|
|
@ -271,7 +271,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
|
|||
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
participants: manager.participants,
|
||||
participants: [...manager.participants],
|
||||
joined: false,
|
||||
joining: false,
|
||||
}));
|
||||
|
|
@ -282,7 +282,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
|
|||
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
participants: manager.participants,
|
||||
participants: [...manager.participants],
|
||||
joined: false,
|
||||
joining: false,
|
||||
}));
|
||||
|
|
|
|||
208
src/GridDemo.jsx
208
src/GridDemo.jsx
|
|
@ -18,24 +18,8 @@ function isInside([x, y], targetTile) {
|
|||
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) => {
|
||||
function getTilePositions(tileCount, gridBounds) {
|
||||
const newTilePositions = [];
|
||||
const tileCount = tiles.length;
|
||||
const { width: gridWidth, height: gridHeight } = gridBounds;
|
||||
const gap = 8;
|
||||
|
||||
|
|
@ -77,9 +61,7 @@ export function GridDemo() {
|
|||
}
|
||||
}
|
||||
|
||||
let tileHeight = Math.round(
|
||||
(gridHeight - gap * (rowCount + 1)) / rowCount
|
||||
);
|
||||
let tileHeight = Math.round((gridHeight - gap * (rowCount + 1)) / rowCount);
|
||||
let tileWidth = Math.round(
|
||||
(gridWidth - gap * (columnCount + 1)) / columnCount
|
||||
);
|
||||
|
|
@ -90,7 +72,7 @@ export function GridDemo() {
|
|||
tileWidth = (16 * tileHeight) / 9;
|
||||
}
|
||||
|
||||
for (let i = 0; i < tiles.length; i++) {
|
||||
for (let i = 0; i < tileCount; i++) {
|
||||
const verticalIndex = Math.floor(i / columnCount);
|
||||
const top = verticalIndex * tileHeight + (verticalIndex + 1) * gap;
|
||||
|
||||
|
|
@ -123,78 +105,92 @@ export function GridDemo() {
|
|||
}
|
||||
|
||||
return newTilePositions;
|
||||
}, []);
|
||||
}
|
||||
|
||||
const startWebcam = useCallback(async () => {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||||
setStream(stream);
|
||||
tileOrderRef.current.push(tileOrderRef.current.length);
|
||||
|
||||
setTileState(() => {
|
||||
console.log("startWebcam");
|
||||
const tiles = [{ stream, key: tileKey.current++, remove: false }];
|
||||
const tilePositions = getTilePositions(tiles, gridBounds);
|
||||
return { tiles, tilePositions };
|
||||
export function VideoGrid({ participants }) {
|
||||
const [{ tiles, tilePositions }, setTileState] = useState({
|
||||
tiles: [],
|
||||
tilePositions: [],
|
||||
});
|
||||
}, [gridBounds]);
|
||||
const draggingTileRef = useRef(null);
|
||||
|
||||
const addTile = useCallback(() => {
|
||||
const newStream = stream.clone();
|
||||
// Contains tile indices
|
||||
// Tiles are displayed in the order that they appear
|
||||
const tileOrderRef = useRef([]);
|
||||
|
||||
tileOrderRef.current.push(tileOrderRef.current.length);
|
||||
const [gridRef, gridBounds] = useMeasure();
|
||||
|
||||
useEffect(() => {
|
||||
setTileState(({ tiles }) => {
|
||||
console.log("addTile");
|
||||
const newTiles = [
|
||||
...tiles,
|
||||
{ stream: newStream, key: tileKey.current++, remove: false },
|
||||
];
|
||||
const newTiles = [];
|
||||
const removedTileKeys = [];
|
||||
|
||||
return {
|
||||
tiles: newTiles,
|
||||
tilePositions: getTilePositions(newTiles, gridBounds),
|
||||
};
|
||||
for (const tile of tiles) {
|
||||
const participant = participants.find(
|
||||
(participant) => participant.userId === tile.key
|
||||
);
|
||||
|
||||
if (participant) {
|
||||
// Existing tiles
|
||||
newTiles.push({
|
||||
key: participant.userId,
|
||||
participant: participant,
|
||||
remove: false,
|
||||
});
|
||||
}, [stream, gridBounds]);
|
||||
} else {
|
||||
// Removed tiles
|
||||
removedTileKeys.push(tile.key);
|
||||
newTiles.push({
|
||||
key: tile.key,
|
||||
participant: tile.participant,
|
||||
remove: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const removeTile = useCallback(
|
||||
(tile) => {
|
||||
const tileKey = tile.key;
|
||||
for (const participant of participants) {
|
||||
if (newTiles.some(({ key }) => participant.userId === key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
setTileState(({ tiles, tilePositions }) => {
|
||||
return {
|
||||
tiles: tiles.map((tile) => ({
|
||||
...tile,
|
||||
remove: tile.key === tileKey,
|
||||
})),
|
||||
tilePositions,
|
||||
};
|
||||
// Added tiles
|
||||
newTiles.push({
|
||||
key: participant.userId,
|
||||
participant,
|
||||
remove: false,
|
||||
});
|
||||
|
||||
tileOrderRef.current.push(tileOrderRef.current.length);
|
||||
}
|
||||
|
||||
if (removedTileKeys.length > 0) {
|
||||
// TODO: There's a race condition in this nested set state when you quickly add/remove
|
||||
setTimeout(() => {
|
||||
setTileState(({ tiles }) => {
|
||||
const tileIndex = tiles.findIndex((tile) => tile.key === tileKey);
|
||||
const newTiles = [...tiles];
|
||||
newTiles.splice(tileIndex, 1);
|
||||
tileOrderRef.current = tileOrderRef.current.filter(
|
||||
(index) => index !== tileIndex
|
||||
const newTiles = tiles.filter(
|
||||
(tile) => !removedTileKeys.includes(tile.key)
|
||||
);
|
||||
const removedTileIndices = removedTileKeys.map((tileKey) =>
|
||||
tiles.findIndex((tile) => tile.key === tileKey)
|
||||
);
|
||||
tileOrderRef.current = tileOrderRef.current.filter(
|
||||
(index) => !removedTileIndices.includes(index)
|
||||
);
|
||||
|
||||
return {
|
||||
tiles: newTiles,
|
||||
tilePositions: getTilePositions(newTiles, gridBounds),
|
||||
};
|
||||
});
|
||||
}, 250);
|
||||
},
|
||||
[gridBounds]
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setTileState(({ tiles }) => ({
|
||||
tiles,
|
||||
tilePositions: getTilePositions(tiles, gridBounds),
|
||||
}));
|
||||
}, [gridBounds]);
|
||||
return {
|
||||
tiles: newTiles,
|
||||
tilePositions: getTilePositions(newTiles.length, gridBounds),
|
||||
};
|
||||
});
|
||||
}, [participants, gridBounds]);
|
||||
|
||||
const animate = useCallback(
|
||||
(tileIndex) => {
|
||||
|
|
@ -301,18 +297,6 @@ export function GridDemo() {
|
|||
});
|
||||
|
||||
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];
|
||||
|
|
@ -328,32 +312,76 @@ export function GridDemo() {
|
|||
),
|
||||
...style,
|
||||
}}
|
||||
tileKey={tile.key}
|
||||
{...tile}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ParticipantTile({ style, stream, remove, tileKey, ...rest }) {
|
||||
function ParticipantTile({ style, participant, remove, ...rest }) {
|
||||
const videoRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
if (stream) {
|
||||
videoRef.current.srcObject = stream;
|
||||
if (participant.stream) {
|
||||
videoRef.current.srcObject = participant.stream;
|
||||
videoRef.current.play();
|
||||
} else {
|
||||
videoRef.current.srcObject = null;
|
||||
}
|
||||
}, [stream]);
|
||||
}, [participant.stream]);
|
||||
|
||||
return (
|
||||
<animated.div className={styles.participantTile} style={style} {...rest}>
|
||||
<div className={styles.participantName}>{tileKey}</div>
|
||||
<div className={styles.participantName}>{participant.userId}</div>
|
||||
<video ref={videoRef} playsInline />
|
||||
</animated.div>
|
||||
);
|
||||
}
|
||||
|
||||
export function GridDemo() {
|
||||
const participantKey = useRef(0);
|
||||
const [stream, setStream] = useState();
|
||||
const [participants, setParticipants] = useState([]);
|
||||
|
||||
const startWebcam = useCallback(async () => {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||||
setStream(stream);
|
||||
setParticipants([{ stream, userId: participantKey.current++ }]);
|
||||
}, []);
|
||||
|
||||
const addParticipant = useCallback(() => {
|
||||
setParticipants((participants) => [
|
||||
...participants,
|
||||
{ stream: stream.clone(), userId: participantKey.current++ },
|
||||
]);
|
||||
}, [stream]);
|
||||
|
||||
const removeParticipant = useCallback((key) => {
|
||||
setParticipants((participants) =>
|
||||
participants.filter((participant) => participant.userId !== key)
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.gridDemo}>
|
||||
<div className={styles.buttons}>
|
||||
{!stream && <button onClick={startWebcam}>Start Webcam</button>}
|
||||
{stream && participants.length < 12 && (
|
||||
<button onClick={addParticipant}>Add Tile</button>
|
||||
)}
|
||||
{stream && participants.length > 0 && (
|
||||
<button
|
||||
onClick={() =>
|
||||
removeParticipant(participants[participants.length - 1].userId)
|
||||
}
|
||||
>
|
||||
Remove Tile
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<VideoGrid participants={participants} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import styles from "./Room.module.css";
|
|||
import { useParams, useLocation, Link } from "react-router-dom";
|
||||
import { useVideoRoom } from "./ConferenceCallManagerHooks";
|
||||
import { DevTools } from "./DevTools";
|
||||
import { VideoGrid } from "./GridDemo";
|
||||
|
||||
function useQuery() {
|
||||
const location = useLocation();
|
||||
|
|
@ -96,11 +97,7 @@ export function Room({ manager }) {
|
|||
</div>
|
||||
)}
|
||||
{!loading && room && joined && participants.length > 0 && (
|
||||
<div className={styles.roomContainer}>
|
||||
{participants.map((participant) => (
|
||||
<Participant key={participant.userId} {...participant} />
|
||||
))}
|
||||
</div>
|
||||
<VideoGrid participants={participants} />
|
||||
)}
|
||||
{!loading && room && joined && (
|
||||
<div className={styles.footer}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue