From 662eb32e3e8d9ff239e37c6720a8281f47a1c694 Mon Sep 17 00:00:00 2001
From: thecashewtrader <thecashewtrader@protonmail.com>
Date: Wed, 2 Nov 2022 22:53:12 +0530
Subject: [PATCH] Extract Watch on YouTube button to a component

---
 src/components/ChannelPage.vue          | 24 ++++++------------------
 src/components/PlaylistPage.vue         | 23 +++++------------------
 src/components/WatchOnYouTubeButton.vue | 20 ++++++++++++++++++++
 src/components/WatchVideo.vue           | 22 +++++-----------------
 4 files changed, 36 insertions(+), 53 deletions(-)
 create mode 100644 src/components/WatchOnYouTubeButton.vue

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 297619f3..66b1835b 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -30,29 +30,15 @@
             v-if="channel.id"
             :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
             target="_blank"
-            class="btn flex-col ml-3"
+            class="btn flex-col mx-3"
         >
             <font-awesome-icon icon="rss" />
         </a>
 
-        <!-- Watch on YouTube button: For large screens -->
-        <a
+        <WatchOnYouTubeButton
             v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-            :href="`https://youtube.com/channel/${this.channel.id}`"
-            class="btn lt-lg:hidden ml-3"
-        >
-            <i18n-t keypath="player.watch_on" tag="strong">
-                <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-            </i18n-t>
-        </a>
-        <!-- Watch on YouTube button: For small screens -->
-        <a
-            v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-            :href="`https://youtube.com/channel/${this.channel.id}`"
-            class="btn lg:hidden ml-3"
-        >
-            <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-        </a>
+            :link="`https://youtube.com/channel/${this.channel.id}`"
+        />
 
         <div class="flex mt-4 mb-2">
             <button
@@ -84,11 +70,13 @@
 <script>
 import ErrorHandler from "./ErrorHandler.vue";
 import ContentItem from "./ContentItem.vue";
+import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
 
 export default {
     components: {
         ErrorHandler,
         ContentItem,
+        WatchOnYouTubeButton,
     },
     data() {
         return {
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index ce2310ad..9df100a6 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -23,25 +23,10 @@
                 <a class="btn mr-1" :href="getRssUrl">
                     <font-awesome-icon icon="rss" />
                 </a>
-
-                <!-- Watch on YouTube button: For large screens -->
-                <a
+                <WatchOnYouTubeButton
                     v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-                    :href="`https://www.youtube.com/playlist?list=${this.$route.query.list}`"
-                    class="btn lt-lg:hidden"
-                >
-                    <i18n-t keypath="player.watch_on" tag="strong">
-                        <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-                    </i18n-t>
-                </a>
-                <!-- Watch on YouTube button: For small screens -->
-                <a
-                    v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-                    :href="`https://www.youtube.com/playlist?list=${this.$route.query.list}`"
-                    class="btn lg:hidden"
-                >
-                    <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-                </a>
+                    :link="`https://www.youtube.com/playlist?list=${this.$route.query.list}`"
+                />
             </div>
         </div>
 
@@ -66,11 +51,13 @@
 <script>
 import ErrorHandler from "./ErrorHandler.vue";
 import VideoItem from "./VideoItem.vue";
+import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
 
 export default {
     components: {
         ErrorHandler,
         VideoItem,
+        WatchOnYouTubeButton,
     },
     data() {
         return {
diff --git a/src/components/WatchOnYouTubeButton.vue b/src/components/WatchOnYouTubeButton.vue
new file mode 100644
index 00000000..4c44f5b2
--- /dev/null
+++ b/src/components/WatchOnYouTubeButton.vue
@@ -0,0 +1,20 @@
+<script>
+export default {
+    props: {
+        link: String,
+    },
+};
+</script>
+
+<template>
+    <!-- For large screens -->
+    <a :href="link" class="btn lt-lg:hidden">
+        <i18n-t keypath="player.watch_on" tag="strong">
+            <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
+        </i18n-t>
+    </a>
+    <!-- For small screens -->
+    <a :href="link" class="btn lg:hidden">
+        <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
+    </a>
+</template>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index a4191d4f..d1adc0f5 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -108,24 +108,10 @@
                         >
                             <font-awesome-icon icon="rss" />
                         </a>
-                        <!-- Watch on YouTube button: For large screens -->
-                        <a
+                        <WatchOnYouTubeButton
                             v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-                            :href="`https://youtu.be/${getVideoId()}`"
-                            class="btn lt-lg:hidden"
-                        >
-                            <i18n-t keypath="player.watch_on" tag="strong">
-                                <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-                            </i18n-t>
-                        </a>
-                        <!-- Watch on YouTube button: For small screens -->
-                        <a
-                            v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-                            :href="`https://youtu.be/${getVideoId()}`"
-                            class="btn lg:hidden"
-                        >
-                            <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-                        </a>
+                            :link="`https://youtu.be/${getVideoId()}`"
+                        />
                         <!-- Share Dialog -->
                         <button class="btn" @click="showShareModal = !showShareModal">
                             <i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
@@ -241,6 +227,7 @@ import ChaptersBar from "./ChaptersBar.vue";
 import PlaylistAddModal from "./PlaylistAddModal.vue";
 import ShareModal from "./ShareModal.vue";
 import PlaylistVideos from "./PlaylistVideos.vue";
+import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
 
 export default {
     name: "App",
@@ -253,6 +240,7 @@ export default {
         PlaylistAddModal,
         ShareModal,
         PlaylistVideos,
+        WatchOnYouTubeButton,
     },
     data() {
         const smallViewQuery = window.matchMedia("(max-width: 640px)");