Add Watch on YouTube button

src/components/ChannelPage.vue

@@ -35,6 +35,25 @@
             <font-awesome-icon icon="rss" />
         </a>
 
+        <!-- Watch on YouTube button: For large screens -->
+        <a
+            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>
+
         <div class="flex mt-4 mb-2">
             <button
                 v-for="(tab, index) in tabs"

src/components/PlaylistPage.vue

@@ -20,9 +20,28 @@
                 <button class="btn mr-1" @click="downloadPlaylistAsTxt">
                     {{ $t("actions.download_as_txt") }}
                 </button>
-                <a class="btn" :href="getRssUrl">
+                <a class="btn mr-1" :href="getRssUrl">
                     <font-awesome-icon icon="rss" />
                 </a>
+
+                <!-- 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}`"
+                    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>
 

src/components/PreferencesPage.vue

@@ -96,6 +96,16 @@
             @change="onChange($event)"
         />
     </label>
+    <label class="pref" for="chkShowWatchOnYouTube">
+        <strong v-t="'actions.show_watch_on_youtube'" />
+        <input
+            id="chkShowWatchOnYouTube"
+            v-model="showWatchOnYouTube"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
     <label class="pref" for="chkStoreSearchHistory">
         <strong v-t="'actions.store_search_history'" />
         <input
@@ -368,6 +378,7 @@ export default {
             minimizeComments: false,
             minimizeDescription: false,
             minimizeRecommendations: false,
+            showWatchOnYouTube: false,
             watchHistory: false,
             searchHistory: false,
             hideWatched: false,
@@ -504,6 +515,7 @@ export default {
             this.minimizeComments = this.getPreferenceBoolean("minimizeComments", false);
             this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
             this.minimizeRecommendations = this.getPreferenceBoolean("minimizeRecommendations", false);
+            this.showWatchOnYouTube = this.getPreferenceBoolean("showWatchOnYouTube", false);
             this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
             this.searchHistory = this.getPreferenceBoolean("searchHistory", false);
             this.selectedLanguage = this.getPreferenceString("hl", await this.defaultLanguage);
@@ -563,6 +575,7 @@ export default {
                 localStorage.setItem("minimizeComments", this.minimizeComments);
                 localStorage.setItem("minimizeDescription", this.minimizeDescription);
                 localStorage.setItem("minimizeRecommendations", this.minimizeRecommendations);
+                localStorage.setItem("showWatchOnYouTube", this.showWatchOnYouTube);
                 localStorage.setItem("watchHistory", this.watchHistory);
                 localStorage.setItem("searchHistory", this.searchHistory);
                 if (!this.searchHistory) localStorage.removeItem("search_history");

src/components/WatchVideo.vue

@@ -108,7 +108,25 @@
                         >
                             <font-awesome-icon icon="rss" />
                         </a>
-                        <!-- watch on youtube button -->
+                        <!-- Watch on YouTube button: For large screens -->
+                        <a
+                            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>
+                        <!-- Share Dialog -->
                         <button class="btn" @click="showShareModal = !showShareModal">
                             <i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
                             <font-awesome-icon class="mx-1.5" icon="fa-share" />

src/locales/en.json

@@ -90,6 +90,7 @@
         "delete_account": "Delete Account",
         "logout": "Logout from this device",
         "minimize_recommendations_default": "Minimize Recommendations by default",
+        "show_watch_on_youtube": "Show Watch on YouTube button",
         "invalidate_session": "Logout all devices",
         "different_auth_instance": "Use a different instance for authentication",
         "instance_auth_selection": "Autentication Instance Selection",

src/main.js

@@ -21,7 +21,7 @@ import {
     faServer,
     faDonate,
 } 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(
     faEye,
@@ -31,6 +31,7 @@ library.add(
     faCheck,
     faHeart,
     faHeadphones,
+    faYoutube,
     faRss,
     faChevronLeft,
     faLevelDownAlt,