@vizor-vr/player 0.2.0

package/dist/sri.json

@@ -0,0 +1,12 @@
+{
+  "annotations-C0ugfCn4.js": "sha384-9DjwKv8po5gIDBHcBwt+TSgTYO/o10AkCAh/iNQVCP5VuLdPIbO5CfTzyo6Awbg5",
+  "captions-BP0H2E03.js": "sha384-y6Iz8yboRE1mMSVAmIDjw1zk90owOOIiOIkKO6o06+yYYvHiN3SS0eAgfmrju5M0",
+  "collab-BXPomrS0.js": "sha384-CCTDHN4a2l8g+NwuPET2SYrhBAa45IJ3TpjbzgWs+bJ648+jtIbir/KatUB0BL2n",
+  "dash-adapter-tid9ZyhO.js": "sha384-U9b0p79ZVRck/PipwaHFr0eV3k1jZ7Syw8K+z9yrS3BkLi4TVmk077k63nUtYKQE",
+  "hls-adapter-BivH46L_.js": "sha384-jOBukDUqYuL2pouXVqeORYwec9BaMTvoiLU7L6thrIhSCgypeCmENBbgfirRyoj7",
+  "register-CwnmiGEs.js": "sha384-HxozDDmTD20UrMFcKn84HPEAuXFZVnf5in26XgJw4FkaiHoXOwH7a188VLhLQ4Tf",
+  "register.js": "sha384-a/u1LFOR/riKc5C0xhFqdhS3p2SAGabZpidZlB0LB5PwJkSp227IbRbrI6npo37S",
+  "spatial-BeadwNJA.js": "sha384-HZn7bAj2gWsXmVFl+w/IeQhzEBv5/Aj7XMhkuhnu5/GZ1Kd3RdhgTIU+RGQzc5fU",
+  "three-Bci7aSeI.js": "sha384-WT17P68Bk5PWfaSGPpgMiYblkgoKrBcfOLZbjErgGMIvbwZrcWE7p/Fr9+FNR2Dy",
+  "vizor.js": "sha384-amgJdCAcF1V7r/J1J6kaJPCMXFaMoDwApArfErpyRDqPenhfH2CochC3ztohkjip"
+}

package/dist/streaming/adapter-factory.d.ts

@@ -0,0 +1,8 @@
+import type { IStreamingAdapter, AdapterType } from './types.js';
+/**
+ * Create a streaming adapter by type.
+ * HLS and DASH adapters are lazy-loaded via dynamic import
+ * to keep the core bundle small.
+ */
+export declare function createAdapter(type: AdapterType): Promise<IStreamingAdapter>;
+//# sourceMappingURL=adapter-factory.d.ts.map

package/dist/streaming/adapter-factory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter-factory.d.ts","sourceRoot":"","sources":["../../src/streaming/adapter-factory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAGjE;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAcjF"}

package/dist/streaming/dash-adapter.d.ts

@@ -0,0 +1,21 @@
+import type { QualityLevel } from '@vizor-vr/shared';
+import type { IStreamingAdapter } from './types.js';
+/**
+ * DASH streaming adapter wrapping dashjs.
+ * Lazy-loaded via dynamic import — only included in the bundle
+ * when a DASH source is detected.
+ */
+export declare class DashAdapter implements IStreamingAdapter {
+    private videoElement;
+    private player;
+    private _isAttached;
+    private levels;
+    get supportsABR(): boolean;
+    get isAttached(): boolean;
+    attach(videoElement: HTMLVideoElement): void;
+    load(url: string): Promise<void>;
+    getQualityLevels(): QualityLevel[];
+    setQualityLevel(index: number): void;
+    destroy(): void;
+}
+//# sourceMappingURL=dash-adapter.d.ts.map

package/dist/streaming/dash-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dash-adapter.d.ts","sourceRoot":"","sources":["../../src/streaming/dash-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD;;;;GAIG;AACH,qBAAa,WAAY,YAAW,iBAAiB;IACnD,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,MAAM,CAAsB;IAEpC,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,MAAM,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI;IAKtC,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAsCtC,gBAAgB,IAAI,YAAY,EAAE;IAIlC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAoBpC,OAAO,IAAI,IAAI;CAShB"}

package/dist/streaming/hls-adapter.d.ts

@@ -0,0 +1,26 @@
+import type { QualityLevel } from '@vizor-vr/shared';
+import type { IStreamingAdapter } from './types.js';
+/**
+ * HLS streaming adapter wrapping hls.js.
+ * Lazy-loaded via dynamic import — only included in the bundle
+ * when an HLS source is detected.
+ *
+ * Falls back to native HLS on Safari (no hls.js needed).
+ */
+export declare class HlsAdapter implements IStreamingAdapter {
+    private videoElement;
+    private hls;
+    private _isAttached;
+    private _isNative;
+    private levels;
+    /** Enable low-latency mode for live streams */
+    lowLatencyMode: boolean;
+    get supportsABR(): boolean;
+    get isAttached(): boolean;
+    attach(videoElement: HTMLVideoElement): void;
+    load(url: string): Promise<void>;
+    getQualityLevels(): QualityLevel[];
+    setQualityLevel(index: number): void;
+    destroy(): void;
+}
+//# sourceMappingURL=hls-adapter.d.ts.map

package/dist/streaming/hls-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hls-adapter.d.ts","sourceRoot":"","sources":["../../src/streaming/hls-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD;;;;;;GAMG;AACH,qBAAa,UAAW,YAAW,iBAAiB;IAClD,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,GAAG,CAAwB;IACnC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,MAAM,CAAsB;IAEpC,+CAA+C;IAC/C,cAAc,UAAS;IAEvB,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,MAAM,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI;IAKtC,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAsEtC,gBAAgB,IAAI,YAAY,EAAE;IAIlC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMpC,OAAO,IAAI,IAAI;CAUhB"}

package/dist/streaming/progressive-adapter.d.ts

@@ -0,0 +1,18 @@
+import type { QualityLevel } from '@vizor-vr/shared';
+import type { IStreamingAdapter } from './types.js';
+/**
+ * Progressive MP4/WebM adapter.
+ * Sets the video source directly — no adaptive bitrate.
+ */
+export declare class ProgressiveAdapter implements IStreamingAdapter {
+    private videoElement;
+    private _isAttached;
+    get supportsABR(): boolean;
+    get isAttached(): boolean;
+    attach(videoElement: HTMLVideoElement): void;
+    load(url: string): void;
+    getQualityLevels(): QualityLevel[];
+    setQualityLevel(_index: number): void;
+    destroy(): void;
+}
+//# sourceMappingURL=progressive-adapter.d.ts.map

package/dist/streaming/progressive-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressive-adapter.d.ts","sourceRoot":"","sources":["../../src/streaming/progressive-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD;;;GAGG;AACH,qBAAa,kBAAmB,YAAW,iBAAiB;IAC1D,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,WAAW,CAAS;IAE5B,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,MAAM,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI;IAK5C,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKvB,gBAAgB,IAAI,YAAY,EAAE;IAIlC,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAIrC,OAAO,IAAI,IAAI;CAOhB"}

package/dist/streaming/quality-selector.d.ts

@@ -0,0 +1,25 @@
+import type { QualityLevel } from '@vizor-vr/shared';
+import type { PlayerState } from '../core/player-state.js';
+import type { IStreamingAdapter } from './types.js';
+/**
+ * Coordinates quality switching between the streaming adapter and PlayerState.
+ * Provides a clean API for the quality menu control.
+ */
+export declare class QualitySelector {
+    private adapter;
+    private state;
+    constructor(state: PlayerState);
+    /** Connect to the current streaming adapter */
+    setAdapter(adapter: IStreamingAdapter): void;
+    /** Get available quality levels */
+    getLevels(): QualityLevel[];
+    /** Set quality by index (-1 = auto) */
+    setLevel(index: number): void;
+    /** Whether auto quality (ABR) is active */
+    get isAuto(): boolean;
+    /** Whether the adapter supports quality switching */
+    get supportsQuality(): boolean;
+    /** Sync state from adapter */
+    private syncState;
+}
+//# sourceMappingURL=quality-selector.d.ts.map

package/dist/streaming/quality-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality-selector.d.ts","sourceRoot":"","sources":["../../src/streaming/quality-selector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD;;;GAGG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,KAAK,CAAc;gBAEf,KAAK,EAAE,WAAW;IAI9B,+CAA+C;IAC/C,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI;IAK5C,mCAAmC;IACnC,SAAS,IAAI,YAAY,EAAE;IAI3B,uCAAuC;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAY7B,2CAA2C;IAC3C,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,qDAAqD;IACrD,IAAI,eAAe,IAAI,OAAO,CAE7B;IAED,8BAA8B;IAC9B,OAAO,CAAC,SAAS;CAWlB"}

package/dist/streaming/source-manager.d.ts

@@ -0,0 +1,46 @@
+import type { ParsedSource, QualityLevel } from '@vizor-vr/shared';
+import type { PlayerState } from '../core/player-state.js';
+import type { VzEventEmitter } from '../core/event-emitter.js';
+/**
+ * Manages source selection and streaming adapter lifecycle.
+ *
+ * Responsibilities:
+ * - Detect MIME type to determine adapter type (progressive/hls/dash)
+ * - Instantiate the correct adapter via lazy-loaded factory
+ * - Coordinate quality switching with PlayerState
+ * - Handle multi-source progressive switching (preserves currentTime)
+ */
+export declare class SourceManager {
+    private adapter;
+    private videoElement;
+    private state;
+    private events;
+    private sources;
+    /**
+     * Load sources into the video element using the appropriate adapter.
+     */
+    loadSources(sources: ParsedSource[], videoElement: HTMLVideoElement, state: PlayerState, events: VzEventEmitter): Promise<void>;
+    /** Get available quality levels from the current adapter */
+    getQualityLevels(): QualityLevel[];
+    /** Set quality level (-1 for auto) */
+    setQualityLevel(index: number): void;
+    /** Whether the current adapter supports ABR */
+    get supportsABR(): boolean;
+    /** Switch to a different progressive source by index (preserves currentTime) */
+    switchSource(index: number): void;
+    /** Dispose the adapter and release resources */
+    dispose(): void;
+    /**
+     * Select the best source and adapter type.
+     * Prefers adaptive (HLS/DASH) over progressive when available.
+     */
+    private selectSource;
+    /** Detect adapter type from source MIME type or URL extension */
+    private detectAdapterType;
+    /**
+     * Poll for quality levels after a short delay.
+     * Adaptive adapters need time to parse the manifest before levels are available.
+     */
+    private pollQualityLevels;
+}
+//# sourceMappingURL=source-manager.d.ts.map

package/dist/streaming/source-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-manager.d.ts","sourceRoot":"","sources":["../../src/streaming/source-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAI/D;;;;;;;;GAQG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,OAAO,CAAsB;IAErC;;OAEG;IACG,WAAW,CACf,OAAO,EAAE,YAAY,EAAE,EACvB,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,cAAc,GACrB,OAAO,CAAC,IAAI,CAAC;IAuBhB,4DAA4D;IAC5D,gBAAgB,IAAI,YAAY,EAAE;IAIlC,sCAAsC;IACtC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAiBpC,+CAA+C;IAC/C,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,gFAAgF;IAChF,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAiBjC,gDAAgD;IAChD,OAAO,IAAI,IAAI;IASf;;;OAGG;IACH,OAAO,CAAC,YAAY;IAapB,iEAAiE;IACjE,OAAO,CAAC,iBAAiB;IAmBzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;CAoB1B"}

package/dist/streaming/types.d.ts

@@ -0,0 +1,25 @@
+import type { QualityLevel } from '@vizor-vr/shared';
+/** Adapter type identifier */
+export type AdapterType = 'progressive' | 'hls' | 'dash';
+/**
+ * Common interface for all streaming adapters.
+ * Each adapter wraps a specific playback technology
+ * (progressive MP4, hls.js, dashjs) behind a uniform API.
+ */
+export interface IStreamingAdapter {
+    /** Attach the adapter to a <video> element */
+    attach(videoElement: HTMLVideoElement): void;
+    /** Load a source URL */
+    load(url: string): void;
+    /** Get available quality levels (empty for progressive) */
+    getQualityLevels(): QualityLevel[];
+    /** Set active quality level (-1 for auto ABR) */
+    setQualityLevel(index: number): void;
+    /** Whether this adapter supports ABR */
+    readonly supportsABR: boolean;
+    /** Whether the adapter is currently attached */
+    readonly isAttached: boolean;
+    /** Destroy the adapter and release resources */
+    destroy(): void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/streaming/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/streaming/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,8BAA8B;AAC9B,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzD;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,8CAA8C;IAC9C,MAAM,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE7C,wBAAwB;IACxB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB,2DAA2D;IAC3D,gBAAgB,IAAI,YAAY,EAAE,CAAC;IAEnC,iDAAiD;IACjD,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErC,wCAAwC;IACxC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAE9B,gDAAgD;IAChD,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,gDAAgD;IAChD,OAAO,IAAI,IAAI,CAAC;CACjB"}

package/dist/styles/controls.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Controls CSS injected into the shadow DOM.
+ * Vimeo-inspired design: thin progress bar, subtle gradient,
+ * frosted glass big play, smooth transitions.
+ *
+ * CSS custom properties for theming:
+ *   --vz-primary          Accent color (default: #f43f5e)
+ *   --vz-controls-bg      Control bar gradient end (default: rgba(0,0,0,0.6))
+ *   --vz-progress-height  Progress bar resting height (default: 3px)
+ *   --vz-progress-color   Progress fill color (default: --vz-primary)
+ *   --vz-controls-transition  Fade duration (default: 0.3s)
+ *   --vz-button-size      Button hit-area size (default: 36px)
+ */
+export declare const CONTROLS_CSS = "\n  /* ------------------------------------------------------------------ */\n  /* Layout \u2014 wrapper + seek above button row                            */\n  /* ------------------------------------------------------------------ */\n\n  .vz-controls-wrapper {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    user-select: none;\n    -webkit-user-select: none;\n    transition: opacity var(--vz-controls-transition, 0.3s) ease,\n                transform 0.2s ease;\n  }\n\n  .vz-controls-wrapper.hidden {\n    opacity: 0;\n    pointer-events: none;\n    transform: translateY(4px);\n  }\n\n  /* Progress bar sits above the button row */\n  .vz-seek-row {\n    position: relative;\n    width: 100%;\n    padding: 0 12px;\n    cursor: pointer;\n    z-index: 11;\n  }\n\n  /* Button row */\n  .vz-controls {\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    padding: 4px 8px 6px;\n    background: linear-gradient(transparent, var(--vz-controls-bg, rgba(0, 0, 0, 0.6)));\n    backdrop-filter: blur(4px);\n    -webkit-backdrop-filter: blur(4px);\n    color: #fff;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    font-size: 13px;\n  }\n\n  .vz-controls-left {\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    flex-shrink: 0;\n  }\n\n  .vz-controls-center {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .vz-controls-right {\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    flex-shrink: 0;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Buttons                                                             */\n  /* ------------------------------------------------------------------ */\n\n  .vz-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--vz-button-size, 36px);\n    height: var(--vz-button-size, 36px);\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: #fff;\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: opacity 0.15s, transform 0.15s;\n    opacity: 0.9;\n  }\n\n  .vz-btn:hover {\n    opacity: 1;\n    transform: scale(1.1);\n  }\n\n  .vz-btn:active {\n    transform: scale(0.95);\n  }\n\n  .vz-btn:focus-visible {\n    outline: 2px solid var(--vz-primary, #f43f5e);\n    outline-offset: 2px;\n  }\n\n  .vz-btn svg {\n    width: 20px;\n    height: 20px;\n    fill: currentColor;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Seek / Progress bar                                                 */\n  /* ------------------------------------------------------------------ */\n\n  .vz-seek-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 18px;\n    cursor: pointer;\n  }\n\n  .vz-seek-track {\n    position: relative;\n    width: 100%;\n    height: var(--vz-progress-height, 3px);\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 99px;\n    overflow: visible;\n    transition: height 0.15s ease;\n  }\n\n  .vz-seek-container:hover .vz-seek-track {\n    height: 5px;\n  }\n\n  .vz-seek-buffered {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    background: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0.25),\n      rgba(255, 255, 255, 0.35)\n    );\n    border-radius: 99px;\n  }\n\n  .vz-seek-played {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    background: var(--vz-progress-color, var(--vz-primary, #f43f5e));\n    border-radius: 99px;\n    box-shadow: 0 0 8px rgba(244, 63, 94, 0.4);\n    box-shadow: 0 0 8px color-mix(in srgb, var(--vz-primary, #f43f5e) 40%, transparent);\n  }\n\n  .vz-seek-thumb {\n    position: absolute;\n    top: 50%;\n    width: 13px;\n    height: 13px;\n    border-radius: 50%;\n    background: #fff;\n    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n    transform: translate(-50%, -50%) scale(0);\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\n    pointer-events: none;\n  }\n\n  .vz-seek-container:hover .vz-seek-thumb {\n    transform: translate(-50%, -50%) scale(1);\n    box-shadow: 0 0 6px rgba(244, 63, 94, 0.5);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--vz-primary, #f43f5e) 50%, transparent);\n  }\n\n  .vz-seek-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    opacity: 0;\n    cursor: pointer;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  /* Hover time tooltip */\n  .vz-seek-tooltip {\n    position: absolute;\n    bottom: 100%;\n    margin-bottom: 6px;\n    padding: 3px 7px;\n    background: var(--vz-secondary, rgba(0, 0, 0, 0.85));\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n    color: #fff;\n    font-size: 12px;\n    font-variant-numeric: tabular-nums;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    border-radius: 4px;\n    white-space: nowrap;\n    pointer-events: none;\n    transform: translateX(-50%);\n    opacity: 0;\n    transition: opacity 0.12s;\n  }\n\n  .vz-seek-container:hover .vz-seek-tooltip {\n    opacity: 1;\n  }\n\n  .vz-time {\n    font-size: 12px;\n    font-weight: 400;\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n    padding: 0 6px;\n    flex-shrink: 0;\n    opacity: 0.9;\n    letter-spacing: 0.02em;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Volume \u2014 horizontal slide-out on hover                              */\n  /* ------------------------------------------------------------------ */\n\n  .vz-volume {\n    display: flex;\n    align-items: center;\n    gap: 0;\n    overflow: hidden;\n  }\n\n  .vz-volume-slider-wrap {\n    width: 0;\n    overflow: hidden;\n    transition: width 0.2s ease;\n  }\n\n  .vz-volume:hover .vz-volume-slider-wrap {\n    width: 64px;\n  }\n\n  .vz-volume-slider {\n    width: 60px;\n    height: 4px;\n    margin: 0 4px;\n    -webkit-appearance: none;\n    appearance: none;\n    background: rgba(255, 255, 255, 0.3);\n    border-radius: 99px;\n    outline: none;\n    cursor: pointer;\n  }\n\n  .vz-volume-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n  }\n\n  .vz-volume-slider::-moz-range-thumb {\n    width: 12px;\n    height: 12px;\n    border: none;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Quality menu                                                        */\n  /* ------------------------------------------------------------------ */\n\n  .vz-quality-menu {\n    position: relative;\n  }\n\n  .vz-quality-dropdown {\n    position: absolute;\n    bottom: 100%;\n    right: 0;\n    margin-bottom: 8px;\n    background: var(--vz-secondary, rgba(20, 20, 30, 0.95));\n    backdrop-filter: blur(16px) saturate(1.3);\n    -webkit-backdrop-filter: blur(16px) saturate(1.3);\n    border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 8px;\n    padding: 4px 0;\n    min-width: 120px;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);\n    display: none;\n    z-index: 20;\n  }\n\n  .vz-quality-dropdown.open {\n    display: block;\n  }\n\n  .vz-quality-option {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    cursor: pointer;\n    font-size: 13px;\n    color: rgba(255, 255, 255, 0.7);\n    white-space: nowrap;\n    transition: color 0.12s, background 0.12s;\n  }\n\n  .vz-quality-option:hover {\n    background: rgba(244, 63, 94, 0.08);\n    background: color-mix(in srgb, var(--vz-primary, #f43f5e) 8%, transparent);\n    color: #fff;\n  }\n\n  .vz-quality-option.active {\n    color: var(--vz-primary, #f43f5e);\n  }\n\n  .vz-quality-check {\n    width: 16px;\n    font-size: 14px;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Compass                                                             */\n  /* ------------------------------------------------------------------ */\n\n  .vz-compass {\n    position: relative;\n  }\n\n  .vz-compass svg {\n    fill: none;\n    stroke: currentColor;\n    transition: transform 0.1s ease-out;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Loading spinner \u2014 CSS ring                                          */\n  /* ------------------------------------------------------------------ */\n\n  .vz-loading {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 44px;\n    height: 44px;\n    z-index: 5;\n    pointer-events: none;\n  }\n\n  .vz-loading-spinner {\n    width: 100%;\n    height: 100%;\n    border: 2.5px solid rgba(255, 255, 255, 0.15);\n    border-top-color: var(--vz-primary, #f43f5e);\n    border-radius: 50%;\n    animation: vz-spin 0.75s linear infinite;\n  }\n\n  .vz-loading.hidden {\n    display: none;\n  }\n\n  @keyframes vz-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Big play button \u2014 frosted glass                                     */\n  /* ------------------------------------------------------------------ */\n\n  .vz-big-play {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 68px;\n    height: 68px;\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 50%;\n    background: rgba(15, 10, 20, 0.4);\n    backdrop-filter: blur(12px) saturate(1.2);\n    -webkit-backdrop-filter: blur(12px) saturate(1.2);\n    color: #fff;\n    cursor: pointer;\n    z-index: 5;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;\n    opacity: 1;\n    box-shadow: 0 0 20px rgba(244, 63, 94, 0.15);\n    box-shadow: 0 0 20px color-mix(in srgb, var(--vz-primary, #f43f5e) 15%, transparent);\n  }\n\n  .vz-big-play:hover {\n    background: rgba(15, 10, 20, 0.55);\n    transform: translate(-50%, -50%) scale(1.08);\n    box-shadow: 0 0 30px rgba(244, 63, 94, 0.25);\n    box-shadow: 0 0 30px color-mix(in srgb, var(--vz-primary, #f43f5e) 25%, transparent);\n  }\n\n  .vz-big-play.hidden {\n    opacity: 0;\n    pointer-events: none;\n    transform: translate(-50%, -50%) scale(0.85);\n  }\n\n  .vz-big-play svg {\n    width: 30px;\n    height: 30px;\n    fill: currentColor;\n    margin-left: 3px; /* visual centering for play triangle */\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Watermark                                                           */\n  /* ------------------------------------------------------------------ */\n\n  .vz-watermark {\n    position: absolute;\n    bottom: 48px;\n    right: 12px;\n    z-index: 15;\n    pointer-events: auto;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Controls behavior variants                                          */\n  /* ------------------------------------------------------------------ */\n\n  /* \"always\" mode \u2014 never hide */\n  :host([controls-behavior=\"always\"]) .vz-controls-wrapper {\n    opacity: 1 !important;\n    pointer-events: auto !important;\n    transform: none !important;\n  }\n\n  /* \"minimal\" mode \u2014 only thin progress bar always visible */\n  :host([controls-behavior=\"minimal\"]) .vz-controls-wrapper.hidden .vz-controls {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([controls-behavior=\"minimal\"]) .vz-controls-wrapper.hidden .vz-seek-row {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host([controls-behavior=\"minimal\"]) .vz-controls-wrapper.hidden {\n    opacity: 1;\n    pointer-events: auto;\n    transform: none;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Live indicator                                                      */\n  /* ------------------------------------------------------------------ */\n\n  .vz-live-indicator {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 0 8px;\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: opacity 0.2s;\n    user-select: none;\n  }\n\n  .vz-live-indicator:hover {\n    opacity: 1;\n  }\n\n  .vz-live-dot {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 12px;\n    height: 12px;\n  }\n\n  .vz-live-dot svg {\n    width: 10px;\n    height: 10px;\n  }\n\n  .vz-live-dot.at-edge {\n    color: #ef4444;\n    animation: vz-live-pulse 2s ease-in-out infinite;\n  }\n\n  .vz-live-dot.behind {\n    color: #6b7280;\n    animation: none;\n  }\n\n  .vz-live-label {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: rgba(255, 255, 255, 0.9);\n  }\n\n  @keyframes vz-live-pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.5; }\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Caption overlay (HUD)                                               */\n  /* ------------------------------------------------------------------ */\n\n  .vz-caption-overlay {\n    position: absolute;\n    bottom: 60px;\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: 80%;\n    padding: 4px 12px;\n    background: rgba(0, 0, 0, 0.75);\n    border-radius: 4px;\n    color: #fff;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    font-size: 16px;\n    line-height: 1.4;\n    text-align: center;\n    z-index: 12;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  .vz-caption-overlay.visible {\n    opacity: 1;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* CC button & dropdown                                                */\n  /* ------------------------------------------------------------------ */\n\n  .vz-cc-menu {\n    position: relative;\n  }\n\n  .vz-cc-btn.active {\n    color: var(--vz-primary, #f43f5e);\n    opacity: 1;\n  }\n\n  .vz-cc-dropdown {\n    position: absolute;\n    bottom: 100%;\n    right: 0;\n    margin-bottom: 8px;\n    background: var(--vz-secondary, rgba(20, 20, 30, 0.95));\n    backdrop-filter: blur(16px) saturate(1.3);\n    -webkit-backdrop-filter: blur(16px) saturate(1.3);\n    border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 8px;\n    padding: 4px 0;\n    min-width: 120px;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);\n    display: none;\n    z-index: 20;\n  }\n\n  .vz-cc-dropdown.open {\n    display: block;\n  }\n\n  .vz-cc-option {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    cursor: pointer;\n    font-size: 13px;\n    color: rgba(255, 255, 255, 0.7);\n    white-space: nowrap;\n    transition: color 0.12s, background 0.12s;\n  }\n\n  .vz-cc-option:hover {\n    background: rgba(244, 63, 94, 0.08);\n    background: color-mix(in srgb, var(--vz-primary, #f43f5e) 8%, transparent);\n    color: #fff;\n  }\n\n  .vz-cc-option.active {\n    color: var(--vz-primary, #f43f5e);\n  }\n\n  .vz-cc-check {\n    width: 16px;\n    font-size: 14px;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Chat badge                                                          */\n  /* ------------------------------------------------------------------ */\n\n  .vz-chat-badge {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    min-width: 16px;\n    height: 16px;\n    border-radius: 8px;\n    background: #ef4444;\n    color: #fff;\n    font-size: 10px;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 4px;\n    pointer-events: none;\n    line-height: 1;\n  }\n\n  /* ------------------------------------------------------------------ */\n  /* Responsive                                                          */\n  /* ------------------------------------------------------------------ */\n\n  @media (max-width: 400px) {\n    .vz-volume-slider-wrap,\n    .vz-volume-slider {\n      display: none;\n    }\n  }\n";
+//# sourceMappingURL=controls.d.ts.map

package/dist/styles/controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/styles/controls.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,01gBAwoBxB,CAAC"}