ts-video-player 0.1.5 → 0.1.7

package/dist/{chunk-z21ez1kz.js → chunk-24n6adw2.js}

@@ -625,6 +625,7 @@ class YouTubeProvider2 extends BaseProvider2 {
   endTime;
   timeUpdateInterval = null;
   lastState = -1;
+  pendingPlay = false;
   get mediaElement() {
     return this.iframe;
   }
@@ -666,7 +667,9 @@ class YouTubeProvider2 extends BaseProvider2 {
     });
     this.iframe = this.player.getIframe();
     this.iframe.className = "ts-video-player__media";
-    this.iframe.style.cssText = "position:absolute;inset:0;width:100%;height:100%;border:0";
+    this.iframe.style.cssText = "position:absolute;left:0;top:-100%;width:100%;height:300%;border:0";
+    if (this.iframe.parentElement)
+      this.iframe.parentElement.style.overflow = "hidden";
   }
   async loadYouTubeAPI() {
     if (window.YT?.Player)
@@ -700,6 +703,7 @@ class YouTubeProvider2 extends BaseProvider2 {
     this.player?.destroy();
     this.player = null;
     this.playerReady = false;
+    this.pendingPlay = false;
     this.iframe = null;
   }
   onReady() {
@@ -712,8 +716,12 @@ class YouTubeProvider2 extends BaseProvider2 {
     this.events.emit("loadedmetadata");
     this.events.emit("canplay");
     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();
     }
   }
   onStateChange(event) {
@@ -725,6 +733,8 @@ class YouTubeProvider2 extends BaseProvider2 {
         this.events.emit("loadstart");
         break;
       case PlayerState.PLAYING:
+        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 });
@@ -785,7 +795,8 @@ class YouTubeProvider2 extends BaseProvider2 {
   loadVideo(videoId, startTime, endTime) {
     if (!this.player)
       return;
-    if (this.options.autoplay) {
+    if (this.options.autoplay || this.pendingPlay) {
+      this.pendingPlay = false;
       this.player.loadVideoById({
         videoId,
         startSeconds: startTime,
@@ -800,13 +811,21 @@ class YouTubeProvider2 extends BaseProvider2 {
     }
   }
   async play() {
-    this.player?.playVideo();
+    if (!this.player || !this.playerReady || this.pendingVideoId) {
+      this.pendingPlay = true;
+      return;
+    }
+    this.player.playVideo();
   }
   pause() {
-    this.player?.pauseVideo();
+    this.pendingPlay = false;
+    if (this.playerReady)
+      this.player?.pauseVideo();
   }
   stop() {
-    this.player?.stopVideo();
+    this.pendingPlay = false;
+    if (this.playerReady)
+      this.player?.stopVideo();
   }
   seekTo(time) {
     this.player?.seekTo(time, true);
@@ -2012,7 +2031,8 @@ function getPreconnectHints2(src, loaders = defaultLoaders2) {
 // src/core/cover.ts
 function embedCover(state, dismissed) {
   const embed = state.providerType === "youtube" || state.providerType === "vimeo";
-  if (!embed || state.started || state.error || dismissed)
+  const waiting = !state.started || state.ended;
+  if (!embed || !waiting || state.error || dismissed)
     return { show: false, image: "" };
   if (state.poster)
     return { show: true, image: state.poster };
@@ -2037,6 +2057,7 @@ class Player2 {
   _cover = null;
   _coverDismissed = false;
   _coverTimer = null;
+  _playRequested = false;
   constructor(container, options = {}) {
     if (typeof container === "string") {
       const el = document.querySelector(container);
@@ -2109,20 +2130,36 @@ class Player2 {
     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();
+      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 });
+      }
       this.play().catch(() => {});
       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;
@@ -2142,6 +2179,13 @@ class Player2 {
       if (cover.style.backgroundImage !== background)
         cover.style.backgroundImage = background;
     }
+    if (!show && cover.dataset.loading !== undefined) {
+      delete cover.dataset.loading;
+      cover.querySelector(".ts-video-player__cover-spinner")?.remove();
+      const triangle = cover.querySelector(".ts-video-player__cover-play");
+      if (triangle)
+        triangle.style.display = "";
+    }
     cover.hidden = !show;
     cover.style.display = show ? "flex" : "none";
   }
@@ -2304,6 +2348,7 @@ class Player2 {
       return;
     }
     this._coverDismissed = false;
+    this._playRequested = false;
     this._store.batch({
       sources,
       src: sources[0],
@@ -2361,6 +2406,10 @@ class Player2 {
           mediaType: loader.mediaType(candidate.src),
           providerType: loader.type
         });
+        if (this._playRequested) {
+          this._playRequested = false;
+          this._provider.play().catch(() => {});
+        }
         return;
       } catch (error) {
         lastError = error;
@@ -2499,11 +2548,14 @@ class Player2 {
     });
   }
   async play() {
-    if (!this._provider)
+    if (!this._provider) {
+      this._playRequested = true;
       return;
+    }
     await this._provider.play();
   }
   pause() {
+    this._playRequested = false;
     this._provider?.pause();
   }
   togglePlay() {
@@ -2893,6 +2945,7 @@ class VideoSkin2 extends HTMLElementBase {
             color: white;
             font-family: system-ui, -apple-system, sans-serif;
             font-size: 14px;
+            container-type: inline-size;
           }
 
           /* Click-to-play overlay */
@@ -2920,6 +2973,25 @@ class VideoSkin2 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;
@@ -2935,7 +3007,7 @@ class VideoSkin2 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/dist/core/cover.d.ts

@@ -14,10 +14,11 @@ export interface EmbedCover {
  * A YouTube or Vimeo embed draws its own chrome before playback (a title bar,
  * a play button, "Watch on YouTube", and on iOS the system's controls for the
  * embed's own video), none of which can be styled from outside the iframe.
- * Until the first play the player covers it with its poster instead: the one
- * the page gave it, or else YouTube's thumbnail for the video.
+ * Until the first play, and again once it ends (where YouTube shows other
+ * videos), the player covers it with its poster instead: the one the page
+ * gave it, or else YouTube's thumbnail for the video.
  *
  * `dismissed` is set when a tap on the cover did not start playback, so the
  * embed's own button is left reachable.
  */
-export declare function embedCover(state: Pick<PlayerState, 'providerType' | 'started' | 'error' | 'poster' | 'src'>, dismissed: boolean): EmbedCover;
+export declare function embedCover(state: Pick<PlayerState, 'providerType' | 'started' | 'ended' | 'error' | 'poster' | 'src'>, dismissed: boolean): EmbedCover;

package/dist/elements/index.js

@@ -23,7 +23,7 @@ import {
   MediaErrorDisplay2,
   MediaRemotePlaybackButton2,
   registerElements2
-} from "../chunk-z21ez1kz.js";
+} from "../chunk-24n6adw2.js";
 export {
   MediaAirplayButton2 as MediaAirplayButton,
   MediaErrorDisplay2 as MediaErrorDisplay,

package/dist/index.js

@@ -51,7 +51,7 @@ import {
   applyPosition2,
   MediaSettingsMenu2,
   registerElements2
-} from "./chunk-z21ez1kz.js";
+} from "./chunk-24n6adw2.js";
 import {
   playback2,
   volume2,

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
      */

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.5",
+  "version": "0.1.7",
   "description": "A modern, framework-agnostic video player with deep stx integration",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",

package/src/core/cover.ts

@@ -18,18 +18,22 @@ export interface EmbedCover {
  * A YouTube or Vimeo embed draws its own chrome before playback (a title bar,
  * a play button, "Watch on YouTube", and on iOS the system's controls for the
  * embed's own video), none of which can be styled from outside the iframe.
- * Until the first play the player covers it with its poster instead: the one
- * the page gave it, or else YouTube's thumbnail for the video.
+ * Until the first play, and again once it ends (where YouTube shows other
+ * videos), the player covers it with its poster instead: the one the page
+ * gave it, or else YouTube's thumbnail for the video.
  *
  * `dismissed` is set when a tap on the cover did not start playback, so the
  * embed's own button is left reachable.
  */
 export function embedCover(
-  state: Pick<PlayerState, 'providerType' | 'started' | 'error' | 'poster' | 'src'>,
+  state: Pick<PlayerState, 'providerType' | 'started' | 'ended' | 'error' | 'poster' | 'src'>,
   dismissed: boolean,
 ): EmbedCover {
   const embed = state.providerType === 'youtube' || state.providerType === 'vimeo'
-  if (!embed || state.started || state.error || dismissed)
+  // Back over the embed when the video ends, where YouTube would otherwise
+  // fill the frame with suggestions of other videos.
+  const waiting = !state.started || state.ended
+  if (!embed || !waiting || state.error || dismissed)
     return { show: false, image: '' }
 
   if (state.poster)

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

@@ -44,6 +44,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
@@ -159,20 +165,39 @@ export class Player implements IPlayer {
     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 +215,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'
@@ -432,6 +464,7 @@ export class Player implements IPlayer {
 
     // Update state. A new source has not played yet, so its cover returns.
     this._coverDismissed = false
+    this._playRequested = false
     this._store.batch({
       sources,
       src: sources[0],
@@ -498,6 +531,10 @@ export class Player implements IPlayer {
           mediaType: loader.mediaType(candidate.src),
           providerType: loader.type,
         })
+        if (this._playRequested) {
+          this._playRequested = false
+          void this._provider.play().catch(() => {})
+        }
         return
       }
       catch (error) {
@@ -667,11 +704,15 @@ export class Player implements IPlayer {
   // === Playback ===
 
   async play(): Promise<void> {
-    if (!this._provider) return
+    if (!this._provider) {
+      this._playRequested = true
+      return
+    }
     await this._provider.play()
   }
 
   pause(): void {
+    this._playRequested = false
     this._provider?.pause()
   }
 

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
@@ -254,8 +260,14 @@ export class YouTubeProvider extends BaseProvider {
     // Get iframe reference
     this.iframe = this.player.getIframe()
     this.iframe.className = 'ts-video-player__media'
-    // Filling the player, whatever size the provider's API gave the frame.
-    this.iframe.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:0'
+    // Three times the player's height, centred, and clipped by the player.
+    // YouTube letterboxes the video in the middle of its frame, so the video
+    // still fills the player, while the chrome it draws at the frame's edges
+    // during playback (the title bar and channel avatar at the top, the
+    // YouTube logo and "More videos" at the bottom) falls outside the clip.
+    // It cannot be styled from outside the iframe any other way.
+    this.iframe.style.cssText = 'position:absolute;left:0;top:-100%;width:100%;height:300%;border:0'
+    if (this.iframe.parentElement) this.iframe.parentElement.style.overflow = 'hidden'
   }
 
   private async loadYouTubeAPI(): Promise<void> {
@@ -297,6 +309,7 @@ export class YouTubeProvider extends BaseProvider {
     this.player?.destroy()
     this.player = null
     this.playerReady = false
+    this.pendingPlay = false
     this.iframe = null
   }
 
@@ -318,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()
     }
   }
 
@@ -334,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 })
@@ -409,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,
@@ -427,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 ===