From c599d56db6252ac6f177c69dc35fc8b7d2888189 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Thu, 1 Jul 2021 01:56:04 +0530
Subject: [PATCH] Add "Watch on YouTube" button.

---
 src/components/WatchVideo.vue | 51 ++++++++++++++++++++++-------------
 src/main.js                   |  4 +--
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 9c4a7094..2f637108 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -1,30 +1,43 @@
 <template>
-    <div class="uk-container uk-container-xlarge">
+    <div class="uk-container uk-container-xlarge" v-if="video">
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
             <Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
             <h1 class="uk-text-bold">{{ video.title }}</h1>
 
-            <img :src="video.uploaderAvatar" loading="lazy" />
-            <router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
-                <a>{{ video.uploader }}</a>
-            </router-link>
+            <div uk-grid>
+                <div class="uk-width-1-2 uk-text-left">
+                    <img :src="video.uploaderAvatar" loading="lazy" />
+                    <router-link class="uk-text-bold" v-if="video.uploaderUrl" :to="video.uploaderUrl">
+                        <a>{{ video.uploader }}</a>
+                    </router-link>
+
+                    <div :style="[{ colour: foregroundColor }]">
+                        <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
+                        <b>{{ addCommas(video.likes) }}</b>
+                        &nbsp;
+                        <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
+                        <b>{{ addCommas(video.dislikes) }}</b>
+                    </div>
+                    <div>
+                        <font-awesome-icon icon="eye"></font-awesome-icon>
+                        <b>{{ addCommas(video.views) }}</b> views
+                    </div>
+                    <div>
+                        Uploaded on <b>{{ video.uploadDate }}</b>
+                    </div>
+                </div>
+
+                <div class="uk-width-1-2 uk-text-right">
+                    <a :href="'https://youtu.be/' + getVideoId()"
+                        >Watch on <font-awesome-icon :icon="['fab', 'youtube']"></font-awesome-icon
+                    ></a>
+                </div>
+            </div>
+
+            <hr />
 
-            <p :style="[{ colour: foregroundColor }]">
-                <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-                <b>{{ addCommas(video.likes) }}</b>
-                &nbsp;
-                <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
-                <b>{{ addCommas(video.dislikes) }}</b>
-            </p>
-            <p>
-                <font-awesome-icon icon="eye"></font-awesome-icon>
-                <b>{{ addCommas(video.views) }}</b> views
-            </p>
-            <p>
-                Uploaded on <b>{{ video.uploadDate }}</b>
-            </p>
             <a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
                 {{ showDesc ? "+" : "-" }}
             </a>
diff --git a/src/main.js b/src/main.js
index 97804cf8..3a5bd940 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,9 @@
 import { createApp } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faThumbsUp, faThumbsDown, faEye, faThumbtack, faCheck, faHeart, faHeadphones } from "@fortawesome/free-solid-svg-icons";
-import { faGithub, faBitcoin } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-library.add(faThumbsUp, faThumbsDown, faEye, faGithub, faBitcoin, faThumbtack, faCheck, faHeart, faHeadphones);
+library.add(faThumbsUp, faThumbsDown, faEye, faGithub, faBitcoin, faThumbtack, faCheck, faHeart, faHeadphones, faYoutube);
 
 import("uikit/dist/css/uikit-core.css");
 import("uikit/dist/js/uikit-core.min");