diff options
Diffstat (limited to 'src/view/com/util/post-embeds/ExternalLinkEmbed.tsx')
| -rw-r--r-- | src/view/com/util/post-embeds/ExternalLinkEmbed.tsx | 219 |
1 files changed, 112 insertions, 107 deletions
diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index eb03385d0..0399667b0 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -6,8 +6,6 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {parseAltFromGIFDescription} from '#/lib/gif-alt-text' -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {shareUrl} from '#/lib/sharing' import {parseEmbedPlayerFromUrl} from '#/lib/strings/embed-player' import { @@ -17,13 +15,14 @@ import { import {toNiceDomain} from '#/lib/strings/url-helpers' import {isNative} from '#/platform/detection' import {useExternalEmbedsPrefs} from '#/state/preferences' -import {Link} from '#/view/com/util/Link' import {ExternalGifEmbed} from '#/view/com/util/post-embeds/ExternalGifEmbed' import {ExternalPlayer} from '#/view/com/util/post-embeds/ExternalPlayerEmbed' import {GifEmbed} from '#/view/com/util/post-embeds/GifEmbed' import {atoms as a, useTheme} from '#/alf' -import {MediaInsetBorder} from '#/components/MediaInsetBorder' -import {Text} from '../text/Text' +import {Divider} from '#/components/Divider' +import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' +import {Link} from '#/components/Link' +import {Text} from '#/components/Typography' export const ExternalLinkEmbed = ({ link, @@ -37,16 +36,13 @@ export const ExternalLinkEmbed = ({ hideAlt?: boolean }) => { const {_} = useLingui() - const pal = usePalette('default') const t = useTheme() - const {isMobile} = useWebMediaQueries() const externalEmbedPrefs = useExternalEmbedsPrefs() - + const niceUrl = toNiceDomain(link.uri) const starterPackParsed = parseStarterPackUri(link.uri) const imageUri = starterPackParsed ? getStarterPackOgCard(starterPackParsed.name, starterPackParsed.rkey) : link.thumb - const embedPlayerParams = React.useMemo(() => { const params = parseEmbedPlayerFromUrl(link.uri) @@ -54,122 +50,131 @@ export const ExternalLinkEmbed = ({ return params } }, [link.uri, externalEmbedPrefs]) + const hasMedia = Boolean(imageUri || embedPlayerParams) + + const onShareExternal = useCallback(() => { + if (link.uri && isNative) { + shareUrl(link.uri) + } + }, [link.uri]) if (embedPlayerParams?.source === 'tenor') { const parsedAlt = parseAltFromGIFDescription(link.description) return ( - <GifEmbed - params={embedPlayerParams} - thumb={link.thumb} - altText={parsedAlt.alt} - isPreferredAltText={parsedAlt.isPreferred} - hideAlt={hideAlt} - /> + <View style={style}> + <GifEmbed + params={embedPlayerParams} + thumb={link.thumb} + altText={parsedAlt.alt} + isPreferredAltText={parsedAlt.isPreferred} + hideAlt={hideAlt} + /> + </View> ) } return ( - <View style={[a.flex_col, a.rounded_md, a.w_full]}> - <LinkWrapper link={link} onOpen={onOpen} style={style}> - {imageUri && !embedPlayerParams ? ( - <View> + <Link + label={link.title || _(msg`Open link to ${niceUrl}`)} + to={link.uri} + onPress={onOpen} + onLongPress={onShareExternal}> + {({hovered}) => ( + <View + style={[ + a.transition_color, + a.flex_col, + a.rounded_md, + a.overflow_hidden, + a.w_full, + a.border, + style, + hovered + ? t.atoms.border_contrast_high + : t.atoms.border_contrast_low, + ]}> + {imageUri && !embedPlayerParams ? ( <Image style={{ aspectRatio: 1.91, - borderTopRightRadius: a.rounded_md.borderRadius, - borderTopLeftRadius: a.rounded_md.borderRadius, }} source={{uri: imageUri}} accessibilityIgnoresInvertColors - accessibilityLabel={starterPackParsed ? link.title : undefined} - accessibilityHint={ - starterPackParsed ? _(msg`Navigate to starter pack`) : undefined - } /> - <MediaInsetBorder - opaque - style={[ - { - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, - }, - ]} - /> - </View> - ) : undefined} - {embedPlayerParams?.isGif ? ( - <ExternalGifEmbed link={link} params={embedPlayerParams} /> - ) : embedPlayerParams ? ( - <ExternalPlayer link={link} params={embedPlayerParams} /> - ) : undefined} - <View - style={[ - a.border_b, - a.border_l, - a.border_r, - a.flex_1, - a.py_sm, - t.atoms.border_contrast_low, - { - borderBottomRightRadius: a.rounded_md.borderRadius, - borderBottomLeftRadius: a.rounded_md.borderRadius, - paddingHorizontal: isMobile ? 10 : 14, - }, - !imageUri && !embedPlayerParams && [a.border, a.rounded_md], - ]}> - <Text - type="sm" - numberOfLines={1} - style={[pal.textLight, {marginVertical: 2}]}> - {toNiceDomain(link.uri)} - </Text> - - {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && ( - <Text emoji type="lg-bold" numberOfLines={3} style={[pal.text]}> - {link.title || link.uri} - </Text> - )} - {link.description ? ( - <Text - emoji - type="md" - numberOfLines={link.thumb ? 2 : 4} - style={[pal.text, a.mt_xs]}> - {link.description} - </Text> ) : undefined} - </View> - </LinkWrapper> - </View> - ) -} -function LinkWrapper({ - link, - onOpen, - style, - children, -}: { - link: AppBskyEmbedExternal.ViewExternal - onOpen?: () => void - style?: StyleProp<ViewStyle> - children: React.ReactNode -}) { - const onShareExternal = useCallback(() => { - if (link.uri && isNative) { - shareUrl(link.uri) - } - }, [link.uri]) + {embedPlayerParams?.isGif ? ( + <ExternalGifEmbed link={link} params={embedPlayerParams} /> + ) : embedPlayerParams ? ( + <ExternalPlayer link={link} params={embedPlayerParams} /> + ) : undefined} - return ( - <Link - asAnchor - anchorNoUnderline - href={link.uri} - style={[a.flex_1, a.rounded_sm, style]} - onBeforePress={onOpen} - onLongPress={onShareExternal}> - {children} + <View + style={[ + a.flex_1, + a.pt_sm, + {gap: 3}, + hasMedia && a.border_t, + hovered + ? t.atoms.border_contrast_high + : t.atoms.border_contrast_low, + ]}> + <View style={[{gap: 3}, a.pb_xs, a.px_md]}> + {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && ( + <Text + emoji + numberOfLines={3} + style={[a.text_md, a.font_bold, a.leading_snug]}> + {link.title || link.uri} + </Text> + )} + {link.description ? ( + <Text + emoji + numberOfLines={link.thumb ? 2 : 4} + style={[a.text_sm, a.leading_snug]}> + {link.description} + </Text> + ) : undefined} + </View> + <View style={[a.px_md]}> + <Divider /> + <View + style={[ + a.flex_row, + a.align_center, + a.gap_2xs, + a.pb_sm, + { + paddingTop: 6, // off menu + }, + ]}> + <Globe + size="xs" + style={[ + a.transition_color, + hovered + ? t.atoms.text_contrast_medium + : t.atoms.text_contrast_low, + ]} + /> + <Text + numberOfLines={1} + style={[ + a.transition_color, + a.text_xs, + a.leading_tight, + hovered + ? t.atoms.text_contrast_high + : t.atoms.text_contrast_medium, + ]}> + {toNiceDomain(link.uri)} + </Text> + </View> + </View> + </View> + </View> + )} </Link> ) } |