refactor: extract shared ContentLinkUrl renderer

src/app/components/ContentLinkBlock.svelte

@@ -1,76 +1,28 @@
 <script lang="ts">
-  import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
+  import {ellipsize, displayUrl, postJson} from "@welshman/lib"
-  import {isRelayUrl, getTagValue, normalizeRelayUrl, displayRelayUrl} from "@welshman/util"
+  import {isRelayUrl, getTagValue} from "@welshman/util"
   import {Capacitor} from "@capacitor/core"
   import {preventDefault, stopPropagation} from "@lib/html"
-  import LinkRound from "@assets/icons/link-round.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
+  import ContentLinkUrl from "@app/components/ContentLinkUrl.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/util/modal"
   import {
     dufflepud,
-    PLATFORM_URL,
     IMAGE_CONTENT_TYPES,
     VIDEO_CONTENT_TYPES,
     THUMBNAIL_URL,
-    displayRoom,
     isRoomId,
-    splitRoomId,
   } from "@app/core/state"
-  import {makeRoomPath, makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   let hideImage = $state(false)
 
   const url = value.url.toString()
-  const roomReference = call(() => {
+  const isRoomOrRelay = isRoomId(url) || isRelayUrl(url)
-    if (!isRoomId(url)) {
-      return undefined
-    }
-
-    const [roomUrl, h] = splitRoomId(url)
-
-    if (!roomUrl || !h || !isRelayUrl(roomUrl)) {
-      return undefined
-    }
-
-    return {url: normalizeRelayUrl(roomUrl), h}
-  })
-
-  const relayReference = call(() => {
-    if (roomReference || !isRelayUrl(url)) {
-      return undefined
-    }
-
-    return normalizeRelayUrl(url)
-  })
-
-  const label = call(() => {
-    if (roomReference) {
-      const spaceName = displayRelayUrl(roomReference.url)
-      const roomName = displayRoom(roomReference.url, roomReference.h)
-
-      return `~${spaceName} / ${roomName}`
-    }
-
-    if (relayReference) {
-      return `~${displayRelayUrl(relayReference)}`
-    }
-
-    return displayUrl(url)
-  })
 
   const fileType = getTagValue("file-type", event.tags) || ""
-  const [href, external] = call(() => {
-    if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
-    if (relayReference) return [makeSpacePath(relayReference), false]
-    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
-
-    return [url, true]
-  })
 
   const getVideoPoster = (videoUrl: string): string | undefined => {
     if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
@@ -97,51 +49,54 @@
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
 
-<Link {external} {href} class="my-2 block">
+{#if isRoomOrRelay}
-  <div class="overflow-hidden rounded-box">
+  <ContentLinkUrl
-    {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
+    {url}
-      <video
+    class="bg-alt my-2 block p-4 leading-normal whitespace-nowrap"
-        controls
+    showIcon
-        src={url}
+    labelClass="ml-2" />
-        poster={getVideoPoster(url)}
+{:else}
-        preload="metadata"
+  <ContentLinkUrl {url} class="my-2 block">
-        class="max-h-96 rounded-box object-contain object-center">
+    <div class="overflow-hidden rounded-box">
-        <track kind="captions" />
+      {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
-      </video>
+        <video
-    {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
+          controls
-      <button type="button" onclick={stopPropagation(preventDefault(expand))}>
+          src={url}
-        <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
+          poster={getVideoPoster(url)}
-      </button>
+          preload="metadata"
-    {:else if roomReference || relayReference}
+          class="max-h-96 rounded-box object-contain object-center">
-      <div class="bg-alt p-4 leading-normal">
+          <track kind="captions" />
-        <Icon icon={LinkRound} size={3} class="inline-block" />
+        </video>
-        <span class="ml-2">{label}</span>
+      {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
-      </div>
+        <button type="button" onclick={stopPropagation(preventDefault(expand))}>
-    {:else}
+          <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
-      {#await loadPreview()}
+        </button>
-        <div class="center my-12 w-full">
+      {:else}
-          <span class="loading loading-spinner"></span>
+        {#await loadPreview()}
-        </div>
+          <div class="center my-12 w-full">
-      {:then preview}
+            <span class="loading loading-spinner"></span>
-        <div class="bg-alt flex max-w-xl flex-col leading-normal">
-          {#if preview.image && !hideImage}
-            <img
-              alt=""
-              onerror={onError}
-              src={preview.image}
-              class="bg-alt max-h-72 rounded-t-box object-contain object-center" />
-          {/if}
-          <div class="flex flex-col gap-2 p-4">
-            <strong class="overflow-hidden text-ellipsis whitespace-nowrap"
-              >{preview.title || displayUrl(url)}</strong>
-            <p>{ellipsize(preview.description, 140)}</p>
           </div>
-        </div>
+        {:then preview}
-      {:catch}
+          <div class="bg-alt flex max-w-xl flex-col leading-normal">
-        <p class="bg-alt p-12 text-center leading-normal">
+            {#if preview.image && !hideImage}
-          Unable to load a preview for {url}
+              <img
-        </p>
+                alt=""
-      {/await}
+                onerror={onError}
-    {/if}
+                src={preview.image}
-  </div>
+                class="bg-alt max-h-72 rounded-t-box object-contain object-center" />
-</Link>
+            {/if}
+            <div class="flex flex-col gap-2 p-4">
+              <strong class="overflow-hidden text-ellipsis whitespace-nowrap"
+                >{preview.title || displayUrl(url)}</strong>
+              <p>{ellipsize(preview.description, 140)}</p>
+            </div>
+          </div>
+        {:catch}
+          <p class="bg-alt p-12 text-center leading-normal">
+            Unable to load a preview for {url}
+          </p>
+        {/await}
+      {/if}
+    </div>
+  </ContentLinkUrl>
+{/if}

src/app/components/ContentLinkInline.svelte

@@ -1,69 +1,18 @@
 <script lang="ts">
-  import {call, displayUrl} from "@welshman/lib"
+  import {displayUrl} from "@welshman/lib"
-  import {isRelayUrl, getTagValue, normalizeRelayUrl, displayRelayUrl} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
+  import ContentLinkUrl from "@app/components/ContentLinkUrl.svelte"
   import {pushModal} from "@app/util/modal"
-  import {
+  import {IMAGE_CONTENT_TYPES} from "@app/core/state"
-    PLATFORM_URL,
-    IMAGE_CONTENT_TYPES,
-    displayRoom,
-    isRoomId,
-    splitRoomId,
-  } from "@app/core/state"
-  import {makeRoomPath, makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   const url = value.url.toString()
-  const roomReference = call(() => {
-    if (!isRoomId(url)) {
-      return undefined
-    }
-
-    const [roomUrl, h] = splitRoomId(url)
-
-    if (!roomUrl || !h || !isRelayUrl(roomUrl)) {
-      return undefined
-    }
-
-    return {url: normalizeRelayUrl(roomUrl), h}
-  })
-
-  const relayReference = call(() => {
-    if (roomReference || !isRelayUrl(url)) {
-      return undefined
-    }
-
-    return normalizeRelayUrl(url)
-  })
-
-  const label = call(() => {
-    if (roomReference) {
-      const spaceName = displayRelayUrl(roomReference.url)
-      const roomName = displayRoom(roomReference.url, roomReference.h)
-
-      return `~${spaceName} / ${roomName}`
-    }
-
-    if (relayReference) {
-      return `~${displayRelayUrl(relayReference)}`
-    }
-
-    return displayUrl(url)
-  })
-
   const fileType = getTagValue("file-type", event.tags) || ""
-  const [href, external] = call(() => {
-    if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
-    if (relayReference) return [makeSpacePath(relayReference), false]
-    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
-
-    return [url, true]
-  })
 
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
@@ -78,8 +27,5 @@
     {displayUrl(url)}
   </a>
 {:else}
-  <Link {external} {href} class="link-content whitespace-nowrap">
+  <ContentLinkUrl {url} class="link-content whitespace-nowrap" showIcon />
-    <Icon icon={LinkRound} size={3} class="inline-block" />
-    {label}
-  </Link>
 {/if}

src/app/components/ContentLinkUrl.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+  import {call, displayUrl} from "@welshman/lib"
+  import {displayRelayUrl, isRelayUrl, normalizeRelayUrl} from "@welshman/util"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import {PLATFORM_URL, displayRoom, isRoomId, splitRoomId} from "@app/core/state"
+  import {makeRoomPath, makeSpacePath} from "@app/util/routes"
+
+  const {
+    children,
+    url,
+    class: className = "",
+    showIcon = false,
+    labelClass = "",
+  }: {
+    children?: Snippet
+    url: string
+    class?: string
+    showIcon?: boolean
+    labelClass?: string
+  } = $props()
+
+  const roomReference = call(() => {
+    if (!isRoomId(url)) {
+      return undefined
+    }
+
+    const [roomUrl, h] = splitRoomId(url)
+
+    if (!roomUrl || !h || !isRelayUrl(roomUrl)) {
+      return undefined
+    }
+
+    return {url: normalizeRelayUrl(roomUrl), h}
+  })
+
+  const relayReference = call(() => {
+    if (roomReference || !isRelayUrl(url)) {
+      return undefined
+    }
+
+    return normalizeRelayUrl(url)
+  })
+
+  const label = call(() => {
+    if (roomReference) {
+      const spaceName = displayRelayUrl(roomReference.url)
+      const roomName = displayRoom(roomReference.url, roomReference.h)
+
+      return `~${spaceName} / ${roomName}`
+    }
+
+    if (relayReference) {
+      return `~${displayRelayUrl(relayReference)}`
+    }
+
+    return displayUrl(url)
+  })
+
+  const [href, external] = call(() => {
+    if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
+    if (relayReference) return [makeSpacePath(relayReference), false]
+    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
+
+    return [url, true]
+  })
+</script>
+
+<Link {external} {href} class={className}>
+  {#if children}
+    {@render children()}
+  {:else if showIcon}
+    <Icon icon={LinkRound} size={3} class="inline-block" />
+    <span class={labelClass}>{label}</span>
+  {:else}
+    {label}
+  {/if}
+</Link>