ts-video-player 0.1.6 → 0.1.8

package/dist/core/i18n.d.ts

@@ -55,6 +55,30 @@ export interface TranslationStrings {
     close: string;
     menu: string;
     back: string;
+    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;
 export interface I18nConfig {

package/dist/elements/index.js

@@ -1,9 +1,9 @@
 import {
-  VideoPlayerElement2,
   formatTime2,
   formatTimePhrase2,
   toISODuration2,
   resolvePlayer2,
+  VideoPlayerElement2,
   VideoSkin2,
   MediaPlayButton2,
   MediaMuteButton2,
@@ -23,7 +23,7 @@ import {
   MediaErrorDisplay2,
   MediaRemotePlaybackButton2,
   registerElements2
-} from "../chunk-fvz33zn4.js";
+} from "../chunk-hvjcmbfn.js";
 export {
   MediaAirplayButton2 as MediaAirplayButton,
   MediaErrorDisplay2 as MediaErrorDisplay,

package/dist/elements/utils.d.ts

@@ -5,15 +5,29 @@
  *
  * @module elements/utils
  */
+import type { TranslationKey } 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 declare function languageOf(el: Node | null | undefined): string;
+/**
+ * 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 declare function label(el: Node | null | undefined, key: TranslationKey, params?: Record<string, string | number>): string;
 /**
  * Format time in seconds to MM:SS or HH:MM:SS
  */
 export declare function formatTime(seconds: number, guide?: number): 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 declare function formatTimePhrase(seconds: number): string;
+export declare function formatTimePhrase(seconds: number, el?: Node | null): string;
 /**
  * Convert seconds to ISO 8601 duration string.
  * e.g., 90 -> "PT1M30S"

package/dist/index.js

@@ -29,13 +29,25 @@ import {
   findLoader2,
   detectMediaType2,
   getPreconnectHints2,
+  englishStrings2,
+  spanishStrings2,
+  frenchStrings2,
+  germanStrings2,
+  japaneseStrings2,
+  chineseStrings2,
+  defaultTranslations2,
+  I18n2,
+  createI18n2,
+  getI18n2,
+  setI18n2,
+  t2,
+  formatTime2,
+  formatTimePhrase2,
+  toISODuration2,
   Player2,
   createPlayer2,
   getPlayer2,
   VideoPlayerElement2,
-  formatTime2,
-  formatTimePhrase2,
-  toISODuration2,
   VideoSkin2,
   MediaPlayButton2,
   MediaMuteButton2,
@@ -51,7 +63,7 @@ import {
   applyPosition2,
   MediaSettingsMenu2,
   registerElements2
-} from "./chunk-fvz33zn4.js";
+} from "./chunk-hvjcmbfn.js";
 import {
   playback2,
   volume2,
@@ -1116,409 +1128,6 @@ function formatTime(seconds) {
   }
   return `${m}:${s.toString().padStart(2, "0")}`;
 }
-// src/core/i18n.ts
-var englishStrings = {
-  play: "Play",
-  pause: "Pause",
-  replay: "Replay",
-  mute: "Mute",
-  unmute: "Unmute",
-  volume: "Volume",
-  seekBackward: "Seek backward {seconds} seconds",
-  seekForward: "Seek forward {seconds} seconds",
-  seekTo: "Seek to {time}",
-  duration: "Duration",
-  currentTime: "Current time",
-  played: "Played",
-  buffered: "Buffered",
-  enterFullscreen: "Enter fullscreen",
-  exitFullscreen: "Exit fullscreen",
-  enterPiP: "Enter picture-in-picture",
-  exitPiP: "Exit picture-in-picture",
-  enableCaptions: "Enable captions",
-  disableCaptions: "Disable captions",
-  captions: "Captions",
-  captionsOff: "Off",
-  settings: "Settings",
-  quality: "Quality",
-  auto: "Auto",
-  speed: "Speed",
-  normal: "Normal",
-  loop: "Loop",
-  loopEnabled: "Loop enabled",
-  loopDisabled: "Loop disabled",
-  audioBoost: "Audio boost",
-  audioTrack: "Audio track",
-  live: "LIVE",
-  liveEdge: "At live edge",
-  seekToLive: "Seek to live edge",
-  behindLive: "{seconds}s behind",
-  networkError: "A network error occurred",
-  mediaError: "The media could not be loaded",
-  unknownError: "An unknown error occurred",
-  loading: "Loading",
-  buffering: "Buffering",
-  chapters: "Chapters",
-  airPlay: "AirPlay",
-  googleCast: "Cast",
-  casting: "Casting to {device}",
-  download: "Download",
-  share: "Share",
-  close: "Close",
-  menu: "Menu",
-  back: "Back"
-};
-var spanishStrings = {
-  play: "Reproducir",
-  pause: "Pausar",
-  replay: "Repetir",
-  mute: "Silenciar",
-  unmute: "Activar sonido",
-  volume: "Volumen",
-  seekBackward: "Retroceder {seconds} segundos",
-  seekForward: "Avanzar {seconds} segundos",
-  seekTo: "Ir a {time}",
-  duration: "Duración",
-  currentTime: "Tiempo actual",
-  played: "Reproducido",
-  buffered: "Almacenado",
-  enterFullscreen: "Pantalla completa",
-  exitFullscreen: "Salir de pantalla completa",
-  enterPiP: "Imagen en imagen",
-  exitPiP: "Salir de imagen en imagen",
-  enableCaptions: "Activar subtítulos",
-  disableCaptions: "Desactivar subtítulos",
-  captions: "Subtítulos",
-  captionsOff: "Desactivados",
-  settings: "Ajustes",
-  quality: "Calidad",
-  auto: "Automático",
-  speed: "Velocidad",
-  normal: "Normal",
-  loop: "Bucle",
-  loopEnabled: "Bucle activado",
-  loopDisabled: "Bucle desactivado",
-  audioBoost: "Aumento de audio",
-  audioTrack: "Pista de audio",
-  live: "EN VIVO",
-  liveEdge: "En vivo",
-  seekToLive: "Ir al directo",
-  behindLive: "{seconds}s de retraso",
-  networkError: "Error de red",
-  mediaError: "No se pudo cargar el medio",
-  unknownError: "Error desconocido",
-  loading: "Cargando",
-  buffering: "Almacenando",
-  chapters: "Capítulos",
-  airPlay: "AirPlay",
-  googleCast: "Enviar",
-  casting: "Enviando a {device}",
-  download: "Descargar",
-  share: "Compartir",
-  close: "Cerrar",
-  menu: "Menú",
-  back: "Volver"
-};
-var frenchStrings = {
-  play: "Lecture",
-  pause: "Pause",
-  replay: "Relire",
-  mute: "Muet",
-  unmute: "Son activé",
-  volume: "Volume",
-  seekBackward: "Reculer de {seconds} secondes",
-  seekForward: "Avancer de {seconds} secondes",
-  seekTo: "Aller à {time}",
-  duration: "Durée",
-  currentTime: "Temps actuel",
-  played: "Joué",
-  buffered: "Mis en mémoire tampon",
-  enterFullscreen: "Plein écran",
-  exitFullscreen: "Quitter le plein écran",
-  enterPiP: "Image dans l'image",
-  exitPiP: "Quitter l'image dans l'image",
-  enableCaptions: "Activer les sous-titres",
-  disableCaptions: "Désactiver les sous-titres",
-  captions: "Sous-titres",
-  captionsOff: "Désactivés",
-  settings: "Paramètres",
-  quality: "Qualité",
-  auto: "Auto",
-  speed: "Vitesse",
-  normal: "Normal",
-  loop: "Boucle",
-  loopEnabled: "Boucle activée",
-  loopDisabled: "Boucle désactivée",
-  audioBoost: "Amplification audio",
-  audioTrack: "Piste audio",
-  live: "EN DIRECT",
-  liveEdge: "En direct",
-  seekToLive: "Aller au direct",
-  behindLive: "{seconds}s de retard",
-  networkError: "Erreur réseau",
-  mediaError: "Le média n'a pas pu être chargé",
-  unknownError: "Erreur inconnue",
-  loading: "Chargement",
-  buffering: "Mise en mémoire tampon",
-  chapters: "Chapitres",
-  airPlay: "AirPlay",
-  googleCast: "Caster",
-  casting: "Diffusion sur {device}",
-  download: "Télécharger",
-  share: "Partager",
-  close: "Fermer",
-  menu: "Menu",
-  back: "Retour"
-};
-var germanStrings = {
-  play: "Abspielen",
-  pause: "Pause",
-  replay: "Wiederholen",
-  mute: "Stumm",
-  unmute: "Ton an",
-  volume: "Lautstärke",
-  seekBackward: "{seconds} Sekunden zurück",
-  seekForward: "{seconds} Sekunden vor",
-  seekTo: "Zu {time} springen",
-  duration: "Dauer",
-  currentTime: "Aktuelle Zeit",
-  played: "Abgespielt",
-  buffered: "Gepuffert",
-  enterFullscreen: "Vollbild",
-  exitFullscreen: "Vollbild beenden",
-  enterPiP: "Bild-in-Bild",
-  exitPiP: "Bild-in-Bild beenden",
-  enableCaptions: "Untertitel aktivieren",
-  disableCaptions: "Untertitel deaktivieren",
-  captions: "Untertitel",
-  captionsOff: "Aus",
-  settings: "Einstellungen",
-  quality: "Qualität",
-  auto: "Auto",
-  speed: "Geschwindigkeit",
-  normal: "Normal",
-  loop: "Schleife",
-  loopEnabled: "Schleife aktiviert",
-  loopDisabled: "Schleife deaktiviert",
-  audioBoost: "Audio-Verstärkung",
-  audioTrack: "Audiospur",
-  live: "LIVE",
-  liveEdge: "Am Live-Punkt",
-  seekToLive: "Zum Live-Punkt",
-  behindLive: "{seconds}s hinter Live",
-  networkError: "Netzwerkfehler",
-  mediaError: "Medium konnte nicht geladen werden",
-  unknownError: "Unbekannter Fehler",
-  loading: "Wird geladen",
-  buffering: "Puffern",
-  chapters: "Kapitel",
-  airPlay: "AirPlay",
-  googleCast: "Streamen",
-  casting: "Streame zu {device}",
-  download: "Herunterladen",
-  share: "Teilen",
-  close: "Schließen",
-  menu: "Menü",
-  back: "Zurück"
-};
-var japaneseStrings = {
-  play: "再生",
-  pause: "一時停止",
-  replay: "リプレイ",
-  mute: "ミュート",
-  unmute: "ミュート解除",
-  volume: "音量",
-  seekBackward: "{seconds}秒戻る",
-  seekForward: "{seconds}秒進む",
-  seekTo: "{time}にシーク",
-  duration: "長さ",
-  currentTime: "現在の時間",
-  played: "再生済み",
-  buffered: "バッファ済み",
-  enterFullscreen: "フルスクリーン",
-  exitFullscreen: "フルスクリーン終了",
-  enterPiP: "ピクチャーインピクチャー",
-  exitPiP: "ピクチャーインピクチャー終了",
-  enableCaptions: "字幕を有効化",
-  disableCaptions: "字幕を無効化",
-  captions: "字幕",
-  captionsOff: "オフ",
-  settings: "設定",
-  quality: "画質",
-  auto: "自動",
-  speed: "再生速度",
-  normal: "通常",
-  loop: "ループ",
-  loopEnabled: "ループ有効",
-  loopDisabled: "ループ無効",
-  audioBoost: "オーディオブースト",
-  audioTrack: "オーディオトラック",
-  live: "ライブ",
-  liveEdge: "ライブ中",
-  seekToLive: "ライブに移動",
-  behindLive: "{seconds}秒遅れ",
-  networkError: "ネットワークエラー",
-  mediaError: "メディアを読み込めません",
-  unknownError: "不明なエラー",
-  loading: "読み込み中",
-  buffering: "バッファリング",
-  chapters: "チャプター",
-  airPlay: "AirPlay",
-  googleCast: "キャスト",
-  casting: "{device}にキャスト中",
-  download: "ダウンロード",
-  share: "共有",
-  close: "閉じる",
-  menu: "メニュー",
-  back: "戻る"
-};
-var chineseStrings = {
-  play: "播放",
-  pause: "暂停",
-  replay: "重播",
-  mute: "静音",
-  unmute: "取消静音",
-  volume: "音量",
-  seekBackward: "后退{seconds}秒",
-  seekForward: "前进{seconds}秒",
-  seekTo: "跳转到{time}",
-  duration: "时长",
-  currentTime: "当前时间",
-  played: "已播放",
-  buffered: "已缓冲",
-  enterFullscreen: "全屏",
-  exitFullscreen: "退出全屏",
-  enterPiP: "画中画",
-  exitPiP: "退出画中画",
-  enableCaptions: "开启字幕",
-  disableCaptions: "关闭字幕",
-  captions: "字幕",
-  captionsOff: "关闭",
-  settings: "设置",
-  quality: "画质",
-  auto: "自动",
-  speed: "播放速度",
-  normal: "正常",
-  loop: "循环",
-  loopEnabled: "循环已开启",
-  loopDisabled: "循环已关闭",
-  audioBoost: "音频增强",
-  audioTrack: "音轨",
-  live: "直播",
-  liveEdge: "直播中",
-  seekToLive: "跳转到直播",
-  behindLive: "落后{seconds}秒",
-  networkError: "网络错误",
-  mediaError: "无法加载媒体",
-  unknownError: "未知错误",
-  loading: "加载中",
-  buffering: "缓冲中",
-  chapters: "章节",
-  airPlay: "AirPlay",
-  googleCast: "投射",
-  casting: "正在投射到{device}",
-  download: "下载",
-  share: "分享",
-  close: "关闭",
-  menu: "菜单",
-  back: "返回"
-};
-var defaultTranslations = {
-  en: englishStrings,
-  es: spanishStrings,
-  fr: frenchStrings,
-  de: germanStrings,
-  ja: japaneseStrings,
-  zh: chineseStrings
-};
-
-class I18n {
-  language;
-  fallbackLanguage;
-  translations;
-  interpolationPattern;
-  constructor(config = {}) {
-    this.language = config.language || this.detectLanguage() || "en";
-    this.fallbackLanguage = config.fallbackLanguage || "en";
-    this.translations = { ...defaultTranslations };
-    if (config.translations) {
-      for (const [lang, strings] of Object.entries(config.translations)) {
-        if (strings) {
-          this.translations[lang] = { ...this.translations[lang], ...strings };
-        }
-      }
-    }
-    this.interpolationPattern = config.interpolationPattern || /\{(\w+)\}/g;
-  }
-  detectLanguage() {
-    if (typeof navigator === "undefined")
-      return null;
-    const lang = navigator.language || navigator.userLanguage;
-    if (!lang)
-      return null;
-    if (this.translations[lang]) {
-      return lang;
-    }
-    const baseLang = lang.split("-")[0];
-    if (this.translations[baseLang]) {
-      return baseLang;
-    }
-    return null;
-  }
-  getLanguage() {
-    return this.language;
-  }
-  setLanguage(language) {
-    this.language = language;
-  }
-  t(key, params) {
-    let str = this.translations[this.language]?.[key];
-    if (!str) {
-      str = this.translations[this.fallbackLanguage]?.[key];
-    }
-    if (!str) {
-      return key;
-    }
-    if (params) {
-      str = str.replace(this.interpolationPattern, (match, paramKey) => {
-        const value = params[paramKey];
-        return value !== undefined ? String(value) : match;
-      });
-    }
-    return str;
-  }
-  addTranslations(language, strings) {
-    this.translations[language] = {
-      ...this.translations[language],
-      ...strings
-    };
-  }
-  getTranslations(language) {
-    return this.translations[language];
-  }
-  getAvailableLanguages() {
-    return Object.keys(this.translations);
-  }
-  hasLanguage(language) {
-    return language in this.translations;
-  }
-}
-var globalI18n = null;
-function createI18n(config) {
-  return new I18n(config);
-}
-function getI18n(config) {
-  if (!globalI18n) {
-    globalI18n = createI18n(config);
-  }
-  return globalI18n;
-}
-function setI18n(i18n) {
-  globalI18n = i18n;
-}
-function t(key, params) {
-  return getI18n().t(key, params);
-}
 // src/core/live.ts
 class LiveIndicator {
   container;
@@ -7932,7 +7541,7 @@ export {
   GoogleCastButton,
   HLSProvider2 as HLSProvider,
   HTML5Provider2 as HTML5Provider,
-  I18n,
+  I18n2 as I18n,
   LayoutManager,
   LiveController,
   LiveIndicator,
@@ -7987,7 +7596,7 @@ export {
   captionPresets,
   captions2 as captionsFeature,
   castMedia,
-  chineseStrings,
+  chineseStrings2 as chineseStrings,
   cinemaLayout,
   computePosition2 as computePosition,
   computed2 as computed,
@@ -8006,7 +7615,7 @@ export {
   createErrorOverlay,
   createGestureDetector2 as createGestureDetector,
   createGoogleCastButton,
-  createI18n,
+  createI18n2 as createI18n,
   createKeyboardHandler2 as createKeyboardHandler,
   createLayoutManager,
   createLiveController,
@@ -8035,7 +7644,7 @@ export {
   defaultLayout,
   defaultLoaders2 as defaultLoaders,
   defaultTheme,
-  defaultTranslations,
+  defaultTranslations2 as defaultTranslations,
   detectAllFeatures2 as detectAllFeatures,
   detectFullscreenAvailability2 as detectFullscreenAvailability,
   detectMediaType2 as detectMediaType,
@@ -8043,7 +7652,7 @@ export {
   detectVolumeAvailability2 as detectVolumeAvailability,
   endCastSession,
   endScreenPlugin,
-  englishStrings,
+  englishStrings2 as englishStrings,
   enterFullscreen2 as enterFullscreen,
   enterPiP2 as enterPiP,
   exitFullscreen2 as exitFullscreen,
@@ -8055,14 +7664,14 @@ export {
   formatTime2 as formatElementTime,
   formatTime4 as formatTime,
   formatTimePhrase2 as formatTimePhrase,
-  frenchStrings,
+  frenchStrings2 as frenchStrings,
   fullscreen2 as fullscreenFeature,
   generateSpriteCues,
   generateThemeCSS,
-  germanStrings,
+  germanStrings2 as germanStrings,
   gestures2 as gesturesFeature,
   getCastSession,
-  getI18n,
+  getI18n2 as getI18n,
   getLayout,
   getPlayer2 as getPlayer,
   getPreconnectHints2 as getPreconnectHints,
@@ -8087,7 +7696,7 @@ export {
   isVideoOnlyFullscreen2 as isVideoOnlyFullscreen,
   isVimeoSource2 as isVimeoSource,
   isYouTubeSource2 as isYouTubeSource,
-  japaneseStrings,
+  japaneseStrings2 as japaneseStrings,
   keyboard2 as keyboardFeature,
   layouts,
   lightTheme,
@@ -8125,12 +7734,12 @@ export {
   selectIsLoading2 as selectIsLoading,
   selectProgress2 as selectProgress,
   selectRemainingTime2 as selectRemainingTime,
-  setI18n,
+  setI18n2 as setI18n,
   shallowEqual2 as shallowEqual,
   showAirPlayPicker,
   skipSegmentsPlugin,
-  spanishStrings,
-  t,
+  spanishStrings2 as spanishStrings,
+  t2 as t,
   toISODuration2 as toISODuration,
   unlockOrientation2 as unlockOrientation,
   updateMetadata2 as updateMetadata,

package/dist/player.d.ts

@@ -23,6 +23,12 @@ export declare class Player implements IPlayer {
     private _cover;
     private _coverDismissed;
     private _coverTimer;
+    /**
+     * 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;
     /**
      * Create a new player instance
      */
@@ -61,6 +67,12 @@ export declare class Player implements IPlayer {
     setPoster(url: string): void;
     getSrc(): Src | null;
     private attachProviderEvents;
+    /**
+     * 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 startRequestedPlay;
     play(): Promise<void>;
     pause(): void;
     togglePlay(): void;

package/dist/providers/vimeo.d.ts

@@ -48,6 +48,10 @@ 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>;
@@ -118,6 +122,8 @@ export declare class VimeoProvider extends BaseProvider {
     protected cleanup(): void;
     canPlay(src: Src): boolean;
     load(src: Src): Promise<void>;
+    /** What a loaded video tells the player: ready, its length, qualities and shape. */
+    private announceLoaded;
     private attachVimeoEvents;
     private updateQualities;
     play(): Promise<void>;

package/dist/providers/youtube.d.ts

@@ -96,6 +96,12 @@ export declare class YouTubeProvider extends BaseProvider {
     private endTime?;
     private timeUpdateInterval;
     private lastState;
+    /**
+     * 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;
     get mediaElement(): HTMLIFrameElement | null;
     protected initialize(): Promise<void>;
     private loadYouTubeAPI;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-video-player",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "A modern, framework-agnostic video player with deep stx integration",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",