fix: handle thumbnails properly in raw api routes

Author: diced

src/components/file/DashboardFileType.tsx

@@ -83,7 +83,9 @@ export default function DashboardFileType({
   const user = useUserStore((state) => state.user);
   const disableMediaPreview = useSettingsStore((state) => state.settings.disableMediaPreview);
   const fileRoute = user ? `/api/user/files/${(file as DbFile).id}/raw` : `/raw/${file.name}`;
-
+  const thumbnailRoute = user
+    ? `/api/user/files/${(file as DbFile).thumbnail?.path}/raw`
+    : `/raw/${(file as DbFile).thumbnail?.path}`;
   const dbFile = 'id' in file;
   const renderIn = useMemo(() => renderMode(file.name.split('.').pop() || ''), [file.name]);
 
@@ -184,10 +186,7 @@ export default function DashboardFileType({
         />
       ) : (file as DbFile).thumbnail && dbFile ? (
         <Box pos='relative'>
-          <MantineImage
-            src={`/raw/${(file as DbFile).thumbnail!.path}`}
-            alt={file.name || 'Video thumbnail'}
-          />
+          <MantineImage src={thumbnailRoute} alt={file.name || 'Video thumbnail'} />
 
           <Center
             pos='absolute'

src/server/routes/api/user/files/[id]/raw.ts

@@ -28,6 +28,19 @@ export default fastifyPlugin(
       const { id } = req.params;
       const { pw, download } = req.query;
 
+      if (id.startsWith('.thumbnail')) {
+        const thumbnail = await prisma.thumbnail.findFirst({
+          where: {
+            path: id,
+            file: {
+              userId: req.user.id,
+            },
+          },
+        });
+
+        if (!thumbnail) return res.callNotFound();
+      }
+
       const file = await prisma.file.findFirst({
         where: {
           id,

src/server/routes/raw/[id].ts

@@ -4,6 +4,7 @@ import { verifyPassword } from '@/lib/crypto';
 import { datasource } from '@/lib/datasource';
 import { prisma } from '@/lib/db';
 import { log } from '@/lib/logger';
+import { guess } from '@/lib/mimes';
 import { FastifyReply, FastifyRequest } from 'fastify';
 import fastifyPlugin from 'fastify-plugin';
 
@@ -31,12 +32,35 @@ export const rawFileHandler = async (
   const { id } = req.params;
   const { pw, download } = req.query;
 
+  if (id.startsWith('.thumbnail')) {
+    const thumbnail = await prisma.thumbnail.findFirst({
+      where: {
+        path: id,
+      },
+    });
+
+    if (!thumbnail) return res.callNotFound();
+
+    const size = await datasource.size(thumbnail.path);
+    if (!size) return res.callNotFound();
+
+    const buf = await datasource.get(thumbnail.path);
+    if (!buf) return res.callNotFound();
+
+    return res
+      .type(await guess(thumbnail.path.replace('.thumbnail-', '').split('.').pop() || 'jpg'))
+      .headers({
+        'Content-Length': size,
+      })
+      .status(200)
+      .send(buf);
+  }
+
   const file = await prisma.file.findFirst({
     where: {
       name: decodeURIComponent(id),
     },
   });
-
   if (!file) return res.callNotFound();
 
   if (file?.deletesAt && file.deletesAt <= new Date()) {