Move conditional rendering logic to WatchOnYouTubeButton

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

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>
 

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>

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>