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

.github/workflows/docker-build.yml

@@ -23,21 +23,21 @@ jobs:
             - run: pnpm install
             - run: pnpm build && ./localizefonts.sh && mv dist/ dist-ci/
             - name: Set up QEMU
-              uses: docker/setup-qemu-action@v2
+              uses: docker/setup-qemu-action@v3
               with:
                   platforms: all
             - name: Set up Docker Buildx
               id: buildx
-              uses: docker/setup-buildx-action@v2
+              uses: docker/setup-buildx-action@v3
               with:
                   version: latest
             - name: Login to DockerHub
-              uses: docker/login-action@v2
+              uses: docker/login-action@v3
               with:
                   username: ${{ secrets.DOCKER_USERNAME }}
                   password: ${{ secrets.DOCKER_PASSWORD }}
             - name: Build and push
-              uses: docker/build-push-action@v4
+              uses: docker/build-push-action@v5
               with:
                   context: .
                   file: ./Dockerfile.ci

package.json

@@ -16,43 +16,45 @@
         "@fortawesome/vue-fontawesome": "3.0.3",
         "buffer": "6.0.3",
         "dompurify": "3.0.5",
+        "efy": "24.2.25",
         "hotkeys-js": "3.12.0",
         "javascript-time-ago": "2.5.9",
         "linkify-html": "4.1.1",
         "linkifyjs": "4.1.1",
         "mux.js": "6.3.0",
         "qrcode": "^1.5.3",
-        "shaka-player": "4.4.0",
+        "shaka-player": "4.4.1",
         "stream-browserify": "3.0.0",
         "vue": "3.3.4",
-        "vue-i18n": "9.2.2",
+        "vue-i18n": "9.4.0",
         "vue-router": "4.2.4",
         "xml-js": "1.6.11"
     },
     "devDependencies": {
         "@iconify-json/fa6-brands": "1.1.13",
         "@iconify-json/fa6-solid": "1.1.15",
-        "@intlify/unplugin-vue-i18n": "0.13.0",
-        "@unocss/eslint-config": "0.55.6",
-        "@unocss/preset-icons": "0.55.6",
-        "@unocss/preset-uno": "0.55.6",
-        "@unocss/preset-web-fonts": "0.55.6",
-        "@unocss/reset": "0.55.6",
-        "@unocss/transformer-directives": "0.55.6",
-        "@unocss/transformer-variant-group": "0.55.6",
+        "@intlify/unplugin-vue-i18n": "1.2.0",
+        "@unocss/eslint-config": "0.55.7",
+        "@unocss/preset-icons": "0.55.7",
+        "@unocss/preset-uno": "0.55.7",
+        "@unocss/preset-web-fonts": "0.55.7",
+        "@unocss/reset": "0.55.7",
+        "@unocss/transformer-directives": "0.55.7",
+        "@unocss/transformer-variant-group": "0.55.7",
         "@vitejs/plugin-legacy": "4.1.1",
         "@vitejs/plugin-vue": "4.3.4",
         "@vue/compiler-sfc": "3.3.4",
-        "eslint": "8.48.0",
+        "efy": "24.2.25",
+        "eslint": "8.49.0",
         "eslint-config-prettier": "9.0.0",
         "eslint-plugin-prettier": "5.0.0",
         "eslint-plugin-vue": "9.17.0",
-        "lightningcss": "1.21.7",
+        "lightningcss": "1.21.8",
         "prettier": "3.0.3",
-        "unocss": "0.55.6",
+        "unocss": "0.55.7",
         "vite": "4.4.9",
         "vite-plugin-eslint": "1.8.1",
-        "vite-plugin-pwa": "0.16.4",
+        "vite-plugin-pwa": "0.16.5",
         "workbox-window": "7.0.0"
     },
     "browserslist": [

public/efy

@@ -1 +0,0 @@
-Subproject commit 3a0d7c4eded28167fc29173407889db62f8ebce4

src/App.vue

@@ -49,6 +49,12 @@ video {
 .pp-full-width :is(.comment, .comment-content) {
     width: 100%;
 }
+.pp-no-bg :is(.comment, .comment-content) {
+    background: none;
+    backdrop-filter: none !important;
+    padding: 0;
+    border: 0;
+}
 :is(.pp-trans, .pp-solid).shaka-text-container,
 :is(.pp-trans, .pp-solid).shaka-text-container * {
     background: transparent !important;

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;

src/locales/ar.json

@@ -18,7 +18,7 @@
         "dearrow": "دي ارو"
     },
     "player": {
-        "watch_on": "شاهد عبر",
+        "watch_on": "مشاهدة على {0}",
         "failed": "فشل مع رمز الخطأ {0}، راجع السجلات لمزيد من المعلومات"
     },
     "actions": {
@@ -146,7 +146,8 @@
         "enable_dearrow": "تمكين دي ارو",
         "generate_qrcode": "إنشاء رمز الاستجابة السريعة",
         "import_from_json_csv": "استيراد من JSON/CSV",
-        "download_frame": "إطار التحميل"
+        "download_frame": "إطار التحميل",
+        "instance_privacy_policy": "سياسة الخصوصية"
     },
     "video": {
         "sponsor_segments": "المقاطع الإعلانية",

src/locales/ca.json

@@ -1,174 +1,201 @@
 {
     "titles": {
-        "login": "Iniciar Sessió",
+        "login": "Inicia la sessió",
         "preferences": "Preferències",
         "feed": "Continguts",
         "history": "Historial",
         "subscriptions": "Subscripcions",
         "trending": "Tendències",
-        "register": "Registrar-se",
+        "register": "Registra'm",
         "playlists": "Llistes de reproducció",
         "account": "Compte",
         "instance": "Instància",
         "player": "Reproductor",
-        "livestreams": "Retransmissió en directe",
+        "livestreams": "Directes",
         "channels": "Canals",
-        "bookmarks": "Marcadors"
+        "bookmarks": "Marcadors",
+        "channel_groups": "Grups de canals",
+        "dearrow": "DeArrow"
     },
     "actions": {
-        "channel_name_desc": "Nom del Canal (Z-A)",
+        "channel_name_desc": "Nom del canal (Z-A)",
         "back": "Enrere",
-        "skip_intro": "Omet l'Animació d'Entreacte/Introducció",
-        "skip_outro": "Omet les Targetes/Crèdits",
-        "skip_preview": "Omet la Previsualització/Recapitulació",
-        "skip_interaction": "Omet el Recordatori d'Interacció (Subscriu-te)",
-        "skip_self_promo": "Omet la Promoció no Remunerada/Autopromoció",
-        "skip_non_music": "Omet la Música: Secció No-Músical",
-        "skip_highlight": "Omet els Destacats",
-        "skip_filler_tangent": "Omet les Tangents de Farciment",
+        "skip_intro": "Omet l'animació d'interludi/introducció",
+        "skip_outro": "Omet els crèdits finals",
+        "skip_preview": "Omet la previsualització/recapitulació",
+        "skip_interaction": "Omet el recordatori d'interacció (Subscriviu-vos)",
+        "skip_self_promo": "Omet la promoció no remunerada/autopromoció",
+        "skip_non_music": "Omet la música: Secció no musical",
+        "skip_highlight": "Omet els destacats",
+        "skip_filler_tangent": "Omet les tangents de farciment",
         "theme": "Tema",
         "auto": "Automàtic",
         "dark": "Fosc",
         "light": "Clar",
-        "autoplay_video": "Reprodueix Automàticament el Vídeo",
-        "audio_only": "Només Àudio",
-        "default_quality": "Qualitat Per Defecte",
-        "buffering_goal": "Objectiu de la Memòria Intermèdia (en segons)",
-        "country_selection": "Selecciona el País",
-        "default_homepage": "Pàgina Inicial Per Defecte",
-        "show_comments": "Mostra els Comentaris",
-        "minimize_description_default": "Minimitza la Descripció Per Defecte",
-        "store_watch_history": "Desa l'Historial de Reproducció",
-        "language_selection": "Selecciona l'Idioma",
-        "enabled_codecs": "Còdecs Habilitats (Múltiple)",
-        "instances_list": "Llista d'Instàncies",
-        "instance_selection": "Selecció d'Instàncies",
-        "show_more": "Mostrar més",
+        "autoplay_video": "Reprodueix automàticament el vídeo",
+        "audio_only": "Només àudio",
+        "default_quality": "Qualitat predefinida",
+        "buffering_goal": "Objectiu de la memòria intermèdia (en segons)",
+        "country_selection": "País",
+        "default_homepage": "Pàgina d'inici predefinida",
+        "show_comments": "Mostra els comentaris",
+        "minimize_description_default": "Minimitza la descripció per defecte",
+        "store_watch_history": "Desa l'historial de visualitzacions",
+        "language_selection": "Llengua",
+        "enabled_codecs": "Còdecs habilitats (múltiples)",
+        "instances_list": "Llista d'instàncies",
+        "instance_selection": "Instància",
+        "show_more": "Mostra'n més",
         "yes": "Sí",
         "no": "No",
-        "export_to_json": "Exportar a JSON",
-        "import_from_json": "Importar de JSON/CSV",
-        "loop_this_video": "Reprodueix aquest Vídeo en bucle",
-        "donations": "Donacions de desenvolupament",
-        "minimize_description": "Minimitza la Descripció",
-        "show_description": "Mostra la Descripció",
-        "disable_lbry": "Deshabilita LBRY per Streaming",
-        "enable_lbry_proxy": "Habilita servidor intermediari per LBRY",
-        "view_ssl_score": "Visualitza la Puntuació SSL",
-        "search": "Cercar",
+        "export_to_json": "Exporta a JSON",
+        "import_from_json": "Importa des d'un JSON",
+        "loop_this_video": "Reprodueix el vídeo en bucle",
+        "donations": "Donacions al desenvolupament",
+        "minimize_description": "Minimitza la descripció",
+        "show_description": "Mostra la descripció",
+        "disable_lbry": "Desactiva el LBRY per a les transmissions en temps real",
+        "enable_lbry_proxy": "Activa un servidor intermediari per al LBRY",
+        "view_ssl_score": "Mostra la puntuació SSL",
+        "search": "Cerca (Ctrl+K)",
         "filter": "Filtre",
-        "loading": "Carregant...",
-        "clear_history": "Netejar Historial",
-        "hide_replies": "Oculta Respostes",
-        "load_more_replies": "Carrega més Respostes",
-        "view_subscriptions": "Veure Subscripcions",
-        "subscribe": "Subscriure - {count}",
-        "unsubscribe": "Anul·lar subscripció - {count}",
-        "sort_by": "Ordenar per:",
-        "most_recent": "Més Recents",
-        "least_recent": "Menys Recents",
-        "skip_sponsors": "Omet Promocions",
-        "channel_name_asc": "Nom del Canal (A-Z)",
-        "enable_sponsorblock": "Habilita Sponsorblock",
+        "loading": "S'està carregant...",
+        "clear_history": "Esborra l'historial",
+        "hide_replies": "Amaga les respostes",
+        "load_more_replies": "Carrega més respostes",
+        "view_subscriptions": "Mostra les subscripcions",
+        "subscribe": "Subscriu-me - {count}",
+        "unsubscribe": "Anul·la la subscripció - {count}",
+        "sort_by": "Ordena per:",
+        "most_recent": "Més recents",
+        "least_recent": "Menys recents",
+        "skip_sponsors": "Omet els patrocinadors",
+        "channel_name_asc": "Nom del canal (A-Z)",
+        "enable_sponsorblock": "Activa l'Sponsorblock",
         "uses_api_from": "Utilitza l'API de ",
-        "minimize_recommendations": "Minimitza Recomanacions",
-        "show_recommendations": "Mostra Recomanacions",
+        "minimize_recommendations": "Minimitza les recomanacions",
+        "show_recommendations": "Mostra les recomanacions",
         "auto_play_next_video": "Reprodueix automàticament el pròxim vídeo",
-        "add_to_playlist": "Afegir a la llista de reproducció",
+        "add_to_playlist": "Afegeix a la llista de reproducció",
         "remove_from_playlist": "Suprimeix de la llista de reproducció",
-        "create_playlist": "Crear llista de reproducció",
-        "delete_playlist": "Suprimir llista de reproducció",
-        "please_select_playlist": "Selecciona una llista de reproducció",
-        "delete_playlist_confirm": "Eliminar aquesta llista de reproducció?",
-        "delete_playlist_video_confirm": "Eliminar aquest vídeo de la llista de reproducció?",
+        "create_playlist": "Crea una llista de reproducció",
+        "delete_playlist": "Suprimeix la llista de reproducció",
+        "please_select_playlist": "Seleccioneu una llista de reproducció",
+        "delete_playlist_confirm": "Voleu suprimir la llista de reproducció?",
+        "delete_playlist_video_confirm": "Voleu suprimir el vídeo de la llista de reproducció?",
         "select_playlist": "Selecciona una llista de reproducció",
-        "show_markers": "Mostra Marcadors al Reproductor",
-        "delete_account": "Eliminar Compte",
-        "logout": "Desconnectar aquest dispositiu",
-        "minimize_recommendations_default": "Minimitza les Recomanacions per defecte",
-        "invalidate_session": "Desconnectar tots els dispositius",
+        "show_markers": "Mostra marcadors al reproductor",
+        "delete_account": "Suprimeix el compte",
+        "logout": "Desconnecta aquest dispositiu",
+        "minimize_recommendations_default": "Minimitza les recomanacions per defecte",
+        "invalidate_session": "Desconnecta tots els dispositius",
         "different_auth_instance": "Usa una instància diferent per a l'autenticació",
-        "instance_auth_selection": "Selecciona la instància d'autenticació",
-        "clone_playlist": "Clonar Llista de Reproducció",
-        "clone_playlist_success": "Clonada correctament!",
-        "download_as_txt": "Descarrega com a .txt",
-        "reset_preferences": "Restablir preferències",
+        "instance_auth_selection": "Instància d'autenticació",
+        "clone_playlist": "Clona la llista de reproducció",
+        "clone_playlist_success": "S'ha clonat correctament!",
+        "download_as_txt": "Baixa com a .txt",
+        "reset_preferences": "Restableix les preferències",
         "restore_preferences": "Restaura les preferències",
-        "backup_preferences": "Preferències de la còpia de seguretat",
-        "confirm_reset_preferences": "Esteu segur que voleu restablir les vostres preferències?",
+        "backup_preferences": "Exporta les preferències",
+        "confirm_reset_preferences": "Segur que voleu restablir les vostres preferències?",
         "back_to_home": "Torna a l'inici",
-        "with_timecode": "Compartir moment concret",
+        "with_timecode": "Comparteix amb marca de temps",
         "piped_link": "Enllaç de Piped",
-        "share": "Compartir",
-        "time_code": "Moment (en segons)",
-        "copy_link": "Copiar l'enllaç",
+        "share": "Comparteix",
+        "time_code": "Marca de temps (en segons)",
+        "copy_link": "Copia l'enllaç",
         "follow_link": "Vés a l'enllaç",
         "store_search_history": "Emmagatzema l'historial de cerca",
         "instance_donations": "Donacions a instàncies",
-        "hide_watched": "Amaga els vídeos vistos de Continguts",
+        "hide_watched": "Amaga els vídeos vistos dels continguts",
         "show_chapters": "Capítols",
         "status_page": "Estat",
         "source_code": "Codi font",
         "documentation": "Documentació",
-        "show_watch_on_youtube": "Mostra el botó \"Veure a Youtube\"",
+        "show_watch_on_youtube": "Mostra el botó «Mostra'l a Youtube»",
         "reply_count": "{count} respostes",
-        "minimize_comments_default": "Minimitzar els comentaris per defecte",
+        "minimize_comments_default": "Minimitza els comentaris per defecte",
         "minimize_comments": "Minimitza els comentaris",
-        "no_valid_playlists": "L'arxiu no conté llistes de reproducció vàlides!",
-        "bookmark_playlist": "Marcador",
-        "playlist_bookmarked": "Afegit a marcadors",
-        "minimize_chapters_default": "Minimitzar capítols per defecte",
+        "no_valid_playlists": "El fitxer no conté llistes de reproducció vàlides!",
+        "bookmark_playlist": "Afegeix als marcadors",
+        "playlist_bookmarked": "S'ha afegit als marcadors",
+        "minimize_chapters_default": "Minimitza els capítols per defecte",
         "skip_button_only": "Mostra el botó de saltar",
         "skip_automatically": "Automàticament",
         "min_segment_length": "Longitud de segment mínima (en segons)",
-        "skip_segment": "Saltar segment",
-        "with_playlist": "Comparteix amb llista de reproducció",
-        "show_less": "Mostrar menys"
+        "skip_segment": "Omet el segment",
+        "with_playlist": "Comparteix amb la llista de reproducció",
+        "show_less": "Mostra'n menys",
+        "okay": "D'acord",
+        "edit_playlist": "Edita la llista de reproducció",
+        "group_name": "Nom del grup",
+        "import_from_json_csv": "Importa des d'un JSON/CSV",
+        "cancel": "Cancel·la",
+        "enable_dearrow": "Activa el DeArrow",
+        "playlist_description": "Descripció de la llista de reproducció",
+        "dismiss": "Descarta",
+        "chapters_layout_mobile": "Disposició dels capítols al mòbil",
+        "delete_automatically": "Suprimeix automàticament després de",
+        "download_frame": "Baixa el fotograma",
+        "create_group": "Crea un grup",
+        "show_search_suggestions": "Mostra suggeriments de cerca",
+        "auto_display_captions": "Mostra els subtítols automàticament",
+        "autoplay_next_countdown": "Compte enrere predefinit fins al pròxim vídeo (en segons)",
+        "generate_qrcode": "Genera un codi QR",
+        "playlist_name": "Nom de la llista de reproducció"
     },
     "comment": {
         "pinned_by": "Fixat per {author}",
-        "user_disabled": "Comentaris deshabilitats en els paràmetres.",
-        "disabled": "El carregador ha desactivat els comentaris.",
-        "loading": "Carregant comentaris..."
+        "user_disabled": "Els comentaris s'han desactivat en els paràmetres.",
+        "disabled": "Qui va pujar el vídeo ha desactivat els comentaris.",
+        "loading": "S'estan carregant els comentaris..."
     },
     "preferences": {
-        "instance_name": "Nom de la Instància",
-        "instance_locations": "Ubicacións de la Instància",
+        "instance_name": "Nom de la instància",
+        "instance_locations": "Ubicacions de la instància",
         "has_cdn": "Té CDN?",
         "ssl_score": "Puntuació SSL",
         "version": "Versió",
-        "up_to_date": "Actualitzat?",
-        "registered_users": "Usuaris Registrats"
+        "up_to_date": "Actualitzada?",
+        "registered_users": "Usuaris registrats"
     },
     "video": {
         "watched": "Vist",
-        "sponsor_segments": "Segments de Patrocinadors",
-        "ratings_disabled": "Puntuacions Deshabilitades",
+        "sponsor_segments": "Segments de patrocinadors",
+        "ratings_disabled": "Puntuacions desactivades",
         "chapters": "Capítols",
-        "live": "{0} En Directe",
+        "live": "{0} en directe",
         "videos": "Vídeos",
         "views": "{views} visualitzacions",
         "shorts": "Curts",
         "all": "Tot",
-        "category": "Categoria"
+        "category": "Categoria",
+        "visibility": "Visibilitat",
+        "license": "Llicència",
+        "chapters_vertical": "Vertical",
+        "chapters_horizontal": "Horitzontal"
     },
     "search": {
-        "did_you_mean": "Volies dir: {0}?",
+        "did_you_mean": "Volíeu dir: {0}?",
         "all": "YouTube: Tot",
         "videos": "YouTube: Vídeos",
         "channels": "YouTube: Canals",
-        "playlists": "YouTube: Llistes de Reproducció",
+        "playlists": "YouTube: Llistes de reproducció",
         "music_songs": "YT Music: Cançons",
         "music_videos": "YT Music: Vídeos",
         "music_albums": "YT Music: Àlbums",
-        "music_playlists": "YT Music: Llistes de Reproducció"
+        "music_playlists": "YT Music: Llistes de reproducció",
+        "music_artists": "YT Music: Artistes"
     },
     "player": {
-        "watch_on": "Veure a {0}"
+        "watch_on": "Mostra a {0}",
+        "failed": "Ha fallat amb codi d'error {0}, vegeu els registres per a més informació"
     },
     "login": {
-        "username": "Nom d'Usuari",
-        "password": "Contrassenya"
+        "username": "Nom d'usuari",
+        "password": "Contrasenya",
+        "password_confirm": "Confirmeu la contrasenya",
+        "passwords_incorrect": "Les contrasenyes no coincideixen!"
     },
     "subscriptions": {
         "subscribed_channels_count": "Subscrit a: {0}"
@@ -179,9 +206,14 @@
     "info": {
         "preferences_note": "Nota: les preferències es desen a l'emmagatzematge local del navegador. Si elimineu les dades del navegador, es restabliran.",
         "page_not_found": "No s'ha torbat la pàgina",
-        "copied": "Copiat!",
+        "copied": "S'ha copiat!",
         "cannot_copy": "No es pot copiar!",
-        "local_storage": "Aquesta acció requereix emmagatzematge local, estan les cookies habilitades?",
-        "register_no_email_note": "Utilitzar un correu elextrònic com a usuari no és recomanable. Continuar de totes maneres?"
+        "local_storage": "Aquesta acció requereix localStorage. Es troben activades les galetes?",
+        "register_no_email_note": "Usar una adreça electrònica com a nom d'usuari no és recomanable. Voleu continuar de totes maneres?",
+        "hours": "{amount} hores",
+        "next_video_countdown": "Pròxim vídeo en {0}s",
+        "months": "{amount} mesos",
+        "weeks": "{amount} setmanes",
+        "days": "{amount} dies"
     }
 }

src/locales/cs.json

@@ -142,10 +142,11 @@
         "delete_automatically": "Automaticky odstranit po",
         "generate_qrcode": "Vygenerovat QR kód",
         "import_from_json_csv": "Importovat z JSON/CSV",
-        "download_frame": "Stáhnout snímek"
+        "download_frame": "Stáhnout snímek",
+        "instance_privacy_policy": "Ochrana údajů"
     },
     "player": {
-        "watch_on": "Sledovat na {0}",
+        "watch_on": "Zobrazit na {0}",
         "failed": "Akce se nezdařila. Chybový kód {0}, pro více informací viz protokol"
     },
     "comment": {

src/locales/de.json

@@ -124,7 +124,8 @@
         "enable_dearrow": "DeArrow verwenden",
         "generate_qrcode": "QR-Code generieren",
         "import_from_json_csv": "Aus JSON/CSV importieren",
-        "download_frame": "Einzelbild (Frame) downloaden"
+        "download_frame": "Einzelbild (Frame) downloaden",
+        "instance_privacy_policy": "Datenschutzerklärung"
     },
     "player": {
         "watch_on": "Auf {0} ansehen",

src/locales/en.json

@@ -18,7 +18,7 @@
         "dearrow": "DeArrow"
     },
     "player": {
-        "watch_on": "Watch on {0}",
+        "watch_on": "View on {0}",
         "failed": "Failed with error code {0}, see logs for more info"
     },
     "actions": {
@@ -132,6 +132,7 @@
         "status_page": "Status",
         "source_code": "Source code",
         "instance_donations": "Instance donations",
+        "instance_privacy_policy": "Privacy Policy",
         "reply_count": "{count} replies",
         "no_valid_playlists": "The file doesn't contain valid playlists!",
         "with_playlist": "Share with playlist",

src/locales/eo.json

@@ -146,7 +146,8 @@
         "enable_dearrow": "Ebligi DeArrow",
         "generate_qrcode": "Generi QR-kodon",
         "import_from_json_csv": "Importi el JSON/CSV",
-        "download_frame": "Elŝuti bildon"
+        "download_frame": "Elŝuti bildon",
+        "instance_privacy_policy": "Privateca politiko"
     },
     "video": {
         "chapters": "Sekcioj",

src/locales/es.json

@@ -155,7 +155,8 @@
         "enable_dearrow": "Activar DeArrow",
         "generate_qrcode": "Generar código QR",
         "import_from_json_csv": "Importar desde JSON/CSV",
-        "download_frame": "Descargar fotograma"
+        "download_frame": "Descargar fotograma",
+        "instance_privacy_policy": "Política de privacidad"
     },
     "titles": {
         "feed": "Contenido",

src/locales/gl.json

@@ -42,6 +42,53 @@
         "theme": "Decorado",
         "auto": "Auto",
         "light": "Claro",
-        "autoplay_video": "Reprodución automática"
+        "autoplay_video": "Reprodución automática",
+        "buffering_goal": "Tamaño do buffer (en segundos)",
+        "minimize_comments_default": "Por defecto minimizar os comentarios",
+        "import_from_json_csv": "Importar desde JSON/CSV",
+        "skip_outro": "Omitir créditos finais",
+        "skip_intro": "Omitir animación de entrada",
+        "auto_play_next_video": "Reproducir autom. seguinte vídeo",
+        "instance_selection": "Instancia",
+        "clear_history": "Limpar historial",
+        "loading": "A cargar...",
+        "minimize_description": "Minimizar descrición",
+        "skip_interaction": "Omitir Recordatorio para interactuar (Subscribirse)",
+        "filter": "Filtro",
+        "view_ssl_score": "Ver SSL Score",
+        "minimize_description_default": "Por defecto minimizar a descrición",
+        "language_selection": "Idioma",
+        "enable_lbry_proxy": "Activar Proxy para LBRY",
+        "donations": "Doar para o desenvolvemento",
+        "loop_this_video": "Poñer vídeo en bucle",
+        "hide_replies": "Agochar respostas",
+        "country_selection": "País",
+        "skip_self_promo": "Omitir autobombo",
+        "default_quality": "Calidade por defecto",
+        "show_more": "Mostrar máis",
+        "show_recommendations": "Mostrar recomendacións",
+        "minimize_recommendations": "Minimizar recomendacións",
+        "audio_only": "Só audio",
+        "disable_lbry": "Desactivar LBRY para Retransmisión",
+        "show_comments": "Mostrar comentarios",
+        "store_watch_history": "Gardar historial de visualizacións",
+        "no": "Non",
+        "yes": "Si",
+        "load_more_replies": "Cargar máis respostas",
+        "enabled_codecs": "Códecs activados (varios)",
+        "auto_display_captions": "Mostar autom. Subtítulos",
+        "minimize_comments": "Minimizar comentarios",
+        "skip_non_music": "Omitir música: Sección sen música",
+        "instances_list": "Lista de instancias",
+        "import_from_json": "Importar desde JSON",
+        "autoplay_next_countdown": "Conta atrás por defecto para o seguinte vídeo (en segundos)",
+        "default_homepage": "Inicio por defecto",
+        "remove_from_playlist": "Retirar da lista",
+        "search": "Buscar (Ctrl+K)",
+        "show_description": "Mostrar descrición",
+        "skip_preview": "Omitir vista previa/resumo",
+        "skip_highlight": "Omitir Destacado",
+        "export_to_json": "Exportar a JSON",
+        "add_to_playlist": "Engadir á lista"
     }
 }

src/locales/he.json

@@ -18,7 +18,7 @@
         "dearrow": "DeArrow"
     },
     "player": {
-        "watch_on": "לצפות ב־{0}",
+        "watch_on": "הצגה ב־{0}",
         "failed": "חל כשל עם קוד שגיאה {0}, מידע נוסף ביומנים"
     },
     "actions": {
@@ -146,7 +146,8 @@
         "enable_dearrow": "הפעלת DeArrow",
         "generate_qrcode": "יצירת קוד QR",
         "import_from_json_csv": "ייבוא מ־JSON/CSV",
-        "download_frame": "הורדת תמונית"
+        "download_frame": "הורדת תמונית",
+        "instance_privacy_policy": "מדיניות פרטיות"
     },
     "comment": {
         "pinned_by": "ננעץ על ידי {author}",

src/locales/hr.json

@@ -41,7 +41,7 @@
         "donations": "Donacije za razvoj",
         "auto_play_next_video": "Automatski reproduciraj idući video",
         "loop_this_video": "Ponavljaj ovaj video",
-        "import_from_json": "Uvezi iz JSON/CSV formata",
+        "import_from_json": "Uvezi iz JSON formata",
         "export_to_json": "Izvezi u JSON",
         "no": "Ne",
         "yes": "Da",
@@ -153,10 +153,14 @@
         "show_search_suggestions": "Prikaži prijedloge pretrage",
         "delete_automatically": "Automatski izbriši nakon",
         "enable_dearrow": "Aktiviraj DeArrow",
-        "generate_qrcode": "Generiraj QR kod"
+        "generate_qrcode": "Generiraj QR kod",
+        "import_from_json_csv": "Uvezi iz JSON/CSV formata",
+        "download_frame": "Preuzmi kadar",
+        "instance_privacy_policy": "Politika privatnosti"
     },
     "player": {
-        "watch_on": "Gledaj na {0}"
+        "watch_on": "Gledaj na {0}",
+        "failed": "Neuspjelo s greškom {0}. Pogledaj zapise za više informacija"
     },
     "titles": {
         "subscriptions": "Pretplate",

src/locales/id.json

@@ -18,7 +18,7 @@
         "dearrow": "DeArrow"
     },
     "player": {
-        "watch_on": "Tonton di {0}",
+        "watch_on": "Lihat di {0}",
         "failed": "Gagal dengan kode kesalahan {0}, lihat catatan untuk info lebih lanjut"
     },
     "actions": {
@@ -146,7 +146,8 @@
         "enable_dearrow": "Aktifkan DeArrow",
         "generate_qrcode": "Buat Kode QR",
         "import_from_json_csv": "Impor dari JSON/CSV",
-        "download_frame": "Unduh bingkai"
+        "download_frame": "Unduh bingkai",
+        "instance_privacy_policy": "Kebijakan Privasi"
     },
     "comment": {
         "pinned_by": "Dipasangi pin oleh {author}",

src/locales/ja.json

@@ -18,7 +18,8 @@
         "dearrow": "DeArrow"
     },
     "player": {
-        "watch_on": "{0}で視聴"
+        "watch_on": "{0}で視聴",
+        "failed": "失敗しエラーコード {0} が返りました。詳細はログに記録"
     },
     "actions": {
         "subscribe": "チャンネル登録 - {count}",
@@ -144,7 +145,9 @@
         "delete_automatically": "指定時間後に自動削除",
         "enable_dearrow": "DeArrow を使用",
         "generate_qrcode": "QRコードの生成",
-        "import_from_json_csv": "JSON/CSVから読み込む"
+        "import_from_json_csv": "JSON/CSVから読み込む",
+        "download_frame": "この画像を保存",
+        "instance_privacy_policy": "個人情報保護方針"
     },
     "comment": {
         "pinned_by": "{author} によって固定",

src/locales/nl.json

@@ -124,7 +124,8 @@
         "chapters_layout_mobile": "Mobiele lay-out voor hoofdstukken",
         "auto_display_captions": "Ondertiteling automatisch tonen",
         "import_from_json_csv": "Importeren uit JSON/CSV",
-        "download_frame": "Beeld downloaden"
+        "download_frame": "Beeld downloaden",
+        "instance_privacy_policy": "Privacybeleid"
     },
     "titles": {
         "register": "Registreren",
@@ -145,7 +146,7 @@
         "channel_groups": "Kanaal­groepen"
     },
     "player": {
-        "watch_on": "Kijken op {0}",
+        "watch_on": "Bekijken op {0}",
         "failed": "Mislukt met foutcode {0}, zie logboeken voor meer informatie"
     },
     "search": {

src/locales/oc.json

@@ -18,7 +18,8 @@
         "dearrow": "DeArrow"
     },
     "player": {
-        "watch_on": "Agachar sus {0}"
+        "watch_on": "Veire sus {0}",
+        "failed": "Fracàs amb lo còdi d’error {0}, consultat los jornals d’audit per mai d’informacions"
     },
     "actions": {
         "subscribe": "S’abonar - {count}",
@@ -142,7 +143,11 @@
         "show_search_suggestions": "Mostrar las suggestions de recèrcas",
         "chapters_layout_mobile": "Disposicion capítols sus mobil",
         "enable_dearrow": "Activar DeArrow",
-        "import_from_json_csv": "Importar d’un JSON/CSV"
+        "import_from_json_csv": "Importar d’un JSON/CSV",
+        "delete_automatically": "Suprimir automaticament aprèp",
+        "download_frame": "Telecargar fotograma",
+        "generate_qrcode": "Generar un còdi QR",
+        "instance_privacy_policy": "Politica de confidencialitat"
     },
     "preferences": {
         "instance_locations": "Localizacion de l’instància",
@@ -155,7 +160,9 @@
     },
     "login": {
         "username": "Nom d’utilizaire",
-        "password": "Senhal"
+        "password": "Senhal",
+        "password_confirm": "Confirmar lo senhal",
+        "passwords_incorrect": "Los senhals correspondon pas !"
     },
     "video": {
         "views": "{views} visualizacions",

src/locales/or.json

@@ -18,7 +18,8 @@
         "dearrow": "ଡି ତୀର"
     },
     "player": {
-        "watch_on": "{0} ରେ ଦେଖନ୍ତୁ"
+        "watch_on": "{0} ରେ ଦେଖନ୍ତୁ",
+        "failed": "ତ୍ରୁଟି ସଂକେତ {0} ସହିତ ବିଫଳ, ଅଧିକ ସୂଚନା ପାଇଁ ଲଗଗୁଡ଼ିକୁ ଦେଖନ୍ତୁ"
     },
     "actions": {
         "subscribe": "ସଦସ୍ୟତା - {count}",
@@ -67,7 +68,7 @@
         "instances_list": "ଉଦାହରଣ ତାଲିକା",
         "instance_selection": "ଇନଷ୍ଟାନ୍ସ",
         "yes": "ହଁ",
-        "import_from_json": "JSON / CSV ରୁ ଆମଦାନୀ କରନ୍ତୁ",
+        "import_from_json": "JSON ରୁ ଆମଦାନୀ କରନ୍ତୁ",
         "no": "ନାହିଁ",
         "export_to_json": "JSON କୁ ରପ୍ତାନି କରନ୍ତୁ",
         "loop_this_video": "ଏହି ଭିଡିଓକୁ ଲୁପ୍ କରନ୍ତୁ",
@@ -143,7 +144,10 @@
         "chapters_layout_mobile": "ମୋବାଇଲରେ ଅଧ୍ୟାୟ ବିନ୍ୟାସ",
         "auto_display_captions": "ଶୀର୍ଷକଗୁଡ଼ିକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଦର୍ଶାନ୍ତୁ",
         "playlist_description": "ପ୍ଲେଲିଷ୍ଟ ବର୍ଣ୍ଣନା",
-        "cancel": "ବାତିଲ କରନ୍ତୁ"
+        "cancel": "ବାତିଲ କରନ୍ତୁ",
+        "import_from_json_csv": "JSON/CSV ରୁ ଆମଦାନୀ କରନ୍ତୁ",
+        "download_frame": "ଫ୍ରେମକୁ ଆହରଣ କରନ୍ତୁ",
+        "instance_privacy_policy": "ଗୋପନୀୟତା ନୀତି"
     },
     "comment": {
         "loading": "ମନ୍ତବ୍ୟ ଲୋଡ୍ ହେଉଛି ...",

src/locales/pl.json

@@ -18,7 +18,7 @@
         "dearrow": "DeArrow"
     },
     "player": {
-        "watch_on": "Obejrzyj na {0}",
+        "watch_on": "Zobacz na {0}",
         "failed": "Niepowodzenie z powodu kodu błędu {0}, przejrzyj logi, aby uzyskać więcej informacji"
     },
     "actions": {
@@ -146,7 +146,8 @@
         "enable_dearrow": "Włącz DeArrow",
         "generate_qrcode": "Wygeneruj kod QR",
         "import_from_json_csv": "Import z pliku JSON/CSV",
-        "download_frame": "Pobierz klatkę"
+        "download_frame": "Pobierz klatkę",
+        "instance_privacy_policy": "Polityki prywatności"
     },
     "comment": {
         "pinned_by": "Przypięty przez {author}",

src/locales/pt.json

@@ -142,7 +142,8 @@
         "delete_automatically": "Eliminar automaticamente após",
         "generate_qrcode": "Gerar código QR",
         "import_from_json_csv": "Importar de JSON/CSV",
-        "download_frame": "Quadro de transferência"
+        "download_frame": "Quadro de transferência",
+        "instance_privacy_policy": "Política de privacidade"
     },
     "preferences": {
         "instance_name": "Nome da instância",

src/locales/pt_BR.json

@@ -81,6 +81,7 @@
         "status_page": "Estado",
         "source_code": "Código fonte",
         "instance_donations": "Doações de instâncias",
+        "instance_privacy_policy": "Política de Privacidade",
         "instance_auth_selection": "Instância de Autenticação",
         "clone_playlist_success": "Clonada com sucesso!",
         "download_as_txt": "Baixar como .txt",

src/locales/ru.json

@@ -18,7 +18,8 @@
         "dearrow": "DeArrow"
     },
     "player": {
-        "watch_on": "Смотреть на {0}"
+        "watch_on": "Смотреть на {0}",
+        "failed": "Ошибка с кодом {0}, откройте логи, чтобы узнать больше"
     },
     "actions": {
         "subscribe": "Подписаться - {count}",
@@ -144,7 +145,9 @@
         "delete_automatically": "Автоматическое удаление после",
         "enable_dearrow": "Включить DeArrow",
         "generate_qrcode": "Сгенерировать QR Код",
-        "import_from_json_csv": "Импорт из JSON/CSV"
+        "import_from_json_csv": "Импорт из JSON/CSV",
+        "download_frame": "Сделать скриншот видео",
+        "instance_privacy_policy": "Политика конфиденциальности"
     },
     "comment": {
         "pinned_by": "Закреплено пользователем {author}",

src/locales/sv.json

@@ -142,7 +142,8 @@
         "skip_button_only": "Visa hoppa över-knapp",
         "skip_automatically": "Automatiskt",
         "download_frame": "Ladda ner bildruta",
-        "import_from_json_csv": "Importera från JSON/CSV"
+        "import_from_json_csv": "Importera från JSON/CSV",
+        "instance_privacy_policy": "Sekretesspolicy"
     },
     "player": {
         "watch_on": "Titta på {0}",

src/locales/tr.json

@@ -124,10 +124,11 @@
         "enable_dearrow": "DeArrow'u Etkinleştir",
         "generate_qrcode": "QR Kodu Oluştur",
         "import_from_json_csv": "JSON/CSV Dosyasından İçe Aktar",
-        "download_frame": "Kareyi indir"
+        "download_frame": "Kareyi indir",
+        "instance_privacy_policy": "Gizlilik Politikası"
     },
     "player": {
-        "watch_on": "{0} Üzerinde İzle",
+        "watch_on": "{0} üzerinde görüntüle",
         "failed": "{0} hata kodu ile başarısız oldu, daha fazla bilgi için günlüklere bakın"
     },
     "titles": {

src/locales/uk.json

@@ -1,6 +1,6 @@
 {
     "player": {
-        "watch_on": "Дивитися на {0}",
+        "watch_on": "Переглянути на {0}",
         "failed": "Помилка з кодом {0}, дивіться журнали для отримання додаткової інформації"
     },
     "login": {
@@ -134,7 +134,8 @@
         "delete_automatically": "Видаляти автоматично після",
         "generate_qrcode": "Згенерувати QR-код",
         "import_from_json_csv": "Імпортувати з JSON/CSV",
-        "download_frame": "Завантажити кадр"
+        "download_frame": "Завантажити кадр",
+        "instance_privacy_policy": "Політика конфіденційності"
     },
     "titles": {
         "register": "Реєстрація",

src/locales/zh_Hans.json

@@ -124,7 +124,8 @@
         "enable_dearrow": "启用 DeArrow",
         "generate_qrcode": "生成二维码",
         "import_from_json_csv": "从 JSON/CSV 文件导入",
-        "download_frame": "下载视频帧"
+        "download_frame": "下载视频帧",
+        "instance_privacy_policy": "隐私政策"
     },
     "video": {
         "sponsor_segments": "赞助商部分",

src/main.js

@@ -58,9 +58,10 @@ import router from "@/router/router.js";
 import "uno.css";
 
 /*EFY UI*/
-import "../public/efy/efy.css";
+// import "../node_modules/efy/efy.css";
+import "efy/efy.css";
 import "./piped.css";
-import "../public/efy/efy.js";
+import "efy/efy.js";
 import "./piped.js";
 
 import App from "./App.vue";

src/piped.css

@@ -1,6 +1,8 @@
-/*Global*/ @font-face {font-family: 'nunito'; src: url('../efy/nunito.woff2') format('truetype'); font-display: swap} @font-face {font-family: 'nunito'; src: url('../efy/nunito_bold.woff2') format('truetype'); font-weight: bold; font-display: swap}
+/*Global*/ @font-face {font-family: 'nunito'; src: url('../node_modules/efy/nunito.woff2') format('woff2'); font-weight: normal}
+@font-face {font-family: 'nunito'; src: url('../node_modules/efy/nunito_bold.woff2') format('woff2'); font-weight: bold}
 :root {
-    --efy_color: 0 84% 60%, 0 72% 51%; /*No JS Fallback*/ --efy_color1_var: 0 84% 60%; --efy_color2_var: 0 72% 51%;
+    --efy_color: 0.64 0.2 25, 0.6 0.2 30;
+    /*No JS Fallback*/ --efy_color1_var: 0.64 0.2 25; --efy_color2_var: 0.6 0.2 30;
     --efy_color_angle: 165deg;
     --efy_radius: 12rem;
     --efy_border_size: 1.5rem;
@@ -8,18 +10,20 @@
     --efy_sidebar_button: right_middle, off;
     --efy_body_width: 100%;
      --efy_body_padding: 15rem;
-    --efy_font_family: 'nunito', sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
-    --efy_audio_folder: ./efy/audio;
-    --efy_folder: ./efy;
+    --efy_font_family: 'nunito', sans-serif, emoji;
+    --efy_folder: ../node_modules/efy;
+    --efy_audio_folder: ../node_modules/efy/audio;
+    --efy_lang_folder: ../node_modules/efy/lang;
     --efy_lang_code: en;
-    --efy_modules: efy_quick, efy_mode, efy_filters, efy_backup, efy_accessibility, efy_audio, efy_language, efy_extra;
+    --efy_modules: efy_quick, efy_filters, efy_backup, efy_accessibility, efy_audio, efy_language, efy_extra;
     --efy_protocol: http;
 }
 /*Default Mode*/ [efy_mode=default] {
     --efy_scheme: dark;
-    --efy_bg_var: 0 0% 100%;
-    --efy_bg: hsl(0 0% 6%);
-    --efy_text: hsl(0 0% 86%);
+    --efy_bg_var: 1 0 0;
+    --efy_bg_var2: 0 0 0;
+    --efy_bg: oklch(0.15 0 0);
+    --efy_text: oklch(.9 0 0);
 } /*Your code starts bellow*/
 
 /*BG 1*/ .comment, .pp-mobile-nav a, .pp-mobile-nav p, .suggestion-selected, .pp-chapters .chapter:not(.pp-chapter-active, .chapter:hover), .pp-chapters [title=chapters] {background: var(--efy_bg1)}
@@ -47,7 +51,7 @@
 
 /*Bellow*/ .pp-watch-bellow-options {margin-top: 15rem}
 .pp-watch-buttons {flex-wrap: wrap; gap: var(--efy_gap0)}
-.pp-watch-buttons .btn {padding: 6rem 15rem; border: 0; color: var(--efy_text2); min-height: var(--efy_ratio_width); max-height: var(--efy_ratio_width); place-self: center; place-content: center}
+.pp-watch-buttons .btn {padding: 6rem 15rem; border: 0; color: var(--efy_text2); min-height: var(--efy_size); max-height: var(--efy_size); place-self: center; place-content: center}
 .pp-bellow-video, .pp-bellow-video .flex {gap:10rem}
 .pp-likes .flex {gap: 0rem}
 
@@ -133,8 +137,8 @@ table {margin-top: 0}
     border: 0;
 }
 .pp-square {
-    width: var(--efy_ratio_width)!important;
-    height: var(--efy_ratio_width);
+    width: var(--efy_size)!important;
+    height: var(--efy_size);
 }
 .video-tags {
     display: flex;

src/piped.js

@@ -1,32 +1,41 @@
-import {$, $all, $add, $event, $ready} from '../public/efy/efy.js';
+import {$, $all, $$, $add, $event, $ready} from '../node_modules/efy/efy.js';
 
 $ready('#efy_sidebar', ()=>{
     $add('div', {id: 'piped_efy_module'}, [], $('#efy_sidebar'), 'afterbegin');
 
     /*Custom Menu*/ $add('div', {id: 'custom_sidebar_menu'}, [], $('#efy_modules'));
-    for (let a = ['preferences', 'history', 'playlists', 'feed'], b = ['Preferences', 'History', 'Playlists', 'Feed'], c = $('#custom_sidebar_menu'), i = 0; i < a.length; i++){ $add('a', {href: `./${a[i]}`}, [b[i]], c)}
+    for (let a = ['preferences', 'history', 'playlists', 'feed'],
+    b = ['Preferences', 'History', 'Playlists', 'Feed'],
+    c = $('#custom_sidebar_menu'), i = 0; i < a.length; i++){
+        $add('a', {href: `./${a[i]}`}, [b[i]], c)
+    }
 
     /*Custom Settings*/ $add('details', {id: 'piped_style'}, [
-        $add('summary', {}, [ $add('i', {efy_icon: 'dots'}), 'Piped Style']),
-        $add('div', {efy_tabs: 'piped_style'})
+        ['summary', {}, [['i', {efy_icon: 'dots'}], 'Piped Style']],
+        ['div', {efy_tabs: 'piped_style'}, [['div', {class: 'efy_tabs'}]]]
     ], $('#efy_modules'));
 
     $add('mark', {efy_lang: 'alpha'}, [], $('#piped_style > summary'), 'beforeend');
-    /*Tabs*/ for (let a = ['option1', 'option2', 'option3'], b = ['Tab 1', 'Tab 2', 'Tab 3'], c = $('[efy_tabs=piped_style]'), i = 0; i < a.length; i++) {
-        $add('button', {efy_tab: a[i]}, [b[i]], c);
-    }
-    for (let a = ['option1', 'option2', 'option3'], c = $('[efy_tabs=piped_style]'), i = 0; i < a.length; i++) {
-        $add('div', {efy_content: a[i], efy_select: '', id: `efy_${a[i]}`}, [], c)
-    }
-    /*Active*/ for (let a = ['[efy_tab=option1]', '[efy_content=option1]'], b = '[efy_tabs=piped_style] > ', i = 0; i < a.length; i++){
-        $(b + a[i]).setAttribute('efy_active', '')
+    /*Tabs*/ for (let a = ['comments', 'captions'], b = ['Comments', 'Captions'],
+    c = $('[efy_tabs=piped_style]'), i = 0; i < a.length; i++) {
+        const active = (a[i] === 'comments') ? {efy_active: ''} : null;
+        $add('button', {efy_tab: a[i], ...active}, [b[i]], $$(c, '.efy_tabs'));
+        $add('div', {efy_content: a[i], efy_select: '', id: `efy_${a[i]}`, ...active}, [], c);
     }
 
-    /*Tab1*/ for (let a = 'comments_full captions-trans captions-solid'.split(' '), b = ['Comments - Full Width', 'Captions - No Background', 'Captions - Black Background'], c = $('[efy_tabs=piped_style] [efy_content=option1]'), i = 0; i < a.length; i++) {
-        $add('input', {type: 'checkbox', name: 'piped_style_option1', id: `piped_style_${a[i]}`}, [], c);
+    /*Comments*/ for (let a = 'comments_full comments_nobg'.split(' '), b = ['Full Width', 'No Background'],
+    c = $('[efy_tabs=piped_style] [efy_content="comments"]'), i = 0; i < a.length; i++) {
+        $add('input', {type: 'checkbox', name: 'piped_style_comments', id: `piped_style_${a[i]}`}, [], c);
         $add('label', {for: `piped_style_${a[i]}`}, [b[i]], c);
     }
-    /*Comments & Captions*/ for (let a = ['comments_full', 'captions-trans', 'captions-solid'], b = ['.pp-comments', '.shaka-text-container', '.shaka-text-container'], c = ['pp-full-width', 'pp-trans', 'pp-solid'], i = 0; i < a.length; i++) {
+    /*Captions*/ for (let a = 'captions-trans captions-solid'.split(' '), b = ['No Background', 'Black Background'],
+    c = $('[efy_tabs=piped_style] [efy_content="captions"]'), i = 0; i < a.length; i++) {
+        $add('input', {type: 'checkbox', name: 'piped_style_captions', id: `piped_style_${a[i]}`}, [], c);
+        $add('label', {for: `piped_style_${a[i]}`}, [b[i]], c);
+    }
+    /*Comments & Captions*/ for (let a = ['comments_full', 'comments_nobg', 'captions-trans', 'captions-solid'],
+    b = ['.pp-comments', '.pp-comments', '.shaka-text-container', '.shaka-text-container'],
+    c = ['pp-full-width', 'pp-no-bg', 'pp-trans', 'pp-solid'], i = 0; i < a.length; i++) {
         $event($(`#piped_style_${a[i]}`), 'click', ()=>{
             $all(b[i]).forEach( (e)=>{ e.classList.toggle(c[i]) })
         })

vite.config.js

@@ -73,6 +73,6 @@ export default defineConfig({
     },
     build: {
         sourcemap: true,
-        cssMinify: "lightningcss",
+        // cssMinify: "lightningcss",
     },
 });