TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Extract Watch on YouTube button to a component

Browse source
This commit is contained in:
thecashewtrader 2022-11-02 22:53:12 +05:30 committed by Kavin
parent f0fdd84bae
commit 662eb32e3e
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
4 changed files with 36 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/ChannelPage.vue
View file

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

23
src/components/PlaylistPage.vue
View file

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

20
src/components/WatchOnYouTubeButton.vue Normal file
View file

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

22
src/components/WatchVideo.vue
View file

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