imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simply BaseAvatar hooks

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-05-24 14:12:16 +01:00
parent 02ddda587b
commit cf7acded50
1 changed files with 14 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/views/avatars/BaseAvatar.js
View file

@ -30,54 +30,44 @@ const useImageUrl = ({url, urls, idName, name, defaultToInitialLetter}) => {
const [imageUrls, setUrls] = useState([]); const [imageUrls, setUrls] = useState([]);
const [urlsIndex, setIndex] = useState(); const [urlsIndex, setIndex] = useState();
const onError = () => { const onError = useCallback(() => {
const nextIndex = urlsIndex + 1; setIndex(i => i + 1); // try the next one
if (nextIndex < imageUrls.length) { }, []);
// try the next one const memoizedUrls = useMemo(() => urls, [JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
setIndex(nextIndex);
}
};
const defaultImageUrl = useMemo(() => AvatarLogic.defaultAvatarUrlForString(idName || name), [idName, name]);
useEffect(() => { useEffect(() => {
// work out the full set of urls to try to load. This is formed like so: // work out the full set of urls to try to load. This is formed like so:
// imageUrls: [ props.url, ...props.urls, default image ] // imageUrls: [ props.url, ...props.urls ]
let _urls = []; let _urls = [];
if (!SettingsStore.getValue("lowBandwidth")) { if (!SettingsStore.getValue("lowBandwidth")) {
_urls = urls || []; _urls = memoizedUrls || [];
if (url) { if (url) {
_urls.unshift(url); // put in urls[0] _urls.unshift(url); // put in urls[0]
} }
} }
if (defaultToInitialLetter) {
_urls.push(defaultImageUrl); // lowest priority
}
// deduplicate URLs // deduplicate URLs
_urls = Array.from(new Set(_urls)); _urls = Array.from(new Set(_urls));
setIndex(0); setIndex(0);
setUrls(_urls); setUrls(_urls);
}, [url, ...(urls || [])]); // eslint-disable-line react-hooks/exhaustive-deps }, [url, memoizedUrls]); // eslint-disable-line react-hooks/exhaustive-deps
const cli = useContext(MatrixClientContext); const cli = useContext(MatrixClientContext);
const onClientSync = useCallback((syncState, prevState) => { const onClientSync = useCallback((syncState, prevState) => {
// Consider the client reconnected if there is no error with syncing. // Consider the client reconnected if there is no error with syncing.
// This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP. // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
const reconnected = syncState !== "ERROR" && prevState !== syncState; const reconnected = syncState !== "ERROR" && prevState !== syncState;
if (reconnected && urlsIndex > 0 ) { // Did we fall back? if (reconnected) {
// Start from the highest priority URL again setIndex(i => i > 0 ? 0 : i);
setIndex(0);
} }
}, [urlsIndex]); }, []);
useEventEmitter(cli, "sync", onClientSync); useEventEmitter(cli, "sync", onClientSync);
const imageUrl = imageUrls[urlsIndex]; const imageUrl = imageUrls[urlsIndex];
return [imageUrl, imageUrl === defaultImageUrl, onError]; return [imageUrl, onError];
}; };
const BaseAvatar = (props) => { const BaseAvatar = (props) => {
@ -96,9 +86,9 @@ const BaseAvatar = (props) => {
...otherProps ...otherProps
} = props; } = props;
const [imageUrl, isDefault, onError] = useImageUrl({url, urls, idName, name, defaultToInitialLetter}); const [imageUrl, onError] = useImageUrl({url, urls, idName, name, defaultToInitialLetter});
if (isDefault) { if (!imageUrl && defaultToInitialLetter) {
const initialLetter = AvatarLogic.getInitialLetter(name); const initialLetter = AvatarLogic.getInitialLetter(name);
const textNode = ( const textNode = (
<span <span
@ -116,7 +106,7 @@ const BaseAvatar = (props) => {
const imgNode = ( const imgNode = (
<img <img
className="mx_BaseAvatar_image" className="mx_BaseAvatar_image"
src={imageUrl} src={AvatarLogic.defaultAvatarUrlForString(idName || name)}
alt="" alt=""
title={title} title={title}
onError={onError} onError={onError}