stereo.cat/frontend
2
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

enhance component

Browse source
This commit is contained in:
grngxd 2025-06-10 16:26:05 +01:00
parent 68b13ab5c2
commit a72ebe853f
1 changed files with 88 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/components/File.tsx
View file

@ -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 { useNanostore$ } from "~/hooks/nanostores";
import { api } from "~/lib/api"; import { api } from "~/lib/api";
import { dashboardFiles } from "~/lib/stores"; import { dashboardFiles } from "~/lib/stores";
@ -68,17 +68,11 @@ export default component$(({ file }: FileProps) => {
<a <a
href={`/api/${file.Owner}/${file.Name}`} href={`/api/${file.Owner}/${file.Name}`}
target="_blank" 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")) && ( <div class="flex flex-grow group-hover:scale-105 transition-all duration-500 bg-neutral-800">
<img <FilePreview file={file} />
width={400} </div>
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"
/>
)}
</a> </a>
<div class="absolute bottom-2 right-2 gap-2 z-10 group-hover:flex hidden duration-200 transition-all"> <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>
</div> </div>
) )
}) })
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>
);
}
});