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

Simplify buttons to view content on different platform

Browse source
This commit is contained in:
Bnyro 2023-06-16 17:05:21 +02:00
parent b31516d1cb
commit 54811f2800
5 changed files with 18 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/ChannelPage.vue
View file

@ -44,7 +44,7 @@
<CollapsableText :text="channel.description" /> <CollapsableText :text="channel.description" />
<WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" /> <WatchOnButton :link="`https://youtube.com/channel/${this.channel.id}`" />
<div class="flex my-2 mx-1"> <div class="flex my-2 mx-1">
<button <button
@ -76,7 +76,7 @@
<script> <script>
import ErrorHandler from "./ErrorHandler.vue"; import ErrorHandler from "./ErrorHandler.vue";
import ContentItem from "./ContentItem.vue"; import ContentItem from "./ContentItem.vue";
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue"; import WatchOnButton from "./WatchOnButton.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue"; import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
import CollapsableText from "./CollapsableText.vue"; import CollapsableText from "./CollapsableText.vue";
@ -84,7 +84,7 @@ export default {
components: { components: {
ErrorHandler, ErrorHandler,
ContentItem, ContentItem,
WatchOnYouTubeButton, WatchOnButton,
LoadingIndicatorPage, LoadingIndicatorPage,
CollapsableText, CollapsableText,
}, },

6
src/components/PlaylistPage.vue
View file

@ -28,7 +28,7 @@
<a class="btn mr-1" :href="getRssUrl"> <a class="btn mr-1" :href="getRssUrl">
<font-awesome-icon icon="rss" /> <font-awesome-icon icon="rss" />
</a> </a>
<WatchOnYouTubeButton :link="`https://www.youtube.com/playlist?list=${this.$route.query.list}`" /> <WatchOnButton :link="`https://www.youtube.com/playlist?list=${this.$route.query.list}`" />
</div> </div>
</div> </div>
@ -55,13 +55,13 @@ import ErrorHandler from "./ErrorHandler.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue"; import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
import CollapsableText from "./CollapsableText.vue"; import CollapsableText from "./CollapsableText.vue";
import VideoItem from "./VideoItem.vue"; import VideoItem from "./VideoItem.vue";
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue"; import WatchOnButton from "./WatchOnButton.vue";
export default { export default {
components: { components: {
ErrorHandler, ErrorHandler,
VideoItem, VideoItem,
WatchOnYouTubeButton, WatchOnButton,
LoadingIndicatorPage, LoadingIndicatorPage,
CollapsableText, CollapsableText,
}, },

11
src/components/WatchOnOdyseeButton.vue → src/components/WatchOnButton.vue
View file

@ -2,6 +2,11 @@
export default { export default {
props: { props: {
link: String, link: String,
platform: {
type: String,
required: false,
default: "YouTube",
},
}, },
}; };
</script> </script>
@ -10,12 +15,12 @@ export default {
<template v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)"> <template v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)">
<!-- For large screens --> <!-- For large screens -->
<a :href="link" class="btn lt-lg:hidden flex items-center"> <a :href="link" class="btn lt-lg:hidden flex items-center">
<i18n-t keypath="player.watch_on" tag="strong">Odysee</i18n-t> <i18n-t keypath="player.watch_on" tag="strong">{{ platform }}</i18n-t>
<font-awesome-icon class="mx-1.5" :icon="['fab', 'odysee']" /> <font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
</a> </a>
<!-- For small screens --> <!-- For small screens -->
<a :href="link" class="btn lg:hidden flex items-center"> <a :href="link" class="btn lg:hidden flex items-center">
<font-awesome-icon class="mx-1.5" :icon="['fab', 'odysee']" /> <font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
</a> </a>
</template> </template>
</template> </template>

21
src/components/WatchOnYouTubeButton.vue
View file

@ -1,21 +0,0 @@
<script>
export default {
props: {
link: String,
},
};
</script>
<template>
<template v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)">
<!-- For large screens -->
<a :href="link" class="btn lt-lg:hidden flex items-center">
<i18n-t keypath="player.watch_on" tag="strong">YouTube</i18n-t>
<font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
</a>
<!-- For small screens -->
<a :href="link" class="btn lg:hidden flex items-center">
<font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
</a>
</template>
</template>

10
src/components/WatchVideo.vue
View file

@ -119,9 +119,9 @@
<font-awesome-icon class="mx-1.5" icon="fa-share" /> <font-awesome-icon class="mx-1.5" icon="fa-share" />
</button> </button>
<!-- YouTube --> <!-- YouTube -->
<WatchOnYouTubeButton :link="`https://youtu.be/${getVideoId()}`" /> <WatchOnButton :link="`https://youtu.be/${getVideoId()}`" />
<!-- Odysee --> <!-- Odysee -->
<WatchOnOdyseeButton :link="`https://odysee.com/${video.lbryId}`" /> <WatchOnButton :link="`https://odysee.com/${video.lbryId}`" platform="Odysee" />
<!-- listen / watch toggle --> <!-- listen / watch toggle -->
<router-link <router-link
:to="toggleListenUrl" :to="toggleListenUrl"
@ -231,11 +231,10 @@ import ChaptersBar from "./ChaptersBar.vue";
import PlaylistAddModal from "./PlaylistAddModal.vue"; import PlaylistAddModal from "./PlaylistAddModal.vue";
import ShareModal from "./ShareModal.vue"; import ShareModal from "./ShareModal.vue";
import PlaylistVideos from "./PlaylistVideos.vue"; import PlaylistVideos from "./PlaylistVideos.vue";
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue"; import WatchOnButton from "./WatchOnButton.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue"; import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
import ToastComponent from "./ToastComponent.vue"; import ToastComponent from "./ToastComponent.vue";
import { parseTimeParam } from "@/utils/Misc"; import { parseTimeParam } from "@/utils/Misc";
import WatchOnOdyseeButton from "./WatchOnOdyseeButton.vue";
export default { export default {
name: "App", name: "App",
@ -248,8 +247,7 @@ export default {
PlaylistAddModal, PlaylistAddModal,
ShareModal, ShareModal,
PlaylistVideos, PlaylistVideos,
WatchOnYouTubeButton, WatchOnButton,
WatchOnOdyseeButton,
LoadingIndicatorPage, LoadingIndicatorPage,
ToastComponent, ToastComponent,
}, },