fix: base avatar, remove TG prefix
parent
ba15159b15
commit
52442922ed
|
@ -6,6 +6,7 @@
|
||||||
"src/components/views/rooms/RoomTile.tsx": "src/components/views/rooms/RoomTile.tsx",
|
"src/components/views/rooms/RoomTile.tsx": "src/components/views/rooms/RoomTile.tsx",
|
||||||
"src/components/views/elements/RoomName.tsx": "src/components/views/elements/RoomName.tsx",
|
"src/components/views/elements/RoomName.tsx": "src/components/views/elements/RoomName.tsx",
|
||||||
"src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx": "src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx",
|
"src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx": "src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx",
|
||||||
|
"src/components/views/avatars/BaseAvatar.tsx": "src/components/views/avatars/BaseAvatar.tsx",
|
||||||
"src/editor/commands.tsx": "src/editor/commands.tsx",
|
"src/editor/commands.tsx": "src/editor/commands.tsx",
|
||||||
"src/hooks/useRoomName.ts": "src/hooks/useRoomName.ts"
|
"src/hooks/useRoomName.ts": "src/hooks/useRoomName.ts"
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,150 @@
|
||||||
|
/*
|
||||||
|
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.
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useCallback, useContext, useEffect, useState } from "react";
|
||||||
|
import classNames from "classnames";
|
||||||
|
import { ClientEvent } from "matrix-js-sdk/src/matrix";
|
||||||
|
import { Avatar } from "@vector-im/compound-web";
|
||||||
|
import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
|
||||||
|
import { ButtonEvent } from "matrix-react-sdk/src/components/views/elements/AccessibleButton";
|
||||||
|
import RoomContext from "matrix-react-sdk/src/contexts/RoomContext";
|
||||||
|
import MatrixClientContext from "matrix-react-sdk/src/contexts/MatrixClientContext";
|
||||||
|
import { useTypedEventEmitter } from "matrix-react-sdk/src/hooks/useEventEmitter";
|
||||||
|
import { _t } from "matrix-react-sdk/src/languageHandler";
|
||||||
|
|
||||||
|
import { getSafeRoomName } from "../../../hooks/useRoomName";
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
name?: React.ComponentProps<typeof Avatar>["name"]; // The name (first initial used as default)
|
||||||
|
idName?: React.ComponentProps<typeof Avatar>["id"]; // ID for generating hash colours
|
||||||
|
title?: string; // onHover title text
|
||||||
|
url?: string | null; // highest priority of them all, shortcut to set in urls[0]
|
||||||
|
urls?: string[]; // [highest_priority, ... , lowest_priority]
|
||||||
|
type?: React.ComponentProps<typeof Avatar>["type"];
|
||||||
|
size: string;
|
||||||
|
onClick?: (ev: ButtonEvent) => void;
|
||||||
|
inputRef?: React.RefObject<HTMLSpanElement>;
|
||||||
|
className?: string;
|
||||||
|
tabIndex?: number;
|
||||||
|
altText?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => {
|
||||||
|
// work out the full set of urls to try to load. This is formed like so:
|
||||||
|
// imageUrls: [ props.url, ...props.urls ]
|
||||||
|
|
||||||
|
let _urls: string[] = [];
|
||||||
|
if (!lowBandwidth) {
|
||||||
|
_urls = urls || [];
|
||||||
|
|
||||||
|
if (url) {
|
||||||
|
// copy urls and put url first
|
||||||
|
_urls = [url, ..._urls];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// deduplicate URLs
|
||||||
|
return Array.from(new Set(_urls));
|
||||||
|
};
|
||||||
|
|
||||||
|
const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [string, () => 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 [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls, lowBandwidth));
|
||||||
|
const [urlsIndex, setIndex] = useState<number>(0);
|
||||||
|
|
||||||
|
const onError = useCallback(() => {
|
||||||
|
setIndex((i) => i + 1); // try the next one
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setUrls(calculateUrls(url, urls, lowBandwidth));
|
||||||
|
setIndex(0);
|
||||||
|
}, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||||
|
|
||||||
|
const cli = useContext(MatrixClientContext);
|
||||||
|
const onClientSync = useCallback((syncState, prevState) => {
|
||||||
|
// 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;
|
||||||
|
if (reconnected) {
|
||||||
|
setIndex(0);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
useTypedEventEmitter(cli, ClientEvent.Sync, onClientSync);
|
||||||
|
|
||||||
|
const imageUrl = imageUrls[urlsIndex];
|
||||||
|
return [imageUrl, onError];
|
||||||
|
};
|
||||||
|
|
||||||
|
const BaseAvatar: React.FC<IProps> = (props) => {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
idName,
|
||||||
|
title,
|
||||||
|
url,
|
||||||
|
urls,
|
||||||
|
size = "40px",
|
||||||
|
onClick,
|
||||||
|
inputRef,
|
||||||
|
className,
|
||||||
|
type = "round",
|
||||||
|
altText = _t("common|avatar"),
|
||||||
|
...otherProps
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const [imageUrl, onError] = useImageUrl({ url, urls });
|
||||||
|
|
||||||
|
const extraProps: Partial<React.ComponentProps<typeof Avatar>> = {};
|
||||||
|
|
||||||
|
if (onClick) {
|
||||||
|
extraProps["aria-live"] = "off";
|
||||||
|
extraProps["role"] = "button";
|
||||||
|
} else if (!imageUrl) {
|
||||||
|
extraProps["role"] = "presentation";
|
||||||
|
extraProps["aria-label"] = undefined;
|
||||||
|
} else {
|
||||||
|
extraProps["role"] = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Avatar
|
||||||
|
ref={inputRef}
|
||||||
|
src={imageUrl}
|
||||||
|
id={idName ?? ""}
|
||||||
|
name={getSafeRoomName(name)}
|
||||||
|
type={type}
|
||||||
|
size={size}
|
||||||
|
className={classNames("mx_BaseAvatar", className)}
|
||||||
|
aria-label={altText}
|
||||||
|
onError={onError}
|
||||||
|
title={title}
|
||||||
|
onClick={onClick}
|
||||||
|
{...extraProps}
|
||||||
|
{...otherProps}
|
||||||
|
data-testid="avatar-img"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BaseAvatar;
|
||||||
|
export type BaseAvatarType = React.FC<IProps>;
|
|
@ -4,6 +4,15 @@ import { _t } from "matrix-react-sdk/src/languageHandler";
|
||||||
import { IOOBData } from "matrix-react-sdk/src/stores/ThreepidInviteStore";
|
import { IOOBData } from "matrix-react-sdk/src/stores/ThreepidInviteStore";
|
||||||
import { useMemo } from "react";
|
import { useMemo } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes the [TG] prefix and leading whitespace from a room name
|
||||||
|
* @param roomName
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
export function getSafeRoomName(roomName?: string): string {
|
||||||
|
return roomName?.replace(/^(\s|\[TG\])*/, "") || "";
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Determines the room name from a combination of the room model and potential
|
* Determines the room name from a combination of the room model and potential
|
||||||
* @param room - The room model
|
* @param room - The room model
|
||||||
|
@ -20,9 +29,9 @@ export function getRoomName(room?: Room | IPublicRoomsChunkRoom, oobName?: IOOBD
|
||||||
) ||
|
) ||
|
||||||
_t("common|unnamed_room");
|
_t("common|unnamed_room");
|
||||||
|
|
||||||
return (roomName || "")
|
return getSafeRoomName(
|
||||||
.replace(":", ":\u200b") // add a zero-width space to allow linewrapping after the colon (matrix defaults)
|
(roomName || "").replace(":", ":\u200b"), // add a zero-width space to allow linewrapping after the colon (matrix defaults)
|
||||||
.replace("[TG]", "");
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue