@zcomponent/html 1.2.0 → 1.3.0-beta

package/lib/audio.d.ts

@@ -0,0 +1,40 @@
+import { ContextManager, Observable, PlayOptions, Stream } from '@zcomponent/core';
+import { HTMLElementProps, ZHTMLElement } from './HTMLElement';
+export interface AudioConstructorProps extends HTMLElementProps {
+    /** @zprop
+     * @zvalues files *.+(mp3|wav)
+     */
+    source: string;
+    /** @zprop
+     * @zdefault false
+     */
+    autoplay: boolean;
+}
+/**
+ * @zcomponent
+ * @ztag html/element/audio
+ * @zgroup Media
+ * @zicon music_note
+ * @zstream
+ */
+export declare class Audio extends ZHTMLElement<HTMLAudioElement> implements Stream {
+    private _hadUserEvent;
+    /** @zprop
+     * @zdefault false
+     * @zgroup Audio
+     * @zgrouppriority 20
+     */
+    muted: Observable<boolean, never>;
+    constructor(mgr: ContextManager, props: AudioConstructorProps);
+    private _updateMute;
+    /** @zprop */
+    play(opts?: PlayOptions): void;
+    /** @zprop */
+    pause(): void;
+    /** @zprop */
+    stop(): void;
+    /** @zprop */
+    seek(t: number): void;
+    length(): number | undefined;
+    dispose(): never;
+}

package/lib/audio.js

@@ -0,0 +1,67 @@
+import { isDesignTime, nextUserEvent, Observable, registerLoadable, started } from '@zcomponent/core';
+import { ZHTMLElement } from './HTMLElement';
+/**
+ * @zcomponent
+ * @ztag html/element/audio
+ * @zgroup Media
+ * @zicon music_note
+ * @zstream
+ */
+export class Audio extends ZHTMLElement {
+    constructor(mgr, props) {
+        const elm = document.createElement('audio');
+        elm.muted = true;
+        registerLoadable(mgr, new Promise((resolve, reject) => {
+            elm.src = props.source;
+            elm.addEventListener('canplaythrough', () => resolve());
+            elm.addEventListener('error', () => reject());
+        }));
+        super(mgr, props, elm);
+        this._hadUserEvent = false;
+        /** @zprop
+         * @zdefault false
+         * @zgroup Audio
+         * @zgrouppriority 20
+         */
+        this.muted = new Observable(false);
+        this._updateMute = () => {
+            if (!this.element || !this._hadUserEvent)
+                return;
+            this.element.muted = this.muted.value;
+        };
+        this.register(this.muted, this._updateMute);
+        nextUserEvent(mgr).then(() => {
+            this._hadUserEvent = true;
+            this._updateMute();
+        });
+        if (!isDesignTime(this.contextManager) && props.autoplay)
+            started(mgr).then(() => this.play());
+        elm.load();
+    }
+    /** @zprop */
+    play(opts) {
+        this.element.playbackRate = opts?.speed ?? 1;
+        this.element.play();
+    }
+    /** @zprop */
+    pause() {
+        this.element.pause();
+    }
+    /** @zprop */
+    stop() {
+        this.element.pause();
+        this.element.currentTime = 0;
+    }
+    /** @zprop */
+    seek(t) {
+        this.element.currentTime = t / 1000;
+    }
+    length() {
+        return isNaN(this.element.duration) ? undefined : this.element.duration * 1000;
+    }
+    dispose() {
+        this.element.pause();
+        this.element.src = '';
+        return super.dispose();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/html",
-  "version": "1.2.0",
+  "version": "1.3.0-beta",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -18,7 +18,7 @@
   "author": "Zappar Limited",
   "license": "Proprietary",
   "dependencies": {
-    "@zcomponent/core": "1.x"
+    "@zcomponent/core": "^1.2.0-beta"
   },
   "devDependencies": {
     "typescript": "^4.9.4"