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/ExternalGifEmbed.tsx
+2 -39
View File
@@ -4,7 +4,6 @@ import {
GestureResponderEvent,
LayoutChangeEvent,
Pressable,
StyleSheet,
} from 'react-native'
import {Image, ImageLoadEventData} from 'expo-image'
import {AppBskyEmbedExternal} from '@atproto/api'
@@ -18,7 +17,6 @@ import {atoms as a, useTheme} from '#/alf'
import {useDialogControl} from '#/components/Dialog'
import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent'
import {Fill} from '#/components/Fill'
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
export function ExternalGifEmbed({
@@ -116,8 +114,8 @@ export function ExternalGifEmbed({
<Pressable
style={[
{height: imageDims.height},
styles.gifContainer,
a.rounded_md,
a.w_full,
a.overflow_hidden,
a.overflow_hidden,
{
borderBottomLeftRadius: 0,
@@ -166,42 +164,7 @@ export function ExternalGifEmbed({
)}
</Fill>
)}
<MediaInsetBorder
opaque
style={[
{
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
]}
/>
</Pressable>
</>
)
}
const styles = StyleSheet.create({
topRadius: {
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
},
layer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
overlayContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
overlayLayer: {
zIndex: 2,
},
gifContainer: {
width: '100%',
overflow: 'hidden',
},
})
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>
)
}
src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
+3 -52
View File
@@ -29,7 +29,6 @@ import {atoms as a, useTheme} from '#/alf'
import {useDialogControl} from '#/components/Dialog'
import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent'
import {Fill} from '#/components/Fill'
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
import {EventStopper} from '../EventStopper'
@@ -59,7 +58,7 @@ function PlaceholderOverlay({
accessibilityLabel={_(msg`Play Video`)}
accessibilityHint={_(msg`Play Video`)}
onPress={onPress}
style={[styles.overlayContainer, styles.topRadius]}>
style={[styles.overlayContainer]}>
{!isPlayerActive ? (
<PlayButtonIcon />
) : (
@@ -108,16 +107,6 @@ function Player({
style={styles.webview}
setSupportMultipleWindows={false} // Prevent any redirects from opening a new window (ads)
/>
<MediaInsetBorder
opaque
style={[
{
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
]}
/>
</EventStopper>
)
}
@@ -227,66 +216,34 @@ export function ExternalPlayer({
<Animated.View
ref={viewRef}
collapsable={false}
style={[
aspect,
a.rounded_md,
a.overflow_hidden,
{
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
]}>
style={[aspect, a.overflow_hidden]}>
{link.thumb && (!isPlayerActive || isLoading) ? (
<>
<Image
style={[a.flex_1, styles.topRadius]}
style={[a.flex_1]}
source={{uri: link.thumb}}
accessibilityIgnoresInvertColors
/>
<Fill
style={[
a.rounded_md,
t.name === 'light' ? t.atoms.bg_contrast_975 : t.atoms.bg,
{
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
opacity: 0.3,
},
]}
/>
<MediaInsetBorder
opaque
style={[
{
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
]}
/>
</>
) : (
<Fill
style={[
a.rounded_md,
{
backgroundColor:
t.name === 'light' ? t.palette.contrast_975 : 'black',
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
opacity: 0.3,
},
]}
/>
)}
<MediaInsetBorder
opaque
style={[
{
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
]}
/>
<PlaceholderOverlay
isLoading={isLoading}
isPlayerActive={isPlayerActive}
@@ -303,10 +260,6 @@ export function ExternalPlayer({
}
const styles = StyleSheet.create({
topRadius: {
borderTopLeftRadius: a.rounded_md.borderRadius,
borderTopRightRadius: a.rounded_md.borderRadius,
},
overlayContainer: {
flex: 1,
justifyContent: 'center',
@@ -319,8 +272,6 @@ const styles = StyleSheet.create({
zIndex: 3,
},
webview: {
borderTopRightRadius: a.rounded_md.borderRadius,
borderTopLeftRadius: a.rounded_md.borderRadius,
backgroundColor: 'transparent',
},
gifContainer: {
src/view/com/util/post-embeds/GifEmbed.tsx
+21 -8
View File
@@ -18,7 +18,6 @@ import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
import {atoms as a, useTheme} from '#/alf'
import {Fill} from '#/components/Fill'
import {Loader} from '#/components/Loader'
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
import * as Prompt from '#/components/Prompt'
import {Text} from '#/components/Typography'
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
@@ -51,7 +50,6 @@ function PlaybackControls({
a.inset_0,
a.w_full,
a.h_full,
a.rounded_md,
{
zIndex: 2,
backgroundColor: !isLoaded
@@ -114,12 +112,28 @@ export function GifEmbed({
}, [])
return (
<View style={[a.rounded_md, a.overflow_hidden, a.mt_sm, style]}>
<View
style={[
a.rounded_md,
a.overflow_hidden,
a.mt_sm,
a.border,
t.atoms.border_contrast_low,
{aspectRatio: params.dimensions!.width / params.dimensions!.height},
style,
]}>
<View
style={[
a.rounded_md,
a.overflow_hidden,
{aspectRatio: params.dimensions!.width / params.dimensions!.height},
a.absolute,
/*
* Aspect ratio was being clipped weirdly on web -esb
*/
{
top: -2,
bottom: -2,
left: -2,
right: -2,
},
]}>
<PlaybackControls
onPress={onPress}
@@ -129,7 +143,7 @@ export function GifEmbed({
<GifView
source={params.playerUri}
placeholderSource={thumb}
style={[a.flex_1, a.rounded_md]}
style={[a.flex_1]}
autoplay={!autoplayDisabled}
onPlayerStateChange={onPlayerStateChange}
ref={playerRef}
@@ -146,7 +160,6 @@ export function GifEmbed({
]}
/>
)}
<MediaInsetBorder />
{!hideAlt && isPreferredAltText && <AltText text={altText} />}
</View>
</View>