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/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/avatars/BaseAvatar.tsx": "src/components/views/avatars/BaseAvatar.tsx",
|
||||
"src/editor/commands.tsx": "src/editor/commands.tsx",
|
||||
"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 { 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
|
||||
* @param room - The room model
|
||||
|
@ -20,9 +29,9 @@ export function getRoomName(room?: Room | IPublicRoomsChunkRoom, oobName?: IOOBD
|
|||
) ||
|
||||
_t("common|unnamed_room");
|
||||
|
||||
return (roomName || "")
|
||||
.replace(":", ":\u200b") // add a zero-width space to allow linewrapping after the colon (matrix defaults)
|
||||
.replace("[TG]", "");
|
||||
return getSafeRoomName(
|
||||
(roomName || "").replace(":", ":\u200b"), // add a zero-width space to allow linewrapping after the colon (matrix defaults)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue