refactor: simplify ContentLinkUrl rendering
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
<script lang="ts">
|
||||
import {ellipsize, displayUrl, postJson} from "@welshman/lib"
|
||||
import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
|
||||
import {isRelayUrl, getTagValue} from "@welshman/util"
|
||||
import {Capacitor} from "@capacitor/core"
|
||||
import {preventDefault, stopPropagation} from "@lib/html"
|
||||
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"
|
||||
@@ -10,6 +11,7 @@
|
||||
import {
|
||||
dufflepud,
|
||||
IMAGE_CONTENT_TYPES,
|
||||
PLATFORM_URL,
|
||||
VIDEO_CONTENT_TYPES,
|
||||
THUMBNAIL_URL,
|
||||
isRoomId,
|
||||
@@ -21,6 +23,11 @@
|
||||
|
||||
const url = value.url.toString()
|
||||
const isRoomOrRelay = isRoomId(url) || isRelayUrl(url)
|
||||
const [href, external] = call(() => {
|
||||
if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
|
||||
|
||||
return [url, true]
|
||||
})
|
||||
|
||||
const fileType = getTagValue("file-type", event.tags) || ""
|
||||
|
||||
@@ -50,13 +57,9 @@
|
||||
</script>
|
||||
|
||||
{#if isRoomOrRelay}
|
||||
<ContentLinkUrl
|
||||
{url}
|
||||
class="bg-alt my-2 block p-4 leading-normal whitespace-nowrap"
|
||||
showIcon
|
||||
labelClass="ml-2" />
|
||||
<ContentLinkUrl {url} class="bg-alt my-2 block p-4 leading-normal whitespace-nowrap" />
|
||||
{:else}
|
||||
<ContentLinkUrl {url} class="my-2 block">
|
||||
<Link {external} {href} class="my-2 block">
|
||||
<div class="overflow-hidden rounded-box">
|
||||
{#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
|
||||
<video
|
||||
@@ -98,5 +101,5 @@
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
</ContentLinkUrl>
|
||||
</Link>
|
||||
{/if}
|
||||
|
||||
@@ -27,5 +27,5 @@
|
||||
{displayUrl(url)}
|
||||
</a>
|
||||
{:else}
|
||||
<ContentLinkUrl {url} class="link-content whitespace-nowrap" showIcon />
|
||||
<ContentLinkUrl {url} class="link-content whitespace-nowrap" />
|
||||
{/if}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<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"
|
||||
@@ -9,17 +8,11 @@
|
||||
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(() => {
|
||||
@@ -69,12 +62,6 @@
|
||||
</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}
|
||||
<Icon icon={LinkRound} size={3} class="inline-block" />
|
||||
<span class="ml-2">{label}</span>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user