Reserve space for images in notes

src/components/Layout/Layout.tsx

@@ -31,6 +31,10 @@ const Layout: Component = () => {
     const newNote = document.getElementById('new_note_input');
     const newNoteTextArea = document.getElementById('new_note_text_area') as HTMLTextAreaElement;
 
+    if (!newNote || !newNoteTextArea) {
+      return;
+    }
+
     if (account?.showNewNoteForm) {
       newNote?.classList.add(styles.animatedShow);
       newNoteTextArea?.focus();

src/components/NoteImage/NoteImage.module.scss

@@ -1,4 +1,5 @@
 .noteImage {
+  display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;

src/components/NoteImage/NoteImage.tsx

@@ -1,22 +1,47 @@
-import { Component, createEffect, JSX, onCleanup, onMount } from "solid-js";
+import { Component, createEffect, createMemo, JSX, onCleanup, onMount } from "solid-js";
 import styles from "./NoteImage.module.scss";
 import mediumZoom from "medium-zoom";
 import type { Zoom } from 'medium-zoom';
 // @ts-ignore Bad types in nostr-tools
 import { generatePrivateKey } from "nostr-tools";
+import { MediaVariant } from "../../types/primal";
 
 const NoteImage: Component<{
+  media?: MediaVariant,
+  width?: number,
   src?: string,
   isDev?: boolean,
   onError?: JSX.EventHandlerUnion<HTMLImageElement, Event>,
 }> = (props) => {
   const imgId = generatePrivateKey();
+  let zoomRef: Zoom | undefined;
+
+  let imgRefActual: HTMLImageElement | undefined;
 
   const imgRef = () => {
     return document.getElementById(imgId)
   };
 
-  let zoomRef: Zoom | undefined;
+  const src = () => props.media?.media_url || props.src;
+
+  const height = createMemo(() => {
+    if (!props.media) {
+      return '100%';
+    }
+
+    const mediaHeight = props.media.h;
+    const mediaWidth = props.media.w || 0;
+    const rect = imgRefActual?.getBoundingClientRect();
+    const imgWidth = props.width || rect?.width || 0;
+
+    const ratio = mediaWidth / imgWidth;
+
+    const h = ratio > 1 ?
+      mediaHeight / ratio :
+      mediaHeight * ratio;
+
+    return `${h}px`;
+  });
 
   const klass = () => `${styles.noteImage} ${props.isDev ? 'redBorder' : ''}`;
 
@@ -53,7 +78,16 @@ const NoteImage: Component<{
   });
 
   return (
-    <img id={imgId} src={props.src} class={klass()} onerror={props.onError} onClick={doZoom} />
+    <div style={`width: 100%; height: ${height()};`}>
+      <img
+        id={imgId}
+        ref={imgRefActual}
+        src={src()}
+        class={klass()}
+        onerror={props.onError}
+        onClick={doZoom}
+      />
+    </div>
   );
 }
 

src/components/ParsedNote/ParsedNote.tsx

@@ -85,7 +85,8 @@ const ParsedNote: Component<{
         if (index > 0) {
           const prefix = token.slice(0, index);
 
-          const matched = token.match(urlExtractRegex)[0];
+          const matched = (token.match(urlExtractRegex) || [])[0];
+
           if (matched) {
             const suffix = token.substring(matched.length + index, token.length);
             return <>{parseToken(prefix)}{parseToken(matched)}{parseToken(suffix)}</>;
@@ -97,10 +98,10 @@ const ParsedNote: Component<{
         if (!props.ignoreMedia) {
           if (isImage(token)) {
             const dev = localStorage.getItem('devMode') === 'true';
-            let imgUrl = media?.actions.getMediaUrl(token);
-            const url = imgUrl || getMediaUrlDefault(token)
+            let image = media?.actions.getMedia(token, 'o');
+            const url = image?.media_url || getMediaUrlDefault(token)
 
-            return <NoteImage src={url} isDev={dev} />;
+            return <NoteImage src={url} isDev={dev} media={image} width={514} />;
           }
 
           if (isMp4Video(token)) {

src/contexts/ThreadContext.tsx

@@ -26,6 +26,7 @@ import {
   NostrEOSE,
   NostrEvent,
   NostrEventContent,
+  NostrMediaInfo,
   NostrMentionContent,
   NostrNoteActionsContent,
   NostrNoteContent,