From c2ac9a5481b096a0ad04bfdb226aa6a7c3d2e3b9 Mon Sep 17 00:00:00 2001
From: florian <>
Date: Sat, 29 Jun 2024 19:10:09 +0200
Subject: [PATCH] fix: Fixed missing audio without tags

---
 bun.lockb                                     | Bin 172137 -> 172137 bytes
 .../AudioBlobList/AudioBlobList.tsx           |  47 ++++++++++++------
 src/components/BlobList/BlobList.tsx          |  10 ++--
 src/pages/Upload.tsx                          |   4 +-
 4 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 7969db4d222164b042730595a057a5ffd080d6b2..8f256ddc7796dfca248480475f3edac78fa262e3 100755
GIT binary patch
delta 150
zcmV;H0BQf}zzXTW3Xm=!<mj)T@lzKz^4k}hG_-2Sp%LKFSCsyRo}9*~!9YD6u}*e1
z0SS{qEi03-90;@cHT9H08F3B&@|;0LT0)P5lAa85LT_%><bKF$^>Jexz&Do0Iol)c
zqW#w@QCkSECVrVG8qEvZB^W%X4Yov!6EE(tgDuOqEz1G^2LU;^EYkrUV*xq0N;U!?
EYO`NNkpKVy

delta 144
zcmV;B0B`^4zzXTW3Xm=!!8grc5y{JuUy72qgpZ4%>nhKUp461xN%!Ph_@Cexu}*e1
zlY~1ov-majlt2qVJu!Mnpfn*~nV0FRdEw2{qq<0DYC%bp%b!o`fxBZ0+?npQwy%qn
yaPL_z{xjb)7{S-n4Lw~=AuBgmk?Vsk%eO7d0saR8IJYd*0UcujIJZhR0v~F3zed~u

diff --git a/src/components/AudioBlobList/AudioBlobList.tsx b/src/components/AudioBlobList/AudioBlobList.tsx
index 1143450..318dbce 100644
--- a/src/components/AudioBlobList/AudioBlobList.tsx
+++ b/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>
           )
diff --git a/src/components/BlobList/BlobList.tsx b/src/components/BlobList/BlobList.tsx
index f6e9ea6..85d91e9 100644
--- a/src/components/BlobList/BlobList.tsx
+++ b/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} />}
 
diff --git a/src/pages/Upload.tsx b/src/pages/Upload.tsx
index 44d8daf..1795774 100644
--- a/src/pages/Upload.tsx
+++ b/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"