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

Merge pull request #2445 from Bnyro/playlist-description

Browse source 
Add support for playlist descriptions
This commit is contained in:
Kavin 2023-05-24 11:43:32 +01:00 committed by GitHub
commit 2d1e63e5ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/ChannelPage.vue
View file

@ -42,19 +42,7 @@
</div>
</div>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="channel.description" class="whitespace-pre-wrap py-2 mx-1">
<span v-if="fullDescription" v-html="purifyHTML(rewriteDescription(channel.description))" />
<span v-html="purifyHTML(rewriteDescription(channel.description.slice(0, 100)))" v-else />
<span v-if="channel.description.length > 100 && !fullDescription">...</span>
<button
v-if="channel.description.length > 100"
class="hover:underline font-semibold text-neutral-500 block whitespace-normal"
@click="fullDescription = !fullDescription"
>
[{{ fullDescription ? $t("actions.show_less") : $t("actions.show_more") }}]
</button>
</div>
<CollapsableText :text="channel.description" />
<WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" />
@ -90,6 +78,7 @@ import ErrorHandler from "./ErrorHandler.vue";
import ContentItem from "./ContentItem.vue";
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
import CollapsableText from "./CollapsableText.vue";
export default {
components: {
@ -97,6 +86,7 @@ export default {
ContentItem,
WatchOnYouTubeButton,
LoadingIndicatorPage,
CollapsableText,
},
data() {
return {
@ -105,7 +95,6 @@ export default {
tabs: [],
selectedTab: 0,
contentItems: [],
fullDescription: false,
};
},
mounted() {

28
src/components/CollapsableText.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="text" class="whitespace-pre-wrap py-2 mx-1">
<span v-if="showFullText" v-html="purifyHTML(rewriteDescription(text))" />
<span v-else v-html="purifyHTML(rewriteDescription(text.slice(0, 100)))" />
<span v-if="text.length > 100 && !showFullText">...</span>
<button
v-if="text.length > 100"
class="hover:underline font-semibold text-neutral-500 block whitespace-normal"
@click="showFullText = !showFullText"
>
[{{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}]
</button>
</div>
</template>
<script>
export default {
props: {
text: String,
},
data() {
return {
showFullText: false,
};
},
};
</script>

17
src/components/PlaylistPage.vue
View file

@ -1,20 +1,21 @@
<template>
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
<LoadingIndicatorPage :show-content="playlist" v-show="!playlist.error">
<h1 class="text-center my-4" v-text="playlist.name" />
<LoadingIndicatorPage :show-content="playlist" v-show="!playlist?.error">
<h1 class="ml-1 mb-1 mt-4 text-3xl!" v-text="playlist.name" />
<div class="flex justify-between items-center">
<CollapsableText :text="playlist.description" />
<div class="flex justify-between items-center mt-1">
<div>
<router-link class="link" :to="playlist.uploaderUrl || '/'">
<router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
<img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
<strong v-text="playlist.uploader" />
</router-link>
</div>
<div>
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
<br />
<button class="btn mr-1" v-if="!isPipedPlaylist" @click="bookmarkPlaylist">
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" class="mr-2" />
<button class="btn mx-1" v-if="!isPipedPlaylist" @click="bookmarkPlaylist">
{{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
}}<font-awesome-icon class="ml-3" icon="bookmark" />
</button>
@ -52,6 +53,7 @@
<script>
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";
@ -61,6 +63,7 @@ export default {
VideoItem,
WatchOnYouTubeButton,
LoadingIndicatorPage,
CollapsableText,
},
data() {
return {