Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-29 21:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

lint

Browse Source
This commit is contained in:
Will Hunt
2024-12-02 13:56:55 +00:00
parent 773492d458
commit 74fa5e4bdf
2 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/Avatar.tsx
View File

@@ -7,9 +7,9 @@ Please see LICENSE in the repository root for full details.
import { useMemo, FC, CSSProperties, useState, useEffect } from "react"; import { useMemo, FC, CSSProperties, useState, useEffect } from "react";
import { Avatar as CompoundAvatar } from "@vector-im/compound-web"; import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { useClient } from "./ClientContext"; import { useClient } from "./ClientContext";
import { MatrixClient } from "matrix-js-sdk/src/client";
export enum Size { export enum Size {
XS = "xs", XS = "xs",
@@ -38,14 +38,24 @@ interface Props {
export function getAvatarUrl( export function getAvatarUrl(
client: MatrixClient, client: MatrixClient,
mxcUrl: string|null, mxcUrl: string | null,
avatarSize = 96, avatarSize = 96,
): string|null { ): string | null {
const width = Math.floor(avatarSize * window.devicePixelRatio); const width = Math.floor(avatarSize * window.devicePixelRatio);
const height = Math.floor(avatarSize * window.devicePixelRatio); const height = Math.floor(avatarSize * window.devicePixelRatio);
// scale is more suitable for larger sizes // scale is more suitable for larger sizes
const resizeMethod = avatarSize <= 96 ? "crop" : "scale"; const resizeMethod = avatarSize <= 96 ? "crop" : "scale";
return mxcUrl ? client.mxcUrlToHttp(mxcUrl, width, height, resizeMethod, false, true, true) : null; return mxcUrl
? client.mxcUrlToHttp(
mxcUrl,
width,
height,
resizeMethod,
false,
true,
true,
)
: null;
} }
export const Avatar: FC<Props> = ({ export const Avatar: FC<Props> = ({
@@ -67,12 +77,12 @@ export const Avatar: FC<Props> = ({
[size], [size],
); );
const [avatarUrl, setAvatarUrl] = useState<string|undefined>(undefined); const [avatarUrl, setAvatarUrl] = useState<string | undefined>(undefined);
useEffect(() => { useEffect(() => {
if (!client || !src || !sizePx) { if (!client || !src || !sizePx) {
return; return;
}; }
const token = client.getAccessToken(); const token = client.getAccessToken();
if (!token) { if (!token) {
return; return;
@@ -83,20 +93,27 @@ export const Avatar: FC<Props> = ({
return; return;
} }
let objectUrl: string|undefined; let objectUrl: string | undefined;
fetch(resolveSrc, { fetch(resolveSrc, {
headers: { headers: {
'Authorization': `Bearer ${token}` Authorization: `Bearer ${token}`,
} },
}).then((req) => req.blob()).then((res) => { })
objectUrl = URL.createObjectURL(res); .then(async (req) => req.blob())
setAvatarUrl(objectUrl); .then((res) => {
}).catch((ex) => { objectUrl = URL.createObjectURL(res);
console.warn("Failed to get avatar URL", ex); setAvatarUrl(objectUrl);
setAvatarUrl(undefined); })
}); .catch(() => {
// Error will likely be evident from browser logs.
setAvatarUrl(undefined);
});
() => objectUrl && URL.revokeObjectURL(objectUrl); return (): void => {
if (objectUrl) {
URL.revokeObjectURL(objectUrl);
}
};
}, [client, src, sizePx]); }, [client, src, sizePx]);
return ( return (

2
src/utils/matrix.ts
View File

@@ -332,4 +332,4 @@ export function getRelativeRoomUrl(
? "/" + roomAliasLocalpartFromRoomName(roomName) ? "/" + roomAliasLocalpartFromRoomName(roomName)
: ""; : "";
return `/room/#${roomPart}?${generateUrlSearchParams(roomId, encryptionSystem, viaServers).toString()}`; return `/room/#${roomPart}?${generateUrlSearchParams(roomId, encryptionSystem, viaServers).toString()}`;
} }