media: move noxy preview link fetch logic to media.ts

src/main.js

@@ -9,6 +9,7 @@ import {clearView, getViewContent, getViewElem, setViewElem, view} from './view'
 import {closeSettingsView, config, toggleSettingsView} from './settings';
 import {getReactions, getReactionContents, handleReaction, handleUpvote} from './reactions';
 import {closePublishView, openWriteInput, togglePublishView} from './write';
+import {linkPreview, parseContent} from './media';
 
 // curl -H 'accept: application/nostr+json' https://relay.nostr.ch/
 
@@ -129,64 +130,6 @@ setInterval(() => {
   });
 }, 10000);
 
-const fetchQue = [];
-let fetchPending;
-const fetchNext = (href, id, relay) => {
-  const noxy = getNoxyUrl('meta', href, id, relay);
-  const previewId = noxy.searchParams.toString();
-  if (fetchPending) {
-    fetchQue.push({href, id, relay});
-    return previewId;
-  }
-  fetchPending = fetch(noxy.href)
-    .then(data => {
-      if (data.status === 200) {
-        return data.json();
-      }
-      // fetchQue.push({href, id, relay}); // could try one more time
-      return Promise.reject(data);
-    })
-    .then(meta => {
-      const container = document.getElementById(previewId);
-      const content = [];
-      if (meta.images[0]) {
-        content.push(elem('img', {className: 'preview-image', loading: 'lazy', src: getNoxyUrl('data', meta.images[0], id, relay).href}));
-      }
-      if (meta.title) {
-        content.push(elem('h2', {className: 'preview-title'}, meta.title));
-      }
-      if (meta.descr) {
-        content.push(elem('p', {className: 'preview-descr'}, meta.descr))
-      }
-      if (content.length) {
-        container.append(elem('a', {href, rel: 'noopener noreferrer', target: '_blank'}, content));
-        container.classList.add('preview-loaded');
-      }
-    })
-    .finally(() => {
-      fetchPending = false;
-      if (fetchQue.length) {
-        const {href, id, relay} = fetchQue.shift();
-        return fetchNext(href, id, relay);
-      }
-    })
-    .catch(err => err.text && err.text())
-    .then(errMsg => errMsg && console.warn(errMsg));
-  return previewId;
-};
-
-function linkPreview(href, id, relay) {
-  if ((/\.(gif|jpe?g|png)$/i).test(href)) {
-    return elem('div', {},
-      [elem('img', {className: 'preview-image-only', loading: 'lazy', src: getNoxyUrl('data', href, id, relay).href})]
-    );
-  }
-  const previewId = fetchNext(href, id, relay);
-  return elem('div', {
-    className: 'preview',
-    id: previewId
-  });
-}
 
 function createTextNote(evt, relay) {
   const {host, img, name, time, userName} = getMetadata(evt, relay);
@@ -313,15 +256,6 @@ function renderArticle(content, props = {}) {
 const userList = [];
 // const tempContactList = {};
 
-function parseContent(content) {
-  try {
-    return JSON.parse(content);
-  } catch(err) {
-    console.log(evt);
-    console.error(err);
-  }
-}
-
 function handleMetadata(evt, relay) {
   const content = parseContent(evt.content);
   if (content) {

src/media.ts

@@ -0,0 +1,114 @@
+import { elem } from './utils/dom';
+import { getNoxyUrl } from './utils/url';
+
+export const parseContent = (content: string) => {
+  try {
+    return JSON.parse(content);
+  } catch(err) {
+    console.warn(err, content);
+    return null;
+  }
+}
+
+type FetchItem = {
+  href: string;
+  id: string;
+  relay: string;
+};
+
+type NoxyData = {
+  title: string;
+  descr: string;
+  images: string[];
+};
+
+const fetchQue: Array<FetchItem> = [];
+
+let fetchPending: (null | Promise<NoxyData>) = null;
+
+const fetchNext = (
+  href: string,
+  id: string,
+  relay: string,
+) => {
+  const noxy = getNoxyUrl('meta', href, id, relay);
+  if (!noxy) {
+    return false;
+  }
+  const previewId = noxy.searchParams.toString();
+  if (fetchPending) {
+    fetchQue.push({href, id, relay});
+    return previewId;
+  }
+  fetchPending = fetch(noxy.href)
+    .then(data => {
+      if (data.status === 200) {
+        return data.json();
+      }
+      // fetchQue.push({href, id, relay}); // could try one more time
+      return Promise.reject(data);
+    })
+    .then(meta => {
+      const container = document.getElementById(previewId);
+      const content: Array<HTMLElement> = [];
+      if (meta.images[0]) {
+        const img = getNoxyUrl('data', meta.images[0], id, relay);
+        img && content.push(
+          elem('img', {
+            className: 'preview-image',
+            loading: 'lazy',
+            src: img.href,
+          })
+        );
+      }
+      if (meta.title) {
+        content.push(elem('h2', {className: 'preview-title'}, meta.title));
+      }
+      if (meta.descr) {
+        content.push(elem('p', {className: 'preview-descr'}, meta.descr))
+      }
+      if (container && content.length) {
+        container.append(elem('a', {href, rel: 'noopener noreferrer', target: '_blank'}, content));
+        container.classList.add('preview-loaded');
+      }
+    })
+    .finally(() => {
+      fetchPending = null;
+      if (fetchQue.length) {
+        const {href, id, relay} = fetchQue.shift() as FetchItem;
+        return fetchNext(href, id, relay);
+      }
+    })
+    .catch(err => err.text && err.text())
+    .then(errMsg => errMsg && console.warn(errMsg));
+
+  return previewId;
+};
+
+export const linkPreview = (
+  href: string,
+  id: string,
+  relay: string,
+) => {
+  if ((/\.(gif|jpe?g|png)$/i).test(href)) {
+    const img = getNoxyUrl('data', href, id, relay);
+    if (!img) {
+      return null;
+    }
+    return elem('div', {},
+      [elem('img', {
+        className: 'preview-image-only',
+        loading: 'lazy',
+        src: img.href,
+      })]
+    );
+  }
+  const previewId = fetchNext(href, id, relay);
+  if (!previewId) {
+    return null;
+  }
+  return elem('div', {
+    className: 'preview',
+    id: previewId,
+  });
+};