fix: thumbnail generation (better now)

package.json

@@ -51,7 +51,7 @@
     "fast-glob": "^3.3.2",
     "fastify": "^4.26.2",
     "fastify-plugin": "^4.5.1",
-    "ffmpeg-static": "^5.2.0",
+    "fluent-ffmpeg": "^2.1.3",
     "highlight.js": "^11.9.0",
     "isomorphic-dompurify": "^1.11.0",
     "katex": "^0.16.9",
@@ -75,6 +75,7 @@
   "devDependencies": {
     "@types/bytes": "^3.1.4",
     "@types/express": "^4.17.21",
+    "@types/fluent-ffmpeg": "^2.1.24",
     "@types/katex": "^0.16.7",
     "@types/ms": "^0.7.34",
     "@types/multer": "^1.4.11",

src/components/pages/upload/uploadPartialFiles.tsx

@@ -139,8 +139,6 @@ export async function uploadPartialFiles(
         () => {
           const res: Response['/api/upload'] = JSON.parse(req.responseText);
 
-          console.log(res);
-
           if ((res as ErrorBody).message) {
             notifications.update({
               id: 'upload-partial',

src/offload/thumbnails.ts

@@ -3,9 +3,8 @@ import { config } from '@/lib/config';
 import { datasource } from '@/lib/datasource';
 import { prisma } from '@/lib/db';
 import { log } from '@/lib/logger';
-import { spawn } from 'child_process';
-import ffmpegPath from 'ffmpeg-static';
-import { createWriteStream } from 'fs';
+import ffmpeg from 'fluent-ffmpeg';
+import { createWriteStream, readFileSync, unlinkSync } from 'fs';
 import { join } from 'path';
 import { isMainThread, parentPort, workerData } from 'worker_threads';
 
@@ -30,43 +29,31 @@ if (!enabled) {
 
 logger.debug('started thumbnail worker');
 
-async function ffmpeg(file: string): Promise<Buffer | undefined> {
-  const args = ['-i', file, '-frames:v', '1', '-f', 'mjpeg', 'pipe:1'];
-
-  const proc = spawn(ffmpegPath!, args, {
-    stdio: ['ignore', 'pipe', 'ignore'],
+function genThumbnail(file: string, thumbnailTmp: string): Promise<Buffer | undefined> {
+  return new Promise((resolve, reject) => {
+    ffmpeg(file)
+      .videoFilters('thumbnail')
+      .frames(1)
+      .format('mjpeg')
+      .output(thumbnailTmp)
+      .on('start', (cmd) => {
+        logger.debug('generating thumbnail', { cmd });
+      })
+      .on('error', (err) => {
+        logger.error('failed to generate thumbnail', { err: err.message });
+        reject(err);
+      })
+      .on('end', () => {
+        const buffer = readFileSync(thumbnailTmp);
+
+        unlinkSync(thumbnailTmp);
+        unlinkSync(file);
+        logger.debug('removed temporary files', { file, thumbnail: thumbnailTmp });
+
+        resolve(buffer);
+      })
+      .run();
   });
-
-  try {
-    const buffer = await new Promise<Buffer>((resolve, reject) => {
-      const data: Buffer[] = [];
-
-      proc.stdout!.on('data', (d) => {
-        data.push(d);
-      });
-
-      proc.once('error', reject);
-
-      proc.once('close', (code) => {
-        if (code !== 0) {
-          const stringed = Buffer.concat([...data]).toString();
-
-          logger.error('ffmpeg exited with non-zero code');
-
-          reject(stringed);
-        } else {
-          resolve(Buffer.concat([...data]));
-        }
-      });
-    });
-
-    return buffer;
-  } catch (e) {
-    logger.error('failed to generate thumbnail', {
-      file,
-      error: e,
-    });
-  }
 }
 
 async function generate(ids: string[]) {
@@ -103,7 +90,8 @@ async function generate(ids: string[]) {
       writeStream.on('finish', resolve);
     });
 
-    const thumbnail = await ffmpeg(tmpFile);
+    const thumbnailTmpFile = join(config.core.tempDirectory, `zthumbnail_${file.id}.jpg`);
+    const thumbnail = await genThumbnail(tmpFile, thumbnailTmpFile);
     if (!thumbnail) return;
 
     await datasource.put(`.thumbnail.${file.id}.jpg`, thumbnail);