ngx-kit 7.3.3 → 7.4.0

package/fesm2022/ngx-kit-media-control.mjs

@@ -0,0 +1,1847 @@
+import * as i0 from '@angular/core';
+import { signal, InjectionToken, inject, Injectable, Optional, Inject, NgZone, DestroyRef, computed, input, output, DOCUMENT, viewChild, effect, ChangeDetectionStrategy, Component, makeEnvironmentProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Format time in seconds as MM:SS
+ * @param seconds number
+ * @returns MM:SS
+ */
+function formatTime(seconds) {
+    if (Number.isNaN(+seconds) || seconds == Infinity) {
+        seconds = 0; //  return 'Unknown';
+    }
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+
+/**
+ * @deprecated Use {@link NgxMediaSource} instead. Kept so existing `PlayList[]`
+ * consumers keep compiling; `fileAddress`/`title` map 1:1 onto `src`/`title`.
+ */
+class PlayList {
+    title;
+    fileAddress;
+}
+function playListToMediaSource(item) {
+    return { src: item.fileAddress, title: item.title };
+}
+/**
+ * Content equality for `NgxMediaSource`/playlist arrays, not reference
+ * equality. `src` strings compare by value; `Blob`/`File`/`MediaStream`
+ * compare by identity (they can't be compared by content cheaply/safely).
+ *
+ * Every field that can change *downstream behavior* is compared —
+ * `artist`/`album`/`poster` feed Media Session metadata, `downloadUrl`/
+ * `downloadFileName` change what the download button actually does, and
+ * `requestHeaders` changes what bytes a server returns for the same URL.
+ * Fields that are purely cosmetic and never drive a decision (there
+ * currently are none — if you add one, document why it's excluded here).
+ *
+ * This exists specifically so a consumer that re-creates an equivalent
+ * array/object literal on every change-detection cycle (`[sources]="[{...}]"`,
+ * or a `.map()` derived from an otherwise-stable list) doesn't cause the
+ * player to treat it as "a new playlist" and reload media on every tick —
+ * see `computed(..., { equal: mediaSourcesEqual })` in `NgxMediaControl` and
+ * the same guard in `NgxMediaFacade.setPlaylist`.
+ */
+function mediaSourcesEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (!mediaSourceEqual(a[i], b[i]))
+            return false;
+    }
+    return true;
+}
+function mediaSourceEqual(a, b) {
+    if (a === b)
+        return true;
+    return (a.src === b.src && // strings compare by value; Blob/File/MediaStream by identity — both correct via `===`
+        a.type === b.type &&
+        a.codecs === b.codecs &&
+        a.title === b.title &&
+        a.artist === b.artist &&
+        a.album === b.album &&
+        a.poster === b.poster &&
+        a.downloadUrl === b.downloadUrl &&
+        a.downloadFileName === b.downloadFileName &&
+        headersEqual(a.requestHeaders, b.requestHeaders));
+}
+function headersEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    const na = normalizeHeaders(a);
+    const nb = normalizeHeaders(b);
+    if (na.length !== nb.length)
+        return false;
+    for (let i = 0; i < na.length; i++) {
+        if (na[i][0] !== nb[i][0] || na[i][1] !== nb[i][1])
+            return false;
+    }
+    return true;
+}
+function normalizeHeaders(h) {
+    const entries = h instanceof Headers ? Array.from(h.entries()) : Array.isArray(h) ? h : Object.entries(h);
+    return entries.map(([k, v]) => [k.toLowerCase(), v]).sort((x, y) => (x[0] < y[0] ? -1 : x[0] > y[0] ? 1 : 0));
+}
+/**
+ * Derives a display file name from a source, tolerating everything a real
+ * URL can throw at `decodeURIComponent` (malformed `%` sequences, stray
+ * `#`/`?`) instead of letting the player crash just because it tried to
+ * make a pretty label. Never throws.
+ */
+function extractMediaFileName(source) {
+    if (source.title)
+        return source.title;
+    if (typeof source.src !== 'string') {
+        if (source.src instanceof File && source.src.name)
+            return source.src.name;
+        return 'no name';
+    }
+    try {
+        const withoutHash = source.src.split('#')[0];
+        const withoutQuery = withoutHash.split('?')[0];
+        const lastSegment = withoutQuery.replace(/\\/g, '/').split('/').filter(Boolean).pop();
+        if (!lastSegment)
+            return 'no name';
+        try {
+            return decodeURIComponent(lastSegment);
+        }
+        catch {
+            // Malformed percent-encoding (e.g. a lone "%" or "%zz") — fall back to
+            // the raw, un-decoded segment rather than throwing.
+            return lastSegment;
+        }
+    }
+    catch {
+        return 'no name';
+    }
+}
+
+function initialMediaState() {
+    return {
+        playback: 'idle',
+        currentTime: 0,
+        duration: 0,
+        buffered: [],
+        volume: 1,
+        muted: false,
+        playbackRate: 1,
+    };
+}
+const VALID_TRANSITIONS = {
+    idle: new Set(['loading', 'destroyed']),
+    loading: new Set(['ready', 'buffering', 'error', 'destroyed']),
+    ready: new Set(['playing', 'seeking', 'loading', 'error', 'destroyed']),
+    playing: new Set(['paused', 'buffering', 'seeking', 'ended', 'error', 'destroyed']),
+    paused: new Set(['playing', 'seeking', 'loading', 'error', 'destroyed']),
+    buffering: new Set(['playing', 'paused', 'error', 'destroyed']),
+    seeking: new Set(['playing', 'paused', 'error', 'destroyed']),
+    ended: new Set(['loading', 'playing', 'destroyed']),
+    error: new Set(['loading', 'idle', 'destroyed']),
+    destroyed: new Set([]),
+};
+/** Guards against illegal transitions (e.g. anything -> playing after destroyed). */
+function canTransition(from, to) {
+    if (from === to)
+        return true;
+    return VALID_TRANSITIONS[from].has(to);
+}
+
+class NgxMediaError extends Error {
+    category;
+    cause;
+    constructor(category, message, 
+    /** Original DOM/browser error, if any — kept for `console.error`/telemetry, not surfaced to templates by default. */
+    cause) {
+        super(message);
+        this.category = category;
+        this.cause = cause;
+        this.name = 'NgxMediaError';
+    }
+    static fromMediaElementError(el) {
+        const err = el.error;
+        const noSource = el.networkState === HTMLMediaElement.NETWORK_NO_SOURCE;
+        if (noSource) {
+            return new NgxMediaError('NETWORK', 'Could not load media source.', err);
+        }
+        switch (err?.code) {
+            case MediaError.MEDIA_ERR_ABORTED:
+                return new NgxMediaError('ABORTED', 'Media playback was aborted.', err);
+            case MediaError.MEDIA_ERR_NETWORK:
+                return new NgxMediaError('NETWORK', 'A network error interrupted media loading.', err);
+            case MediaError.MEDIA_ERR_DECODE:
+                return new NgxMediaError('DECODER', 'The media could not be decoded.', err);
+            case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+                return new NgxMediaError('UNSUPPORTED_FORMAT', 'This media format/source is not supported.', err);
+            default:
+                return new NgxMediaError('UNKNOWN', 'An unknown media error occurred.', err);
+        }
+    }
+    static autoplayBlocked(cause) {
+        return new NgxMediaError('AUTOPLAY_BLOCKED', 'Playback was blocked by the browser autoplay policy; a user gesture is required.', cause);
+    }
+    static unsupported(message) {
+        return new NgxMediaError('BROWSER_UNSUPPORTED', message);
+    }
+    static noDecoder(source) {
+        return new NgxMediaError('UNSUPPORTED_FORMAT', `No native support and no registered NGX_MEDIA_DECODER can handle "${source}".`);
+    }
+}
+
+/** True only in a real browser context — guards every browser API access for SSR. */
+function isBrowser() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+function hasMediaSource() {
+    return isBrowser() && 'MediaSource' in window;
+}
+function hasAudioContext() {
+    return isBrowser() && ('AudioContext' in window || 'webkitAudioContext' in window);
+}
+function getAudioContextCtor() {
+    if (!hasAudioContext())
+        return undefined;
+    return window.AudioContext ?? window.webkitAudioContext;
+}
+function hasMediaSession() {
+    return isBrowser() && 'mediaSession' in navigator;
+}
+function hasPictureInPicture() {
+    return (isBrowser() &&
+        typeof HTMLVideoElement !== 'undefined' &&
+        'requestPictureInPicture' in HTMLVideoElement.prototype &&
+        // Safari exposes a document-level flag too; either is sufficient.
+        document.pictureInPictureEnabled !== false);
+}
+function hasFullscreen() {
+    return isBrowser() && (document.fullscreenEnabled || document.webkitFullscreenEnabled);
+}
+/**
+ * Best-effort container/codec detection using `canPlayType`. Never trusts the
+ * file extension alone: extension is only a last-resort hint when neither
+ * `type` nor `codecs` was supplied.
+ */
+function canPlayNatively(el, source) {
+    const mime = resolveMimeType(source);
+    if (!mime)
+        return 'maybe'; // unknown — let the native element try; it will fail fast via the `error` event if wrong.
+    return el?.canPlayType(mime);
+}
+function resolveMimeType(source) {
+    if (source.type) {
+        return source.codecs ? `${source.type}; codecs="${source.codecs}"` : source.type;
+    }
+    if (typeof source.src === 'string') {
+        return extensionToMime(source.src);
+    }
+    if (source.src instanceof File && source.src.type) {
+        return source.src.type;
+    }
+    if (source.src instanceof Blob && source.src.type) {
+        return source.src.type;
+    }
+    return undefined;
+}
+const EXT_MIME_MAP = {
+    mp3: 'audio/mpeg',
+    aac: 'audio/aac',
+    wav: 'audio/wav',
+    ogg: 'audio/ogg',
+    oga: 'audio/ogg',
+    opus: 'audio/ogg; codecs=opus',
+    flac: 'audio/flac',
+    m4a: 'audio/mp4',
+    weba: 'audio/webm',
+    mp4: 'video/mp4',
+    m4v: 'video/mp4',
+    webm: 'video/webm',
+    mov: 'video/quicktime',
+    ogv: 'video/ogg',
+};
+/** Extension is only ever a weak fallback hint, never treated as ground truth. */
+function extensionToMime(src) {
+    const clean = src.split(/[?#]/)[0];
+    const ext = clean.split('.').pop()?.toLowerCase();
+    return ext ? EXT_MIME_MAP[ext] : undefined;
+}
+
+function headersKey(headers) {
+    if (!headers)
+        return '';
+    const entries = headers instanceof Headers
+        ? Array.from(headers.entries())
+        : Array.isArray(headers)
+            ? headers
+            : Object.entries(headers);
+    return entries
+        .map(([k, v]) => `${k.toLowerCase()}=${v}`)
+        .sort()
+        .join('&');
+}
+function computeIdentity(source) {
+    if (typeof source.src === 'string') {
+        return { kind: 'url', key: `${source.src}::${headersKey(source.requestHeaders)}` };
+    }
+    return { kind: 'ref', ref: source.src };
+}
+function sameIdentity(a, b) {
+    if (!a || !b || a.kind !== b.kind)
+        return false;
+    return a.kind === 'url'
+        ? a.key === b.key
+        : a.ref === b.ref;
+}
+function rangesEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i].start !== b[i].start || a[i].end !== b[i].end)
+            return false;
+    }
+    return true;
+}
+/**
+ * Default fast-path engine: plays through a real `<audio>`/`<video>` element.
+ * Zero WASM, zero MediaSource — the browser's own decode pipeline does the work.
+ *
+ * Load semantics (the part that matters most for network behavior):
+ *  - `load()` is a real 3-state machine (idle/loading/ready) keyed on
+ *    {@link SourceIdentity}, not just a `readyState` snapshot:
+ *      same source + currently loading  -> returns the SAME in-flight promise
+ *      same source + already loaded     -> resolves immediately, no `el.load()` call
+ *      different source                 -> proceeds; the browser's own load
+ *                                           algorithm aborts whatever the
+ *                                           element was doing before
+ *  - Setting `el.src` already queues the browser's media load algorithm;
+ *    the immediate `el.load()` call right after does not cause a second
+ *    network request — its purpose is to make the abort-then-restart
+ *    synchronous (needed for older WebKit), not to "load twice". The state
+ *    machine above is what actually prevents redundant fetches across
+ *    repeated `load()` calls for the same source.
+ *
+ * Performance notes:
+ *  - `timeupdate`/`progress`/etc. fire far more often than the UI needs to
+ *    re-render; listeners run via `runOutsideAngular`, and `patch()` skips
+ *    the signal write entirely when nothing actually changed (including a
+ *    content-equal `buffered` array, which would otherwise allocate and
+ *    write on every `progress` tick even when the ranges didn't move).
+ */
+class NativeMediaEngine {
+    runOutsideAngular;
+    id = 'native';
+    kind;
+    _state = signal(initialMediaState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+    state = this._state.asReadonly();
+    el;
+    objectUrl = null;
+    destroyed = false;
+    cleanupFns = [];
+    loadState = 'idle';
+    loadedIdentity = null;
+    pendingLoad = null;
+    activeLoadController = null;
+    constructor(kind, 
+    /** Provided by the facade so listener callbacks never re-enter Angular's zone. */
+    runOutsideAngular = (fn) => fn(), existingElement, preload = 'metadata') {
+        this.runOutsideAngular = runOutsideAngular;
+        this.kind = kind;
+        this.el = existingElement ?? document.createElement(kind);
+        this.el.preload = preload;
+        this.el.setAttribute('playsinline', 'true');
+        this.attachListeners();
+    }
+    get mediaElement() {
+        return this.el;
+    }
+    async load(source, abort) {
+        this.assertNotDestroyed();
+        const identity = computeIdentity(source);
+        if (sameIdentity(identity, this.loadedIdentity)) {
+            if (this.loadState === 'loading' && this.pendingLoad) {
+                // Same source, still in flight — hand back the SAME promise instead
+                // of starting a second (redundant) load for something already underway.
+                return this.pendingLoad;
+            }
+            if (this.loadState === 'ready') {
+                // Same source, already fully loaded — nothing to do, no `el.load()` call.
+                return Promise.resolve();
+            }
+        }
+        // A different source supersedes the previous load even when the caller
+        // didn't provide/abort its own signal. This prevents stale
+        // loadedmetadata/error events from resolving the new request.
+        this.activeLoadController?.abort();
+        const controller = new AbortController();
+        const onExternalAbort = () => controller.abort();
+        if (abort?.aborted)
+            controller.abort();
+        else
+            abort?.addEventListener('abort', onExternalAbort, { once: true });
+        const promise = this.performLoad(source, identity, controller.signal).finally(() => {
+            abort?.removeEventListener('abort', onExternalAbort);
+            if (this.pendingLoad === promise)
+                this.pendingLoad = null;
+            if (this.activeLoadController === controller)
+                this.activeLoadController = null;
+        });
+        this.activeLoadController = controller;
+        this.pendingLoad = promise;
+        return promise;
+    }
+    async performLoad(source, identity, abort) {
+        this.loadedIdentity = identity;
+        this.loadState = 'loading';
+        this.releaseObjectUrl();
+        this.patch({ playback: 'loading', currentTime: 0, duration: 0, buffered: [] });
+        try {
+            if (abort?.aborted)
+                throw new NgxMediaError('ABORTED', 'Load aborted.');
+            const capability = canPlayNatively(this.el, source);
+            if (capability === '') {
+                throw NgxMediaError.noDecoder(typeof source.src === 'string' ? source.src : '[blob]');
+            }
+            const resolvedSrc = this.resolveSrc(source);
+            await new Promise((resolve, reject) => {
+                const onReady = () => {
+                    cleanup();
+                    resolve();
+                };
+                const onError = () => {
+                    cleanup();
+                    reject(NgxMediaError.fromMediaElementError(this.el));
+                };
+                const onAbort = () => {
+                    cleanup();
+                    reject(new NgxMediaError('ABORTED', 'Load aborted.'));
+                };
+                const cleanup = () => {
+                    this.el.removeEventListener('loadedmetadata', onReady);
+                    this.el.removeEventListener('error', onError);
+                    abort?.removeEventListener('abort', onAbort);
+                };
+                this.el.addEventListener('loadedmetadata', onReady, { once: true });
+                this.el.addEventListener('error', onError, { once: true });
+                abort?.addEventListener('abort', onAbort, { once: true });
+                if (abort?.aborted) {
+                    onAbort();
+                    return;
+                }
+                // Setting src/srcObject is enough to select the resource and avoids
+                // immediately restarting the same selection algorithm with an extra
+                // `load()` call. This is important for authenticated/redirected
+                // resources where a restart can result in another network request.
+                if (typeof MediaStream !== 'undefined' && source.src instanceof MediaStream) {
+                    this.el.srcObject = source.src;
+                }
+                else {
+                    this.el.src = resolvedSrc;
+                }
+            });
+            this.loadState = 'ready';
+        }
+        catch (err) {
+            this.loadState = 'idle';
+            this.loadedIdentity = null;
+            throw err;
+        }
+    }
+    async play() {
+        this.assertNotDestroyed();
+        try {
+            await this.el.play();
+        }
+        catch (err) {
+            // NotAllowedError is the browser's autoplay-policy rejection.
+            if (err instanceof DOMException && err.name === 'NotAllowedError') {
+                this.patch({ playback: 'paused' });
+                throw NgxMediaError.autoplayBlocked(err);
+            }
+            throw err;
+        }
+    }
+    pause() {
+        if (this.destroyed)
+            return;
+        this.el.pause();
+    }
+    seek(time) {
+        this.assertNotDestroyed();
+        const clamped = Math.min(Math.max(time, 0), this.el.duration || time);
+        this.patch({ playback: 'seeking' });
+        this.el.currentTime = clamped;
+    }
+    setVolume(volume) {
+        this.el.volume = Math.min(Math.max(volume, 0), 1);
+    }
+    setMuted(muted) {
+        this.el.muted = muted;
+    }
+    setPlaybackRate(rate) {
+        this.el.playbackRate = Math.max(0.0625, rate);
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        this.cleanupFns.forEach((fn) => fn());
+        this.cleanupFns.length = 0;
+        this.releaseObjectUrl();
+        this.loadState = 'idle';
+        this.loadedIdentity = null;
+        this.pendingLoad = null;
+        this.activeLoadController?.abort();
+        this.activeLoadController = null;
+        this.el.pause();
+        this.el.removeAttribute('src');
+        this.el.srcObject = null;
+        this.el.load();
+        this.patch({ playback: 'destroyed' });
+    }
+    // --- internals -----------------------------------------------------------
+    resolveSrc(source) {
+        if (typeof source.src === 'string')
+            return source.src;
+        if (source.src instanceof Blob) {
+            this.objectUrl = URL.createObjectURL(source.src);
+            return this.objectUrl;
+        }
+        return '';
+    }
+    releaseObjectUrl() {
+        if (this.objectUrl) {
+            URL.revokeObjectURL(this.objectUrl);
+            this.objectUrl = null;
+        }
+    }
+    /** Skips the signal write entirely when every field in `partial` is already equal to current state. */
+    patch(partial) {
+        this._state.update((s) => {
+            let changed = false;
+            for (const k in partial) {
+                if (partial[k] !== s[k]) {
+                    changed = true;
+                    break;
+                }
+            }
+            return changed ? { ...s, ...partial } : s;
+        });
+    }
+    bufferedRanges() {
+        const ranges = [];
+        const b = this.el.buffered;
+        for (let i = 0; i < b.length; i++) {
+            ranges.push({ start: b.start(i), end: b.end(i) });
+        }
+        return ranges;
+    }
+    attachListeners() {
+        this.runOutsideAngular(() => {
+            const on = (type, handler) => {
+                this.el.addEventListener(type, handler);
+                this.cleanupFns.push(() => this.el.removeEventListener(type, handler));
+            };
+            on('loadedmetadata', () => {
+                this.patch({
+                    duration: Number.isFinite(this.el.duration) ? this.el.duration : 0,
+                    videoWidth: this.el.videoWidth || undefined,
+                    videoHeight: this.el.videoHeight || undefined,
+                    playback: 'ready',
+                });
+                // Deliberately NOT auto-probing an unknown duration here — see
+                // `probeUnseekableDuration()` below for why that cost extra network
+                // requests on every load. `durationchange` still updates the UI the
+                // moment the browser resolves it on its own, at zero extra cost.
+            });
+            on('waiting', () => this.patch({ playback: 'buffering' }));
+            on('playing', () => this.patch({ playback: 'playing' }));
+            on('pause', () => {
+                if (this._state().playback !== 'ended')
+                    this.patch({ playback: 'paused' });
+            });
+            on('ended', () => this.patch({ playback: 'ended' }));
+            on('seeked', () => this.patch({
+                playback: this.el.paused ? 'paused' : 'playing',
+                currentTime: this.el.currentTime,
+            }));
+            on('timeupdate', () => this.patch({ currentTime: this.el.currentTime }));
+            on('durationchange', () => {
+                if (Number.isFinite(this.el.duration))
+                    this.patch({ duration: this.el.duration });
+            });
+            on('progress', () => {
+                const ranges = this.bufferedRanges();
+                // `bufferedRanges()` always allocates a new array; only write the
+                // signal (and thus schedule a render) if the ranges actually moved.
+                if (!rangesEqual(ranges, this._state().buffered)) {
+                    this.patch({ buffered: ranges });
+                }
+            });
+            on('volumechange', () => this.patch({ volume: this.el.volume, muted: this.el.muted }));
+            on('ratechange', () => this.patch({ playbackRate: this.el.playbackRate }));
+            on('error', () => this.patch({ playback: 'error' }));
+        });
+    }
+    /**
+     * Some servers/streams report `duration === Infinity` until more data
+     * arrives. This forces the browser to resolve it immediately by seeking
+     * near the end and back — which works, but each call costs 1-2 extra
+     * HTTP range requests. No longer called automatically; opt-in for the
+     * rare case where you genuinely need duration *immediately* rather than
+     * letting `durationchange` update it naturally during normal playback.
+     */
+    async probeUnseekableDuration() {
+        if (this.destroyed)
+            return;
+        const original = this.el.currentTime;
+        try {
+            this.el.currentTime = 1e10;
+            await new Promise((resolve) => {
+                const onChange = () => {
+                    this.el.removeEventListener('durationchange', onChange);
+                    resolve();
+                };
+                this.el.addEventListener('durationchange', onChange, { once: true });
+                setTimeout(resolve, 1500); // don't hang forever on streams that never resolve it
+            });
+        }
+        finally {
+            if (!this.destroyed)
+                this.el.currentTime = original;
+        }
+    }
+    assertNotDestroyed() {
+        if (this.destroyed) {
+            throw new NgxMediaError('ABORTED', `${this.id} engine method called after destroy().`);
+        }
+    }
+}
+/** True if an `AudioContext`-based duration probe is even worth attempting (SSR/very old browser guard). */
+function canProbeDuration() {
+    return !!getAudioContextCtor();
+}
+
+/**
+ * Multi-provider token: every decoder a consumer registers via
+ * `provideNgxMediaDecoder()` is picked up automatically by the registry.
+ *
+ * IMPORTANT: this token intentionally has NO default factory. Angular does
+ * not allow mixing a token's own default provider with externally
+ * registered `multi: true` providers for the SAME token — doing so throws
+ * at DI-construction time the moment a consumer actually registers a
+ * decoder (a real, if latent, bug this fixes). The correct pattern for an
+ * "optionally empty" multi token is `@Optional()` injection at the
+ * consumption site (see `NgxMediaDecoderRegistry`), which yields `null`
+ * when nothing has registered and an array when one or more have.
+ */
+const NGX_MEDIA_DECODER = new InjectionToken('NGX_MEDIA_DECODER');
+const NGX_MEDIA_REQUEST_HANDLER = new InjectionToken('NGX_MEDIA_REQUEST_HANDLER', {
+    providedIn: 'root',
+    factory: () => ({
+        request: (source, signal) => fetch(typeof source.src === 'string' ? source.src : '', {
+            headers: source.requestHeaders,
+            signal,
+        }),
+    }),
+});
+const NGX_MEDIA_CONFIG_DEFAULTS = {
+    preload: 'metadata',
+    maxConcurrentDecoderProbes: 3,
+};
+const NGX_MEDIA_CONFIG = new InjectionToken('NGX_MEDIA_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({ ...NGX_MEDIA_CONFIG_DEFAULTS }),
+});
+
+/**
+ * Only ever returns a native engine (not yet loaded). `canPlayType()`/
+ * extension/mime are just a hint and can lie (fake extension, a container
+ * the browser opens but can't actually decode) — the only reliable signal
+ * is a real `load()` attempt actually failing. So the native-vs-decoder
+ * decision is not made here; `NgxMediaFacade.resolveEngine()` tries native
+ * first and falls back to the decoder registry on a genuine (format-level)
+ * failure. This class stays responsible only for constructing engines.
+ *
+ * Synchronous on purpose: constructing a `NativeMediaEngine` never awaits
+ * anything, so wrapping it in a `Promise` bought nothing but an extra
+ * microtask on every load. Callers that still `await` this are unaffected.
+ */
+class NgxMediaEngineFactory {
+    requestHandler = inject(NGX_MEDIA_REQUEST_HANDLER);
+    create(kind, runOutsideAngular, preload = 'metadata') {
+        if (!isBrowser()) {
+            throw NgxMediaError.unsupported('Media engines can only be created in a browser context (SSR guard).');
+        }
+        return new NativeMediaEngine(kind, runOutsideAngular, undefined, preload);
+    }
+    /** Explicit opt-in path for callers that specifically want MSE (e.g. a decoder building on it). */
+    async createMse(kind) {
+        const { MseMediaEngine } = await import('./ngx-kit-media-control-mse-media-engine-CtP97cb9.mjs');
+        return new MseMediaEngine(kind, this.requestHandler);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaEngineFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaEngineFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaEngineFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * `navigator.mediaSession` is a single global the whole page shares. With
+ * more than one `NgxMediaControl` on a page, whichever bound LAST naturally
+ * owns it (a reasonable policy — that matches which one the OS media
+ * controls should act on). The bug this fixes: without tracking who the
+ * current owner actually is, destroying an OLDER player unconditionally
+ * cleared every action handler, silently breaking the media session for
+ * whichever player is currently active. `currentOwner` makes `unbind()` a
+ * no-op unless the instance calling it is still the one that owns it.
+ */
+let currentOwner = null;
+/** No-ops everywhere the API isn't supported; never throws. */
+class NgxMediaSessionBridge {
+    bound = false;
+    bind(actions) {
+        if (!hasMediaSession())
+            return;
+        currentOwner = this;
+        this.bound = true;
+        const ms = navigator.mediaSession;
+        const safe = (fn) => () => {
+            try {
+                fn();
+            }
+            catch {
+                /* a handler throwing must never break media session integration */
+            }
+        };
+        ms.setActionHandler('play', safe(actions.play));
+        ms.setActionHandler('pause', safe(actions.pause));
+        ms.setActionHandler('previoustrack', safe(actions.previous));
+        ms.setActionHandler('nexttrack', safe(actions.next));
+        ms.setActionHandler('seekbackward', (details) => actions.seekBackward(details.seekOffset ?? 10));
+        ms.setActionHandler('seekforward', (details) => actions.seekForward(details.seekOffset ?? 10));
+    }
+    /** No-ops if a different (typically newer) instance currently owns the session — a stale player must never overwrite the active one's metadata. */
+    setMetadata(source) {
+        if (!hasMediaSession() || typeof MediaMetadata === 'undefined' || currentOwner !== this)
+            return;
+        navigator.mediaSession.metadata = new MediaMetadata({
+            title: source.title ?? '',
+            artist: source.artist ?? '',
+            album: source.album ?? '',
+            artwork: source.poster ? [{ src: source.poster }] : [],
+        });
+    }
+    setPlaybackState(state) {
+        if (!hasMediaSession() || currentOwner !== this)
+            return;
+        navigator.mediaSession.playbackState = state;
+    }
+    unbind() {
+        if (!hasMediaSession() || !this.bound)
+            return;
+        this.bound = false;
+        if (currentOwner !== this) {
+            // A newer instance already took over ownership — clearing handlers
+            // now would wipe out THEIR session, not ours. Nothing to do.
+            return;
+        }
+        currentOwner = null;
+        const ms = navigator.mediaSession;
+        ['play', 'pause', 'previoustrack', 'nexttrack', 'seekbackward', 'seekforward'].forEach((action) => {
+            try {
+                ms.setActionHandler(action, null);
+            }
+            catch {
+                /* older browsers may not support every action name */
+            }
+        });
+    }
+}
+
+/**
+ * Optional processing graph: `<audio>/<video>` → MediaElementAudioSourceNode
+ * → gain → (optional analyser) → destination.
+ *
+ * Never constructed unless a consumer asks for gain/analyser/effects — plain
+ * playback never creates an `AudioContext`, respecting autoplay policy and
+ * avoiding the "one AudioContext per instance whether needed or not" issue
+ * in the original component.
+ *
+ * Autoplay note: this class never calls `resume()` on its own outside a
+ * user-triggered `play()`/`connect()` call — bypassing the suspended-state
+ * policy is explicitly out of scope.
+ */
+class NgxWebAudioGraph {
+    element;
+    ctx = null;
+    sourceNode = null;
+    gainNode = null;
+    analyserNode = null;
+    constructor(element) {
+        this.element = element;
+    }
+    /** Idempotent — safe to call multiple times; only the first call does any work. */
+    ensureConnected() {
+        if (this.ctx && this.gainNode)
+            return { context: this.ctx, gain: this.gainNode };
+        const Ctor = getAudioContextCtor();
+        if (!Ctor)
+            throw NgxMediaError.unsupported('Web Audio API is not available in this browser.');
+        this.ctx = new Ctor();
+        this.sourceNode = this.ctx.createMediaElementSource(this.element);
+        this.gainNode = this.ctx.createGain();
+        this.sourceNode.connect(this.gainNode);
+        this.gainNode.connect(this.ctx.destination);
+        return { context: this.ctx, gain: this.gainNode };
+    }
+    setGain(value) {
+        if (this.gainNode)
+            this.gainNode.gain.value = value;
+    }
+    getAnalyser(fftSize = 2048) {
+        if (!this.ctx || !this.gainNode)
+            this.ensureConnected();
+        if (!this.analyserNode) {
+            this.analyserNode = this.ctx.createAnalyser();
+            this.analyserNode.fftSize = fftSize;
+            this.gainNode.connect(this.analyserNode);
+        }
+        return this.analyserNode;
+    }
+    async resumeOnUserGesture() {
+        if (this.ctx?.state === 'suspended')
+            await this.ctx.resume();
+    }
+    destroy() {
+        this.sourceNode?.disconnect();
+        this.gainNode?.disconnect();
+        this.analyserNode?.disconnect();
+        // Do not call ctx.close() synchronously in destroy paths that might race a
+        // pending resume(); schedule it and swallow errors from an already-closed context.
+        this.ctx?.close().catch(() => { });
+        this.ctx = null;
+        this.sourceNode = null;
+        this.gainNode = null;
+        this.analyserNode = null;
+    }
+}
+
+function extensionOf(source) {
+    if (typeof source.src !== 'string')
+        return undefined;
+    return source.src.split(/[?#]/)[0].split('.').pop()?.toLowerCase();
+}
+/**
+ * Resolves a non-natively-playable source to a registered decoder, highest
+ * `priority` first. Nothing here imports MSE/WASM code directly — decoders
+ * bring their own (lazily, inside `createEngine`), so a consumer who never
+ * registers a decoder never pays for one in their bundle.
+ *
+ * Probe strategy:
+ *  1. Cheap synchronous pre-filter by `formats` (extension match) first —
+ *     a decoder that lists `formats: ['3gp']` is never even asked
+ *     `canDecode()` for an `.mp3` source.
+ *  2. Remaining candidates are probed with bounded concurrency
+ *     (`maxConcurrentDecoderProbes`) rather than one at a time, so N
+ *     network/CPU-bound `canDecode()` checks don't serialize their latency.
+ *  3. The whole probe is cancellable via `signal` (passed down from the
+ *     facade's per-load `AbortController`), so switching tracks quickly
+ *     doesn't leave abandoned probes burning CPU/network.
+ */
+class NgxMediaDecoderRegistry {
+    decoders;
+    config = inject(NGX_MEDIA_CONFIG);
+    /** Set by a consumer that wants visibility into swallowed decoder errors (logging/telemetry), instead of them being silently invisible. */
+    onDecoderFailure = null;
+    constructor(decoders) {
+        this.decoders = [...(decoders ?? [])].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+    }
+    async findDecoder(source, signal) {
+        if (this.decoders.length === 0)
+            return undefined;
+        // Step 1: cheap, synchronous pre-filter. A decoder with a non-empty
+        // `formats` list is only a candidate if the source's extension matches
+        // (or the source has no discoverable extension at all, in which case we
+        // can't rule it out cheaply and let it through to the real probe).
+        const ext = extensionOf(source);
+        const candidates = this.decoders.filter((d) => d.formats.length === 0 || !ext || d.formats.includes(ext));
+        if (candidates.length === 0)
+            return undefined;
+        // Step 2 + 3: bounded-concurrency, cancellable probing, highest
+        // priority first among each concurrent batch (candidates is already
+        // priority-sorted, so batching preserves that order for the final pick).
+        const limit = Math.max(1, this.config.maxConcurrentDecoderProbes);
+        for (let i = 0; i < candidates.length; i += limit) {
+            if (signal?.aborted)
+                return undefined;
+            const batch = candidates.slice(i, i + limit);
+            const results = await Promise.all(batch.map(async (decoder) => {
+                try {
+                    return (await decoder.canDecode(source, signal)) ? decoder : null;
+                }
+                catch (error) {
+                    if (signal?.aborted)
+                        return null;
+                    // A misbehaving decoder shouldn't block evaluating the rest,
+                    // but the failure is no longer silently swallowed.
+                    this.onDecoderFailure?.({ decoderId: decoder.id, error });
+                    return null;
+                }
+            }));
+            if (signal?.aborted)
+                return undefined;
+            const found = results.find((d) => d !== null);
+            if (found)
+                return found;
+        }
+        return undefined;
+    }
+    async createEngine(source, signal) {
+        const decoder = await this.findDecoder(source, signal);
+        if (!decoder) {
+            throw NgxMediaError.noDecoder(typeof source.src === 'string' ? source.src : '[blob]');
+        }
+        return decoder.createEngine(source, signal);
+    }
+    destroyAll() {
+        this.decoders.forEach((d) => d.destroy());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaDecoderRegistry, deps: [{ token: NGX_MEDIA_DECODER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaDecoderRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaDecoderRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_MEDIA_DECODER]
+                }] }] });
+/** Injects the registry outside DI (e.g. from a factory function). */
+function injectDecoderRegistry() {
+    return inject(NgxMediaDecoderRegistry);
+}
+
+/** Categories where falling back to a decoder is actually the right call — i.e. the format/codec itself is the problem, not the network or a deliberate cancellation. */
+const DECODER_FALLBACK_CATEGORIES = new Set(['UNSUPPORTED_FORMAT', 'DECODER']);
+/**
+ * Everything the UI component needs, expressed as signals it can bind to
+ * directly, plus imperative commands. This is the only class
+ * `NgxMediaControl` talks to — it never touches an engine, a decoder, or the
+ * DOM media element itself. Swapping native/MSE/WASM playback never touches
+ * the component.
+ */
+class NgxMediaFacade {
+    zone = inject(NgZone);
+    engineFactory = inject(NgxMediaEngineFactory);
+    decoderRegistry = inject(NgxMediaDecoderRegistry);
+    destroyRef = inject(DestroyRef);
+    mediaSession = new NgxMediaSessionBridge();
+    webAudio = null;
+    loadAbort = null;
+    kind = 'audio';
+    preload = 'metadata';
+    /**
+     * Belt-and-suspenders alongside `AbortController`: not every operation a
+     * superseded load might be mid-way through is actually cancellable (a
+     * decoder's own internal work, a promise someone else is holding a
+     * reference to, ...). Every `loadCurrent()` call captures the generation
+     * counter at its start and checks it again before committing any result —
+     * a stale generation means "a newer load has already started", full stop,
+     * regardless of whether the stale one's `AbortSignal` was actually honored
+     * by everything downstream.
+     */
+    loadGeneration = 0;
+    _playlist = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_playlist" }] : /* istanbul ignore next */ []));
+    _currentIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentIndex" }] : /* istanbul ignore next */ []));
+    /** Holds the live engine instance; swapped whenever a new source loads. */
+    _engine = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_engine" }] : /* istanbul ignore next */ []));
+    get engine() {
+        return this._engine();
+    }
+    _error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_error" }] : /* istanbul ignore next */ []));
+    playlist = this._playlist.asReadonly();
+    currentIndex = this._currentIndex.asReadonly();
+    /**
+     * Reads through to the current engine's own state signal, so every native
+     * media event (timeupdate, progress, ...) that the engine writes flows
+     * straight through here with no polling, no manual refresh, and no risk of
+     * going stale across an engine swap (native -> WASM fallback, etc.).
+     *
+     * When there is NO engine (playlist empty, or the engine was torn down
+     * after a load failure) but `error()` is set, this reports `playback:
+     * 'error'` rather than falling through to `idle` — otherwise `state()` and
+     * `error()` would be two sources of truth that can disagree, and anything
+     * built on `state().playback === 'error'` would silently miss real errors.
+     */
+    state = computed(() => {
+        const engineState = this._engine()?.state();
+        if (engineState)
+            return engineState;
+        if (this._error())
+            return { ...initialMediaState(), playback: 'error' };
+        return initialMediaState();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    error = this._error.asReadonly();
+    currentSource = computed(() => this._playlist()[this._currentIndex()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSource" }] : /* istanbul ignore next */ []));
+    mediaElement = computed(() => this._engine()?.mediaElement ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaElement" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.destroyRef.onDestroy(() => this.destroy());
+    }
+    /** Deterministic on a kind change: if a source is already active, immediately rebuilds the engine as the new kind (audio <-> video element) instead of leaving a stale-kind engine behind a UI that now expects the other one. */
+    configure(kind) {
+        if (this.kind === kind)
+            return;
+        this.kind = kind;
+        if (this.currentSource()) {
+            const wasPlaying = this.state().playback === 'playing';
+            void this.loadCurrent(wasPlaying);
+        }
+    }
+    /** Applies to loads started after this call — not retroactive to an element already created. */
+    setPreload(preload) {
+        this.preload = preload;
+    }
+    setPlaylist(sources, startIndex = 0, autoLoad = true) {
+        // If the content genuinely hasn't changed, do nothing — not even
+        // reset `currentIndex` to `startIndex`. A component effect that always
+        // passes `startIndex=0` must not be able to yank a user who has
+        // manually navigated (next/previous) back to track 0 just because it
+        // happened to re-run with an equivalent (but reference-different) array.
+        if (mediaSourcesEqual(this._playlist(), sources)) {
+            return;
+        }
+        const clampedIndex = Math.min(Math.max(startIndex, 0), Math.max(sources.length - 1, 0));
+        this._playlist.set(sources);
+        this._currentIndex.set(clampedIndex);
+        if (sources.length === 0) {
+            // Nothing left to play — tear down whatever was active instead of
+            // leaving stale audio/video playing with no playlist entry backing it.
+            this.loadAbort?.abort();
+            this.loadGeneration++;
+            this.webAudio?.destroy();
+            this.webAudio = null;
+            this.engine?.destroy();
+            this._engine.set(null);
+            this._error.set(null);
+            return;
+        }
+        if (autoLoad)
+            void this.loadCurrent();
+    }
+    async loadCurrent(playAfter = false) {
+        const source = this.currentSource();
+        if (!source || !isBrowser())
+            return;
+        this.loadAbort?.abort();
+        const controller = new AbortController();
+        this.loadAbort = controller;
+        const generation = ++this.loadGeneration;
+        this._error.set(null);
+        let newEngine = null;
+        try {
+            newEngine = await this.resolveEngine(source, controller.signal);
+            if (generation !== this.loadGeneration) {
+                // Superseded while the new engine was being built (next/previous/
+                // another loadCurrent started meanwhile). Never commit it, and
+                // never touch the engine that IS current now — that belongs to the
+                // newer, still-in-flight or already-committed load.
+                newEngine.destroy();
+                return;
+            }
+            // Transactional swap: the OLD engine is only destroyed once the NEW
+            // one is confirmed ready. This means a failed next()/previous() never
+            // interrupts what was already playing, and the player never sits in a
+            // null/blank state just because the next track failed to load.
+            const old = this.engine;
+            this.webAudio?.destroy();
+            this.webAudio = null; // a Web Audio graph attached to the OLD element must never be reused for the new one
+            this._engine.set(newEngine);
+            old?.destroy();
+            this.mediaSession.setMetadata(source);
+            this.bindMediaSession();
+            if (playAfter)
+                await this.play();
+        }
+        catch (err) {
+            newEngine?.destroy();
+            if (generation !== this.loadGeneration)
+                return; // a newer load owns error/state now; this failure is stale
+            const mediaError = err instanceof NgxMediaError ? err : new NgxMediaError('UNKNOWN', 'Failed to load media.', err);
+            this._error.set(mediaError);
+        }
+    }
+    /** Forces the current track to actually reload from scratch — e.g. a "retry after error" action — bypassing the engine's own idempotent-load skip (which is otherwise correct: selecting the same, already-loaded track should NOT re-fetch it). */
+    async reloadCurrent() {
+        this.engine?.destroy();
+        this._engine.set(null);
+        await this.loadCurrent(true);
+    }
+    /**
+     * Tries the native engine first (the normal fast path). Falls back to the
+     * decoder registry ONLY when the failure category indicates the format
+     * itself is the problem (`UNSUPPORTED_FORMAT`, `DECODER`) — never for
+     * `NETWORK` (404/500/CORS/interrupted), `ABORTED`, or `PERMISSION`, where
+     * retrying via a decoder would just repeat the same failing request
+     * (or a fresh one to the same broken URL) for no benefit. This matters
+     * because `canPlayType()`/extension/mime are only ever a hint and can be
+     * wrong (a mislabeled or fake extension), so the decision to fall back
+     * has to be made from the real failure, not guessed upfront.
+     */
+    async resolveEngine(source, signal) {
+        const native = this.engineFactory.create(this.kind, (fn) => this.zone.runOutsideAngular(fn), this.preload);
+        try {
+            await native.load(source, signal);
+            return native;
+        }
+        catch (nativeErr) {
+            native.destroy();
+            if (signal.aborted)
+                throw nativeErr; // deliberate cancellation, not a format failure — don't probe decoders
+            if (!this.shouldFallbackToDecoder(nativeErr))
+                throw nativeErr;
+            const decoder = await this.decoderRegistry.findDecoder(source, signal);
+            if (!decoder)
+                throw nativeErr;
+            // The decoder returns an engine that's already loaded internally
+            // (possibly against a transcoded blob, not the original source) — it
+            // must NOT have `.load(source)` called on it again afterwards.
+            return decoder.createEngine(source, signal);
+        }
+    }
+    shouldFallbackToDecoder(error) {
+        return error instanceof NgxMediaError && DECODER_FALLBACK_CATEGORIES.has(error.category);
+    }
+    async play() {
+        if (!this.engine)
+            return;
+        try {
+            await this.engine.play();
+            this.mediaSession.setPlaybackState('playing');
+        }
+        catch (err) {
+            this._error.set(err instanceof NgxMediaError ? err : new NgxMediaError('UNKNOWN', 'Play failed.', err));
+        }
+    }
+    pause() {
+        if (!this.engine)
+            return;
+        this.engine.pause();
+        this.mediaSession.setPlaybackState('paused');
+    }
+    togglePlayPause() {
+        if (this.state().playback === 'playing')
+            this.pause();
+        else
+            void this.play();
+    }
+    seek(time) {
+        this.engine?.seek(time);
+    }
+    skip(deltaSeconds) {
+        const t = this.state().currentTime + deltaSeconds;
+        this.seek(Math.min(Math.max(t, 0), this.state().duration || t));
+    }
+    setVolume(volume) {
+        this.engine?.setVolume(volume);
+    }
+    setMuted(muted) {
+        this.engine?.setMuted(muted);
+    }
+    setPlaybackRate(rate) {
+        this.engine?.setPlaybackRate(rate);
+    }
+    async previous() {
+        const list = this._playlist();
+        if (list.length === 0)
+            return;
+        const next = (this._currentIndex() - 1 + list.length) % list.length;
+        this._currentIndex.set(next);
+        await this.loadCurrent(true);
+    }
+    async next() {
+        const list = this._playlist();
+        if (list.length === 0)
+            return;
+        const next = (this._currentIndex() + 1) % list.length;
+        this._currentIndex.set(next);
+        await this.loadCurrent(true);
+    }
+    async selectIndex(index) {
+        if (index < 0 || index >= this._playlist().length)
+            return;
+        // The facade owns the active engine. If the requested index is already
+        // backed by an engine, selecting it again is a no-op even if a custom
+        // engine reports an unusual/implementation-specific state. An explicit
+        // reloadCurrent() remains the opt-in way to restart the same source.
+        const alreadyOnIt = index === this._currentIndex() && this.engine !== null;
+        if (alreadyOnIt) {
+            // Same track, already loaded — selecting it again must not trigger a
+            // fresh network load. Use `reloadCurrent()` for an explicit restart.
+            return;
+        }
+        this._currentIndex.set(index);
+        await this.loadCurrent(true);
+    }
+    /** Lazily creates the Web Audio graph — never touched unless a consumer asks for it. Always tied to the CURRENT engine's element; invalidated automatically on every engine swap (see `loadCurrent`). */
+    getWebAudioGraph() {
+        const el = this.mediaElement();
+        if (!el)
+            throw new NgxMediaError('MEDIA', 'No active media element to attach a Web Audio graph to.');
+        if (!this.webAudio)
+            this.webAudio = new NgxWebAudioGraph(el);
+        return this.webAudio;
+    }
+    bindMediaSession() {
+        this.mediaSession.bind({
+            play: () => void this.play(),
+            pause: () => this.pause(),
+            previous: () => void this.previous(),
+            next: () => void this.next(),
+            seekBackward: (s) => this.skip(-s),
+            seekForward: (s) => this.skip(s),
+        });
+    }
+    destroy() {
+        this.loadAbort?.abort();
+        this.loadGeneration++;
+        this.mediaSession.unbind();
+        this.webAudio?.destroy();
+        this.engine?.destroy();
+        this._engine.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaFacade });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaFacade, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class NgxMediaControl {
+    // --- configuration ---------------------------------------------------
+    /**
+     * `'audio'` renders an audio-style control surface (no video frame).
+     * `'video'` renders a video frame with fullscreen/PiP controls.
+     * `'both'` renders the video frame but degrades gracefully to audio-only
+     * controls when the active source has no video track.
+     */
+    type = input('audio', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Poster precedence: this input, when set, ALWAYS wins over a per-source
+     * `poster` (useful for a fixed placeholder while sources vary). Leave it
+     * unset to let each `NgxMediaSource.poster` take effect per track, and
+     * clearing either one correctly clears the poster actually applied (see
+     * the mount effect below) instead of leaving a stale image behind.
+     */
+    poster = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "poster" }] : /* istanbul ignore next */ []));
+    // --- inputs preserved verbatim from NgxAudioControl -------------------
+    showList = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showList" }] : /* istanbul ignore next */ []));
+    download = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "download" }] : /* istanbul ignore next */ []));
+    showFileName = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFileName" }] : /* istanbul ignore next */ []));
+    showSpeed = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSpeed" }] : /* istanbul ignore next */ []));
+    showVolume = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showVolume" }] : /* istanbul ignore next */ []));
+    linear = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
+    preload = input('metadata', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preload" }] : /* istanbul ignore next */ []));
+    /**
+     * IMPORTANT, and different from earlier versions of this component: a
+     * native `<audio>`/`<video src>` fetch cannot carry arbitrary request
+     * headers — that's a browser platform limitation, not something this
+     * library can paper over without fetching the whole file into a `Blob`
+     * first (which defeats streaming/range-requests for anything but small
+     * clips, and was explicitly the wrong default per the library's
+     * performance goals). So `fetchHeaders` is applied as the DEFAULT
+     * `requestHeaders` for any resolved source that doesn't specify its own
+     * (see `resolvedSources` below) — it takes effect for sources that end
+     * up on a decoder/MSE backend (which do fetch through
+     * `NGX_MEDIA_REQUEST_HANDLER` and can carry headers), and has no effect
+     * on plain natively-playable sources, which never go through a fetch at
+     * all. Set headers per-source via `NgxMediaSource.requestHeaders`
+     * whenever different tracks need different auth.
+     */
+    fetchHeaders = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fetchHeaders" }] : /* istanbul ignore next */ []));
+    /** Legacy simple form: bare URLs, one per playlist entry. Prefer `sources` for titles/artwork/per-track headers. */
+    fileList = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fileList" }] : /* istanbul ignore next */ []));
+    /** Preferred over `fileList`: full `NgxMediaSource` objects. */
+    sources = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sources" }] : /* istanbul ignore next */ []));
+    // --- outputs -----------------------------------------------------------
+    trackChange = output();
+    error = output();
+    doc = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    facade = inject(NgxMediaFacade);
+    containerRef = viewChild.required('container');
+    videoHostRef = viewChild('videoHost', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "videoHostRef" }] : /* istanbul ignore next */ []));
+    downloading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "downloading" }] : /* istanbul ignore next */ []));
+    togglePlayList = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "togglePlayList" }] : /* istanbul ignore next */ []));
+    isFullscreen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
+    /** Local seek preview — see the seek-slider handlers below for why the slider never binds `state().currentTime` directly while the user is dragging it. */
+    isSeeking = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSeeking" }] : /* istanbul ignore next */ []));
+    seekPreviewTime = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seekPreviewTime" }] : /* istanbul ignore next */ []));
+    state = this.facade.state;
+    playlist = this.facade.playlist;
+    currentIndex = this.facade.currentIndex;
+    currentSource = this.facade.currentSource;
+    playerError = this.facade.error;
+    effectiveKind = computed(() => this.type() === 'audio' ? 'audio' : 'video', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveKind" }] : /* istanbul ignore next */ []));
+    displaySeekTime = computed(() => this.isSeeking() ? this.seekPreviewTime() : this.state().currentTime, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displaySeekTime" }] : /* istanbul ignore next */ []));
+    currentTimeDisplay = computed(() => formatTime(this.displaySeekTime()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentTimeDisplay" }] : /* istanbul ignore next */ []));
+    totalTimeDisplay = computed(() => formatTime(this.state().duration), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalTimeDisplay" }] : /* istanbul ignore next */ []));
+    speedDisplay = computed(() => `${this.state().playbackRate.toFixed(2)}x`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "speedDisplay" }] : /* istanbul ignore next */ []));
+    fileName = computed(() => {
+        const source = this.currentSource();
+        return source ? extractMediaFileName(source) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
+    isPlaying = computed(() => this.state().playback === 'playing', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPlaying" }] : /* istanbul ignore next */ []));
+    isBuffering = computed(() => this.state().playback === 'buffering' || this.state().playback === 'loading', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBuffering" }] : /* istanbul ignore next */ []));
+    hasLoadError = computed(() => this.state().playback === 'error', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLoadError" }] : /* istanbul ignore next */ []));
+    errorMessage = computed(() => this.playerError()?.message ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    canFullscreen = computed(() => this.effectiveKind() === 'video' && hasFullscreen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canFullscreen" }] : /* istanbul ignore next */ []));
+    canPip = computed(() => this.effectiveKind() === 'video' && hasPictureInPicture(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canPip" }] : /* istanbul ignore next */ []));
+    /**
+     * Derived from `sources()` OR `fileList()` (whichever the consumer used),
+     * memoized by CONTENT rather than reference (`equal: mediaSourcesEqual`).
+     * Angular's `input()` signal only compares by reference — a parent that
+     * binds an inline literal, e.g. `[sources]="[{...}]"`, or otherwise
+     * re-derives an equivalent array on every change-detection pass, produces
+     * a *new* array every tick. Without the custom `equal`, the effect below
+     * would see "a new value" on every tick and reload media in a loop. A
+     * content-equal `computed` keeps returning its previous, `===`-stable
+     * value whenever the new content is equivalent, so the effect below
+     * simply doesn't re-run.
+     */
+    resolvedSources = computed(() => {
+        const globalHeaders = this.fetchHeaders();
+        const explicit = this.sources();
+        if (explicit) {
+            return explicit.map((m) => ({
+                ...m,
+                title: extractMediaFileName(m),
+                requestHeaders: m.requestHeaders ?? globalHeaders,
+            }));
+        }
+        const simple = this.fileList() ?? [];
+        return simple.map((src) => ({
+            src,
+            title: extractMediaFileName({ src }),
+            requestHeaders: globalHeaders,
+        }));
+    }, { ...(ngDevMode ? { debugName: "resolvedSources" } : /* istanbul ignore next */ {}), equal: mediaSourcesEqual });
+    /** Tracks what's actually mounted in `videoHostRef`, so the mount effect only touches the DOM (and re-registers listeners) when the element itself changes, not on every unrelated signal read. */
+    mountedElement = null;
+    dblClickHandler = null;
+    downloadResetTimeout = null;
+    constructor() {
+        effect(() => this.facade.configure(this.effectiveKind()));
+        effect(() => this.facade.setPreload(this.preload()));
+        // Rebuild the playlist whenever the consumer swaps sources to genuinely
+        // different content (see `resolvedSources` above for why this doesn't
+        // fire on every change-detection tick).
+        effect(() => {
+            this.facade.setPlaylist(this.resolvedSources(), 0, true);
+        });
+        effect(() => {
+            const err = this.playerError();
+            if (err)
+                this.error.emit(err.message);
+        });
+        effect(() => {
+            const source = this.currentSource();
+            if (source)
+                this.trackChange.emit(source);
+        });
+        if (isBrowser()) {
+            const onFsChange = () => this.isFullscreen.set(!!this.doc.fullscreenElement);
+            this.doc.addEventListener('fullscreenchange', onFsChange);
+            this.destroyRef.onDestroy(() => this.doc.removeEventListener('fullscreenchange', onFsChange));
+        }
+        // The engine owns/creates its own <audio>/<video> element (so the UI
+        // never has to know how playback happens). For video mode we mount that
+        // element into the template's host div — but ONLY when the element
+        // itself actually changed (a new engine was created). Poster updates,
+        // or this effect simply re-running for an unrelated reason, must not
+        // re-create the dblclick listener or churn the DOM by detaching and
+        // reattaching an element that's already correctly mounted.
+        effect(() => {
+            const el = this.facade.mediaElement();
+            const host = this.videoHostRef()?.nativeElement;
+            const isVideo = this.effectiveKind() === 'video';
+            const effectivePoster = this.poster() ?? this.currentSource()?.poster;
+            if (!host || !isVideo || !el) {
+                this.detachMountedElement(host);
+                return;
+            }
+            if (el !== this.mountedElement) {
+                this.detachMountedElement(host);
+                host.replaceChildren();
+                el.classList.add('ngx-media-video-element');
+                el.setAttribute('playsinline', '');
+                this.dblClickHandler = () => void this.toggleFullscreen();
+                el.addEventListener('dblclick', this.dblClickHandler);
+                host.appendChild(el);
+                this.mountedElement = el;
+            }
+            // Property update only — never re-creates the listener or touches the DOM tree.
+            el.poster = effectivePoster ?? '';
+        });
+        this.destroyRef.onDestroy(() => {
+            this.detachMountedElement(null);
+            if (this.downloadResetTimeout)
+                clearTimeout(this.downloadResetTimeout);
+        });
+    }
+    detachMountedElement(host) {
+        if (this.mountedElement && this.dblClickHandler) {
+            this.mountedElement.removeEventListener('dblclick', this.dblClickHandler);
+        }
+        this.mountedElement = null;
+        this.dblClickHandler = null;
+        host?.replaceChildren();
+    }
+    // --- transport controls (same method names as the legacy component) ---
+    playPause() {
+        this.facade.togglePlayPause();
+    }
+    play() {
+        void this.facade.play();
+    }
+    stop() {
+        this.facade.pause();
+    }
+    muteUnmute() {
+        this.facade.setMuted(!this.state().muted);
+    }
+    /**
+     * Seek strategy: dragging the slider only updates a local preview
+     * (`seekPreviewTime`) — no `facade.seek()` call, so no HTTP range
+     * request or media-pipeline seek happens per pixel of drag. The actual
+     * seek fires once, on `change` (`onSeekCommit`), which browsers fire
+     * both on pointer-release-after-drag AND after each discrete keyboard
+     * adjustment — so keyboard accessibility (arrow keys) still seeks
+     * immediately per keypress, it's only continuous dragging that's
+     * coalesced into a single request.
+     */
+    onSeekInput(ev) {
+        const value = +ev.target.value;
+        this.isSeeking.set(true);
+        this.seekPreviewTime.set(value);
+    }
+    onSeekCommit(ev) {
+        const value = +ev.target.value;
+        this.isSeeking.set(false);
+        this.facade.seek(value);
+    }
+    skipTrack(seconds) {
+        this.facade.skip(seconds);
+    }
+    increaseSpeed() {
+        this.facade.setPlaybackRate(Math.max(0.5, this.state().playbackRate + 0.25));
+    }
+    decreaseSpeed() {
+        this.facade.setPlaybackRate(Math.max(0.5, this.state().playbackRate - 0.25));
+    }
+    changeVolume(ev) {
+        this.facade.setVolume(+ev.target.value);
+    }
+    previous() {
+        void this.facade.previous();
+    }
+    next() {
+        void this.facade.next();
+    }
+    onClickPlayList(index) {
+        this.togglePlayList.set(false);
+        void this.facade.selectIndex(index);
+    }
+    togglePlaylistPanel() {
+        this.togglePlayList.update((v) => !v);
+    }
+    /** Force-reload the current track from scratch (e.g. a "retry" affordance after an error) rather than relying on selecting the same playlist entry, which deliberately does NOT reload an already-loaded track. */
+    retryCurrent() {
+        void this.facade.reloadCurrent();
+    }
+    downloadCurrentFile() {
+        const source = this.currentSource();
+        if (!source)
+            return;
+        const url = source.downloadUrl ?? (typeof source.src === 'string' ? source.src : undefined);
+        if (!url)
+            return;
+        if (this.downloadResetTimeout)
+            clearTimeout(this.downloadResetTimeout);
+        this.downloading.set(true);
+        const a = this.doc.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        a.download = source.downloadFileName ?? extractMediaFileName(source);
+        this.doc.body.appendChild(a);
+        a.click();
+        a.remove();
+        // The `download` attribute gives no completion signal (and for
+        // cross-origin URLs, browsers may ignore it and navigate instead — see
+        // README "Security limitations"). This timeout only resets the button's
+        // busy state; it is not, and cannot be, a real completion check.
+        this.downloadResetTimeout = setTimeout(() => {
+            this.downloading.set(false);
+            this.downloadResetTimeout = null;
+        }, 1000);
+    }
+    // --- video-only capabilities --------------------------------------------
+    async toggleFullscreen() {
+        if (!this.canFullscreen())
+            return;
+        const el = this.containerRef().nativeElement;
+        try {
+            if (this.doc.fullscreenElement) {
+                await this.doc.exitFullscreen();
+            }
+            else {
+                await el.requestFullscreen();
+            }
+        }
+        catch {
+            // Fullscreen can be denied by the browser (e.g. no user gesture); fail silently, UI state stays accurate via the fullscreenchange listener.
+        }
+    }
+    async togglePictureInPicture() {
+        const el = this.facade.mediaElement();
+        if (!el || !this.canPip())
+            return;
+        try {
+            if (this.doc.pictureInPictureElement) {
+                await this.doc.exitPictureInPicture();
+            }
+            else {
+                await el.requestPictureInPicture();
+            }
+        }
+        catch {
+            // Not every video/browser combination supports PiP at call time; ignore.
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxMediaControl, isStandalone: true, selector: "ngx-media-control", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, showList: { classPropertyName: "showList", publicName: "showList", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, showFileName: { classPropertyName: "showFileName", publicName: "showFileName", isSignal: true, isRequired: false, transformFunction: null }, showSpeed: { classPropertyName: "showSpeed", publicName: "showSpeed", isSignal: true, isRequired: false, transformFunction: null }, showVolume: { classPropertyName: "showVolume", publicName: "showVolume", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, fetchHeaders: { classPropertyName: "fetchHeaders", publicName: "fetchHeaders", isSignal: true, isRequired: false, transformFunction: null }, fileList: { classPropertyName: "fileList", publicName: "fileList", isSignal: true, isRequired: false, transformFunction: null }, sources: { classPropertyName: "sources", publicName: "sources", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trackChange: "trackChange", error: "error" }, providers: [NgxMediaFacade], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "videoHostRef", first: true, predicate: ["videoHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"media-player\" [class.linear]=\"linear()\" [class.video-mode]=\"effectiveKind() === 'video'\" #container>\n  @if (showFileName()) {\n    <span class=\"file-info\">{{ fileName() }}</span>\n  }\n\n  @if (effectiveKind() === 'video') {\n    <div class=\"video-host\" #videoHost></div>\n  }\n\n  <div class=\"controls\">\n    <div class=\"time-seeker\">\n      <span>{{ currentTimeDisplay() }}</span>\n      <input\n        class=\"seek-slider\"\n        type=\"range\"\n        min=\"0\"\n        [max]=\"state().duration || 0\"\n        [value]=\"displaySeekTime()\"\n        step=\".1\"\n        (input)=\"onSeekInput($event)\"\n        (change)=\"onSeekCommit($event)\" />\n      <span>{{ totalTimeDisplay() }}</span>\n      @if (isBuffering()) {\n        <div class=\"simp-buffer\"></div>\n      }\n    </div>\n    <div class=\"buttons\">\n      <button title=\"skip track -10\" (click)=\"skipTrack(-10)\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M7 9l-3 -3l3 -3\"></path>\n          <path d=\"M15.997 17.918a6.002 6.002 0 0 0 -.997 -11.918h-11\"></path>\n        </svg>\n      </button>\n\n      @if (playlist().length > 1) {\n        <button (click)=\"previous()\" title=\"previous\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M20 5v14l-12 -7z\" />\n            <path d=\"M4 5l0 14\" />\n          </svg>\n        </button>\n      }\n\n      <button\n        (click)=\"playPause()\"\n        [title]=\"hasLoadError() ? 'Error on load media source' : isPlaying() ? 'pause' : 'play'\"\n        [disabled]=\"hasLoadError()\">\n        @if (!isPlaying()) {\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z\" />\n          </svg>\n        } @else {\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z\" />\n            <path\n              d=\"M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z\" />\n          </svg>\n        }\n      </button>\n\n      @if (playlist().length > 1) {\n        <button (click)=\"next()\" title=\"next\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M4 5v14l12 -7z\" />\n            <path d=\"M20 5l0 14\" />\n          </svg>\n        </button>\n      }\n      <button title=\"skip track +10\" (click)=\"skipTrack(10)\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M17 9l3 -3l-3 -3\" />\n          <path d=\"M8 17.918a5.997 5.997 0 0 1 -5 -5.918a6 6 0 0 1 6 -6h11\" />\n        </svg>\n      </button>\n\n      @if (showVolume()) {\n        <div class=\"volume-control\">\n          <button (click)=\"muteUnmute()\" title=\"mute volume\">\n            @if (state().muted) {\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n                <path d=\"M18 10L22 14M18 14L22 10\" />\n              </svg>\n            } @else {\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n                <path d=\"M17 9C17.6254 9.81968 18 10.8634 18 12C18 13.1366 17.6254 14.1803 17 15\" />\n                <path d=\"M20 7C21.2508 8.36613 22 10.1057 22 12C22 13.8943 21.2508 15.6339 20 17\" />\n              </svg>\n            }\n          </button>\n          <input\n            class=\"volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"1\"\n            step=\"0.01\"\n            [value]=\"state().volume\"\n            (input)=\"changeVolume($event)\" />\n        </div>\n      }\n      @if (showSpeed()) {\n        <div class=\"speed-control\">\n          <button (click)=\"decreaseSpeed()\" title=\"decrease speed\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M20 12L4 12\" /></svg>\n          </button>\n          <span class=\"speed-display\">{{ speedDisplay() }}</span>\n          <button (click)=\"increaseSpeed()\" title=\"increase speed\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M12 4V20\" />\n              <path d=\"M4 12H20\" />\n            </svg>\n          </button>\n        </div>\n      }\n\n      @if (canFullscreen()) {\n        <button (click)=\"toggleFullscreen()\" title=\"fullscreen\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5\" /></svg>\n        </button>\n      }\n      @if (canPip()) {\n        <button (click)=\"togglePictureInPicture()\" title=\"picture in picture\">\n          <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"1\"></rect><rect x=\"12\" y=\"11\" width=\"7\" height=\"5\" rx=\"1\"></rect></svg>\n        </button>\n      }\n\n      <div class=\"spacer\"></div>\n      @if (showList()) {\n        <button (click)=\"togglePlaylistPanel()\" title=\"Play list\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M2 3L20 3\" />\n            <path d=\"M2 10L15 10\" />\n            <path d=\"M2 17L9 17\" />\n          </svg>\n        </button>\n      }\n      @if (download()) {\n        <button (click)=\"downloadCurrentFile()\" title=\"download\" [disabled]=\"downloading()\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12\" />\n            <path d=\"M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5\" />\n          </svg>\n        </button>\n      }\n    </div>\n  </div>\n  @if (errorMessage()) {\n    <div class=\"error-message\">\n      {{ errorMessage() }}\n      <button (click)=\"retryCurrent()\" title=\"retry\">retry</button>\n    </div>\n  }\n</div>\n\n@if (togglePlayList()) {\n  <div class=\"play-list\" [class.linear]=\"linear()\">\n    @if (playlist().length === 0) {\n      <div class=\"list-item disabled\">No any record</div>\n    }\n    @for (item of playlist(); track $index; let i = $index) {\n      <div class=\"list-item\" [class.active]=\"i === currentIndex()\" (click)=\"onClickPlayList(i)\">\n        {{ item.title }}\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:inline-block;width:500px;--ngx-audio-control-bg: light-dark(#fff, #222);--ngx-audio-control-text: light-dark(#000, #f4f5f7);--ngx-audio-control-icon: light-dark(#183153, #009688);--ngx-audio-control-border: light-dark(#e5e5e5, #474747);--ngx-audio-control-disable: light-dark(#e5e5e5, #4f4e4e);--ngx-audio-control-slider: light-dark(#ddd, #00968842);--ngx-audio-control-primary: light-dark(#007bff, #009688);--ngx-audio-control-primary-fg: light-dark(#f8f8f8, #f8f8f8);--ngx-audio-control-shadow: light-dark(#0000006e, #0000006e);--ngx-audio-control-error: light-dark(#e40505, #ff0000d3)}svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.media-player,.play-list{background-color:var(--ngx-audio-control-bg);border-radius:10px;padding:10px;box-shadow:0 0 6px 0 var(--ngx-audio-control-shadow);position:relative;overflow:hidden;direction:ltr;max-width:100%}.media-player.linear .controls,.play-list.linear .controls{display:flex;flex-wrap:wrap;flex-direction:row-reverse}.controls .time-seeker{display:flex;align-items:center;flex:1 0 0;min-width:200px}.controls .buttons{display:flex;align-items:center;flex-wrap:wrap}.error-message{color:var(--ngx-audio-control-error)}button{background-color:transparent;border:none;font-size:18px;padding:5px;width:32px;height:32px;border:1px solid var(--ngx-audio-control-border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:6px 2px;color:var(--ngx-audio-control-icon)}button:not(:disabled){cursor:pointer}button:disabled{cursor:not-allowed;background-color:var(--ngx-audio-control-disable)}button:focus{outline:none}.seek-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;background-color:var(--ngx-audio-control-slider);outline:none;border-radius:5px;cursor:pointer}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;background-color:var(--ngx-audio-control-primary);border-radius:50%;cursor:pointer}.seek-slider::-moz-range-thumb{width:15px;height:15px;background-color:var(--ngx-audio-control-primary);border-radius:50%;cursor:pointer}.speed-control{display:flex;justify-content:space-between;align-items:center}.speed-display{width:30px;text-align:center;overflow:hidden;font-size:12px;font-family:sans-serif;font-weight:100}.volume-control{display:flex;align-items:center;flex:auto;min-width:100px;max-width:200px}.spacer{flex:auto}.volume-slider{margin-left:10px;width:10px;flex:auto}.play-list{margin:3px 0}.play-list .list-item{border-bottom:1px var(--ngx-audio-control-border) solid;padding:10px 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.play-list .list-item:hover:not(.disabled){cursor:pointer;background-color:#7a7a7a2f;color:var(--ngx-audio-control-text)}.play-list .list-item.active{background-color:var(--ngx-audio-control-primary);color:var(--ngx-audio-control-primary-fg)}.simp-buffer{animation:audio-progress 1s linear infinite;background-image:linear-gradient(-45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;width:100%;height:4px;position:absolute;bottom:0;left:0;right:0}@keyframes audio-progress{to{background-position:25px 0}}.file-info{overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.media-player.video-mode .video-host{position:relative;width:100%;background:#000;aspect-ratio:16/9}.media-player.video-mode .video-host ::ng-deep .ngx-media-video-element{width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxMediaControl, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'ngx-media-control', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgxMediaFacade], template: "<div class=\"media-player\" [class.linear]=\"linear()\" [class.video-mode]=\"effectiveKind() === 'video'\" #container>\n  @if (showFileName()) {\n    <span class=\"file-info\">{{ fileName() }}</span>\n  }\n\n  @if (effectiveKind() === 'video') {\n    <div class=\"video-host\" #videoHost></div>\n  }\n\n  <div class=\"controls\">\n    <div class=\"time-seeker\">\n      <span>{{ currentTimeDisplay() }}</span>\n      <input\n        class=\"seek-slider\"\n        type=\"range\"\n        min=\"0\"\n        [max]=\"state().duration || 0\"\n        [value]=\"displaySeekTime()\"\n        step=\".1\"\n        (input)=\"onSeekInput($event)\"\n        (change)=\"onSeekCommit($event)\" />\n      <span>{{ totalTimeDisplay() }}</span>\n      @if (isBuffering()) {\n        <div class=\"simp-buffer\"></div>\n      }\n    </div>\n    <div class=\"buttons\">\n      <button title=\"skip track -10\" (click)=\"skipTrack(-10)\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M7 9l-3 -3l3 -3\"></path>\n          <path d=\"M15.997 17.918a6.002 6.002 0 0 0 -.997 -11.918h-11\"></path>\n        </svg>\n      </button>\n\n      @if (playlist().length > 1) {\n        <button (click)=\"previous()\" title=\"previous\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M20 5v14l-12 -7z\" />\n            <path d=\"M4 5l0 14\" />\n          </svg>\n        </button>\n      }\n\n      <button\n        (click)=\"playPause()\"\n        [title]=\"hasLoadError() ? 'Error on load media source' : isPlaying() ? 'pause' : 'play'\"\n        [disabled]=\"hasLoadError()\">\n        @if (!isPlaying()) {\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z\" />\n          </svg>\n        } @else {\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z\" />\n            <path\n              d=\"M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z\" />\n          </svg>\n        }\n      </button>\n\n      @if (playlist().length > 1) {\n        <button (click)=\"next()\" title=\"next\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M4 5v14l12 -7z\" />\n            <path d=\"M20 5l0 14\" />\n          </svg>\n        </button>\n      }\n      <button title=\"skip track +10\" (click)=\"skipTrack(10)\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M17 9l3 -3l-3 -3\" />\n          <path d=\"M8 17.918a5.997 5.997 0 0 1 -5 -5.918a6 6 0 0 1 6 -6h11\" />\n        </svg>\n      </button>\n\n      @if (showVolume()) {\n        <div class=\"volume-control\">\n          <button (click)=\"muteUnmute()\" title=\"mute volume\">\n            @if (state().muted) {\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n                <path d=\"M18 10L22 14M18 14L22 10\" />\n              </svg>\n            } @else {\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z\" />\n                <path d=\"M17 9C17.6254 9.81968 18 10.8634 18 12C18 13.1366 17.6254 14.1803 17 15\" />\n                <path d=\"M20 7C21.2508 8.36613 22 10.1057 22 12C22 13.8943 21.2508 15.6339 20 17\" />\n              </svg>\n            }\n          </button>\n          <input\n            class=\"volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"1\"\n            step=\"0.01\"\n            [value]=\"state().volume\"\n            (input)=\"changeVolume($event)\" />\n        </div>\n      }\n      @if (showSpeed()) {\n        <div class=\"speed-control\">\n          <button (click)=\"decreaseSpeed()\" title=\"decrease speed\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M20 12L4 12\" /></svg>\n          </button>\n          <span class=\"speed-display\">{{ speedDisplay() }}</span>\n          <button (click)=\"increaseSpeed()\" title=\"increase speed\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M12 4V20\" />\n              <path d=\"M4 12H20\" />\n            </svg>\n          </button>\n        </div>\n      }\n\n      @if (canFullscreen()) {\n        <button (click)=\"toggleFullscreen()\" title=\"fullscreen\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5\" /></svg>\n        </button>\n      }\n      @if (canPip()) {\n        <button (click)=\"togglePictureInPicture()\" title=\"picture in picture\">\n          <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"1\"></rect><rect x=\"12\" y=\"11\" width=\"7\" height=\"5\" rx=\"1\"></rect></svg>\n        </button>\n      }\n\n      <div class=\"spacer\"></div>\n      @if (showList()) {\n        <button (click)=\"togglePlaylistPanel()\" title=\"Play list\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M2 3L20 3\" />\n            <path d=\"M2 10L15 10\" />\n            <path d=\"M2 17L9 17\" />\n          </svg>\n        </button>\n      }\n      @if (download()) {\n        <button (click)=\"downloadCurrentFile()\" title=\"download\" [disabled]=\"downloading()\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M12 14.5L12 4.5M12 14.5C11.2998 14.5 9.99153 12.5057 9.5 12M12 14.5C12.7002 14.5 14.0085 12.5057 14.5 12\" />\n            <path d=\"M20 16.5C20 18.982 19.482 19.5 17 19.5H7C4.518 19.5 4 18.982 4 16.5\" />\n          </svg>\n        </button>\n      }\n    </div>\n  </div>\n  @if (errorMessage()) {\n    <div class=\"error-message\">\n      {{ errorMessage() }}\n      <button (click)=\"retryCurrent()\" title=\"retry\">retry</button>\n    </div>\n  }\n</div>\n\n@if (togglePlayList()) {\n  <div class=\"play-list\" [class.linear]=\"linear()\">\n    @if (playlist().length === 0) {\n      <div class=\"list-item disabled\">No any record</div>\n    }\n    @for (item of playlist(); track $index; let i = $index) {\n      <div class=\"list-item\" [class.active]=\"i === currentIndex()\" (click)=\"onClickPlayList(i)\">\n        {{ item.title }}\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:inline-block;width:500px;--ngx-audio-control-bg: light-dark(#fff, #222);--ngx-audio-control-text: light-dark(#000, #f4f5f7);--ngx-audio-control-icon: light-dark(#183153, #009688);--ngx-audio-control-border: light-dark(#e5e5e5, #474747);--ngx-audio-control-disable: light-dark(#e5e5e5, #4f4e4e);--ngx-audio-control-slider: light-dark(#ddd, #00968842);--ngx-audio-control-primary: light-dark(#007bff, #009688);--ngx-audio-control-primary-fg: light-dark(#f8f8f8, #f8f8f8);--ngx-audio-control-shadow: light-dark(#0000006e, #0000006e);--ngx-audio-control-error: light-dark(#e40505, #ff0000d3)}svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.media-player,.play-list{background-color:var(--ngx-audio-control-bg);border-radius:10px;padding:10px;box-shadow:0 0 6px 0 var(--ngx-audio-control-shadow);position:relative;overflow:hidden;direction:ltr;max-width:100%}.media-player.linear .controls,.play-list.linear .controls{display:flex;flex-wrap:wrap;flex-direction:row-reverse}.controls .time-seeker{display:flex;align-items:center;flex:1 0 0;min-width:200px}.controls .buttons{display:flex;align-items:center;flex-wrap:wrap}.error-message{color:var(--ngx-audio-control-error)}button{background-color:transparent;border:none;font-size:18px;padding:5px;width:32px;height:32px;border:1px solid var(--ngx-audio-control-border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:6px 2px;color:var(--ngx-audio-control-icon)}button:not(:disabled){cursor:pointer}button:disabled{cursor:not-allowed;background-color:var(--ngx-audio-control-disable)}button:focus{outline:none}.seek-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;background-color:var(--ngx-audio-control-slider);outline:none;border-radius:5px;cursor:pointer}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;background-color:var(--ngx-audio-control-primary);border-radius:50%;cursor:pointer}.seek-slider::-moz-range-thumb{width:15px;height:15px;background-color:var(--ngx-audio-control-primary);border-radius:50%;cursor:pointer}.speed-control{display:flex;justify-content:space-between;align-items:center}.speed-display{width:30px;text-align:center;overflow:hidden;font-size:12px;font-family:sans-serif;font-weight:100}.volume-control{display:flex;align-items:center;flex:auto;min-width:100px;max-width:200px}.spacer{flex:auto}.volume-slider{margin-left:10px;width:10px;flex:auto}.play-list{margin:3px 0}.play-list .list-item{border-bottom:1px var(--ngx-audio-control-border) solid;padding:10px 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.play-list .list-item:hover:not(.disabled){cursor:pointer;background-color:#7a7a7a2f;color:var(--ngx-audio-control-text)}.play-list .list-item.active{background-color:var(--ngx-audio-control-primary);color:var(--ngx-audio-control-primary-fg)}.simp-buffer{animation:audio-progress 1s linear infinite;background-image:linear-gradient(-45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;width:100%;height:4px;position:absolute;bottom:0;left:0;right:0}@keyframes audio-progress{to{background-position:25px 0}}.file-info{overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.media-player.video-mode .video-host{position:relative;width:100%;background:#000;aspect-ratio:16/9}.media-player.video-mode .video-host ::ng-deep .ngx-media-video-element{width:100%;height:100%;display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], showList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showList", required: false }] }], download: [{ type: i0.Input, args: [{ isSignal: true, alias: "download", required: false }] }], showFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileName", required: false }] }], showSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpeed", required: false }] }], showVolume: [{ type: i0.Input, args: [{ isSignal: true, alias: "showVolume", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], fetchHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchHeaders", required: false }] }], fileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileList", required: false }] }], sources: [{ type: i0.Input, args: [{ isSignal: true, alias: "sources", required: false }] }], trackChange: [{ type: i0.Output, args: ["trackChange"] }], error: [{ type: i0.Output, args: ["error"] }], containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], videoHostRef: [{ type: i0.ViewChild, args: ['videoHost', { isSignal: true }] }] } });
+
+/**
+ * Base class for WASM-backed decoders. It does the two things every such
+ * decoder needs regardless of which codec module it wraps:
+ *
+ *  1. Lazily `import()`s the codec module on first real use, in a Web Worker
+ *     when a worker factory is supplied, so the (typically large) WASM binary
+ *     never enters the main bundle or the main thread's JS heap unless a
+ *     source actually needs it.
+ *  2. Provides a cancellable, disposable lifecycle (`AbortSignal`-aware load,
+ *     `destroy()` terminates the worker / frees the WASM instance) that is
+ *     safe under overlap: a `destroy()` that lands while `loadModule()` is
+ *     still pending must not let that pending load "resurrect" a module
+ *     reference for a decoder instance that's already gone, and must not
+ *     let a subsequent `createEngine()` call kick off a SECOND concurrent
+ *     module load while the first is still in flight.
+ *
+ * This class intentionally does NOT ship a real codec — bundling e.g.
+ * `@ffmpeg/ffmpeg` here would violate "no WASM in the default bundle" for
+ * every consumer, including ones who never touch this file. Concrete
+ * decoders (FLAC, WMA, a consumer's own 3GP decoder, ...) extend this and
+ * supply `loadModule` + `buildEngine`.
+ */
+class NgxWasmDecoderBase {
+    priority = 0;
+    worker = null;
+    modulePromise = null;
+    /** Bumped by every `destroy()`; lets an in-flight `loadModule()`/`createEngine()` notice it's talking to a dead instance once it resolves. */
+    generation = 0;
+    async createEngine(source, signal) {
+        const myGeneration = this.generation;
+        const module = await this.ensureModuleLoaded(myGeneration);
+        if (signal?.aborted)
+            throw new NgxMediaError('ABORTED', `${this.id}: decode cancelled before start.`);
+        if (myGeneration !== this.generation) {
+            throw new NgxMediaError('ABORTED', `${this.id}: decoder was destroyed while its module was loading.`);
+        }
+        if (this.createWorker && !this.worker) {
+            this.worker = this.createWorker();
+        }
+        try {
+            return await this.buildEngine(source, module, this.worker, signal);
+        }
+        catch (err) {
+            // Preserve a category the caller already established (e.g. NETWORK
+            // from fetching the source, ABORTED from a cancelled transcode,
+            // UNSUPPORTED_FORMAT from a codec check) — only genuinely unknown
+            // failures get relabeled as DECODER.
+            if (err instanceof NgxMediaError)
+                throw err;
+            throw new NgxMediaError('DECODER', `${this.id}: failed to build a playable engine.`, err);
+        }
+    }
+    ensureModuleLoaded(myGeneration) {
+        if (!this.modulePromise) {
+            this.modulePromise = this.loadModule().catch((err) => {
+                if (myGeneration === this.generation)
+                    this.modulePromise = null; // allow retry on next call rather than caching a permanent failure
+                throw new NgxMediaError('DECODER', `${this.id}: WASM module failed to load.`, err);
+            });
+        }
+        // Share the in-flight promise across concurrent createEngine() callers
+        // instead of starting a second module load; but re-check generation
+        // once it resolves, since `destroy()` may have run while we waited.
+        return this.modulePromise.then((mod) => {
+            if (myGeneration !== this.generation) {
+                throw new NgxMediaError('ABORTED', `${this.id}: destroyed while its WASM module was loading.`);
+            }
+            return mod;
+        });
+    }
+    destroy() {
+        this.generation++;
+        this.worker?.terminate();
+        this.worker = null;
+        this.modulePromise = null;
+    }
+}
+/**
+ * Minimal playable-engine wrapper around a fully-decoded `AudioBuffer`,
+ * useful for WASM decoders that decode short clips completely up front
+ * rather than streaming. Reuses the browser's own `AudioContext` playback
+ * graph instead of a native `<audio>` element, since there's no compressed
+ * file for the browser to play directly anymore.
+ *
+ * Playback-position bookkeeping: `offset` is the buffer-time position when
+ * the current `AudioBufferSourceNode` was (re)started, `startedAt` is the
+ * `AudioContext.currentTime` at that moment, and `rate` is the playback
+ * rate in effect since then — so at any instant, position =
+ * `offset + (ctx.currentTime - startedAt) * rate`. Every operation that
+ * stops or restarts the source (pause, seek, rate change while playing,
+ * replay after ended) re-baselines these three fields together so that
+ * formula stays correct instead of drifting.
+ */
+class DecodedBufferEngine {
+    buffer;
+    id;
+    kind = 'audio';
+    mediaElement = null;
+    _state = signal(initialMediaState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+    state = this._state.asReadonly();
+    ctx;
+    source = null;
+    gain;
+    startedAt = 0;
+    offset = 0;
+    rate = 1;
+    volume = 1;
+    muted = false;
+    rafId = null;
+    /** Bumped every time a NEW `AudioBufferSourceNode` is created, so a stale `onended` from a node that was `.stop()`-ed (rather than actually finishing) can recognize it's obsolete and not overwrite newer state. */
+    playToken = 0;
+    constructor(decoderId, ctx, buffer) {
+        this.buffer = buffer;
+        this.id = `wasm:${decoderId}`;
+        this.ctx = ctx;
+        this.gain = ctx.createGain();
+        this.gain.connect(ctx.destination);
+        this._state.update((s) => ({ ...s, duration: buffer.duration, playback: 'ready' }));
+    }
+    async play() {
+        if (this.ctx.state === 'suspended')
+            await this.ctx.resume();
+        if (this._state().playback === 'ended' || this.offset >= this.buffer.duration) {
+            // Replaying after the buffer finished naturally (or after seeking
+            // exactly to its end) must restart from zero and update the exposed
+            // position immediately, before the next animation-frame tick.
+            this.offset = 0;
+            this._state.update((s) => ({ ...s, currentTime: 0 }));
+        }
+        const myToken = ++this.playToken;
+        this.source = this.ctx.createBufferSource();
+        this.source.buffer = this.buffer;
+        this.source.playbackRate.value = this.rate;
+        this.source.connect(this.gain);
+        this.source.onended = () => {
+            if (myToken !== this.playToken)
+                return; // stopped intentionally (pause/seek/rate-change), not a real "ended"
+            this.stopTimeTracking();
+            this.offset = this.buffer.duration;
+            this.source = null;
+            this._state.update((s) => ({ ...s, playback: 'ended', currentTime: this.buffer.duration }));
+        };
+        this.startedAt = this.ctx.currentTime;
+        this.source.start(0, this.offset);
+        this._state.update((s) => ({ ...s, playback: 'playing' }));
+        this.startTimeTracking();
+    }
+    pause() {
+        if (!this.source)
+            return;
+        this.offset = this.currentPosition();
+        this.playToken++; // the upcoming onended (if it fires at all) is now stale
+        this.source.stop();
+        this.source = null;
+        this.stopTimeTracking();
+        this._state.update((s) => ({ ...s, playback: 'paused', currentTime: this.offset }));
+    }
+    seek(time) {
+        const wasPlaying = this._state().playback === 'playing';
+        this.offset = Math.min(Math.max(time, 0), this.buffer.duration);
+        if (this.source) {
+            this.playToken++; // stale-onended guard — this stop is intentional, not the buffer actually ending
+            this.source.stop();
+            this.source = null;
+        }
+        this._state.update((s) => ({ ...s, currentTime: this.offset, playback: wasPlaying ? s.playback : 'paused' }));
+        if (wasPlaying)
+            void this.play();
+    }
+    setVolume(volume) {
+        this.volume = Math.min(Math.max(volume, 0), 1);
+        if (!this.muted)
+            this.gain.gain.value = this.volume;
+        this._state.update((s) => ({ ...s, volume: this.volume }));
+    }
+    setMuted(muted) {
+        this.muted = muted;
+        this.gain.gain.value = muted ? 0 : this.volume;
+        this._state.update((s) => ({ ...s, muted }));
+    }
+    setPlaybackRate(rate) {
+        if (this.source && this._state().playback === 'playing') {
+            // Re-baseline position bookkeeping BEFORE changing rate, or the
+            // offset+elapsed*rate formula would retroactively (and incorrectly)
+            // apply the new rate to time that already played at the old one.
+            this.offset = this.currentPosition();
+            this.startedAt = this.ctx.currentTime;
+            this.source.playbackRate.value = rate;
+        }
+        this.rate = rate;
+        this._state.update((s) => ({ ...s, playbackRate: rate }));
+    }
+    async load() {
+        /* buffer is already decoded at construction time */
+    }
+    destroy() {
+        this.playToken++;
+        this.stopTimeTracking();
+        this.source?.stop();
+        this.source = null;
+        this.gain.disconnect();
+        this._state.update((s) => ({ ...s, playback: 'destroyed' }));
+    }
+    currentPosition() {
+        if (!this.source)
+            return this.offset;
+        return Math.min(this.offset + (this.ctx.currentTime - this.startedAt) * this.rate, this.buffer.duration);
+    }
+    /** Drives `currentTime` for the UI while actually playing — never runs during pause/ended/destroyed, so there's no animation loop burning frames when nothing is moving. */
+    startTimeTracking() {
+        if (this.rafId !== null || typeof requestAnimationFrame === 'undefined')
+            return;
+        const tick = () => {
+            if (this._state().playback !== 'playing') {
+                this.rafId = null;
+                return;
+            }
+            const t = this.currentPosition();
+            if (t !== this._state().currentTime) {
+                this._state.update((s) => ({ ...s, currentTime: t }));
+            }
+            this.rafId = requestAnimationFrame(tick);
+        };
+        this.rafId = requestAnimationFrame(tick);
+    }
+    stopTimeTracking() {
+        if (this.rafId !== null && typeof cancelAnimationFrame !== 'undefined') {
+            cancelAnimationFrame(this.rafId);
+        }
+        this.rafId = null;
+    }
+}
+
+/**
+ * Root-level setup: `bootstrapApplication(App, { providers: [provideNgxMedia({...})] })`.
+ * The supplied config is merged over the library's own defaults, not
+ * replacing them outright — `provideNgxMedia({ preload: 'auto' })` must not
+ * silently drop `maxConcurrentDecoderProbes` and leave it `undefined`.
+ */
+function provideNgxMedia(config) {
+    const merged = { ...NGX_MEDIA_CONFIG_DEFAULTS, ...config };
+    return makeEnvironmentProviders([{ provide: NGX_MEDIA_CONFIG, useValue: merged }]);
+}
+/**
+ * Registers a decoder plugin into the `NGX_MEDIA_DECODER` multi-provider
+ * token. Accepts a class (instantiated via DI, so it can itself inject
+ * services) or a ready-made instance for simple cases.
+ *
+ *   bootstrapApplication(AppComponent, {
+ *     providers: [provideNgxMediaDecoder(My3gpDecoder)],
+ *   });
+ */
+function provideNgxMediaDecoder(decoder) {
+    const provider = typeof decoder === 'function'
+        ? { provide: NGX_MEDIA_DECODER, useClass: decoder, multi: true }
+        : { provide: NGX_MEDIA_DECODER, useValue: decoder, multi: true };
+    return makeEnvironmentProviders([provider]);
+}
+/** Registers a custom network layer (auth headers, signed URLs, a non-fetch HTTP client, ...). */
+function provideNgxMediaRequestHandler(handler) {
+    return makeEnvironmentProviders([{ provide: NGX_MEDIA_REQUEST_HANDLER, useValue: handler }]);
+}
+
+// New primary component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DecodedBufferEngine, NGX_MEDIA_CONFIG, NGX_MEDIA_CONFIG_DEFAULTS, NGX_MEDIA_DECODER, NGX_MEDIA_REQUEST_HANDLER, NativeMediaEngine, NgxMediaControl, NgxMediaError, NgxWasmDecoderBase, PlayList, canPlayNatively, canTransition, extractMediaFileName, formatTime, getAudioContextCtor, hasAudioContext, hasFullscreen, hasMediaSession, hasMediaSource, hasPictureInPicture, initialMediaState, isBrowser, mediaSourcesEqual, playListToMediaSource, provideNgxMedia, provideNgxMediaDecoder, provideNgxMediaRequestHandler };
+//# sourceMappingURL=ngx-kit-media-control.mjs.map