Add support for playlist descriptions

src/components/ChannelPage.vue

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

src/components/CollapsableText.vue

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

src/components/PlaylistPage.vue

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