Add support for videos

.eslintrc.cjs

@@ -29,6 +29,7 @@ module.exports = {
     "no-unused-vars": ["error", {args: "none"}],
     "no-async-promise-executor": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "no-useless-escape": "off",
   },
   ignorePatterns: ["*.svg"],
 }

src/app/index.ts

@@ -131,7 +131,7 @@ export const mergeParents = (notes: Array<DisplayEvent>) => {
   const notesById = createMap('id', notes)
   const childIds = []
 
-  for (const note of notes) {
+  for (const note of Object.values(notesById)) {
     const parentId = findReplyId(note)
 
     if (parentId) {

src/partials/Preview.svelte

@@ -9,36 +9,45 @@
   let preview
 
   onMount(async () => {
-    try {
-      const res = await fetch(endpoint, {
-        method: 'POST',
-        body: JSON.stringify({url}),
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      })
+    if (url.match('\.(jpg|jpeg|png|gif)')) {
+      preview = {image: url}
+    } else if (url.match('\.(mov|mp4)')) {
+      preview = {video: url}
+    } else {
+      try {
+        const res = await fetch(endpoint, {
+          method: 'POST',
+          body: JSON.stringify({url}),
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
 
-      const json = await res.json()
+        const json = await res.json()
 
-      if (json.title || json.image) {
-        preview = json
+        if (json.title || json.image) {
+          preview = json
+        }
+      } catch (e) {
+        return
       }
-    } catch (e) {
-      return
     }
   })
 </script>
 
 {#if preview}
-<div in:slide class="max-w-sm">
+<div in:slide>
   <Anchor
     external
     href={url}
-    class="rounded border border-solid border-medium flex flex-col bg-white overflow-hidden">
+    class="rounded border border-solid border-medium flex flex-col bg-medium overflow-hidden">
     {#if preview.image}
-    <img alt="Link preview" src={preview.image} />
-    <div class="h-px bg-medium" />
+    <img alt="Link preview" src={preview.image} class="object-center max-h-96 object-contain" />
     {/if}
+    {#if preview.video}
+    <video controls src={preview.video} class="object-center max-h-96 object-contain" />
+    {/if}
+    <div class="h-px bg-medium" />
     {#if preview.title}
     <div class="px-4 py-2 text-black flex flex-col bg-white">
       <strong class="whitespace-nowrap text-ellipsis overflow-hidden">{preview.title}</strong>

src/routes/Person.svelte

@@ -38,6 +38,8 @@
   $: following = find(t => t[1] === pubkey, $user?.petnames || [])
 
   onMount(async () => {
+    console.log('Person', npub, person)
+
     // Add all the relays we know the person uses
     relays = relays.concat(getPubkeyRelays(pubkey))