[Live] Add warning if link is missing image (#8393)

src/components/live/EditLiveDialog.tsx

@@ -1,6 +1,5 @@
 import {useMemo, useState} from 'react'
 import {View} from 'react-native'
-import {Image} from 'expo-image'
 import {
   type AppBskyActorDefs,
   AppBskyActorStatus,
@@ -8,28 +7,23 @@ import {
 } from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useQuery} from '@tanstack/react-query'
 import {differenceInMinutes} from 'date-fns'
 
-import {getLinkMeta} from '#/lib/link-meta/link-meta'
 import {cleanError} from '#/lib/strings/errors'
-import {toNiceDomain} from '#/lib/strings/url-helpers'
 import {definitelyUrl} from '#/lib/strings/url-helpers'
-import {useAgent} from '#/state/session'
 import {useTickEveryMinute} from '#/state/shell'
-import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {atoms as a, platform, useTheme, web} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
-import {CircleX_Stroke2_Corner0_Rounded as CircleXIcon} from '#/components/icons/CircleX'
 import {Clock_Stroke2_Corner0_Rounded as ClockIcon} from '#/components/icons/Clock'
-import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
+import {LinkPreview} from './LinkPreview'
 import {
+  useLiveLinkMetaQuery,
   useRemoveLiveStatusMutation,
   useUpsertLiveStatusMutation,
 } from './queries'
@@ -62,10 +56,9 @@ function DialogInner({
   const control = Dialog.useDialogContext()
   const {_, i18n} = useLingui()
   const t = useTheme()
-  const agent = useAgent()
+
   const [liveLink, setLiveLink] = useState(embed.external.uri)
   const [liveLinkError, setLiveLinkError] = useState('')
-  const [imageLoadError, setImageLoadError] = useState(false)
   const tick = useTickEveryMinute()
 
   const liveLinkUrl = definitelyUrl(liveLink)
@@ -78,14 +71,7 @@ function DialogInner({
     isSuccess: hasValidLinkMeta,
     isLoading: linkMetaLoading,
     error: linkMetaError,
-  } = useQuery({
-    enabled: !!debouncedUrl,
-    queryKey: ['link-meta', debouncedUrl],
-    queryFn: async () => {
-      if (!debouncedUrl) return null
-      return getLinkMeta(agent, debouncedUrl)
-    },
-  })
+  } = useLiveLinkMetaQuery(debouncedUrl)
 
   const record = useMemo(() => {
     if (!AppBskyActorStatus.isRecord(status.record)) return null
@@ -208,85 +194,7 @@ function DialogInner({
             </View>
           )}
 
-          {(linkMeta || linkMetaLoading) && (
-            <View
-              style={[
-                a.w_full,
-                a.border,
-                t.atoms.border_contrast_low,
-                t.atoms.bg,
-                a.flex_row,
-                a.rounded_sm,
-                a.overflow_hidden,
-                a.align_stretch,
-              ]}>
-              {(!linkMeta || linkMeta.image) && (
-                <View
-                  style={[
-                    t.atoms.bg_contrast_25,
-                    {minHeight: 64, width: 114},
-                    a.justify_center,
-                    a.align_center,
-                  ]}>
-                  {linkMeta?.image && (
-                    <Image
-                      source={linkMeta.image}
-                      accessibilityIgnoresInvertColors
-                      transition={200}
-                      style={[a.absolute, a.inset_0]}
-                      contentFit="cover"
-                      onLoad={() => setImageLoadError(false)}
-                      onError={() => setImageLoadError(true)}
-                    />
-                  )}
-                  {linkMeta && imageLoadError && (
-                    <CircleXIcon
-                      style={[t.atoms.text_contrast_low]}
-                      size="xl"
-                    />
-                  )}
-                </View>
-              )}
-              <View
-                style={[
-                  a.flex_1,
-                  a.justify_center,
-                  a.py_sm,
-                  a.gap_xs,
-                  a.px_md,
-                ]}>
-                {linkMeta ? (
-                  <>
-                    <Text
-                      numberOfLines={2}
-                      style={[a.leading_snug, a.font_bold, a.text_md]}>
-                      {linkMeta.title || linkMeta.url}
-                    </Text>
-                    <View style={[a.flex_row, a.align_center, a.gap_2xs]}>
-                      <GlobeIcon
-                        size="xs"
-                        style={[t.atoms.text_contrast_low]}
-                      />
-                      <Text
-                        numberOfLines={1}
-                        style={[
-                          a.text_xs,
-                          a.leading_snug,
-                          t.atoms.text_contrast_medium,
-                        ]}>
-                        {toNiceDomain(linkMeta.url)}
-                      </Text>
-                    </View>
-                  </>
-                ) : (
-                  <>
-                    <LoadingPlaceholder height={16} width={128} />
-                    <LoadingPlaceholder height={12} width={72} />
-                  </>
-                )}
-              </View>
-            </View>
-          )}
+          <LinkPreview linkMeta={linkMeta} loading={linkMetaLoading} />
         </View>
 
         {goLiveError && (