Cleanup of consituent parts, add hover state

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({
       <Pressable
         style={[
           {height: imageDims.height},
-          styles.gifContainer,
+          a.w_full,
-          a.rounded_md,
+          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

@@ -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
+    <Link
-      style={[a.flex_col, a.rounded_md, a.overflow_hidden, a.w_full, style]}>
+      label={link.title || _(msg`Open link to ${niceUrl}`)}
-      <LinkWrapper link={link} onOpen={onOpen}>
+      to={link.uri}
-        {imageUri && !embedPlayerParams ? (
+      onPress={onOpen}
-          <View>
+      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
+          ) : undefined}
-              opaque
+
-              style={[
+          {embedPlayerParams?.isGif ? (
-                {
+            <ExternalGifEmbed link={link} params={embedPlayerParams} />
-                  borderBottomLeftRadius: 0,
+          ) : embedPlayerParams ? (
-                  borderBottomRightRadius: 0,
+            <ExternalPlayer link={link} params={embedPlayerParams} />
-                },
+          ) : undefined}
-              ]}
+
-            />
+          <View
-          </View>
+            style={[
-        ) : undefined}
+              a.flex_1,
-        {embedPlayerParams?.isGif ? (
+              a.pt_sm,
-          <ExternalGifEmbed link={link} params={embedPlayerParams} />
+              {gap: 3},
-        ) : embedPlayerParams ? (
+              hasMedia && a.border_t,
-          <ExternalPlayer link={link} params={embedPlayerParams} />
+              hovered
-        ) : undefined}
+                ? t.atoms.border_contrast_high
-        <View
+                : t.atoms.border_contrast_low,
-          style={[
+            ]}>
-            a.border_b,
+            <View style={[{gap: 3}, a.pb_xs, a.px_md]}>
-            a.border_l,
+              {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && (
-            a.border_r,
+                <Text
-            a.flex_1,
+                  emoji
-            a.pt_sm,
+                  numberOfLines={3}
-            a.gap_xs,
+                  style={[a.text_md, a.font_bold, a.leading_snug]}>
-            a.overflow_hidden,
+                  {link.title || link.uri}
-            t.atoms.border_contrast_low,
+                </Text>
-            {
+              )}
-              borderBottomRightRadius: a.rounded_md.borderRadius,
+              {link.description ? (
-              borderBottomLeftRadius: a.rounded_md.borderRadius,
+                <Text
-            },
+                  emoji
-            !imageUri && !embedPlayerParams && [a.border, a.rounded_md],
+                  numberOfLines={link.thumb ? 2 : 4}
-          ]}>
+                  style={[a.text_sm, a.leading_snug]}>
-          <View style={[a.gap_xs, a.pb_xs, a.px_md]}>
+                  {link.description}
-            {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && (
+                </Text>
-              <Text
+              ) : undefined}
-                emoji
+            </View>
-                numberOfLines={3}
+            <View style={[a.px_md]}>
-                style={[a.text_md, a.font_bold, a.leading_snug]}>
+              <Divider />
-                {link.title || link.uri}
+              <View
-              </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}
                 style={[
-                  a.text_xs,
+                  a.flex_row,
-                  a.leading_tight,
+                  a.align_center,
-                  t.atoms.text_contrast_medium,
+                  a.gap_2xs,
+                  a.pb_sm,
+                  {
+                    paddingTop: 6, // off menu
+                  },
                 ]}>
-                {toNiceDomain(link.uri)}
+                <Globe
-              </Text>
+                  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

@@ -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={[
+        style={[aspect, a.overflow_hidden]}>
-          aspect,
-          a.rounded_md,
-          a.overflow_hidden,
-          {
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-          },
-        ]}>
         {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

@@ -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.absolute,
-          a.overflow_hidden,
+          /*
-          {aspectRatio: params.dimensions!.width / params.dimensions!.height},
+           * 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>