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

Fix avatar sizing

Browse source
This commit is contained in:
Robert Long 2022-01-21 13:21:23 -08:00
parent d1368f4622
commit 6032f6ba44
4 changed files with 28 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -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",

7
src/room/LobbyView.jsx
View file

@ -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({
</Header>
<div className={styles.joinRoom}>
<div className={styles.joinRoomContent}>
<div className={styles.preview}>
<div className={styles.preview} ref={previewRef}>
<video ref={videoRef} muted playsInline disablePictureInPicture />
{state === GroupCallState.LocalCallFeedUninitialized && (
<Body fontWeight="semiBold" className={styles.webcamPermissions}>

8
vite.config.js
View file

@ -38,7 +38,13 @@ export default defineConfig(({ mode }) => {
alias: {
"$(res)": path.resolve(__dirname, "node_modules/matrix-react-sdk/res"),
},
dedupe: ["react", "react-dom", "matrix-js-sdk"],
dedupe: [
"react",
"react-dom",
"matrix-js-sdk",
"react-use-measure",
"@juggle/resize-observer",
],
},
};
});

14
yarn.lock
View file

@ -1371,6 +1371,11 @@
"@types/yargs" "^15.0.0"
chalk "^4.0.0"
"@juggle/resize-observer@^3.3.1":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
"@mdx-js/loader@^1.6.22":
version "1.6.22"
resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"
@ -5940,7 +5945,7 @@ date-names@^0.1.11:
resolved "https://registry.yarnpkg.com/date-names/-/date-names-0.1.13.tgz#c4358f6f77c8056e2f5ea68fdbb05f0bf1e53bd0"
integrity sha512-IxxoeD9tdx8pXVcmqaRlPvrXIsSrSrIZzfzlOkm9u+hyzKp5Wk/odt9O/gd7Ockzy8n/WHeEpTVJ2bF3mMV4LA==
debounce@^1.2.0:
debounce@^1.2.0, debounce@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz"
integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
@ -11166,6 +11171,13 @@ react-use-measure@^2.0.4:
dependencies:
debounce "^1.2.0"
react-use-measure@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
integrity sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==
dependencies:
debounce "^1.2.1"
react@17.0.2, react@^17.0.0:
version "17.0.2"
resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"