Member avatars without canvas (#9990)
* Strict typechecking fixes for Base/Member/Avatar Update the core avatar files to pass `--strict --noImplicitAny` typechecks. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Add tests for Base/Member/Avatar More thoroughly test the core avatar files. Not necessarily the most thorough, but an improvement. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Extract TextAvatar from BaseAvatar Extracted the fallback/textual avatar into its own component. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Use standard HTML for non-image avatars Firefox users with `resistFingerprinting` enabled were seeing random noise for rooms and users without avatars. There's no real reason to use data URLs to present flat colors. This converts non-image avatars to inline blocks with background colors. See https://github.com/vector-im/element-web/issues/23936 Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Have pills use solid backgrounds rather than colored images Similar to room and member avatars, pills now use colored pseudo-elements rather than background images. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> --------- Signed-off-by: Clark Fischer <clark.fischer@gmail.com> Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
This commit is contained in:
Clark Fischer
GitHub
parent
64cec31981
commit
a8aa4de4b4
22 changed files with 806 additions and 311 deletions
|
|
@ -1,8 +1,6 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2018 New Vector Ltd
|
||||
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
||||
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2015, 2016, 2018, 2019, 2020, 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -21,34 +19,41 @@ import React, { useCallback, useContext, useEffect, useState } from "react";
|
|||
import classNames from "classnames";
|
||||
import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
|
||||
import { ClientEvent } from "matrix-js-sdk/src/client";
|
||||
import { SyncState } from "matrix-js-sdk/src/sync";
|
||||
|
||||
import * as AvatarLogic from "../../../Avatar";
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import RoomContext from "../../../contexts/RoomContext";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
|
||||
import { toPx } from "../../../utils/units";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
|
||||
interface IProps {
|
||||
name: string; // The name (first initial used as default)
|
||||
idName?: string; // ID for generating hash colours
|
||||
title?: string; // onHover title text
|
||||
url?: string; // highest priority of them all, shortcut to set in urls[0]
|
||||
urls?: string[]; // [highest_priority, ... , lowest_priority]
|
||||
/** The name (first initial used as default) */
|
||||
name: string;
|
||||
/** ID for generating hash colours */
|
||||
idName?: string;
|
||||
/** onHover title text */
|
||||
title?: string;
|
||||
/** highest priority of them all, shortcut to set in urls[0] */
|
||||
url?: string;
|
||||
/** [highest_priority, ... , lowest_priority] */
|
||||
urls?: string[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
// XXX: resizeMethod not actually used.
|
||||
/** @deprecated not actually used */
|
||||
resizeMethod?: ResizeMethod;
|
||||
defaultToInitialLetter?: boolean; // true to add default url
|
||||
onClick?: React.MouseEventHandler;
|
||||
/** true to add default url */
|
||||
defaultToInitialLetter?: boolean;
|
||||
onClick?: React.ComponentPropsWithoutRef<typeof AccessibleTooltipButton>["onClick"];
|
||||
inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
|
||||
className?: string;
|
||||
tabIndex?: number;
|
||||
}
|
||||
|
||||
const calculateUrls = (url: string, urls: string[], lowBandwidth: boolean): string[] => {
|
||||
const calculateUrls = (url: string | undefined, urls: string[] | undefined, lowBandwidth: boolean): string[] => {
|
||||
// work out the full set of urls to try to load. This is formed like so:
|
||||
// imageUrls: [ props.url, ...props.urls ]
|
||||
|
||||
|
|
@ -66,11 +71,26 @@ const calculateUrls = (url: string, urls: string[], lowBandwidth: boolean): stri
|
|||
return Array.from(new Set(_urls));
|
||||
};
|
||||
|
||||
const useImageUrl = ({ url, urls }): [string, () => void] => {
|
||||
/**
|
||||
* Hook for cycling through a changing set of images.
|
||||
*
|
||||
* The set of images is updated whenever `url` or `urls` change, the user's
|
||||
* `lowBandwidth` preference changes, or the client reconnects.
|
||||
*
|
||||
* Returns `[imageUrl, onError]`. When `onError` is called, the next image in
|
||||
* the set will be displayed.
|
||||
*/
|
||||
const useImageUrl = ({
|
||||
url,
|
||||
urls,
|
||||
}: {
|
||||
url: string | undefined;
|
||||
urls: string[] | undefined;
|
||||
}): [string | undefined, () => void] => {
|
||||
// Since this is a hot code path and the settings store can be slow, we
|
||||
// use the cached lowBandwidth value from the room context if it exists
|
||||
const roomContext = useContext(RoomContext);
|
||||
const lowBandwidth = roomContext ? roomContext.lowBandwidth : SettingsStore.getValue("lowBandwidth");
|
||||
const lowBandwidth = roomContext.lowBandwidth;
|
||||
|
||||
const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls, lowBandwidth));
|
||||
const [urlsIndex, setIndex] = useState<number>(0);
|
||||
|
|
@ -85,10 +105,10 @@ const useImageUrl = ({ url, urls }): [string, () => void] => {
|
|||
}, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const cli = useContext(MatrixClientContext);
|
||||
const onClientSync = useCallback((syncState, prevState) => {
|
||||
const onClientSync = useCallback((syncState: SyncState, prevState: SyncState | null) => {
|
||||
// Consider the client reconnected if there is no error with syncing.
|
||||
// This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
|
||||
const reconnected = syncState !== "ERROR" && prevState !== syncState;
|
||||
const reconnected = syncState !== SyncState.Error && prevState !== syncState;
|
||||
if (reconnected) {
|
||||
setIndex(0);
|
||||
}
|
||||
|
|
@ -108,46 +128,18 @@ const BaseAvatar: React.FC<IProps> = (props) => {
|
|||
urls,
|
||||
width = 40,
|
||||
height = 40,
|
||||
resizeMethod = "crop", // eslint-disable-line @typescript-eslint/no-unused-vars
|
||||
defaultToInitialLetter = true,
|
||||
onClick,
|
||||
inputRef,
|
||||
className,
|
||||
resizeMethod: _unused, // to keep it from being in `otherProps`
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
const [imageUrl, onError] = useImageUrl({ url, urls });
|
||||
|
||||
if (!imageUrl && defaultToInitialLetter && name) {
|
||||
const initialLetter = AvatarLogic.getInitialLetter(name);
|
||||
const textNode = (
|
||||
<span
|
||||
className="mx_BaseAvatar_initial"
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
fontSize: toPx(width * 0.65),
|
||||
width: toPx(width),
|
||||
lineHeight: toPx(height),
|
||||
}}
|
||||
>
|
||||
{initialLetter}
|
||||
</span>
|
||||
);
|
||||
const imgNode = (
|
||||
<img
|
||||
className="mx_BaseAvatar_image"
|
||||
src={AvatarLogic.defaultAvatarUrlForString(idName || name)}
|
||||
alt=""
|
||||
title={title}
|
||||
onError={onError}
|
||||
style={{
|
||||
width: toPx(width),
|
||||
height: toPx(height),
|
||||
}}
|
||||
aria-hidden="true"
|
||||
data-testid="avatar-img"
|
||||
/>
|
||||
);
|
||||
const avatar = <TextAvatar name={name} idName={idName} width={width} height={height} title={title} />;
|
||||
|
||||
if (onClick) {
|
||||
return (
|
||||
|
|
@ -159,9 +151,12 @@ const BaseAvatar: React.FC<IProps> = (props) => {
|
|||
className={classNames("mx_BaseAvatar", className)}
|
||||
onClick={onClick}
|
||||
inputRef={inputRef}
|
||||
style={{
|
||||
width: toPx(width),
|
||||
height: toPx(height),
|
||||
}}
|
||||
>
|
||||
{textNode}
|
||||
{imgNode}
|
||||
{avatar}
|
||||
</AccessibleButton>
|
||||
);
|
||||
} else {
|
||||
|
|
@ -170,10 +165,13 @@ const BaseAvatar: React.FC<IProps> = (props) => {
|
|||
className={classNames("mx_BaseAvatar", className)}
|
||||
ref={inputRef}
|
||||
{...otherProps}
|
||||
style={{
|
||||
width: toPx(width),
|
||||
height: toPx(height),
|
||||
}}
|
||||
role="presentation"
|
||||
>
|
||||
{textNode}
|
||||
{imgNode}
|
||||
{avatar}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -220,3 +218,31 @@ const BaseAvatar: React.FC<IProps> = (props) => {
|
|||
|
||||
export default BaseAvatar;
|
||||
export type BaseAvatarType = React.FC<IProps>;
|
||||
|
||||
const TextAvatar: React.FC<{
|
||||
name: string;
|
||||
idName?: string;
|
||||
width: number;
|
||||
height: number;
|
||||
title?: string;
|
||||
}> = ({ name, idName, width, height, title }) => {
|
||||
const initialLetter = AvatarLogic.getInitialLetter(name);
|
||||
|
||||
return (
|
||||
<span
|
||||
className="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
backgroundColor: AvatarLogic.getColorForString(idName || name),
|
||||
width: toPx(width),
|
||||
height: toPx(height),
|
||||
fontSize: toPx(width * 0.65),
|
||||
lineHeight: toPx(height),
|
||||
}}
|
||||
title={title}
|
||||
data-testid="avatar-img"
|
||||
>
|
||||
{initialLetter}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2019 - 2022 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2015, 2016, 2019 - 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -26,6 +25,7 @@ import { mediaFromMxc } from "../../../customisations/Media";
|
|||
import { CardContext } from "../right_panel/context";
|
||||
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
|
||||
import { useRoomMemberProfile } from "../../../hooks/room/useRoomMemberProfile";
|
||||
import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
|
||||
|
||||
interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
|
||||
member: RoomMember | null;
|
||||
|
|
@ -33,14 +33,13 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
|
|||
width: number;
|
||||
height: number;
|
||||
resizeMethod?: ResizeMethod;
|
||||
// The onClick to give the avatar
|
||||
onClick?: React.MouseEventHandler;
|
||||
// Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
|
||||
/** Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser` */
|
||||
viewUserOnClick?: boolean;
|
||||
pushUserOnClick?: boolean;
|
||||
title?: string;
|
||||
style?: any;
|
||||
forceHistorical?: boolean; // true to deny `useOnlyCurrentProfiles` usage. Default false.
|
||||
style?: React.CSSProperties;
|
||||
/** true to deny `useOnlyCurrentProfiles` usage. Default false. */
|
||||
forceHistorical?: boolean;
|
||||
hideTitle?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -77,8 +76,8 @@ export default function MemberAvatar({
|
|||
|
||||
if (!title) {
|
||||
title =
|
||||
UserIdentifierCustomisations.getDisplayUserIdentifier(member?.userId ?? "", {
|
||||
roomId: member?.roomId ?? "",
|
||||
UserIdentifierCustomisations.getDisplayUserIdentifier!(member.userId, {
|
||||
roomId: member.roomId,
|
||||
}) ?? fallbackUserId;
|
||||
}
|
||||
}
|
||||
|
|
@ -88,7 +87,6 @@ export default function MemberAvatar({
|
|||
{...props}
|
||||
width={width}
|
||||
height={height}
|
||||
resizeMethod={resizeMethod}
|
||||
name={name ?? ""}
|
||||
title={hideTitle ? undefined : title}
|
||||
idName={member?.userId ?? fallbackUserId}
|
||||
|
|
@ -96,9 +94,9 @@ export default function MemberAvatar({
|
|||
onClick={
|
||||
viewUserOnClick
|
||||
? () => {
|
||||
dis.dispatch({
|
||||
dis.dispatch<ViewUserPayload>({
|
||||
action: Action.ViewUser,
|
||||
member: propsMember,
|
||||
member: propsMember || undefined,
|
||||
push: card.isCard,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,7 +109,8 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
private onRoomAvatarClick = (): void => {
|
||||
const avatarUrl = Avatar.avatarUrlForRoom(this.props.room, null, null, null);
|
||||
const avatarMxc = this.props.room?.getMxcAvatarUrl();
|
||||
const avatarUrl = avatarMxc ? mediaFromMxc(avatarMxc).srcHttp : null;
|
||||
const params = {
|
||||
src: avatarUrl,
|
||||
name: this.props.room.name,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue