@zcomponent/core 1.4.1-beta → 1.5.0-beta

package/lib/behaviors/PlaySound.d.ts

@@ -1,13 +1,17 @@
 import { ActionBehavior, ActionBehaviorConstructorProps } from "../actionbehavior";
 import { Component } from "../component";
 import { ContextManager } from "../context";
+import { Observable } from "../observable";
 export interface PlaySoundProps extends ActionBehaviorConstructorProps {
-    /** The URL of the file to play
-     * @zprop
-     * @zvalues files *.wav
-     * @zvalues files *.mp3
-    */
+    /** @zprop
+     * @zvalues files *.+(mp3|wav)
+     */
     source: string;
+    /**
+     * @zprop
+     * @zdefault default
+     */
+    audioLayer?: string;
 }
 /**
  * Plays a sound
@@ -17,7 +21,28 @@ export interface PlaySoundProps extends ActionBehaviorConstructorProps {
  * @zgroup Actions
  */
 export declare class PlaySound extends ActionBehavior<PlaySoundProps> {
-    private _elm;
+    /** @zprop
+     * @zdefault false
+     * @zgroup Audio
+     * @zgrouppriority 20
+     */
+    muted: Observable<boolean>;
+    /**
+     * @zprop
+     * @ztype proportion
+     * @zgroup Audio
+     * @zgrouppriority 20
+     * @zdefault 1
+     */
+    volume: Observable<number>;
+    /**
+     * @zprop
+     * @zgroup Audio
+     * @zgrouppriority 20
+     * @zdefault 1
+     */
+    speed: Observable<number, never>;
+    private _component;
     constructor(contextManager: ContextManager, instance: Component, props: PlaySoundProps);
     perform(): void;
     /** @zprop */

package/lib/behaviors/PlaySound.js

@@ -1,6 +1,7 @@
 import { ActionBehavior, } from "../actionbehavior";
 import { registerBehaviorRunAtDesignTime } from "../behavior";
-import { registerLoadable } from "../contexts/loadcontext";
+import { Audio } from "../components/Audio";
+import { Observable } from "../observable";
 /**
  * Plays a sound
  *
@@ -11,28 +12,27 @@ import { registerLoadable } from "../contexts/loadcontext";
 export class PlaySound extends ActionBehavior {
     constructor(contextManager, instance, props) {
         super(contextManager, instance, props);
-        this._elm = document.createElement('audio');
-        registerLoadable(contextManager, new Promise((resolve, reject) => {
-            this._elm.addEventListener('canplaythrough', () => resolve());
-            this._elm.addEventListener('error', err => {
-                console.error('Unable to create PlaySound', err);
-                reject(err);
-            });
-        }));
-        this._elm.src = props.source;
-        this._elm.load();
+        /**
+         * @zprop
+         * @zgroup Audio
+         * @zgrouppriority 20
+         * @zdefault 1
+         */
+        this.speed = new Observable(1);
+        this._component = new Audio(contextManager, props);
+        this.muted = this._component.muted;
+        this.volume = this._component.volume;
     }
     perform() {
-        this._elm.currentTime = 0;
-        this._elm.play();
+        this._component.seek(0);
+        this._component.play({ speed: this.speed.value });
     }
     /** @zprop */
     preview() {
         this.perform();
     }
     dispose() {
-        this._elm.pause();
-        this._elm.src = '';
+        this._component.dispose();
         return super.dispose();
     }
 }

package/lib/components/Audio.d.ts

@@ -1,6 +1,7 @@
 import { PlayOptions, Stream } from "../animation";
 import { Component } from "../component";
 import { ContextManager } from "../context";
+import { Event } from "../event";
 import { Observable } from "../observable";
 export interface AudioConstructorProps {
     /** @zprop
@@ -25,6 +26,10 @@ export interface AudioConstructorProps {
  * @zstream
  */
 export declare class Audio extends Component<undefined, AudioConstructorProps> implements Stream {
+    /** @zui */ onEnded: Event<[Audio]>;
+    /** @zui */ onStop: Event<[Audio]>;
+    /** @zui */ onPause: Event<[Audio]>;
+    /** @zui */ onPlay: Event<[Audio]>;
     audioContext: AudioContext;
     destination: AudioNode;
     audioBuffer?: AudioBuffer;
@@ -46,11 +51,14 @@ export declare class Audio extends Component<undefined, AudioConstructorProps> i
     /**
      * @zprop
      * @ztype proportion
+     * @zgroup Audio
+     * @zgrouppriority 20
      * @zdefault 1
      */
     volume: Observable<number, never>;
     /** @zprop */
     play(opts?: PlayOptions): void;
+    private _pause;
     /** @zprop */
     pause(): void;
     /** @zprop */

package/lib/components/Audio.js

@@ -2,6 +2,7 @@ import { Component } from "../component";
 import { AudioContextContext, useAudioContext } from "../contexts/audiocontextcontext";
 import { isDesignTime } from "../contexts/environmentcontext";
 import { registerLoadable, started } from "../contexts/loadcontext";
+import { Event } from "../event";
 import { Observable } from "../observable";
 /**
  * @zcomponent
@@ -13,6 +14,10 @@ import { Observable } from "../observable";
 export class Audio extends Component {
     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 = () => {
@@ -27,6 +32,8 @@ export class Audio extends Component {
         /**
          * @zprop
          * @ztype proportion
+         * @zgroup Audio
+         * @zgrouppriority 20
          * @zdefault 1
          */
         this.volume = new Observable(1, this._updateVolume);
@@ -66,7 +73,7 @@ export class Audio extends Component {
         if (!this.audioBuffer)
             return;
         if (this._session)
-            this.pause();
+            this._pause();
         this._rate = opts?.speed ?? 1;
         let resolvedPlayhead = this._playhead;
         if (this._rate >= +0) {
@@ -84,10 +91,11 @@ export class Audio extends Component {
         source.connect(this.destination);
         const startedAt = this.audioContext.currentTime - (resolvedPlayhead / source.playbackRate.value);
         source.start(0, resolvedPlayhead);
+        source.addEventListener("ended", () => this.onEnded.emit(this));
         this._session = { source, startedAt };
+        this.onPlay.emit(this);
     }
-    /** @zprop */
-    pause() {
+    _pause() {
         if (!this._session)
             return;
         this._playhead = this._session.source.playbackRate.value * (this.audioContext.currentTime - this._session.startedAt);
@@ -98,15 +106,21 @@ export class Audio extends Component {
         delete this._session;
     }
     /** @zprop */
+    pause() {
+        this._pause();
+        this.onPause.emit(this);
+    }
+    /** @zprop */
     stop() {
-        this.pause();
+        this._pause();
         this._playhead = 0;
+        this.onStop.emit(this);
     }
     /** @zprop */
     seek(t) {
         let previousSession = this._session;
         if (previousSession)
-            this.pause();
+            this._pause();
         this._playhead = t / 1000;
         if (previousSession)
             this.play({ speed: this._rate });

package/lib/emitter.d.ts

@@ -3,6 +3,8 @@ export declare class Emitter<Args extends Array<any> = []> {
     private _emitting;
     private _toUnbind;
     private _needsSort;
+    private _next;
+    private _nextFn;
     clearListeners(): void;
     /**
      * Add a new handler function
@@ -14,6 +16,10 @@ export declare class Emitter<Args extends Array<any> = []> {
      * @param f - The callback function to be unbound.
      */
     removeListener(f: (...args: Args) => void): void;
+    /**
+     * Returns a promise that will be resolved the next time this object emits.
+     */
+    get next(): Promise<Args>;
     /**
      * Emit an event
      *

package/lib/emitter.js

@@ -32,6 +32,17 @@ export class Emitter {
             this._funcs.splice(indx, 1);
         }
     }
+    /**
+     * Returns a promise that will be resolved the next time this object emits.
+     */
+    get next() {
+        if (!this._next) {
+            this._next = new Promise(resolve => {
+                this._nextFn = resolve;
+            });
+        }
+        return this._next;
+    }
     /**
      * Emit an event
      *
@@ -58,5 +69,16 @@ export class Emitter {
         if (this._toUnbind.size > 0) {
             this._toUnbind.forEach(fn => this.removeListener(fn));
         }
+        if (this._nextFn) {
+            const fn = this._nextFn;
+            delete this._next;
+            delete this._nextFn;
+            try {
+                fn(args);
+            }
+            catch (ex) {
+                console.log('Exception in event handler', ex);
+            }
+        }
     }
 }

package/package.json

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