Step 3: adding the post video to the page

colbyfayock · Jun 7, 2021 · 37bd168 · 37bd168
1 parent 737e40b
commit 37bd168
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/src/pages/posts/[postSlug].js b/src/pages/posts/[postSlug].js
@@ -6,7 +6,7 @@ import { getApolloClient } from 'lib/apollo-client';
 
 import styles from '../../styles/Home.module.css'
 
-export default function Post({ post, site }) {
+export default function Post({ post, site, video }) {
   return (
     <div className={styles.container}>
       <Head>
@@ -20,6 +20,15 @@ export default function Post({ post, site }) {
           { post.title }
         </h1>
 
+        {video && (
+          <figure>
+            <div dangerouslySetInnerHTML={{
+              __html: video.oEmbed.html
+            }} />
+            <figcaption>From { video.videoSource }</figcaption>
+          </figure>
+        )}
+
         <div className={styles.grid}>
           <div className={styles.content} dangerouslySetInnerHTML={{
             __html: post.content
@@ -54,6 +63,10 @@ export async function getStaticProps({ params = {} } = {}) {
           content
           title
           slug
+          video {
+            videoSource
+            videoUrl
+          }
         }
       }
     `,
@@ -63,6 +76,14 @@ export async function getStaticProps({ params = {} } = {}) {
   });
 
   const post = data?.data.postBy;
+  let oEmbed;
+
+  if ( post.video ) {
+    if ( post.video.videoSource === 'YouTube') {
+      oEmbed = await fetch(`https://www.youtube.com/oembed?url=${post.video.videoUrl}`)
+      oEmbed = await oEmbed.json();
+    }
+  }
 
   const site = {
     ...data?.data.generalSettings
@@ -71,7 +92,11 @@ export async function getStaticProps({ params = {} } = {}) {
   return {
     props: {
       post,
-      site
+      site,
+      video: {
+        ...post.video,
+        oEmbed
+      }
     }
   }
 }

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -13,3 +13,15 @@ a {
 * {
   box-sizing: border-box;
 }
+
+figure {
+  width: 100%;
+  text-align: center;
+}
+
+figure iframe {
+  aspect-ratio: 200 / 113;
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+}