@zcomponent/html 1.1.0 → 1.3.0-beta

package/lib/HTMLElement.d.ts

@@ -1,12 +1,17 @@
 import { Component, ConstructorProps, ContextManager, Event, Observable } from '@zcomponent/core';
 export interface HTMLElementProps extends ConstructorProps {
-    /** @zprop */
     innerText?: string;
 }
 export declare class ZHTMLElement<T extends HTMLElement> extends Component {
     element: T;
     /** @zprop */
     onClick: Event<[MouseEvent]>;
+    /**
+     * @zprop
+     * @ztype text-multiline
+     * @zgrouppriority 21
+     */
+    innerText: Observable<string, never>;
     constructor(contextManager: ContextManager, props: HTMLElementProps, element: T);
     appendChild(c: Component): void;
     private _connectChild;

package/lib/HTMLElement.js

@@ -6,6 +6,12 @@ export class ZHTMLElement extends Component {
         this.element = element;
         /** @zprop */
         this.onClick = new Event();
+        /**
+         * @zprop
+         * @ztype text-multiline
+         * @zgrouppriority 21
+         */
+        this.innerText = new Observable('');
         /** @zprop */
         this.id = new Observable('', v => (this.element.id = v));
         /** @zprop */
@@ -91,8 +97,12 @@ export class ZHTMLElement extends Component {
          * @zdefault row
          */
         this.flexDirection = new Observable(CSSFlexDirection.row, v => (this.element.style.flexDirection = v));
-        if (props.innerText !== undefined)
+        if (props.innerText === undefined) {
+            this.innerText.addListener(v => (element.innerText = v));
+        }
+        else {
             element.innerText = props.innerText;
+        }
         for (const child of this.children) {
             this._connectChild(child);
         }

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.1.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"