Add pixel size to tooltip and gif support with FFmpeg for avatar upload (#3329)

* Add avatar pixel size upload in tooltip

* Add gif support for avatar

* Add ffmpeg GIF process

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

2 files changed, 44 insertions, 1 deletions

diff --git a/server/helpers/ffmpeg-utils.ts b/server/helpers/ffmpeg-utils.ts
index c8d6969ff..66b9d2e44 100644
--- a/server/helpers/ffmpeg-utils.ts
+++ b/server/helpers/ffmpeg-utils.ts
@@ -355,6 +355,40 @@ function convertWebPToJPG (path: string, destination: string): Promise<void> {
   })
 }
 
+function processGIF (
+  path: string,
+  destination: string,
+  newSize: { width: number, height: number },
+  keepOriginal = false
+): Promise<void> {
+  return new Promise<void>(async (res, rej) => {
+    if (path === destination) {
+      throw new Error('FFmpeg needs an input path different that the output path.')
+    }
+
+    logger.debug('Processing gif %s to %s.', path, destination)
+
+    try {
+      const command = ffmpeg(path)
+        .fps(20)
+        .size(`${newSize.width}x${newSize.height}`)
+        .output(destination)
+
+      command.on('error', (err, stdout, stderr) => {
+        logger.error('Error in ffmpeg gif resizing process.', { stdout, stderr })
+        return rej(err)
+      })
+      .on('end', async () => {
+        if (keepOriginal !== true) await remove(path)
+        res()
+      })
+      .run()
+    } catch (err) {
+      return rej(err)
+    }
+  })
+}
+
 function runLiveTranscoding (rtmpUrl: string, outPath: string, resolutions: number[], fps, deleteSegments: boolean) {
   const command = getFFmpeg(rtmpUrl)
   command.inputOption('-fflags nobuffer')
@@ -474,6 +508,7 @@ export {
   getAudioStreamCodec,
   runLiveMuxing,
   convertWebPToJPG,
+  processGIF,
   getVideoStreamSize,
   getVideoFileResolution,
   getMetadataFromFile,
diff --git a/server/helpers/image-utils.ts b/server/helpers/image-utils.ts
index 5f254a7aa..fdf06e848 100644
--- a/server/helpers/image-utils.ts
+++ b/server/helpers/image-utils.ts
@@ -1,5 +1,6 @@
+import { extname } from 'path'
 import { remove, rename } from 'fs-extra'
-import { convertWebPToJPG } from './ffmpeg-utils'
+import { convertWebPToJPG, processGIF } from './ffmpeg-utils'
 import { logger } from './logger'
 
 const Jimp = require('jimp')
@@ -10,6 +11,13 @@ async function processImage (
   newSize: { width: number, height: number },
   keepOriginal = false
 ) {
+  const extension = extname(path)
+
+  // Use FFmpeg to process GIF
+  if (extension === '.gif') {
+    return processGIF(path, destination, newSize, keepOriginal)
+  }
+
   if (path === destination) {
     throw new Error('Jimp needs an input path different that the output path.')
   }