ts-video-player 0.1.6 → 0.1.8

package/src/core/i18n.ts

@@ -74,6 +74,31 @@ export interface TranslationStrings {
   close: string
   menu: string
   back: string
+  // The controls' own names and what a screen reader hears (elements/*)
+  seek: string
+  playbackRate: string
+  airPlayPlay: string
+  remotePlayback: string
+  videoPlayer: string
+  videoRole: string
+  playTitle: string
+  audio: string
+  defaultTrack: string
+  playing: string
+  paused: string
+  muted: string
+  volumeLevel: string
+  ended: string
+  enteredFullscreen: string
+  exitedFullscreen: string
+  errorMessage: string
+  timeOf: string
+  hourOne: string
+  hourOther: string
+  minuteOne: string
+  minuteOther: string
+  secondOne: string
+  secondOther: string
 }
 
 export type TranslationKey = keyof TranslationStrings
@@ -157,6 +182,30 @@ export const englishStrings: TranslationStrings = {
   close: 'Close',
   menu: 'Menu',
   back: 'Back',
+  seek: 'Seek',
+  playbackRate: 'Playback speed {rate}x',
+  airPlayPlay: 'Play on AirPlay',
+  remotePlayback: 'Play on another device',
+  videoPlayer: 'Video player',
+  videoRole: 'video player',
+  playTitle: 'Play {title}',
+  audio: 'Audio',
+  defaultTrack: 'Default',
+  playing: 'Playing',
+  paused: 'Paused',
+  muted: 'Muted',
+  volumeLevel: 'Volume {percent}%',
+  ended: 'Playback ended',
+  enteredFullscreen: 'Entered fullscreen',
+  exitedFullscreen: 'Exited fullscreen',
+  errorMessage: 'Error: {message}',
+  timeOf: '{current} of {duration}',
+  hourOne: '{n} hour',
+  hourOther: '{n} hours',
+  minuteOne: '{n} minute',
+  minuteOther: '{n} minutes',
+  secondOne: '{n} second',
+  secondOther: '{n} seconds',
 }
 
 export const spanishStrings: TranslationStrings = {
@@ -209,6 +258,30 @@ export const spanishStrings: TranslationStrings = {
   close: 'Cerrar',
   menu: 'Menú',
   back: 'Volver',
+  seek: 'Buscar',
+  playbackRate: 'Velocidad de reproducción {rate}x',
+  airPlayPlay: 'Reproducir con AirPlay',
+  remotePlayback: 'Reproducir en otro dispositivo',
+  videoPlayer: 'Reproductor de vídeo',
+  videoRole: 'reproductor de vídeo',
+  playTitle: 'Reproducir {title}',
+  audio: 'Audio',
+  defaultTrack: 'Predeterminado',
+  playing: 'Reproduciendo',
+  paused: 'En pausa',
+  muted: 'Silenciado',
+  volumeLevel: 'Volumen {percent}%',
+  ended: 'Reproducción finalizada',
+  enteredFullscreen: 'Pantalla completa activada',
+  exitedFullscreen: 'Pantalla completa desactivada',
+  errorMessage: 'Error: {message}',
+  timeOf: '{current} de {duration}',
+  hourOne: '{n} hora',
+  hourOther: '{n} horas',
+  minuteOne: '{n} minuto',
+  minuteOther: '{n} minutos',
+  secondOne: '{n} segundo',
+  secondOther: '{n} segundos',
 }
 
 export const frenchStrings: TranslationStrings = {
@@ -261,6 +334,30 @@ export const frenchStrings: TranslationStrings = {
   close: 'Fermer',
   menu: 'Menu',
   back: 'Retour',
+  seek: 'Rechercher',
+  playbackRate: 'Vitesse de lecture {rate}x',
+  airPlayPlay: 'Lire avec AirPlay',
+  remotePlayback: 'Lire sur un autre appareil',
+  videoPlayer: 'Lecteur vidéo',
+  videoRole: 'lecteur vidéo',
+  playTitle: 'Lire {title}',
+  audio: 'Audio',
+  defaultTrack: 'Par défaut',
+  playing: 'Lecture',
+  paused: 'En pause',
+  muted: 'Son coupé',
+  volumeLevel: 'Volume {percent} %',
+  ended: 'Lecture terminée',
+  enteredFullscreen: 'Plein écran activé',
+  exitedFullscreen: 'Plein écran désactivé',
+  errorMessage: 'Erreur : {message}',
+  timeOf: '{current} sur {duration}',
+  hourOne: '{n} heure',
+  hourOther: '{n} heures',
+  minuteOne: '{n} minute',
+  minuteOther: '{n} minutes',
+  secondOne: '{n} seconde',
+  secondOther: '{n} secondes',
 }
 
 export const germanStrings: TranslationStrings = {
@@ -313,6 +410,30 @@ export const germanStrings: TranslationStrings = {
   close: 'Schließen',
   menu: 'Menü',
   back: 'Zurück',
+  seek: 'Spulen',
+  playbackRate: 'Wiedergabegeschwindigkeit {rate}x',
+  airPlayPlay: 'Über AirPlay abspielen',
+  remotePlayback: 'Auf einem anderen Gerät abspielen',
+  videoPlayer: 'Videoplayer',
+  videoRole: 'Videoplayer',
+  playTitle: '{title} abspielen',
+  audio: 'Audio',
+  defaultTrack: 'Standard',
+  playing: 'Wird abgespielt',
+  paused: 'Pausiert',
+  muted: 'Stumm',
+  volumeLevel: 'Lautstärke {percent} %',
+  ended: 'Wiedergabe beendet',
+  enteredFullscreen: 'Vollbild an',
+  exitedFullscreen: 'Vollbild aus',
+  errorMessage: 'Fehler: {message}',
+  timeOf: '{current} von {duration}',
+  hourOne: '{n} Stunde',
+  hourOther: '{n} Stunden',
+  minuteOne: '{n} Minute',
+  minuteOther: '{n} Minuten',
+  secondOne: '{n} Sekunde',
+  secondOther: '{n} Sekunden',
 }
 
 export const japaneseStrings: TranslationStrings = {
@@ -365,6 +486,30 @@ export const japaneseStrings: TranslationStrings = {
   close: '閉じる',
   menu: 'メニュー',
   back: '戻る',
+  seek: 'シーク',
+  playbackRate: '再生速度 {rate}x',
+  airPlayPlay: 'AirPlayで再生',
+  remotePlayback: '別のデバイスで再生',
+  videoPlayer: '動画プレーヤー',
+  videoRole: '動画プレーヤー',
+  playTitle: '{title}を再生',
+  audio: '音声',
+  defaultTrack: 'デフォルト',
+  playing: '再生中',
+  paused: '一時停止中',
+  muted: 'ミュート',
+  volumeLevel: '音量 {percent}%',
+  ended: '再生終了',
+  enteredFullscreen: '全画面表示',
+  exitedFullscreen: '全画面表示を終了',
+  errorMessage: 'エラー: {message}',
+  timeOf: '{current} / {duration}',
+  hourOne: '{n}時間',
+  hourOther: '{n}時間',
+  minuteOne: '{n}分',
+  minuteOther: '{n}分',
+  secondOne: '{n}秒',
+  secondOther: '{n}秒',
 }
 
 export const chineseStrings: TranslationStrings = {
@@ -417,6 +562,30 @@ export const chineseStrings: TranslationStrings = {
   close: '关闭',
   menu: '菜单',
   back: '返回',
+  seek: '跳转',
+  playbackRate: '播放速度 {rate}x',
+  airPlayPlay: '通过 AirPlay 播放',
+  remotePlayback: '在其他设备上播放',
+  videoPlayer: '视频播放器',
+  videoRole: '视频播放器',
+  playTitle: '播放{title}',
+  audio: '音频',
+  defaultTrack: '默认',
+  playing: '正在播放',
+  paused: '已暂停',
+  muted: '已静音',
+  volumeLevel: '音量 {percent}%',
+  ended: '播放结束',
+  enteredFullscreen: '已进入全屏',
+  exitedFullscreen: '已退出全屏',
+  errorMessage: '错误：{message}',
+  timeOf: '{current} / {duration}',
+  hourOne: '{n}小时',
+  hourOther: '{n}小时',
+  minuteOne: '{n}分钟',
+  minuteOther: '{n}分钟',
+  secondOne: '{n}秒',
+  secondOther: '{n}秒',
 }
 
 export const defaultTranslations: Record<string, TranslationStrings> = {
@@ -439,9 +608,12 @@ export class I18n {
   private interpolationPattern: RegExp
 
   constructor(config: I18nConfig = {}) {
+    // The translations first: detectLanguage() looks the browser's language
+    // up in them, and before they were set it threw for every instance made
+    // without a language.
+    this.translations = { ...defaultTranslations }
     this.language = config.language || this.detectLanguage() || 'en'
     this.fallbackLanguage = config.fallbackLanguage || 'en'
-    this.translations = { ...defaultTranslations }
 
     // Merge custom translations
     if (config.translations) {

package/src/elements/media-airplay-button.ts

@@ -5,7 +5,7 @@
  */
 
 import { HTMLElementBase } from './base'
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const AIRPLAY_ICON = 'M6.2 19h11.6L12 13.2 6.2 19zM19 3H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h2v-2H5V5h14v10h-2v2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'
 
@@ -28,7 +28,7 @@ export class MediaAirplayButton extends HTMLElementBase {
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-airplay-active-color, #38bdf8); }
         </style>
-        <button part="button" type="button" aria-label="Play on AirPlay">
+        <button part="button" type="button" aria-label="${label(this, 'airPlayPlay')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${AIRPLAY_ICON}"/></svg>
         </button>
       `

package/src/elements/media-fullscreen-button.ts

@@ -4,7 +4,7 @@
  * @module elements/media-fullscreen-button
  */
 
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const ENTER_FS = 'M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'
 const EXIT_FS = 'M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'
@@ -29,7 +29,7 @@ export class MediaFullscreenButton extends HTMLElementBase {
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
         </style>
-        <button part="button" type="button" aria-label="Enter fullscreen">
+        <button part="button" type="button" aria-label="${label(this, 'enterFullscreen')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${ENTER_FS}"/>
           </svg>
@@ -62,7 +62,7 @@ export class MediaFullscreenButton extends HTMLElementBase {
       btn.disabled = avail !== 'available'
 
       const fs = state.fullscreen
-      btn.setAttribute('aria-label', fs ? 'Exit fullscreen' : 'Enter fullscreen')
+      btn.setAttribute('aria-label', label(this, fs ? 'exitFullscreen' : 'enterFullscreen'))
       const path = this.shadowRoot!.querySelector('path')!
       path.setAttribute('d', fs ? EXIT_FS : ENTER_FS)
     })

package/src/elements/media-live-button.ts

@@ -5,7 +5,7 @@
  */
 
 import { HTMLElementBase } from './base'
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 export class MediaLiveButton extends HTMLElementBase {
   private cleanup: (() => void) | null = null
@@ -21,7 +21,7 @@ export class MediaLiveButton extends HTMLElementBase {
           i { width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
           :host(:not([at-live-edge])) button { opacity: 0.72; }
         </style>
-        <button part="button" type="button" aria-label="Go to live edge"><i aria-hidden="true"></i><span>LIVE</span></button>
+        <button part="button" type="button" aria-label="${label(this, 'seekToLive')}"><i aria-hidden="true"></i><span>${label(this, 'live')}</span></button>
       `
     }
     queueMicrotask(() => this.attach())

package/src/elements/media-mute-button.ts

@@ -4,7 +4,7 @@
  * @module elements/media-mute-button
  */
 
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const ICON_MUTED = 'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z'
 const ICON_LOW = 'M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z'
@@ -34,7 +34,7 @@ export class MediaMuteButton extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
         </style>
-        <button part="button" type="button" aria-label="Mute">
+        <button part="button" type="button" aria-label="${label(this, 'mute')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${ICON_HIGH}"/>
           </svg>
@@ -59,7 +59,7 @@ export class MediaMuteButton extends HTMLElementBase {
 
     const unsub = player.subscribe((state: any) => {
       const icon = getVolumeIcon(state.muted, state.volume)
-      btn.setAttribute('aria-label', state.muted ? 'Unmute' : 'Mute')
+      btn.setAttribute('aria-label', label(this, state.muted ? 'unmute' : 'mute'))
       const path = this.shadowRoot!.querySelector('path')!
       path.setAttribute('d', icon)
     })

package/src/elements/media-pip-button.ts

@@ -4,7 +4,7 @@
  * @module elements/media-pip-button
  */
 
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const PIP_ICON = 'M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z'
 
@@ -28,7 +28,7 @@ export class MediaPipButton extends HTMLElementBase {
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
         </style>
-        <button part="button" type="button" aria-label="Picture in picture">
+        <button part="button" type="button" aria-label="${label(this, 'enterPiP')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${PIP_ICON}"/>
           </svg>
@@ -59,6 +59,7 @@ export class MediaPipButton extends HTMLElementBase {
         this.removeAttribute('hidden')
       }
       btn.disabled = avail !== 'available'
+      btn.setAttribute('aria-label', label(this, state.pictureInPicture ? 'exitPiP' : 'enterPiP'))
     })
 
     this._cleanup = unsub

package/src/elements/media-play-button.ts

@@ -4,7 +4,7 @@
  * @module elements/media-play-button
  */
 
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const PLAY_ICON = 'M8 5v14l11-7z'
 const PAUSE_ICON = 'M6 19h4V5H6v14zm8-14v14h4V5h-4z'
@@ -28,7 +28,7 @@ export class MediaPlayButton extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
         </style>
-        <button part="button" type="button" aria-label="Play">
+        <button part="button" type="button" aria-label="${label(this, 'play')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${PLAY_ICON}"/>
           </svg>
@@ -58,7 +58,7 @@ export class MediaPlayButton extends HTMLElementBase {
 
     const unsub = player.subscribe('paused', (state: any) => {
       const paused = state.paused
-      btn.setAttribute('aria-label', paused ? 'Play' : 'Pause')
+      btn.setAttribute('aria-label', label(this, paused ? 'play' : 'pause'))
       btn.setAttribute('aria-pressed', String(!paused))
       const path = this.shadowRoot!.querySelector('path')!
       path.setAttribute('d', paused ? PLAY_ICON : PAUSE_ICON)

package/src/elements/media-playback-rate-button.ts

@@ -1,4 +1,4 @@
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 import type { PlayerState } from '../types'
 
 const defaultRates = [0.5, 0.75, 1, 1.25, 1.5, 2]
@@ -19,7 +19,7 @@ export class MediaPlaybackRateButton extends HTMLElementBase {
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
         </style>
-        <button part="button" type="button" aria-label="Playback speed"></button>
+        <button part="button" type="button" aria-label="${label(this, 'speed')}"></button>
       `
     }
     queueMicrotask(() => this.attach())
@@ -53,7 +53,7 @@ export class MediaPlaybackRateButton extends HTMLElementBase {
     button.addEventListener('click', this.onClick)
     this.cleanup = player.subscribe('playbackRate', (state: PlayerState) => {
       button.textContent = `${state.playbackRate}x`
-      button.setAttribute('aria-label', `Playback speed ${state.playbackRate}x`)
+      button.setAttribute('aria-label', label(this, 'playbackRate', { rate: state.playbackRate }))
     })
   }
 }

package/src/elements/media-progress-bar.ts

@@ -6,7 +6,7 @@
  * @module elements/media-progress-bar
  */
 
-import { resolvePlayer, formatTime, formatTimePhrase } from './utils'
+import { label, resolvePlayer, formatTime, formatTimePhrase } from './utils'
 
 import { HTMLElementBase } from './base'
 
@@ -68,7 +68,7 @@ export class MediaProgressBar extends HTMLElementBase {
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
-          aria-label="Seek" tabindex="0">
+          aria-label="${label(this, 'seek')}" tabindex="0">
           <div class="tooltip" part="tooltip">0:00</div>
           <div class="track" part="track">
             <div class="waveform" part="waveform" aria-hidden="true"></div>
@@ -188,7 +188,7 @@ export class MediaProgressBar extends HTMLElementBase {
       thumb.style.left = `${percent}%`
 
       container.setAttribute('aria-valuenow', String(Math.round(percent)))
-      container.setAttribute('aria-valuetext', `${formatTimePhrase(state.currentTime)} of ${formatTimePhrase(duration)}`)
+      container.setAttribute('aria-valuetext', label(this, 'timeOf', { current: formatTimePhrase(state.currentTime, this), duration: formatTimePhrase(duration, this) }))
 
       // Buffered
       const bufferedPct = (state.bufferedAmount || 0) * 100

package/src/elements/media-remote-playback-button.ts

@@ -8,7 +8,7 @@
  */
 
 import { HTMLElementBase } from './base'
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const REMOTE_ICON = 'M1 18v3h3a3 3 0 0 0-3-3zm0-4v2a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7zm0-4v2c5 0 9 4 9 9h2c0-6.1-4.9-11-11-11zm18-7H5a2 2 0 0 0-2 2v3h2V5h14v10h-5v2h5a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'
 
@@ -33,7 +33,7 @@ export class MediaRemotePlaybackButton extends HTMLElementBase {
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-remote-active-color, #38bdf8); }
         </style>
-        <button part="button" type="button" aria-label="Play on another device">
+        <button part="button" type="button" aria-label="${label(this, 'remotePlayback')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${REMOTE_ICON}"/></svg>
         </button>
       `

package/src/elements/media-seek-button.ts

@@ -1,4 +1,4 @@
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 import type { PlayerState } from '../types'
 
 import { HTMLElementBase } from './base'
@@ -38,9 +38,8 @@ export class MediaSeekButton extends HTMLElementBase {
     if (!player || !button) return
     const seconds = Number.parseFloat(this.getAttribute('seconds') ?? '10')
     const offset = Number.isFinite(seconds) && seconds !== 0 ? seconds : 10
-    const label = offset > 0 ? `Forward ${offset} seconds` : `Back ${Math.abs(offset)} seconds`
     button.textContent = offset > 0 ? `+${offset}` : String(offset)
-    button.setAttribute('aria-label', label)
+    button.setAttribute('aria-label', label(this, offset > 0 ? 'seekForward' : 'seekBackward', { seconds: Math.abs(offset) }))
     this.onClick = () => player.seekBy(offset)
     button.addEventListener('click', this.onClick)
     this.cleanup = player.subscribe((state: PlayerState) => {

package/src/elements/media-settings-menu.ts

@@ -7,7 +7,7 @@
  * @module elements/media-settings-menu
  */
 
-import { resolvePlayer } from './utils'
+import { label as say, resolvePlayer } from './utils'
 import { computePosition } from '../core/popover'
 
 const GEAR_ICON = 'M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'
@@ -56,7 +56,7 @@ export class MediaSettingsMenu extends HTMLElementBase {
           .back { font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2); }
         </style>
         <button class="trigger" part="trigger" type="button"
-                aria-label="Settings" aria-haspopup="true" aria-expanded="false">
+                aria-label="${say(this, 'settings')}" aria-haspopup="true" aria-expanded="false">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${GEAR_ICON}"/>
           </svg>
@@ -177,7 +177,7 @@ export class MediaSettingsMenu extends HTMLElementBase {
     const state = player.state
 
     // Speed
-    this.addItem(menu, `Speed: ${state.playbackRate}x`, () => {
+    this.addItem(menu, `${say(this, 'speed')}: ${state.playbackRate}x`, () => {
       this._currentPanel = 'speed'
       this.renderPanel()
     })
@@ -185,8 +185,8 @@ export class MediaSettingsMenu extends HTMLElementBase {
     // Quality
     if (state.qualities.length > 0) {
       const current = state.qualities.find((q: any) => q.selected)
-      const label = state.autoQuality ? 'Auto' : (current ? `${current.height}p` : 'Auto')
-      this.addItem(menu, `Quality: ${label}`, () => {
+      const label = state.autoQuality ? say(this, 'auto') : (current ? `${current.height}p` : say(this, 'auto'))
+      this.addItem(menu, `${say(this, 'quality')}: ${label}`, () => {
         this._currentPanel = 'quality'
         this.renderPanel()
       })
@@ -195,7 +195,7 @@ export class MediaSettingsMenu extends HTMLElementBase {
     // Captions
     if (state.textTracks.length > 0) {
       const showing = state.textTracks.find((t: any) => t.mode === 'showing')
-      this.addItem(menu, `Captions: ${showing?.label || 'Off'}`, () => {
+      this.addItem(menu, `${say(this, 'captions')}: ${showing?.label || say(this, 'captionsOff')}`, () => {
         this._currentPanel = 'captions'
         this.renderPanel()
       })
@@ -203,7 +203,7 @@ export class MediaSettingsMenu extends HTMLElementBase {
 
     if (state.audioTracks.length > 1) {
       const selected = state.audioTracks.find((track: { selected: boolean }) => track.selected)
-      this.addItem(menu, `Audio: ${selected?.label || 'Default'}`, () => {
+      this.addItem(menu, `${say(this, 'audio')}: ${selected?.label || say(this, 'defaultTrack')}`, () => {
         this._currentPanel = 'audio'
         this.renderPanel()
       })
@@ -211,7 +211,7 @@ export class MediaSettingsMenu extends HTMLElementBase {
   }
 
   private renderSpeed(menu: Element, player: any): void {
-    this.addItem(menu, 'Back', () => {
+    this.addItem(menu, say(this, 'back'), () => {
       this._currentPanel = 'main'
       this.renderPanel()
     }, false, true)
@@ -226,13 +226,13 @@ export class MediaSettingsMenu extends HTMLElementBase {
   }
 
   private renderQuality(menu: Element, player: any): void {
-    this.addItem(menu, 'Back', () => {
+    this.addItem(menu, say(this, 'back'), () => {
       this._currentPanel = 'main'
       this.renderPanel()
     }, false, true)
 
     // Auto option
-    this.addItem(menu, 'Auto', () => {
+    this.addItem(menu, say(this, 'auto'), () => {
       player.setQuality('auto')
       this.close()
     }, player.state.autoQuality)
@@ -246,14 +246,14 @@ export class MediaSettingsMenu extends HTMLElementBase {
   }
 
   private renderCaptions(menu: Element, player: any): void {
-    this.addItem(menu, 'Back', () => {
+    this.addItem(menu, say(this, 'back'), () => {
       this._currentPanel = 'main'
       this.renderPanel()
     }, false, true)
 
     // Off option
     const anyShowing = player.state.textTracks.some((t: any) => t.mode === 'showing')
-    this.addItem(menu, 'Off', () => {
+    this.addItem(menu, say(this, 'captionsOff'), () => {
       for (const t of player.state.textTracks) {
         if (t.mode === 'showing') player.setTextTrack(t.id, 'disabled')
       }
@@ -271,13 +271,13 @@ export class MediaSettingsMenu extends HTMLElementBase {
   }
 
   private renderAudio(menu: Element, player: any): void {
-    this.addItem(menu, 'Back', () => {
+    this.addItem(menu, say(this, 'back'), () => {
       this._currentPanel = 'main'
       this.renderPanel()
     }, false, true)
 
     for (const track of player.state.audioTracks) {
-      this.addItem(menu, track.label || track.language || 'Audio track', () => {
+      this.addItem(menu, track.label || track.language || say(this, 'audioTrack'), () => {
         player.setAudioTrack(track.id)
         this.close()
       }, track.selected)

package/src/elements/media-time-display.ts

@@ -39,7 +39,7 @@ export class MediaTimeDisplay extends HTMLElementBase {
           time { color: inherit; }
           .separator { margin: 0 2px; }
         </style>
-        <time part="time" datetime="PT0S" aria-valuetext="0 seconds">0:00</time>
+        <time part="time" datetime="PT0S" aria-valuetext="${formatTimePhrase(0, this)}">0:00</time>
       `
     }
 
@@ -94,6 +94,6 @@ export class MediaTimeDisplay extends HTMLElementBase {
     }
 
     timeEl.setAttribute('datetime', toISODuration(seconds))
-    timeEl.setAttribute('aria-valuetext', formatTimePhrase(seconds))
+    timeEl.setAttribute('aria-valuetext', formatTimePhrase(seconds, this))
   }
 }

package/src/elements/media-volume-slider.ts

@@ -6,7 +6,7 @@
  * @module elements/media-volume-slider
  */
 
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 import { HTMLElementBase } from './base'
 
@@ -45,7 +45,7 @@ export class MediaVolumeSlider extends HTMLElementBase {
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"
-          aria-label="Volume" tabindex="0">
+          aria-label="${label(this, 'volume')}" tabindex="0">
           <div class="track" part="track">
             <div class="fill" part="fill"></div>
             <div class="thumb" part="thumb"></div>