2016-01-15 15:02:28 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2018-03-12 18:24:32 +03:00
|
|
|
Copyright 2018 New Vector Ltd
|
2019-08-08 22:21:53 +03:00
|
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
2020-02-21 13:41:33 +03:00
|
|
|
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
2016-01-15 15:02:28 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
2020-08-29 03:11:08 +03:00
|
|
|
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
2020-07-07 17:18:10 +03:00
|
|
|
import classNames from 'classnames';
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as AvatarLogic from '../../../Avatar';
|
2019-02-08 19:44:03 +03:00
|
|
|
import SettingsStore from "../../../settings/SettingsStore";
|
2017-01-25 01:41:52 +03:00
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
2019-12-17 20:26:12 +03:00
|
|
|
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
2020-02-21 13:41:33 +03:00
|
|
|
import {useEventEmitter} from "../../../hooks/useEventEmitter";
|
2020-05-14 00:08:29 +03:00
|
|
|
import {toPx} from "../../../utils/units";
|
2021-03-09 03:03:14 +03:00
|
|
|
import {ResizeMethod} from "../../../Avatar";
|
2021-01-28 02:57:21 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2016-01-15 15:02:28 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
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]
|
|
|
|
width?: number;
|
|
|
|
height?: number;
|
|
|
|
// XXX: resizeMethod not actually used.
|
2021-03-09 03:03:14 +03:00
|
|
|
resizeMethod?: ResizeMethod;
|
2020-07-07 00:42:46 +03:00
|
|
|
defaultToInitialLetter?: boolean; // true to add default url
|
|
|
|
onClick?: React.MouseEventHandler;
|
|
|
|
inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
|
2020-07-07 17:18:10 +03:00
|
|
|
className?: string;
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
|
|
|
|
2020-08-24 23:08:07 +03:00
|
|
|
const calculateUrls = (url, urls) => {
|
|
|
|
// work out the full set of urls to try to load. This is formed like so:
|
|
|
|
// imageUrls: [ props.url, ...props.urls ]
|
|
|
|
|
|
|
|
let _urls = [];
|
|
|
|
if (!SettingsStore.getValue("lowBandwidth")) {
|
|
|
|
_urls = urls || [];
|
|
|
|
|
|
|
|
if (url) {
|
2020-11-13 03:16:58 +03:00
|
|
|
// copy urls and put url first
|
|
|
|
_urls = [url, ..._urls];
|
2020-08-24 23:08:07 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// deduplicate URLs
|
|
|
|
return Array.from(new Set(_urls));
|
|
|
|
};
|
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
const useImageUrl = ({url, urls}): [string, () => void] => {
|
2020-08-24 23:08:07 +03:00
|
|
|
const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls));
|
|
|
|
const [urlsIndex, setIndex] = useState<number>(0);
|
2018-02-06 20:50:53 +03:00
|
|
|
|
2020-05-24 16:12:16 +03:00
|
|
|
const onError = useCallback(() => {
|
|
|
|
setIndex(i => i + 1); // try the next one
|
|
|
|
}, []);
|
2020-02-21 13:41:33 +03:00
|
|
|
|
|
|
|
useEffect(() => {
|
2020-08-24 23:08:07 +03:00
|
|
|
setUrls(calculateUrls(url, urls));
|
2020-02-21 13:41:33 +03:00
|
|
|
setIndex(0);
|
2020-08-24 23:08:07 +03:00
|
|
|
}, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
|
2020-02-21 13:41:33 +03:00
|
|
|
|
|
|
|
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;
|
2020-05-24 16:12:16 +03:00
|
|
|
if (reconnected) {
|
2020-05-25 21:02:44 +03:00
|
|
|
setIndex(0);
|
2016-01-15 15:02:28 +03:00
|
|
|
}
|
2020-05-24 16:12:16 +03:00
|
|
|
}, []);
|
2020-02-21 13:41:33 +03:00
|
|
|
useEventEmitter(cli, "sync", onClientSync);
|
|
|
|
|
|
|
|
const imageUrl = imageUrls[urlsIndex];
|
2020-05-24 16:12:16 +03:00
|
|
|
return [imageUrl, onError];
|
2020-02-21 13:41:33 +03:00
|
|
|
};
|
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
const BaseAvatar = (props: IProps) => {
|
2020-02-21 13:41:33 +03:00
|
|
|
const {
|
|
|
|
name,
|
|
|
|
idName,
|
|
|
|
title,
|
|
|
|
url,
|
|
|
|
urls,
|
2020-07-07 17:40:05 +03:00
|
|
|
width = 40,
|
|
|
|
height = 40,
|
2020-08-29 03:11:08 +03:00
|
|
|
resizeMethod = "crop", // eslint-disable-line @typescript-eslint/no-unused-vars
|
2020-07-07 17:40:05 +03:00
|
|
|
defaultToInitialLetter = true,
|
2020-02-21 13:41:33 +03:00
|
|
|
onClick,
|
|
|
|
inputRef,
|
2020-07-13 17:43:34 +03:00
|
|
|
className,
|
2020-02-21 13:41:33 +03:00
|
|
|
...otherProps
|
|
|
|
} = props;
|
|
|
|
|
2020-05-25 21:05:02 +03:00
|
|
|
const [imageUrl, onError] = useImageUrl({url, urls});
|
2020-02-21 13:41:33 +03:00
|
|
|
|
2020-05-24 16:12:16 +03:00
|
|
|
if (!imageUrl && defaultToInitialLetter) {
|
2020-02-21 13:41:33 +03:00
|
|
|
const initialLetter = AvatarLogic.getInitialLetter(name);
|
|
|
|
const textNode = (
|
|
|
|
<span
|
2020-07-07 18:44:15 +03:00
|
|
|
className="mx_BaseAvatar_initial"
|
2020-02-21 13:41:33 +03:00
|
|
|
aria-hidden="true"
|
|
|
|
style={{
|
2020-05-23 13:12:58 +03:00
|
|
|
fontSize: toPx(width * 0.65),
|
|
|
|
width: toPx(width),
|
|
|
|
lineHeight: toPx(height),
|
2020-02-21 13:41:33 +03:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
{ initialLetter }
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
const imgNode = (
|
|
|
|
<img
|
2020-07-07 18:44:15 +03:00
|
|
|
className="mx_BaseAvatar_image"
|
2020-05-24 16:12:16 +03:00
|
|
|
src={AvatarLogic.defaultAvatarUrlForString(idName || name)}
|
2020-02-21 13:41:33 +03:00
|
|
|
alt=""
|
|
|
|
title={title}
|
|
|
|
onError={onError}
|
2020-05-15 02:16:41 +03:00
|
|
|
style={{
|
2020-05-23 13:12:58 +03:00
|
|
|
width: toPx(width),
|
|
|
|
height: toPx(height),
|
2020-05-15 02:16:41 +03:00
|
|
|
}}
|
2020-02-21 13:41:33 +03:00
|
|
|
aria-hidden="true" />
|
|
|
|
);
|
|
|
|
|
2020-07-22 22:01:14 +03:00
|
|
|
if (onClick) {
|
2017-01-06 23:01:37 +03:00
|
|
|
return (
|
2019-12-23 15:24:49 +03:00
|
|
|
<AccessibleButton
|
2021-01-28 02:57:21 +03:00
|
|
|
aria-label={_t("Avatar")}
|
2020-02-21 13:41:33 +03:00
|
|
|
{...otherProps}
|
|
|
|
element="span"
|
2020-07-13 17:43:34 +03:00
|
|
|
className={classNames("mx_BaseAvatar", className)}
|
2017-02-02 20:36:26 +03:00
|
|
|
onClick={onClick}
|
2019-12-23 15:24:49 +03:00
|
|
|
inputRef={inputRef}
|
2020-02-21 13:41:33 +03:00
|
|
|
>
|
|
|
|
{ textNode }
|
|
|
|
{ imgNode }
|
|
|
|
</AccessibleButton>
|
2017-01-06 23:01:37 +03:00
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
2020-07-07 17:18:10 +03:00
|
|
|
<span
|
2020-07-13 17:43:34 +03:00
|
|
|
className={classNames("mx_BaseAvatar", className)}
|
2020-07-07 17:18:10 +03:00
|
|
|
ref={inputRef}
|
|
|
|
{...otherProps}
|
|
|
|
role="presentation"
|
|
|
|
>
|
2020-02-21 13:41:33 +03:00
|
|
|
{ textNode }
|
|
|
|
{ imgNode }
|
|
|
|
</span>
|
2017-01-06 23:01:37 +03:00
|
|
|
);
|
|
|
|
}
|
2020-02-21 13:41:33 +03:00
|
|
|
}
|
|
|
|
|
2020-07-22 22:01:14 +03:00
|
|
|
if (onClick) {
|
2020-02-21 13:41:33 +03:00
|
|
|
return (
|
|
|
|
<AccessibleButton
|
2020-07-13 17:43:34 +03:00
|
|
|
className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
|
2020-02-21 13:41:33 +03:00
|
|
|
element='img'
|
|
|
|
src={imageUrl}
|
|
|
|
onClick={onClick}
|
|
|
|
onError={onError}
|
2020-05-15 02:16:41 +03:00
|
|
|
style={{
|
2020-05-23 13:12:58 +03:00
|
|
|
width: toPx(width),
|
|
|
|
height: toPx(height),
|
2020-05-15 02:16:41 +03:00
|
|
|
}}
|
2020-02-21 13:41:33 +03:00
|
|
|
title={title} alt=""
|
|
|
|
inputRef={inputRef}
|
|
|
|
{...otherProps} />
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<img
|
2020-07-13 17:43:34 +03:00
|
|
|
className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
|
2020-02-21 13:41:33 +03:00
|
|
|
src={imageUrl}
|
|
|
|
onError={onError}
|
2020-05-15 02:16:41 +03:00
|
|
|
style={{
|
2020-05-23 13:12:58 +03:00
|
|
|
width: toPx(width),
|
|
|
|
height: toPx(height),
|
2020-05-15 02:16:41 +03:00
|
|
|
}}
|
2020-02-21 13:41:33 +03:00
|
|
|
title={title} alt=""
|
|
|
|
ref={inputRef}
|
|
|
|
{...otherProps} />
|
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
export default BaseAvatar;
|
2020-07-22 22:01:14 +03:00
|
|
|
export type BaseAvatarType = React.FC<IProps>;
|