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

2024-07-31 16:06:22 +00:00 · 2024-03-01 15:02:54 +02:00 · 2024-03-01 15:02:54 +02:00 · a77575b55a
commit a77575b55a
parent bba6305103 23c0dc50bf
39 changed files with 1062 additions and 933 deletions
--- a/.github/workflows/docker-build.yml
+++ b/.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
--- a/package.json
+++ b/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": [
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/efy
+++ b/public/efy
@ -1 +0,0 @@
-Subproject commit 3a0d7c4eded28167fc29173407889db62f8ebce4
--- a/src/App.vue
+++ b/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;
--- a/src/components/CollapsableText.vue
+++ b/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)));
        },
    },
 };
--- a/src/components/CommentItem.vue
+++ b/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, {
--- a/src/components/FooterComponent.vue
+++ b/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;
            });
        },
    },
--- a/src/components/NavBar.vue
+++ b/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" />
--- a/src/components/SubscriptionsPage.vue
+++ b/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"
--- a/src/components/VideoPlayer.vue
+++ b/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))`,
                    },
                };

--- a/src/components/WatchVideo.vue
+++ b/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;
--- a/src/locales/ar.json
+++ b/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": "المقاطع الإعلانية",
--- a/src/locales/ca.json
+++ b/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"
    }
 }
--- a/src/locales/cs.json
+++ b/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": {
--- a/src/locales/de.json
+++ b/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",
--- a/src/locales/en.json
+++ b/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",
--- a/src/locales/eo.json
+++ b/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",
--- a/src/locales/es.json
+++ b/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",
--- a/src/locales/gl.json
+++ b/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"
    }
 }
--- a/src/locales/he.json
+++ b/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}",
--- a/src/locales/hr.json
+++ b/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",
--- a/src/locales/id.json
+++ b/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}",
--- a/src/locales/ja.json
+++ b/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} によって固定",
--- a/src/locales/nl.json
+++ b/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": "Kanaalgroepen"
    },
    "player": {
-        "watch_on": "Kijken op {0}",
+        "watch_on": "Bekijken op {0}",
        "failed": "Mislukt met foutcode {0}, zie logboeken voor meer informatie"
    },
    "search": {
--- a/src/locales/oc.json
+++ b/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",
--- a/src/locales/or.json
+++ b/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": "ମନ୍ତବ୍ୟ ଲୋଡ୍ ହେଉଛି ...",
--- a/src/locales/pl.json
+++ b/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}",
--- a/src/locales/pt.json
+++ b/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",
--- a/src/locales/pt_BR.json
+++ b/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",
--- a/src/locales/ru.json
+++ b/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}",
--- a/src/locales/sv.json
+++ b/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}",
--- a/src/locales/tr.json
+++ b/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": {
--- a/src/locales/uk.json
+++ b/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": "Реєстрація",
--- a/src/locales/zh_Hans.json
+++ b/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": "赞助商部分",
--- a/src/main.js
+++ b/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";
--- a/src/piped.css
+++ b/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;
--- a/src/piped.js
+++ b/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]) })
        })
--- a/vite.config.js
+++ b/vite.config.js
@ -73,6 +73,6 @@ export default defineConfig({
    },
    build: {
        sourcemap: true,
-        cssMinify: "lightningcss",
+        // cssMinify: "lightningcss",
    },
 });
				`@ -1 +0,0 @@`
				`Subproject commit 3a0d7c4eded28167fc29173407889db62f8ebce4`