@playcanvas/web-components 0.3.0 → 0.5.0

package/src/components/sound-slot.ts

@@ -1,288 +1,288 @@
-import { SoundSlot } from 'playcanvas';
-
-import { AssetElement } from '../asset';
-import { AsyncElement } from '../async-element';
-import { SoundComponentElement } from './sound-component';
-
-/**
- * The SoundSlotElement interface provides properties and methods for manipulating
- * `<pc-sound>` elements. The SoundSlotElement interface also inherits the properties and
- * methods of the {@link AsyncElement} interface.
- */
-class SoundSlotElement extends AsyncElement {
-    private _asset: string = '';
-
-    private _autoPlay: boolean = false;
-
-    private _duration: number | null = null;
-
-    private _loop: boolean = false;
-
-    private _name: string = '';
-
-    private _overlap: boolean = false;
-
-    private _pitch: number = 1;
-
-    private _startTime: number = 0;
-
-    private _volume: number = 1;
-
-    /**
-     * The sound slot.
-     */
-    soundSlot: SoundSlot | null = null;
-
-    async connectedCallback() {
-        await this.soundElement?.ready();
-
-        const options = {
-            autoPlay: this._autoPlay,
-            loop: this._loop,
-            overlap: this._overlap,
-            pitch: this._pitch,
-            startTime: this._startTime,
-            volume: this._volume
-        } as any;
-        if (this._duration) {
-            options.duration = this._duration;
-        }
-
-        this.soundSlot = this.soundElement!.component!.addSlot(this._name, options);
-        this.asset = this._asset;
-        if (this._autoPlay) {
-            this.soundSlot!.play();
-        }
-
-        this._onReady();
-    }
-
-    disconnectedCallback() {
-        this.soundElement!.component!.removeSlot(this._name);
-    }
-
-    protected get soundElement(): SoundComponentElement | null {
-        const soundElement = this.parentElement as SoundComponentElement;
-
-        if (!(soundElement instanceof SoundComponentElement)) {
-            console.warn('pc-sound-slot must be a direct child of a pc-sound element');
-            return null;
-        }
-
-        return soundElement;
-    }
-
-    /**
-     * Sets the id of the `pc-asset` to use for the sound slot.
-     * @param value - The asset.
-     */
-    set asset(value: string) {
-        this._asset = value;
-        if (this.soundSlot) {
-            const id = AssetElement.get(value)?.id;
-            if (id) {
-                this.soundSlot.asset = id;
-            }
-        }
-    }
-
-    /**
-     * Gets the id of the `pc-asset` to use for the sound slot.
-     * @returns The asset.
-     */
-    get asset() {
-        return this._asset;
-    }
-
-    /**
-     * Sets the auto play flag of the sound slot.
-     * @param value - The auto play flag.
-     */
-    set autoPlay(value: boolean) {
-        this._autoPlay = value;
-        if (this.soundSlot) {
-            this.soundSlot.autoPlay = value;
-        }
-    }
-
-    /**
-     * Gets the auto play flag of the sound slot.
-     * @returns The auto play flag.
-     */
-    get autoPlay() {
-        return this._autoPlay;
-    }
-
-    /**
-     * Sets the duration of the sound slot.
-     * @param value - The duration.
-     */
-    set duration(value: number) {
-        this._duration = value;
-        if (this.soundSlot) {
-            this.soundSlot.duration = value;
-        }
-    }
-
-    /**
-     * Gets the duration of the sound slot.
-     * @returns The duration.
-     */
-    get duration() {
-        return this._duration as number;
-    }
-
-    /**
-     * Sets the loop flag of the sound slot.
-     * @param value - The loop flag.
-     */
-    set loop(value: boolean) {
-        this._loop = value;
-        if (this.soundSlot) {
-            this.soundSlot.loop = value;
-        }
-    }
-
-    /**
-     * Gets the loop flag of the sound slot.
-     * @returns The loop flag.
-     */
-    get loop() {
-        return this._loop;
-    }
-
-    /**
-     * Sets the name of the sound slot.
-     * @param value - The name.
-     */
-    set name(value: string) {
-        this._name = value;
-        if (this.soundSlot) {
-            this.soundSlot.name = value;
-        }
-    }
-
-    /**
-     * Gets the name of the sound slot.
-     * @returns The name.
-     */
-    get name() {
-        return this._name;
-    }
-
-    /**
-     * Sets the overlap flag of the sound slot.
-     * @param value - The overlap flag.
-     */
-    set overlap(value: boolean) {
-        this._overlap = value;
-        if (this.soundSlot) {
-            this.soundSlot.overlap = value;
-        }
-    }
-
-    /**
-     * Gets the overlap flag of the sound slot.
-     * @returns The overlap flag.
-     */
-    get overlap() {
-        return this._overlap;
-    }
-
-    /**
-     * Sets the pitch of the sound slot.
-     * @param value - The pitch.
-     */
-    set pitch(value: number) {
-        this._pitch = value;
-        if (this.soundSlot) {
-            this.soundSlot.pitch = value;
-        }
-    }
-
-    /**
-     * Gets the pitch of the sound slot.
-     * @returns The pitch.
-     */
-    get pitch() {
-        return this._pitch;
-    }
-
-    /**
-     * Sets the start time of the sound slot.
-     * @param value - The start time.
-     */
-    set startTime(value: number) {
-        this._startTime = value;
-        if (this.soundSlot) {
-            this.soundSlot.startTime = value;
-        }
-    }
-
-    /**
-     * Gets the start time of the sound slot.
-     * @returns The start time.
-     */
-    get startTime() {
-        return this._startTime;
-    }
-
-    /**
-     * Sets the volume of the sound slot.
-     * @param value - The volume.
-     */
-    set volume(value: number) {
-        this._volume = value;
-        if (this.soundSlot) {
-            this.soundSlot.volume = value;
-        }
-    }
-
-    /**
-     * Gets the volume of the sound slot.
-     * @returns The volume.
-     */
-    get volume() {
-        return this._volume;
-    }
-
-    static get observedAttributes() {
-        return ['asset', 'auto-play', 'duration', 'loop', 'name', 'overlap', 'pitch', 'start-time', 'volume'];
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        switch (name) {
-            case 'asset':
-                this.asset = newValue;
-                break;
-            case 'auto-play':
-                this.autoPlay = this.hasAttribute('auto-play');
-                break;
-            case 'duration':
-                this.duration = parseFloat(newValue);
-                break;
-            case 'loop':
-                this.loop = this.hasAttribute('loop');
-                break;
-            case 'name':
-                this.name = newValue;
-                break;
-            case 'overlap':
-                this.overlap = this.hasAttribute('overlap');
-                break;
-            case 'pitch':
-                this.pitch = parseFloat(newValue);
-                break;
-            case 'start-time':
-                this.startTime = parseFloat(newValue);
-                break;
-            case 'volume':
-                this.volume = parseFloat(newValue);
-                break;
-        }
-    }
-}
-
-customElements.define('pc-sound', SoundSlotElement);
-
-export { SoundSlotElement };
+import { SoundSlot } from 'playcanvas';
+
+import { AssetElement } from '../asset';
+import { AsyncElement } from '../async-element';
+import { SoundComponentElement } from './sound-component';
+
+/**
+ * The SoundSlotElement interface provides properties and methods for manipulating
+ * `<pc-sound>` elements. The SoundSlotElement interface also inherits the properties and
+ * methods of the {@link AsyncElement} interface.
+ */
+class SoundSlotElement extends AsyncElement {
+    private _asset: string = '';
+
+    private _autoPlay: boolean = false;
+
+    private _duration: number | null = null;
+
+    private _loop: boolean = false;
+
+    private _name: string = '';
+
+    private _overlap: boolean = false;
+
+    private _pitch: number = 1;
+
+    private _startTime: number = 0;
+
+    private _volume: number = 1;
+
+    /**
+     * The sound slot.
+     */
+    soundSlot: SoundSlot | null = null;
+
+    async connectedCallback() {
+        await this.soundElement?.ready();
+
+        const options = {
+            autoPlay: this._autoPlay,
+            loop: this._loop,
+            overlap: this._overlap,
+            pitch: this._pitch,
+            startTime: this._startTime,
+            volume: this._volume
+        } as any;
+        if (this._duration) {
+            options.duration = this._duration;
+        }
+
+        this.soundSlot = this.soundElement!.component!.addSlot(this._name, options);
+        this.asset = this._asset;
+        if (this._autoPlay) {
+            this.soundSlot!.play();
+        }
+
+        this._onReady();
+    }
+
+    disconnectedCallback() {
+        this.soundElement!.component!.removeSlot(this._name);
+    }
+
+    protected get soundElement(): SoundComponentElement | null {
+        const soundElement = this.parentElement as SoundComponentElement;
+
+        if (!(soundElement instanceof SoundComponentElement)) {
+            console.warn('pc-sound-slot must be a direct child of a pc-sound element');
+            return null;
+        }
+
+        return soundElement;
+    }
+
+    /**
+     * Sets the id of the `pc-asset` to use for the sound slot.
+     * @param value - The asset.
+     */
+    set asset(value: string) {
+        this._asset = value;
+        if (this.soundSlot) {
+            const id = AssetElement.get(value)?.id;
+            if (id) {
+                this.soundSlot.asset = id;
+            }
+        }
+    }
+
+    /**
+     * Gets the id of the `pc-asset` to use for the sound slot.
+     * @returns The asset.
+     */
+    get asset() {
+        return this._asset;
+    }
+
+    /**
+     * Sets the auto play flag of the sound slot.
+     * @param value - The auto play flag.
+     */
+    set autoPlay(value: boolean) {
+        this._autoPlay = value;
+        if (this.soundSlot) {
+            this.soundSlot.autoPlay = value;
+        }
+    }
+
+    /**
+     * Gets the auto play flag of the sound slot.
+     * @returns The auto play flag.
+     */
+    get autoPlay() {
+        return this._autoPlay;
+    }
+
+    /**
+     * Sets the duration of the sound slot.
+     * @param value - The duration.
+     */
+    set duration(value: number) {
+        this._duration = value;
+        if (this.soundSlot) {
+            this.soundSlot.duration = value;
+        }
+    }
+
+    /**
+     * Gets the duration of the sound slot.
+     * @returns The duration.
+     */
+    get duration() {
+        return this._duration as number;
+    }
+
+    /**
+     * Sets the loop flag of the sound slot.
+     * @param value - The loop flag.
+     */
+    set loop(value: boolean) {
+        this._loop = value;
+        if (this.soundSlot) {
+            this.soundSlot.loop = value;
+        }
+    }
+
+    /**
+     * Gets the loop flag of the sound slot.
+     * @returns The loop flag.
+     */
+    get loop() {
+        return this._loop;
+    }
+
+    /**
+     * Sets the name of the sound slot.
+     * @param value - The name.
+     */
+    set name(value: string) {
+        this._name = value;
+        if (this.soundSlot) {
+            this.soundSlot.name = value;
+        }
+    }
+
+    /**
+     * Gets the name of the sound slot.
+     * @returns The name.
+     */
+    get name() {
+        return this._name;
+    }
+
+    /**
+     * Sets the overlap flag of the sound slot.
+     * @param value - The overlap flag.
+     */
+    set overlap(value: boolean) {
+        this._overlap = value;
+        if (this.soundSlot) {
+            this.soundSlot.overlap = value;
+        }
+    }
+
+    /**
+     * Gets the overlap flag of the sound slot.
+     * @returns The overlap flag.
+     */
+    get overlap() {
+        return this._overlap;
+    }
+
+    /**
+     * Sets the pitch of the sound slot.
+     * @param value - The pitch.
+     */
+    set pitch(value: number) {
+        this._pitch = value;
+        if (this.soundSlot) {
+            this.soundSlot.pitch = value;
+        }
+    }
+
+    /**
+     * Gets the pitch of the sound slot.
+     * @returns The pitch.
+     */
+    get pitch() {
+        return this._pitch;
+    }
+
+    /**
+     * Sets the start time of the sound slot.
+     * @param value - The start time.
+     */
+    set startTime(value: number) {
+        this._startTime = value;
+        if (this.soundSlot) {
+            this.soundSlot.startTime = value;
+        }
+    }
+
+    /**
+     * Gets the start time of the sound slot.
+     * @returns The start time.
+     */
+    get startTime() {
+        return this._startTime;
+    }
+
+    /**
+     * Sets the volume of the sound slot.
+     * @param value - The volume.
+     */
+    set volume(value: number) {
+        this._volume = value;
+        if (this.soundSlot) {
+            this.soundSlot.volume = value;
+        }
+    }
+
+    /**
+     * Gets the volume of the sound slot.
+     * @returns The volume.
+     */
+    get volume() {
+        return this._volume;
+    }
+
+    static get observedAttributes() {
+        return ['asset', 'auto-play', 'duration', 'loop', 'name', 'overlap', 'pitch', 'start-time', 'volume'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+            case 'auto-play':
+                this.autoPlay = this.hasAttribute('auto-play');
+                break;
+            case 'duration':
+                this.duration = parseFloat(newValue);
+                break;
+            case 'loop':
+                this.loop = this.hasAttribute('loop');
+                break;
+            case 'name':
+                this.name = newValue;
+                break;
+            case 'overlap':
+                this.overlap = this.hasAttribute('overlap');
+                break;
+            case 'pitch':
+                this.pitch = parseFloat(newValue);
+                break;
+            case 'start-time':
+                this.startTime = parseFloat(newValue);
+                break;
+            case 'volume':
+                this.volume = parseFloat(newValue);
+                break;
+        }
+    }
+}
+
+customElements.define('pc-sound', SoundSlotElement);
+
+export { SoundSlotElement };