@zcomponent/core 1.2.0-beta → 1.3.0-beta

package/lib/animation/tracks/streamtrack.d.ts

@@ -1,5 +1,4 @@
 import { StreamTrackEntity } from '../../data';
-import { Entity } from '../../entity';
 import { Animation } from '../animation';
 import { Keyframe } from '../keyframe';
 import { Stream, StreamState } from '../stream';
@@ -18,7 +17,7 @@ export declare class StreamTrack extends Track {
     private _lastTick?;
     private _lastLoopNumber?;
     private _lastRate;
-    constructor(animation: Animation, _entity: Entity, _property: (string | number)[]);
+    constructor(animation: Animation, _entity: any, _property: (string | number)[]);
     get influencedPaths(): string[];
     get stream(): Stream | undefined;
     computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;

package/lib/components/Audio.d.ts

@@ -0,0 +1,59 @@
+import { PlayOptions, Stream } from "../animation";
+import { Component } from "../component";
+import { ContextManager } from "../context";
+import { Observable } from "../observable";
+export interface AudioConstructorProps {
+    /** @zprop
+     * @zvalues files *.+(mp3|wav)
+     */
+    source: string;
+    /**
+     * @zprop
+     * @zdefault default
+     */
+    audioLayer?: string;
+    /** @zprop
+     * @zdefault false
+     */
+    autoplay?: boolean;
+}
+/**
+ * @zcomponent
+ * @ztag core/audio
+ * @zgroup Media
+ * @zicon music_note
+ * @zstream
+ */
+export declare class Audio extends Component<undefined, AudioConstructorProps> implements Stream {
+    audioContext: AudioContext;
+    destination: AudioNode;
+    audioBuffer?: AudioBuffer;
+    private _gain;
+    private _playhead;
+    private _session?;
+    /** @zprop
+     * @zdefault false
+     * @zgroup Audio
+     * @zgrouppriority 20
+     */
+    muted: Observable<boolean, never>;
+    constructor(mgr: ContextManager, props: AudioConstructorProps);
+    private _load;
+    private _updateVolume;
+    /**
+     * @zprop
+     * @ztype proportion
+     * @zdefault 1
+     */
+    volume: Observable<number, never>;
+    /** @zprop */
+    play(opts?: PlayOptions): void;
+    /** @zprop */
+    pause(): void;
+    /** @zprop */
+    stop(): void;
+    /** @zprop */
+    seek(t: number): void;
+    length(): number | undefined;
+    dispose(): never;
+}

package/lib/components/Audio.js

@@ -0,0 +1,96 @@
+import { Component } from "../component";
+import { AudioContextContext, useAudioContext } from "../contexts/audiocontextcontext";
+import { isDesignTime } from "../contexts/environmentcontext";
+import { registerLoadable, started } from "../contexts/loadcontext";
+import { Observable } from "../observable";
+/**
+ * @zcomponent
+ * @ztag core/audio
+ * @zgroup Media
+ * @zicon music_note
+ * @zstream
+ */
+export class Audio extends Component {
+    constructor(mgr, props) {
+        super(mgr, props);
+        this._playhead = 0;
+        /** @zprop
+         * @zdefault false
+         * @zgroup Audio
+         * @zgrouppriority 20
+         */
+        this.muted = new Observable(false);
+        this._updateVolume = () => {
+            this._gain.gain.value = this.muted.value === true ? 0 : this.volume.value;
+        };
+        /**
+         * @zprop
+         * @ztype proportion
+         * @zdefault 1
+         */
+        this.volume = new Observable(1, this._updateVolume);
+        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);
+    }
+    /** @zprop */
+    play(opts) {
+        if (!this.audioBuffer)
+            return;
+        if (this._session)
+            this.stop();
+        if (this._playhead >= this.audioBuffer.duration)
+            this._playhead = 0;
+        const source = this.audioContext.createBufferSource();
+        source.buffer = this.audioBuffer;
+        source.playbackRate.value = opts?.speed ?? 1;
+        source.connect(this.destination);
+        const startedAt = this.audioContext.currentTime - (this._playhead / source.playbackRate.value);
+        source.start(0, this._playhead);
+        this._session = { source, startedAt };
+    }
+    /** @zprop */
+    pause() {
+        if (!this._session)
+            return;
+        this._playhead = this._session.source.playbackRate.value * (this.audioContext.currentTime - this._session.startedAt);
+        this._session.source.stop();
+        this._session.source.disconnect();
+        delete this._session;
+    }
+    /** @zprop */
+    stop() {
+        this.pause();
+        this._playhead = 0;
+    }
+    /** @zprop */
+    seek(t) {
+        let previousSession = this._session;
+        if (previousSession)
+            this.pause();
+        this._playhead = t / 1000;
+        if (previousSession)
+            this.play({ speed: previousSession.source.playbackRate.value });
+    }
+    length() {
+        return this.audioBuffer ? (this.audioBuffer.duration * 1000) : undefined;
+    }
+    dispose() {
+        this.stop();
+        this._gain.disconnect();
+        return super.dispose();
+    }
+}

package/lib/components/AudioLayerSettings.d.ts

@@ -0,0 +1,26 @@
+import { Component } from "../component";
+import { ContextManager } from "../context";
+import { Observable } from "../observable";
+interface AudioLayerSettingsConstuctorProps {
+    /**
+     * @zprop
+     * @zdefault default
+     */
+    layer?: string;
+}
+/**
+ * @zcomponent
+ * @ztag core/audiolayersettings
+ * @zgroup Media
+ * @zicon volume_up
+ */
+export declare class AudioLayerSettings extends Component<undefined, AudioLayerSettingsConstuctorProps> {
+    constructor(contextManager: ContextManager, props: AudioLayerSettingsConstuctorProps);
+    /**
+     * @zprop
+     * @ztype proportion
+     * @zdefault 1
+     */
+    volume: Observable<number, never>;
+}
+export {};

package/lib/components/AudioLayerSettings.js

@@ -0,0 +1,22 @@
+import { Component } from "../component";
+import { AudioContextContext } from "../contexts/audiocontextcontext";
+import { Observable } from "../observable";
+/**
+ * @zcomponent
+ * @ztag core/audiolayersettings
+ * @zgroup Media
+ * @zicon volume_up
+ */
+export class AudioLayerSettings extends Component {
+    constructor(contextManager, props) {
+        super(contextManager, props);
+        /**
+         * @zprop
+         * @ztype proportion
+         * @zdefault 1
+         */
+        this.volume = new Observable(1, v => {
+            this.contextManager.get(AudioContextContext).setVolumeForLayer(this.constructorProps?.layer, v);
+        });
+    }
+}

package/lib/contexts/audiocontextcontext.d.ts

@@ -0,0 +1,14 @@
+import { ContextManager, Context } from '../context';
+/** @zcontext */
+export declare class AudioContextContext extends Context {
+    constructorProps: {};
+    audioContext: AudioContext;
+    private _layers;
+    layers: Map<string, AudioNode>;
+    constructor(contextManager: ContextManager, constructorProps: {});
+    private _getLayer;
+    getLayer(name?: string): AudioNode;
+    setVolumeForLayer(name: string | undefined, v: number): void;
+    dispose(): never;
+}
+export declare function useAudioContext(ctx: ContextManager): AudioContext;

package/lib/contexts/audiocontextcontext.js

@@ -0,0 +1,38 @@
+import { Context } from '../context';
+import { nextUserEvent } from './usereventcontext';
+/** @zcontext */
+export class AudioContextContext extends Context {
+    constructor(contextManager, constructorProps) {
+        super(contextManager, constructorProps);
+        this.constructorProps = constructorProps;
+        this.audioContext = new AudioContext();
+        this._layers = new Map();
+        this.layers = this._layers;
+        nextUserEvent(contextManager).then(() => {
+            this.audioContext.resume();
+        });
+    }
+    _getLayer(name) {
+        let existing = this._layers.get(name ?? 'default');
+        if (!existing) {
+            existing = new GainNode(this.audioContext);
+            existing.connect(this.audioContext.destination);
+            this._layers.set(name ?? 'default', existing);
+        }
+        return existing;
+    }
+    getLayer(name) {
+        return this._getLayer(name);
+    }
+    setVolumeForLayer(name, v) {
+        const layer = this._getLayer(name);
+        layer.gain.value = v;
+    }
+    dispose() {
+        this.audioContext.close();
+        return super.dispose();
+    }
+}
+export function useAudioContext(ctx) {
+    return ctx.get(AudioContextContext).audioContext;
+}

package/lib/index.d.ts

@@ -14,4 +14,5 @@ export * from './contexts/tagcontext';
 export * from './contexts/gamepadcontext';
 export * from './observable';
 export * from './contexts/environmentcontext';
+export * from './contexts/audiocontextcontext';
 export * from './animation';

package/lib/index.js

@@ -14,6 +14,7 @@ export * from './contexts/tagcontext';
 export * from './contexts/gamepadcontext';
 export * from './observable';
 export * from './contexts/environmentcontext';
+export * from './contexts/audiocontextcontext';
 export * from './animation';
 const link = document.createElement('link');
 link.setAttribute('rel', 'stylesheet');

package/lib/types.d.ts

@@ -108,6 +108,7 @@ export interface Prop {
     values?: Values[];
     order?: number;
     priority?: number;
+    optional?: boolean;
 }
 export interface DefaultChild {
     label: string;

package/lib/types.js

@@ -105,7 +105,7 @@ export function areTypesCompatible(a, b) {
             }
             if (a.ret && !bt.ret)
                 return false;
-            if (!a.ret && !bt.ret)
+            if (!a.ret && bt.ret)
                 return false;
             if (a.ret && bt.ret)
                 return areTypesCompatible(a.ret, bt.ret);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "1.2.0-beta",
+  "version": "1.3.0-beta",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",