ts-video-player 0.1.7 → 0.1.9

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'
@@ -54,9 +54,11 @@ export class MediaSettingsMenu extends HTMLElementBase {
           .item[aria-checked="true"]::before { content: '\\2713'; }
           .item[aria-checked="false"]::before { content: ''; min-width: 12px; display: inline-block; }
           .back { font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </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 +179,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 +187,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 +197,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 +205,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 +213,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 +228,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 +248,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 +273,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'
 
@@ -42,10 +42,12 @@ export class MediaVolumeSlider extends HTMLElementBase {
             transition: transform 0.1s;
           }
           .container:hover .thumb { transform: translate(-50%, -50%) scale(1.2); }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </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>

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/elements/video-player.ts

@@ -31,7 +31,9 @@ export class VideoPlayerElement extends HTMLElementBase {
     if (this._player) return
 
     // Create shadow DOM
-    const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })
+    // delegatesFocus: focusing <video-player> (a dialog's first focus, an
+    // `autofocus`) puts focus on the player itself, where its keys work.
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open', delegatesFocus: true })
 
     // Container
     this._container = document.createElement('div')

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')
@@ -262,6 +263,8 @@ export class Player implements IPlayer {
       toggleCaptions: () => this.toggleCaptions(),
       seekBackward: () => this.seekBy(-5),
       seekForward: () => this.seekBy(5),
+      seekBackwardLong: () => this.seekBy(-10),
+      seekForwardLong: () => this.seekBy(10),
       volumeUp: () => this.setVolume(Math.min(1, this.state.volume + 0.1)),
       volumeDown: () => this.setVolume(Math.max(0, this.state.volume - 0.1)),
       speedUp: () => this.setPlaybackRate(Math.min(4, this.state.playbackRate + 0.25)),
@@ -463,8 +466,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 +539,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 +597,16 @@ 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)
+      // Not playing any more either: the controls hide only while playing,
+      // and a paused player that still said `playing` hid them over a still
+      // frame, and told everyone reading state.playing it was still going.
+      this._store.batch({ paused: true, playing: false, playbackState: 'paused' })
       this._events.emit('pause')
-      this.announce('Paused')
+      this.announce(label(this._el, 'paused'))
     })
 
     provider.on('playing', () => {
@@ -634,10 +643,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 +666,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 +678,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 +694,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 +712,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')