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 && }