diff --git a/fluxer_app/src/features/channel/components/embeds/ChannelEmbed.module.css b/fluxer_app/src/features/channel/components/embeds/ChannelEmbed.module.css index 62f894148..745f0d265 100644 --- a/fluxer_app/src/features/channel/components/embeds/ChannelEmbed.module.css +++ b/fluxer_app/src/features/channel/components/embeds/ChannelEmbed.module.css @@ -113,10 +113,6 @@ border-radius: 50%; } -.embedIconPending { - opacity: 0; -} - .embedTitle { font-size: 1em; font-weight: 600; diff --git a/fluxer_app/src/features/channel/components/embeds/channel_embed/EmbedParts.tsx b/fluxer_app/src/features/channel/components/embeds/channel_embed/EmbedParts.tsx index fb18fb94c..abd9edf5a 100644 --- a/fluxer_app/src/features/channel/components/embeds/channel_embed/EmbedParts.tsx +++ b/fluxer_app/src/features/channel/components/embeds/channel_embed/EmbedParts.tsx @@ -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 (