Show small stitch-frame thumbs when a video collection is expanded.

Co-authored-by: Cursor <cursoragent@cursor.com>

server/api/library/clips/[id]/first-frame.get.ts

@@ -0,0 +1,37 @@
+import { existsSync, createReadStream } from 'node:fs'
+import { clipFrameThumbFile, ensureClipFirstFrame, ensureScaledThumb, fileEtag, sniffImageType } from '~/server/utils/library'
+
+export default defineEventHandler(async (event) => {
+  const { owner } = assertLibraryOwner(event)
+  const id = String(getRouterParam(event, 'id') || '')
+  const clip = getClip(owner, id)
+  assertFolderAccess(event, clip.folderId)
+  const wantThumb = String(getQuery(event).thumb || '') === '1'
+
+  let framePath = ''
+  try {
+    framePath = await ensureClipFirstFrame(owner, clip.id)
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    throw createError({ statusCode: 500, statusMessage: `Could not extract the first frame: ${message}` })
+  }
+  if (!framePath || !existsSync(framePath)) {
+    throw createError({ statusCode: 404, statusMessage: 'Video file is missing' })
+  }
+
+  let path = framePath
+  if (wantThumb) {
+    const thumbPath = await ensureScaledThumb(framePath, clipFrameThumbFile(owner, clip.id, 'first'))
+    if (thumbPath && existsSync(thumbPath)) path = thumbPath
+  }
+
+  const etag = fileEtag(path)
+  setHeader(event, 'ETag', etag)
+  setHeader(event, 'Cache-Control', wantThumb ? 'private, max-age=86400, stale-while-revalidate=604800' : 'private, max-age=3600')
+  if (getHeader(event, 'if-none-match') === etag) {
+    setResponseStatus(event, 304)
+    return null
+  }
+  setHeader(event, 'Content-Type', wantThumb && path !== framePath ? 'image/jpeg' : sniffImageType(path))
+  return sendStream(event, createReadStream(path))
+})

server/api/library/clips/[id]/last-frame.get.ts

@@ -1,31 +1,37 @@
 import { existsSync, createReadStream } from 'node:fs'
-import { clipLastFramePath, clipVideoPath, fileEtag, sniffImageType } from '~/server/utils/library'
+import { clipFrameThumbFile, ensureClipLastFrame, ensureScaledThumb, fileEtag, sniffImageType } from '~/server/utils/library'
 
 export default defineEventHandler(async (event) => {
   const { owner } = assertLibraryOwner(event)
   const id = String(getRouterParam(event, 'id') || '')
   const clip = getClip(owner, id)
   assertFolderAccess(event, clip.folderId)
-  const videoPath = clipVideoPath(owner, clip.id)
-  if (!existsSync(videoPath)) {
+  const wantThumb = String(getQuery(event).thumb || '') === '1'
+
+  let framePath = ''
+  try {
+    framePath = await ensureClipLastFrame(owner, clip.id)
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    throw createError({ statusCode: 500, statusMessage: `Could not extract the last frame: ${message}` })
+  }
+  if (!framePath || !existsSync(framePath)) {
     throw createError({ statusCode: 404, statusMessage: 'Video file is missing' })
   }
-  const framePath = clipLastFramePath(owner, clip.id)
-  if (!existsSync(framePath)) {
-    try {
-      await extractLastFrame(videoPath, framePath)
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error)
-      throw createError({ statusCode: 500, statusMessage: `Could not extract the last frame: ${message}` })
-    }
+
+  let path = framePath
+  if (wantThumb) {
+    const thumbPath = await ensureScaledThumb(framePath, clipFrameThumbFile(owner, clip.id, 'last'))
+    if (thumbPath && existsSync(thumbPath)) path = thumbPath
   }
-  const etag = fileEtag(framePath)
+
+  const etag = fileEtag(path)
   setHeader(event, 'ETag', etag)
-  setHeader(event, 'Cache-Control', 'private, max-age=86400, stale-while-revalidate=604800')
+  setHeader(event, 'Cache-Control', wantThumb ? 'private, max-age=86400, stale-while-revalidate=604800' : 'private, max-age=3600')
   if (getHeader(event, 'if-none-match') === etag) {
     setResponseStatus(event, 304)
     return null
   }
-  setHeader(event, 'Content-Type', sniffImageType(framePath))
-  return sendStream(event, createReadStream(framePath))
+  setHeader(event, 'Content-Type', wantThumb && path !== framePath ? 'image/jpeg' : sniffImageType(path))
+  return sendStream(event, createReadStream(path))
 })