Extract Watch on YouTube button to a component

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 -->
+        <WatchOnYouTubeButton
-        <a
             v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-            :href="`https://youtube.com/channel/${this.channel.id}`"
+            :link="`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>
 
         <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 {

src/components/PlaylistPage.vue

@@ -23,25 +23,10 @@
                 <a class="btn mr-1" :href="getRssUrl">
                     <font-awesome-icon icon="rss" />
                 </a>
-
+                <WatchOnYouTubeButton
-                <!-- Watch on YouTube button: For large screens -->
-                <a
                     v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-                    :href="`https://www.youtube.com/playlist?list=${this.$route.query.list}`"
+                    :link="`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>
             </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 {

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>

src/components/WatchVideo.vue

@@ -108,24 +108,10 @@
                         >
                             <font-awesome-icon icon="rss" />
                         </a>
-                        <!-- Watch on YouTube button: For large screens -->
+                        <WatchOnYouTubeButton
-                        <a
                             v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"
-                            :href="`https://youtu.be/${getVideoId()}`"
+                            :link="`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>
                         <!-- 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)");