@zcomponent/three-video-player 1.2.1 → 2.0.0-alpha.2

package/README.md

@@ -143,3 +143,4 @@ export class CustomVideoComponent extends Group {
  }
 }
 ```
+

package/index.js

@@ -1,4 +1 @@
-/* eslint-disable n/no-unsupported-features/es-syntax */
-/* eslint-disable n/no-missing-import */
-
 export * from './lib';

package/lib/components/basevideo.d.ts

@@ -1,29 +1,30 @@
+import { ContextManager, Event, PlayOptions, Stream, ValueOf } from '@zcomponent/core';
+import { Object3D } from '@zcomponent/three/components/Object3D';
+import { MeshChromaKeyMaterial } from '@zcomponent/three/internal/MeshChromaKeyMaterial';
+import { MeshSideBySideAlphaMaterial, SideBySideDirectionValue } from '@zcomponent/three/internal/MeshSideBySideAlphaMaterial';
 import * as THREE from 'three';
-import { ContextManager, Event, Observable, PlayOptions, Stream } from '@zcomponent/core';
-import { Object3D } from '@zcomponent/three/lib/components/Object3D';
-import { MeshChromaKeyMaterial } from '@zcomponent/three/lib/internal/MeshChromaKeyMaterial';
-import { MeshSideBySideAlphaMaterial, SideBySideDirection } from '@zcomponent/three/lib/internal/MeshSideBySideAlphaMaterial';
-export declare enum VideoTransparencyType {
-    none = "none",
-    chromaKey = "chromaKey",
-    sideBySide = "sideBySide"
-}
+export declare const VideoTransparencyType: {
+    readonly none: "none";
+    readonly chromaKey: "chromaKey";
+    readonly sideBySide: "sideBySide";
+};
+export type VideoTransparencyTypeValue = ValueOf<typeof VideoTransparencyType>;
 export interface BaseVideoConstructorProps {
     geometry?: THREE.BufferGeometry;
     /**
      * Support videos with transparency
      *
-     * @zprop
-     * @zdefault none
+     *
+     * @default none
      */
-    transparent: VideoTransparencyType;
-    /** @zprop
-     * @zdefault false
+    transparent: VideoTransparencyTypeValue;
+    /**
+     * @default false
      */
     autoplay: boolean;
     /**
-     * @zprop
-     * @zdefault default
+     *
+     * @default default
      */
     audioLayer?: string;
 }
@@ -32,10 +33,6 @@ export interface BaseVideoConstructorProps {
  * Supports various video transparency types, including chroma key and side-by-side transparency.
  *
  * Root element: [THREE.Group](https://threejs.org/docs/index.html#api/en/objects/Group)
- * @zicon video_library
- * @ztag three/Object3D/BaseVideo
- * @zparents three/Object3D/Group/**
- * @zgroup Media
  * @zstream
  */
 export declare abstract class BaseVideo extends Object3D implements Stream {
@@ -51,103 +48,104 @@ export declare abstract class BaseVideo extends Object3D implements Stream {
     material: THREE.MeshBasicMaterial | MeshChromaKeyMaterial | MeshSideBySideAlphaMaterial;
     mesh: THREE.Mesh;
     texture: THREE.VideoTexture;
-    transparent: VideoTransparencyType;
+    transparent: VideoTransparencyTypeValue;
     videoElement: HTMLVideoElement;
     protected _gain: GainNode;
+    /**
+     * @default false
+     */
     protected _hadUserEvent: boolean;
     constructor(ctx: ContextManager, constructorProps: BaseVideoConstructorProps);
     private _updateSize;
     private _updateMute;
     /**
      * The volume of the video, from 0 to 1.
-     * @zprop
+     * @default 1
+     * @zui
      * @ztype proportion
-     * @zdefault 1
      */
-    volume: Observable<number, never>;
+    volume: number;
     /**
      * Whether the video is muted.
-     * @zprop
-     * @zdefault false
+     * @default false
      */
-    muted: Observable<boolean, never>;
+    muted: boolean;
     /**
      * Whether the video should loop when it reaches the end.
-     * @zprop
-     * @zdefault false
+     * @default false
      */
-    loop: Observable<boolean, never>;
+    loop: boolean;
     /**
      * Plays the video.
-     * @zprop
      * @zui
      */
     play(opts?: PlayOptions): void;
     /**
      * Pauses the video.
-     * @zprop
      * @zui
      */
     pause(): void;
     /**
      * Stops the video and resets the playback position to the beginning.
-     * @zprop
      * @zui
      */
     stop(): void;
     /**
      * Seeks to a specified time in the video in milliseconds.
-     * @zprop
      * @zui
      */
-    seek(/** @ztype time-milliseconds */ t: number): void;
+    seek(t: number): void;
     length(): number | undefined;
     isStalled(): boolean;
     /**
      * The chroma key similarity value, from 0 to 1.
-     * @zprop
+     * @default 0.05
+     * @zui
      * @zgroup Chroma Key Transparency
      * @ztype proportion
-     * @zdefault 0.05
      */
-    similarity: Observable<number, never>;
+    similarity: number;
     /**
      * The smoothness of the chroma key, from 0 to 1.
-     * @zprop
+     * @default 0.08
+     * @zui
      * @zgroup Chroma Key Transparency
      * @ztype proportion
-     * @zdefault 0.08
      */
-    smoothness: Observable<number, never>;
+    smoothness: number;
     /**
      * The spill of the chroma key, from 0 to 1.
-     * @zprop
+     * @default 0.2
+     * @zui
      * @zgroup Chroma Key Transparency
      * @ztype proportion
-     * @zdefault 0.2
      */
-    spill: Observable<number, never>;
+    spill: number;
     /**
      * The key color of the chroma key, as an RGB array.
-     * @zprop
+     * @default [0,1,0]
+     * @zui
      * @zgroup Chroma Key Transparency
      * @ztype color-norm-rgb-linear
-     * @zdefault [0, 1, 0]
      */
-    keyColor: Observable<[number, number, number], never>;
+    keyColor: [
+        number,
+        number,
+        number
+    ];
     /**
      * The direction of the side-by-side transparency.
-     * @zprop
+     * @default "LeftRight"
+     * @zui
      * @zgroup Side By Side Transparency
-     * @zdefault LeftRight
      */
-    direction: Observable<SideBySideDirection, never>;
+    direction: SideBySideDirectionValue;
     /**
      * Whether the alpha channel is first or second in the side-by-side transparency.
-     * @zprop
+     * @default false
+     * @zui
      * @zgroup Side By Side Transparency
-     * @zdefault false
      */
-    alphaFirst: Observable<boolean, never>;
+    alphaFirst: boolean;
     dispose(): never;
 }

package/lib/components/basevideo.js

@@ -1,237 +1,351 @@
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+import { AudioContextContext, Event, isDesignTime, nextUserEvent, registerLoadable, started, useOnBeforeRender, zObserve, zUI } from '@zcomponent/core';
+import { Object3D } from '@zcomponent/three/components/Object3D';
+import { MeshChromaKeyMaterial } from '@zcomponent/three/internal/MeshChromaKeyMaterial';
+import { MeshSideBySideAlphaMaterial, SideBySideDirection } from '@zcomponent/three/internal/MeshSideBySideAlphaMaterial';
 import * as THREE from 'three';
-import { AudioContextContext, Event, isDesignTime, nextUserEvent, Observable, registerLoadable, started, useOnBeforeRender } from '@zcomponent/core';
-import { Object3D } from '@zcomponent/three/lib/components/Object3D';
-import { MeshChromaKeyMaterial } from '@zcomponent/three/lib/internal/MeshChromaKeyMaterial';
-import { MeshSideBySideAlphaMaterial, SideBySideDirection } from '@zcomponent/three/lib/internal/MeshSideBySideAlphaMaterial';
-import { EncodingType } from '@zcomponent/three/lib';
-import { legacy_set_texture_encoding } from '@zcomponent/three/lib/utils';
-export var VideoTransparencyType;
-(function (VideoTransparencyType) {
-    VideoTransparencyType["none"] = "none";
-    VideoTransparencyType["chromaKey"] = "chromaKey";
-    VideoTransparencyType["sideBySide"] = "sideBySide";
-})(VideoTransparencyType || (VideoTransparencyType = {}));
+export const VideoTransparencyType = {
+    none: 'none',
+    chromaKey: 'chromaKey',
+    sideBySide: 'sideBySide',
+};
+Object.freeze(VideoTransparencyType);
 /**
  * Abstract base class for video components in a 3D environment.
  * Supports various video transparency types, including chroma key and side-by-side transparency.
  *
  * Root element: [THREE.Group](https://threejs.org/docs/index.html#api/en/objects/Group)
- * @zicon video_library
- * @ztag three/Object3D/BaseVideo
- * @zparents three/Object3D/Group/**
- * @zgroup Media
  * @zstream
  */
-export class BaseVideo extends Object3D {
-    constructor(ctx, constructorProps) {
-        super(ctx, constructorProps, new THREE.Group());
-        this.constructorProps = constructorProps;
-        this.onEnded = new Event();
-        this.onPause = new Event();
-        this.onPlay = new Event();
-        this.onPlaying = new Event();
-        this.onWaiting = new Event();
-        this.onError = new Event();
-        this._hadUserEvent = false;
-        this._updateSize = () => {
+let BaseVideo = (() => {
+    let _classSuper = Object3D;
+    let _instanceExtraInitializers = [];
+    let _volume_decorators;
+    let _volume_initializers = [];
+    let _volume_extraInitializers = [];
+    let _muted_decorators;
+    let _muted_initializers = [];
+    let _muted_extraInitializers = [];
+    let _loop_decorators;
+    let _loop_initializers = [];
+    let _loop_extraInitializers = [];
+    let _play_decorators;
+    let _pause_decorators;
+    let _stop_decorators;
+    let _seek_decorators;
+    let _similarity_decorators;
+    let _similarity_initializers = [];
+    let _similarity_extraInitializers = [];
+    let _smoothness_decorators;
+    let _smoothness_initializers = [];
+    let _smoothness_extraInitializers = [];
+    let _spill_decorators;
+    let _spill_initializers = [];
+    let _spill_extraInitializers = [];
+    let _keyColor_decorators;
+    let _keyColor_initializers = [];
+    let _keyColor_extraInitializers = [];
+    let _direction_decorators;
+    let _direction_initializers = [];
+    let _direction_extraInitializers = [];
+    let _alphaFirst_decorators;
+    let _alphaFirst_initializers = [];
+    let _alphaFirst_extraInitializers = [];
+    return class BaseVideo extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _volume_decorators = [zUI({ type: 'proportion' }), zObserve((v, instance) => {
+                    instance._gain.gain.value = v;
+                })];
+            _muted_decorators = [zUI()];
+            _loop_decorators = [zUI(), zObserve((v, instance) => {
+                    instance.videoElement.loop = v;
+                })];
+            _play_decorators = [zUI()];
+            _pause_decorators = [zUI()];
+            _stop_decorators = [zUI()];
+            _seek_decorators = [zUI({ type: 'time-milliseconds' })];
+            _similarity_decorators = [zUI({ group: 'Chroma Key Transparency', type: 'proportion' })];
+            _smoothness_decorators = [zUI({ group: 'Chroma Key Transparency', type: 'proportion' })];
+            _spill_decorators = [zUI({ group: 'Chroma Key Transparency', type: 'proportion' })];
+            _keyColor_decorators = [zUI({ group: 'Chroma Key Transparency', type: 'color-norm-rgb-linear' })];
+            _direction_decorators = [zUI({ group: 'Side By Side Transparency' })];
+            _alphaFirst_decorators = [zUI({ group: 'Side By Side Transparency' })];
+            __esDecorate(this, null, _play_decorators, { kind: "method", name: "play", static: false, private: false, access: { has: obj => "play" in obj, get: obj => obj.play }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _pause_decorators, { kind: "method", name: "pause", static: false, private: false, access: { has: obj => "pause" in obj, get: obj => obj.pause }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _stop_decorators, { kind: "method", name: "stop", static: false, private: false, access: { has: obj => "stop" in obj, get: obj => obj.stop }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _seek_decorators, { kind: "method", name: "seek", static: false, private: false, access: { has: obj => "seek" in obj, get: obj => obj.seek }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _volume_decorators, { kind: "field", name: "volume", static: false, private: false, access: { has: obj => "volume" in obj, get: obj => obj.volume, set: (obj, value) => { obj.volume = value; } }, metadata: _metadata }, _volume_initializers, _volume_extraInitializers);
+            __esDecorate(null, null, _muted_decorators, { kind: "field", name: "muted", static: false, private: false, access: { has: obj => "muted" in obj, get: obj => obj.muted, set: (obj, value) => { obj.muted = value; } }, metadata: _metadata }, _muted_initializers, _muted_extraInitializers);
+            __esDecorate(null, null, _loop_decorators, { kind: "field", name: "loop", static: false, private: false, access: { has: obj => "loop" in obj, get: obj => obj.loop, set: (obj, value) => { obj.loop = value; } }, metadata: _metadata }, _loop_initializers, _loop_extraInitializers);
+            __esDecorate(null, null, _similarity_decorators, { kind: "field", name: "similarity", static: false, private: false, access: { has: obj => "similarity" in obj, get: obj => obj.similarity, set: (obj, value) => { obj.similarity = value; } }, metadata: _metadata }, _similarity_initializers, _similarity_extraInitializers);
+            __esDecorate(null, null, _smoothness_decorators, { kind: "field", name: "smoothness", static: false, private: false, access: { has: obj => "smoothness" in obj, get: obj => obj.smoothness, set: (obj, value) => { obj.smoothness = value; } }, metadata: _metadata }, _smoothness_initializers, _smoothness_extraInitializers);
+            __esDecorate(null, null, _spill_decorators, { kind: "field", name: "spill", static: false, private: false, access: { has: obj => "spill" in obj, get: obj => obj.spill, set: (obj, value) => { obj.spill = value; } }, metadata: _metadata }, _spill_initializers, _spill_extraInitializers);
+            __esDecorate(null, null, _keyColor_decorators, { kind: "field", name: "keyColor", static: false, private: false, access: { has: obj => "keyColor" in obj, get: obj => obj.keyColor, set: (obj, value) => { obj.keyColor = value; } }, metadata: _metadata }, _keyColor_initializers, _keyColor_extraInitializers);
+            __esDecorate(null, null, _direction_decorators, { kind: "field", name: "direction", static: false, private: false, access: { has: obj => "direction" in obj, get: obj => obj.direction, set: (obj, value) => { obj.direction = value; } }, metadata: _metadata }, _direction_initializers, _direction_extraInitializers);
+            __esDecorate(null, null, _alphaFirst_decorators, { kind: "field", name: "alphaFirst", static: false, private: false, access: { has: obj => "alphaFirst" in obj, get: obj => obj.alphaFirst, set: (obj, value) => { obj.alphaFirst = value; } }, metadata: _metadata }, _alphaFirst_initializers, _alphaFirst_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        constructorProps = __runInitializers(this, _instanceExtraInitializers);
+        onEnded = new Event();
+        onPause = new Event();
+        onPlay = new Event();
+        onPlaying = new Event();
+        onWaiting = new Event();
+        onError = new Event();
+        geometry;
+        material;
+        mesh;
+        texture;
+        transparent;
+        videoElement;
+        _gain;
+        /**
+         * @default false
+         */
+        _hadUserEvent = false;
+        constructor(ctx, constructorProps) {
+            super(ctx, constructorProps, new THREE.Group());
+            __runInitializers(this, _alphaFirst_extraInitializers);
+            this.constructorProps = constructorProps;
+            const videoElement = document.createElement('video');
+            videoElement.crossOrigin = 'anonymous';
+            videoElement.playsInline = true;
+            videoElement.muted = true;
+            videoElement.preload = 'auto';
+            videoElement.onended = () => this.onEnded.emit(this);
+            videoElement.onpause = () => this.onPause.emit(this);
+            videoElement.onplay = () => this.onPlay.emit(this);
+            videoElement.onplaying = () => this.onPlaying.emit(this);
+            videoElement.onwaiting = () => this.onWaiting.emit(this);
+            videoElement.onerror = () => this.onError.emit(this);
+            this.geometry = constructorProps.geometry ?? new THREE.PlaneGeometry();
+            registerLoadable(ctx, new Promise((resolve, reject) => {
+                videoElement.addEventListener('canplaythrough', () => {
+                    this._updateSize();
+                    resolve();
+                });
+                videoElement.addEventListener('error', err => {
+                    console.error(err);
+                    reject();
+                });
+            }));
+            const audioContextContext = ctx.get(AudioContextContext);
+            this._gain = new GainNode(audioContextContext.audioContext);
+            const audioSource = audioContextContext.audioContext.createMediaElementSource(videoElement);
+            audioSource.connect(this._gain);
+            this._gain.connect(audioContextContext.getLayer(constructorProps.audioLayer));
+            this.transparent = constructorProps.transparent ?? VideoTransparencyType.none;
+            this.videoElement = videoElement;
+            this.texture = new THREE.VideoTexture(videoElement);
+            this.texture.colorSpace = THREE.SRGBColorSpace;
+            if (this.transparent === VideoTransparencyType.chromaKey) {
+                const mat = new MeshChromaKeyMaterial();
+                this.material = mat;
+                mat.map = this.texture;
+                this.observe(this, 'similarity', v => {
+                    mat.similarity = v;
+                });
+                this.observe(this, 'smoothness', v => {
+                    mat.smoothness = v;
+                });
+                this.observe(this, 'spill', v => {
+                    mat.spill = v;
+                });
+                this.observe(this, 'keyColor', v => {
+                    mat.keyColor = [...v];
+                });
+                this.register(useOnBeforeRender(this.contextManager), () => mat.frame());
+            }
+            else if (this.transparent === VideoTransparencyType.sideBySide) {
+                const mat = new MeshSideBySideAlphaMaterial();
+                this.material = mat;
+                mat.map = this.texture;
+                this.observe(this, 'alphaFirst', v => {
+                    mat.alphaFirst = v;
+                });
+                this.observe(this, 'direction', v => {
+                    mat.direction = v;
+                });
+                this.register(useOnBeforeRender(this.contextManager), () => mat.frame());
+            }
+            else {
+                this.material = new THREE.MeshBasicMaterial({ toneMapped: false, map: this.texture });
+            }
+            this.mesh = new THREE.Mesh(this.geometry, this.material);
+            this.element.add(this.mesh);
+            this.videoElement.addEventListener('loadeddata', this._updateSize);
+            this.videoElement.addEventListener('loadedmetadata', this._updateSize);
+            this.observe(this, 'muted', this._updateMute);
+            nextUserEvent(ctx).then(() => {
+                this._hadUserEvent = true;
+                this._updateMute();
+            });
+            if (!isDesignTime(ctx) && constructorProps.autoplay)
+                started(ctx).then(() => this.play());
+        }
+        _updateSize = () => {
             if (this.videoElement.videoHeight === 0)
                 return;
             let transparencyAspectFix = 1;
             if (this.transparent === VideoTransparencyType.sideBySide) {
-                transparencyAspectFix = this.direction.value === SideBySideDirection.LeftRight ? 0.5 : 2;
+                transparencyAspectFix = this.direction === SideBySideDirection.LeftRight ? 0.5 : 2;
             }
             this.mesh.scale.set((transparencyAspectFix * this.videoElement.videoWidth) / this.videoElement.videoHeight, 1, 1);
         };
-        this._updateMute = () => {
+        _updateMute = () => {
             if (!this.videoElement || !this._hadUserEvent)
                 return;
-            this.videoElement.muted = this.muted.value;
+            this.videoElement.muted = this.muted;
         };
         /**
          * The volume of the video, from 0 to 1.
-         * @zprop
+         * @default 1
+         * @zui
          * @ztype proportion
-         * @zdefault 1
          */
-        this.volume = new Observable(1, v => (this._gain.gain.value = v));
+        volume = __runInitializers(this, _volume_initializers, 1);
         /**
          * Whether the video is muted.
-         * @zprop
-         * @zdefault false
+         * @default false
          */
-        this.muted = new Observable(false);
+        muted = (__runInitializers(this, _volume_extraInitializers), __runInitializers(this, _muted_initializers, false));
         /**
          * Whether the video should loop when it reaches the end.
-         * @zprop
-         * @zdefault false
+         * @default false
+         */
+        loop = (__runInitializers(this, _muted_extraInitializers), __runInitializers(this, _loop_initializers, false));
+        /**
+         * Plays the video.
+         * @zui
+         */
+        play(opts) {
+            this.videoElement.playbackRate = opts?.speed ?? 1;
+            this.videoElement.play();
+        }
+        /**
+         * Pauses the video.
+         * @zui
+         */
+        pause() {
+            this.videoElement.pause();
+        }
+        /**
+         * Stops the video and resets the playback position to the beginning.
+         * @zui
          */
-        this.loop = new Observable(false, v => {
-            this.videoElement.loop = v;
-        });
+        stop() {
+            this.videoElement.pause();
+            this.videoElement.currentTime = 0;
+        }
+        /**
+         * Seeks to a specified time in the video in milliseconds.
+         * @zui
+         */
+        seek(t) {
+            this.videoElement.currentTime = t / 1000;
+        }
+        length() {
+            return isNaN(this.videoElement.duration) ? undefined : this.videoElement.duration * 1000;
+        }
+        isStalled() {
+            return this.videoElement.readyState <= 2;
+        }
         /**
          * The chroma key similarity value, from 0 to 1.
-         * @zprop
+         * @default 0.05
+         * @zui
          * @zgroup Chroma Key Transparency
          * @ztype proportion
-         * @zdefault 0.05
          */
-        this.similarity = new Observable(0.05);
+        similarity = (__runInitializers(this, _loop_extraInitializers), __runInitializers(this, _similarity_initializers, 0.05));
         /**
          * The smoothness of the chroma key, from 0 to 1.
-         * @zprop
+         * @default 0.08
+         * @zui
          * @zgroup Chroma Key Transparency
          * @ztype proportion
-         * @zdefault 0.08
          */
-        this.smoothness = new Observable(0.08);
+        smoothness = (__runInitializers(this, _similarity_extraInitializers), __runInitializers(this, _smoothness_initializers, 0.08));
         /**
          * The spill of the chroma key, from 0 to 1.
-         * @zprop
+         * @default 0.2
+         * @zui
          * @zgroup Chroma Key Transparency
          * @ztype proportion
-         * @zdefault 0.2
          */
-        this.spill = new Observable(0.2);
+        spill = (__runInitializers(this, _smoothness_extraInitializers), __runInitializers(this, _spill_initializers, 0.2));
         /**
          * The key color of the chroma key, as an RGB array.
-         * @zprop
+         * @default [0,1,0]
+         * @zui
          * @zgroup Chroma Key Transparency
          * @ztype color-norm-rgb-linear
-         * @zdefault [0, 1, 0]
          */
-        this.keyColor = new Observable([0, 1, 0]);
+        keyColor = (__runInitializers(this, _spill_extraInitializers), __runInitializers(this, _keyColor_initializers, [0, 1, 0]));
         /**
          * The direction of the side-by-side transparency.
-         * @zprop
+         * @default "LeftRight"
+         * @zui
          * @zgroup Side By Side Transparency
-         * @zdefault LeftRight
          */
-        this.direction = new Observable(SideBySideDirection.LeftRight);
+        direction = (__runInitializers(this, _keyColor_extraInitializers), __runInitializers(this, _direction_initializers, SideBySideDirection.LeftRight));
         /**
          * Whether the alpha channel is first or second in the side-by-side transparency.
-         * @zprop
+         * @default false
+         * @zui
          * @zgroup Side By Side Transparency
-         * @zdefault false
          */
-        this.alphaFirst = new Observable(false);
-        const videoElement = document.createElement('video');
-        videoElement.crossOrigin = 'anonymous';
-        videoElement.playsInline = true;
-        videoElement.muted = true;
-        videoElement.preload = 'auto';
-        videoElement.onended = () => this.onEnded.emit(this);
-        videoElement.onpause = () => this.onPause.emit(this);
-        videoElement.onplay = () => this.onPlay.emit(this);
-        videoElement.onplaying = () => this.onPlaying.emit(this);
-        videoElement.onwaiting = () => this.onWaiting.emit(this);
-        videoElement.onerror = () => this.onError.emit(this);
-        this.geometry = constructorProps.geometry ?? new THREE.PlaneGeometry();
-        registerLoadable(ctx, new Promise((resolve, reject) => {
-            videoElement.addEventListener('canplaythrough', () => {
-                this._updateSize();
-                resolve();
-            });
-            videoElement.addEventListener('error', err => {
-                console.error(err);
-                reject();
-            });
-        }));
-        const audioContextContext = ctx.get(AudioContextContext);
-        this._gain = new GainNode(audioContextContext.audioContext);
-        const audioSource = audioContextContext.audioContext.createMediaElementSource(videoElement);
-        audioSource.connect(this._gain);
-        this._gain.connect(audioContextContext.getLayer(constructorProps.audioLayer));
-        this.transparent = constructorProps.transparent ?? VideoTransparencyType.none;
-        this.videoElement = videoElement;
-        this.texture = new THREE.VideoTexture(videoElement);
-        legacy_set_texture_encoding(this.texture, EncodingType.sRGBEncoding);
-        if (this.transparent === VideoTransparencyType.chromaKey) {
-            const mat = new MeshChromaKeyMaterial();
-            this.material = mat;
-            mat.map = this.texture;
-            this.register(this.similarity, v => (mat.similarity = v));
-            this.register(this.smoothness, v => (mat.smoothness = v));
-            this.register(this.spill, v => (mat.spill = v));
-            this.register(this.keyColor, v => (mat.keyColor = [...v]));
-            this.register(useOnBeforeRender(this.contextManager), () => mat.frame());
-        }
-        else if (this.transparent === VideoTransparencyType.sideBySide) {
-            const mat = new MeshSideBySideAlphaMaterial();
-            this.material = mat;
-            mat.map = this.texture;
-            this.register(this.alphaFirst, v => (mat.alphaFirst = v));
-            this.register(this.direction, v => (mat.direction = v));
-            this.register(useOnBeforeRender(this.contextManager), () => mat.frame());
+        alphaFirst = (__runInitializers(this, _direction_extraInitializers), __runInitializers(this, _alphaFirst_initializers, false));
+        dispose() {
+            this.geometry.dispose();
+            this.material.map?.dispose();
+            this.material.dispose();
+            this.texture.dispose();
+            this.videoElement.pause();
+            this.videoElement.onended = null;
+            this.videoElement.onpause = null;
+            this.videoElement.onplay = null;
+            this.videoElement.onplaying = null;
+            this.videoElement.onwaiting = null;
+            this.videoElement.onerror = null;
+            this.videoElement.src = '';
+            this.videoElement.srcObject = null;
+            return super.dispose();
         }
-        else {
-            this.material = new THREE.MeshBasicMaterial({ toneMapped: false, map: this.texture });
-        }
-        this.mesh = new THREE.Mesh(this.geometry, this.material);
-        this.element.add(this.mesh);
-        this.videoElement.addEventListener('loadeddata', this._updateSize);
-        this.videoElement.addEventListener('loadedmetadata', this._updateSize);
-        this.register(this.muted, this._updateMute);
-        nextUserEvent(ctx).then(() => {
-            this._hadUserEvent = true;
-            this._updateMute();
-        });
-        if (!isDesignTime(ctx) && constructorProps.autoplay)
-            started(ctx).then(() => this.play());
-    }
-    /**
-     * Plays the video.
-     * @zprop
-     * @zui
-     */
-    play(opts) {
-        this.videoElement.playbackRate = opts?.speed ?? 1;
-        this.videoElement.play();
-    }
-    /**
-     * Pauses the video.
-     * @zprop
-     * @zui
-     */
-    pause() {
-        this.videoElement.pause();
-    }
-    /**
-     * Stops the video and resets the playback position to the beginning.
-     * @zprop
-     * @zui
-     */
-    stop() {
-        this.videoElement.pause();
-        this.videoElement.currentTime = 0;
-    }
-    /**
-     * Seeks to a specified time in the video in milliseconds.
-     * @zprop
-     * @zui
-     */
-    seek(/** @ztype time-milliseconds */ t) {
-        this.videoElement.currentTime = t / 1000;
-    }
-    length() {
-        return isNaN(this.videoElement.duration) ? undefined : this.videoElement.duration * 1000;
-    }
-    isStalled() {
-        return this.videoElement.readyState <= 2;
-    }
-    dispose() {
-        this.geometry.dispose();
-        this.material.map?.dispose();
-        this.material.dispose();
-        this.texture.dispose();
-        this.videoElement.pause();
-        this.videoElement.onended = null;
-        this.videoElement.onpause = null;
-        this.videoElement.onplay = null;
-        this.videoElement.onplaying = null;
-        this.videoElement.onwaiting = null;
-        this.videoElement.onerror = null;
-        this.videoElement.src = '';
-        this.videoElement.srcObject = null;
-        return super.dispose();
-    }
-}
+    };
+})();
+export { BaseVideo };

package/lib/components/videoplayer.d.ts

@@ -1,10 +1,9 @@
-import { ContextManager } from '@zcomponent/core';
-import { BaseVideo, BaseVideoConstructorProps } from '../index';
+import { ContextManager, ProjectFile } from '@zcomponent/core';
+import { BaseVideo, BaseVideoConstructorProps } from './basevideo';
 export interface VideoConstructorProps extends BaseVideoConstructorProps {
-    /** @zprop
-     * @zvalues files *.m3u8, *.mp4
+    /**
      */
-    source: string;
+    source: ProjectFile<'*.m3u8' | '*.mp4'>;
 }
 /**
  *
@@ -18,12 +17,15 @@ export interface VideoConstructorProps extends BaseVideoConstructorProps {
  * Root element: [THREE.Group](https://threejs.org/docs/index.html#api/en/objects/Group)
  * @zcomponent
  * @zicon video_library
+ * @zgroup Media
  * @ztag three/Object3D/Video
  * @zparents three/Object3D/Group/**
- * @zgroup Media
  */
 export declare class VideoPlayer extends BaseVideo {
     protected constructorProps: VideoConstructorProps;
+    /**
+     * @default null
+     */
     private hls;
     constructor(ctx: ContextManager, constructorProps: VideoConstructorProps);
     load(): Promise<void>;

package/lib/components/videoplayer.js

@@ -1,7 +1,41 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
 // TODO- import type and dynamic import later
+import { registerLoadable, zComponent } from '@zcomponent/core';
 import Hls from 'hls.js';
-import { registerLoadable } from '@zcomponent/core';
-import { BaseVideo } from '../index';
+import { BaseVideo } from './basevideo';
 /**
  *
  * Manages the playback and display of a video in a 3D environment.
@@ -14,87 +48,113 @@ import { BaseVideo } from '../index';
  * Root element: [THREE.Group](https://threejs.org/docs/index.html#api/en/objects/Group)
  * @zcomponent
  * @zicon video_library
+ * @zgroup Media
  * @ztag three/Object3D/Video
  * @zparents three/Object3D/Group/**
- * @zgroup Media
  */
-export class VideoPlayer extends BaseVideo {
-    constructor(ctx, constructorProps) {
-        super(ctx, constructorProps);
-        this.constructorProps = constructorProps;
-        this.hls = null;
-        registerLoadable(this.contextManager, this.load());
-    }
-    async load() {
-        const isHls = this.constructorProps.source.endsWith('.m3u8');
-        if (isHls && !isIOS())
-            return this._loadHlsVideo();
-        return this._loadMp4Video();
-    }
-    async _loadHlsVideo() {
-        if (!Hls.isSupported()) {
-            // Consider adding a fallback to MP4
-            console.error('HLS is not supported in this browser.');
-            return;
+let VideoPlayer = (() => {
+    let _classDecorators = [zComponent({
+            icon: 'video_library',
+            group: 'Media',
+            tags: ['three/Object3D/Video'],
+            parents: ['three/Object3D/Group/**'],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = BaseVideo;
+    var VideoPlayer = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            VideoPlayer = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
         }
-        this.hls = new Hls();
-        return new Promise((resolve, reject) => {
-            this.hls?.on(Hls.Events.MEDIA_ATTACHED, () => { });
-            this.hls?.on(Hls.Events.MANIFEST_PARSED, () => {
-                resolve();
-            });
-            this.hls?.on(Hls.Events.ERROR, (event, data) => {
-                if (data.fatal) {
-                    switch (data.type) {
-                        case Hls.ErrorTypes.NETWORK_ERROR:
-                            console.error('HLS: Fatal network error encountered, trying to recover');
-                            this.hls?.startLoad();
-                            break;
-                        case Hls.ErrorTypes.MEDIA_ERROR:
-                            console.error('HLS: Fatal media error encountered, trying to recover');
-                            this.hls?.recoverMediaError();
-                            break;
-                        default:
-                            console.error('HLS: Fatal error, cannot recover');
-                            this.hls?.destroy();
-                            reject('HLS: Fatal error, cannot recover');
-                            break;
+        constructorProps;
+        /**
+         * @default null
+         */
+        hls = null;
+        constructor(ctx, constructorProps) {
+            super(ctx, constructorProps);
+            this.constructorProps = constructorProps;
+            registerLoadable(this.contextManager, this.load());
+        }
+        async load() {
+            const isHls = this.constructorProps.source.endsWith('.m3u8');
+            if (isHls && !isIOS())
+                return this._loadHlsVideo();
+            return this._loadMp4Video();
+        }
+        async _loadHlsVideo() {
+            if (!Hls.isSupported()) {
+                // Consider adding a fallback to MP4
+                console.error('HLS is not supported in this browser.');
+                return;
+            }
+            this.hls = new Hls();
+            return new Promise((resolve, reject) => {
+                this.hls?.on(Hls.Events.MEDIA_ATTACHED, () => { });
+                this.hls?.on(Hls.Events.MANIFEST_PARSED, () => {
+                    resolve();
+                });
+                this.hls?.on(Hls.Events.ERROR, (event, data) => {
+                    if (data.fatal) {
+                        switch (data.type) {
+                            case Hls.ErrorTypes.NETWORK_ERROR:
+                                console.error('HLS: Fatal network error encountered, trying to recover');
+                                this.hls?.startLoad();
+                                break;
+                            case Hls.ErrorTypes.MEDIA_ERROR:
+                                console.error('HLS: Fatal media error encountered, trying to recover');
+                                this.hls?.recoverMediaError();
+                                break;
+                            default:
+                                console.error('HLS: Fatal error, cannot recover');
+                                this.hls?.destroy();
+                                reject('HLS: Fatal error, cannot recover');
+                                break;
+                        }
                     }
-                }
+                });
+                this.hls?.loadSource(this.constructorProps.source);
+                this.hls?.attachMedia(this.videoElement);
             });
-            this.hls?.loadSource(this.constructorProps.source);
-            this.hls?.attachMedia(this.videoElement);
-        });
-    }
-    async _loadMp4Video() {
-        return new Promise((resolve, reject) => {
-            const onCanPlay = () => {
-                cleanup();
-                resolve();
-            };
-            const onError = e => {
-                console.error('MP4: Error loading video', e);
-                cleanup();
-                reject(new Error('MP4 video loading error'));
-            };
-            const cleanup = () => {
-                this.videoElement.removeEventListener('canplay', onCanPlay);
-                this.videoElement.removeEventListener('error', onError);
-            };
-            this.videoElement.addEventListener('canplay', onCanPlay);
-            this.videoElement.addEventListener('error', onError);
-            this.videoElement.src = this.constructorProps.source;
-            this.videoElement.load();
-        });
-    }
-    dispose() {
-        if (this.hls) {
-            this.hls.destroy();
-            this.hls = null;
         }
-        return super.dispose();
-    }
-}
+        async _loadMp4Video() {
+            return new Promise((resolve, reject) => {
+                const onCanPlay = () => {
+                    cleanup();
+                    resolve();
+                };
+                const onError = e => {
+                    console.error('MP4: Error loading video', e);
+                    cleanup();
+                    reject(new Error('MP4 video loading error'));
+                };
+                const cleanup = () => {
+                    this.videoElement.removeEventListener('canplay', onCanPlay);
+                    this.videoElement.removeEventListener('error', onError);
+                };
+                this.videoElement.addEventListener('canplay', onCanPlay);
+                this.videoElement.addEventListener('error', onError);
+                this.videoElement.src = this.constructorProps.source;
+                this.videoElement.load();
+            });
+        }
+        dispose() {
+            if (this.hls) {
+                this.hls.destroy();
+                this.hls = null;
+            }
+            return super.dispose();
+        }
+    };
+    return VideoPlayer = _classThis;
+})();
+export { VideoPlayer };
 function isIOS() {
     return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
 }

package/lib/index.d.ts

@@ -1,4 +1,2 @@
-export { BaseVideo, BaseVideoConstructorProps } from './components/basevideo';
-export { VideoTransparencyType } from './components/basevideo';
-export { VideoConstructorProps } from './components/videoplayer';
-export { VideoPlayer } from './components/videoplayer';
+export { BaseVideo, BaseVideoConstructorProps, VideoTransparencyType } from './components/basevideo';
+export { VideoConstructorProps, VideoPlayer } from './components/videoplayer';

package/lib/index.js

@@ -1,3 +1,2 @@
-export { BaseVideo } from './components/basevideo';
-export { VideoTransparencyType } from './components/basevideo';
+export { BaseVideo, VideoTransparencyType } from './components/basevideo';
 export { VideoPlayer } from './components/videoplayer';

package/package.json

@@ -1,11 +1,28 @@
 {
   "name": "@zcomponent/three-video-player",
-  "version": "1.2.1",
+  "version": "2.0.0-alpha.2",
   "description": "HLS & MP4 Player for Mattercraft",
   "author": "Zappar Limited",
   "license": "Proprietary",
   "main": "index.js",
   "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./*": {
+      "development": "./src/*.ts",
+      "types": "./lib/*.d.ts",
+      "default": "./lib/*.js"
+    },
+    "./lib/*": {
+      "development": "./src/*.ts",
+      "types": "./lib/*.d.ts",
+      "default": "./lib/*.js"
+    }
+  },
   "zexports": [
     "./lib/**/*"
   ],
@@ -19,7 +36,7 @@
     "public/**/*"
   ],
   "scripts": {
-    "build": "rm -rf lib && tsc && tsc-alias",
+    "build": "rm -rf lib && tspc && tsc-alias",
     "watch": "tsc -w",
     "docs": "typedoc --out docs",
     "predocs": "npm run ctix",
@@ -29,12 +46,12 @@
     "hls.js": "1.5.x"
   },
   "devDependencies": {
-    "@zcomponent/three": "^1.35.0"
+    "@zcomponent/three": "2.0.0-alpha.2"
   },
   "peerDependencies": {
     "@zcomponent/three": "*",
     "@zcomponent/core": "*",
-    "three": "0.150.1 - 0.164.0"
+    "three": "0.175.0 - 0.184.0"
   },
   "keywords": [],
   "release": {