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

@@ -36,6 +36,7 @@ export class VideoSkin extends HTMLElementBase {
             color: white;
             font-family: system-ui, -apple-system, sans-serif;
             font-size: 14px;
+            container-type: inline-size;
           }
 
           /* Click-to-play overlay */
@@ -63,6 +64,25 @@ export class VideoSkin extends HTMLElementBase {
             visibility: hidden;
           }
 
+          /* The time and the progress bar. One row with the buttons on a
+             wide player; a phone-width one gives the progress bar a row of
+             its own, where it would otherwise be squeezed to a dot between
+             the buttons. */
+          .center { display: contents; }
+          @container (max-width: 520px) {
+            .controls { flex-wrap: wrap; row-gap: 0; padding: 4px 10px 6px; }
+            .center { display: flex; order: -1; flex: 1 0 100%; align-items: center; gap: 10px; min-width: 0; font-size: 12px; }
+            /* Speed is in the settings menu too; one button fewer keeps the
+               rest on one row. */
+            ::slotted(media-playback-rate-button) { display: none; }
+          }
+
+          /* A touch screen sets the volume with its own buttons, and iOS
+             ignores a page's volume altogether: no slider there. */
+          @media (pointer: coarse) {
+            ::slotted(media-volume-slider) { display: none; }
+          }
+
           /* Spacer pushes right-aligned controls */
           .spacer {
             flex: 1;
@@ -78,7 +98,7 @@ export class VideoSkin extends HTMLElementBase {
         </div>
         <div class="controls" part="controls">
           <slot name="left"></slot>
-          <slot name="center"></slot>
+          <div class="center" part="center"><slot name="center"></slot></div>
           <div class="spacer"></div>
           <slot name="right"></slot>
           <slot></slot>

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
@@ -44,6 +45,12 @@ export class Player implements IPlayer {
   private _cover: HTMLButtonElement | null = null
   private _coverDismissed = false
   private _coverTimer: ReturnType<typeof setTimeout> | null = null
+  /**
+   * A play asked for before there was a provider to ask: a tap on the cover
+   * while the source was still loading. Kept and honoured once the source has
+   * loaded, so one tap plays the video rather than one tap per loading step.
+   */
+  private _playRequested = false
 
   /**
    * Create a new player instance
@@ -105,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
@@ -152,27 +159,46 @@ 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')
     button.setAttribute('aria-hidden', 'true')
     button.style.cssText = 'display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.92);box-shadow:0 4px 18px rgba(0,0,0,0.35)'
     const triangle = document.createElement('span')
+    triangle.className = 'ts-video-player__cover-play'
     triangle.style.cssText = 'width:22px;height:24px;margin-left:5px;background:#0f172a;clip-path:polygon(0 0,100% 50%,0 100%)'
     button.appendChild(triangle)
     cover.appendChild(button)
     cover.addEventListener('click', (event) => {
       event.stopPropagation()
+      // The embed can take a few seconds to load on a phone: the tap is
+      // answered at once, with the play button turning into a spinner.
+      if (!cover.dataset.loading) {
+        cover.dataset.loading = ''
+        triangle.style.display = 'none'
+        const ring = document.createElement('span')
+        ring.className = 'ts-video-player__cover-spinner'
+        ring.style.cssText = 'width:26px;height:26px;border-radius:50%;border:3px solid rgba(15,23,42,0.2);border-top-color:#0f172a'
+        button.appendChild(ring)
+        ring.animate?.([{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }], { duration: 800, iterations: Infinity })
+      }
       void this.play().catch(() => {})
       // Some browsers only let a tap inside the embed start it. If this one
-      // did not, get out of the way so the embed's own button can.
+      // did not, get out of the way so the embed's own button can. Only once
+      // the embed is ready, though: before then nothing could have started,
+      // and lifting the cover early showed the embed half-loaded.
       if (this._coverTimer) clearTimeout(this._coverTimer)
-      this._coverTimer = setTimeout(() => {
-        if (this.state.started) return
-        this._coverDismissed = true
-        this.updateCover(this.state)
-      }, 2000)
+      let waits = 0
+      const settle = () => {
+        this._coverTimer = setTimeout(() => {
+          if (this.state.started) return
+          if (!this.state.canPlay && ++waits < 10) return settle()
+          this._coverDismissed = true
+          this.updateCover(this.state)
+        }, 2000)
+      }
+      settle()
     })
     this._el.appendChild(cover)
     this._cover = cover
@@ -190,6 +216,13 @@ export class Player implements IPlayer {
       const background = image ? `url("${image.replace(/["\\]/g, '')}")` : 'none'
       if (cover.style.backgroundImage !== background) cover.style.backgroundImage = background
     }
+    // Back to a play button once it is no longer waiting on a tap's play.
+    if (!show && cover.dataset.loading !== undefined) {
+      delete cover.dataset.loading
+      cover.querySelector('.ts-video-player__cover-spinner')?.remove()
+      const triangle = cover.querySelector<HTMLElement>('.ts-video-player__cover-play')
+      if (triangle) triangle.style.display = ''
+    }
     // `hidden` alone would not do it: the inline display wins over it.
     cover.hidden = !show
     cover.style.display = show ? 'flex' : 'none'
@@ -431,7 +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 = !!this._options.autoplay
     this._store.batch({
       sources,
       src: sources[0],
@@ -498,6 +535,10 @@ export class Player implements IPlayer {
           mediaType: loader.mediaType(candidate.src),
           providerType: loader.type,
         })
+        if (this._playRequested) {
+          this._playRequested = false
+          void this.startRequestedPlay(this._provider)
+        }
         return
       }
       catch (error) {
@@ -554,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', () => {
@@ -597,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) }))
       }
     })
 
@@ -620,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) {
@@ -632,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) => {
@@ -648,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) => {
@@ -666,12 +707,29 @@ export class Player implements IPlayer {
 
   // === Playback ===
 
-  async play(): Promise<void> {
-    if (!this._provider) return
+  /**
+   * 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
+    }
     await this._provider.play()
   }
 
   pause(): void {
+    this._playRequested = false
     this._provider?.pause()
   }
 

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')

package/src/providers/youtube.ts

@@ -192,6 +192,12 @@ export class YouTubeProvider extends BaseProvider {
   private endTime?: number
   private timeUpdateInterval: ReturnType<typeof setInterval> | null = null
   private lastState = -1
+  /**
+   * A play asked for before YouTube's player could take it. Its methods only
+   * exist after its ready event, and the video may still be pending then, so
+   * the play waits for both and the video loads playing.
+   */
+  private pendingPlay = false
 
   get mediaElement(): HTMLIFrameElement | null {
     return this.iframe
@@ -303,6 +309,7 @@ export class YouTubeProvider extends BaseProvider {
     this.player?.destroy()
     this.player = null
     this.playerReady = false
+    this.pendingPlay = false
     this.iframe = null
   }
 
@@ -324,8 +331,13 @@ export class YouTubeProvider extends BaseProvider {
 
     // Load pending video if any
     if (this.pendingVideoId) {
-      this.loadVideo(this.pendingVideoId, this.startTime, this.endTime)
+      const videoId = this.pendingVideoId
       this.pendingVideoId = null
+      this.loadVideo(videoId, this.startTime, this.endTime)
+    }
+    else if (this.pendingPlay) {
+      this.pendingPlay = false
+      this.player?.playVideo()
     }
   }
 
@@ -340,6 +352,9 @@ export class YouTubeProvider extends BaseProvider {
         this.events.emit('loadstart')
         break
       case PlayerState.PLAYING:
+        // A video loaded playing never passes through CUED, where the
+        // duration is otherwise announced.
+        if (this.getDuration() > 0) this.events.emit('durationchange', this.getDuration())
         this.events.emit('play')
         this.events.emit('playing')
         this.events.emit('statechange', { paused: false, playing: true, waiting: false })
@@ -415,7 +430,8 @@ export class YouTubeProvider extends BaseProvider {
   private loadVideo(videoId: string, startTime?: number, endTime?: number): void {
     if (!this.player) return
 
-    if (this.options.autoplay) {
+    if (this.options.autoplay || this.pendingPlay) {
+      this.pendingPlay = false
       this.player.loadVideoById({
         videoId,
         startSeconds: startTime,
@@ -433,15 +449,21 @@ export class YouTubeProvider extends BaseProvider {
   // === Playback ===
 
   async play(): Promise<void> {
-    this.player?.playVideo()
+    if (!this.player || !this.playerReady || this.pendingVideoId) {
+      this.pendingPlay = true
+      return
+    }
+    this.player.playVideo()
   }
 
   pause(): void {
-    this.player?.pauseVideo()
+    this.pendingPlay = false
+    if (this.playerReady) this.player?.pauseVideo()
   }
 
   stop(): void {
-    this.player?.stopVideo()
+    this.pendingPlay = false
+    if (this.playerReady) this.player?.stopVideo()
   }
 
   // === Seeking ===