Add Watch on YouTube button

This commit is contained in:
thecashewtrader 2022-11-02 21:40:27 +05:30 committed by Kavin
parent 64a2718e31
commit f0fdd84bae
No known key found for this signature in database
GPG Key ID: 49451E4482CC5BCD
6 changed files with 74 additions and 3 deletions

View File

@ -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"

View File

@ -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>

View File

@ -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");

View File

@ -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" />

View File

@ -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",

View File

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