@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/components/Audio.d.ts

@@ -2,19 +2,16 @@ import { PlayOptions, Stream } from '../animation';
 import { Component } from '../component';
 import { ContextManager } from '../context';
 import { Event } from '../event';
-import { Observable } from '../observable';
+import { ProjectFile } from '../types';
 export interface AudioConstructorProps {
-    /** @zprop
-     * @zvalues files *.+(mp3|wav)
-     */
-    source: string;
+    source: ProjectFile<'*.+(mp3|wav)'>;
     /**
-     * @zprop
-     * @zdefault default
+     *
+     * @default default
      */
     audioLayer?: string;
-    /** @zprop
-     * @zdefault false
+    /**
+     * @default false
      */
     autoplay?: boolean;
 }
@@ -23,25 +20,31 @@ export interface AudioConstructorProps {
  * It provides methods to play, pause, stop, and seek the audio.
  * It also provides observables for volume and mute state, and events for when the audio ends, stops, pauses, and plays.
  *
+ * @zstream
  * @zcomponent
- * @ztag core/audio
- * @zgroup Media
  * @zicon music_note
- * @zstream
+ * @zgroup Media
+ * @ztag core/audio
  */
 export declare class Audio extends Component<undefined, AudioConstructorProps> implements Stream {
-    /** @zui */ readonly onEnded: Event<[Audio]>;
-    /** @zui */ readonly onStop: Event<[Audio]>;
-    /** @zui */ readonly onPause: Event<[Audio]>;
-    /** @zui */ readonly onPlay: Event<[Audio]>;
-    readonly audioContext: AudioContext;
-    readonly destination: AudioNode;
-    audioBuffer?: AudioBuffer;
     private _gain;
     private _reversed?;
+    /**
+     * @default 0
+     */
     private _playhead;
+    /**
+     * @default 1
+     */
     private _rate;
     private _session?;
+    readonly onEnded: Event<[Audio]>;
+    readonly onStop: Event<[Audio]>;
+    readonly onPause: Event<[Audio]>;
+    readonly onPlay: Event<[Audio]>;
+    readonly audioContext: AudioContext;
+    readonly destination: AudioNode;
+    audioBuffer?: AudioBuffer;
     /**
      * Creates a new Audio component.
      * @param mgr - The current ContextManager
@@ -50,48 +53,43 @@ export declare class Audio extends Component<undefined, AudioConstructorProps> i
     constructor(mgr: ContextManager, props: AudioConstructorProps);
     private _load;
     private _updateVolume;
-    /** @zprop
-     * @zdefault false
+    /**
+     * @default false
+     * @zui
      * @zgroup Audio
-     * @zgrouppriority 20
      */
-    readonly muted: Observable<boolean, never>;
+    muted: boolean;
     private _getReversed;
     /**
-     * @zprop
-     * @ztype proportion
+     * @default 1
+     * @zui
      * @zgroup Audio
-     * @zgrouppriority 20
-     * @zdefault 1
+     * @ztype proportion
      */
-    readonly volume: Observable<number, never>;
-    /** @zprop
-     * @zdefault false
+    volume: number;
+    /**
+     * @default false
+     * @zui
      * @zgroup Audio
-     * @zgrouppriority 20
      */
-    readonly loop: Observable<boolean, never>;
+    loop: boolean;
     /**
-     * @zprop
      * @zui
      */
     play(opts?: PlayOptions): void;
     private _pause;
     /**
-     * @zprop
      * @zui
      */
     pause(): void;
     /**
-     * @zprop
      * @zui
      */
     stop(): void;
     /**
-     * @zprop
      * @zui
      */
-    seek(/** @ztype time-milliseconds */ t: number): void;
+    seek(t: number): void;
     length(): number | undefined;
     dispose(): never;
 }

package/lib/components/Audio.js

@@ -1,177 +1,290 @@
+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 { Component } from '../component';
 import { AudioContextContext, useAudioContext } from '../contexts/audiocontextcontext';
 import { isDesignTime } from '../contexts/environmentcontext';
-import { registerLoadable, started } from '../contexts/loadcontext';
+import { started, zLoad } from '../contexts/loadcontext';
+import { zComponent, zObserve, zUI } from '../decorators';
 import { Event } from '../event';
-import { Observable } from '../observable';
 /**
  * The Audio class represents an audio component that can be controlled.
  * It provides methods to play, pause, stop, and seek the audio.
  * It also provides observables for volume and mute state, and events for when the audio ends, stops, pauses, and plays.
  *
+ * @zstream
  * @zcomponent
- * @ztag core/audio
- * @zgroup Media
  * @zicon music_note
- * @zstream
+ * @zgroup Media
+ * @ztag core/audio
  */
-export class Audio extends Component {
-    /**
-     * Creates a new Audio component.
-     * @param mgr - The current ContextManager
-     * @param props - The constructor properties.
-     */
-    constructor(mgr, props) {
-        super(mgr, props);
-        /** @zui */ this.onEnded = new Event();
-        /** @zui */ this.onStop = new Event();
-        /** @zui */ this.onPause = new Event();
-        /** @zui */ this.onPlay = new Event();
-        this._playhead = 0;
-        this._rate = 1;
-        this._updateVolume = () => {
-            this._gain.gain.value = this.muted.value === true ? 0 : this.volume.value;
+let Audio = (() => {
+    let _classDecorators = [zComponent({ icon: 'music_note', group: 'Media', tags: ['core/audio'] })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    let _instanceExtraInitializers = [];
+    let _onEnded_decorators;
+    let _onEnded_initializers = [];
+    let _onEnded_extraInitializers = [];
+    let _onStop_decorators;
+    let _onStop_initializers = [];
+    let _onStop_extraInitializers = [];
+    let _onPause_decorators;
+    let _onPause_initializers = [];
+    let _onPause_extraInitializers = [];
+    let _onPlay_decorators;
+    let _onPlay_initializers = [];
+    let _onPlay_extraInitializers = [];
+    let __load_decorators;
+    let _muted_decorators;
+    let _muted_initializers = [];
+    let _muted_extraInitializers = [];
+    let _volume_decorators;
+    let _volume_initializers = [];
+    let _volume_extraInitializers = [];
+    let _loop_decorators;
+    let _loop_initializers = [];
+    let _loop_extraInitializers = [];
+    let _play_decorators;
+    let _pause_decorators;
+    let _stop_decorators;
+    let _seek_decorators;
+    var Audio = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _onEnded_decorators = [zUI()];
+            _onStop_decorators = [zUI()];
+            _onPause_decorators = [zUI()];
+            _onPlay_decorators = [zUI()];
+            __load_decorators = [zLoad()];
+            _muted_decorators = [zUI({ group: 'Audio', priority: 20 }), zObserve((v, instance) => {
+                    instance._updateVolume();
+                })];
+            _volume_decorators = [zUI({ group: 'Audio', priority: 20, type: 'proportion' }), zObserve((v, instance) => {
+                    instance._updateVolume();
+                })];
+            _loop_decorators = [zUI({ group: 'Audio', priority: 20 }), zObserve((v, instance) => {
+                    if (instance._session)
+                        instance._session.source.loop = v;
+                })];
+            _play_decorators = [zUI()];
+            _pause_decorators = [zUI()];
+            _stop_decorators = [zUI()];
+            _seek_decorators = [zUI({ type: 'time-milliseconds' })];
+            __esDecorate(this, null, __load_decorators, { kind: "method", name: "_load", static: false, private: false, access: { has: obj => "_load" in obj, get: obj => obj._load }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __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, _onEnded_decorators, { kind: "field", name: "onEnded", static: false, private: false, access: { has: obj => "onEnded" in obj, get: obj => obj.onEnded, set: (obj, value) => { obj.onEnded = value; } }, metadata: _metadata }, _onEnded_initializers, _onEnded_extraInitializers);
+            __esDecorate(null, null, _onStop_decorators, { kind: "field", name: "onStop", static: false, private: false, access: { has: obj => "onStop" in obj, get: obj => obj.onStop, set: (obj, value) => { obj.onStop = value; } }, metadata: _metadata }, _onStop_initializers, _onStop_extraInitializers);
+            __esDecorate(null, null, _onPause_decorators, { kind: "field", name: "onPause", static: false, private: false, access: { has: obj => "onPause" in obj, get: obj => obj.onPause, set: (obj, value) => { obj.onPause = value; } }, metadata: _metadata }, _onPause_initializers, _onPause_extraInitializers);
+            __esDecorate(null, null, _onPlay_decorators, { kind: "field", name: "onPlay", static: false, private: false, access: { has: obj => "onPlay" in obj, get: obj => obj.onPlay, set: (obj, value) => { obj.onPlay = value; } }, metadata: _metadata }, _onPlay_initializers, _onPlay_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, _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, _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, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            Audio = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        _gain = __runInitializers(this, _instanceExtraInitializers);
+        _reversed;
+        /**
+         * @default 0
+         */
+        _playhead = 0;
+        /**
+         * @default 1
+         */
+        _rate = 1;
+        _session;
+        onEnded = __runInitializers(this, _onEnded_initializers, new Event());
+        onStop = (__runInitializers(this, _onEnded_extraInitializers), __runInitializers(this, _onStop_initializers, new Event()));
+        onPause = (__runInitializers(this, _onStop_extraInitializers), __runInitializers(this, _onPause_initializers, new Event()));
+        onPlay = (__runInitializers(this, _onPause_extraInitializers), __runInitializers(this, _onPlay_initializers, new Event()));
+        audioContext = __runInitializers(this, _onPlay_extraInitializers);
+        destination;
+        audioBuffer;
+        /**
+         * Creates a new Audio component.
+         * @param mgr - The current ContextManager
+         * @param props - The constructor properties.
+         */
+        constructor(mgr, props) {
+            super(mgr, props);
+            __runInitializers(this, _loop_extraInitializers);
+            const audioContextContext = mgr.get(AudioContextContext);
+            this.audioContext = useAudioContext(mgr);
+            this._gain = this.audioContext.createGain();
+            this._gain.connect(audioContextContext.getLayer(props.audioLayer));
+            this.destination = this._gain;
+            if (!isDesignTime(this.contextManager) && props.autoplay)
+                started(mgr).then(() => this.play());
+        }
+        async _load() {
+            const source = this.constructorProps?.source;
+            if (!source)
+                return;
+            const data = await (await fetch(source)).arrayBuffer();
+            const audioContext = useAudioContext(this.contextManager);
+            this.audioBuffer = await audioContext.decodeAudioData(data);
+        }
+        _updateVolume = () => {
+            this._gain.gain.value = this.muted === true ? 0 : this.volume;
         };
-        /** @zprop
-         * @zdefault false
+        /**
+         * @default false
+         * @zui
          * @zgroup Audio
-         * @zgrouppriority 20
          */
-        this.muted = new Observable(false, this._updateVolume);
+        muted = __runInitializers(this, _muted_initializers, false);
+        _getReversed(inp) {
+            if (!this._reversed) {
+                const audioContext = useAudioContext(this.contextManager);
+                this._reversed = audioContext.createBuffer(inp.numberOfChannels, inp.length, inp.sampleRate);
+                for (let i = 0; i < inp.numberOfChannels; i++) {
+                    const source = inp.getChannelData(i);
+                    const destination = this._reversed.getChannelData(i);
+                    for (let j = 0; j < inp.length; j++) {
+                        destination[j] = source[inp.length - j];
+                    }
+                }
+            }
+            return this._reversed;
+        }
         /**
-         * @zprop
-         * @ztype proportion
+         * @default 1
+         * @zui
          * @zgroup Audio
-         * @zgrouppriority 20
-         * @zdefault 1
+         * @ztype proportion
          */
-        this.volume = new Observable(1, this._updateVolume);
-        /** @zprop
-         * @zdefault false
+        volume = (__runInitializers(this, _muted_extraInitializers), __runInitializers(this, _volume_initializers, 1));
+        /**
+         * @default false
+         * @zui
          * @zgroup Audio
-         * @zgrouppriority 20
          */
-        this.loop = new Observable(false, v => {
+        loop = (__runInitializers(this, _volume_extraInitializers), __runInitializers(this, _loop_initializers, false));
+        /**
+         * @zui
+         */
+        play(opts) {
+            if (!this.audioBuffer)
+                return;
             if (this._session)
-                this._session.source.loop = v;
-        });
-        const audioContextContext = mgr.get(AudioContextContext);
-        this.audioContext = useAudioContext(mgr);
-        this._gain = this.audioContext.createGain();
-        this._gain.connect(audioContextContext.getLayer(props.audioLayer));
-        this.destination = this._gain;
-        registerLoadable(mgr, this._load());
-        if (!isDesignTime(this.contextManager) && props.autoplay)
-            started(mgr).then(() => this.play());
-    }
-    async _load() {
-        const source = this.constructorProps?.source;
-        if (!source)
-            return;
-        const data = await (await fetch(source)).arrayBuffer();
-        const audioContext = useAudioContext(this.contextManager);
-        this.audioBuffer = await audioContext.decodeAudioData(data);
-    }
-    _getReversed(inp) {
-        if (!this._reversed) {
-            const audioContext = useAudioContext(this.contextManager);
-            this._reversed = audioContext.createBuffer(inp.numberOfChannels, inp.length, inp.sampleRate);
-            for (let i = 0; i < inp.numberOfChannels; i++) {
-                const source = inp.getChannelData(i);
-                const destination = this._reversed.getChannelData(i);
-                for (let j = 0; j < inp.length; j++) {
-                    destination[j] = source[inp.length - j];
-                }
+                this._pause();
+            this._rate = opts?.speed ?? 1;
+            let resolvedPlayhead = this._playhead;
+            if (this._rate >= +0) {
+                if (this._playhead >= this.audioBuffer.duration)
+                    this._playhead = 0;
+            }
+            else {
+                if (this._playhead <= 0)
+                    this._playhead = this.audioBuffer.duration;
+                resolvedPlayhead = Math.max(this.audioBuffer.duration - this._playhead, 0);
             }
+            const source = this.audioContext.createBufferSource();
+            source.playbackRate.value = Math.abs(this._rate);
+            source.buffer = this._rate < 0 ? this._getReversed(this.audioBuffer) : this.audioBuffer;
+            source.connect(this.destination);
+            source.loop = this.loop;
+            const startedAt = this.audioContext.currentTime - resolvedPlayhead / source.playbackRate.value;
+            source.start(0, resolvedPlayhead);
+            const onEnded = () => {
+                if (this.loop) {
+                    this.onEnded.emit(this);
+                    this._playhead = 0;
+                }
+                else {
+                    this.onEnded.emit(this);
+                    delete this._session;
+                }
+            };
+            source.addEventListener('ended', onEnded);
+            this._session = { source, startedAt };
+            this.onPlay.emit(this);
         }
-        return this._reversed;
-    }
-    /**
-     * @zprop
-     * @zui
-     */
-    play(opts) {
-        if (!this.audioBuffer)
-            return;
-        if (this._session)
-            this._pause();
-        this._rate = opts?.speed ?? 1;
-        let resolvedPlayhead = this._playhead;
-        if (this._rate >= +0) {
-            if (this._playhead >= this.audioBuffer.duration)
-                this._playhead = 0;
+        _pause() {
+            if (!this._session)
+                return;
+            this._playhead = this._session.source.playbackRate.value * (this.audioContext.currentTime - this._session.startedAt);
+            if (this._rate < 0)
+                this._playhead = (this.audioBuffer?.length ?? 0) - this._playhead;
+            this._session.source.stop();
+            this._session.source.disconnect();
+            delete this._session;
         }
-        else {
-            if (this._playhead <= 0)
-                this._playhead = this.audioBuffer.duration;
-            resolvedPlayhead = Math.max(this.audioBuffer.duration - this._playhead, 0);
+        /**
+         * @zui
+         */
+        pause() {
+            this._pause();
+            this.onPause.emit(this);
         }
-        const source = this.audioContext.createBufferSource();
-        source.playbackRate.value = Math.abs(this._rate);
-        source.buffer = this._rate < 0 ? this._getReversed(this.audioBuffer) : this.audioBuffer;
-        source.connect(this.destination);
-        source.loop = this.loop.value;
-        const startedAt = this.audioContext.currentTime - resolvedPlayhead / source.playbackRate.value;
-        source.start(0, resolvedPlayhead);
-        const onEnded = () => {
-            if (this.loop.value) {
-                this.onEnded.emit(this);
-                this._playhead = 0;
-            }
-            else {
-                this.onEnded.emit(this);
-                delete this._session;
-            }
-        };
-        source.addEventListener('ended', onEnded);
-        this._session = { source, startedAt };
-        this.onPlay.emit(this);
-    }
-    _pause() {
-        if (!this._session)
-            return;
-        this._playhead = this._session.source.playbackRate.value * (this.audioContext.currentTime - this._session.startedAt);
-        if (this._rate < 0)
-            this._playhead = (this.audioBuffer?.length ?? 0) - this._playhead;
-        this._session.source.stop();
-        this._session.source.disconnect();
-        delete this._session;
-    }
-    /**
-     * @zprop
-     * @zui
-     */
-    pause() {
-        this._pause();
-        this.onPause.emit(this);
-    }
-    /**
-     * @zprop
-     * @zui
-     */
-    stop() {
-        this._pause();
-        this._playhead = 0;
-        this.onStop.emit(this);
-    }
-    /**
-     * @zprop
-     * @zui
-     */
-    seek(/** @ztype time-milliseconds */ t) {
-        const previousSession = this._session;
-        if (previousSession)
+        /**
+         * @zui
+         */
+        stop() {
             this._pause();
-        this._playhead = t / 1000;
-        if (previousSession)
-            this.play({ speed: this._rate });
-    }
-    length() {
-        return this.audioBuffer ? this.audioBuffer.duration * 1000 : undefined;
-    }
-    dispose() {
-        this.stop();
-        this._gain.disconnect();
-        return super.dispose();
-    }
-}
+            this._playhead = 0;
+            this.onStop.emit(this);
+        }
+        /**
+         * @zui
+         */
+        seek(t) {
+            const previousSession = this._session;
+            if (previousSession)
+                this._pause();
+            this._playhead = t / 1000;
+            if (previousSession)
+                this.play({ speed: this._rate });
+        }
+        length() {
+            return this.audioBuffer ? this.audioBuffer.duration * 1000 : undefined;
+        }
+        dispose() {
+            this.stop();
+            this._gain.disconnect();
+            return super.dispose();
+        }
+    };
+    return Audio = _classThis;
+})();
+export { Audio };

package/lib/components/AudioLayerSettings.d.ts

@@ -1,32 +1,34 @@
 import { Component } from '../component';
 import { ContextManager } from '../context';
-import { Observable } from '../observable';
 interface AudioLayerSettingsConstuctorProps {
     /**
-     * @zprop
-     * @zdefault default
+     *
+     * @default default
      */
     layer?: string;
 }
 /**
  * Audio layer settings.
  * @zcomponent
- * @ztag core/audiolayersettings
- * @zgroup Media
  * @zicon volume_up
+ * @zgroup Media
+ * @ztag core/audiolayersettings
  */
 export declare class AudioLayerSettings extends Component<undefined, AudioLayerSettingsConstuctorProps> {
+    /**
+     * The volume of the layer.
+     *
+     * Default is 1.
+     * @default 1
+     * @zui
+     * @ztype proportion
+     */
+    volume: number;
     /**
      * Creates a new AudioLayerSettings component.
      * @param contextManager - The current ContextManager
      * @param props - The constructor properties.
      */
     constructor(contextManager: ContextManager, props: AudioLayerSettingsConstuctorProps);
-    /**
-     * @zprop
-     * @ztype proportion
-     * @zdefault 1
-     */
-    readonly volume: Observable<number, never>;
 }
 export {};