Fix DM media detection

src/app/components/ContentLinkBlock.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
-  import {isRelayUrl} from "@welshman/util"
+  import {isRelayUrl, getTagValue} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/util/modal"
-  import {dufflepud, PLATFORM_URL} from "@app/core/state"
+  import {dufflepud, PLATFORM_URL, IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
@@ -14,6 +14,7 @@
   let hideImage = $state(false)
 
   const url = value.url.toString()
+  const fileType = getTagValue("file-type", event.tags) || ""
   const [href, external] = call(() => {
     if (isRelayUrl(url)) return [makeSpacePath(url), false]
     if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
@@ -40,11 +41,11 @@
 
 <Link {external} {href} class="my-2 block">
   <div class="overflow-hidden rounded-box">
-    {#if url.match(/\.(mov|webm|mp4)$/)}
+    {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
       <video controls src={url} class="max-h-96 rounded-box object-contain object-center">
         <track kind="captions" />
       </video>
-    {:else if url.match(/\.(jpe?g|png|gif|webp)$/)}
+    {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
       <button type="button" onclick={stopPropagation(preventDefault(expand))}>
         <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
       </button>

src/app/components/ContentLinkInline.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
   import {call, displayUrl} from "@welshman/lib"
-  import {isRelayUrl} from "@welshman/util"
+  import {isRelayUrl, 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 {pushModal} from "@app/util/modal"
-  import {PLATFORM_URL} from "@app/core/state"
+  import {PLATFORM_URL, IMAGE_CONTENT_TYPES} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   const url = value.url.toString()
+  const fileType = getTagValue("file-type", event.tags) || ""
   const [href, external] = call(() => {
     if (isRelayUrl(url)) return [makeSpacePath(url), false]
     if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
@@ -23,7 +24,7 @@
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
 
-{#if url.match(/\.(jpe?g|png|gif|webp)$/)}
+{#if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
   <!-- Use a real link so people can copy the href -->
   <a
     href={url}

src/app/core/state.ts

@@ -129,6 +129,10 @@ export const ROOM = "h"
 
 export const PROTECTED = ["-"]
 
+export const IMAGE_CONTENT_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"]
+
+export const VIDEO_CONTENT_TYPES = ["video/quicktime", "video/webm", "video/mp4"]
+
 export const ENABLE_ZAPS = Capacitor.getPlatform() != "ios"
 
 export const PUSH_SERVER = import.meta.env.VITE_PUSH_SERVER
@@ -475,7 +479,7 @@ export const chatsById = call(() => {
       }
     }
 
-    addEvents(repository.query([{kinds: [DIRECT_MESSAGE, PROFILE]}]))
+    addEvents(repository.query([{kinds: [...DM_KINDS, PROFILE]}]))
 
     const unsubscribers = [
       on(repository, "update", ({added}: RepositoryUpdate) => addEvents(added)),

src/app/util/routes.ts

@@ -10,8 +10,6 @@ import {scrollToEvent} from "@lib/html"
 import {identity} from "@welshman/lib"
 import {
   getTagValue,
-  DIRECT_MESSAGE,
-  DIRECT_MESSAGE_FILE,
   MESSAGE,
   THREAD,
   CLASSIFIED,
@@ -26,6 +24,7 @@ import {
   encodeRelay,
   userSpaceUrls,
   hasNip29,
+  DM_KINDS,
   ROOM,
 } from "@app/core/state"
 import {lastPageBySpaceUrl} from "@app/util/history"
@@ -108,7 +107,7 @@ export const goToEvent = async (event: TrustedEvent, options: Record<string, any
 }
 
 export const getEventPath = async (event: TrustedEvent, urls: string[]) => {
-  if (event.kind === DIRECT_MESSAGE || event.kind === DIRECT_MESSAGE_FILE) {
+  if (DM_KINDS.includes(event.kind)) {
     return makeChatPath([event.pubkey, ...getPubkeyTagValues(event.tags)])
   }