add gatsby-transformer-video (beta available)

examples/using-gatsby-transformer-video/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}

examples/using-gatsby-transformer-video/.gitignore

@@ -0,0 +1,3 @@
+public
+.cache
+node_modules

examples/using-gatsby-transformer-video/README.md

@@ -0,0 +1,5 @@
+# using-gatsby-transformer-video
+
+https://using-gatsby-transformer-video.gatsbyjs.org
+
+Stub README description

examples/using-gatsby-transformer-video/gatsby-config.js

@@ -0,0 +1,43 @@
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `videos`,
+        path: `${__dirname}/videos/`,
+      },
+    },
+    {
+      resolve: `gatsby-transformer-video`,
+      options: {
+        profiles: {
+          sepia: {
+            extension: `mp4`,
+            converter: function({ ffmpegSession, videoStreamMetadata }) {
+              const { currentFps } = videoStreamMetadata
+
+              const outputOptions = [
+                `-crf 31`,
+                `-preset slow`,
+                `-movflags +faststart`,
+                `-profile:v high`,
+                `-bf 2	`,
+                `-g ${Math.floor(currentFps / 2)}`,
+                `-coder 1`,
+                `-pix_fmt yuv420p`,
+              ].filter(Boolean)
+
+              return ffmpegSession
+                .videoCodec(`libx264`)
+                .videoFilters(
+                  `colorchannelmixer=.393:.769:.189:0:.349:.686:.168:0:.272:.534:.131`
+                )
+                .outputOptions(outputOptions)
+                .noAudio()
+            },
+          },
+        },
+      },
+    },
+  ],
+}

examples/using-gatsby-transformer-video/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "using-gatsby-transformer-video",
+  "private": true,
+  "description": "Gatsby example site using using-gatsby-transformer-video",
+  "author": "Benedikt Rötsch <opensource@axe312.de>",
+  "dependencies": {
+    "gatsby": "latest",
+    "gatsby-link": "latest",
+    "gatsby-source-filesystem": "latest",
+    "gatsby-transformer-video": "latest"
+  },
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  }
+}

examples/using-gatsby-transformer-video/src/pages/index.js

@@ -0,0 +1,124 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+import "./styles.css"
+
+function Video({
+  video: {
+    name,
+    videoH264,
+    videoH265,
+    previewH264,
+    previewWebP,
+    previewGif,
+    videoSepia,
+    videoScreenshots,
+  },
+  ...props
+}) {
+  return (
+    <div {...props}>
+      <h2>Example: {name.substring(0, 1).toUpperCase() + name.substring(1)}</h2>
+      <h3>Screenshots at 1s, 50% and 99%:</h3>
+      <div className="screenshots">
+        {videoScreenshots.map(({ publicURL }) => (
+          <div key="path">
+            <img src={publicURL} />
+          </div>
+        ))}
+      </div>
+      <h3>
+        Animated preview via{` `}
+        <a href="https://css-tricks.com/fallbacks-videos-images/">
+          picture element
+        </a>
+        :
+      </h3>
+      <picture>
+        <source type="video/mp4" srcSet={previewH264.path} />
+        <source type="image/webp" srcSet={previewWebP.path} />
+        <img loading="lazy" src={previewGif.path} alt="" />
+      </picture>
+      <h3>Video as optimized h264 &amp; h265:</h3>
+      <video
+        playsInline
+        preload="auto"
+        poster={videoScreenshots[0].publicURL}
+        controls
+      >
+        <source src={videoH265.path} type="video/mp4; codecs=hevc" />
+        <source src={videoH264.path} type="video/mp4; codecs=avc1" />
+      </video>
+      <h3>Custom video converter:</h3>
+      <video
+        playsInline
+        preload="auto"
+        poster={videoScreenshots[0].publicURL}
+        controls
+      >
+        <source src={videoSepia.path} type="video/mp4; codecs=avc1" />
+      </video>
+    </div>
+  )
+}
+
+const Index = ({ data }) => {
+  const videos = data.allFile.edges.map(({ node }) => node)
+
+  return (
+    <div>
+      <h1>Using gatsby-transformer-video</h1>
+      <div className="grid">
+        {videos.map(video => (
+          <Video key={video.id} video={video} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Index
+
+export const query = graphql`
+  query HomePageQuery {
+    allFile {
+      edges {
+        node {
+          id
+          name
+          videoH264(
+            overlay: "gatsby.png"
+            overlayX: "end"
+            overlayY: "start"
+            overlayPadding: 25
+          ) {
+            path
+          }
+          videoH265(
+            overlay: "gatsby.png"
+            overlayX: "end"
+            overlayY: "start"
+            overlayPadding: 25
+          ) {
+            path
+          }
+          videoSepia: videoProfile(profile: "sepia", maxWidth: 800) {
+            path
+          }
+          previewH264: videoH264(maxWidth: 600, fps: 4, duration: 2) {
+            path
+          }
+          previewWebP: videoWebP(maxWidth: 600, fps: 4, duration: 2) {
+            path
+          }
+          previewGif: videoGif(maxWidth: 300, fps: 4, duration: 2) {
+            path
+          }
+          videoScreenshots(timestamps: ["1", "50%", "99%"]) {
+            publicURL
+          }
+        }
+      }
+    }
+  }
+`

examples/using-gatsby-transformer-video/src/pages/styles.css

@@ -0,0 +1,29 @@
+body {
+  font-family: sans-serif;
+}
+
+picture,
+img,
+video {
+  width: 100%;
+  height: auto;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid > * {
+  flex: 0 1 420px;
+  padding: 10px;
+  overflow: hidden;
+}
+
+.screenshots {
+  display: flex;
+  justify-content: space-between;
+}
+.screenshots > * {
+  flex: 0 1 30%;
+}

packages/gatsby-transformer-video/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["babel-preset-gatsby-package"]]
+}

packages/gatsby-transformer-video/.gitignore

@@ -0,0 +1,4 @@
+/*.js
+/profiles/*.js
+!index.js
+yarn.lock

packages/gatsby-transformer-video/.npmignore

@@ -0,0 +1,38 @@
+src
+.babelrc.js
+*.tgz
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/gatsby-transformer-video/CHANGELOG.md

@@ -0,0 +1,39 @@
+#### 0.2.0 (2020-11-02)
+
+##### Build System / Dependencies
+
+- upgrade dependencies ([2457d172](https://github.com/gatsbyjs/gatsby/commit/2457d1722cf26404ac3db33068d202ff1f58df0d))
+
+##### Chores
+
+- remove debug console.log ([7ee4556d](https://github.com/gatsbyjs/gatsby/commit/7ee4556dda9c588896b2b6eb82c156948df95124))
+
+##### Documentation Changes
+
+- mark as beta and link usage example ([8438fccd](https://github.com/gatsbyjs/gatsby/commit/8438fccd67d95cc22550300a91614c380e4c715f))
+
+##### New Features
+
+- add additional information when video could not be analyzed cus of a broken or unsupported file ([a70ea950](https://github.com/gatsbyjs/gatsby/commit/a70ea950f93e5c26a656c6e95f1ef4a381b2d6d0))
+- add width, height and aspect ratio to video nodes ([e1370884](https://github.com/gatsbyjs/gatsby/commit/e1370884e875335751eedb697e3eeb5f949ea301))
+- align file naming for files and contentful assets ([240eefe9](https://github.com/gatsbyjs/gatsby/commit/240eefe9213ce818e55c26ef88f1324239527482))
+- clean up logging and reporting ([91d50ec7](https://github.com/gatsbyjs/gatsby/commit/91d50ec7df9698b80e789e6be167e635a8265167))
+- slightly increase default quality for h264 and h265 ([4b05c482](https://github.com/gatsbyjs/gatsby/commit/4b05c4821506defebc9ebd826f5c59324bbdeb63))
+- move default directory into static folder ([767e75f9](https://github.com/gatsbyjs/gatsby/commit/767e75f9fd27bbfb348a543117f374a862d676c6))
+- use new reporter API ([dd80e1aa](https://github.com/gatsbyjs/gatsby/commit/dd80e1aa50419edf9ff48f8b54e06fbdc3edf38f))
+- move screenshots to extra videoScreenshots resolver ([242e99ea](https://github.com/gatsbyjs/gatsby/commit/242e99ea6956b44e782ac24ed9873b3a4542b582))
+- switch to medium preset for h264 and h265 for higher quality, smaller size and almost same conversion time ([370c0d07](https://github.com/gatsbyjs/gatsby/commit/370c0d07e2ec546260a6058dfba7a2de4d7bbbe9))
+
+##### Bug Fixes
+
+- redownload files if actual file on Contentful changed ([53909a2e](https://github.com/gatsbyjs/gatsby/commit/53909a2e57fe6055583a15e7e5e8e1aaca8788f6))
+- ensure screenshots are queued ([c61df862](https://github.com/gatsbyjs/gatsby/commit/c61df8623f16e94e7f28c9f5fc0a43b80f0da16c))
+
+##### Refactors
+
+- adjust example to match new screenshots resolver ([73f67b33](https://github.com/gatsbyjs/gatsby/commit/73f67b33b5fbb984fd605f41649a3b4a3da6640b))
+- update babelrc to use babel-preset-gatsby-package ([c7371733](https://github.com/gatsbyjs/gatsby/commit/c73717330f8f214166ddfcec4b319805683b866f))
+
+##### Code Style Changes
+
+- reapply eslint ([1c21a16f](https://github.com/gatsbyjs/gatsby/commit/1c21a16f5de8e092a795a2bdb1f4bba0e0b00cca))