@xyo-network/image-thumbnail-plugin 2.72.7 → 2.72.9

package/src/Witness/Witness.ts

@@ -5,7 +5,7 @@ import { URL } from '@xylabs/url'
 import { axios, AxiosError, AxiosResponse } from '@xyo-network/axios'
 import { PayloadHasher } from '@xyo-network/core'
 import { ImageThumbnail, ImageThumbnailSchema } from '@xyo-network/image-thumbnail-payload-plugin'
-import { UrlPayload } from '@xyo-network/url-payload-plugin'
+import { UrlPayload, UrlSchema } from '@xyo-network/url-payload-plugin'
 import { AbstractWitness } from '@xyo-network/witness'
 import { Semaphore } from 'async-mutex'
 import FileType from 'file-type'
@@ -17,7 +17,7 @@ import { LRUCache } from 'lru-cache'
 import shajs from 'sha.js'
 import Url from 'url-parse'
 
-import { ImageThumbnailWitnessConfigSchema } from './Config'
+import { ImageThumbnailEncoding, ImageThumbnailWitnessConfigSchema } from './Config'
 import { getVideoFrameAsImageFluent } from './ffmpeg'
 import { ImageThumbnailWitnessParams } from './Params'
 
@@ -103,9 +103,7 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
     if (url.startsWith('data:image')) {
       const data = url.split(',')[1]
       if (data) {
-        const buffer = Buffer.from(Uint8Array.from(atob(data), (c) => c.charCodeAt(0)))
-        console.log(`data buffer: ${buffer.length}`)
-        return buffer
+        return Buffer.from(Uint8Array.from(atob(data), (c) => c.charCodeAt(0)))
       } else {
         const error: ImageThumbnailWitnessError = {
           message: 'Invalid data Url',
@@ -144,10 +142,11 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
     if (!hasbin('magick')) {
       throw Error('ImageMagick is required for this witness')
     }
+    const urlPayloads = payloads.filter((payload) => payload.schema === UrlSchema)
     return await this._semaphore.runExclusive(async () =>
       compact(
         await Promise.all(
-          payloads.map<Promise<ImageThumbnail>>(async ({ url }) => {
+          urlPayloads.map<Promise<ImageThumbnail>>(async ({ url }) => {
             const cachedResult = this.cache.get(url)
             if (cachedResult) {
               return cachedResult
@@ -167,7 +166,7 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
             } else {
               //if it is ipfs, go through cloud flair
               const mutatedUrl = this.checkIpfsUrl(url)
-              result = await this.fromHttp(mutatedUrl)
+              result = await this.fromHttp(mutatedUrl, url)
             }
             this.cache.set(url, result)
             return result
@@ -177,13 +176,13 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
     )
   }
 
-  private async createThumbnailDataUrl(sourceBuffer: Buffer) {
+  private async createThumbnailDataUrl(sourceBuffer: Buffer, encoding?: ImageThumbnailEncoding) {
     const thumb = await new Promise<Buffer>((resolve, reject) => {
       gm(sourceBuffer)
         .quality(this.quality)
         .resize(this.width, this.height)
         .flatten()
-        .toBuffer(this.encoding, (error, buffer) => {
+        .toBuffer(encoding ?? this.encoding, (error, buffer) => {
           if (error) {
             reject(error)
           } else {
@@ -204,7 +203,7 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
     return this.createThumbnailDataUrl(imageBuffer)
   }
 
-  private async fromHttp(url: string): Promise<ImageThumbnail> {
+  private async fromHttp(url: string, sourceUrl?: string): Promise<ImageThumbnail> {
     let response: AxiosResponse
     let dnsResult: string[]
     try {
@@ -218,7 +217,7 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
           dnsError: error.code,
         },
         schema: ImageThumbnailSchema,
-        sourceUrl: url,
+        sourceUrl: sourceUrl ?? url,
       }
       return result
     }
@@ -236,7 +235,7 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
             status: axiosError?.response?.status,
           },
           schema: ImageThumbnailSchema,
-          sourceUrl: url,
+          sourceUrl: sourceUrl ?? url,
         }
         return result
       } else {
@@ -249,15 +248,16 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
         status: response.status,
       },
       schema: ImageThumbnailSchema,
-      sourceUrl: url,
+      sourceUrl: sourceUrl ?? url,
     }
 
     if (response.status >= 200 && response.status < 300) {
-      const contentType = response.headers['content-type']?.toString()
-      const mediaType = contentType.split('/')[0]
+      const contentType: string = response.headers['content-type']?.toString()
+      const [mediaType, fileType] = contentType.split('/')
       result.mime = result.mime ?? {}
       result.mime.returned = mediaType
       const sourceBuffer = Buffer.from(response.data, 'binary')
+
       try {
         result.mime.detected = await FileType.fromBuffer(sourceBuffer)
       } catch (ex) {
@@ -265,9 +265,9 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
         this.logger?.error(`FileType error: ${error.message}`)
       }
 
-      const processImage = async () => {
+      const processImage = async (encoding?: ImageThumbnailEncoding) => {
         result.sourceHash = await ImageThumbnailWitness.binaryToSha256(sourceBuffer)
-        result.url = await this.createThumbnailDataUrl(sourceBuffer)
+        result.url = await this.createThumbnailDataUrl(sourceBuffer, encoding)
       }
 
       const processVideo = async () => {
@@ -281,9 +281,21 @@ export class ImageThumbnailWitness<TParams extends ImageThumbnailWitnessParams =
         }
       }
 
+      let encoding: ImageThumbnailEncoding = 'PNG'
+
+      switch (fileType.toUpperCase()) {
+        case 'GIF':
+          encoding = 'GIF'
+          break
+        case 'JPG':
+        case 'JPEG':
+          encoding = 'JPG'
+          break
+      }
+
       switch (mediaType) {
         case 'image': {
-          await processImage()
+          await processImage(encoding)
           result.mime.type = mediaType
           break
         }

package/src/Witness/ffmpeg/fluent/getVideoFrameAsImageFluent.ts

@@ -1,5 +1,31 @@
+import { uuid } from '@xyo-network/core'
 import ffmpeg from 'fluent-ffmpeg'
-import { Readable, Writable } from 'stream'
+import { unlink, writeFile } from 'fs/promises'
+import { tmpdir } from 'os'
+import { Writable, WritableOptions } from 'stream'
+
+/**
+ * A Writable stream that collects output from ffmpeg.
+ */
+class FfmpegOutputStream extends Writable {
+  private readonly chunks: Uint8Array[] = []
+
+  constructor(options?: WritableOptions) {
+    super(options)
+  }
+
+  override _write(chunk: never, _encoding: BufferEncoding, callback: (error?: Error | null) => void): void {
+    this.chunks.push(chunk)
+    callback()
+  }
+
+  /**
+   * Collects the output from ffmpeg into a buffer.
+   * @returns A buffer containing the concatenated
+   * output from ffmpeg.
+   */
+  toBuffer = () => Buffer.concat(this.chunks)
+}
 
 /**
  * Execute FFmpeg using fluent API with provided input buffer and video thumbnail image.
@@ -7,47 +33,39 @@ import { Readable, Writable } from 'stream'
  * @returns Output buffer containing the video thumbnail image.
  */
 export const getVideoFrameAsImageFluent = async (videoBuffer: Buffer) => {
-  const imageBuffer = await new Promise<Buffer>((resolve, reject) => {
-    // const videoStream = new PassThrough()
-    // videoStream.end(videoBuffer)
-
-    const videoStream = new Readable()
-    videoStream._read = () => {} // _read is required but you can noop it
-    videoStream.push(videoBuffer)
-    videoStream.push(null)
-
-    // Initialize empty array to collect PNG chunks
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const pngChunks: any[] = []
-
-    // Create a Writable stream to collect PNG output from ffmpeg
-    const writableStream = new Writable({
-      write(chunk, encoding, callback) {
-        pngChunks.push(chunk)
-        callback()
-      },
+  // Get a temp file name
+  const tmpFile = `/${tmpdir()}/${uuid()}`
+  try {
+    // Write videoBuffer to temp file for use as input to ffmpeg to
+    // avoid issues with ffmpeg inferring premature EOF from buffer
+    // passed via stdin (happens when ffmpeg is trying to infer
+    // input video format)
+    await writeFile(tmpFile, videoBuffer, { encoding: 'binary' })
+    const imageBuffer = await new Promise<Buffer>((resolve, reject) => {
+      // Create a Writable stream to collect PNG output from ffmpeg
+      const ffmpegOutput = new FfmpegOutputStream()
+      // Execute ffmpeg using fluent API
+      ffmpeg()
+        // NOTE: Uncomment to debug CLI args to ffmpeg
+        // .on('start', (commandLine) => console.log('Spawned Ffmpeg with command: ' + commandLine))
+        .on('error', (err) => reject(err.message))
+        // Listen for the 'end' event to combine the output into a buffer holding the PNG image
+        .on('end', () => resolve(ffmpegOutput.toBuffer()))
+        .input(tmpFile) // Use temp file as input
+        .takeFrames(1) // Only take 1st video frame
+        .withNoAudio() // Don't include audio
+        .outputOptions('-f image2pipe') // Write output to stdout
+        .videoCodec('png') // Force PNG output
+        // Start processing and direct ffmpeg stdout to writable stream
+        .pipe(ffmpegOutput)
     })
-
-    const command = ffmpeg()
-      // Uncomment to debug CLI args to ffmpeg
-      // .on('start', (commandLine) => console.log('Spawned Ffmpeg with command: ' + commandLine))
-      .input(videoStream)
-      .takeFrames(1)
-      .withNoAudio()
-      // Exactly as their docs but does not work
-      // .setStartTime('00:00:00')
-      // .seekInput(0)
-      .on('error', (err) => reject(err.message))
-      // Listen for the 'end' event to combine the chunks and create a PNG buffer
-      .on('end', () => resolve(Buffer.concat(pngChunks)))
-      .on('data', (chunk) => pngChunks.push(chunk))
-      // .toFormat('png')
-      .outputOptions('-f image2pipe')
-    // .outputOptions('-vcodec png')
-    // .output(writableStream, { end: true })
-
-    // Start processing
-    command.pipe(writableStream)
-  })
-  return imageBuffer
+    return imageBuffer
+  } finally {
+    // Cleanup temp file
+    try {
+      await unlink(tmpFile)
+    } catch {
+      // No error here since file doesn't exist
+    }
+  }
 }

package/src/Witness/ffmpeg/spawn/executeFfmpeg.ts

@@ -1,5 +1,4 @@
 import { spawn } from 'child_process'
-import { PassThrough } from 'stream'
 
 /**
  * Execute FFmpeg with the provided arguments.
@@ -9,23 +8,20 @@ import { PassThrough } from 'stream'
  */
 export const executeFFmpeg = (videoBuffer: Buffer, ffmpegArgs: string[]): Promise<Buffer> => {
   return new Promise((resolve, reject) => {
+    const imageData: Buffer[] = []
     const ffmpeg = spawn('ffmpeg', ffmpegArgs)
-
-    // Create a readable stream from the input buffer
-    const videoStream = new PassThrough().end(videoBuffer)
-
-    // Pipe the input stream to ffmpeg's stdin
-    videoStream.pipe(ffmpeg.stdin)
-    const chunks: Buffer[] = []
-    ffmpeg.stdout.on('data', (chunk: Buffer) => chunks.push(chunk))
+    ffmpeg.stdout.on('data', (data: Buffer) => imageData.push(data))
     // TODO: This is required as we're seeing errors thrown due to
     // how we're piping the data to ffmpeg. Works perfectly though.
     ffmpeg.stdin.on('error', () => {})
     ffmpeg.on('close', (code) => {
       if (code !== 0) {
-        return reject(new Error(`FFmpeg exited with code ${code}`))
+        reject(new Error(`FFmpeg exited with code ${code}`))
+      } else {
+        resolve(Buffer.concat(imageData))
       }
-      resolve(Buffer.concat(chunks))
     })
+    // Pipe the input stream to ffmpeg's stdin
+    ffmpeg.stdin.end(videoBuffer)
   })
 }