@broadcastingplatforms/player 0.0.0-dev.3802fed → 0.0.0-dev.40838b1

package/dist/bplive/service.d.ts

@@ -5,8 +5,10 @@ export interface BPLiveResolvedResult {
     source: ResolvedPlayerSource;
     contentType: ContentType;
     poster?: string;
-    /** Aspect ratio based on orientation (portrait: 9/16, landscape: 16/9) */
-    aspectRatio?: string;
+    /** Video width from media metadata */
+    videoWidth?: number;
+    /** Video height from media metadata */
+    videoHeight?: number;
 }
 export declare class BPLiveError extends Error {
     code: string;

package/dist/components/bp-default-ui.d.ts

@@ -1,11 +1,10 @@
 import { LitElement, PropertyValues } from 'lit';
 import type { PlayerCore } from '../core/player-core';
-import type { ProviderConfig, PlayerSources } from '../providers/contract';
+import type { ProviderConfig, SourceDescription } from '../providers/contract';
 import 'media-chrome';
 import 'media-chrome/menu';
 import './bp-player';
 import './bp-error-display';
-import './bp-overlay';
 import type { BPLiveService } from '../bplive/service';
 export type BPDefaultUIReadyEvent = CustomEvent<PlayerCore>;
 declare global {
@@ -24,7 +23,7 @@ export declare class BPDefaultUI extends LitElement {
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    sources?: PlayerSources;
+    source?: SourceDescription;
     autoplay: boolean;
     muted: boolean;
     loop: boolean;
@@ -42,21 +41,22 @@ export declare class BPDefaultUI extends LitElement {
     private _player;
     private _providerType;
     private _error;
-    private _overlayType;
     private _connectionState;
-    private _hasError;
-    private _hasCustomTopChrome;
-    private _hasCustomCenteredChrome;
-    private _hasCustomBottomChrome;
+    private _showEndedOverlay;
     private _cleanupListeners;
     get player(): PlayerCore | null;
     get mediaController(): HTMLElement | null;
     get bpLive(): BPLiveService | null;
-    private _detectCustomChrome;
     private detectMobile;
+    private _getPoster;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     protected updated(_changedProperties: PropertyValues): void;
-    private _setInitialAspectRatioFromSources;
+    /** Set initial video dimensions from preferredOrientation hint */
+    private _setInitialVideoDimensionsFromSources;
+    /** Update video dimension CSS variables */
+    private _updateVideoDimensions;
+    /** Clear video dimension CSS variables */
+    private _clearVideoDimensions;
     private _moveSlottedContent;
     private setupPlayer;
     private setupPlayerListeners;

package/dist/components/bp-error-display.d.ts

@@ -12,11 +12,13 @@ declare global {
  * @slot heading - Custom heading text (for i18n)
  * @slot message - Custom message (overrides error.message)
  * @slot code - Custom error code display
+ * @slot actions - Action buttons (e.g., fullscreen button, retry button)
  *
  * @csspart icon - The icon container
  * @csspart heading - The heading element
  * @csspart message - The message element
  * @csspart code - The error code element
+ * @csspart actions - The actions container
  */
 export declare class BPErrorDisplay extends LitElement {
     static styles: import("lit").CSSResult;

package/dist/components/bp-player.d.ts

@@ -1,8 +1,9 @@
 import { LitElement, type PropertyValues } from 'lit';
 import { type PlayerCore } from '../core/player-core';
 import type { PlayerState } from '../core/state';
-import type { ProviderType, ProviderConfig, PlayerSources } from '../providers/contract';
+import type { ProviderType, ProviderConfig, SourceDescription } from '../providers/contract';
 import type { BPLiveService } from '../bplive/service';
+import { VideoRenditionList } from './video-rendition-list';
 export type BPPlayerReadyEvent = CustomEvent<PlayerCore>;
 declare global {
     interface HTMLElementTagNameMap {
@@ -12,48 +13,25 @@ declare global {
         'ready': BPPlayerReadyEvent;
     }
 }
-interface VideoRendition {
-    id: string;
-    width: number;
-    height: number;
-    bitrate: number;
-    selected: boolean;
-}
-declare class VideoRenditionList extends EventTarget {
-    [index: number]: VideoRendition;
-    private _player;
-    private _renditions;
-    private _cleanup;
-    constructor(player: BPPlayer);
-    get length(): number;
-    [Symbol.iterator](): Iterator<VideoRendition>;
-    get selectedIndex(): number;
-    set selectedIndex(index: number);
-    private _updateSelection;
-    _syncFromPlayer(): void;
-    _setupListeners(): void;
-    _destroy(): void;
-}
 export declare class BPPlayer extends LitElement {
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
-    sources?: PlayerSources;
+    source?: SourceDescription;
     autoplay: boolean;
     defaultMuted: boolean;
     loop: boolean;
-    poster?: string;
     scaling: 'letterbox' | 'crop' | 'fill';
     aspectRatio?: string;
     config?: ProviderConfig;
     debug: boolean;
     private _playerCore;
-    private _ready;
-    private _resolvedPoster;
     private containerRef;
     private providerContainer;
     private eventCleanup;
     private stateReceivers;
     private _mutationObserver;
+    private _videoRenditions;
+    private _hasDispatchedReady;
     get player(): PlayerCore | null;
     get playerState(): PlayerState | null;
     get bpLive(): BPLiveService | null;
@@ -78,28 +56,31 @@ export declare class BPPlayer extends LitElement {
     get videoHeight(): number;
     get videoElement(): HTMLVideoElement | null;
     get providerType(): ProviderType | null;
-    get videoRenditions(): VideoRenditionList;
-    private _videoRenditions;
+    get videoRenditions(): VideoRenditionList | null;
     disconnectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
-    private resolveSourcesArray;
+    /**
+     * Initialize player core once. Called in firstUpdated.
+     */
+    private initPlayerCore;
+    /**
+     * Load source into player core. Player core handles provider switching internally.
+     */
+    private loadSource;
     private handleMutation;
     private registerStateReceiver;
     private unregisterStateReceiver;
     private propagateStateToAllReceivers;
     private setupEventForwarding;
     private updateStateAttributes;
-    private initPlayer;
-    private loadPlayableSource;
     private destroyPlayer;
-    /** Set --bp-aspect-ratio CSS variable if not already defined by consumer */
-    private setAspectRatioVariable;
+    /** Update video dimension CSS variables */
+    updateVideoDimensions(width: number, height: number): void;
+    /** Clear video dimension CSS variables */
+    private clearVideoDimensions;
     private getContainerClasses;
-    private getPosterClasses;
     private getContainerStyle;
-    private getEffectivePoster;
     protected render(): import("lit").TemplateResult<1>;
 }
-export {};
 //# sourceMappingURL=bp-player.d.ts.map

package/dist/components/index.d.ts

@@ -2,4 +2,5 @@ export { BPPlayer, type BPPlayerReadyEvent } from './bp-player';
 export { BPDefaultUI, type BPDefaultUIReadyEvent } from './bp-default-ui';
 export { BPErrorDisplay } from './bp-error-display';
 export { BPOverlay, type OverlayType } from './bp-overlay';
+export { VideoRenditionList, type VideoRendition, type VideoRenditionHost } from './video-rendition-list';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/video-rendition-list.d.ts

@@ -0,0 +1,38 @@
+import type { PlayerCore } from '../core/player-core';
+/**
+ * Represents a single video rendition/quality level.
+ * Compatible with media-chrome's VideoRendition interface.
+ */
+export interface VideoRendition {
+    id: string;
+    width: number;
+    height: number;
+    bitrate: number;
+    selected: boolean;
+}
+/**
+ * Interface for the player host that provides access to PlayerCore.
+ */
+export interface VideoRenditionHost {
+    readonly player: PlayerCore | null;
+}
+/**
+ * VideoRenditionList provides media-chrome compatibility for quality selection.
+ * It exposes video quality levels as an iterable list with selection support.
+ */
+export declare class VideoRenditionList extends EventTarget {
+    [index: number]: VideoRendition;
+    private _host;
+    private _renditions;
+    private _cleanup;
+    constructor(host: VideoRenditionHost);
+    get length(): number;
+    [Symbol.iterator](): Iterator<VideoRendition>;
+    get selectedIndex(): number;
+    set selectedIndex(index: number);
+    private _updateSelection;
+    _syncFromPlayer(): void;
+    _setupListeners(): void;
+    _destroy(): void;
+}
+//# sourceMappingURL=video-rendition-list.d.ts.map

package/dist/core/index.d.ts

@@ -1,6 +1,6 @@
 export { createPlayerCore, PlayerCoreImpl } from './player-core';
-export type { PlayerCore, PlayerCoreEventMap, PlayerCoreEventType } from './player-core';
-export { createInitialState, classifyNanoPlayerError, NANOPLAYER_NO_REPLAY_CODES } from './state';
+export type { PlayerCore, PlayerCoreEventMap, PlayerCoreEventType, SourceLoadResult } from './player-core';
+export { createInitialState, classifyNanoPlayerError, classifyLiveKitError, NANOPLAYER_NO_REPLAY_CODES } from './state';
 export type { PlayerState, QualityLevel, PresentationMode, ConnectionState, StreamType, ProviderType, PlayerError, ErrorCategory, } from './state';
 export { StateReceiverMixin, StateReceiverProps, isStateReceiverElement, forEachStateReceiverElement, propagateStateToReceiver, removeStateFromReceiver, } from './state-receiver';
 export type { StateReceiverElement, StateReceiverPropertyMap } from './state-receiver';

package/dist/core/player-core.d.ts

@@ -1,5 +1,5 @@
 import type { PlayerState, QualityLevel, PresentationMode, ConnectionState, StreamType, PlayerError } from './state';
-import type { PlayerSource, ProviderConfig } from '../providers/contract';
+import type { ProviderType, PlayerSource, ProviderConfig } from '../providers/contract';
 import { BPLiveService } from '../bplive/service';
 export interface PlayerCoreEventMap {
     play: void;
@@ -17,6 +17,7 @@ export interface PlayerCoreEventMap {
         currentTime: number;
         duration: number;
     };
+    emptied: void;
     loadstart: void;
     loadedmetadata: {
         duration: number;
@@ -86,16 +87,35 @@ type EventListener<T> = (event: T) => void;
 export type CustomVideoElement = HTMLVideoElement & {
     nativeEl: HTMLVideoElement;
 };
+/**
+ * Result returned when a source is loaded, containing metadata from the source.
+ */
+export interface SourceLoadResult {
+    poster?: string;
+    videoWidth?: number;
+    videoHeight?: number;
+}
 export interface PlayerCore {
     readonly state: PlayerState;
     readonly videoElement: HTMLVideoElement | null;
     readonly bpLive: BPLiveService | null;
+    /** Whether the player is ready (attached and can accept sources) */
+    readonly ready: boolean;
+    /** Current provider type based on loaded source */
+    readonly providerType: ProviderType | null;
     addEventListener<K extends PlayerCoreEventType>(type: K | K[], listener: EventListener<PlayerCoreEventMap[K]>): void;
     removeEventListener<K extends PlayerCoreEventType>(type: K | K[], listener: EventListener<PlayerCoreEventMap[K]>): void;
-    loadSource(source: string | PlayerSource, container: HTMLElement, config?: ProviderConfig): Promise<{
-        poster?: string;
-        aspectRatio?: string;
-    } | void>;
+    /**
+     * Attach the player to a container element. Call once during initialization.
+     * After attaching, you can set sources via the source property or loadSource().
+     */
+    attach(container: HTMLElement, config?: ProviderConfig): void;
+    /**
+     * Load a source. Handles provider switching automatically.
+     * If source type changes (e.g., video -> nano), the player will
+     * destroy the old element and create a new one.
+     */
+    loadSource(source: string | PlayerSource, container?: HTMLElement, config?: ProviderConfig): Promise<SourceLoadResult | void>;
     unloadSource(): void;
     play(): Promise<void>;
     pause(): void;
@@ -106,7 +126,7 @@ export interface PlayerCore {
     setPlaybackRate(rate: number): void;
     setTargetQuality(quality: QualityLevel | null): void;
     setQuality(quality: QualityLevel | null): void;
-    setFullscreen(fullscreen: boolean): void;
+    setFullscreen(fullscreen: boolean): Promise<void>;
     setPresentationMode(mode: PresentationMode): void;
     destroy(): void;
 }
@@ -114,22 +134,32 @@ export declare class PlayerCoreImpl implements PlayerCore {
     private _state;
     private _mediaElement;
     private _container;
+    private _config;
     private _listeners;
     private _eventCleanup;
     private _destroyed;
     private _bpLive;
+    private _currentProviderType;
+    private _ready;
     constructor();
     get state(): PlayerState;
     get videoElement(): HTMLVideoElement | null;
     get bpLive(): BPLiveService | null;
+    get ready(): boolean;
+    get providerType(): ProviderType | null;
     addEventListener<K extends PlayerCoreEventType>(type: K | K[], listener: EventListener<PlayerCoreEventMap[K]>): void;
     removeEventListener<K extends PlayerCoreEventType>(type: K | K[], listener: EventListener<PlayerCoreEventMap[K]>): void;
     private dispatch;
     private updateState;
-    loadSource(source: string | PlayerSource, container: HTMLElement, config?: ProviderConfig): Promise<{
-        poster?: string;
-        aspectRatio?: string;
-    } | void>;
+    /**
+     * Attach the player to a container. Call once during initialization.
+     */
+    attach(container: HTMLElement, config?: ProviderConfig): void;
+    loadSource(source: string | PlayerSource, container?: HTMLElement, config?: ProviderConfig): Promise<SourceLoadResult | void>;
+    /**
+     * Destroy the current media element and clean up listeners.
+     */
+    private destroyMediaElement;
     private createMediaElement;
     private attachMediaElementListeners;
     private handleMediaEvent;
@@ -143,7 +173,8 @@ export declare class PlayerCoreImpl implements PlayerCore {
     setPlaybackRate(rate: number): void;
     setTargetQuality(quality: QualityLevel | null): void;
     setQuality(quality: QualityLevel | null): void;
-    setFullscreen(fullscreen: boolean): void;
+    private _getFullscreenTarget;
+    setFullscreen(fullscreen: boolean): Promise<void>;
     setPresentationMode(mode: PresentationMode): void;
     destroy(): void;
 }

package/dist/core/state.d.ts

@@ -47,5 +47,6 @@ export interface PlayerError {
 }
 export declare const NANOPLAYER_NO_REPLAY_CODES: readonly [1005, 1007, 1008, 1009, 3001, 3002, 3003, 3004, 3005, 3100, 3101, 3200, 4003];
 export declare function classifyNanoPlayerError(code: number): ErrorCategory;
+export declare function classifyLiveKitError(code: number): ErrorCategory;
 export declare function createInitialState(): PlayerState;
 //# sourceMappingURL=state.d.ts.map

package/dist/index.d.ts

@@ -7,11 +7,11 @@ export { Attribute, toggleAttribute } from './util/attribute';
 export { HlsVideoElement, HlsVideo, Hls, NanoVideoElement, NanoVideo, LiveKitVideoElement, LiveKitVideo, } from './elements/index';
 export { createPlayerCore, PlayerCoreImpl } from './core/player-core';
 export type { PlayerCore, PlayerCoreEventMap, PlayerCoreEventType, CustomVideoElement } from './core/player-core';
-export { createInitialState, classifyNanoPlayerError, NANOPLAYER_NO_REPLAY_CODES } from './core/state';
+export { createInitialState, classifyNanoPlayerError, classifyLiveKitError, NANOPLAYER_NO_REPLAY_CODES } from './core/state';
 export type { PlayerState, QualityLevel, PresentationMode, ConnectionState, StreamType, ContentType, PlayerError, ErrorCategory, } from './core/state';
 export { StateReceiverMixin, StateReceiverProps, isStateReceiverElement, forEachStateReceiverElement, propagateStateToReceiver, removeStateFromReceiver, } from './core/state-receiver';
 export type { StateReceiverElement, StateReceiverPropertyMap } from './core/state-receiver';
-export type { ProviderType, ProviderConfig, VideoProviderConfig, NanoProviderConfig, LiveKitProviderConfig, PlayerSource, ResolvedPlayerSource, VideoSource, NanoSource, LiveKitSource, PosterSource, PlayerSourceItem, PlayerSources, } from './providers/contract';
+export type { ProviderType, ProviderConfig, VideoProviderConfig, NanoProviderConfig, LiveKitProviderConfig, PlayerSource, ResolvedPlayerSource, VideoSource, NanoSource, LiveKitSource, PosterSource, PlayerSourceItem, PlayerSources, SourceDescription, } from './providers/contract';
 export { BPLiveService, BPLiveError, type BPLiveResolvedResult } from './bplive/service';
 export { isBPLiveSource, isBPLiveStreamSource, isBPLiveClipSource, } from './bplive/types';
 export type { BPLiveConfig, BPLiveSource, BPLiveStreamSource, BPLiveClipSource, BPLiveStream, BPLiveStreamResponse, BPLiveClip, BPLiveClipResponse, BPLiveChannel, BPLiveActiveStream, BPLivePlayerSource, BPLiveLiveKitPlayerSource, BPLiveNanoPlayerSource, BPLiveClipMedia, } from './bplive/types';

package/dist/providers/contract.d.ts

@@ -51,6 +51,15 @@ export type PosterSource = {
 };
 export type PlayerSourceItem = PlayerSource | PosterSource;
 export type PlayerSources = PlayerSourceItem[];
+/**
+ * Source description containing sources and optional metadata.
+ */
+export interface SourceDescription {
+    /** Array of playable sources */
+    sources: PlayerSource[];
+    /** Poster image URL */
+    poster?: string;
+}
 export interface ProviderConfig {
     libraryLocation?: string;
     video?: VideoProviderConfig;

package/dist/util/attribute.d.ts

@@ -1,7 +1,5 @@
 /**
  * Centralized HTML attributes used by BP Player components.
- *
- * Following theoplayer's pattern for consistent attribute naming.
  */
 export declare enum Attribute {
     CONFIGURATION = "configuration",
@@ -10,7 +8,6 @@ export declare enum Attribute {
     AUTOPLAY = "autoplay",
     MUTED = "muted",
     LOOP = "loop",
-    POSTER = "poster",
     SCALING = "scaling",
     ASPECT_RATIO = "aspect-ratio",
     DEBUG = "debug",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@broadcastingplatforms/player",
-  "version": "0.0.0-dev.3802fed",
+  "version": "0.0.0-dev.40838b1",
   "description": "Universal video player web component built with Lit",
   "type": "module",
   "main": "dist/bp-player.js",
@@ -36,7 +36,8 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "!**/*.map"
   ],
   "dependencies": {
     "better-call": "^1.0.6",
@@ -49,6 +50,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.10.2",
+    "concurrently": "^9.1.2",
     "esbuild": "^0.24.0",
     "typescript": "^5.7.2",
     "vite": "^6.0.5"
@@ -62,7 +64,7 @@
     "build:types": "tsc --emitDeclarationOnly",
     "build:bundle": "node build.mjs",
     "build:prod": "NODE_ENV=production pnpm build",
-    "dev": "node build.mjs --watch",
+    "dev": "concurrently \"tsc --emitDeclarationOnly --watch --preserveWatchOutput\" \"node build.mjs --watch\"",
     "dev:demo": "vite"
   }
 }