@bizy/core 19.11.20 → 19.11.21

package/fesm2022/bizy-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ChangeDetectorRef, Output, Input, Inject, ChangeDetectionStrategy, Component, NgModule, Renderer2, ElementRef, Injectable, Directive, ViewChild, ContentChildren, inject, ContentChild, RendererFactory2, Pipe, ViewContainerRef, TemplateRef, HostListener, Host } from '@angular/core';
+import { EventEmitter, ChangeDetectorRef, Output, Input, Inject, ChangeDetectionStrategy, Component, NgModule, inject, Renderer2, ElementRef, Injectable, Directive, ViewChild, ContentChildren, ContentChild, RendererFactory2, Pipe, ViewContainerRef, TemplateRef, HostListener, Host } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, registerLocaleData, DatePipe } from '@angular/common';
 import { Subject, Subscription, BehaviorSubject, filter, take, skip, auditTime, throttleTime, debounceTime as debounceTime$1, interval, fromEvent, merge, timer, of } from 'rxjs';
@@ -153,10 +153,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
         }] });
 
 class BizyAudioPlayerComponent {
-    document;
-    renderer;
+    #document = inject(DOCUMENT);
+    #renderer = inject(Renderer2);
     id = `bizy-audio-player-${Math.random()}`;
-    mimeType = MIME_TYPE.MPEG;
+    mimeType;
     showDownload = true;
     autoplay = false;
     downloadURL;
@@ -168,77 +168,96 @@ class BizyAudioPlayerComponent {
             return;
         }
         this._audioURL = audioURL;
-        this._audioRef = this._audioRef ?? this.document.getElementById(this.id);
-        if (this._audioRef) {
-            this._audioRef.load();
+        if (!this.mimeType) {
+            const isOGG = this._audioURL.toLowerCase().includes('ogg');
+            if (isOGG) {
+                this.mimeType = MIME_TYPE.OGG;
+            }
+            else {
+                const isWAV = this._audioURL.toLowerCase().includes('wav');
+                if (isWAV) {
+                    this.mimeType = MIME_TYPE.WAV;
+                }
+                else {
+                    this.mimeType = MIME_TYPE.MPEG;
+                }
+            }
+        }
+        this.#audioRef = this.#document.getElementById(this.id);
+        if (this.#audioRef) {
+            this.#audioRef.load();
             if (this.autoplay) {
-                this._audioRef.play();
+                this.#audioRef.play();
             }
         }
+        else {
+            const interval = setInterval(() => {
+                this.#audioRef = this.#document.getElementById(this.id);
+                if (this.#audioRef) {
+                    this.#audioRef.load();
+                    if (this.autoplay) {
+                        this.#audioRef.play();
+                    }
+                    clearInterval(interval);
+                }
+            }, 300);
+        }
     }
     _audioURL = null;
-    _audioRef;
+    #audioRef;
     _playbackRate = 1;
     #trackPlaybackRate$ = new Subject();
     #subscription = new Subscription();
-    constructor(document, renderer) {
-        this.document = document;
-        this.renderer = renderer;
-    }
     trackPlayerRate() {
         this.#subscription.add(this.#trackPlaybackRate$.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
             this.onTrackPlayerRate.emit(value);
         }));
     }
     _onTrackPlayerRate() {
-        this._audioRef = this._audioRef ?? this.document.getElementById(this.id);
-        if (this._audioRef) {
-            switch (this._audioRef.playbackRate) {
+        if (!this.#audioRef) {
+            this.#audioRef = this.#document.getElementById(this.id);
+        }
+        if (this.#audioRef) {
+            switch (this.#audioRef.playbackRate) {
                 case 1:
-                    this._audioRef.playbackRate = 1.5;
+                    this.#audioRef.playbackRate = 1.5;
                     this._playbackRate = 1.5;
                     this.#trackPlaybackRate$.next('1.5');
                     break;
                 case 1.5:
-                    this._audioRef.playbackRate = 2;
+                    this.#audioRef.playbackRate = 2;
                     this._playbackRate = 2;
                     this.#trackPlaybackRate$.next('2');
                     break;
                 case 2:
-                    this._audioRef.playbackRate = 1;
+                    this.#audioRef.playbackRate = 1;
                     this._playbackRate = 1;
                     break;
                 default:
-                    this._audioRef.playbackRate = 1;
+                    this.#audioRef.playbackRate = 1;
                     this._playbackRate = 1;
             }
         }
     }
     _onDownload() {
-        const downloadButton = this.renderer.createElement('a');
-        this.renderer.setAttribute(downloadButton, 'download', this.downloadFileName);
-        this.renderer.setProperty(downloadButton, 'href', this.downloadURL);
-        this.renderer.appendChild(this.document.body, downloadButton);
+        const downloadButton = this.#renderer.createElement('a');
+        this.#renderer.setAttribute(downloadButton, 'download', this.downloadFileName);
+        this.#renderer.setProperty(downloadButton, 'href', this.downloadURL);
+        this.#renderer.appendChild(this.#document.body, downloadButton);
         downloadButton.click();
-        this.renderer.removeChild(this.document.body, downloadButton);
+        this.#renderer.removeChild(this.#document.body, downloadButton);
         this.onDownload.emit();
     }
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BizyAudioPlayerComponent, deps: [{ token: DOCUMENT }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: BizyAudioPlayerComponent, isStandalone: true, selector: "bizy-audio-player", inputs: { id: "id", mimeType: "mimeType", showDownload: "showDownload", autoplay: "autoplay", downloadURL: "downloadURL", downloadFileName: "downloadFileName", audioURL: "audioURL" }, outputs: { onDownload: "onDownload", onTrackPlayerRate: "onTrackPlayerRate" }, ngImport: i0, template: "<div class=\"bizy-audio-player-component\">\n\n    <span class=\"bizy-audio-player__audio-controls\">\n\n        <audio\n            *ngIf=\"_audioURL\"\n            class=\"bizy-audio-player__audio-controls__audio\"\n            [id]=\"id\"\n            [autoplay]=\"autoplay\"\n            controls\n            controlslist=\"nodownload noplaybackrate\">\n            <source [src]=\"_audioURL\" [type]=\"mimeType\">\n            {{audioPlayerError}}\n        </audio>\n\n        <bizy-button customClass=\"bizy-audio-player__audio-controls__playback-rate\" (onSelect)=\"_onTrackPlayerRate()\">\n            <span>{{_playbackRate}}x</span>\n        </bizy-button>\n\n        <bizy-button customClass=\"bizy-audio-player__download-button\" *ngIf=\"showDownload\" (onSelect)=\"_onDownload()\">\n            <svg \n                class=\"bizy-audio-player__download-button__icon\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"/>\n            </svg>\n        </bizy-button>\n\n    </span>\n\n</div>", styles: [":host{font-size:1rem}.bizy-audio-player-component{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:2rem}.bizy-audio-player__audio-controls{width:100%;display:flex;align-items:center;column-gap:1rem}.bizy-audio-player__audio-controls__audio{flex:1;width:100%}::ng-deep .bizy-audio-player__audio-controls__playback-rate{font-size:1rem;--bizy-button-background-color: var(--bizy-audio-player-playback-rate-background-color);--bizy-button-color: var(--bizy-audio-player-playback-rate-color);font-weight:700;border-radius:50%!important;width:4rem;height:2rem;display:grid;place-items:center;cursor:pointer}::ng-deep .bizy-audio-player__download-button{--bizy-button-background-color: var(--bizy-audio-player-download-button-background-color);--bizy-button-color: var(--bizy-audio-player-download-button-color)}.bizy-audio-player__download-button__icon{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BizyButtonModule }, { kind: "component", type: BizyButtonComponent, selector: "bizy-button", inputs: ["id", "disabled", "type", "customClass"], outputs: ["onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BizyAudioPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: BizyAudioPlayerComponent, isStandalone: true, selector: "bizy-audio-player", inputs: { id: "id", mimeType: "mimeType", showDownload: "showDownload", autoplay: "autoplay", downloadURL: "downloadURL", downloadFileName: "downloadFileName", audioURL: "audioURL" }, outputs: { onDownload: "onDownload", onTrackPlayerRate: "onTrackPlayerRate" }, ngImport: i0, template: "<div class=\"bizy-audio-player-component\">\n\n    <span class=\"bizy-audio-player__audio-controls\">\n\n        <audio\n            *ngIf=\"_audioURL\"\n            class=\"bizy-audio-player__audio-controls__audio\"\n            [id]=\"id\"\n            [autoplay]=\"autoplay\"\n            controls\n            controlslist=\"nodownload noplaybackrate\">\n            <source [src]=\"_audioURL\" [type]=\"mimeType\">\n            {{audioPlayerError}}\n        </audio>\n\n        <bizy-button customClass=\"bizy-audio-player__audio-controls__playback-rate\" (onSelect)=\"_onTrackPlayerRate()\">\n            <span>{{_playbackRate}}x</span>\n        </bizy-button>\n\n        <bizy-button customClass=\"bizy-audio-player__download-button\" *ngIf=\"showDownload\" (onSelect)=\"_onDownload()\">\n            <svg \n                class=\"bizy-audio-player__download-button__icon\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"/>\n            </svg>\n        </bizy-button>\n\n    </span>\n\n</div>", styles: [":host{font-size:1rem;width:100%}.bizy-audio-player-component{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:2rem}.bizy-audio-player__audio-controls{width:100%;min-width:25rem;display:flex;align-items:center;column-gap:1rem}.bizy-audio-player__audio-controls__audio{flex:1;width:100%}::ng-deep .bizy-audio-player__audio-controls__playback-rate{font-size:1rem;--bizy-button-background-color: var(--bizy-audio-player-playback-rate-background-color);--bizy-button-color: var(--bizy-audio-player-playback-rate-color);font-weight:700;border-radius:50%!important;width:4rem;height:2rem;display:grid;place-items:center;cursor:pointer}::ng-deep .bizy-audio-player__download-button{--bizy-button-background-color: var(--bizy-audio-player-download-button-background-color);--bizy-button-color: var(--bizy-audio-player-download-button-color)}.bizy-audio-player__download-button__icon{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BizyButtonModule }, { kind: "component", type: BizyButtonComponent, selector: "bizy-button", inputs: ["id", "disabled", "type", "customClass"], outputs: ["onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BizyAudioPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-audio-player', imports: [CommonModule, BizyButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-audio-player-component\">\n\n    <span class=\"bizy-audio-player__audio-controls\">\n\n        <audio\n            *ngIf=\"_audioURL\"\n            class=\"bizy-audio-player__audio-controls__audio\"\n            [id]=\"id\"\n            [autoplay]=\"autoplay\"\n            controls\n            controlslist=\"nodownload noplaybackrate\">\n            <source [src]=\"_audioURL\" [type]=\"mimeType\">\n            {{audioPlayerError}}\n        </audio>\n\n        <bizy-button customClass=\"bizy-audio-player__audio-controls__playback-rate\" (onSelect)=\"_onTrackPlayerRate()\">\n            <span>{{_playbackRate}}x</span>\n        </bizy-button>\n\n        <bizy-button customClass=\"bizy-audio-player__download-button\" *ngIf=\"showDownload\" (onSelect)=\"_onDownload()\">\n            <svg \n                class=\"bizy-audio-player__download-button__icon\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"/>\n            </svg>\n        </bizy-button>\n\n    </span>\n\n</div>", styles: [":host{font-size:1rem}.bizy-audio-player-component{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:2rem}.bizy-audio-player__audio-controls{width:100%;display:flex;align-items:center;column-gap:1rem}.bizy-audio-player__audio-controls__audio{flex:1;width:100%}::ng-deep .bizy-audio-player__audio-controls__playback-rate{font-size:1rem;--bizy-button-background-color: var(--bizy-audio-player-playback-rate-background-color);--bizy-button-color: var(--bizy-audio-player-playback-rate-color);font-weight:700;border-radius:50%!important;width:4rem;height:2rem;display:grid;place-items:center;cursor:pointer}::ng-deep .bizy-audio-player__download-button{--bizy-button-background-color: var(--bizy-audio-player-download-button-background-color);--bizy-button-color: var(--bizy-audio-player-download-button-color)}.bizy-audio-player__download-button__icon{height:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }], propDecorators: { id: [{
+            args: [{ selector: 'bizy-audio-player', imports: [CommonModule, BizyButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-audio-player-component\">\n\n    <span class=\"bizy-audio-player__audio-controls\">\n\n        <audio\n            *ngIf=\"_audioURL\"\n            class=\"bizy-audio-player__audio-controls__audio\"\n            [id]=\"id\"\n            [autoplay]=\"autoplay\"\n            controls\n            controlslist=\"nodownload noplaybackrate\">\n            <source [src]=\"_audioURL\" [type]=\"mimeType\">\n            {{audioPlayerError}}\n        </audio>\n\n        <bizy-button customClass=\"bizy-audio-player__audio-controls__playback-rate\" (onSelect)=\"_onTrackPlayerRate()\">\n            <span>{{_playbackRate}}x</span>\n        </bizy-button>\n\n        <bizy-button customClass=\"bizy-audio-player__download-button\" *ngIf=\"showDownload\" (onSelect)=\"_onDownload()\">\n            <svg \n                class=\"bizy-audio-player__download-button__icon\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"/>\n            </svg>\n        </bizy-button>\n\n    </span>\n\n</div>", styles: [":host{font-size:1rem;width:100%}.bizy-audio-player-component{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:2rem}.bizy-audio-player__audio-controls{width:100%;min-width:25rem;display:flex;align-items:center;column-gap:1rem}.bizy-audio-player__audio-controls__audio{flex:1;width:100%}::ng-deep .bizy-audio-player__audio-controls__playback-rate{font-size:1rem;--bizy-button-background-color: var(--bizy-audio-player-playback-rate-background-color);--bizy-button-color: var(--bizy-audio-player-playback-rate-color);font-weight:700;border-radius:50%!important;width:4rem;height:2rem;display:grid;place-items:center;cursor:pointer}::ng-deep .bizy-audio-player__download-button{--bizy-button-background-color: var(--bizy-audio-player-download-button-background-color);--bizy-button-color: var(--bizy-audio-player-download-button-color)}.bizy-audio-player__download-button__icon{height:1rem}\n"] }]
+        }], propDecorators: { id: [{
                 type: Input
             }], mimeType: [{
                 type: Input