[APP-2160] Drop manual memoization in StandardSiteEmbed

React Compiler handles this; the explicit useMemo on themeColors was
also missing t in its deps, causing stale colors on theme toggle.
This commit is contained in:
Eric Bailey
2026-05-22 14:36:41 -05:00
parent 281ce95850
commit ee8d866b72
@@ -1,4 +1,3 @@
import {useCallback, useMemo} from 'react'
import {type StyleProp, View, type ViewStyle} from 'react-native' import {type StyleProp, View, type ViewStyle} from 'react-native'
import {Image} from 'expo-image' import {Image} from 'expo-image'
import {type AppBskyEmbedExternal, AtUri} from '@atproto/api' import {type AppBskyEmbedExternal, AtUri} from '@atproto/api'
@@ -7,13 +6,8 @@ import {useLingui} from '@lingui/react/macro'
import {useHaptics} from '#/lib/haptics' import {useHaptics} from '#/lib/haptics'
import {shareUrl} from '#/lib/sharing' import {shareUrl} from '#/lib/sharing'
import {
exemptExternalEmbedSources,
parseEmbedPlayerFromUrl,
} from '#/lib/strings/embed-player'
import {niceDate} from '#/lib/strings/time' import {niceDate} from '#/lib/strings/time'
import {toNiceDomain} from '#/lib/strings/url-helpers' import {toNiceDomain} from '#/lib/strings/url-helpers'
import {useExternalEmbedsPrefs} from '#/state/preferences'
import {UserAvatar} from '#/view/com/util/UserAvatar' import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useBreakpoints, useTheme, utils} from '#/alf' import {atoms as a, useBreakpoints, useTheme, utils} from '#/alf'
import {ButtonIcon, ButtonText} from '#/components/Button' import {ButtonIcon, ButtonText} from '#/components/Button'
@@ -42,30 +36,28 @@ export type ThemeColors = {
export function useStandardSitePublisherConfig( export function useStandardSitePublisherConfig(
view: AppBskyEmbedExternal.ViewExternal, view: AppBskyEmbedExternal.ViewExternal,
) { ) {
return useMemo(() => { try {
try { const u = new URL(view.source?.uri || '')
const u = new URL(view.source?.uri || '') if (u.host.endsWith('leaflet.pub')) {
if (u.host.endsWith('leaflet.pub')) { return {
return { name: 'Leaflet',
name: 'Leaflet', Icon: Leaflet,
Icon: Leaflet, }
} } else if (u.host.endsWith('pckt.blog')) {
} else if (u.host.endsWith('pckt.blog')) { return {
return { name: 'pckt',
name: 'pckt', Icon: Pckt,
Icon: Pckt, }
} } else if (u.host.endsWith('offprint.app')) {
} else if (u.host.endsWith('offprint.app')) { return {
return { name: 'Offprint',
name: 'Offprint', Icon: Offprint,
Icon: Offprint,
}
} }
return null
} catch (e) {
return null
} }
}, [view]) return null
} catch (e) {
return null
}
} }
export const StandardSiteEmbed = ({ export const StandardSiteEmbed = ({
@@ -82,58 +74,47 @@ export const StandardSiteEmbed = ({
const {t: l, i18n} = useLingui() const {t: l, i18n} = useLingui()
const t = useTheme() const t = useTheme()
const playHaptic = useHaptics() const playHaptic = useHaptics()
const externalEmbedPrefs = useExternalEmbedsPrefs()
const niceUrl = toNiceDomain(view.uri) const niceUrl = toNiceDomain(view.uri)
const imageUri = view.thumb const imageUri = view.thumb
const embedPlayerParams = useMemo(() => { const hasMedia = Boolean(imageUri)
const params = parseEmbedPlayerFromUrl(view.uri)
if (!params) return
const canShow = externalEmbedPrefs?.[params.source] !== 'hide'
if (canShow || exemptExternalEmbedSources.has(params.source)) {
return params
}
}, [view.uri, externalEmbedPrefs])
const hasMedia = Boolean(imageUri || embedPlayerParams)
const isStandard = view.associatedRefs?.some(ref => const isStandard = view.associatedRefs?.some(ref =>
new AtUri(ref.uri).collection.startsWith('site.standard.'), new AtUri(ref.uri).collection.startsWith('site.standard.'),
) )
const isStandardPublication = isStandardSitePublicationEmbed(view) const isStandardPublication = isStandardSitePublicationEmbed(view)
const themeColors = useMemo(() => { let themeColors: ThemeColors = {
let custom = false custom: false,
let accent = t.atoms.text.color accent: t.atoms.text.color,
let accentForeground = t.atoms.text_inverted.color accentForeground: t.atoms.text_inverted.color,
const {accentRGB, accentForegroundRGB} = view.source?.theme || {} }
if (accentRGB && accentForegroundRGB) { const {accentRGB, accentForegroundRGB} = view.source?.theme || {}
custom = true if (accentRGB && accentForegroundRGB) {
accent = utils.rgbToHex(accentRGB.r, accentRGB.g, accentRGB.b) themeColors = {
accentForeground = utils.rgbToHex( custom: true,
accent: utils.rgbToHex(accentRGB.r, accentRGB.g, accentRGB.b),
accentForeground: utils.rgbToHex(
accentForegroundRGB.r, accentForegroundRGB.r,
accentForegroundRGB.g, accentForegroundRGB.g,
accentForegroundRGB.b, accentForegroundRGB.b,
) ),
} }
return {custom, accent, accentForeground} }
}, [view])
const maybeAuthorDid = useMemo(() => { const publicationUri = view.associatedRefs?.find(
const publicationUri = view.associatedRefs?.find( ref => new AtUri(ref.uri).collection === 'site.standard.publication',
ref => new AtUri(ref.uri).collection === 'site.standard.publication', )?.uri
)?.uri const maybeAuthorDid = publicationUri ? new AtUri(publicationUri)?.did : null
if (!publicationUri) return null
return new AtUri(publicationUri)?.did
}, [view])
const onPress = useCallback(() => { const onPress = () => {
playHaptic('Light') playHaptic('Light')
onOpen?.() onOpen?.()
}, [playHaptic, onOpen]) }
const onLongPress = useCallback(() => { const onLongPress = () => {
if (view.uri && IS_NATIVE) { if (view.uri && IS_NATIVE) {
playHaptic('Heavy') playHaptic('Heavy')
shareUrl(view.uri) shareUrl(view.uri)
} }
}, [view.uri, playHaptic]) }
if (isStandardPublication) { if (isStandardPublication) {
return ( return (