matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: improve static avatar/header behavior

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-27 05:40:45 +01:00
parent f64a846ff8
commit 080d32ad1a
8 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/pl-api/lib/utils/domain.ts Normal file
View File

@ -0,0 +1,23 @@
import type { Account } from '../entities';
const getDomainFromURL = (account: Pick<Account, 'url'>): string => {
try {
const url = account.url;
return new URL(url).host;
} catch {
return '';
}
};
const guessFqn = (account: Pick<Account, 'acct' | 'url'>): string => {
const acct = account.acct;
const [user, domain] = acct.split('@');
if (domain) {
return acct;
} else {
return [user, getDomainFromURL(account)].join('@');
}
};
export { getDomainFromURL, guessFqn };

2
packages/pl-fe/src/components/still-image.tsx
View File

@ -39,7 +39,7 @@ const StillImage: React.FC<IStillImage> = ({
const canvas = useRef<HTMLCanvasElement>(null);
const img = useRef<HTMLImageElement>(null);
const hoverToPlay = src && !autoPlayGif && ((isGif) || src.endsWith('.gif') || src.startsWith('blob:') || (src && staticSrc && src !== staticSrc));
const hoverToPlay = src && !autoPlayGif && (isGif || src.endsWith('.gif') || src.startsWith('blob:') || (src && staticSrc && src !== staticSrc));
const handleImageLoad: React.ReactEventHandler<HTMLImageElement> = (e) => {
if (hoverToPlay && !staticSrc && canvas.current && img.current) {

2
packages/pl-fe/src/components/ui/avatar.tsx
View File

@ -24,7 +24,7 @@ const messages = defineMessages({
avatar_with_content: { id: 'account.avatar.with_content', defaultMessage: 'Avatar for {username}: {alt}' },
});
interface IAvatar extends Pick<IStillImage, 'alt' | 'src' | 'onError' | 'className'> {
interface IAvatar extends Pick<IStillImage, 'alt' | 'src' | 'staticSrc' | 'onError' | 'className'> {
/** Width and height of the avatar in pixels. */
size?: number;
/** Whether the user is a cat. */

2
packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
View File

@ -154,7 +154,7 @@ const ChatPageMain = () => {
src={require('@phosphor-icons/core/regular/info.svg')}
component={() => (
<HStack className='px-4 py-2' alignItems='center' space={3}>
<Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
<Avatar src={chat.account.avatar} staticSrc={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
<Stack>
<Text weight='semibold'>{chat.account.display_name}</Text>
<Text size='sm' theme='primary'>@{chat.account.acct}</Text>

2
packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
View File

@ -110,7 +110,7 @@ const ChatSettings = () => {
<Stack space={4} className='mx-auto w-5/6'>
<HStack alignItems='center' space={3}>
<Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
<Avatar src={chat.account.avatar} staticSrc={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
<Stack>
<Text weight='semibold'>{chat.account.display_name}</Text>
<Text size='sm' theme='primary'>@{chat.account.acct}</Text>

2
packages/pl-fe/src/normalizers/account.ts
View File

@ -8,9 +8,7 @@ const normalizeAccount = (account: BaseAccount) => {
mute_expires_at: null,
...account,
avatar: account.avatar || account.avatar_static || missingAvatar,
avatar_static: account.avatar_static || missingAvatar,
header: account.header || account.header_static || missingHeader,
header_static: account.header_static || missingHeader,
};
};

2
packages/pl-fe/src/normalizers/group.ts
View File

@ -7,9 +7,7 @@ const normalizeGroup = (group: BaseGroup) => {
return {
...group,
avatar: group.avatar || group.avatar_static || missingAvatar,
avatar_static: group.avatar_static || missingAvatar,
header: group.header || group.header_static || missingHeader,
header_static: group.header_static || missingHeader,
};
};

8
packages/pl-fe/src/pages/account-lists/directory.tsx
View File

@ -12,6 +12,7 @@ import LoadMore from 'pl-fe/components/load-more';
import { ParsedContent } from 'pl-fe/components/parsed-content';
import { RadioGroup, RadioItem } from 'pl-fe/components/radio';
import RelativeTimestamp from 'pl-fe/components/relative-timestamp';
import StillImage from 'pl-fe/components/still-image';
import Avatar from 'pl-fe/components/ui/avatar';
import { CardTitle } from 'pl-fe/components/ui/card';
import Column from 'pl-fe/components/ui/column';
@ -22,7 +23,6 @@ import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useInstance } from 'pl-fe/hooks/use-instance';
import { useDirectory } from 'pl-fe/queries/accounts/use-directory';
import { useSettings } from 'pl-fe/stores/settings';
import { shortNumberFormat } from 'pl-fe/utils/numbers';
const messages = defineMessages({
@ -40,7 +40,6 @@ interface IAccountCard {
const AccountCard: React.FC<IAccountCard> = ({ id }) => {
const me = useAppSelector((state) => state.me);
const { account } = useAccount(id);
const { autoPlayGif } = useSettings();
if (!account) return null;
@ -62,8 +61,9 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
<ActionButton account={account} small />
</div>
<img
src={autoPlayGif ? account.header : account.header_static}
<StillImage
src={account.header}
staticSrc={account.header_static}
alt={account.header_description}
className='h-32 w-full rounded-t-lg object-cover'
/>