feat: Support for audio previews in storage tab

superstreamerapp · Nov 16, 2024 · 6436ab8 · 6436ab8
1 parent e2bf4d0
commit 6436ab8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/packages/api/src/routes/storage.ts b/packages/api/src/routes/storage.ts
@@ -38,14 +38,20 @@ export const storage = new Elysia()
       const ext = query.path.split(".").pop();
       switch (ext) {
         case "m4v":
-        case "m4a":
         case "mp4":
         case "mkv":
           return {
             mode: "url",
             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
@@ -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
@@ -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>
+  );
+}