From f0fdd84bae86398427261c335f28914bc78991f3 Mon Sep 17 00:00:00 2001
From: thecashewtrader <thecashewtrader@protonmail.com>
Date: Wed, 2 Nov 2022 21:40:27 +0530
Subject: [PATCH 1/5] Add Watch on YouTube button

---
 src/components/ChannelPage.vue     | 19 +++++++++++++++++++
 src/components/PlaylistPage.vue    | 21 ++++++++++++++++++++-
 src/components/PreferencesPage.vue | 13 +++++++++++++
 src/components/WatchVideo.vue      | 20 +++++++++++++++++++-
 src/locales/en.json                |  1 +
 src/main.js                        |  3 ++-
 6 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index c0c1d89d..297619f3 100644
--- a/src/components/ChannelPage.vue
+++ b/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"
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index bb42503a..ce2310ad 100644
--- a/src/components/PlaylistPage.vue
+++ b/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>
 
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 80c1fcfb..6df4d72a 100644
--- a/src/components/PreferencesPage.vue
+++ b/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");
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index bf024eaa..a4191d4f 100644
--- a/src/components/WatchVideo.vue
+++ b/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" />
diff --git a/src/locales/en.json b/src/locales/en.json
index 9cef968d..71e1120a 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/main.js b/src/main.js
index efe2bae9..e5126cc3 100644
--- a/src/main.js
+++ b/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,

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 2/5] 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)");

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 3/5] 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>

From 756471695d13c332e58bf543b777c409e33f5d48 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Sun, 6 Nov 2022 00:44:14 +0000
Subject: [PATCH 4/5] Move v-if calls to single template.

---
 src/components/WatchOnYouTubeButton.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/WatchOnYouTubeButton.vue b/src/components/WatchOnYouTubeButton.vue
index be875a86..bd6c895f 100644
--- a/src/components/WatchOnYouTubeButton.vue
+++ b/src/components/WatchOnYouTubeButton.vue
@@ -7,14 +7,16 @@ export default {
 </script>
 
 <template>
-    <!-- For large screens -->
-    <a :href="link" v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)" class="btn lt-lg:hidden">
-        <i18n-t keypath="player.watch_on" tag="strong">
+    <template v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)">
+        <!-- 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']" />
-        </i18n-t>
-    </a>
-    <!-- For small screens -->
-    <a :href="link" v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)" class="btn lg:hidden">
-        <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-    </a>
+        </a>
+    </template>
 </template>

From 6438d4fbabacbf37469d3141f9ad7881038518c6 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Sun, 6 Nov 2022 00:44:27 +0000
Subject: [PATCH 5/5] Remove av1 by default.

---
 src/components/PreferencesPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 6df4d72a..167193fb 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -543,7 +543,7 @@ export default {
                     this.getPreferenceString("theme", "dark") !== this.selectedTheme ||
                     this.getPreferenceBoolean("watchHistory", false) != this.watchHistory ||
                     this.getPreferenceString("hl", await this.defaultLanguage) !== this.selectedLanguage ||
-                    this.getPreferenceString("enabledCodecs", "av1,vp9,avc") !== this.enabledCodecs.join(",")
+                    this.getPreferenceString("enabledCodecs", "vp9,avc") !== this.enabledCodecs.join(",")
                 )
                     shouldReload = true;