Blame · Avatar.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type {DetailedHTMLProps} from 'react';
b69ab31	9
b69ab31	10	import * as stylex from '@stylexjs/stylex';
b69ab31	11	import {useAtomValue} from 'jotai';
b69ab31	12	import {colors, radius} from '../../components/theme/tokens.stylex';
b69ab31	13	import serverAPI from './ClientToServerAPI';
b69ab31	14	import {t} from './i18n';
b69ab31	15	import {atomFamilyWeak, lazyAtom} from './jotaiUtils';
b69ab31	16
b69ab31	17	const avatarUrl = atomFamilyWeak((author: string) => {
b69ab31	18	// Rate limitor for the same author is by lazyAtom and atomFamilyWeak caching.
b69ab31	19	return lazyAtom(async () => {
b69ab31	20	serverAPI.postMessage({
b69ab31	21	type: 'fetchAvatars',
b69ab31	22	authors: [author],
b69ab31	23	});
b69ab31	24	const result = await serverAPI.nextMessageMatching('fetchedAvatars', ({authors}) =>
b69ab31	25	authors.includes(author),
b69ab31	26	);
b69ab31	27	return result.avatars.get(author);
b69ab31	28	}, undefined);
b69ab31	29	});
b69ab31	30
b69ab31	31	export function AvatarImg({
b69ab31	32	url,
b69ab31	33	username,
b69ab31	34	xstyle,
b69ab31	35	...rest
b69ab31	36	}: {url?: string; username: string; xstyle?: stylex.StyleXStyles} & DetailedHTMLProps<
b69ab31	37	React.ImgHTMLAttributes<HTMLImageElement>,
b69ab31	38	HTMLImageElement
b69ab31	39	>) {
b69ab31	40	return url == null ? null : (
b69ab31	41	<img
b69ab31	42	{...stylex.props(styles.circle, xstyle)}
b69ab31	43	src={url}
b69ab31	44	width={14}
b69ab31	45	height={14}
b69ab31	46	alt={t("$user's avatar photo", {replace: {$user: username}})}
b69ab31	47	{...rest}
b69ab31	48	/>
b69ab31	49	);
b69ab31	50	}
b69ab31	51
b69ab31	52	const styles = stylex.create({
b69ab31	53	circle: {
b69ab31	54	width: 14,
b69ab31	55	height: 14,
b69ab31	56	border: '2px solid',
b69ab31	57	borderRadius: radius.full,
b69ab31	58	borderColor: colors.fg,
b69ab31	59	},
b69ab31	60	empty: {
b69ab31	61	content: '',
b69ab31	62	backgroundColor: 'var(--foreground)',
b69ab31	63	},
b69ab31	64	});
b69ab31	65
b69ab31	66	export function BlankAvatar() {
b69ab31	67	return <div {...stylex.props(styles.circle, styles.empty)} />;
b69ab31	68	}
b69ab31	69
b69ab31	70	export function Avatar({
b69ab31	71	username,
b69ab31	72	...rest
b69ab31	73	}: {username: string} & DetailedHTMLProps<
b69ab31	74	React.ImgHTMLAttributes<HTMLImageElement>,
b69ab31	75	HTMLImageElement
b69ab31	76	>) {
b69ab31	77	const url = useAtomValue(avatarUrl(username));
b69ab31	78	return url == null ? <BlankAvatar /> : <AvatarImg url={url} username={username} {...rest} />;
b69ab31	79	}
b69ab31	80
b69ab31	81	/** Render as a SVG pattern */
b69ab31	82	export function AvatarPattern({
b69ab31	83	username,
b69ab31	84	size,
b69ab31	85	id,
b69ab31	86	fallbackFill,
b69ab31	87	}: {
b69ab31	88	username: string;
b69ab31	89	size: number;
b69ab31	90	id: string;
b69ab31	91	fallbackFill: string;
b69ab31	92	}) {
b69ab31	93	const img = useAtomValue(avatarUrl(username));
b69ab31	94	return (
b69ab31	95	<pattern
b69ab31	96	id={id}
b69ab31	97	patternUnits="userSpaceOnUse"
b69ab31	98	width={size}
b69ab31	99	height={size}
b69ab31	100	x={-size / 2}
b69ab31	101	y={-size / 2}>
b69ab31	102	<rect width={size} height={size} fill={fallbackFill} strokeWidth={0} />
b69ab31	103	<image href={img} width={size} height={size} />
b69ab31	104	</pattern>
b69ab31	105	);
b69ab31	106	}