From d6aaafea03327d98649cec2ffa207287325d86eb Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 26 Dec 2020 19:55:49 -0600
Subject: [PATCH] Add channel credits

---
 components/video/channel-credit.vue | 34 +++++++++++++++++++++++++++++
 helpers/build-video-list.js         |  4 ++++
 pages/app/_slug/benchmarks.vue      |  8 ++++++-
 pages/tv/_slug.vue                  | 21 ++++++++++++++----
 4 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 components/video/channel-credit.vue

diff --git a/components/video/channel-credit.vue b/components/video/channel-credit.vue
new file mode 100644
index 0000000..0e31e79
--- /dev/null
+++ b/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>
diff --git a/helpers/build-video-list.js b/helpers/build-video-list.js
index e31e49a..57d57d9 100644
--- a/helpers/build-video-list.js
+++ b/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,
diff --git a/pages/app/_slug/benchmarks.vue b/pages/app/_slug/benchmarks.vue
index d11676b..e7f335f 100644
--- a/pages/app/_slug/benchmarks.vue
+++ b/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 } }) {
 
diff --git a/pages/tv/_slug.vue b/pages/tv/_slug.vue
index 68f05f5..9df404c 100644
--- a/pages/tv/_slug.vue
+++ b/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 } }) {