pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 13:05:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): freeze embed author and footer icons under motion settings (#1853)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:31:40 +02:00
1 parent a98a9fe6a9
commit aad7e1a551
2 files changed
+14 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/channel/components/embeds/ChannelEmbed.module.css
-4
View File
@@ -113,10 +113,6 @@
border-radius: 50%;
}
.embedIconPending {
opacity: 0;
}
.embedTitle {
font-size: 1em;
font-weight: 600;
fluxer_app/src/features/channel/components/embeds/channel_embed/EmbedParts.tsx
+14 -14
View File
@@ -1,11 +1,10 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import {useAnimatedMediaPlaybackAllowed} from '@app/features/app/hooks/useAnimatedMediaPlayback';
import {useShouldAnimate} from '@app/features/app/hooks/useShouldAnimate';
import styles from '@app/features/channel/components/embeds/ChannelEmbed.module.css';
import {EmbedLink} from '@app/features/channel/components/embeds/channel_embed/EmbedLink';
import {SafeMarkdown} from '@app/features/messaging/components/markdown';
import {MarkdownContext} from '@app/features/messaging/components/markdown/renderers/RendererTypes';
import {useCachedImageLoaded} from '@app/features/messaging/hooks/useCachedImageLoaded';
import {buildMediaProxyURL} from '@app/features/messaging/utils/MediaProxyUtils';
import * as DateUtils from '@app/features/user/utils/DateFormatting';
import type {EmbedAuthor, EmbedField, EmbedFooter} from '@fluxer/schema/src/domains/message/EmbedSchemas';
@@ -14,6 +13,13 @@ import {clsx} from 'clsx';
import {observer} from 'mobx-react-lite';
import {type FC, useMemo} from 'react';
const STILL_EMBED_ICON_OPTIONS = {format: 'webp', animated: false} as const;
const resolveEmbedIconSrc = (proxyIconUrl: string | undefined, allowMotion: boolean): string | undefined => {
if (!proxyIconUrl) return undefined;
return buildMediaProxyURL(proxyIconUrl, allowMotion ? {} : STILL_EMBED_ICON_OPTIONS);
};
export const EmbedProvider: FC<{provider?: EmbedAuthor}> = observer(({provider}) => {
if (!provider) return null;
return (
@@ -29,18 +35,15 @@ export const EmbedProvider: FC<{provider?: EmbedAuthor}> = observer(({provider})
);
});
export const EmbedAuthorComponent: FC<{author?: EmbedAuthor}> = observer(({author}) => {
const animatedMediaPlaybackAllowed = useAnimatedMediaPlaybackAllowed();
const iconSrc = author?.proxy_icon_url
? buildMediaProxyURL(author.proxy_icon_url, animatedMediaPlaybackAllowed ? {} : {format: 'webp', animated: false})
: undefined;
const iconLoaded = useCachedImageLoaded(iconSrc);
const allowIconMotion = useShouldAnimate({kind: 'gif'});
const iconSrc = resolveEmbedIconSrc(author?.proxy_icon_url, allowIconMotion);
if (!author) return null;
return (
<div className={styles.embedAuthor} data-flx="channel.embeds.embed.embed-author-component.embed-author">
{iconSrc && (
<img
alt=""
className={clsx(styles.embedAuthorIcon, !iconLoaded && styles.embedIconPending)}
className={styles.embedAuthorIcon}
src={iconSrc}
width={24}
height={24}
@@ -178,12 +181,9 @@ export const EmbedFooterComponent: FC<{
channelId?: string;
}> = observer(({timestamp, footer, messageId, channelId}) => {
const {i18n} = useLingui();
const animatedMediaPlaybackAllowed = useAnimatedMediaPlaybackAllowed();
const allowIconMotion = useShouldAnimate({kind: 'gif'});
const formattedTimestamp = timestamp ? DateUtils.getRelativeDateString(timestamp, i18n) : undefined;
const iconSrc = footer?.proxy_icon_url
? buildMediaProxyURL(footer.proxy_icon_url, animatedMediaPlaybackAllowed ? {} : {format: 'webp', animated: false})
: undefined;
const iconLoaded = useCachedImageLoaded(iconSrc);
const iconSrc = resolveEmbedIconSrc(footer?.proxy_icon_url, allowIconMotion);
if (!(footer || formattedTimestamp)) return null;
return (
<div
@@ -193,7 +193,7 @@ export const EmbedFooterComponent: FC<{
{iconSrc && (
<img
alt=""
className={clsx(styles.embedFooterIcon, !iconLoaded && styles.embedIconPending)}
className={styles.embedFooterIcon}
src={iconSrc}
width={20}
height={20}