diff --git a/package.json b/package.json index 25e50ae..62449e9 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "build-storybook": "build-storybook" }, "dependencies": { + "@juggle/resize-observer": "^3.3.1", "@react-aria/button": "^3.3.4", "@react-aria/dialog": "^3.1.4", "@react-aria/focus": "^3.5.0", @@ -38,7 +39,8 @@ "react-json-view": "^1.21.3", "react-router": "6", "react-router-dom": "^5.2.0", - "react-use-clipboard": "^1.0.7" + "react-use-clipboard": "^1.0.7", + "react-use-measure": "^2.1.1" }, "devDependencies": { "@babel/core": "^7.16.5", diff --git a/src/room/LobbyView.jsx b/src/room/LobbyView.jsx index a00580f..4921c2d 100644 --- a/src/room/LobbyView.jsx +++ b/src/room/LobbyView.jsx @@ -12,6 +12,8 @@ import { Body, Link } from "../typography/Typography"; import { Avatar } from "../Avatar"; import { getAvatarUrl } from "../matrix-utils"; import { useProfile } from "../profile/useProfile"; +import useMeasure from "react-use-measure"; +import { ResizeObserver } from "@juggle/resize-observer"; export function LobbyView({ client, @@ -31,7 +33,8 @@ export function LobbyView({ const { stream } = useCallFeed(localCallFeed); const videoRef = useMediaStream(stream, true); const { displayName, avatarUrl } = useProfile(client); - const avatarSize = 96; + const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver }); + const avatarSize = (previewBounds.height - 66) / 2; useEffect(() => { onInitLocalCallFeed(); @@ -49,7 +52,7 @@ export function LobbyView({
-
+