ts-video-player 0.1.9 → 0.1.10

package/dist/{chunk-fvxawgp5.js → chunk-cay3ahqr.js}

@@ -148,6 +148,8 @@ class BaseProvider2 {
   }
   destroy() {
     this._ready = false;
+    this.stopEmbedFullscreen?.();
+    this.stopEmbedFullscreen = null;
     this.cleanup();
     this.events.removeAllListeners();
   }
@@ -167,6 +169,25 @@ class BaseProvider2 {
     return [];
   }
   setAudioTrack(_trackId) {}
+  stopEmbedFullscreen = null;
+  announceEmbedFeatures() {
+    if (typeof document === "undefined" || typeof HTMLMediaElement === "undefined")
+      return;
+    const fullscreenAvailability = this.getFeatureAvailability("fullscreen");
+    const pipAvailability = this.getFeatureAvailability("pip");
+    const volumeAvailability = this.getFeatureAvailability("volume");
+    this.events.emit("statechange", {
+      canFullscreen: fullscreenAvailability === "available",
+      canPictureInPicture: pipAvailability === "available",
+      fullscreenAvailability,
+      pipAvailability,
+      volumeAvailability
+    });
+    this.events.emit("availabilitychange", "fullscreen", fullscreenAvailability);
+    this.events.emit("availabilitychange", "pip", pipAvailability);
+    this.events.emit("availabilitychange", "volume", volumeAvailability);
+    this.stopEmbedFullscreen ??= onFullscreenChange2((fullscreen) => this.events.emit("fullscreenchange", fullscreen));
+  }
   getFeatureAvailability(feature) {
     const el = this.mediaElement;
     const media = el instanceof HTMLMediaElement ? el : null;
@@ -267,6 +288,8 @@ class HTML5Provider2 extends BaseProvider2 {
     this.isAudio = this.options.mediaType === "audio";
     this.media = document.createElement(this.isAudio ? "audio" : "video");
     this.media.className = "ts-video-player__media";
+    if (!this.isAudio)
+      this.media.style.cssText = "display:block;width:100%;height:100%;object-fit:contain;background:#000";
     if (this.options.autoplay)
       this.media.autoplay = true;
     if (this.options.loop)
@@ -715,6 +738,7 @@ class YouTubeProvider2 extends BaseProvider2 {
     }, 250);
     this.events.emit("loadedmetadata");
     this.events.emit("canplay");
+    this.announceEmbedFeatures();
     if (this.pendingVideoId) {
       const videoId = this.pendingVideoId;
       this.pendingVideoId = null;
@@ -1066,10 +1090,9 @@ class VimeoProvider2 extends BaseProvider2 {
     this.events.emit("statechange", {
       videoWidth: width,
       videoHeight: height,
-      aspectRatio: width / height || 16 / 9,
-      canFullscreen: true,
-      canPictureInPicture: false
+      aspectRatio: width / height || 16 / 9
     });
+    this.announceEmbedFeatures();
   }
   attachVimeoEvents() {
     if (!this.player)
@@ -1279,6 +1302,7 @@ class HLSProvider2 extends BaseProvider2 {
     }
     this.video = document.createElement("video");
     this.video.className = "ts-video-player__media";
+    this.video.style.cssText = "display:block;width:100%;height:100%;object-fit:contain;background:#000";
     if (this.options.autoplay)
       this.video.autoplay = true;
     if (this.options.loop)
@@ -3241,7 +3265,8 @@ class Player2 {
     if (this.state.pictureInPicture) {
       await this.exitPiP();
     }
-    await this._provider?.enterFullscreen();
+    const media = this._provider?.mediaElement;
+    await enterFullscreen2(this._el, media instanceof HTMLMediaElement ? media : null);
     if (this._options.fullscreenOrientationLock !== false) {
       lockOrientation2("landscape");
     }

package/dist/elements/index.js

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

package/dist/index.js

@@ -63,7 +63,7 @@ import {
   applyPosition2,
   MediaSettingsMenu2,
   registerElements2
-} from "./chunk-fvxawgp5.js";
+} from "./chunk-cay3ahqr.js";
 import {
   playback2,
   volume2,

package/dist/providers/base.d.ts

@@ -43,6 +43,18 @@ export declare abstract class BaseProvider implements Provider {
     setTextTrackMode(_trackId: string, _mode: 'disabled' | 'hidden' | 'showing'): void;
     getAudioTracks(): AudioTrack[];
     setAudioTrack(_trackId: string): void;
+    private stopEmbedFullscreen;
+    /**
+     * What an embedded player (YouTube, Vimeo) can do, said once it is ready.
+     *
+     * The native-media providers say it on loadedmetadata; the embeds said
+     * nothing, so fullscreen stayed "unavailable" and its button disabled,
+     * though the player can fill the screen like any other. Fullscreen is the
+     * container's own (the player's controls come along); picture in picture
+     * is the embed's business. Also follows the document into and out of
+     * fullscreen, which only the native providers did.
+     */
+    protected announceEmbedFeatures(): void;
     getFeatureAvailability(feature: 'volume' | 'fullscreen' | 'pip'): FeatureAvailability;
     enterFullscreen(): Promise<void>;
     exitFullscreen(): Promise<void>;

package/package.json

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

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 { enterFullscreen as enterFullscreenElement } from './core/features'
 import { label } from './elements/utils'
 
 // =============================================================================
@@ -799,7 +800,12 @@ export class Player implements IPlayer {
     if (this.state.pictureInPicture) {
       await this.exitPiP()
     }
-    await this._provider?.enterFullscreen()
+    // The whole player, controls included: the provider's own container holds
+    // only the media, so a fullscreen video had no controls to pause or seek
+    // with. A browser that can only take the <video> itself fullscreen (iOS
+    // Safari) still gets it, with the system's controls.
+    const media = this._provider?.mediaElement
+    await enterFullscreenElement(this._el, media instanceof HTMLMediaElement ? media : null)
     if (this._options.fullscreenOrientationLock !== false) {
       lockOrientation('landscape')
     }

package/src/providers/base.ts

@@ -18,7 +18,7 @@ import type {
   MediaError,
   FeatureAvailability,
 } from '../types'
-import { EventEmitter } from '../core/events'
+import { EventEmitter, onFullscreenChange } from '../core/events'
 import {
   detectVolumeAvailability,
   detectFullscreenAvailability,
@@ -63,6 +63,8 @@ export abstract class BaseProvider implements Provider {
 
   destroy(): void {
     this._ready = false
+    this.stopEmbedFullscreen?.()
+    this.stopEmbedFullscreen = null
     this.cleanup()
     this.events.removeAllListeners()
   }
@@ -132,6 +134,37 @@ export abstract class BaseProvider implements Provider {
 
   // === Feature Availability ===
 
+  private stopEmbedFullscreen: (() => void) | null = null
+
+  /**
+   * What an embedded player (YouTube, Vimeo) can do, said once it is ready.
+   *
+   * The native-media providers say it on loadedmetadata; the embeds said
+   * nothing, so fullscreen stayed "unavailable" and its button disabled,
+   * though the player can fill the screen like any other. Fullscreen is the
+   * container's own (the player's controls come along); picture in picture
+   * is the embed's business. Also follows the document into and out of
+   * fullscreen, which only the native providers did.
+   */
+  protected announceEmbedFeatures(): void {
+    // Nothing to measure without a page (server rendering, tests).
+    if (typeof document === 'undefined' || typeof HTMLMediaElement === 'undefined') return
+    const fullscreenAvailability = this.getFeatureAvailability('fullscreen')
+    const pipAvailability = this.getFeatureAvailability('pip')
+    const volumeAvailability = this.getFeatureAvailability('volume')
+    this.events.emit('statechange', {
+      canFullscreen: fullscreenAvailability === 'available',
+      canPictureInPicture: pipAvailability === 'available',
+      fullscreenAvailability,
+      pipAvailability,
+      volumeAvailability,
+    })
+    this.events.emit('availabilitychange', 'fullscreen', fullscreenAvailability)
+    this.events.emit('availabilitychange', 'pip', pipAvailability)
+    this.events.emit('availabilitychange', 'volume', volumeAvailability)
+    this.stopEmbedFullscreen ??= onFullscreenChange(fullscreen => this.events.emit('fullscreenchange', fullscreen))
+  }
+
   getFeatureAvailability(feature: 'volume' | 'fullscreen' | 'pip'): FeatureAvailability {
     // Only pass media element if it's actually an HTMLMediaElement (not an iframe)
     const el = this.mediaElement

package/src/providers/hls.ts

@@ -207,6 +207,11 @@ export class HLSProvider extends BaseProvider {
     // Create video element
     this.video = document.createElement('video')
     this.video.className = 'ts-video-player__media'
+    // Sized here: inside <video-player>'s shadow root no page stylesheet
+    // reaches it, and unsized a <video> shows at its own resolution, clipped
+    // by the player (a 1280px clip in a 1024px dialog lost its edges, and
+    // in fullscreen it sat in a corner). Letterboxed, never cropped.
+    this.video.style.cssText = 'display:block;width:100%;height:100%;object-fit:contain;background:#000'
 
     // Set attributes
     if (this.options.autoplay) this.video.autoplay = true

package/src/providers/html5.ts

@@ -114,6 +114,11 @@ export class HTML5Provider extends BaseProvider {
     // Create media element
     this.media = document.createElement(this.isAudio ? 'audio' : 'video')
     this.media.className = 'ts-video-player__media'
+    // Sized here: inside <video-player>'s shadow root no page stylesheet
+    // reaches it, and unsized a <video> shows at its own resolution, clipped
+    // by the player (a 1280px clip in a 1024px dialog lost its edges, and
+    // in fullscreen it sat in a corner). Letterboxed, never cropped.
+    if (!this.isAudio) this.media.style.cssText = 'display:block;width:100%;height:100%;object-fit:contain;background:#000'
 
     // Set attributes
     if (this.options.autoplay) this.media.autoplay = true

package/src/providers/vimeo.ts

@@ -310,9 +310,8 @@ export class VimeoProvider extends BaseProvider {
       videoWidth: width,
       videoHeight: height,
       aspectRatio: width / height || 16 / 9,
-      canFullscreen: true,
-      canPictureInPicture: false,
     })
+    this.announceEmbedFeatures()
   }
 
   private attachVimeoEvents(): void {

package/src/providers/youtube.ts

@@ -328,6 +328,7 @@ export class YouTubeProvider extends BaseProvider {
     // Emit initial state
     this.events.emit('loadedmetadata')
     this.events.emit('canplay')
+    this.announceEmbedFeatures()
 
     // Load pending video if any
     if (this.pendingVideoId) {