Add channel credits

components/video/channel-credit.vue

@@ -0,0 +1,34 @@
+<template>
+    <div
+        v-if="video.channel.id !== myChannelId"
+        class="channel-credit"
+    >
+        <LinkButton
+            :href="`https://www.youtube.com/channel/${video.channel.id}`"
+
+            target="_blank"
+        >Subscribe to {{ video.channel.name }}</LinkButton>
+    </div>
+</template>
+
+<script>
+
+import LinkButton from '~/components/link-button.vue'
+
+export default {
+    components: {
+        LinkButton
+    },
+    props: {
+        video: {
+            type: Object,
+            required: true
+        }
+    },
+    data: function () {
+        return {
+            myChannelId: 'UCB3jOb5QVjX7lYecvyCoTqQ'
+        }
+    }
+}
+</script>

helpers/build-video-list.js

@@ -128,6 +128,10 @@ export default async function ( applist ) {
             lastUpdated,
             apps,
             slug,
+            channel:{
+                name: fetchedVideos[videoId].rawData.snippet.channelTitle,
+                id: fetchedVideos[videoId].rawData.snippet.channelId
+            },
             tags: generateVideoTags(fetchedVideos[videoId]),
             timestamps: fetchedVideos[videoId].timestamps,
             thumbnails: fetchedVideos[videoId].rawData.snippet.thumbnails,

pages/app/_slug/benchmarks.vue

@@ -7,6 +7,10 @@
                 <VideoPlayer
                     :video="video"
                 />
+                <ChannelCredit
+                    :video="video"
+                    class="flex w-full justify-start md:px-10"
+                />
             </template>
             <template v-else>
                 <div
@@ -92,13 +96,15 @@ import LinkButton from '~/components/link-button.vue'
 import EmailSubscribe from '~/components/email-subscribe.vue'
 import VideoRow from '~/components/video/row.vue'
 import VideoPlayer from '~/components/video/player.vue'
+import ChannelCredit from '~/components/video/channel-credit.vue'
 
 export default {
     components: {
         LinkButton,
         EmailSubscribe,
         VideoRow,
-        VideoPlayer
+        VideoPlayer,
+        ChannelCredit
     },
     async asyncData ({ params: { slug } }) {
 

pages/tv/_slug.vue

@@ -5,9 +5,20 @@
                 :video="video"
             />
 
-            <h1 class="title text-sm md:text-3xl font-semibold">
-                {{ video.name }}
-            </h1>
+            <div
+                class="md:flex w-full justify-between space-y-4 md:space-y-0 md:px-10"
+            >
+                <h1 class="title text-lg md:text-2xl font-semibold">
+                    {{ video.name }}
+                </h1>
+
+                <ChannelCredit
+                    :video="video"
+                />
+            </div>
+
+            <hr class="w-full" >
+
 
             <div class="related-apps w-full">
                 <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
@@ -61,13 +72,15 @@ import LinkButton from '~/components/link-button.vue'
 import EmailSubscribe from '~/components/email-subscribe.vue'
 import VideoRow from '~/components/video/row.vue'
 import VideoPlayer from '~/components/video/player.vue'
+import ChannelCredit from '~/components/video/channel-credit.vue'
 
 export default {
     components: {
         LinkButton,
         EmailSubscribe,
         VideoRow,
-        VideoPlayer
+        VideoPlayer,
+        ChannelCredit
     },
     async asyncData ({ params: { slug } }) {