diff --git a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx index 6f1c88dcdf..94df8d316b 100644 --- a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx @@ -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({ )} - ) } - -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', - }, -}) diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index d17ec47253..8951f0a210 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -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 ( - - - {imageUri && !embedPlayerParams ? ( - + + {({hovered}) => ( + + {imageUri && !embedPlayerParams ? ( - - - ) : undefined} - {embedPlayerParams?.isGif ? ( - - ) : embedPlayerParams ? ( - - ) : undefined} - - - {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && ( - - {link.title || link.uri} - - )} - {link.description ? ( - - {link.description} - - ) : undefined} - - - - - - + ) : embedPlayerParams ? ( + + ) : undefined} + + + + {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && ( + + {link.title || link.uri} + + )} + {link.description ? ( + + {link.description} + + ) : undefined} + + + + - {toNiceDomain(link.uri)} - + + + {toNiceDomain(link.uri)} + + - - - ) -} - -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 ( - - {children} + )} ) } diff --git a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx index 6d5eacd1a0..8ac7ee499d 100644 --- a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx @@ -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 ? ( ) : ( @@ -108,16 +107,6 @@ function Player({ style={styles.webview} setSupportMultipleWindows={false} // Prevent any redirects from opening a new window (ads) /> - - ) } @@ -227,66 +216,34 @@ export function ExternalPlayer({ + style={[aspect, a.overflow_hidden]}> {link.thumb && (!isPlayerActive || isLoading) ? ( <> - ) : ( )} - + )} - {!hideAlt && isPreferredAltText && }