feat(home): integrate youtube videos (#7)

pablosirera · Aug 26, 2020 · d61ccb3 · d61ccb3
1 parent c468ce1
commit d61ccb3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 22 deletions.
diff --git a/components/home/YoutubeVideos.vue b/components/home/YoutubeVideos.vue
@@ -4,13 +4,13 @@
       {{ $t('home.lastVideos') }}
     </h2>
     <a
-      v-for="(video, index) in videos"
+      v-for="(video, index) in allVideos"
       :key="index"
       class="flex justify-start mb-4 cursor-pointer p-2 rounded hover:bg-green-main-700-40"
-      @click="showVideo(video.id)"
+      @click="showVideo(video.shortId)"
     >
       <img
-        :src="`https://i3.ytimg.com/vi/${video.id}/mqdefault.jpg`"
+        :src="`https://i3.ytimg.com/vi/${video.shortId}/mqdefault.jpg`"
         :alt="video.title"
         loading="lazy"
         class="w-40 h-24 rounded"
@@ -43,27 +43,27 @@
 <script>
 export default {
   name: 'YoutubeVideos',
+  props: {
+    videos: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data: () => ({
     shouldShowVideo: false,
     videoId: null,
-    // TODO: maybe translate this
-    // TODO: integrate with youtube api
-    videos: [
-      {
-        title: 'Añadir modo oscuro a una aplicación VUE | 🔴 Live Coding #12',
-        id: 'FcxlrEwrJkw',
-      },
-      {
-        title:
-          'Mejorando nuestra aplicación con Vue y FIREBASE | 🔴 Live Coding #11',
-        id: 'McZZrYNBhTc',
-      },
-      {
-        title: 'Crear un blog con Nuxt y Nuxt Content + SEO tips | 🔴 Live',
-        id: '1W_3c7O9E8k',
-      },
-    ],
   }),
+  computed: {
+    allVideos() {
+      return this.videos.map((video) => {
+        return {
+          title: video.snippet.title,
+          id: video.id,
+          shortId: video.snippet.resourceId.videoId,
+        }
+      })
+    },
+  },
   methods: {
     showVideo(videoId) {
       this.videoId = videoId

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -129,6 +129,7 @@ export default {
     GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,
     APP_TITLE: process.env.APP_TITLE,
     APP_DESC: process.env.APP_DESC,
+    YOUTUBE_API_KEY: process.env.YOUTUBE_API_KEY,
   },
   /*
    ** color mode config

diff --git a/pages/index.vue b/pages/index.vue
@@ -44,8 +44,8 @@
         />
       </div>
     </section>
-    <section class="mt-12 md:grid md:grid-cols-2 md:gap-8">
-      <YoutubeVideos />
+    <section class="mt-12 md:grid md:grid-cols-2 md:gap-4">
+      <YoutubeVideos :videos="videos" />
       <ListPosts :posts="posts" />
     </section>
   </section>
@@ -61,8 +61,15 @@ export default {
       .limit(3)
       .fetch()
 
+    const videosResponse = await fetch(
+      `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUl41m8HBifhzM6Dh1V04wqA&maxResults=3&key=${process.env.YOUTUBE_API_KEY}`
+    )
+    const jsonVideos = await videosResponse.json()
+    const videos = jsonVideos.items
+
     return {
       posts,
+      videos,
     }
   },
 }