Update Piped & EFY, Fix Glitches, Add "No Background" option for comments

src/components/CollapsableText.vue

@@ -4,14 +4,14 @@
         <span v-if="showFullText" v-html="fullText()" />
         <!-- eslint-disable-next-line vue/no-v-html -->
         <span v-else v-html="colapsedText()" />
-        <span v-if="text.length > 100 && !showFullText">...</span>
+        <span v-if="text.length > visibleLimit && !showFullText">...</span>
         <button
-            v-if="text.length > 100"
+            v-if="text.length > visibleLimit"
             style="
                 margin: 0 0 0 10rem;
                 background: var(--efy_bg1);
                 -webkit-text-fill-color: var(--efy_text);
-                padding: 5rem 8reml;
+                padding: 5rem 8rem;
             "
             class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
             @click="showFullText = !showFullText"
@@ -30,6 +30,10 @@ export default {
             type: String,
             default: null,
         },
+        visibleLimit: {
+            type: Number,
+            default: 100,
+        },
     },
     data() {
         return {
@@ -41,7 +45,7 @@ export default {
             return purifyHTML(rewriteDescription(this.text));
         },
         colapsedText() {
-            return purifyHTML(rewriteDescription(this.text.slice(0, 100)));
+            return purifyHTML(rewriteDescription(this.text.slice(0, this.visibleLimit)));
         },
     },
 };

src/components/CommentItem.vue

@@ -29,7 +29,7 @@
                 </div>
             </div>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div class="whitespace-pre-wrap" v-html="purifiedText" />
+            <CollapsableText :text="comment.commentText" :visible-limit="500" />
             <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
                 <div class="cursor-pointer" @click="loadReplies">
                     <a v-text="`${$t('actions.reply_count', comment.replyCount)}`" />
@@ -56,9 +56,10 @@
 </template>
 
 <script>
-import { purifyHTML } from "@/utils/HtmlUtils";
+import CollapsableText from "./CollapsableText.vue";
 
 export default {
+    components: { CollapsableText },
     props: {
         comment: {
             type: Object,
@@ -77,18 +78,12 @@ export default {
             nextpage: null,
         };
     },
-    computed: {
-        purifiedText() {
-            return purifyHTML(this.comment.commentText);
-        },
-    },
     methods: {
         async loadReplies() {
             if (!this.showingReplies && this.loadingReplies) {
                 this.showingReplies = true;
                 return;
             }
-
             this.loadingReplies = true;
             this.showingReplies = true;
             this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {

src/components/FooterComponent.vue

@@ -20,6 +20,10 @@
             <font-awesome-icon :icon="['fa', 'donate']" />
             <span v-t="'actions.instance_donations'" />
         </a>
+        <a v-if="privacyPolicyHref" :href="privacyPolicyHref" target="_blank">
+            <font-awesome-icon :icon="['fa', 'eye']" />
+            <span v-t="'actions.instance_privacy_policy'" class="ml-2" />
+        </a>
     </footer>
 </template>
 
@@ -29,6 +33,7 @@ export default {
         return {
             donationHref: null,
             statusPageHref: null,
+            privacyPolicyHref: null,
         };
     },
     mounted() {
@@ -39,6 +44,7 @@ export default {
             this.fetchJson(this.apiUrl() + "/config").then(config => {
                 this.donationHref = config?.donationUrl;
                 this.statusPageHref = config?.statusPageUrl;
+                this.privacyPolicyHref = config?.privacyPolicyUrl;
             });
         },
     },

src/components/NavBar.vue

@@ -12,12 +12,12 @@
                 >
                     <linearGradient id="P" gradientUnits="userSpaceOnUse" />
                     <linearGradient id="g1" x1="-169.7" y1="426.7" x2="214.5" y2="352" href="#P">
-                        <stop stop-color="hsl(var(--efy_color1_var))" />
-                        <stop offset="1" stop-color="hsl(var(--efy_color2_var))" />
+                        <stop stop-color="oklch(var(--efy_color1_var))" />
+                        <stop offset="1" stop-color="oklch(var(--efy_color2_var))" />
                     </linearGradient>
                     <linearGradient id="g2" x1="-7.8" y1="303.4" x2="553.4" y2="194.3" href="#P">
-                        <stop stop-color="hsl(var(--efy_color1_var))" />
-                        <stop offset="1" stop-color="hsl(var(--efy_color2_var))" />
+                        <stop stop-color="oklch(var(--efy_color1_var))" />
+                        <stop offset="1" stop-color="oklch(var(--efy_color2_var))" />
                     </linearGradient>
                     <linearGradient id="g3" x1="45.4" y1="706.9" x2="13.5" y2="857.1" href="#P">
                         <stop offset=".2" stop-color="#493b32" />

src/components/SubscriptionsPage.vue

@@ -82,8 +82,11 @@
         </div>
         <div class="mb-2 mt-3 flex flex-col overflow-y-scroll" style="height: 300rem">
             <div v-for="subscription in subscriptions" :key="subscription.name">
-                <div class="mr-3 flex justify-between">
-                    <span>{{ subscription.name }}</span>
+                <div class="mr-3 flex items-center justify-between">
+                    <a :href="subscription.url" target="_blank" class="flex items-center overflow-hidden">
+                        <img :src="subscription.avatar" class="h-8 w-8 rounded-full" />
+                        <span class="ml-2">{{ subscription.name }}</span>
+                    </a>
                     <input
                         type="checkbox"
                         class="checkbox"

src/components/VideoPlayer.vue

@@ -499,7 +499,7 @@ export default {
                     seekBarColors: {
                         base: "rgba(255, 255, 255, 0.3)",
                         buffered: "rgba(255, 255, 255, 0.54)",
-                        played: `hsl(var(--efy_color1_var))`,
+                        played: `oklch(var(--efy_color1_var))`,
                     },
                 };
 

src/components/WatchVideo.vue

@@ -158,7 +158,7 @@
                 <br />
             </div>
 
-            <div efy_select>
+            <div efy_select class="pp-watch-toggles">
                 <input id="showDesc" v-model="showDesc" type="checkbox" />
                 <label v-t="'actions.show_description'" for="showDesc" />
                 <input id="showComments" v-model="showComments" type="checkbox" @click="toggleComments" />
@@ -711,6 +711,14 @@ export default {
     text-decoration: underline;
     filter: brightness(0.75);
 }
+.pp-watch-toggles {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--efy_gap0);
+    & label {
+        margin: 0;
+    }
+}
 @media (width <= 768px) {
     .share-btn {
         aspect-ratio: 1;