From b382b525b1c038b282c9fa819f668e437f8dc344 Mon Sep 17 00:00:00 2001
From: thecashewtrader <thecashewtrader@protonmail.com>
Date: Thu, 3 Nov 2022 14:44:08 +0530
Subject: [PATCH] Move conditional rendering logic to WatchOnYouTubeButton

---
 src/components/ChannelPage.vue          | 5 +----
 src/components/PlaylistPage.vue         | 5 +----
 src/components/WatchOnYouTubeButton.vue | 4 ++--
 src/components/WatchVideo.vue           | 5 +----
 4 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 66b1835b..1ef8a400 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -35,10 +35,7 @@
             <font-awesome-icon icon="rss" />
         </a>
 
-        <WatchOnYouTubeButton
-            v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-            :link="`https://youtube.com/channel/${this.channel.id}`"
-        />
+        <WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" />
 
         <div class="flex mt-4 mb-2">
             <button
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 9df100a6..567d3de8 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -23,10 +23,7 @@
                 <a class="btn mr-1" :href="getRssUrl">
                     <font-awesome-icon icon="rss" />
                 </a>
-                <WatchOnYouTubeButton
-                    v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-                    :link="`https://www.youtube.com/playlist?list=${this.$route.query.list}`"
-                />
+                <WatchOnYouTubeButton :link="`https://www.youtube.com/playlist?list=${this.$route.query.list}`" />
             </div>
         </div>
 
diff --git a/src/components/WatchOnYouTubeButton.vue b/src/components/WatchOnYouTubeButton.vue
index 4c44f5b2..be875a86 100644
--- a/src/components/WatchOnYouTubeButton.vue
+++ b/src/components/WatchOnYouTubeButton.vue
@@ -8,13 +8,13 @@ export default {
 
 <template>
     <!-- For large screens -->
-    <a :href="link" class="btn lt-lg:hidden">
+    <a :href="link" v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)" 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">
+    <a :href="link" v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)" 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 d1adc0f5..f7c4b432 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -108,10 +108,7 @@
                         >
                             <font-awesome-icon icon="rss" />
                         </a>
-                        <WatchOnYouTubeButton
-                            v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-                            :link="`https://youtu.be/${getVideoId()}`"
-                        />
+                        <WatchOnYouTubeButton :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>