fix: Fixed missing audio without tags

src/components/AudioBlobList/AudioBlobList.tsx

@@ -1,24 +1,36 @@
 import { formatFileSize, formatDate } from '../../utils/utils';
 import { ClipboardDocumentIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { BlobDescriptor } from 'blossom-client-sdk';
-import { AudioBlob, fetchId3Tag } from '../../utils/id3';
+import { AudioBlob, ID3Tag, fetchId3Tag } from '../../utils/id3';
 import { useQueries } from '@tanstack/react-query';
 import { useGlobalContext } from '../../GlobalState';
 import { PauseIcon, PlayIcon } from '@heroicons/react/24/solid';
+import { HandleSelectBlobType } from '../BlobList/useBlobSelection';
 
 type AudioBlobListProps = {
   audioFiles: BlobDescriptor[];
-  onDelete?: (blob: BlobDescriptor) => void;
+  handleSelectBlob: HandleSelectBlobType;
+  selectedBlobs: { [key: string]: boolean };
 };
 
-const AudioBlobList = ({ audioFiles, onDelete }: AudioBlobListProps) => {
+const AudioBlobList = ({ audioFiles, handleSelectBlob, selectedBlobs }: AudioBlobListProps) => {
   const { dispatch, state } = useGlobalContext();
 
   const audioFilesWithId3 = useQueries({
     queries: audioFiles.map(af => ({
       queryKey: ['id3', af.sha256],
       queryFn: async () => {
-        const id3Tag = await fetchId3Tag(af.sha256, af.url);
+        let id3Tag:
+          | {
+              id3: ID3Tag;
+              coverFull?: string | undefined;
+            }
+          | undefined;
+        try {
+          id3Tag = await fetchId3Tag(af.sha256, af.url);
+        } catch (e) {
+          // ignore
+        }
         return { ...af, id3: id3Tag?.id3 } as AudioBlob;
       },
       staleTime: 1000 * 60 * 5,
@@ -70,7 +82,21 @@ const AudioBlobList = ({ audioFiles, onDelete }: AudioBlobListProps) => {
                 )}
               </div>
 
-              <div className="flex flex-grow flex-row text-xs items-end">
+              <div
+                className="flex flex-grow flex-row text-xs items-end mt-2 cursor-pointer"
+                onClick={e => {
+                  e.stopPropagation();
+                  handleSelectBlob(blob.data.sha256, e);
+                }}
+              >
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary checkbox-sm mr-2"
+                  checked={selectedBlobs[blob.data.sha256]}
+                  onChange={e => handleSelectBlob(blob.data.sha256, e)}
+                  onClick={e => e.stopPropagation()}
+                />
+
                 <span>{formatFileSize(blob.data.size)}</span>
                 <span className=" flex-grow text-right">{formatDate(blob.data.uploaded)}</span>
               </div>
@@ -84,17 +110,6 @@ const AudioBlobList = ({ audioFiles, onDelete }: AudioBlobListProps) => {
                     <ClipboardDocumentIcon />
                   </a>
                 </span>
-                {onDelete && (
-                  <span>
-                    <a
-                      onClick={() => onDelete(blob.data)}
-                      className="link link-primary tooltip"
-                      data-tip="Delete this blob"
-                    >
-                      <TrashIcon />
-                    </a>
-                  </span>
-                )}
               </div>
             </div>
           )

src/components/BlobList/BlobList.tsx

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

src/pages/Upload.tsx

@@ -232,7 +232,7 @@ function Upload() {
   return (
     <>
       <h2 className=" py-4">Upload</h2>
-      {/* 
+      
       <button className='btn btn-primary' onClick={async () => {
 
          const url = "https://media-server.slidestr.net/3c3f3f0b67c17953e59ebdb53b7fd83bf68b552823b927fa9718a52e12d53c0a";
@@ -255,7 +255,7 @@ function Upload() {
           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"