@acorex/components 22.1.1 → 22.1.3

package/fesm2022/acorex-components-audio-wave.mjs

@@ -1,13 +1,16 @@
 import { AXComponent } from '@acorex/cdk/common';
-import { AXSkeletonComponent, AXSkeletonModule } from '@acorex/components/skeleton';
-import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { isPlatformBrowser, NgStyle, AsyncPipe, CommonModule } from '@angular/common';
+import { AXSkeletonComponent } from '@acorex/components/skeleton';
+import { AXTranslatorPipe } from '@acorex/core/translation';
+import { isPlatformBrowser, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, signal, inject, NgZone, PLATFORM_ID, afterNextRender, ViewChild, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { viewChild, input, output, signal, computed, inject, NgZone, PLATFORM_ID, DestroyRef, afterRenderEffect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import WaveSurfer from 'wavesurfer.js';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXDecoratorModule } from '@acorex/components/decorators';
 
+const DEFAULT_BAR_WIDTH = 2;
+const DEFAULT_BAR_GAP = 2;
+const DEFAULT_BAR_RADIUS = 2;
+const DEFAULT_HEIGHT = 36;
+const FALLBACK_RGB = '128, 128, 128';
 /**
  * Displays and interacts with audio waveform visualization.
  *
@@ -15,9 +18,14 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
  */
 class AXAudioWaveComponent {
     /**
-     *  @ignore
+     * @ignore
      */
     constructor() {
+        /**
+         * @ignore
+         */
+        this.wave = viewChild('wave', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wave" }] : /* istanbul ignore next */ []));
         /**
          * Configuration settings for the audio wave.
          */
@@ -29,58 +37,89 @@ class AXAudioWaveComponent {
          * @event
          */
         this.onStatusChanged = output();
-        this.audioState = signal('paused', /* @ts-ignore */
+        /**
+         * @ignore
+         */
+        this.audioState = signal('loading', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "audioState" }] : /* istanbul ignore next */ []));
+        /**
+         * @ignore
+         */
         this.errorMessage = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
         /**
-         *  @ignore
+         * @ignore
+         */
+        this.isWaveVisible = computed(() => {
+            const state = this.audioState();
+            return state === 'ready' || state === 'playing' || state === 'paused';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isWaveVisible" }] : /* istanbul ignore next */ []));
+        /**
+         * @ignore
+         */
+        this.loadedUrl = '';
+        /**
+         * @ignore
+         */
+        this.lastVisualKey = '';
+        /**
+         * @ignore
+         */
+        this.isDestroyed = false;
+        /**
+         * @ignore
          */
         this.ngZone = inject(NgZone);
-        this.platformID = inject(PLATFORM_ID);
-        afterNextRender(() => {
-            if (isPlatformBrowser(this.platformID)) {
-                const primary200 = getComputedStyle(document.body).getPropertyValue('--ax-sys-color-primary-200');
-                const primary700 = getComputedStyle(document.body).getPropertyValue('--ax-sys-color-primary-700');
-                this.audio = WaveSurfer.create({
-                    container: this.div.nativeElement,
-                    waveColor: this.config()?.waveColor || `rgba(${primary200})`,
-                    progressColor: this.config()?.progressColor || `rgba(${primary700})`,
-                    url: this.config()?.url || '',
-                    barWidth: this.config()?.barWidth || 2,
-                    barRadius: this.config()?.barRadius || 2,
-                    barGap: this.config()?.barGap || 2,
-                    height: this.config()?.height || 36,
-                });
+        /**
+         * @ignore
+         */
+        this.platformId = inject(PLATFORM_ID);
+        /**
+         * @ignore
+         */
+        this.destroyRef = inject(DestroyRef);
+        afterRenderEffect(() => {
+            const container = this.wave()?.nativeElement;
+            const config = this.config();
+            if (this.isDestroyed || !isPlatformBrowser(this.platformId) || !container) {
+                return;
             }
-            this.load();
-            this.audio?.on('loading', () => {
-                this.audioState.set('loading');
-            });
-            this.audio?.on('ready', () => {
-                this.audioState.set('ready');
-            });
-            this.audio?.on('error', (e) => {
-                this.errorMessage.set(e?.message);
-                this.audioState.set('error');
-            });
-            this.bindEvents();
+            if (!this.audio) {
+                this.createWaveSurfer(container, config);
+                return;
+            }
+            this.syncFromConfig(config);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.isDestroyed = true;
+            this.audio?.destroy();
+            this.audio = undefined;
         });
     }
     /**
      * Loads the audio from the specified URL.
      *
      * @param url - The URL of the audio to load. Defaults to the URL from the config.
+     * @returns A promise that resolves when loading starts, or immediately when unavailable.
      */
-    load(url = this.config().url) {
-        this.audio.load(url);
+    load(url = this.config()?.url) {
+        const nextUrl = url?.trim();
+        if (!this.audio || !nextUrl) {
+            return Promise.resolve();
+        }
+        this.loadedUrl = nextUrl;
+        this.audioState.set('loading');
+        this.errorMessage.set('');
+        return this.audio.load(nextUrl);
     }
     /**
      * Plays the audio.
      *
+     * @returns A promise that resolves when playback starts.
      */
     play() {
-        return this.audio?.play();
+        return this.audio?.play() ?? Promise.resolve();
     }
     /**
      * Pauses the audio.
@@ -89,19 +128,26 @@ class AXAudioWaveComponent {
         this.audio?.pause();
     }
     /**
-     * Retrieves the duration of the audio.
+     * Retrieves the duration of the audio in seconds.
      *
+     * @returns The audio duration, or `0` when unavailable.
      */
     getDuration() {
         return this.audio?.getDuration() ?? 0;
     }
     /**
-     * Retrieves the media element of the audio.
+     * Retrieves the underlying HTML media element.
      *
+     * @returns The media element used by WaveSurfer, or `undefined` when unavailable.
      */
     getMediaElement() {
         return this.audio?.getMediaElement();
     }
+    /**
+     * Retrieves the current playback position in seconds.
+     *
+     * @returns The current time, or `0` when unavailable.
+     */
     getCurrentTime() {
         return this.audio?.getCurrentTime() ?? this.getMediaElement()?.currentTime ?? 0;
     }
@@ -111,289 +157,231 @@ class AXAudioWaveComponent {
      * @param rate - The playback rate to set.
      */
     setRate(rate) {
-        this.audio.setPlaybackRate(rate);
+        this.audio?.setPlaybackRate(rate);
     }
+    /**
+     * Mutes or unmutes the audio.
+     *
+     * @param muted - Whether the audio should be muted.
+     */
     setMuted(muted) {
-        const media = this.getMediaElement();
-        if (media) {
-            media.muted = muted;
-        }
-        this.audio?.setVolume(muted ? 0 : 1);
+        this.audio?.setMuted(muted);
     }
+    /**
+     * Indicates whether the audio is currently muted.
+     *
+     * @returns True when muted; otherwise false.
+     */
     isMuted() {
-        const media = this.getMediaElement();
-        return media?.muted ?? this.audio?.getVolume() === 0;
+        return this.audio?.getMuted() ?? false;
     }
     /**
-     *  @ignore
+     * @ignore
      */
-    bindEvents() {
-        this.handleLoad();
-        this.handleLoading();
-        this.handleDecode();
-        this.handleReady();
-        this.handleRedRawComplete();
-        this.handlePlay();
-        this.handlePause();
-        this.handleFinish();
-        this.handleTimeUpdate();
-        this.handleSeeking();
-        this.handleInteraction();
-        this.handleClick();
-        this.handleDrag();
-        this.handleScroll();
-        this.handleZoom();
-        this.handleDestroy();
-        this.handleError();
-    }
-    /** When audio starts loading */
-    handleLoad() {
-        this.audio?.on('load', (url) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { url: url },
-                    status: 'load',
-                    isUserInteraction: false,
-                });
-            });
+    createWaveSurfer(container, config) {
+        const visualOptions = this.resolveVisualOptions(config);
+        this.lastVisualKey = JSON.stringify(visualOptions);
+        this.audio = WaveSurfer.create({
+            container,
+            ...visualOptions,
         });
+        this.bindEvents();
+        this.applyUrlAndRate(config);
     }
-    /** During audio loading */
-    handleLoading() {
-        this.audio?.on('loading', (percent) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { percent: percent },
-                    status: 'loading',
-                    isUserInteraction: false,
-                });
-            });
-        });
+    /**
+     * @ignore
+     */
+    syncFromConfig(config) {
+        if (!this.audio) {
+            return;
+        }
+        const visualOptions = this.resolveVisualOptions(config);
+        const visualKey = JSON.stringify(visualOptions);
+        if (visualKey !== this.lastVisualKey) {
+            this.lastVisualKey = visualKey;
+            this.audio.setOptions(visualOptions);
+        }
+        this.applyUrlAndRate(config);
     }
-    /** When the audio has been decoded */
-    handleDecode() {
-        this.audio?.on('decode', (duration) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { duration: duration },
-                    status: 'decode',
-                    isUserInteraction: false,
-                });
+    /**
+     * @ignore
+     */
+    applyUrlAndRate(config) {
+        const url = config?.url?.trim() ?? '';
+        if (url && url !== this.loadedUrl) {
+            this.loadedUrl = url;
+            void this.audio?.load(url);
+        }
+        else if (!url) {
+            queueMicrotask(() => {
+                if (!this.isDestroyed && !this.loadedUrl && this.audioState() === 'loading') {
+                    this.audioState.set('paused');
+                }
             });
-        });
+        }
+        if (config?.audioRate != null) {
+            this.audio?.setPlaybackRate(config.audioRate);
+        }
     }
-    /** When the audio is both decoded and can play */
-    handleReady() {
-        this.audio?.on('ready', (duration) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { duration: duration },
-                    status: 'ready',
-                    isUserInteraction: false,
-                });
-            });
-        });
+    /**
+     * @ignore
+     */
+    resolveVisualOptions(config) {
+        const primary200 = this.readCssRgbVar('--ax-sys-color-primary-200');
+        const primary700 = this.readCssRgbVar('--ax-sys-color-primary-700');
+        return {
+            waveColor: config?.waveColor ?? `rgba(${primary200})`,
+            progressColor: config?.progressColor ?? `rgba(${primary700})`,
+            barWidth: config?.barWidth ?? DEFAULT_BAR_WIDTH,
+            barGap: config?.barGap ?? DEFAULT_BAR_GAP,
+            barRadius: config?.barRadius ?? DEFAULT_BAR_RADIUS,
+            height: config?.height ?? DEFAULT_HEIGHT,
+        };
     }
-    /** When all audio channel chunks of the waveform have drawn */
-    handleRedRawComplete() {
-        this.audio?.on('redrawcomplete', () => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: null,
-                    status: 'redrawcomplete',
-                    isUserInteraction: false,
-                });
-            });
-        });
+    /**
+     * @ignore
+     */
+    readCssRgbVar(name) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return FALLBACK_RGB;
+        }
+        return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || FALLBACK_RGB;
     }
-    /** When the audio starts playing */
-    handlePlay() {
-        this.audio?.on('play', () => {
-            this.ngZone.run(() => {
-                this.audioState.set('ready');
-                this.onStatusChanged.emit({ component: this, data: null, status: 'play', isUserInteraction: false });
-            });
+    /**
+     * @ignore
+     */
+    bindEvents() {
+        if (!this.audio) {
+            return;
+        }
+        this.audio.on('load', (url) => {
+            this.emitStatus('load', { url }, false);
         });
-    }
-    /** When the audio pauses */
-    handlePause() {
-        this.audio?.on('pause', () => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({ component: this, data: null, status: 'pause', isUserInteraction: false });
+        this.audio.on('loading', (percent) => {
+            this.runInZone(() => {
+                this.errorMessage.set('');
+                this.audioState.set('loading');
+                this.emitStatus('loading', { percent }, false, false);
             });
         });
-    }
-    /** When the audio finishes playing */
-    handleFinish() {
-        this.audio?.on('finish', () => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: null,
-                    status: 'finish',
-                    isUserInteraction: false,
-                });
-            });
+        this.audio.on('decode', (duration) => {
+            this.emitStatus('decode', { duration }, false);
         });
-    }
-    /** On audio position change, fires continuously during playback */
-    handleTimeUpdate() {
-        this.audio?.on('timeupdate', (currentTime) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { currentTime: currentTime },
-                    status: 'timeupdate',
-                    isUserInteraction: false,
-                });
+        this.audio.on('ready', (duration) => {
+            this.runInZone(() => {
+                if (this.audioState() !== 'playing') {
+                    this.audioState.set('ready');
+                }
+                this.emitStatus('ready', { duration }, false, false);
             });
         });
-    }
-    /** When the user seeks to a new position */
-    handleSeeking() {
-        this.audio?.on('seeking', (currentTime) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { currentTime: currentTime },
-                    status: 'seeking',
-                    isUserInteraction: false,
-                });
-            });
+        this.audio.on('redrawcomplete', () => {
+            this.emitStatus('redrawcomplete', null, false);
         });
-    }
-    /** When the user interacts with the waveform (i.g. clicks or drags on it) */
-    handleInteraction() {
-        this.audio?.on('interaction', (newTime) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { newTime: newTime },
-                    status: 'interaction',
-                    isUserInteraction: false,
-                });
+        this.audio.on('play', () => {
+            this.runInZone(() => {
+                this.audioState.set('playing');
+                this.emitStatus('play', null, false, false);
             });
         });
-    }
-    /** When the user clicks on the waveform */
-    handleClick() {
-        this.audio?.on('click', (relativeX) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { relativeX: relativeX },
-                    status: 'click',
-                    isUserInteraction: false,
-                });
+        this.audio.on('pause', () => {
+            this.runInZone(() => {
+                if (this.audioState() !== 'error') {
+                    this.audioState.set('paused');
+                }
+                this.emitStatus('pause', null, false, false);
             });
         });
-    }
-    /** When the user drags the cursor */
-    handleDrag() {
-        this.audio?.on('drag', (relativeX) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { relativeX: relativeX },
-                    status: 'drag',
-                    isUserInteraction: false,
-                });
+        this.audio.on('finish', () => {
+            this.runInZone(() => {
+                this.audioState.set('paused');
+                this.emitStatus('finish', null, false, false);
             });
         });
-    }
-    /** When the waveform is scrolled (panned) */
-    handleScroll() {
-        this.audio?.on('scroll', (visibleStartTime, visibleEndTime) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { visibleStartTime, visibleEndTime },
-                    status: 'scroll',
-                    isUserInteraction: false,
-                });
-            });
+        this.audio.on('timeupdate', (currentTime) => {
+            this.emitStatus('timeupdate', { currentTime }, false);
         });
-    }
-    /** When the zoom level changes */
-    handleZoom() {
-        this.audio?.on('zoom', (minPxPerSec) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { minPxPerSec: minPxPerSec },
-                    status: 'zoom',
-                    isUserInteraction: false,
-                });
-            });
+        this.audio.on('seeking', (currentTime) => {
+            this.emitStatus('seeking', { currentTime }, true);
         });
-    }
-    /** Just before the waveform is destroyed so you can clean up your events */
-    handleDestroy() {
-        this.audio?.on('destroy', () => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: null,
-                    status: 'destroy',
-                    isUserInteraction: false,
-                });
+        this.audio.on('interaction', (newTime) => {
+            this.emitStatus('interaction', { newTime }, true);
+        });
+        this.audio.on('click', (relativeX, relativeY) => {
+            this.emitStatus('click', { relativeX, relativeY }, true);
+        });
+        this.audio.on('drag', (relativeX) => {
+            this.emitStatus('drag', { relativeX }, true);
+        });
+        this.audio.on('scroll', (visibleStartTime, visibleEndTime) => {
+            this.emitStatus('scroll', { visibleStartTime, visibleEndTime }, true);
+        });
+        this.audio.on('zoom', (minPxPerSec) => {
+            this.emitStatus('zoom', { minPxPerSec }, false);
+        });
+        this.audio.on('destroy', () => {
+            this.emitStatus('destroy', null, false);
+        });
+        this.audio.on('error', (error) => {
+            this.runInZone(() => {
+                const message = error?.message ?? '';
+                this.errorMessage.set(message);
+                this.audioState.set('error');
+                this.emitStatus('error', { message }, false, false);
             });
         });
     }
-    /** Just before the waveform is destroyed so you can clean up your events */
-    handleError() {
-        this.audio?.on('error', (e) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({ component: this, data: e, status: 'error', isUserInteraction: false });
+    /**
+     * @ignore
+     */
+    emitStatus(status, data, isUserInteraction, wrapInZone = true) {
+        if (this.isDestroyed) {
+            return;
+        }
+        const emit = () => {
+            this.onStatusChanged.emit({
+                component: this,
+                data,
+                status,
+                isUserInteraction,
             });
-        });
+        };
+        if (wrapInZone) {
+            this.runInZone(emit);
+            return;
+        }
+        emit();
     }
-    ngOnDestroy() {
-        this.audio.destroy();
+    /**
+     * @ignore
+     */
+    runInZone(fn) {
+        if (this.isDestroyed) {
+            return;
+        }
+        this.ngZone.run(fn);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXAudioWaveComponent, isStandalone: true, selector: "ax-audio-wave", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStatusChanged: "onStatusChanged" }, providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], viewQueries: [{ propertyName: "div", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"ax-audio-wave\" #d [ngStyle]=\"{ display: audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n  @case ('loading') {\n    <ax-skeleton class=\"h-5 w-full rounded-full\"></ax-skeleton>\n  }\n  @case ('error') {\n    <div class=\"ax-wave-message\">\n      {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n    </div>\n  }\n}\n", styles: ["@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-wave-message{padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-start:.5rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXAudioWaveComponent, isStandalone: true, selector: "ax-audio-wave", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStatusChanged: "onStatusChanged" }, host: { properties: { "attr.aria-busy": "audioState() === \"loading\" || null", "attr.aria-invalid": "audioState() === \"error\" || null" } }, providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], viewQueries: [{ propertyName: "wave", first: true, predicate: ["wave"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-audio-wave-host{position:relative;display:block;width:100%}ax-audio-wave .ax-audio-wave-host--loading{min-height:1.25rem}ax-audio-wave .ax-audio-wave{width:100%}ax-audio-wave .ax-audio-wave--hidden{visibility:hidden}ax-audio-wave .ax-audio-wave-skeleton{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;height:calc(var(--spacing, .25rem) * 5);width:100%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:calc(infinity * 1px)}ax-audio-wave .ax-wave-message{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-audio-wave', encapsulation: ViewEncapsulation.None, imports: [NgStyle, AsyncPipe, AXTranslatorPipe, AXSkeletonComponent], providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], template: "<div class=\"ax-audio-wave\" #d [ngStyle]=\"{ display: audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n  @case ('loading') {\n    <ax-skeleton class=\"h-5 w-full rounded-full\"></ax-skeleton>\n  }\n  @case ('error') {\n    <div class=\"ax-wave-message\">\n      {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n    </div>\n  }\n}\n", styles: ["@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-wave-message{padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-start:.5rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { div: [{
-                type: ViewChild,
-                args: ['d', { static: false }]
-            }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], onStatusChanged: [{ type: i0.Output, args: ["onStatusChanged"] }] } });
+            args: [{ selector: 'ax-audio-wave', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, AXTranslatorPipe, AXSkeletonComponent], providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], host: {
+                        '[attr.aria-busy]': 'audioState() === "loading" || null',
+                        '[attr.aria-invalid]': 'audioState() === "error" || null',
+                    }, template: "<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-audio-wave-host{position:relative;display:block;width:100%}ax-audio-wave .ax-audio-wave-host--loading{min-height:1.25rem}ax-audio-wave .ax-audio-wave{width:100%}ax-audio-wave .ax-audio-wave--hidden{visibility:hidden}ax-audio-wave .ax-audio-wave-skeleton{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;height:calc(var(--spacing, .25rem) * 5);width:100%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:calc(infinity * 1px)}ax-audio-wave .ax-wave-message{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { wave: [{ type: i0.ViewChild, args: ['wave', { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], onStatusChanged: [{ type: i0.Output, args: ["onStatusChanged"] }] } });
 
 class AXAudioWaveModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, imports: [CommonModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXSkeletonModule,
-            AXTranslationModule,
-            AXAudioWaveComponent], exports: [AXAudioWaveComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, imports: [CommonModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXSkeletonModule,
-            AXTranslationModule,
-            AXAudioWaveComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, imports: [AXAudioWaveComponent], exports: [AXAudioWaveComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, imports: [AXAudioWaveComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [AXAudioWaveComponent],
-                    imports: [
-                        CommonModule,
-                        AXButtonModule,
-                        AXDecoratorModule,
-                        AXSkeletonModule,
-                        AXTranslationModule,
-                        AXAudioWaveComponent,
-                    ],
+                    imports: [AXAudioWaveComponent],
                 }]
         }] });
 

package/fesm2022/acorex-components-audio-wave.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-audio-wave.mjs","sources":["../../../../packages/components/audio-wave/src/lib/audio-wave.component.ts","../../../../packages/components/audio-wave/src/lib/audio-wave.component.html","../../../../packages/components/audio-wave/src/lib/audio-wave.module.ts","../../../../packages/components/audio-wave/src/acorex-components-audio-wave.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { AXSkeletonComponent } from '@acorex/components/skeleton';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport { AsyncPipe, isPlatformBrowser, NgStyle } from '@angular/common';\nimport {\n  afterNextRender,\n  Component,\n  ElementRef,\n  inject,\n  input,\n  InputSignal,\n  NgZone,\n  OnDestroy,\n  output,\n  PLATFORM_ID,\n  signal,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport WaveSurfer from 'wavesurfer.js';\nimport { AXAudioWaveChangeEvent, AXWaveConfig } from './interfaces/audio-wave.interface';\n\n/**\n * Displays and interacts with audio waveform visualization.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-audio-wave',\n  templateUrl: './audio-wave.component.html',\n  styleUrls: ['./audio-wave.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgStyle, AsyncPipe, AXTranslatorPipe, AXSkeletonComponent],\n  providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }],\n})\nexport class AXAudioWaveComponent implements OnDestroy {\n  /**\n   *  @ignore\n   */\n  @ViewChild('d', { static: false }) protected div: ElementRef<HTMLDivElement>;\n\n  /**\n   * Configuration settings for the audio wave.\n   */\n  config: InputSignal<AXWaveConfig> = input<AXWaveConfig>();\n\n  /**\n   * Emits an event when the status of the audio wave changes.\n   *\n   * @event\n   */\n  onStatusChanged = output<AXAudioWaveChangeEvent>();\n\n  audioState = signal<'playing' | 'paused' | 'loading' | 'ready' | 'error'>('paused');\n\n  errorMessage = signal('');\n\n  /**\n   *  @ignore\n   */\n  protected audio: WaveSurfer;\n\n  /**\n   *  @ignore\n   */\n  private ngZone = inject(NgZone);\n\n  private platformID = inject(PLATFORM_ID);\n  /**\n   *  @ignore\n   */\n  constructor() {\n    afterNextRender(() => {\n      if (isPlatformBrowser(this.platformID)) {\n        const primary200 = getComputedStyle(document.body).getPropertyValue('--ax-sys-color-primary-200');\n        const primary700 = getComputedStyle(document.body).getPropertyValue('--ax-sys-color-primary-700');\n\n        this.audio = WaveSurfer.create({\n          container: this.div.nativeElement,\n          waveColor: this.config()?.waveColor || `rgba(${primary200})`,\n          progressColor: this.config()?.progressColor || `rgba(${primary700})`,\n          url: this.config()?.url || '',\n          barWidth: this.config()?.barWidth || 2,\n          barRadius: this.config()?.barRadius || 2,\n          barGap: this.config()?.barGap || 2,\n          height: this.config()?.height || 36,\n        });\n      }\n      this.load();\n      this.audio?.on('loading', () => {\n        this.audioState.set('loading');\n      });\n      this.audio?.on('ready', () => {\n        this.audioState.set('ready');\n      });\n      this.audio?.on('error', (e) => {\n        this.errorMessage.set(e?.message);\n        this.audioState.set('error');\n      });\n      this.bindEvents();\n    });\n  }\n\n  /**\n   * Loads the audio from the specified URL.\n   *\n   * @param url - The URL of the audio to load. Defaults to the URL from the config.\n   */\n  load(url = this.config().url) {\n    this.audio.load(url);\n  }\n\n  /**\n   * Plays the audio.\n   *\n   */\n  play(): Promise<any> {\n    return this.audio?.play();\n  }\n\n  /**\n   * Pauses the audio.\n   */\n  pause(): void {\n    this.audio?.pause();\n  }\n\n  /**\n   * Retrieves the duration of the audio.\n   *\n   */\n  getDuration() {\n    return this.audio?.getDuration() ?? 0;\n  }\n\n  /**\n   * Retrieves the media element of the audio.\n   *\n   */\n  getMediaElement() {\n    return this.audio?.getMediaElement();\n  }\n\n  getCurrentTime() {\n    return this.audio?.getCurrentTime() ?? this.getMediaElement()?.currentTime ?? 0;\n  }\n\n  /**\n   * Sets the playback rate of the audio.\n   *\n   * @param rate - The playback rate to set.\n   */\n  setRate(rate: number) {\n    this.audio.setPlaybackRate(rate);\n  }\n\n  setMuted(muted: boolean) {\n    const media = this.getMediaElement();\n    if (media) {\n      media.muted = muted;\n    }\n    this.audio?.setVolume(muted ? 0 : 1);\n  }\n\n  isMuted() {\n    const media = this.getMediaElement();\n    return media?.muted ?? this.audio?.getVolume() === 0;\n  }\n\n  /**\n   *  @ignore\n   */\n  protected bindEvents() {\n    this.handleLoad();\n    this.handleLoading();\n    this.handleDecode();\n    this.handleReady();\n    this.handleRedRawComplete();\n    this.handlePlay();\n    this.handlePause();\n    this.handleFinish();\n    this.handleTimeUpdate();\n    this.handleSeeking();\n    this.handleInteraction();\n    this.handleClick();\n    this.handleDrag();\n    this.handleScroll();\n    this.handleZoom();\n    this.handleDestroy();\n    this.handleError();\n  }\n  /** When audio starts loading */\n  protected handleLoad() {\n    this.audio?.on('load', (url) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { url: url },\n          status: 'load',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** During audio loading */\n  protected handleLoading() {\n    this.audio?.on('loading', (percent) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { percent: percent },\n          status: 'loading',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the audio has been decoded */\n  protected handleDecode() {\n    this.audio?.on('decode', (duration) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { duration: duration },\n          status: 'decode',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the audio is both decoded and can play */\n  protected handleReady() {\n    this.audio?.on('ready', (duration) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { duration: duration },\n          status: 'ready',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When all audio channel chunks of the waveform have drawn */\n  protected handleRedRawComplete() {\n    this.audio?.on('redrawcomplete', () => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: null,\n          status: 'redrawcomplete',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the audio starts playing */\n  protected handlePlay() {\n    this.audio?.on('play', () => {\n      this.ngZone.run(() => {\n        this.audioState.set('ready');\n        this.onStatusChanged.emit({ component: this, data: null, status: 'play', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the audio pauses */\n  protected handlePause() {\n    this.audio?.on('pause', () => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: null, status: 'pause', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the audio finishes playing */\n  protected handleFinish() {\n    this.audio?.on('finish', () => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: null,\n          status: 'finish',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** On audio position change, fires continuously during playback */\n  protected handleTimeUpdate() {\n    this.audio?.on('timeupdate', (currentTime) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { currentTime: currentTime },\n          status: 'timeupdate',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the user seeks to a new position */\n  protected handleSeeking() {\n    this.audio?.on('seeking', (currentTime) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { currentTime: currentTime },\n          status: 'seeking',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the user interacts with the waveform (i.g. clicks or drags on it) */\n  protected handleInteraction() {\n    this.audio?.on('interaction', (newTime) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { newTime: newTime },\n          status: 'interaction',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the user clicks on the waveform */\n  protected handleClick() {\n    this.audio?.on('click', (relativeX) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { relativeX: relativeX },\n          status: 'click',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the user drags the cursor */\n  protected handleDrag() {\n    this.audio?.on('drag', (relativeX) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { relativeX: relativeX },\n          status: 'drag',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the waveform is scrolled (panned) */\n  protected handleScroll() {\n    this.audio?.on('scroll', (visibleStartTime, visibleEndTime) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { visibleStartTime, visibleEndTime },\n          status: 'scroll',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the zoom level changes */\n  protected handleZoom() {\n    this.audio?.on('zoom', (minPxPerSec) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { minPxPerSec: minPxPerSec },\n          status: 'zoom',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** Just before the waveform is destroyed so you can clean up your events */\n  protected handleDestroy() {\n    this.audio?.on('destroy', () => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: null,\n          status: 'destroy',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n  /** Just before the waveform is destroyed so you can clean up your events */\n  protected handleError() {\n    this.audio?.on('error', (e) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: e, status: 'error', isUserInteraction: false });\n      });\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.audio.destroy();\n  }\n}\n","<div class=\"ax-audio-wave\" #d [ngStyle]=\"{ display: audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n  @case ('loading') {\n    <ax-skeleton class=\"h-5 w-full rounded-full\"></ax-skeleton>\n  }\n  @case ('error') {\n    <div class=\"ax-wave-message\">\n      {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n    </div>\n  }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXSkeletonModule } from '@acorex/components/skeleton';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXAudioWaveComponent } from './audio-wave.component';\n\n@NgModule({\n  exports: [AXAudioWaveComponent],\n  imports: [\n    CommonModule,\n    AXButtonModule,\n    AXDecoratorModule,\n    AXSkeletonModule,\n    AXTranslationModule,\n    AXAudioWaveComponent,\n  ],\n})\nexport class AXAudioWaveModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-audio-wave.mjs","sources":["../../../../packages/components/audio-wave/src/lib/audio-wave.component.ts","../../../../packages/components/audio-wave/src/lib/audio-wave.component.html","../../../../packages/components/audio-wave/src/lib/audio-wave.module.ts","../../../../packages/components/audio-wave/src/acorex-components-audio-wave.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { AXSkeletonComponent } from '@acorex/components/skeleton';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport { AsyncPipe, isPlatformBrowser } from '@angular/common';\nimport {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  NgZone,\n  output,\n  PLATFORM_ID,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport WaveSurfer from 'wavesurfer.js';\nimport type {\n  AXAudioWaveChangeEvent,\n  AXAudioWaveEventPayload,\n  AXAudioWaveState,\n  AXAudioWaveStatus,\n  AXWaveConfig,\n} from './interfaces/audio-wave.interface';\n\nconst DEFAULT_BAR_WIDTH = 2;\nconst DEFAULT_BAR_GAP = 2;\nconst DEFAULT_BAR_RADIUS = 2;\nconst DEFAULT_HEIGHT = 36;\nconst FALLBACK_RGB = '128, 128, 128';\n\n/**\n * Displays and interacts with audio waveform visualization.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-audio-wave',\n  templateUrl: './audio-wave.component.html',\n  styleUrls: ['./audio-wave.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [AsyncPipe, AXTranslatorPipe, AXSkeletonComponent],\n  providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }],\n  host: {\n    '[attr.aria-busy]': 'audioState() === \"loading\" || null',\n    '[attr.aria-invalid]': 'audioState() === \"error\" || null',\n  },\n})\nexport class AXAudioWaveComponent {\n  /**\n   * @ignore\n   */\n  private readonly wave = viewChild<ElementRef<HTMLDivElement>>('wave');\n\n  /**\n   * Configuration settings for the audio wave.\n   */\n  readonly config = input<AXWaveConfig>();\n\n  /**\n   * Emits an event when the status of the audio wave changes.\n   *\n   * @event\n   */\n  readonly onStatusChanged = output<AXAudioWaveChangeEvent>();\n\n  /**\n   * @ignore\n   */\n  protected readonly audioState = signal<AXAudioWaveState>('loading');\n\n  /**\n   * @ignore\n   */\n  protected readonly errorMessage = signal('');\n\n  /**\n   * @ignore\n   */\n  protected readonly isWaveVisible = computed(() => {\n    const state = this.audioState();\n    return state === 'ready' || state === 'playing' || state === 'paused';\n  });\n\n  /**\n   * @ignore\n   */\n  private audio: WaveSurfer | undefined;\n\n  /**\n   * @ignore\n   */\n  private loadedUrl = '';\n\n  /**\n   * @ignore\n   */\n  private lastVisualKey = '';\n\n  /**\n   * @ignore\n   */\n  private isDestroyed = false;\n\n  /**\n   * @ignore\n   */\n  private readonly ngZone = inject(NgZone);\n\n  /**\n   * @ignore\n   */\n  private readonly platformId = inject(PLATFORM_ID);\n\n  /**\n   * @ignore\n   */\n  private readonly destroyRef = inject(DestroyRef);\n\n  /**\n   * @ignore\n   */\n  constructor() {\n    afterRenderEffect(() => {\n      const container = this.wave()?.nativeElement;\n      const config = this.config();\n\n      if (this.isDestroyed || !isPlatformBrowser(this.platformId) || !container) {\n        return;\n      }\n\n      if (!this.audio) {\n        this.createWaveSurfer(container, config);\n        return;\n      }\n\n      this.syncFromConfig(config);\n    });\n\n    this.destroyRef.onDestroy(() => {\n      this.isDestroyed = true;\n      this.audio?.destroy();\n      this.audio = undefined;\n    });\n  }\n\n  /**\n   * Loads the audio from the specified URL.\n   *\n   * @param url - The URL of the audio to load. Defaults to the URL from the config.\n   * @returns A promise that resolves when loading starts, or immediately when unavailable.\n   */\n  load(url = this.config()?.url): Promise<void> {\n    const nextUrl = url?.trim();\n    if (!this.audio || !nextUrl) {\n      return Promise.resolve();\n    }\n\n    this.loadedUrl = nextUrl;\n    this.audioState.set('loading');\n    this.errorMessage.set('');\n    return this.audio.load(nextUrl);\n  }\n\n  /**\n   * Plays the audio.\n   *\n   * @returns A promise that resolves when playback starts.\n   */\n  play(): Promise<void> {\n    return this.audio?.play() ?? Promise.resolve();\n  }\n\n  /**\n   * Pauses the audio.\n   */\n  pause(): void {\n    this.audio?.pause();\n  }\n\n  /**\n   * Retrieves the duration of the audio in seconds.\n   *\n   * @returns The audio duration, or `0` when unavailable.\n   */\n  getDuration(): number {\n    return this.audio?.getDuration() ?? 0;\n  }\n\n  /**\n   * Retrieves the underlying HTML media element.\n   *\n   * @returns The media element used by WaveSurfer, or `undefined` when unavailable.\n   */\n  getMediaElement(): HTMLMediaElement | undefined {\n    return this.audio?.getMediaElement();\n  }\n\n  /**\n   * Retrieves the current playback position in seconds.\n   *\n   * @returns The current time, or `0` when unavailable.\n   */\n  getCurrentTime(): number {\n    return this.audio?.getCurrentTime() ?? this.getMediaElement()?.currentTime ?? 0;\n  }\n\n  /**\n   * Sets the playback rate of the audio.\n   *\n   * @param rate - The playback rate to set.\n   */\n  setRate(rate: number): void {\n    this.audio?.setPlaybackRate(rate);\n  }\n\n  /**\n   * Mutes or unmutes the audio.\n   *\n   * @param muted - Whether the audio should be muted.\n   */\n  setMuted(muted: boolean): void {\n    this.audio?.setMuted(muted);\n  }\n\n  /**\n   * Indicates whether the audio is currently muted.\n   *\n   * @returns True when muted; otherwise false.\n   */\n  isMuted(): boolean {\n    return this.audio?.getMuted() ?? false;\n  }\n\n  /**\n   * @ignore\n   */\n  private createWaveSurfer(container: HTMLDivElement, config?: AXWaveConfig): void {\n    const visualOptions = this.resolveVisualOptions(config);\n    this.lastVisualKey = JSON.stringify(visualOptions);\n    this.audio = WaveSurfer.create({\n      container,\n      ...visualOptions,\n    });\n    this.bindEvents();\n    this.applyUrlAndRate(config);\n  }\n\n  /**\n   * @ignore\n   */\n  private syncFromConfig(config?: AXWaveConfig): void {\n    if (!this.audio) {\n      return;\n    }\n\n    const visualOptions = this.resolveVisualOptions(config);\n    const visualKey = JSON.stringify(visualOptions);\n    if (visualKey !== this.lastVisualKey) {\n      this.lastVisualKey = visualKey;\n      this.audio.setOptions(visualOptions);\n    }\n\n    this.applyUrlAndRate(config);\n  }\n\n  /**\n   * @ignore\n   */\n  private applyUrlAndRate(config?: AXWaveConfig): void {\n    const url = config?.url?.trim() ?? '';\n    if (url && url !== this.loadedUrl) {\n      this.loadedUrl = url;\n      void this.audio?.load(url);\n    } else if (!url) {\n      queueMicrotask(() => {\n        if (!this.isDestroyed && !this.loadedUrl && this.audioState() === 'loading') {\n          this.audioState.set('paused');\n        }\n      });\n    }\n\n    if (config?.audioRate != null) {\n      this.audio?.setPlaybackRate(config.audioRate);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  private resolveVisualOptions(config?: AXWaveConfig) {\n    const primary200 = this.readCssRgbVar('--ax-sys-color-primary-200');\n    const primary700 = this.readCssRgbVar('--ax-sys-color-primary-700');\n\n    return {\n      waveColor: config?.waveColor ?? `rgba(${primary200})`,\n      progressColor: config?.progressColor ?? `rgba(${primary700})`,\n      barWidth: config?.barWidth ?? DEFAULT_BAR_WIDTH,\n      barGap: config?.barGap ?? DEFAULT_BAR_GAP,\n      barRadius: config?.barRadius ?? DEFAULT_BAR_RADIUS,\n      height: config?.height ?? DEFAULT_HEIGHT,\n    };\n  }\n\n  /**\n   * @ignore\n   */\n  private readCssRgbVar(name: string): string {\n    if (!isPlatformBrowser(this.platformId)) {\n      return FALLBACK_RGB;\n    }\n\n    return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || FALLBACK_RGB;\n  }\n\n  /**\n   * @ignore\n   */\n  private bindEvents(): void {\n    if (!this.audio) {\n      return;\n    }\n\n    this.audio.on('load', (url) => {\n      this.emitStatus('load', { url }, false);\n    });\n\n    this.audio.on('loading', (percent) => {\n      this.runInZone(() => {\n        this.errorMessage.set('');\n        this.audioState.set('loading');\n        this.emitStatus('loading', { percent }, false, false);\n      });\n    });\n\n    this.audio.on('decode', (duration) => {\n      this.emitStatus('decode', { duration }, false);\n    });\n\n    this.audio.on('ready', (duration) => {\n      this.runInZone(() => {\n        if (this.audioState() !== 'playing') {\n          this.audioState.set('ready');\n        }\n        this.emitStatus('ready', { duration }, false, false);\n      });\n    });\n\n    this.audio.on('redrawcomplete', () => {\n      this.emitStatus('redrawcomplete', null, false);\n    });\n\n    this.audio.on('play', () => {\n      this.runInZone(() => {\n        this.audioState.set('playing');\n        this.emitStatus('play', null, false, false);\n      });\n    });\n\n    this.audio.on('pause', () => {\n      this.runInZone(() => {\n        if (this.audioState() !== 'error') {\n          this.audioState.set('paused');\n        }\n        this.emitStatus('pause', null, false, false);\n      });\n    });\n\n    this.audio.on('finish', () => {\n      this.runInZone(() => {\n        this.audioState.set('paused');\n        this.emitStatus('finish', null, false, false);\n      });\n    });\n\n    this.audio.on('timeupdate', (currentTime) => {\n      this.emitStatus('timeupdate', { currentTime }, false);\n    });\n\n    this.audio.on('seeking', (currentTime) => {\n      this.emitStatus('seeking', { currentTime }, true);\n    });\n\n    this.audio.on('interaction', (newTime) => {\n      this.emitStatus('interaction', { newTime }, true);\n    });\n\n    this.audio.on('click', (relativeX, relativeY) => {\n      this.emitStatus('click', { relativeX, relativeY }, true);\n    });\n\n    this.audio.on('drag', (relativeX) => {\n      this.emitStatus('drag', { relativeX }, true);\n    });\n\n    this.audio.on('scroll', (visibleStartTime, visibleEndTime) => {\n      this.emitStatus('scroll', { visibleStartTime, visibleEndTime }, true);\n    });\n\n    this.audio.on('zoom', (minPxPerSec) => {\n      this.emitStatus('zoom', { minPxPerSec }, false);\n    });\n\n    this.audio.on('destroy', () => {\n      this.emitStatus('destroy', null, false);\n    });\n\n    this.audio.on('error', (error) => {\n      this.runInZone(() => {\n        const message = error?.message ?? '';\n        this.errorMessage.set(message);\n        this.audioState.set('error');\n        this.emitStatus('error', { message }, false, false);\n      });\n    });\n  }\n\n  /**\n   * @ignore\n   */\n  private emitStatus(\n    status: AXAudioWaveStatus,\n    data: AXAudioWaveEventPayload | null,\n    isUserInteraction: boolean,\n    wrapInZone = true,\n  ): void {\n    if (this.isDestroyed) {\n      return;\n    }\n\n    const emit = () => {\n      this.onStatusChanged.emit({\n        component: this,\n        data,\n        status,\n        isUserInteraction,\n      });\n    };\n\n    if (wrapInZone) {\n      this.runInZone(emit);\n      return;\n    }\n\n    emit();\n  }\n\n  /**\n   * @ignore\n   */\n  private runInZone(fn: () => void): void {\n    if (this.isDestroyed) {\n      return;\n    }\n\n    this.ngZone.run(fn);\n  }\n}\n","<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXAudioWaveComponent } from './audio-wave.component';\n\n@NgModule({\n  exports: [AXAudioWaveComponent],\n  imports: [AXAudioWaveComponent],\n})\nexport class AXAudioWaveModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "22.1.1",
+  "version": "22.1.3",
   "peerDependencies": {
-    "@acorex/core": "22.1.1",
-    "@acorex/cdk": "22.1.1",
+    "@acorex/core": "22.1.3",
+    "@acorex/cdk": "22.1.3",
     "@angular/aria": ">=22.1.0",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",
@@ -42,7 +42,8 @@
     "@editorjs/raw": ">=2.5.1",
     "@editorjs/image": ">=2.10.3",
     "@editorjs/underline": ">=1.2.1",
-    "editorjs-text-color-plugin": ">=2.0.3"
+    "editorjs-text-color-plugin": ">=2.0.3",
+    "wavesurfer.js": ">=7.7.15"
   },
   "peerDependenciesMeta": {},
   "dependencies": {

package/types/acorex-components-audio-wave.d.ts

@@ -1,15 +1,9 @@
-import * as i0 from '@angular/core';
-import { OnDestroy, ElementRef, InputSignal } from '@angular/core';
-import WaveSurfer from 'wavesurfer.js';
+import * as _angular_core from '@angular/core';
 import { AXEvent } from '@acorex/cdk/common';
-import * as i1 from '@angular/common';
-import * as i2 from '@acorex/components/button';
-import * as i3 from '@acorex/components/decorators';
-import * as i4 from '@acorex/components/skeleton';
-import * as i5 from '@acorex/core/translation';
 
+type AXAudioWaveStatus = 'load' | 'loading' | 'decode' | 'ready' | 'redrawcomplete' | 'play' | 'pause' | 'finish' | 'timeupdate' | 'seeking' | 'interaction' | 'click' | 'drag' | 'scroll' | 'zoom' | 'destroy' | 'error';
+type AXAudioWaveState = 'playing' | 'paused' | 'loading' | 'ready' | 'error';
 interface AXWaveConfig {
-    container?: HTMLElement;
     waveColor?: string;
     progressColor?: string;
     url: string;
@@ -19,9 +13,22 @@ interface AXWaveConfig {
     height?: number;
     audioRate?: number;
 }
+interface AXAudioWaveEventPayload {
+    url?: string;
+    percent?: number;
+    duration?: number;
+    currentTime?: number;
+    newTime?: number;
+    relativeX?: number;
+    relativeY?: number;
+    visibleStartTime?: number;
+    visibleEndTime?: number;
+    minPxPerSec?: number;
+    message?: string;
+}
 interface AXAudioWaveChangeEvent extends AXEvent {
-    status: 'load' | 'loading' | 'decode' | 'ready' | 'redrawcomplete' | 'play' | 'pause' | 'finish' | 'timeupdate' | 'seeking' | 'interaction' | 'click' | 'drag' | 'scroll' | 'zoom' | 'destroy' | 'error';
-    data: null | any;
+    status: AXAudioWaveStatus;
+    data: AXAudioWaveEventPayload | null;
 }
 
 /**
@@ -29,61 +36,99 @@ interface AXAudioWaveChangeEvent extends AXEvent {
  *
  * @category Components
  */
-declare class AXAudioWaveComponent implements OnDestroy {
+declare class AXAudioWaveComponent {
     /**
-     *  @ignore
+     * @ignore
      */
-    protected div: ElementRef<HTMLDivElement>;
+    private readonly wave;
     /**
      * Configuration settings for the audio wave.
      */
-    config: InputSignal<AXWaveConfig>;
+    readonly config: _angular_core.InputSignal<AXWaveConfig>;
     /**
      * Emits an event when the status of the audio wave changes.
      *
      * @event
      */
-    onStatusChanged: i0.OutputEmitterRef<AXAudioWaveChangeEvent>;
-    audioState: i0.WritableSignal<"loading" | "ready" | "error" | "playing" | "paused">;
-    errorMessage: i0.WritableSignal<string>;
+    readonly onStatusChanged: _angular_core.OutputEmitterRef<AXAudioWaveChangeEvent>;
+    /**
+     * @ignore
+     */
+    protected readonly audioState: _angular_core.WritableSignal<AXAudioWaveState>;
+    /**
+     * @ignore
+     */
+    protected readonly errorMessage: _angular_core.WritableSignal<string>;
+    /**
+     * @ignore
+     */
+    protected readonly isWaveVisible: _angular_core.Signal<boolean>;
+    /**
+     * @ignore
+     */
+    private audio;
+    /**
+     * @ignore
+     */
+    private loadedUrl;
     /**
-     *  @ignore
+     * @ignore
      */
-    protected audio: WaveSurfer;
+    private lastVisualKey;
     /**
-     *  @ignore
+     * @ignore
      */
-    private ngZone;
-    private platformID;
+    private isDestroyed;
     /**
-     *  @ignore
+     * @ignore
+     */
+    private readonly ngZone;
+    /**
+     * @ignore
+     */
+    private readonly platformId;
+    /**
+     * @ignore
+     */
+    private readonly destroyRef;
+    /**
+     * @ignore
      */
     constructor();
     /**
      * Loads the audio from the specified URL.
      *
      * @param url - The URL of the audio to load. Defaults to the URL from the config.
+     * @returns A promise that resolves when loading starts, or immediately when unavailable.
      */
-    load(url?: string): void;
+    load(url?: string): Promise<void>;
     /**
      * Plays the audio.
      *
+     * @returns A promise that resolves when playback starts.
      */
-    play(): Promise<any>;
+    play(): Promise<void>;
     /**
      * Pauses the audio.
      */
     pause(): void;
     /**
-     * Retrieves the duration of the audio.
+     * Retrieves the duration of the audio in seconds.
      *
+     * @returns The audio duration, or `0` when unavailable.
      */
     getDuration(): number;
     /**
-     * Retrieves the media element of the audio.
+     * Retrieves the underlying HTML media element.
      *
+     * @returns The media element used by WaveSurfer, or `undefined` when unavailable.
+     */
+    getMediaElement(): HTMLMediaElement | undefined;
+    /**
+     * Retrieves the current playback position in seconds.
+     *
+     * @returns The current time, or `0` when unavailable.
      */
-    getMediaElement(): HTMLMediaElement;
     getCurrentTime(): number;
     /**
      * Sets the playback rate of the audio.
@@ -91,56 +136,59 @@ declare class AXAudioWaveComponent implements OnDestroy {
      * @param rate - The playback rate to set.
      */
     setRate(rate: number): void;
+    /**
+     * Mutes or unmutes the audio.
+     *
+     * @param muted - Whether the audio should be muted.
+     */
     setMuted(muted: boolean): void;
+    /**
+     * Indicates whether the audio is currently muted.
+     *
+     * @returns True when muted; otherwise false.
+     */
     isMuted(): boolean;
     /**
-     *  @ignore
-     */
-    protected bindEvents(): void;
-    /** When audio starts loading */
-    protected handleLoad(): void;
-    /** During audio loading */
-    protected handleLoading(): void;
-    /** When the audio has been decoded */
-    protected handleDecode(): void;
-    /** When the audio is both decoded and can play */
-    protected handleReady(): void;
-    /** When all audio channel chunks of the waveform have drawn */
-    protected handleRedRawComplete(): void;
-    /** When the audio starts playing */
-    protected handlePlay(): void;
-    /** When the audio pauses */
-    protected handlePause(): void;
-    /** When the audio finishes playing */
-    protected handleFinish(): void;
-    /** On audio position change, fires continuously during playback */
-    protected handleTimeUpdate(): void;
-    /** When the user seeks to a new position */
-    protected handleSeeking(): void;
-    /** When the user interacts with the waveform (i.g. clicks or drags on it) */
-    protected handleInteraction(): void;
-    /** When the user clicks on the waveform */
-    protected handleClick(): void;
-    /** When the user drags the cursor */
-    protected handleDrag(): void;
-    /** When the waveform is scrolled (panned) */
-    protected handleScroll(): void;
-    /** When the zoom level changes */
-    protected handleZoom(): void;
-    /** Just before the waveform is destroyed so you can clean up your events */
-    protected handleDestroy(): void;
-    /** Just before the waveform is destroyed so you can clean up your events */
-    protected handleError(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXAudioWaveComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXAudioWaveComponent, "ax-audio-wave", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "onStatusChanged": "onStatusChanged"; }, never, never, true, never>;
+     * @ignore
+     */
+    private createWaveSurfer;
+    /**
+     * @ignore
+     */
+    private syncFromConfig;
+    /**
+     * @ignore
+     */
+    private applyUrlAndRate;
+    /**
+     * @ignore
+     */
+    private resolveVisualOptions;
+    /**
+     * @ignore
+     */
+    private readCssRgbVar;
+    /**
+     * @ignore
+     */
+    private bindEvents;
+    /**
+     * @ignore
+     */
+    private emitStatus;
+    /**
+     * @ignore
+     */
+    private runInZone;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAudioWaveComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXAudioWaveComponent, "ax-audio-wave", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "onStatusChanged": "onStatusChanged"; }, never, never, true, never>;
 }
 
 declare class AXAudioWaveModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXAudioWaveModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXAudioWaveModule, never, [typeof i1.CommonModule, typeof i2.AXButtonModule, typeof i3.AXDecoratorModule, typeof i4.AXSkeletonModule, typeof i5.AXTranslationModule, typeof AXAudioWaveComponent], [typeof AXAudioWaveComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXAudioWaveModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAudioWaveModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXAudioWaveModule, never, [typeof AXAudioWaveComponent], [typeof AXAudioWaveComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXAudioWaveModule>;
 }
 
 export { AXAudioWaveComponent, AXAudioWaveModule };
-export type { AXAudioWaveChangeEvent, AXWaveConfig };
+export type { AXAudioWaveChangeEvent, AXAudioWaveEventPayload, AXAudioWaveState, AXAudioWaveStatus, AXWaveConfig };