fix: various fixes

package-lock.json

@@ -16,7 +16,7 @@
         "@tanstack/react-query-devtools": "^5.39.0",
         "add": "^2.0.6",
         "axios": "^1.7.2",
-        "blossom-client-sdk": "^0.8.0",
+        "blossom-client-sdk": "^0.9.0",
         "dayjs": "^1.11.11",
         "id3js": "^2.1.1",
         "lodash": "^4.17.21",
@@ -1696,9 +1696,9 @@
       }
     },
     "node_modules/blossom-client-sdk": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/blossom-client-sdk/-/blossom-client-sdk-0.8.0.tgz",
-      "integrity": "sha512-Cz89MXpIoDQhXpmX6ap54c3So7pIZmpBSZPLn0/qgbtjCtyZ7rS2r4uUcO9ZLv4z3zIYwdfUDT1dTSErN1eR6w==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/blossom-client-sdk/-/blossom-client-sdk-0.9.0.tgz",
+      "integrity": "sha512-GXEN//KcQURaQo+Dkp4MckJvbtXkfshp9XFjG8A3lsY52yPtov3XKlFbCK4mfpknGs0L2iUYPKcNtkSLEy/usA==",
       "dependencies": {
         "@noble/hashes": "^1.4.0",
         "cross-fetch": "^4.0.0"

package.json

@@ -20,7 +20,7 @@
     "@tanstack/react-query-devtools": "^5.39.0",
     "add": "^2.0.6",
     "axios": "^1.7.2",
-    "blossom-client-sdk": "^0.8.0",
+    "blossom-client-sdk": "^0.9.0",
     "dayjs": "^1.11.11",
     "id3js": "^2.1.1",
     "lodash": "^4.17.21",

src/components/BlobList/BlobList.tsx

@@ -60,7 +60,8 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
         <a
           className="link link-primary tooltip"
           data-tip="Copy link to clipboard"
-          onClick={() => {
+          onClick={(e) => {
+            e.stopPropagation();
             navigator.clipboard.writeText(blob.url);
           }}
         >
@@ -127,7 +128,7 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
         <ImageBlobList images={images} selectedBlobs={selectedBlobs} handleSelectBlob={handleSelectBlob} />
       )}
 
-      {mode == 'video' && <VideoBlobList videos={videos} />}
+      {mode == 'video' && <VideoBlobList videos={videos} selectedBlobs={selectedBlobs} handleSelectBlob={handleSelectBlob} />}
 
       {mode == 'audio' && <AudioBlobList audioFiles={audioFiles} />}
 

src/components/ServerListPopup/index.tsx

@@ -28,7 +28,7 @@ const ServerListPopup: React.FC<ServerListPopupProps> = ({ isOpen, onClose, onSa
 
   const handleAddServer = () => {
     if (newServer.trim()) {
-      setServers([...servers, { name: newServer.trim(), url: newServer.trim() }]);
+      setServers([...servers, { name: newServer.trim(), url: newServer.trim(), type: 'blossom' }]);
       setNewServer('');
     }
   };

src/components/VideoBlobList/VideoBlobList.tsx

@@ -1,17 +1,27 @@
 import { formatFileSize, formatDate } from '../../utils/utils';
 import { ClipboardDocumentIcon } from '@heroicons/react/24/outline';
 import { BlobDescriptor } from 'blossom-client-sdk';
+import { HandleSelectBlobType } from '../BlobList/useBlobSelection';
 
 type VideoBlobListProps = {
   videos: BlobDescriptor[];
+  handleSelectBlob: HandleSelectBlobType;
+  selectedBlobs: { [key: string]: boolean };
 };
 
-const VideoBlobList = ({ videos }: VideoBlobListProps) => (
+const VideoBlobList = ({ videos, handleSelectBlob, selectedBlobs }: VideoBlobListProps) => (
   <div className="blob-list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-2 justify-center">
     {videos.map(blob => (
       <div key={blob.sha256} className="p-4 rounded-lg bg-base-300 relative text-center">
         <video src={blob.url} className="m-auto max-h-[40dvh]" preload="metadata" controls playsInline></video>
         <div className="flex flex-grow flex-row text-xs pt-12 items-end">
+          <input
+            type="checkbox"
+            className="checkbox checkbox-primary checkbox-sm mr-2"
+            checked={selectedBlobs[blob.sha256]}
+            onChange={e => handleSelectBlob(blob.sha256, e)}
+            onClick={e => e.stopPropagation()}
+          />
           <span>{formatFileSize(blob.size)}</span>
           <span className=" flex-grow text-right">{formatDate(blob.uploaded)}</span>
         </div>

src/pages/Upload.tsx

@@ -232,6 +232,30 @@ function Upload() {
   return (
     <>
       <h2 className=" py-4">Upload</h2>
+      {/* 
+      <button className='btn btn-primary' onClick={async () => {
+
+         const url = "https://media-server.slidestr.net/3c3f3f0b67c17953e59ebdb53b7fd83bf68b552823b927fa9718a52e12d53c0a";
+          const targetServer= "https://test-store.slidestr.net";
+
+          const headers = {
+            Accept: 'application/json',
+            'Content-Type':'application/json',
+          };
+
+          const blossomClient = new BlossomClient(targetServer, signEventTemplate);
+          const mirrorAuth = await blossomClient.getMirrorAuth('3c3f3f0b67c17953e59ebdb53b7fd83bf68b552823b927fa9718a52e12d53c0a', 'Upload Blob');
+
+          const res = await axios.put<BlobDescriptor>(`${targetServer}/mirror`, { url }, {
+            headers: mirrorAuth ? { ...headers, authorization: BlossomClient.encodeAuthorizationHeader(mirrorAuth) } : headers,
+            
+          });
+
+          console.log(res.status);
+          console.log(res.data);
+
+      }}>Test Mirror</button>
+      */}
       <div className=" bg-base-200 rounded-xl p-4 text-neutral-content gap-4 flex flex-col">
         <input
           id="browse"

src/utils/useServerInfo.ts

@@ -3,18 +3,16 @@ import { useQueries } from '@tanstack/react-query';
 import { BlobDescriptor, BlossomClient } from 'blossom-client-sdk';
 import { useNDK } from '../utils/ndk';
 import { nip19 } from 'nostr-tools';
-import { useUserServers } from './useUserServers';
+import { Server, useUserServers } from './useUserServers';
 import dayjs from 'dayjs';
 
-export type ServerInfo = {
+export interface ServerInfo extends Server {
   virtual: boolean;
   count: number;
   size: number;
   lastChange: number;
   isLoading: boolean;
   isError: boolean;
-  name: string;
-  url: string;
   blobs?: BlobDescriptor[];
 };
 
@@ -89,6 +87,7 @@ export const useServerInfo = () => {
       name: 'All servers',
       url: 'all',
       blobs: [],
+      type: 'blossom'
     };
     const allInfo = serversInfos.reduce(
       (acc, server) => ({

src/utils/useUserServers.ts

@@ -2,34 +2,53 @@ import { useMemo } from 'react';
 import { useNDK } from '../utils/ndk';
 import { nip19 } from 'nostr-tools';
 import { NDKKind } from '@nostr-dev-kit/ndk';
-import useEvent from '../utils/useEvent';
 import { USER_BLOSSOM_SERVER_LIST_KIND } from 'blossom-client-sdk';
+import useEvent from './useEvent';
+
+type ServerType = 'blossom' | 'nip96';
 
 export type Server = {
+  type: ServerType;
   name: string;
   url: string;
 };
 
+const USER_NIP96_SERVER_LIST_KIND = 10096;
+
 export const useUserServers = (): Server[] => {
   const { user } = useNDK();
 
   const pubkey = user?.npub && (nip19.decode(user?.npub).data as string); // TODO validate type
 
-  const serverListEvent = useEvent(
+  const blossomServerListEvent = useEvent(
     { kinds: [USER_BLOSSOM_SERVER_LIST_KIND as NDKKind], authors: [pubkey!] },
     { disable: !pubkey }
   );
 
-  const servers = useMemo(() => {
-    const serverUrls = (serverListEvent?.getMatchingTags('server').map(t => t[1]) || []).map(s =>
-      s.toLocaleLowerCase().replace(/\/$/, '')
-    );
+  const nip96ServerListEvent = useEvent(
+    { kinds: [USER_NIP96_SERVER_LIST_KIND as NDKKind], authors: [pubkey!] },
+    { disable: !pubkey }
+  );
+
+  const servers = useMemo((): Server[] => {
+    const serverUrls = [
+      ...(blossomServerListEvent?.getMatchingTags('server').map(t => t[1]) || []).map(s => ({
+        url: s.toLocaleLowerCase().replace(/\/$/, ''),
+        type: 'blossom' as ServerType,
+      })),
+     /* ...(nip96ServerListEvent?.getMatchingTags('server').map(t => t[1]) || []).map(s => ({
+        url: s.toLocaleLowerCase().replace(/\/$/, ''),
+        type: 'nip96' as ServerType,
+      })),*/
+    ];
 
     return serverUrls.map(s => ({
-      name: s.replace(/https?:\/\//, ''),
-      url: s,
+      type: s.type,
+      name: s.url.replace(/https?:\/\//, ''),
+      url: s.url,
     }));
-  }, [serverListEvent]);
-
+  }, [blossomServerListEvent, nip96ServerListEvent]);
+  
+  // console.log(servers);
   return servers;
 };