@audiowalk/sdk 1.5.3 → 1.5.5

package/dist/player/media-controls.js

@@ -34,7 +34,7 @@ export class MediaControlsController {
             .pipe(takeUntil(this.playerDetachEvent))
             .subscribe(([currentTime, totalTime]) => {
             navigator.mediaSession.setPositionState({
-                duration: Number.isNaN(totalTime) ? 0 : totalTime,
+                duration: totalTime || 0,
                 position: currentTime,
             });
         });

package/dist/player/player-controller.d.ts

@@ -18,8 +18,8 @@ export declare class PlayerController {
     readonly onPause: Subject<void>;
     readonly onStop: Subject<void>;
     readonly currentTime: BehaviorSubject<number>;
-    readonly totalTime: BehaviorSubject<number>;
-    readonly progress: import("rxjs").Observable<number>;
+    readonly totalTime: BehaviorSubject<number | null>;
+    readonly progress: import("rxjs").Observable<number | null>;
     private trackId;
     readonly status: BehaviorSubject<PlayerStatus | null>;
     readonly playing: import("rxjs").Observable<boolean>;
@@ -29,13 +29,23 @@ export declare class PlayerController {
     private defaultOptions;
     private destroyEvent;
     private volume;
+    private fadeCancelEvent;
     constructor(trackId: string, trackUrl: string, options?: PlayerControllerParams);
     open(id: string, file: string): Promise<void>;
     destroy(now?: boolean): Promise<void>;
-    play(): Promise<void>;
+    private destroyNow;
+    play(params?: {
+        fade?: boolean;
+    }): Promise<void>;
     pause(): Promise<void>;
-    setVolume(volume: number): void;
+    stop(params?: {
+        fade?: boolean;
+    }): Promise<void>;
     seekTo(seconds: number): void;
+    setVolume(volume: number, params?: {
+        fade?: boolean;
+    }): Promise<void>;
+    fadeToVolume(volume: number): Promise<void>;
     back(seconds?: number): void;
     forward(seconds?: number): void;
     private savePosition;

package/dist/player/player-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"player-controller.d.ts","sourceRoot":"","sources":["../../src/player/player-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAsB,OAAO,EAAa,MAAM,MAAM,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,sBAAsB,GAAG,SAAS,CAAC,uBAAuB,EAAE,eAAe,CAAC,CAAC;AAEzF,oBAAY,YAAY;IACtB,SAAS,YAAY;IACrB,QAAQ,WAAW;IACnB,OAAO,UAAU;CAClB;AAED,qBAAa,gBAAgB;IAC3B,SAAgB,MAAM,gBAAuB;IAC7C,SAAgB,OAAO,gBAAuB;IAC9C,SAAgB,MAAM,gBAAuB;IAE7C,SAAgB,WAAW,0BAAkC;IAC7D,SAAgB,SAAS,0BAAkC;IAC3D,SAAgB,QAAQ,oCAEtB;IAEF,OAAO,CAAC,OAAO,CAAuB;IAEtC,SAAgB,MAAM,uCAAkD;IACxE,SAAgB,OAAO,qCAA2D;IAElF,OAAO,CAAC,aAAa,CAAmB;IAExC,OAAO,CAAC,YAAY,CAA0C;IAE9D,OAAO,CAAC,OAAO,CAA0B;IAEzC,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,YAAY,CAAuB;IAE3C,OAAO,CAAC,MAAM,CAAa;gBAEf,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,sBAA2B;IAyE7E,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAQ7B,OAAO,CAAC,GAAG,CAAC,EAAE,OAAO;IAWrB,IAAI;IAOJ,KAAK;IAQX,SAAS,CAAC,MAAM,EAAE,MAAM;IAKxB,MAAM,CAAC,OAAO,EAAE,MAAM;IAOtB,IAAI,CAAC,OAAO,GAAE,MAAW;IAOzB,OAAO,CAAC,OAAO,GAAE,MAAW;YAQd,YAAY;IAK1B,OAAO,CAAC,GAAG;CAOZ"}
+{"version":3,"file":"player-controller.d.ts","sourceRoot":"","sources":["../../src/player/player-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAwC,OAAO,EAAwB,MAAM,MAAM,CAAC;AAC5G,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,sBAAsB,GAAG,SAAS,CAAC,uBAAuB,EAAE,eAAe,CAAC,CAAC;AAEzF,oBAAY,YAAY;IACtB,SAAS,YAAY;IACrB,QAAQ,WAAW;IACnB,OAAO,UAAU;CAClB;AAED,qBAAa,gBAAgB;IAC3B,SAAgB,MAAM,gBAAuB;IAC7C,SAAgB,OAAO,gBAAuB;IAC9C,SAAgB,MAAM,gBAAuB;IAE7C,SAAgB,WAAW,0BAAkC;IAC7D,SAAgB,SAAS,iCAA4C;IACrE,SAAgB,QAAQ,2CAEtB;IAEF,OAAO,CAAC,OAAO,CAAuB;IAEtC,SAAgB,MAAM,uCAAkD;IACxE,SAAgB,OAAO,qCAA2D;IAElF,OAAO,CAAC,aAAa,CAAmB;IAExC,OAAO,CAAC,YAAY,CAA0C;IAE9D,OAAO,CAAC,OAAO,CAA0B;IAEzC,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,YAAY,CAAuB;IAE3C,OAAO,CAAC,MAAM,CAAa;IAE3B,OAAO,CAAC,eAAe,CAAuB;gBAElC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,sBAA2B;IAgE7E,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAQ7B,OAAO,CAAC,GAAG,GAAE,OAAe;IAgBlC,OAAO,CAAC,UAAU;IAQZ,IAAI,CAAC,MAAM,GAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAqC;IAiBlE,KAAK;IAQL,IAAI,CAAC,MAAM,GAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAqC;IAgBxE,MAAM,CAAC,OAAO,EAAE,MAAM;IAQhB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAO;IAYzD,YAAY,CAAC,MAAM,EAAE,MAAM;IA4BjC,IAAI,CAAC,OAAO,GAAE,MAAW;IAKzB,OAAO,CAAC,OAAO,GAAE,MAAW;YAMd,YAAY;IAK1B,OAAO,CAAC,GAAG;CAOZ"}

package/dist/player/player-controller.js

@@ -1,4 +1,4 @@
-import { BehaviorSubject, combineLatest, map, Subject, takeUntil } from "rxjs";
+import { BehaviorSubject, combineLatest, filter, interval, map, Subject, takeUntil, takeWhile } from "rxjs";
 import { LocalStorage } from "../storage/local-storage";
 export var PlayerStatus;
 (function (PlayerStatus) {
@@ -11,8 +11,8 @@ export class PlayerController {
     onPause = new Subject();
     onStop = new Subject();
     currentTime = new BehaviorSubject(0);
-    totalTime = new BehaviorSubject(0);
-    progress = combineLatest([this.currentTime, this.totalTime]).pipe(map(([currentTime, totalTime]) => currentTime / totalTime));
+    totalTime = new BehaviorSubject(null);
+    progress = combineLatest([this.currentTime, this.totalTime]).pipe(map(([currentTime, totalTime]) => (totalTime ? currentTime / totalTime : null)));
     trackId = null;
     status = new BehaviorSubject(null);
     playing = this.status.pipe(map((status) => status === "playing"));
@@ -24,9 +24,11 @@ export class PlayerController {
     };
     destroyEvent = new Subject();
     volume = 1;
+    fadeCancelEvent = new Subject();
     constructor(trackId, trackUrl, options = {}) {
         this.options = { ...this.defaultOptions, ...options };
         this.playerElement = this.options.audioElement ?? new Audio();
+        this.playerElement.volume = this.volume;
         this.playerElement.addEventListener("play", () => {
             this.onPlay.next();
             this.status.next(PlayerStatus.playing);
@@ -35,12 +37,12 @@ export class PlayerController {
             this.onPause.next();
             this.status.next(PlayerStatus.paused);
         });
-        if (!this.options.crossfade && !this.options.loop) {
-            this.playerElement.addEventListener("ended", () => {
+        this.playerElement.addEventListener("ended", () => {
+            if (!this.options.crossfade && !this.options.loop) {
                 this.onStop.next();
                 this.status.next(PlayerStatus.ended);
-            });
-        }
+            }
+        });
         this.playerElement.addEventListener("loadedmetadata", (event) => {
             if (this.playerElement.duration) {
                 this.totalTime.next(this.playerElement.duration);
@@ -58,21 +60,11 @@ export class PlayerController {
         if (this.options.crossfade && !this.options.loop) {
             combineLatest([this.currentTime, this.totalTime])
                 .pipe(takeUntil(this.destroyEvent))
+                .pipe(filter(([currentTime, totalTime]) => !!totalTime)) // track is loaded
+                .pipe(filter(([currentTime, totalTime]) => currentTime >= totalTime - this.options.crossfadeTime / 1000)) // crossfading should start
                 .subscribe(([currentTime, totalTime]) => {
-                const crossfadeTime = this.options.crossfadeTime / 1000;
-                if (currentTime >= totalTime - crossfadeTime) {
-                    this.playerElement.volume = (totalTime - currentTime) / crossfadeTime;
-                    if (this.status.value !== PlayerStatus.ended) {
-                        this.onStop.next();
-                        this.status.next(PlayerStatus.ended);
-                    }
-                }
-                else if (currentTime < crossfadeTime) {
-                    this.playerElement.volume = currentTime / crossfadeTime;
-                }
-                else {
-                    this.playerElement.volume = this.volume;
-                }
+                if (this.status.value !== PlayerStatus.ended)
+                    this.stop();
             });
         }
         if (this.options.loop) {
@@ -82,7 +74,7 @@ export class PlayerController {
             });
         }
         this.open(trackId, trackUrl);
-        this.log("Initialized player", this.playerElement);
+        this.log("Initialized player", trackId);
     }
     async open(id, file) {
         this.trackId = id;
@@ -91,22 +83,40 @@ export class PlayerController {
         if (position && this.options.autoSave)
             this.playerElement.currentTime = position;
     }
-    async destroy(now) {
-        if (this.options.crossfade) {
-            // destroy later to enable fade out
-            setTimeout(() => this.destroy(true), this.options.crossfadeTime);
+    async destroy(now = false) {
+        this.log("Called destroy", now ? "now" : "");
+        if (this.status.value !== PlayerStatus.ended) {
+            await this.stop();
+            return this.destroyNow();
+        }
+        // if crossfade is enabled, we might be ending crossfade just now, so wait for the crossfade to finish
+        if (this.options.crossfade && now !== true) {
+            setTimeout(() => this.destroyNow(), this.options.crossfadeTime);
         }
         else {
-            this.destroyEvent.next();
-            await this.pause();
-            this.playerElement.remove();
+            this.destroyNow();
         }
     }
-    async play() {
+    destroyNow() {
+        this.log("Destroying player");
+        this.destroyEvent.next();
+        this.playerElement.src = "";
+        this.playerElement.pause();
+        this.playerElement.remove();
+    }
+    async play(params = { fade: this.options.crossfade }) {
         if (!this.playerElement.src)
             throw new Error("No file opened");
-        this.log("Called play");
+        if (this.status.value === PlayerStatus.playing)
+            return;
+        this.log("Called play", params.fade ? "with fade" : "");
+        if (params.fade) {
+            this.playerElement.volume = 0;
+        }
         await this.playerElement?.play();
+        if (params.fade) {
+            await this.fadeToVolume(this.volume);
+        }
     }
     async pause() {
         if (!this.playerElement.src)
@@ -116,25 +126,65 @@ export class PlayerController {
         this.log("Called pause");
         this.playerElement?.pause();
     }
-    setVolume(volume) {
-        this.volume = volume;
-        this.playerElement.volume = Math.max(Math.min(volume, 1), 0);
+    async stop(params = { fade: this.options.crossfade }) {
+        this.log("Called stop", params.fade ? "with fade" : "");
+        if (this.status.value !== PlayerStatus.ended) {
+            this.status.next(PlayerStatus.ended);
+            this.onStop.next();
+        }
+        if (params.fade) {
+            await this.fadeToVolume(0);
+        }
+        this.playerElement.pause();
+        this.playerElement.currentTime = 0;
     }
     seekTo(seconds) {
         if (!this.playerElement.src)
             throw new Error("No file opened");
+        if (this.status.value === PlayerStatus.ended)
+            return;
         this.log("Called seekTo");
         this.playerElement.currentTime = seconds;
     }
+    async setVolume(volume, params = {}) {
+        this.log("Called set volume", volume, params.fade ? "with fade" : "");
+        this.volume = volume;
+        if (params.fade) {
+            await this.fadeToVolume(volume);
+        }
+        else {
+            this.playerElement.volume = Math.max(Math.min(volume, 1), 0);
+        }
+    }
+    async fadeToVolume(volume) {
+        return new Promise((resolve, reject) => {
+            this.fadeCancelEvent.next();
+            this.volume = volume;
+            const fadeOutInterval = 100;
+            const fadeOutStep = (this.volume - this.playerElement.volume) / (this.options.crossfadeTime / fadeOutInterval);
+            if (fadeOutStep === 0)
+                return resolve();
+            interval(fadeOutInterval)
+                .pipe(takeUntil(this.fadeCancelEvent))
+                .pipe(takeUntil(this.destroyEvent))
+                .pipe(takeWhile(() => Math.abs(this.playerElement.volume - this.volume) > Math.abs(fadeOutStep)))
+                .subscribe({
+                next: () => {
+                    this.playerElement.volume += fadeOutStep;
+                },
+                error: (error) => reject(error),
+                complete: () => {
+                    this.playerElement.volume = this.volume;
+                    resolve();
+                },
+            });
+        });
+    }
     back(seconds = 10) {
-        if (!this.playerElement.src)
-            throw new Error("No file opened");
         const position = this.playerElement.currentTime;
         this.seekTo(Math.max(position - seconds, 0));
     }
     forward(seconds = 10) {
-        if (!this.playerElement.src)
-            throw new Error("No file opened");
         const position = this.playerElement.currentTime;
         const duration = this.playerElement.duration;
         this.seekTo(duration && duration > 0 ? Math.min(position + seconds, duration) : position + seconds);
@@ -147,7 +197,7 @@ export class PlayerController {
     log(message, ...args) {
         const time = this.playerElement?.currentTime ? Math.round(this.playerElement?.currentTime) : null;
         if (time)
-            message += ` @${time}s`;
+            args.push(`@${time}s`);
         console.log(`[PlayerController] ${message}`, ...args);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audiowalk/sdk",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/audiowalk-cz/components.git"