mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-09 17:58:21 +00:00
Fix buttons UI under video player, add icon for Odysee (#2551)
Co-authored-by: Bnyro <bnyro@tutanota.com>
This commit is contained in:
parent
404d5b8cd0
commit
840e844947
@ -44,7 +44,7 @@
|
||||
|
||||
<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">
|
||||
<button
|
||||
@ -76,7 +76,7 @@
|
||||
<script>
|
||||
import ErrorHandler from "./ErrorHandler.vue";
|
||||
import ContentItem from "./ContentItem.vue";
|
||||
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
|
||||
import WatchOnButton from "./WatchOnButton.vue";
|
||||
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
|
||||
import CollapsableText from "./CollapsableText.vue";
|
||||
|
||||
@ -84,7 +84,7 @@ export default {
|
||||
components: {
|
||||
ErrorHandler,
|
||||
ContentItem,
|
||||
WatchOnYouTubeButton,
|
||||
WatchOnButton,
|
||||
LoadingIndicatorPage,
|
||||
CollapsableText,
|
||||
},
|
||||
|
@ -28,7 +28,7 @@
|
||||
<a class="btn mr-1" :href="getRssUrl">
|
||||
<font-awesome-icon icon="rss" />
|
||||
</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>
|
||||
|
||||
@ -55,13 +55,13 @@ import ErrorHandler from "./ErrorHandler.vue";
|
||||
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
|
||||
import CollapsableText from "./CollapsableText.vue";
|
||||
import VideoItem from "./VideoItem.vue";
|
||||
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
|
||||
import WatchOnButton from "./WatchOnButton.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ErrorHandler,
|
||||
VideoItem,
|
||||
WatchOnYouTubeButton,
|
||||
WatchOnButton,
|
||||
LoadingIndicatorPage,
|
||||
CollapsableText,
|
||||
},
|
||||
|
26
src/components/WatchOnButton.vue
Normal file
26
src/components/WatchOnButton.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
link: String,
|
||||
platform: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "YouTube",
|
||||
},
|
||||
},
|
||||
};
|
||||
</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">{{ platform }}</i18n-t>
|
||||
<font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
|
||||
</a>
|
||||
<!-- For small screens -->
|
||||
<a :href="link" class="btn lg:hidden flex items-center">
|
||||
<font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
@ -1,22 +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">
|
||||
<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>
|
||||
</template>
|
@ -113,20 +113,15 @@
|
||||
>
|
||||
<font-awesome-icon class="mx-1.5" icon="rss" />
|
||||
</a>
|
||||
<WatchOnYouTubeButton :link="`https://youtu.be/${getVideoId()}`" />
|
||||
<!-- Share Dialog -->
|
||||
<button class="btn flex items-center" @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" />
|
||||
</button>
|
||||
<!-- LBRY -->
|
||||
<a
|
||||
v-if="video.lbryId"
|
||||
:href="'https://odysee.com/' + video.lbryId"
|
||||
class="btn flex items-center"
|
||||
>
|
||||
<i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
|
||||
</a>
|
||||
<!-- YouTube -->
|
||||
<WatchOnButton :link="`https://youtu.be/${getVideoId()}`" />
|
||||
<!-- Odysee -->
|
||||
<WatchOnButton :link="`https://odysee.com/${video.lbryId}`" platform="Odysee" />
|
||||
<!-- listen / watch toggle -->
|
||||
<router-link
|
||||
:to="toggleListenUrl"
|
||||
@ -236,7 +231,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";
|
||||
import WatchOnButton from "./WatchOnButton.vue";
|
||||
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
|
||||
import ToastComponent from "./ToastComponent.vue";
|
||||
import { parseTimeParam } from "@/utils/Misc";
|
||||
@ -252,7 +247,7 @@ export default {
|
||||
PlaylistAddModal,
|
||||
ShareModal,
|
||||
PlaylistVideos,
|
||||
WatchOnYouTubeButton,
|
||||
WatchOnButton,
|
||||
LoadingIndicatorPage,
|
||||
ToastComponent,
|
||||
},
|
||||
|
@ -23,7 +23,7 @@ import {
|
||||
faBookmark,
|
||||
faEdit,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
|
||||
import { faGithub, faBitcoin, faYoutube, faOdysee } from "@fortawesome/free-brands-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
library.add(
|
||||
faEye,
|
||||
@ -34,6 +34,7 @@ library.add(
|
||||
faHeart,
|
||||
faHeadphones,
|
||||
faYoutube,
|
||||
faOdysee,
|
||||
faRss,
|
||||
faChevronLeft,
|
||||
faLevelDownAlt,
|
||||
|
Loading…
Reference in New Issue
Block a user