Ability to embed youtube videos to tools

global.d.ts

@@ -18,6 +18,7 @@ interface Tool {
   og_description: string | null;
   og_image_url: string | null;
   twitter_handle: string | null;
+  youtube_id: string | null;
   users_count: number;
   created_at: string | null;
   updated_at: string | null;

migrations/20190915154651_add_youtube_to_tools.js

@@ -0,0 +1,11 @@
+exports.up = function(knex) {
+  return knex.schema.table("tools", function(table) {
+    table.string("youtube_id");
+  });
+};
+
+exports.down = function(knex) {
+  return knex.schema.table("tools", function(table) {
+    table.dropColumn("youtube_id");
+  });
+};

pages/api/graphql.ts

@@ -64,6 +64,7 @@ const typeDefs = gql`
     ogDescription: String
     ogImageUrl: String
     twitterHandle: String
+    youtubeId: String
     usersCount: Int!
     userTools(first: Int = 50, skip: Int = 0): [UserTool!]!
   }
@@ -268,6 +269,7 @@ const resolvers = {
     ogDescription: (tool: Tool, _args, _context) => tool.og_description,
     ogImageUrl: (tool: Tool, _args, _context) => tool.og_image_url,
     twitterHandle: (tool: Tool, _args, _context) => tool.twitter_handle,
+    youtubeId: (tool: Tool, _args, _context) => tool.youtube_id,
     usersCount: (tool: Tool, _args, _context) => tool.users_count,
     userTools: async (tool, args: PaginationArgs, _context) => {
       const first = between(1, 100, args.first);

pages/tools/[id]/index.tsx

@@ -3,6 +3,7 @@ import Head from "next/head";
 import { css } from "@emotion/core";
 import Link from "next/link";
 import { Layout } from "@components/Layout";
+import YouTube from "@components/YouTube";
 
 const ToolShowQuery = gql`
   query ToolShowData($id: ID!) {
@@ -14,6 +15,7 @@ const ToolShowQuery = gql`
       ogTitle
       ogDescription
       twitterHandle
+      youtubeId
       userTools(first: 50) {
         id
         user {
@@ -124,6 +126,16 @@ const Tool = ({ tool }) => {
           {tool.ogDescription && <p>{tool.ogDescription}</p>}
         </div>
 
+        {tool.youtubeId && (
+          <div
+            css={css`
+              margin: 2rem 0px;
+            `}
+          >
+            <YouTube id={tool.youtubeId} />
+          </div>
+        )}
+
         <div>
           <h2
             css={css`

src/components/YouTube.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { css } from "@emotion/core";
+
+interface Props {
+  id: string;
+}
+
+const YouTube = ({ id }: Props) => (
+  <div
+    css={css`
+      position: relative;
+      padding-bottom: 56.25%;
+      height: 0;
+      overflow: hidden;
+      max-width: 100%;
+    `}
+  >
+    <iframe
+      css={css`
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      `}
+      src={`https://www.youtube.com/embed/${id}`}
+      allow="autoplay; encrypted-media"
+      title="Embedded YouTube video"
+    />
+  </div>
+);
+
+export default YouTube;