Locally stored thumbnails for video and YouTube uploads

- Server-side video thumbnails: ffmpeg-static grabs a frame at ~1s,
  scales it to 480px and stores it under /uploads/thumbs/ at upload
  time (direct files, remote URLs and comment attachments)
- YouTube thumbnails are downloaded once at upload time instead of
  being hotlinked from i.ytimg.com on every render; remote URL kept
  as fallback for legacy rows
- thumbUrl now covers video/audio/youtube/twitch in grid meta,
  profile uploads and notifications
- Generated thumbnail files are removed on single/bulk delete

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

server/api/uploads/[id].delete.ts

@@ -12,7 +12,7 @@ export default defineEventHandler(async (event) => {
   const db = useDb()
 
   const [upload] = await db
-    .select({ fileName: uploads.fileName })
+    .select({ fileName: uploads.fileName, previewImage: uploads.previewImage })
     .from(uploads)
     .where(eq(uploads.id, id))
     .limit(1)
@@ -30,11 +30,15 @@ export default defineEventHandler(async (event) => {
   if (upload.fileName) {
     await unlink(join(uploadDir(), upload.fileName)).catch(() => {})
   }
+  if (upload.previewImage?.startsWith('/uploads/')) {
+    await unlink(join(process.cwd(), 'public', upload.previewImage)).catch(() => {})
+  }
   for (const f of attachmentFiles) {
     await unlink(join(uploadDir(), 'attachments', f.fileName)).catch(() => {})
     if (f.cover) {
       await unlink(join(process.cwd(), 'public', f.cover)).catch(() => {})
     }
   }
+  broadcastToAll({ type: 'upload-deleted', ids: [id] })
   return { ok: true }
 })

server/api/uploads/[id]/comments.post.ts

@@ -3,7 +3,7 @@ import { extname, join } from 'node:path'
 import { eq, sql } from 'drizzle-orm'
 import { z } from 'zod'
 import { commentAttachments, comments, uploads } from '../../../db/schema'
-import { isAudioAttachment, MAX_COMMENT_ATTACHMENTS } from '~~/shared/utils/attachments'
+import { isAudioAttachment, isVideoAttachment, MAX_COMMENT_ATTACHMENTS } from '~~/shared/utils/attachments'
 
 const bodySchema = z.object({
   content: z.string().trim().min(1).max(2000),
@@ -82,6 +82,9 @@ export default defineEventHandler(async (event) => {
       const audioMeta = !file.voice && isAudioAttachment({ mimeType, name: filename })
         ? await extractAudioMeta(`att-${commentId}-${i}`, data, mimeType)
         : null
+      const videoThumb = !file.voice && isVideoAttachment({ mimeType, name: filename })
+        ? await extractVideoThumb(`att-${commentId}-${i}`, join(attachmentsDir(), storedName))
+        : null
       const meta = file.voice ? { voice: true } : (audioMeta?.meta ?? null)
       const [row] = await db.insert(commentAttachments).values({
         commentId,
@@ -89,7 +92,7 @@ export default defineEventHandler(async (event) => {
         originalName: filename.slice(0, 255),
         mimeType,
         size: data.length,
-        cover: audioMeta?.cover ?? null,
+        cover: videoThumb ?? audioMeta?.cover ?? null,
         meta,
       })
       attachments.push({
@@ -98,7 +101,7 @@ export default defineEventHandler(async (event) => {
         url: `/uploads/attachments/${storedName}`,
         mimeType,
         size: data.length,
-        cover: audioMeta?.cover ?? null,
+        cover: videoThumb ?? audioMeta?.cover ?? null,
         meta,
       })
     }

server/api/uploads/index.post.ts

@@ -64,6 +64,9 @@ export default defineEventHandler(async (event) => {
       const audioMeta = media.type === 'audio'
         ? await extractAudioMeta(id, media.data, media.mimeType)
         : null
+      const videoThumb = media.type === 'video'
+        ? await extractVideoThumb(id, join(uploadDir(), fileName))
+        : null
       await db.insert(uploads).values({
         id,
         userId: user.id,
@@ -72,7 +75,7 @@ export default defineEventHandler(async (event) => {
         originalName: decodeURIComponent(basename(new URL(body.url).pathname) || body.url).slice(0, 255),
         mimeType: media.mimeType.slice(0, 100),
         size: media.data.length,
-        previewImage: audioMeta?.cover ?? null,
+        previewImage: videoThumb ?? audioMeta?.cover ?? null,
         audioMeta: audioMeta?.meta ?? null,
       })
       await ensureThreadSubscription(id, user.id)
@@ -84,7 +87,9 @@ export default defineEventHandler(async (event) => {
       type === 'link' || type === 'twitch' ? fetchLinkPreview(body.url) : null,
       twitchTarget ? fetchTwitchPreview(twitchTarget) : null,
     ])
-    const remotePreviewImage = twitchPreview?.image ?? preview?.image ?? null
+    const embedId = type === 'youtube' ? getYoutubeId(body.url) : null
+    const remotePreviewImage = twitchPreview?.image ?? preview?.image
+      ?? (embedId ? youtubeThumbUrl(embedId) : null)
     const previewImage = remotePreviewImage
       ? (await savePreviewImage(id, remotePreviewImage)) ?? remotePreviewImage
       : null
@@ -137,6 +142,9 @@ export default defineEventHandler(async (event) => {
   const audioMeta = type === 'audio'
     ? await extractAudioMeta(id, file.data, mimeType)
     : null
+  const videoThumb = type === 'video'
+    ? await extractVideoThumb(id, join(uploadDir(), fileName))
+    : null
   await db.insert(uploads).values({
     id,
     userId: user.id,
@@ -145,7 +153,7 @@ export default defineEventHandler(async (event) => {
     originalName: (file.filename ?? fileName).slice(0, 255),
     mimeType: (mimeType || 'application/octet-stream').slice(0, 100),
     size: file.data.length,
-    previewImage: audioMeta?.cover ?? null,
+    previewImage: videoThumb ?? audioMeta?.cover ?? null,
     audioMeta: audioMeta?.meta ?? null,
   })
 

server/api/uploads/meta.get.ts

@@ -25,9 +25,8 @@ export default defineEventHandler(async (event) => {
   return rows.map((row) => {
     const url = row.externalUrl ?? `/uploads/${row.fileName}`
     const embedId = row.type === 'youtube' && row.externalUrl ? getYoutubeId(row.externalUrl) : null
-    const thumbUrl = row.type === 'youtube' && embedId
-      ? youtubeThumbUrl(embedId)
-      : row.type === 'image' ? url : row.type === 'link' || row.type === 'twitch' || row.type === 'audio' ? row.previewImage : null
+    const thumbUrl = row.previewImage
+      ?? (row.type === 'youtube' && embedId ? youtubeThumbUrl(embedId) : row.type === 'image' ? url : null)
     return { id: row.id, thumbUrl }
   })
 })