From a0cef2b13ee3d9eec110e21d30eaaa2cf3d55f90 Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Mon, 13 Feb 2023 16:21:18 -0600
Subject: [PATCH] Add support for videos

---
 .eslintrc.cjs               |  1 +
 src/app/index.ts            |  2 +-
 src/partials/Preview.svelte | 43 ++++++++++++++++++++++---------------
 src/routes/Person.svelte    |  2 ++
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 34646ad6..70d2f28e 100644
--- a/.eslintrc.cjs
+++ b/.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"],
 }
diff --git a/src/app/index.ts b/src/app/index.ts
index beee49ef..b048c6a6 100644
--- a/src/app/index.ts
+++ b/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) {
diff --git a/src/partials/Preview.svelte b/src/partials/Preview.svelte
index 3e8dfcb1..7ef2f999 100644
--- a/src/partials/Preview.svelte
+++ b/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>
diff --git a/src/routes/Person.svelte b/src/routes/Person.svelte
index 6c6cccef..eaeec9c8 100644
--- a/src/routes/Person.svelte
+++ b/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))