feat: add support for non gatsby image cdn thumbnails (#11)

demo/gatsby-config.js → demo-cdn/gatsby-config.js

@@ -9,6 +9,7 @@ module.exports = {
           "UsSJ_QNp6uo",
           "TX5XPuHhz9o",
         ],
+        thumbnailMode: "cdn",
       },
     },
     "gatsby-plugin-sharp",

demo/package.json → demo-cdn/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "demo",
+  "name": "demo-cdn",
   "version": "1.0.0",
   "private": true,
   "description": "@raae/gatsby-source-youtube-oembed demo",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@raae/gatsby-source-youtube-oembed": "*",
-    "gatsby": "4.12.0-next.0",
+    "gatsby": "4",
     "gatsby-plugin-gatsby-cloud": "4.11.0",
     "gatsby-plugin-image": "2.10.1",
     "gatsby-plugin-sharp": "4.10.2",

demo-download/gatsby-config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  plugins: [
+    {
+      resolve: "@raae/gatsby-source-youtube-oembed",
+      options: {
+        youTubeIds: [
+          "Bk1jonYPFD4",
+          "TzJfepDjpzM",
+          "UsSJ_QNp6uo",
+          "TX5XPuHhz9o",
+        ],
+        thumbnailMode: "download",
+      },
+    },
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
+    "gatsby-plugin-gatsby-cloud",
+  ],
+};

demo-download/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "demo-download",
+  "version": "1.0.0",
+  "private": true,
+  "description": "@raae/gatsby-source-youtube-oembed demo",
+  "author": "@raae",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "@raae/gatsby-source-youtube-oembed": "*",
+    "gatsby": "4",
+    "gatsby-plugin-gatsby-cloud": "4.11.0",
+    "gatsby-plugin-image": "2.10.1",
+    "gatsby-plugin-sharp": "4.10.2",
+    "gatsby-transformer-sharp": "4.10.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}

demo-download/src/pages/404.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "gatsby";
+
+const NotFoundPage = () => {
+  return (
+    <main>
+      <header>
+        <h1>Page not found</h1>
+      </header>
+      <p>
+        Sorry{" "}
+        <span role="img" aria-label="Pensive emoji">
+          😔
+        </span>{" "}
+        we couldn’t find what you were looking for.
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  );
+};
+
+export default NotFoundPage;

demo-download/src/pages/index.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { graphql } from "gatsby";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+
+const IndexPage = ({ data }) => {
+  const { allYouTube } = data;
+  return (
+    <main>
+      <header>
+        <h1>
+          <span role="img" aria-label="Party popper emoji">
+            🎉&nbsp;
+          </span>
+          gatsby-source-youtube-oembed
+          <span role="img" aria-label="Party popper emoji">
+            &nbsp;🎉
+          </span>
+        </h1>
+        <div>
+          {allYouTube.nodes.map((video) => {
+            const { youTubeId, oEmbed, thumbnail } = video;
+            console.log(video);
+            const gatsbyImage = getImage(thumbnail);
+            return (
+              <p key={youTubeId}>
+                <a href={oEmbed.url}>
+                  <GatsbyImage
+                    aspectRatio={16 / 9}
+                    image={gatsbyImage}
+                    alt={oEmbed.title}
+                  />
+                </a>
+              </p>
+            );
+          })}
+        </div>
+      </header>
+    </main>
+  );
+};
+
+export const query = graphql`
+  {
+    allYouTube {
+      nodes {
+        youTubeId
+        oEmbed {
+          title
+          url
+        }
+        thumbnail {
+          childImageSharp {
+            gatsbyImageData(
+              width: 480
+              transformOptions: { fit: COVER, cropFocus: CENTER }
+              aspectRatio: 1.77777778
+            )
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default IndexPage;

package.json

@@ -1,13 +1,16 @@
 {
   "private": true,
   "workspaces": [
-    "demo",
+    "demo-*",
     "plugin"
   ],
   "scripts": {
-    "develop": "yarn workspace demo develop",
-    "clean": "yarn workspace demo clean",
-    "build": "yarn workspace demo build",
+    "demo-cdn:develop": "yarn workspace demo-cdn develop --p 8000",
+    "demo-cdn:clean": "yarn workspace demo-cdn clean",
+    "demo-download:develop": "yarn workspace demo-download develop  --p 8001",
+    "demo-download:clean": "yarn workspace demo-download clean",
+    "develop": "yarn demo-cdn:develop & yarn demo-download:develop",
+    "clean": "yarn demo-cdn:clean & yarn demo-download:clean",
     "semantic-release": "semantic-release",
     "prepare": "husky install"
   },

plugin/gatsby-node.js

@@ -3,6 +3,7 @@ const {
   polyfillImageServiceDevRoutes,
   addRemoteFilePolyfillInterface,
 } = require("gatsby-plugin-utils/polyfill-remote-file");
+const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
 
 const IS_PROD = process.env.NODE_ENV === "production";
 const REFRESH_INTERVAL = IS_PROD ? 0 : 60000 * 5; // 60000 ms === 1 min
@@ -13,37 +14,50 @@ exports.pluginOptionsSchema = ({ Joi }) => {
   return Joi.object({
     youTubeIds: Joi.array().items(Joi.string()).required(),
     refreshInterval: Joi.number().min(0).default(REFRESH_INTERVAL),
+    thumbnailMode: Joi.string().valid("none", "cdn", "download").default("cdn"),
   });
 };
 
-exports.onCreateDevServer = ({ app }) => {
-  polyfillImageServiceDevRoutes(app);
+exports.onCreateDevServer = ({ app }, pluginOptions) => {
+  if (pluginOptions.thumbnailMode === "cdn") {
+    polyfillImageServiceDevRoutes(app);
+  }
 };
 
-exports.createSchemaCustomization = (gatsbyUtils) => {
+exports.createSchemaCustomization = (gatsbyUtils, pluginOptions) => {
   const { actions, schema } = gatsbyUtils;
 
-  const YouTubeType = `
-    type YouTube implements Node {
-      thumbnail: YouTubeThumbnail @link(from: "youTubeId" by: "youTubeId")
-    }
-  `;
-
-  const YouTubeThumbnailType = addRemoteFilePolyfillInterface(
-    schema.buildObjectType({
-      name: `YouTubeThumbnail`,
-      fields: {
-        youTubeId: "String!",
-      },
-      interfaces: [`Node`, `RemoteFile`],
-    }),
-    {
-      schema,
-      actions,
-    }
-  );
-
-  actions.createTypes([YouTubeType, YouTubeThumbnailType]);
+  if (pluginOptions.thumbnailMode === "cdn") {
+    const YouTubeType = `
+      type YouTube implements Node {
+        thumbnail: YouTubeThumbnail @link(from: "youTubeId" by: "youTubeId")
+      }
+    `;
+
+    const YouTubeCdnThumbnailType = addRemoteFilePolyfillInterface(
+      schema.buildObjectType({
+        name: `YouTubeThumbnail`,
+        fields: {
+          youTubeId: "String!",
+        },
+        interfaces: [`Node`, `RemoteFile`],
+      }),
+      {
+        schema,
+        actions,
+      }
+    );
+
+    actions.createTypes([YouTubeType, YouTubeCdnThumbnailType]);
+  } else if (pluginOptions.thumbnailMode === "download") {
+    const YouTubeType = `
+      type YouTube implements Node {
+        thumbnail: File @link(from: "fields.thumbnailFileId" to: "id")
+      }
+    `;
+
+    actions.createTypes([YouTubeType]);
+  }
 };
 
 exports.sourceNodes = async (gatsbyUtils, pluginOptions) => {
@@ -53,11 +67,15 @@ exports.sourceNodes = async (gatsbyUtils, pluginOptions) => {
   );
 };
 
-exports.onCreateNode = (gatsbyUtils) => {
+exports.onCreateNode = async (gatsbyUtils, pluginOptions) => {
   const { node } = gatsbyUtils;
 
   if (node.internal.type === YOUTUBE_TYPE) {
-    createYouTubeThumbnailNode(gatsbyUtils);
+    if (pluginOptions.thumbnailMode === "cdn") {
+      createYouTubeThumbnailNode(gatsbyUtils);
+    } else if (pluginOptions.thumbnailMode === "download") {
+      await createYouTubeThumbnailFileNode(gatsbyUtils);
+    }
   }
 };
 
@@ -133,3 +151,25 @@ const createYouTubeThumbnailNode = (gatsbyUtils) => {
 
   reporter.info(`Create YouTubeThumbnail Node for ${node.youTubeId}`);
 };
+
+const createYouTubeThumbnailFileNode = async (gatsbyUtils) => {
+  const { node, reporter, createNodeId, getCache } = gatsbyUtils;
+  const { createNode, createNodeField } = gatsbyUtils.actions;
+
+  const imageFile = await createRemoteFileNode({
+    // The url of the remote file
+    url: node.oEmbed.thumbnail_url,
+    parentNodeId: node.id,
+    getCache,
+    createNode,
+    createNodeId,
+  });
+
+  createNodeField({
+    node,
+    name: `thumbnailFileId`,
+    value: imageFile.id,
+  });
+
+  reporter.info(`Created YouTube File Node for ${node.youTubeId} thumbnail`);
+};