From 6436ab838c47c491f6999cc8461801e95a2b781f Mon Sep 17 00:00:00 2001
From: Matthias Van Parijs <matvp91@gmail.com>
Date: Sat, 16 Nov 2024 23:32:34 +0100
Subject: [PATCH] feat: Support for audio previews in storage tab

---
 packages/api/src/routes/storage.ts          |  8 +++-
 packages/api/src/types.ts                   |  2 +-
 packages/app/src/components/FilePreview.tsx | 43 +++++++++++++++++----
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/packages/api/src/routes/storage.ts b/packages/api/src/routes/storage.ts
index b3cad92..eb83f24 100644
--- a/packages/api/src/routes/storage.ts
+++ b/packages/api/src/routes/storage.ts
@@ -38,7 +38,6 @@ export const storage = new Elysia()
       const ext = query.path.split(".").pop();
       switch (ext) {
         case "m4v":
-        case "m4a":
         case "mp4":
         case "mkv":
           return {
@@ -46,6 +45,13 @@ export const storage = new Elysia()
             url: await getStorageFileUrl(query.path),
             type: "video",
           };
+        case "m4a":
+        case "mp3":
+          return {
+            mode: "url",
+            url: await getStorageFileUrl(query.path),
+            type: "audio",
+          };
         case "m3u8":
         case "json":
         case "vtt":
diff --git a/packages/api/src/types.ts b/packages/api/src/types.ts
index 1156c0c..15e98fe 100644
--- a/packages/api/src/types.ts
+++ b/packages/api/src/types.ts
@@ -58,7 +58,7 @@ export type StorageFolder = Static<typeof StorageFolderSchema>;
 export const StorageFileSchema = t.Union([
   t.Object({
     mode: t.Literal("url"),
-    type: t.Union([t.Literal("video")]),
+    type: t.Union([t.Literal("video"), t.Literal("audio")]),
     url: t.String(),
   }),
   t.Object({
diff --git a/packages/app/src/components/FilePreview.tsx b/packages/app/src/components/FilePreview.tsx
index 74757f8..c05864d 100644
--- a/packages/app/src/components/FilePreview.tsx
+++ b/packages/app/src/components/FilePreview.tsx
@@ -31,9 +31,17 @@ export function FilePreview({ path, onClose }: FilePreviewProps) {
       size="4xl"
     >
       <ModalContent>
-        <ModalHeader>Preview</ModalHeader>
-        <ModalBody className="px-6 pt-0 pb-4">
-          {data ? <Preview file={data} /> : null}
+        <ModalBody className="p-6">
+          {path ? (
+            <div className="text-sm">
+              <PathName path={path} />
+            </div>
+          ) : null}
+          {data ? (
+            <div className="p-4 bg-gray-100 rounded-lg border border-gray-200">
+              <Preview file={data} />
+            </div>
+          ) : null}
         </ModalBody>
       </ModalContent>
     </Modal>
@@ -47,13 +55,32 @@ function Preview({ file }: { file: StorageFile }) {
   if (file.mode === "url") {
     if (file.type === "video") {
       return (
-        <video
-          src={file.url}
-          controls
-          className="w-full aspect-video max-w-lg mx-auto"
-        />
+        <video src={file.url} controls className="w-full max-w-lg mx-auto" />
+      );
+    }
+    if (file.type === "audio") {
+      return (
+        <audio src={file.url} controls className="w-full max-w-lg mx-auto" />
       );
     }
   }
   return null;
 }
+
+function PathName({ path }: { path: string }) {
+  const chunks = path.substring(1).split("/");
+  return (
+    <div className="flex gap-1">
+      {chunks.map((chunk, index) => {
+        return (
+          <>
+            <span>{chunk}</span>
+            {index < chunks.length - 1 ? (
+              <span className="opacity-50">/</span>
+            ) : null}
+          </>
+        );
+      })}
+    </div>
+  );
+}