feat(web): video player i18n

Author: meesfrensel

i18n/de.json

@@ -1518,6 +1518,27 @@
   "marked_all_as_read": "Alle als gelesen markiert",
   "matches": "Treffer",
   "matching_assets": "Passende Dateien",
+  "media_chrome": {
+    "decode_error": "Dekodierungsfehler",
+    "enter_fullscreen_mode": "Vollbildmodus aktivieren",
+    "exit_fullscreen_mode": "Vollbildmodus beenden",
+    "media_error_description": "Ein Medienfehler hat die Wiedergabe abgebrochen. Das Medium könnte beschädigt sein oder Ihr Browser unterstützt dieses Format nicht.",
+    "mute": "Stumm schalten",
+    "network_error": "Netzwerkfehler",
+    "network_error_description": "Ein Netzwerkfehler hat dazu geführt, dass der Medien-Download fehlgeschlagen ist.",
+    "not_supported_error": "Quelle nicht unterstützt",
+    "not_supported_error_description": "Ein nicht unterstützter Fehler ist aufgetreten. Der Server oder das Netzwerk ist fehlgeschlagen, oder Ihr Browser unterstützt dieses Format nicht.",
+    "playback_rate": "Wiedergabegeschwindigkeit",
+    "playback_rate_current": "aktuelle Wiedergabegeschwindigkeit",
+    "playback_rate_value": "Wiedergabegeschwindigkeit {playbackRate}",
+    "playback_time": "Wiedergabezeit",
+    "second": "Sekunde",
+    "seconds": "Sekunden",
+    "time_value_remaining": "{time} verbleibend",
+    "time_value_of_total_time": "{currentTime} von {totalTime}",
+    "unmute": "Stummschaltung aufheben",
+    "volume": "Lautstärke"
+  },
   "media_type": "Medientyp",
   "memories": "Erinnerungen",
   "memories_all_caught_up": "Alles aufgeholt",

i18n/en.json

@@ -1523,6 +1523,27 @@
   "marked_all_as_read": "Marked all as read",
   "matches": "Matches",
   "matching_assets": "Matching Assets",
+  "media_chrome": {
+    "decode_error": "Decode error",
+    "enter_fullscreen_mode": "Enter fullscreen mode",
+    "exit_fullscreen_mode": "Exit fullscreen mode",
+    "media_error_description": "A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.",
+    "mute": "Mute",
+    "network_error": "Network error",
+    "network_error_description": "A network error caused the media download to fail.",
+    "not_supported_error": "Source Not Supported",
+    "not_supported_error_description": "An unsupported error occurred. The server or network failed, or your browser does not support this format.",
+    "playback_rate": "Playback rate",
+    "playback_rate_current": "current playback rate",
+    "playback_rate_value": "Playback rate {playbackRate}",
+    "playback_time": "playback time",
+    "second": "second",
+    "seconds": "seconds",
+    "time_value_remaining": "{time} remaining",
+    "time_value_of_total_time": "{currentTime} of {totalTime}",
+    "unmute": "Unmute",
+    "volume": "volume"
+  },
   "media_type": "Media type",
   "memories": "Memories",
   "memories_all_caught_up": "All caught up",
@@ -1761,7 +1782,6 @@
   "play_original_video": "Play original video",
   "play_original_video_setting_description": "Prefer playback of original videos rather than transcoded videos. If original asset is not compatible it may not playback correctly.",
   "play_transcoded_video": "Play transcoded video",
-  "playback_speed": "Playback speed",
   "please_auth_to_access": "Please authenticate to access",
   "port": "Port",
   "preferences_settings_subtitle": "Manage the app's preferences",

i18n/es.json

@@ -1518,6 +1518,27 @@
   "marked_all_as_read": "Todos marcados como leídos",
   "matches": "Coincidencias",
   "matching_assets": "Recursos coincidentes",
+  "media_chrome": {
+    "decode_error": "Error de decodificación",
+    "enter_fullscreen_mode": "Entrar en modo pantalla completa",
+    "exit_fullscreen_mode": "Salir del modo pantalla completa",
+    "media_error_description": "Un error de medios causó la interrupción de la reproducción. El contenido podría estar dañado o tu navegador no admite este formato.",
+    "mute": "Silenciar",
+    "network_error": "Error de red",
+    "network_error_description": "Un error de red causó la falla en la descarga del contenido.",
+    "not_supported_error": "Fuente no compatible",
+    "not_supported_error_description": "Ocurrió un error de incompatibilidad. El servidor o la red fallaron, o tu navegador no admite este formato.",
+    "playback_rate": "Velocidad de reproducción",
+    "playback_rate_current": "velocidad de reproducción actual",
+    "playback_rate_value": "Velocidad de reproducción {playbackRate}",
+    "playback_time": "tiempo de reproducción",
+    "second": "segundo",
+    "seconds": "segundos",
+    "time_value_remaining": "{time} restante",
+    "time_value_of_total_time": "{currentTime} de {totalTime}",
+    "unmute": "Reactivar sonido",
+    "volume": "volumen"
+  },
   "media_type": "Tipo de medio",
   "memories": "Recuerdos",
   "memories_all_caught_up": "Puesto al día",

i18n/fr.json

@@ -1518,6 +1518,27 @@
   "marked_all_as_read": "Tout a été marqué comme lu",
   "matches": "Correspondances",
   "matching_assets": "Médias correspondants",
+  "media_chrome": {
+    "decode_error": "Erreur de décodage",
+    "enter_fullscreen_mode": "Mettre en mode plein écran",
+    "exit_fullscreen_mode": "Quitter le mode plein écran",
+    "media_error_description": "Une erreur de média a provoqué l’interruption de la lecture. Le média peut être corrompu ou votre navigateur ne prend pas en charge ce format.",
+    "mute": "Désactiver le son",
+    "network_error": "Erreur réseau",
+    "network_error_description": "Une erreur réseau a causé l’échec du téléchargement du média.",
+    "not_supported_error": "Source non supportée",
+    "not_supported_error_description": "Une erreur non supportée s’est produite. Le serveur ou le réseau a échoué, ou votre navigateur ne prend pas en charge ce format.",
+    "playback_rate": "Taux de lecture",
+    "playback_rate_current": "taux de lecture actuel",
+    "playback_rate_value": "Taux de lecture {playbackRate}",
+    "playback_time": "durée de lecture",
+    "second": "seconde",
+    "seconds": "secondes",
+    "time_value_remaining": "{time} restant",
+    "time_value_of_total_time": "{currentTime} sur {totalTime}",
+    "unmute": "Activer le son",
+    "volume": "volume"
+  },
   "media_type": "Type de média",
   "memories": "Souvenirs",
   "memories_all_caught_up": "Vous avez tout vu",

i18n/pt.json

@@ -1518,6 +1518,27 @@
   "marked_all_as_read": "Tudo marcado como lido",
   "matches": "Correspondências",
   "matching_assets": "Conteúdos coincidentes",
+  "media_chrome": {
+    "decode_error": "Erro de decodificação",
+    "enter_fullscreen_mode": "Entrar no modo de tela cheia",
+    "exit_fullscreen_mode": "Sair do modo de tela cheia",
+    "media_error_description": "Um erro de mídia fez com que a reprodução fosse interrompida. O conteúdo pode estar corrompido ou seu navegador não suporta este formato.",
+    "mute": "Silenciar",
+    "network_error": "Erro de rede",
+    "network_error_description": "Um erro de rede causou a falha no download do conteúdo.",
+    "not_supported_error": "Fonte não suportada",
+    "not_supported_error_description": "Ocorreu um erro de incompatibilidade. O servidor ou a rede falharam, ou seu navegador não suporta este formato.",
+    "playback_rate": "Taxa de reprodução",
+    "playback_rate_current": "taxa de reprodução atual",
+    "playback_rate_value": "Taxa de reprodução {playbackRate}",
+    "playback_time": "tempo de reprodução",
+    "second": "segndo",
+    "seconds": "segundos",
+    "time_value_remaining": "{time} restante",
+    "time_value_of_total_time": "{currentTime} de {totalTime}",
+    "unmute": "Ativar som",
+    "volume": "volume"
+  },
   "media_type": "Tipo de média",
   "memories": "Memórias",
   "memories_all_caught_up": "Finalizamos por hoje",

web/src/lib/components/asset-viewer/VideoNativeViewer.svelte

@@ -4,7 +4,7 @@
   import { assetViewerFadeDuration } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { castManager } from '$lib/managers/cast-manager.svelte';
-  import { autoPlayVideo, loopVideo as loopVideoPreference } from '$lib/stores/preferences.store';
+  import { autoPlayVideo, lang, loopVideo as loopVideoPreference } from '$lib/stores/preferences.store';
   import { getAssetMediaUrl, getAssetPlaybackUrl } from '$lib/utils';
   import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
   import { Icon, LoadingSpinner } from '@immich/ui';
@@ -166,6 +166,7 @@
       <!-- dir=ltr based on https://github.com/videojs/video.js/issues/949 -->
       <media-controller
         dir="ltr"
+        lang={$lang}
         nohotkeys
         class="dark h-full max-w-full"
         style:aspect-ratio={aspectRatio}
@@ -194,14 +195,14 @@
         ></video>
 
         {#if extendedControls}
-          <media-settings-menu hidden anchor="auto" class="w-3xs rounded-xl border border-light-300 shadow-sm">
+          <media-settings-menu hidden anchor="auto" class="min-w-3xs rounded-xl border border-light-300 shadow-sm">
             <Icon slot="checked-indicator" icon={mdiCheck} class="m-2" />
             <media-settings-menu-item class="mx-1 rounded-lg p-1 ps-2">
-              {$t('playback_speed')}
+              {$t('media_chrome.playback_rate')}
               <Icon slot="suffix" icon={mdiChevronRight} class="m-2" />
               <media-playback-rate-menu slot="submenu" hidden rates="0.5 1 1.5 2">
                 <Icon slot="back-icon" icon={mdiChevronLeft} class="m-2" />
-                <span slot="title">{$t('playback_speed')}</span>
+                <span slot="title">{$t('media_chrome.playback_rate')}</span>
               </media-playback-rate-menu>
             </media-settings-menu-item>
           </media-settings-menu>

web/src/routes/+layout.svelte

@@ -13,7 +13,7 @@
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import ServerRestartingModal from '$lib/modals/ServerRestartingModal.svelte';
   import { Route } from '$lib/route';
-  import { locale } from '$lib/stores/preferences.store';
+  import { lang, locale } from '$lib/stores/preferences.store';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '$lib/stores/websocket';
   import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
@@ -35,6 +35,8 @@
     toastManager,
     TooltipProvider,
   } from '@immich/ui';
+  import { En } from 'media-chrome/lang/en';
+  import { addTranslation } from 'media-chrome/utils/i18n';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { get } from 'svelte/store';
@@ -73,6 +75,47 @@
       save: $t('save'),
       supporter: $t('supporter'),
     });
+
+    addTranslation($lang, {
+      ...En,
+      'Enter fullscreen mode': $t('media_chrome.enter_fullscreen_mode'),
+      'Exit fullscreen mode': $t('media_chrome.exit_fullscreen_mode'),
+      Mute: $t('media_chrome.mute'),
+      Unmute: $t('media_chrome.unmute'),
+      Play: $t('play'),
+      Pause: $t('pause'),
+      'Playback rate': $t('media_chrome.playback_rate'),
+      'Playback rate {playbackRate}': $t('media_chrome.playback_rate_value'),
+      Settings: $t('settings'),
+      volume: $t('media_chrome.volume'),
+      'current playback rate': $t('media_chrome.playback_rate_current'),
+      'playback time': $t('media_chrome.playback_time'),
+      settings: $t('settings'),
+      play: $t('play'),
+      pause: $t('pause'),
+      mute: $t('media_chrome.mute'),
+      unmute: $t('media_chrome.unmute'),
+      'enter fullscreen mode': $t('media_chrome.enter_fullscreen_mode'),
+      'exit fullscreen mode': $t('media_chrome.exit_fullscreen_mode'),
+
+      'Network Error': $t('media_chrome.network_error'),
+      'Decode Error': $t('media_chrome.decode_error'),
+      'Source Not Supported': $t('media_chrome.not_supported_error'),
+      'A network error caused the media download to fail.': $t('media_chrome.network_error_description'),
+      'A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.':
+        $t('media_chrome.media_error_description'),
+      'An unsupported error occurred. The server or network failed, or your browser does not support this format.': $t(
+        'media_chrome.not_supported_error_description',
+      ),
+      hour: $t('hour'),
+      hours: $t('hours'),
+      minute: $t('minute'),
+      minutes: $t('minutes'),
+      second: $t('media_chrome.second'),
+      seconds: $t('media_chrome.seconds'),
+      '{time} remaining': $t('media_chrome.time_value_remaining'),
+      '{currentTime} of {totalTime}': $t('media_chrome.time_value_of_total_time'),
+    });
   });
 
   $effect(() => setLocale($locale));