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] 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,