refactor(JProgressCircular): make accessibility text translatable

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
jellyfin · Jan 28, 2025 · 3631230 · 3631230
1 parent dd02404
commit 3631230
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
@@ -161,6 +161,7 @@
   "liked": "Liked",
   "liveTv": "Live TV & DVR",
   "liveTvSettingsDescription": "Manage TV tuners, guide data providers and DVR settings",
+  "loading": "Loading...",
   "localFontsPermissionWarning": "Access to the local fonts permission is required to select a font.",
   "login": "Login",
   "loginAs": "Login as {name}",
@@ -259,6 +260,7 @@
   "parentalRatings": "Parental Ratings",
   "password": "Password",
   "people": "People",
+  "percentCompleted": "{value}% completed ",
   "person": "Person",
   "photos": "Photos",
   "play": "Play",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json
@@ -34,6 +34,7 @@
     "@skirtle/vue-vnode-utils": "0.2.0",
     "@vueuse/core": "12.5.0",
     "comlink": "4.4.2",
-    "vue": "3.5.13"
+    "vue": "3.5.13",
+    "vue-i18n": "9.14.2"
   }
 }
diff --git a/packages/ui-toolkit/src/components/JProgressCircular.vue b/packages/ui-toolkit/src/components/JProgressCircular.vue
@@ -14,7 +14,7 @@
     aria-valuemin="0"
     aria-valuemax="100"
     :aria-valuenow="indeterminate ? undefined : normalizedValue"
-    :aria-valuetext="indeterminate ? 'Cargando...' : `${normalizedValue}% completado`"
+    :aria-valuetext="indeterminate ? t('loading') : t('percentCompleted', { value: normalizedValue })"
     v-bind="getBaseProps($attrs, false)">
     <circle
       class="j-progress-circular--underlay uno-stroke-current uno-z-1"
@@ -32,7 +32,7 @@
       class="uno-fill-current j-progress-circular--text"
       dominant-baseline="middle"
       text-anchor="middle">
-      <template v-if="$slots.default">
+      <template v-if="$slots.default?.({}).length">
         <slot />
       </template>
       <template v-else>
@@ -59,6 +59,7 @@ const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT;
 </script>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import { clamp, toPx } from '#/util/helpers';
 import { getBaseProps } from '#/util/props';
@@ -74,6 +75,7 @@ const { indeterminate, innerProgress, value = 0 } = defineProps<{
 
 const normalizedValue = computed(() => clamp(value, 0, 100));
 const strokeDashoffset = computed(() => toPx(CIRCUMFERENCE * (1 - normalizedValue.value / 100)));
+const { t } = useI18n();
 </script>
 
 <style scoped>