From a72ebe853f499a3c32dac53f678425f42f5f520d Mon Sep 17 00:00:00 2001
From: grngxd <36968271+grngxd@users.noreply.github.com>
Date: Tue, 10 Jun 2025 16:26:05 +0100
Subject: [PATCH] enhance component

---
 src/components/File.tsx | 100 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 88 insertions(+), 12 deletions(-)

diff --git a/src/components/File.tsx b/src/components/File.tsx
index bb79940..c68f603 100644
--- a/src/components/File.tsx
+++ b/src/components/File.tsx
@@ -1,4 +1,4 @@
-import { $, component$ } from "@builder.io/qwik";
+import { $, component$, Signal, useSignal, useTask$ } from "@builder.io/qwik";
 import { useNanostore$ } from "~/hooks/nanostores";
 import { api } from "~/lib/api";
 import { dashboardFiles } from "~/lib/stores";
@@ -68,17 +68,11 @@ export default component$(({ file }: FileProps) => {
                 <a
                     href={`/api/${file.Owner}/${file.Name}`} 
                     target="_blank"
-                    class="block w-full h-60 overflow-clip"
+                    class="flex w-full h-60 overflow-clip"
                 >
-                    { (file.Name.endsWith(".png") || file.Name.endsWith(".jpg") || file.Name.endsWith(".jpeg")) && (
-                        <img
-                            width={400}
-                            height={300}
-                            src={`/api/${file.Owner}/${file.Name}`}
-                            alt={file.Name}
-                            class="w-full h-60 object-cover bg-neutral-800 flex-grow group-hover:scale-105 transition-all duration-500"
-                        />
-                    )}
+                    <div class="flex flex-grow group-hover:scale-105 transition-all duration-500 bg-neutral-800">
+                        <FilePreview file={file} />
+                    </div>   
                 </a>
 
                 <div class="absolute bottom-2 right-2 gap-2 z-10 group-hover:flex hidden duration-200 transition-all">
@@ -120,4 +114,86 @@ export default component$(({ file }: FileProps) => {
             </div>
         </div>
     )
-})
\ No newline at end of file
+})
+
+const FilePreview = component$(({ file }: FileProps) => {
+    type FileType =
+        | "image"
+        | "video"
+        | "audio"
+        | "other";
+
+    const type: Signal<FileType> = useSignal<FileType>("other");
+    const extension = file.Name.split('.').pop()?.toLowerCase() || "";
+
+    useTask$(async () => {
+        if (
+            ["png", "jpg", "jpeg", "gif"]
+            .includes(extension)) type.value = "image";
+
+        else if (
+            ["mp4", "webm", "ogg", "avi", "mov", "mkv"]
+            .includes(extension)) type.value = "video";
+        else if (
+            ["mp3", "wav", "ogg", "flac", "aac"]
+            .includes(extension)) type.value = "audio";
+
+        else type.value = "other";
+    });
+
+    switch (type.value) {
+        case "image":
+            return (
+                <div class="w-full h-60 object-cover flex-grow relative">
+                    <img
+                        width={400}
+                        height={300}
+                        src={`/api/${file.Owner}/${file.Name}`}
+                        alt={file.Name}
+                        class="w-full h-60 object-cover flex-grow"
+                    />
+                </div>
+            );
+        case "video":
+            return (
+                <div class="w-full h-60 object-cover flex-grow relative">
+                    <video
+                        width={400}
+                        height={300}
+                        src={`/api/${file.Owner}/${file.Name}`}
+                        class="w-full h-60 object-cover flex-grow"
+                        controls
+                        autoplay
+                        muted
+                    >
+                        <div class="w-full h-60 flex items-center justify-center">
+                            <p class="text-white/50 text-lg font-light">
+                                Preview not available
+                            </p>
+                        </div>
+                    </video>
+                </div>
+            );
+        case "audio":
+            return (
+                <div class="w-full h-60 flex items-center justify-center p-2">
+                    <audio
+                        controls
+                        class="w-full h-12"
+                        src={`/api/${file.Owner}/${file.Name}`}
+                    >
+                        Your browser does not support the audio element.
+                    </audio>
+                </div>
+            );
+        case "other":
+        default:
+            return (
+                <div class="w-full h-60 flex items-center justify-center">
+                    <p class="text-white/50 text-lg font-light">
+                        Preview not available
+                    </p>
+                </div>
+            );
+        }
+});
\ No newline at end of file