acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Cleanup of consituent parts, add hover state

Browse Source
This commit is contained in:
Eric Bailey
2024-10-10 13:51:25 -05:00
parent 8b5d61b382
commit aece02252c
4 changed files with 124 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
+98 -113
View File
@@ -15,14 +15,13 @@ 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 {Divider} from '#/components/Divider'
import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
import {Link} from '#/components/Link'
import {Text} from '#/components/Typography'
export const ExternalLinkEmbed = ({
@@ -39,12 +38,11 @@ export const ExternalLinkEmbed = ({
const {_} = useLingui()
const t = useTheme()
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)
@@ -52,6 +50,13 @@ 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)
@@ -67,127 +72,107 @@ export const ExternalLinkEmbed = ({
}
return (
<View
style={[a.flex_col, a.rounded_md, a.overflow_hidden, a.w_full, style]}>
<LinkWrapper link={link} onOpen={onOpen}>
{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.pt_sm,
a.gap_xs,
a.overflow_hidden,
t.atoms.border_contrast_low,
{
borderBottomRightRadius: a.rounded_md.borderRadius,
borderBottomLeftRadius: a.rounded_md.borderRadius,
},
!imageUri && !embedPlayerParams && [a.border, a.rounded_md],
]}>
<View style={[a.gap_xs, 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" fill={t.atoms.text_contrast_low.color} />
<Text
numberOfLines={1}
) : undefined}
{embedPlayerParams?.isGif ? (
<ExternalGifEmbed link={link} params={embedPlayerParams} />
) : embedPlayerParams ? (
<ExternalPlayer link={link} params={embedPlayerParams} />
) : undefined}
<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.text_xs,
a.leading_tight,
t.atoms.text_contrast_medium,
a.flex_row,
a.align_center,
a.gap_2xs,
a.pb_sm,
{
paddingTop: 6, // off menu
},
]}>
{toNiceDomain(link.uri)}
</Text>
<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>
</LinkWrapper>
</View>
)
}
function LinkWrapper({
link,
onOpen,
children,
}: {
link: AppBskyEmbedExternal.ViewExternal
onOpen?: () => void
children: React.ReactNode
}) {
const onShareExternal = useCallback(() => {
if (link.uri && isNative) {
shareUrl(link.uri)
}
}, [link.uri])
return (
<Link
asAnchor
anchorNoUnderline
href={link.uri}
onBeforePress={onOpen}
onLongPress={onShareExternal}>
{children}
)}
</Link>
)
}