ts-video-player 0.1.7 → 0.1.8

package/src/elements/utils.ts

@@ -6,6 +6,39 @@
  * @module elements/utils
  */
 
+import type { TranslationKey } from '../core/i18n'
+import { englishStrings, getI18n } from '../core/i18n'
+
+/**
+ * The language a control speaks: the nearest `lang` attribute above it,
+ * through shadow roots (`<html lang="de">`, or `lang` on the `<video-player>`
+ * itself), then the browser's. A German page gets German button names and
+ * screen-reader announcements without configuring the player.
+ */
+export function languageOf(el: Node | null | undefined): string {
+  let node: Node | null | undefined = el
+  while (node) {
+    const tagged = (node as Element).closest?.('[lang]')?.getAttribute('lang')
+    if (tagged) return tagged.toLowerCase()
+    const root = node.getRootNode?.()
+    node = root && (root as ShadowRoot).host ? (root as ShadowRoot).host : null
+  }
+  if (typeof navigator !== 'undefined' && navigator.language) return navigator.language.toLowerCase()
+  return 'en'
+}
+
+/**
+ * A control's words in its language (languageOf): the built-in translations
+ * plus any an app added with getI18n().addTranslations(), English for a
+ * language or key that has none.
+ */
+export function label(el: Node | null | undefined, key: TranslationKey, params?: Record<string, string | number>): string {
+  const lang = languageOf(el)
+  const i18n = getI18n()
+  const text = i18n.getTranslations(lang)?.[key] || i18n.getTranslations(lang.split('-')[0]!)?.[key] || englishStrings[key] || key
+  return params ? text.replace(/\{(\w+)\}/g, (match, name) => (params[name] !== undefined ? String(params[name]) : match)) : text
+}
+
 /**
  * Format time in seconds to MM:SS or HH:MM:SS
  */
@@ -28,10 +61,11 @@ export function formatTime(seconds: number, guide = 0): string {
 
 /**
  * Format time as a human-readable phrase for screen readers.
- * e.g., "1 minute, 30 seconds"
+ * e.g., "1 minute, 30 seconds", in the language of `el` when one is given.
  */
-export function formatTimePhrase(seconds: number): string {
-  if (!isFinite(seconds) || isNaN(seconds)) return '0 seconds'
+export function formatTimePhrase(seconds: number, el?: Node | null): string {
+  const say = (n: number, one: TranslationKey, other: TranslationKey): string => label(el, n === 1 ? one : other, { n })
+  if (!isFinite(seconds) || isNaN(seconds)) return say(0, 'secondOne', 'secondOther')
 
   const s = Math.floor(seconds)
   const h = Math.floor(s / 3600)
@@ -39,9 +73,9 @@ export function formatTimePhrase(seconds: number): string {
   const sec = s % 60
 
   const parts: string[] = []
-  if (h > 0) parts.push(`${h} ${h === 1 ? 'hour' : 'hours'}`)
-  if (m > 0) parts.push(`${m} ${m === 1 ? 'minute' : 'minutes'}`)
-  if (sec > 0 || parts.length === 0) parts.push(`${sec} ${sec === 1 ? 'second' : 'seconds'}`)
+  if (h > 0) parts.push(say(h, 'hourOne', 'hourOther'))
+  if (m > 0) parts.push(say(m, 'minuteOne', 'minuteOther'))
+  if (sec > 0 || parts.length === 0) parts.push(say(sec, 'secondOne', 'secondOther'))
 
   return parts.join(', ')
 }

package/src/player.ts

@@ -22,6 +22,7 @@ import { createMediaSession, type MediaSessionOptions } from './core/media-sessi
 import { lockOrientation, unlockOrientation } from './core/orientation'
 import { defaultLoaders, findSourceCandidates } from './providers'
 import { embedCover } from './core/cover'
+import { label } from './elements/utils'
 
 // =============================================================================
 // Player Class
@@ -111,8 +112,8 @@ export class Player implements IPlayer {
     this._el.classList.add('ts-video-player')
     this._el.setAttribute('tabindex', '0')
     this._el.setAttribute('role', 'region')
-    this._el.setAttribute('aria-roledescription', 'video player')
-    this._el.setAttribute('aria-label', this._options.title || 'Video player')
+    this._el.setAttribute('aria-roledescription', label(this._el, 'videoRole'))
+    this._el.setAttribute('aria-label', this._options.title || label(this._el, 'videoPlayer'))
     this._el.setAttribute('aria-keyshortcuts', 'Space K M F I C ArrowLeft ArrowRight J L ArrowUp ArrowDown Home End 0 1 2 3 4 5 6 7 8 9')
 
     // Create inner structure
@@ -158,7 +159,7 @@ export class Player implements IPlayer {
     const cover = document.createElement('button')
     cover.type = 'button'
     cover.className = 'ts-video-player__cover'
-    cover.setAttribute('aria-label', `Play ${this._options.title || 'video'}`)
+    cover.setAttribute('aria-label', this._options.title ? label(this._el, 'playTitle', { title: this._options.title }) : label(this._el, 'play'))
     cover.hidden = true
     cover.style.cssText = 'position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:#000 center/cover no-repeat;cursor:pointer;-webkit-tap-highlight-color:transparent'
     const button = document.createElement('span')
@@ -463,8 +464,11 @@ export class Player implements IPlayer {
     }
 
     // Update state. A new source has not played yet, so its cover returns.
+    // With autoplay it starts once loaded: a player that follows a chosen
+    // video (`src` set again on <video-player>) plays each one it is given,
+    // not only the first.
     this._coverDismissed = false
-    this._playRequested = false
+    this._playRequested = !!this._options.autoplay
     this._store.batch({
       sources,
       src: sources[0],
@@ -533,7 +537,7 @@ export class Player implements IPlayer {
         })
         if (this._playRequested) {
           this._playRequested = false
-          void this._provider.play().catch(() => {})
+          void this.startRequestedPlay(this._provider)
         }
         return
       }
@@ -591,13 +595,13 @@ export class Player implements IPlayer {
     provider.on('play', () => {
       this._store.batch({ paused: false, ended: false })
       this._events.emit('play')
-      this.announce('Playing')
+      this.announce(label(this._el, 'playing'))
     })
 
     provider.on('pause', () => {
       this._store.set('paused', true)
       this._events.emit('pause')
-      this.announce('Paused')
+      this.announce(label(this._el, 'paused'))
     })
 
     provider.on('playing', () => {
@@ -634,10 +638,10 @@ export class Player implements IPlayer {
       this._store.batch({ volume, muted })
       this._events.emit('volumechange', volume, muted)
       if (muted) {
-        this.announce('Muted')
+        this.announce(label(this._el, 'muted'))
       // eslint-disable-next-line style/brace-style
       } else {
-        this.announce(`Volume ${Math.round(volume * 100)}%`)
+        this.announce(label(this._el, 'volumeLevel', { percent: Math.round(volume * 100) }))
       }
     })
 
@@ -657,7 +661,7 @@ export class Player implements IPlayer {
     provider.on('ended', () => {
       this._store.batch({ ended: true, playing: false, playbackState: 'ended' })
       this._events.emit('ended')
-      this.announce('Playback ended')
+      this.announce(label(this._el, 'ended'))
 
       // Handle loop
       if (this.state.loop) {
@@ -669,7 +673,7 @@ export class Player implements IPlayer {
     provider.on('error', (error) => {
       this._store.batch({ loadingState: 'error', error })
       this._events.emit('error', error)
-      this.announce(`Error: ${error.message}`)
+      this.announce(label(this._el, 'errorMessage', { message: error.message }))
     })
 
     provider.on('statechange', (state) => {
@@ -685,7 +689,7 @@ export class Player implements IPlayer {
     provider.on('fullscreenchange', (fullscreen) => {
       this._store.set('fullscreen', fullscreen)
       this._events.emit('fullscreenchange', fullscreen)
-      this.announce(fullscreen ? 'Entered fullscreen' : 'Exited fullscreen')
+      this.announce(label(this._el, fullscreen ? 'enteredFullscreen' : 'exitedFullscreen'))
     })
 
     provider.on('pipchange', (pip) => {
@@ -703,7 +707,20 @@ export class Player implements IPlayer {
 
   // === Playback ===
 
-  async play(): Promise<void> {
+  /**
+   * Play what was asked for before the source was ready. A browser that
+   * refuses sound without a tap (code 1) gets it muted instead, as autoplay
+   * is everywhere, and the mute button turns it up.
+   */
+  private async startRequestedPlay(provider: Provider): Promise<void> {
+    await provider.play().catch(() => {})
+    if (this._provider !== provider || this.state.error?.code !== 1 || this.state.muted) return
+    this._store.set('error', null)
+    this.setMuted(true)
+    await provider.play().catch(() => {})
+  }
+
+    async play(): Promise<void> {
     if (!this._provider) {
       this._playRequested = true
       return

package/src/providers/vimeo.ts

@@ -114,6 +114,7 @@ interface VimeoPlayer {
   pause(): Promise<void>
   unload(): Promise<void>
   destroy(): Promise<void>
+  loadVideo(id: number | string | { id: number, h?: string }): Promise<number>
   getCurrentTime(): Promise<number>
   setCurrentTime(seconds: number): Promise<number>
   getDuration(): Promise<number>
@@ -240,10 +241,14 @@ export class VimeoProvider extends BaseProvider {
       return
     }
 
-    // Destroy existing player
+    // A player already here loads the next video in place. Destroying it and
+    // making a new one on the same element never became ready again: the SDK
+    // keeps its player per element, so a second video (or the same one
+    // chosen again) stayed "loading" for good.
     if (this.player) {
-      await this.player.destroy()
-      this.player = null
+      await this.player.loadVideo(parseInt(parsed.videoId, 10))
+      await this.announceLoaded()
+      return
     }
 
     // Build player options
@@ -281,6 +286,13 @@ export class VimeoProvider extends BaseProvider {
     // Setup event listeners
     this.attachVimeoEvents()
 
+    await this.announceLoaded()
+  }
+
+  /** What a loaded video tells the player: ready, its length, qualities and shape. */
+  private async announceLoaded(): Promise<void> {
+    if (!this.player) return
+
     // Emit ready
     this.events.emit('loadedmetadata')
     this.events.emit('canplay')