chore: Updated to latest packages

package.json

@@ -12,44 +12,44 @@
     "analyze": "vite-bundle-visualizer"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.19",
+    "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
     "@noble/hashes": "^1.4.0",
-    "@nostr-dev-kit/ndk": "^2.8.1",
+    "@nostr-dev-kit/ndk": "^2.8.2",
-    "@nostr-dev-kit/ndk-cache-dexie": "^2.4.1",
+    "@nostr-dev-kit/ndk-cache-dexie": "^2.4.2",
-    "@tanstack/react-query": "^5.32.0",
+    "@tanstack/react-query": "^5.37.1",
-    "@tanstack/react-query-devtools": "^5.32.0",
+    "@tanstack/react-query-devtools": "^5.37.1",
     "add": "^2.0.6",
     "axios": "^1.6.8",
-    "blossom-client-sdk": "^0.4.0",
+    "blossom-client-sdk": "^0.8.0",
     "dayjs": "^1.11.11",
     "id3js": "^2.1.1",
     "lodash": "^4.17.21",
-    "nostr-tools": "^2.5.1",
+    "nostr-tools": "^2.5.2",
     "p-limit": "^5.0.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
-    "react-pdf": "^7.7.1",
+    "react-pdf": "^8.0.2",
-    "react-router-dom": "^6.23.0"
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.28.11",
+    "@tanstack/eslint-plugin-query": "^5.35.6",
-    "@types/lodash": "^4.17.0",
+    "@types/lodash": "^4.17.4",
-    "@types/react": "^18.2.79",
+    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.2.25",
+    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.7.1",
+    "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.19",
     "daisyui": "latest",
-    "eslint": "^8.56.0",
+    "eslint": "^9.3.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.2.10",
+    "vite": "^5.2.11",
-    "vite-bundle-visualizer": "^1.1.0"
+    "vite-bundle-visualizer": "^1.2.1"
   }
 }

src/components/BlobList/BlobList.tsx

@@ -39,12 +39,12 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
   const fileMetaEventsByHash = useFileMetaEventsByHash();
 
   const images = useMemo(
-    () => blobs.filter(b => b.type?.startsWith('image/')).sort((a, b) => (a.created > b.created ? -1 : 1)), // descending
+    () => blobs.filter(b => b.type?.startsWith('image/')).sort((a, b) => (a.uploaded > b.uploaded ? -1 : 1)), // descending
     [blobs]
   );
 
   const videos = useMemo(
-    () => blobs.filter(b => b.type?.startsWith('video/')).sort((a, b) => (a.created > b.created ? -1 : 1)), // descending
+    () => blobs.filter(b => b.type?.startsWith('video/')).sort((a, b) => (a.uploaded > b.uploaded ? -1 : 1)), // descending
     [blobs]
   );
 
@@ -67,7 +67,7 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
   };
 
   const audioFiles = useMemo(
-    () => blobs.filter(b => b.type?.startsWith('audio/')).sort((a, b) => (a.created > b.created ? -1 : 1)),
+    () => blobs.filter(b => b.type?.startsWith('audio/')).sort((a, b) => (a.uploaded > b.uploaded ? -1 : 1)),
     [blobs]
   );
 
@@ -84,7 +84,7 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
   });
 
   const docs = useMemo(
-    () => blobs.filter(b => b.type?.startsWith('application/pdf')).sort((a, b) => (a.created > b.created ? -1 : 1)), // descending
+    () => blobs.filter(b => b.type?.startsWith('application/pdf')).sort((a, b) => (a.uploaded > b.uploaded ? -1 : 1)), // descending
     [blobs]
   );
 
@@ -235,7 +235,7 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
               </a>
               <div className="flex flex-row text-xs">
                 <span>{formatFileSize(blob.size)}</span>
-                <span className=" flex-grow text-right">{formatDate(blob.created)}</span>
+                <span className=" flex-grow text-right">{formatDate(blob.uploaded)}</span>
               </div>
               <Actions blob={blob} className="actions absolute bottom-8 right-0"></Actions>
             </div>
@@ -254,7 +254,7 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
               <video src={blob.url} preload="metadata" width={320} controls playsInline></video>
               <div className="flex flex-grow flex-row text-xs pt-12 items-end">
                 <span>{formatFileSize(blob.size)}</span>
-                <span className=" flex-grow text-right">{formatDate(blob.created)}</span>
+                <span className=" flex-grow text-right">{formatDate(blob.uploaded)}</span>
               </div>
               <Actions blob={blob} className="actions absolute bottom-10 right-2 " />
             </div>
@@ -292,7 +292,7 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
 
                   <div className="flex flex-grow flex-row text-xs pt-12 items-end">
                     <span>{formatFileSize(blob.data.size)}</span>
-                    <span className=" flex-grow text-right">{formatDate(blob.data.created)}</span>
+                    <span className=" flex-grow text-right">{formatDate(blob.data.uploaded)}</span>
                   </div>
                   <Actions blob={blob.data} className="actions absolute bottom-10 right-2 " />
                 </div>
@@ -322,7 +322,7 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
               </a>
               <div className="flex flex-grow flex-row text-xs pt-12 items-end">
                 <span>{formatFileSize(blob.size)}</span>
-                <span className=" flex-grow text-right">{formatDate(blob.created)}</span>
+                <span className=" flex-grow text-right">{formatDate(blob.uploaded)}</span>
               </div>
               <Actions blob={blob} className="actions absolute bottom-10 right-2 " />
             </div>
@@ -360,7 +360,7 @@ const BlobList = ({ blobs, onDelete, title, className = '' }: BlobListProps) =>
                   </td>
                   <td>{formatFileSize(blob.size)}</td>
                   <td>{blob.type && `${blob.type}`}</td>
-                  <td>{formatDate(blob.created)}</td>
+                  <td>{formatDate(blob.uploaded)}</td>
                   <td className="whitespace-nowrap">
                     <Actions blob={blob}></Actions>
                   </td>

src/components/FileEventEditor/FileEventEditor.tsx

@@ -67,6 +67,9 @@ const FileEventEditor = ({ data }: { data: FileEventData }) => {
   }, [thumbnailSubscription.events]);
 
   const publishFileEvent = async (data: FileEventData) => {
+
+    // TODO REupload selected video thumbnail from DVM
+
     const e: NostrEvent = {
       created_at: dayjs().unix(),
       content: data.content,

src/components/Layout/Layout.css

@@ -8,7 +8,7 @@
 
 
 .footer {
-  @apply justify-center gap-1 text-base-content pt-12 pb-6;
+  @apply justify-center gap-1 text-base-content pt-12 pb-12;
 }
 
 .btn svg {

src/components/Layout/Layout.tsx

@@ -41,9 +41,9 @@ export const Layout = () => {
                   className="inline-block w-5 h-5 stroke-current"
                 >
                   <path
-                    stroke-linecap="round"
+                    strokeLinecap="round"
-                    stroke-linejoin="round"
+                    strokeLinejoin="round"
-                    stroke-width="2"
+                    strokeWidth="2"
                     d="M4 6h16M4 12h16M4 18h16"
                   ></path>
                 </svg>
@@ -73,7 +73,7 @@ export const Layout = () => {
 
       <div className="content">{<Outlet />}</div>
       <div className="footer">
-        <span className='whitespace-nowrap'>made with 💜 by{' '}
+        <span className='whitespace-nowrap block'>made with 💜 by{' '}
         <a href="https://njump.me/npub1klr0dy2ul2dx9llk58czvpx73rprcmrvd5dc7ck8esg8f8es06qs427gxc">florian</a></span>
       </div>
     </div>

src/pages/Home.tsx

@@ -46,7 +46,7 @@ function Home() {
     () =>
       selectedServer != undefined
         ? serverInfo[selectedServer].blobs?.sort(
-            (a, b) => (a.created > b.created ? -1 : 1) // descending
+            (a, b) => (a.uploaded > b.uploaded ? -1 : 1) // descending
           )
         : undefined,
     [serverInfo, selectedServer]
@@ -66,7 +66,7 @@ function Home() {
       {selectedServer && serverInfo[selectedServer] && selectedServerBlobs && (
         <BlobList
           className="mt-4"
-          title={`Your objects on ${serverInfo[selectedServer].name}`}
+          title={`Content on ${serverInfo[selectedServer].name}`}
           blobs={selectedServerBlobs}
           onDelete={blob =>
             deleteBlob.mutate({

src/pages/Upload.tsx

@@ -105,7 +105,7 @@ function Upload() {
     // for image resizing
     const fileDimensions: { [key: string]: FileEventData } = {};
     for (const file of filesToUpload) {
-      let data = { content: file.name.replace(/\.[a-zA-Z0-9]{3,4}$/,''), url: [] as string[] } as FileEventData;
+      let data = { content: file.name.replace(/\.[a-zA-Z0-9]{3,4}$/, ''), url: [] as string[] } as FileEventData;
       if (file.type.startsWith('image/')) {
         const dimensions = await getImageSize(file);
         data = { ...data, dim: `${dimensions.width}x${dimensions.height}` };
@@ -117,7 +117,9 @@ function Upload() {
       const serverUrl = serverInfo[server.name].url;
       let serverTransferred = 0;
       for (const file of filesToUpload) {
+        console.log('Creating auth ', Date.now());
         const uploadAuth = await BlossomClient.getUploadAuth(file, signEventTemplate, 'Upload Blob');
+        console.log('Auth done ', Date.now(), uploadAuth);
 
         const newBlob = await uploadBlob(serverUrl, file, uploadAuth, progressEvent => {
           setTransfers(ut => ({

src/utils/useServerInfo.ts

@@ -4,6 +4,7 @@ import { BlobDescriptor, BlossomClient } from 'blossom-client-sdk';
 import { useNDK } from '../utils/ndk';
 import { nip19 } from 'nostr-tools';
 import { useUserServers } from './useUserServers';
+import dayjs from 'dayjs';
 
 export type ServerInfo = {
   count: number;
@@ -32,8 +33,9 @@ export const useServerInfo = () => {
       queryFn: async () => {
         const listAuthEvent = await BlossomClient.getListAuth(signEventTemplate, 'List Blobs');
         const blobs = await BlossomClient.listBlobs(server.url, pubkey!, undefined, listAuthEvent);
-        // fix for wrong timestamps on media-server.slidestr.net (remove)
+
-        return blobs.map(b => ({ ...b, created: b.created > 1711200000000 ? b.created / 1000 : b.created }));
+        // fallback to deprecated created attibute for servers that are not using 'uploaded' yet
+        return blobs.map(b => ({ ...b, uploaded: b.uploaded || b.created || dayjs().unix()}));
       },
       enabled: !!pubkey && servers.length > 0,
       staleTime: 1000 * 60 * 5,
@@ -51,7 +53,7 @@ export const useServerInfo = () => {
         isError: blobs[sx].isError,
         count: blobs[sx].data?.length || 0,
         size: blobs[sx].data?.reduce((acc, blob) => acc + blob.size, 0) || 0,
-        lastChange: blobs[sx].data?.reduce((acc, blob) => Math.max(acc, blob.created), 0) || 0,
+        lastChange: blobs[sx].data?.reduce((acc, blob) => Math.max(acc, blob.uploaded), 0) || 0,
       };
     });
     return info;