Use the existing ExternalLinkEmbed for embed previews in the compos…

…er (#3579)

* use existing `ExternalLinkEmbed` for showing previews

* cleanup

src/view/com/composer/ExternalEmbed.tsx

@@ -1,18 +1,15 @@
 import React from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import {TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {AutoSizedImage} from '../util/images/AutoSizedImage'
-import {Text} from '../util/text/Text'
-import {s} from 'lib/styles'
-import {usePalette} from 'lib/hooks/usePalette'
-import {ExternalEmbedDraft} from 'lib/api/index'
-import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {ExternalEmbedDraft} from 'lib/api/index'
+import {s} from 'lib/styles'
+import {ExternalLinkEmbed} from 'view/com/util/post-embeds/ExternalLinkEmbed'
+import {atoms as a, useTheme} from '#/alf'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
 
 export const ExternalEmbed = ({
   link,
@@ -21,50 +18,69 @@ export const ExternalEmbed = ({
   link?: ExternalEmbedDraft
   onRemove: () => void
 }) => {
-  const pal = usePalette('default')
-  const palError = usePalette('error')
+  const t = useTheme()
   const {_} = useLingui()
-  if (!link) {
-    return <View />
-  }
+
+  const linkInfo = React.useMemo(
+    () =>
+      link && {
+        title: link.meta?.title ?? link.uri,
+        uri: link.uri,
+        description: link.meta?.description ?? '',
+        thumb: link.localThumb?.path,
+      },
+    [link],
+  )
+
+  if (!link) return null
+
   return (
-    <View style={[styles.outer, pal.view, pal.border]}>
+    <View
+      style={[
+        a.border,
+        a.rounded_sm,
+        a.mt_2xl,
+        a.mb_xl,
+        a.overflow_hidden,
+        t.atoms.border_contrast_medium,
+      ]}>
       {link.isLoading ? (
         <View
-          style={[styles.image, {backgroundColor: pal.colors.backgroundLight}]}>
-          <ActivityIndicator size="large" style={styles.spinner} />
+          style={[
+            a.align_center,
+            a.justify_center,
+            a.py_5xl,
+            t.atoms.bg_contrast_25,
+          ]}>
+          <Loader size="xl" />
         </View>
-      ) : link.localThumb ? (
-        <AutoSizedImage uri={link.localThumb.path} style={styles.image} />
-      ) : undefined}
-      <View style={styles.inner}>
-        {!!link.meta?.title && (
-          <Text type="sm-bold" numberOfLines={2} style={[pal.text]}>
-            {link.meta.title}
-          </Text>
-        )}
-        <Text type="sm" numberOfLines={1} style={[pal.textLight, styles.uri]}>
-          {link.uri}
-        </Text>
-        {!!link.meta?.description && (
-          <Text
-            type="sm"
-            numberOfLines={2}
-            style={[pal.text, styles.description]}>
-            {link.meta.description}
+      ) : link.meta?.error ? (
+        <View
+          style={[a.justify_center, a.p_md, a.gap_xs, t.atoms.bg_contrast_25]}>
+          <Text numberOfLines={1} style={t.atoms.text_contrast_high}>
+            {link.uri}
           </Text>
-        )}
-        {link.meta?.error ? (
-          <Text
-            type="sm"
-            numberOfLines={2}
-            style={[{color: palError.colors.background}, styles.description]}>
+          <Text numberOfLines={2} style={[{color: t.palette.negative_400}]}>
             {link.meta.error}
           </Text>
-        ) : null}
-      </View>
+        </View>
+      ) : linkInfo ? (
+        <View style={{pointerEvents: 'none'}}>
+          <ExternalLinkEmbed link={linkInfo} />
+        </View>
+      ) : null}
       <TouchableOpacity
-        style={styles.removeBtn}
+        style={{
+          position: 'absolute',
+          top: 10,
+          right: 10,
+          height: 36,
+          width: 36,
+          backgroundColor: 'rgba(0, 0, 0, 0.75)',
+          borderRadius: 18,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
         onPress={onRemove}
         accessibilityRole="button"
         accessibilityLabel={_(msg`Remove image preview`)}
@@ -75,41 +91,3 @@ export const ExternalEmbed = ({
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  outer: {
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 20,
-    marginBottom: 10,
-  },
-  inner: {
-    padding: 10,
-  },
-  image: {
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    width: '100%',
-    maxHeight: 200,
-  },
-  removeBtn: {
-    position: 'absolute',
-    top: 10,
-    right: 10,
-    width: 36,
-    height: 36,
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    borderRadius: 18,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  spinner: {
-    marginTop: 60,
-  },
-  uri: {
-    marginTop: 2,
-  },
-  description: {
-    marginTop: 4,
-  },
-})