@zcomponent/core 1.20.0 → 1.21.0

package/lib/components/Audio.d.ts

@@ -65,6 +65,12 @@ export declare class Audio extends Component<undefined, AudioConstructorProps> i
      * @zdefault 1
      */
     readonly volume: Observable<number, never>;
+    /** @zprop
+     * @zdefault false
+     * @zgroup Audio
+     * @zgrouppriority 20
+     */
+    readonly loop: Observable<boolean, never>;
     /**
      * @zprop
      * @zui

package/lib/components/Audio.js

@@ -46,6 +46,15 @@ export class Audio extends Component {
          * @zdefault 1
          */
         this.volume = new Observable(1, this._updateVolume);
+        /** @zprop
+         * @zdefault false
+         * @zgroup Audio
+         * @zgrouppriority 20
+         */
+        this.loop = new Observable(false, v => {
+            if (this._session)
+                this._session.source.loop = v;
+        });
         const audioContextContext = mgr.get(AudioContextContext);
         this.audioContext = useAudioContext(mgr);
         this._gain = this.audioContext.createGain();
@@ -101,9 +110,20 @@ export class Audio extends Component {
         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);
-        source.addEventListener('ended', () => this.onEnded.emit(this));
+        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);
     }

package/lib/components/SnapshotUI.js

@@ -1,4 +1,4 @@
-import { CanvasContext, Observable, registerLoadable } from '..';
+import { CanvasContext, Observable, registerLoadable, useOverlay } from '..';
 import { TakeSnapshot, ImageFormat } from '../behaviors/TakeSnapshot';
 import { DownloadSnapshot } from '../behaviors/DownloadSnapshot';
 import { ShareSnapshot } from '../behaviors/ShareSnapshot';
@@ -99,6 +99,7 @@ export class SnapshotUI extends Component {
         this.socialShareBehaviours.onShare?.addListener(() => {
             this.onShare.emit();
         });
+        const overlay = useOverlay(this.contextManager).value;
         this.shareDiv = new ShareDivElement(showShare, async () => {
             try {
                 this.socialShareBehaviours.share();
@@ -106,7 +107,7 @@ export class SnapshotUI extends Component {
             catch (err) {
                 console.error('Error sharing:', err);
             }
-        });
+        }, overlay);
         this.captureButton = new CaptureButtonElement(this.contextManager);
         registerLoadable(this.contextManager, new Promise(resolve => (this.style.onload = resolve)));
         this.style.rel = 'stylesheet';
@@ -233,7 +234,7 @@ class CaptureButtonElement {
             circle.style.opacity = '0';
             ring.style.opacity = '0.8';
         });
-        document.body.appendChild(this.button);
+        canvasContext.overlay.value.appendChild(this.button);
     }
     get onClick() {
         return this.clickEvent;
@@ -251,8 +252,9 @@ class ShareDivElement {
      * @param withShareButton - Whether to include a share button.
      * @param shareFunction - The function to call when the share button is clicked.
      */
-    constructor(withShareButton, shareFunction) {
+    constructor(withShareButton, shareFunction, rootDom = document.body) {
         this.shareFunction = shareFunction;
+        this.rootDom = rootDom;
         this.onDownload = new Event();
         // public onShare = new Event();
         this.onClose = new Event();
@@ -274,7 +276,7 @@ class ShareDivElement {
     `;
         const temporaryElement = document.createElement('div');
         temporaryElement.innerHTML = template.trim();
-        document.body.appendChild(temporaryElement.firstElementChild);
+        rootDom.appendChild(temporaryElement.firstElementChild);
         const div = document.getElementById('social-share-div');
         div.style.display = 'none';
         const saveButton = document.getElementById('zee-save-button');
@@ -297,7 +299,8 @@ class ShareDivElement {
             button.addEventListener('mouseup', () => {
                 button.classList.remove('active');
             });
-            button.addEventListener('touchstart', () => {
+            button.addEventListener('touchstart', e => {
+                e.preventDefault();
                 isCancelled = false;
                 button.classList.add('active');
                 document.addEventListener('touchmove', handleTouchMove);
@@ -312,7 +315,8 @@ class ShareDivElement {
                     button.classList.remove('hover');
                 }
             };
-            const handleTouchEnd = () => {
+            const handleTouchEnd = e => {
+                e.preventDefault();
                 document.removeEventListener('touchmove', handleTouchMove);
                 document.removeEventListener('touchend', handleTouchEnd);
                 if (!isCancelled) {
@@ -332,19 +336,20 @@ class ShareDivElement {
                 this.shareFunction();
             });
         }
-        addEvents(closeButton, this.onClose);
+        addEvents(closeButton, () => {
+            this.hide();
+            this.onClose.emit();
+        });
         closeButton.addEventListener('click', () => {
             div.style.display = 'none';
         });
     }
     hide() {
         const div = document.querySelector('#social-share-div');
-        document.body.style.overflow = 'auto';
         div.style.display = 'none';
     }
     show() {
         const div = document.querySelector('#social-share-div');
-        document.body.style.overflow = 'hidden';
         div.style.display = 'block';
     }
 }

package/lib/types.d.ts

@@ -151,6 +151,8 @@ export type Type = StringPrimitiveType | NumberPrimitiveType | BooleanPrimitiveT
 export declare enum TypeHint {
     'proportion' = "proportion",
     'color-norm-rgb' = "color-norm-rgb",
+    'color-norm-rgb-srgb' = "color-norm-rgb-srgb",
+    'color-norm-rgb-linear' = "color-norm-rgb-linear",
     'color-norm-rgba' = "color-norm-rgba",
     'color-unnorm-rgb' = "color-unnorm-rgb",
     'color-unnorm-rgba' = "color-unnorm-rgba",

package/lib/types.js

@@ -29,6 +29,8 @@ export var TypeHint;
 (function (TypeHint) {
     TypeHint["proportion"] = "proportion";
     TypeHint["color-norm-rgb"] = "color-norm-rgb";
+    TypeHint["color-norm-rgb-srgb"] = "color-norm-rgb-srgb";
+    TypeHint["color-norm-rgb-linear"] = "color-norm-rgb-linear";
     TypeHint["color-norm-rgba"] = "color-norm-rgba";
     TypeHint["color-unnorm-rgb"] = "color-unnorm-rgb";
     TypeHint["color-unnorm-rgba"] = "color-unnorm-rgba";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "The core component model and built-in functionality for Mattercraft.",
   "main": "index.js",
   "types": "index.d.ts",