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

Fix buttons UI under video player, add icon for Odysee (#2551)

Browse source 
Co-authored-by: Bnyro <bnyro@tutanota.com>
This commit is contained in:
Nyte 2023-06-16 17:07:35 +02:00 committed by GitHub
parent 404d5b8cd0
commit 840e844947
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 40 deletions
Show stats 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" />
<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,
},

6
src/components/PlaylistPage.vue
View file

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

22
src/components/WatchOnYouTubeButton.vue
View file

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

17
src/components/WatchVideo.vue
View file

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

3
src/main.js
View file

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