switch to void.cat thank you lord kieran

client/src/components/Modals/QuoteEmbed.tsx

@@ -2,6 +2,7 @@ import { parseContent } from '../../utils/content';
 import { Event } from 'nostr-tools';
 import { getMetadata, uniqBy } from '../../utils/utils';
 import ContentPreview from './TextModal';
+import { renderMedia } from '../../utils/FileUpload';
 
 const colorCombos = [
   'from-red-400 to-yellow-500',
@@ -81,14 +82,7 @@ const QuoteEmbed = ({ event, metadata }: { event: Event, metadata: Event | null}
           <div className="mr-2 flex flex-col break-words">
             <ContentPreview key={event.id} comment={comment} />
           </div>
-          {file !== "" && (
+            {renderMedia(file)}
-            <div className="file">
-                <img
-                  src={file}
-                  loading="lazy"
-                /> 
-            </div>
-           )}
         </div>
     </div>
   );

client/src/components/PostCard/NewThreadCard.tsx

@@ -3,7 +3,8 @@ import { ArrowUpTrayIcon, CpuChipIcon } from '@heroicons/react/24/outline';
 import { useState, useEffect, useMemo } from 'react';
 import { generatePrivateKey, getPublicKey, finishEvent } from 'nostr-tools';
 import { publish } from '../../utils/relays';
-import NostrImg from '../../utils/ImgUpload';
+import FileUpload from '../../utils/FileUpload';
+import { renderMedia } from '../../utils/FileUpload';
 
 const NewThreadCard: React.FC = () => {
   const [comment, setComment] = useState("");
@@ -73,7 +74,7 @@ const NewThreadCard: React.FC = () => {
   async function attachFile(file_input: File | null) {
     try {
       if (file_input) {
-        const rx = await NostrImg(file_input);
+        const rx = await FileUpload(file_input);
         if (rx.url) {
           setFile(rx.url);
         } else if (rx?.error) {
@@ -115,14 +116,7 @@ const NewThreadCard: React.FC = () => {
             />
           </div>
           <div>
-            {file !== "" && (
+          {renderMedia(file)} 
-              <div className="file m-0.5">
-                <img
-                  src={file}
-                  loading="lazy"
-                />
-              </div>
-            )}
           </div>
           <div className="flex justify-between items-center">
             <div className="flex items-center">

client/src/components/PostCard/PostCard.tsx

@@ -5,6 +5,7 @@ import { Event } from 'nostr-tools';
 import { nip19 } from 'nostr-tools';
 import { getMetadata } from '../../utils/utils';
 import ContentPreview from'../Modals/TextModal';
+import { renderMedia } from '../../utils/FileUpload';
 
 const colorCombos = [
   'from-red-400 to-yellow-500',
@@ -92,14 +93,7 @@ const PostCard = ({ key, event, metadata, replyCount }: { key: string, event: Ev
             <div className="mr-2 flex flex-col break-words">
               <ContentPreview key={event.id} comment={comment} />
             </div>
-            {file !== "" && (
+            {renderMedia(file)}              
-              <div className="file">
-                <img
-                  src={file}
-                  loading="lazy"
-                />
-              </div>
-            )}               
           </div>
         </a>
       </CardContainer>

client/src/components/Thread/OPCard.tsx

@@ -4,6 +4,7 @@ import { parseContent } from '../../utils/content';
 import { Event } from 'nostr-tools';
 import { getMetadata } from '../../utils/utils';
 import ContentPreview from '../Modals/TextModal';
+import { renderMedia } from '../../utils/FileUpload';
 
 const colorCombos = [
   'from-red-400 to-yellow-500',
@@ -89,37 +90,11 @@ const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event
           <div className="mr-2 flex flex-col break-words">
             <ContentPreview key={event.id} comment={comment} />
           </div>
-          {file !== "" && (
+            {renderMedia(file)}
-            <div className="file">
-                <img
-                  src={file}
-                  loading="lazy"
-                /> 
-            </div>
-           )}
         </div>
       </CardContainer>
     </>
   );
 };
 
-interface LinkPreview {
-  url: string;
-  title: string;
-  siteName?: string;
-  description?: string;
-  mediaType: string;
-  contentType?: string;
-  images: string[];
-  videos: {
-    url?: string;
-    secureUrl?: string;
-    type?: string;
-    width?: string;
-    height?: string;
-    [key: string]: any;
-  }[];
-  [key: string]: any;
-}
-
 export default OPCard;

client/src/components/Thread/ReplyCard.tsx

@@ -5,7 +5,7 @@ import { Event } from 'nostr-tools';
 import { nip19 } from 'nostr-tools';
 import { getMetadata, uniqBy } from '../../utils/utils';
 import ContentPreview from '../Modals/TextModal';
-import { useEffect, useState } from 'react';
+import { renderMedia } from '../../utils/FileUpload';
 
 const colorCombos = [
     'from-red-400 to-yellow-500',
@@ -108,14 +108,7 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
                         <div className="mr-2 flex flex-col break-words">
                             <ContentPreview key={event.id} comment={comment} />
                         </div>
-                        {file !== "" && (
+                        {renderMedia(file)}
-                            <div className="file">
-                                <img
-                                    src={file}
-                                    loading="lazy"
-                                />
-                            </div>
-                        )}
                     </div>
                 </a>
             </CardContainer>

client/src/components/Thread/ThreadPost.tsx

@@ -3,7 +3,7 @@ import { useState, useMemo, useEffect } from "react";
 import { ArrowUpTrayIcon, CpuChipIcon } from '@heroicons/react/24/outline';
 import { generatePrivateKey, getPublicKey, finishEvent, Event as NostrEvent } from 'nostr-tools';
 import { publish } from '../../utils/relays';
-import NostrImg from '../../utils/ImgUpload';
+import NostrImg from '../../utils/FileUpload';
 import { nip19 } from 'nostr-tools';
 
 

client/src/utils/FileUpload.tsx

@@ -0,0 +1,83 @@
+export interface UploadResult {
+  url?: string;
+  error?: string;
+}
+
+/**
+* Upload file to void.cat
+* https://void.cat/swagger/index.html
+*/
+
+export default async function FileUpload(file: File ): Promise<UploadResult> {
+  const buf = await file.arrayBuffer();
+
+  const req = await fetch("https://void.cat/upload", {
+    body: buf,
+    method: "POST",
+    headers: {
+      "Content-Type": "application/octet-stream",
+      "V-Content-Type": file.type, // Extracting the mime type
+      "V-Filename": file.name, // Extracting the filename
+      "V-Description": "Upload from https://tao-green.vercel.app/",
+      "V-Strip-Metadata": "true", // Here's the new header
+    },
+  });
+  if (req.ok) {
+      let rsp: VoidUploadResponse = await req.json();
+      const fileExtension = file.name.split('.').pop(); // Extracting the file extension
+      const resultUrl = `https://void.cat/d/${rsp.file?.id}.${fileExtension}`;
+      return {url: resultUrl};
+  }
+  return {
+    error: "Upload failed",
+  };
+}
+
+export const renderMedia = (file: string) => {
+  if (file && (file.endsWith(".mp4") || file.endsWith(".webm"))) {
+    return (
+      <video controls className="thumb">
+        <source src={file} type="video/mp4" />
+      </video>
+    );
+  } else if (!file.includes("http")) {
+    return (
+        <></>
+    );
+  } else {
+    return (
+        <img alt="Invalid thread" loading="lazy" className="thumb" src={file} />
+    );
+  }
+};
+
+export interface UploadResult {
+url?: string;
+error?: string;
+}
+
+export type VoidUploadResponse = {
+  ok: boolean,
+  file?: VoidFile,
+  errorMessage?: string,
+}
+
+export type VoidFile = {
+  id: string,
+  meta?: VoidFileMeta
+}
+
+export type VoidFileMeta = {
+  version: number,
+  id: string,
+  name?: string,
+  size: number,
+  uploaded: Date,
+  description?: string,
+  mimeType?: string,
+  digest?: string,
+  url?: string,
+  expires?: Date,
+  storage?: string,
+  encryptionParams?: string,
+}

client/src/utils/ImgUpload.ts

@@ -1,80 +0,0 @@
-export interface UploadResult {
-    url?: string;
-    error?: string;
-  }
-
-/**
- * Upload file to void.cat
- * https://void.cat/swagger/index.html
- */
-
-export default async function NostrImg(file: File ): Promise<UploadResult> {
-  const fd = new FormData();
-  fd.append("image", file);
-
-  const req = await fetch("https://nostrimg.com/api/upload", {
-    body: fd,
-    method: "POST",
-    headers: {
-      accept: "application/json",
-    },
-  });
-  if (req.ok) {
-    const data: UploadResponse = await req.json();
-    if (typeof data?.imageUrl === "string" && data.success) {
-      return {
-        url: new URL(data.imageUrl).toString(),
-      };
-    }
-  }
-  return {
-    error: "Upload failed",
-  };
-  }
-
-export interface UploadResult {
-  url?: string;
-  error?: string;
-}
-
-export type VoidUploadResponse = {
-    ok: boolean,
-    file?: VoidFile,
-    errorMessage?: string,
-}
-
-interface UploadResponse {
-  fileID?: string;
-  fileName?: string;
-  imageUrl?: string;
-  lightningDestination?: string;
-  lightningPaymentLink?: string;
-  message?: string;
-  route?: string;
-  status: number;
-  success: boolean;
-  url?: string;
-  data?: {
-    url?: string;
-  };
-}
-
-export type VoidFile = {
-    id: string,
-    meta?: VoidFileMeta
-}
-
-export type VoidFileMeta = {
-    version: number,
-    id: string,
-    name?: string,
-    size: number,
-    uploaded: Date,
-    description?: string,
-    mimeType?: string,
-    digest?: string,
-    url?: string,
-    expires?: Date,
-    storage?: string,
-    encryptionParams?: string,
-}