feat: move screenshots to extra videoScreenshots resolver

Author: axe312ger

packages/gatsby-transformer-video/package.json

@@ -25,7 +25,6 @@
   "license": "MIT",
   "dependencies": {
     "execa": "^4.0.3",
-    "fast-glob": "^3.2.4",
     "fluent-ffmpeg": "^2.1.2",
     "fs-extra": "^9.0.1",
     "imagemin": "^7.0.1",

packages/gatsby-transformer-video/src/ffmpeg.js

@@ -1,15 +1,16 @@
-import { resolve, parse } from "path"
+import { parse, resolve } from "path"
 import { performance } from "perf_hooks"
+import { tmpdir } from "os"
 
 import { createContentDigest } from "gatsby-core-utils"
-import { pathExists, stat, copy, writeFile } from "fs-extra"
+import { pathExists, stat, copy, ensureDir, remove, access } from "fs-extra"
 import ffmpeg from "fluent-ffmpeg"
-import fg from "fast-glob"
 import imagemin from "imagemin"
 import imageminGiflossy from "imagemin-giflossy"
 import imageminMozjpeg from "imagemin-mozjpeg"
 import PQueue from "p-queue"
 import sharp from "sharp"
+import { createFileNodeFromBuffer } from "gatsby-source-filesystem"
 
 import { cacheContentfulVideo } from "./helpers"
 
@@ -128,16 +129,14 @@ export default class FFMPEG {
   }
 
   // Queue video for conversion
-  convertVideo = async (...args) => {
-    const videoData = await this.queue.add(() =>
-      this.queuedConvertVideo(...args)
-    )
+  queueConvertVideo = async (...args) => {
+    const videoData = await this.queue.add(() => this.convertVideo(...args))
 
     return videoData
   }
 
   // Converts a video based on a given profile, populates cache and public dir
-  queuedConvertVideo = async ({
+  convertVideo = async ({
     profile,
     sourcePath,
     cachePath,
@@ -174,94 +173,122 @@ export default class FFMPEG {
       await copy(cachePath, publicPath, { overwrite: true })
     }
 
-    // Take screenshots
-    const screenshots = await this.takeScreenshots({ fieldArgs, publicPath })
-
-    return { screenshots, publicPath }
+    return { publicPath }
   }
 
-  takeScreenshots = async ({ fieldArgs, publicPath }) => {
-    const { screenshots, screenshotWidth } = fieldArgs
+  takeScreenshots = async (
+    video,
+    fieldArgs,
+    { getCache, createNode, createNodeId }
+  ) => {
+    const { type } = video.internal
 
-    if (!screenshots) {
-      return null
+    let fileType = null
+    if (type === `File`) {
+      fileType = video.internal.mediaType
     }
 
-    const { dir: publicDir, name } = parse(publicPath)
+    if (type === `ContentfulAsset`) {
+      fileType = video.file.contentType
+    }
 
-    const screenshotPatternCache = resolve(
-      this.cacheDirConverted,
-      `${name}-screenshot-*.png`
-    )
-    const screenshotPatternPublic = resolve(
-      publicDir,
-      `${name}-screenshot-*.jpg`
-    )
+    if (fileType.indexOf(`video/`) === -1) {
+      return null
+    }
 
-    const screenshotsCache = await fg([screenshotPatternCache])
-    const screenshotsPublic = await fg([screenshotPatternPublic])
+    let path, fileName
 
-    if (!screenshotsCache.length) {
-      const timestamps = screenshots.split(`,`)
+    if (type === `File`) {
+      path = video.absolutePath
+      fileName = video.name
+    }
 
-      await new Promise((resolve, reject) => {
-        ffmpeg(publicPath)
-          .on(`filenames`, function (filenames) {
-            console.log(`[FFMPEG] Taking ${filenames.length} screenshots`)
-          })
-          .on(`error`, (err, stdout, stderr) => {
-            console.log(`[FFMPEG] Failed to take screenshots:`)
-            console.error(err)
-            reject(err)
-          })
-          .on(`end`, () => {
-            resolve()
-          })
-          .screenshots({
-            timestamps,
-            filename: `${name}-screenshot-%ss.png`,
-            folder: this.cacheDirConverted,
-            size: `${screenshotWidth}x?`,
-          })
+    if (type === `ContentfulAsset`) {
+      path = await cacheContentfulVideo({
+        video,
+        cacheDir: this.cacheDirOriginal,
       })
+      fileName = video.file.fileName
     }
 
-    if (!screenshotsPublic.length) {
-      const screenshotsLatest = await fg([screenshotPatternCache])
-      for (const rawScreenshotPath of screenshotsLatest) {
-        const { name: screenshotName } = parse(rawScreenshotPath)
-        const publicScreenshotPath = resolve(publicDir, `${screenshotName}.jpg`)
+    const { timestamps, width } = fieldArgs
+    const { name } = parse(fileName)
+
+    const tmpDir = resolve(tmpdir(), `gatsby-transformer-video`, name)
+
+    await ensureDir(tmpDir)
+
+    let screenshotRawNames
+
+    await new Promise((resolve, reject) => {
+      ffmpeg(path)
+        .on(`filenames`, function (filenames) {
+          screenshotRawNames = filenames
+          console.log(`[FFMPEG] Taking ${filenames.length} screenshots`)
+        })
+        .on(`error`, (err, stdout, stderr) => {
+          console.log(`[FFMPEG] Failed to take screenshots:`)
+          console.error(err)
+          reject(err)
+        })
+        .on(`end`, () => {
+          resolve()
+        })
+        .screenshots({
+          timestamps,
+          filename: `${name}-%ss.png`,
+          folder: tmpDir,
+          size: `${width}x?`,
+        })
+    })
+
+    const screenshotNodes = []
+
+    console.log({ screenshotRawNames, tmpDir })
+
+    for (const screenshotRawName of screenshotRawNames) {
+      try {
+        const rawScreenshotPath = resolve(tmpDir, screenshotRawName)
+        const { name } = parse(rawScreenshotPath)
 
         try {
-          const jpgBuffer = await sharp(rawScreenshotPath)
-            .jpeg({
-              quality: 60,
-              progressive: true,
-            })
-            .toBuffer()
-
-          const optimizedBuffer = await imagemin.buffer(jpgBuffer, {
-            plugins: [imageminMozjpeg()],
+          await access(rawScreenshotPath)
+        } catch {
+          console.warn(`Screenshot ${rawScreenshotPath} could not be found!`)
+          continue
+        }
+
+        const jpgBuffer = await sharp(rawScreenshotPath)
+          .jpeg({
+            quality: 80,
+            progressive: true,
           })
+          .toBuffer()
 
-          await writeFile(publicScreenshotPath, optimizedBuffer)
-        } catch (err) {
-          console.log(`Unable to convert png screenshots to jpegs`)
-          throw err
-        }
-      }
+        const optimizedBuffer = await imagemin.buffer(jpgBuffer, {
+          plugins: [imageminMozjpeg()],
+        })
 
-      console.log(`[FFMPEG] Finished copying screenshots`)
+        const node = await createFileNodeFromBuffer({
+          ext: `.jpg`,
+          name,
+          buffer: optimizedBuffer,
+          getCache,
+          createNode,
+          createNodeId,
+        })
+
+        screenshotNodes.push(node)
+      } catch (err) {
+        console.log(`Failed to take screenshots:`)
+        console.error(err)
+        throw err
+      }
     }
 
-    const latestFiles = await fg([screenshotPatternPublic])
+    await remove(tmpDir)
 
-    return latestFiles.map(absolutePath => {
-      return {
-        absolutePath,
-        path: absolutePath.replace(resolve(this.rootDir, `public`), ``),
-      }
-    })
+    return screenshotNodes
   }
 
   createFromProfile = async ({ publicDir, path, name, fieldArgs, info }) => {
@@ -288,7 +315,7 @@ export default class FFMPEG {
     const cachePath = resolve(this.cacheDirConverted, filename)
     const publicPath = resolve(publicDir, filename)
 
-    return this.convertVideo({
+    return this.queueConvertVideo({
       profile: profile.converter,
       sourcePath: path,
       cachePath,
@@ -303,7 +330,7 @@ export default class FFMPEG {
     const cachePath = resolve(this.cacheDirConverted, filename)
     const publicPath = resolve(publicDir, filename)
 
-    return this.convertVideo({
+    return this.queueConvertVideo({
       profile: profileH264,
       sourcePath: path,
       cachePath,
@@ -318,7 +345,7 @@ export default class FFMPEG {
     const cachePath = resolve(this.cacheDirConverted, filename)
     const publicPath = resolve(publicDir, filename)
 
-    return this.convertVideo({
+    return this.queueConvertVideo({
       profile: profileH265,
       sourcePath: path,
       cachePath,
@@ -333,7 +360,7 @@ export default class FFMPEG {
     const cachePath = resolve(this.cacheDirConverted, filename)
     const publicPath = resolve(publicDir, filename)
 
-    return this.convertVideo({
+    return this.queueConvertVideo({
       profile: profileVP9,
       sourcePath: path,
       cachePath,
@@ -348,7 +375,7 @@ export default class FFMPEG {
     const cachePath = resolve(this.cacheDirConverted, filename)
     const publicPath = resolve(publicDir, filename)
 
-    return this.convertVideo({
+    return this.queueConvertVideo({
       profile: profileWebP,
       sourcePath: path,
       cachePath,
@@ -363,7 +390,7 @@ export default class FFMPEG {
     const cachePath = resolve(this.cacheDirConverted, filename)
     const publicPath = resolve(publicDir, filename)
 
-    const absolutePath = await this.convertVideo({
+    const absolutePath = await this.queueConvertVideo({
       profile: profileGif,
       sourcePath: path,
       cachePath,

packages/gatsby-transformer-video/src/gatsby-node.js

@@ -39,8 +39,6 @@ const DEFAULT_ARGS = {
     type: GraphQLString,
     defaultValue: `assets/videos`,
   },
-  screenshots: { type: GraphQLString },
-  screenshotWidth: { type: GraphQLInt, defaultValue: 600 },
 }
 
 exports.createSchemaCustomization = ({ actions, schema }) => {
@@ -61,14 +59,6 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
         duration: GraphQLFloat,
         size: GraphQLInt,
         bitRate: GraphQLInt,
-        screenshots: `[GatsbyVideoScreenshot]`,
-      },
-    }),
-    schema.buildObjectType({
-      name: `GatsbyVideoScreenshot`,
-      fields: {
-        path: GraphQLString,
-        absolutePath: GraphQLString,
       },
     }),
   ]
@@ -77,7 +67,7 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
 }
 
 exports.createResolvers = async (
-  { createResolvers, store },
+  { createResolvers, store, getCache, createNodeId, actions: { createNode } },
   { ffmpegPath, ffprobePath, downloadBinaries = true, profiles = {} }
 ) => {
   const program = store.getState().program
@@ -162,7 +152,7 @@ exports.createResolvers = async (
   }
 
   // Analyze the resulting video and prepare field return values
-  async function processResult({ publicPath, screenshots }) {
+  async function processResult({ publicPath }) {
     const result = await ffmpeg.executeFfprobe(publicPath)
 
     const {
@@ -189,7 +179,6 @@ exports.createResolvers = async (
       duration: duration === `N/A` ? null : duration,
       size: size === `N/A` ? null : size,
       bitRate: bitRate === `N/A` ? null : bitRate,
-      screenshots,
     }
   }
 
@@ -290,6 +279,19 @@ exports.createResolvers = async (
         transformer: ffmpeg.createFromProfile,
       }),
     },
+    videoScreenshots: {
+      type: `[File]`,
+      args: {
+        timestamps: { type: [GraphQLString], defaultValue: [`0`] },
+        width: { type: GraphQLInt, defaultValue: 600 },
+      },
+      resolve: (video, fieldArgs) =>
+        ffmpeg.takeScreenshots(video, fieldArgs, {
+          getCache,
+          createNode,
+          createNodeId,
+        }),
+    },
   }
 
   const resolvers = {