@readium/navigator 2.4.0-beta.3 → 2.4.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.4.0-beta.3",
+  "version": "2.4.0-beta.5",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",

package/src/audio/AudioNavigator.ts

@@ -66,6 +66,7 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
     private _defaults: AudioDefaults;
     private _settings: AudioSettings;
     private _preferencesEditor: AudioPreferencesEditor | null = null;
+    private _mediaSessionEnabled: boolean = false;
     private pool: AudioPoolManager;
     private readonly _navigatorProtector: AudioNavigatorProtector | null = null;
     private readonly _keyboardPeripheralsManager: KeyboardPeripherals | null = null;
@@ -110,7 +111,6 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
                 state: {
                     currentTime: initialTime,
                     duration: 0,
-                    volume: this._settings.volume
                 } as PlaybackState,
                 playWhenReady: false,
                 index: trackIndex
@@ -154,10 +154,7 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
         }
 
         this.setupEventListeners();
-
-        if (this._settings.enableMediaSession) {
-            this.setupMediaSession();
-        }
+        this.applyPreferences();
 
         this.pool.setCurrentAudio(trackIndex, "forward");
 
@@ -190,7 +187,6 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
     }
 
     private applyPreferences(): void {
-        const oldSettings = this._settings;
         this._settings = new AudioSettings(this._preferences, this._defaults);
 
         if (this._preferencesEditor !== null) {
@@ -200,9 +196,11 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
         this.pool.audioEngine.setVolume(this._settings.volume);
         this.pool.audioEngine.setPlaybackRate(this._settings.playbackRate, this._settings.preservePitch);
 
-        if (this._settings.enableMediaSession && !oldSettings.enableMediaSession) {
+        if (this._settings.enableMediaSession && !this._mediaSessionEnabled) {
+            this._mediaSessionEnabled = true;
             this.setupMediaSession();
-        } else if (!this._settings.enableMediaSession && oldSettings.enableMediaSession) {
+        } else if (!this._settings.enableMediaSession && this._mediaSessionEnabled) {
+            this._mediaSessionEnabled = false;
             this.destroyMediaSession();
         }
     }
@@ -386,12 +384,14 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
         if (!("mediaSession" in navigator)) return;
         const trackIndex = this.currentTrackIndex();
         const track = this.pub.readingOrder.items[trackIndex];
+        const cover = this.pub.getCover();
         navigator.mediaSession.metadata = new MediaMetadata({
             title: track?.title || `Track ${trackIndex + 1}`,
             artist: this.pub.metadata.authors
                 ? this.pub.metadata.authors.items.map((a) => a.name.getTranslation()).join(", ")
                 : undefined,
             album: this.pub.metadata.title.getTranslation(),
+            artwork: cover ? [{ src: cover.href, type: cover.type }] : undefined,
         });
     }
 

package/src/audio/engine/AudioEngine.ts

@@ -11,11 +11,6 @@ export interface PlaybackState {
      * The duration of the audio resource.
      */
     duration: number;
-
-    /**
-     * The volume of the audio resource.
-     */
-    volume: number;
 }
 
 /**

package/src/audio/engine/WebAudioEngine.ts

@@ -16,6 +16,7 @@ export class WebAudioEngine implements AudioEngine {
   private sourceNode: MediaElementAudioSourceNode | null = null;
   private gainNode: GainNode | null = null;
   private listeners: { [event: string]: EventCallback[] } = {};
+  private currentVolume: number = 1;
   private currentPlaybackRate: number = 1;
   private isMutedValue: boolean = false;
   private isPlayingValue: boolean = false;
@@ -48,7 +49,6 @@ export class WebAudioEngine implements AudioEngine {
 
     // crossOrigin is set lazily in activateWebAudio() only when the worklet is needed
     this.mediaElement = document.createElement("audio");
-    this.setVolume(this.playback.state.volume);
 
     // Event listeners (to report the client app about some async events)
     this.mediaElement.addEventListener("canplaythrough", this.boundOnCanPlayThrough);
@@ -109,6 +109,7 @@ export class WebAudioEngine implements AudioEngine {
       this.mediaElement.crossOrigin = "anonymous";
       this.mediaElement.src = url;
       this.mediaElement.load();
+      this.mediaElement.playbackRate = this.currentPlaybackRate;
 
       // If the server doesn't honour the CORS preflight, fall back to a
       // non-CORS load and tear down the Web Audio graph so the element
@@ -123,6 +124,7 @@ export class WebAudioEngine implements AudioEngine {
         this.mediaElement.removeAttribute("crossOrigin");
         this.mediaElement.src = url;
         this.mediaElement.load();
+        this.mediaElement.playbackRate = this.currentPlaybackRate;
       };
       const onCORSSuccess = () => cleanup();
       this.mediaElement.addEventListener("error", onCORSError);
@@ -130,6 +132,7 @@ export class WebAudioEngine implements AudioEngine {
     } else {
       this.mediaElement.src = url;
       this.mediaElement.load();
+      this.mediaElement.playbackRate = this.currentPlaybackRate;
     }
   }
 
@@ -203,7 +206,7 @@ export class WebAudioEngine implements AudioEngine {
     this.mediaElement.addEventListener("progress", this.boundOnProgress);
 
     // Re-apply current volume and playback rate to the new element
-    this.mediaElement.volume = this.isMutedValue ? 0 : this.playback.state.volume;
+    this.mediaElement.volume = this.isMutedValue ? 0 : this.currentVolume;
     this.mediaElement.playbackRate = this.currentPlaybackRate;
 
     // Check if metadata is already loaded (common with preloaded elements)
@@ -370,23 +373,23 @@ export class WebAudioEngine implements AudioEngine {
    */
   public setVolume(volume: number): void {
     if (volume < 0) {
+      this.currentVolume = 0;
       this.mediaElement.volume = 0;
       if (this.gainNode) {
         this.gainNode.gain.value = 0;
       }
       this.isMutedValue = true;
-      this.playback.state.volume = 0;
       return;
     }
     if (volume > 1) {
       this.setVolume(volume / 100);
       return;
     }
+    this.currentVolume = volume;
     this.mediaElement.volume = volume;
     if (this.gainNode) {
       this.gainNode.gain.value = volume;
     }
-    this.playback.state.volume = volume;
   }
 
   /**

package/src/preferences/Types.ts

@@ -82,7 +82,7 @@ export const volumeRangeConfig: RangeConfig = {
 
 export const playbackRateRangeConfig: RangeConfig = {
   range: [0.5, 2],
-  step: 0.25
+  step: 0.1
 }
 
 export const skipIntervalRangeConfig: RangeConfig = {

package/types/src/audio/AudioNavigator.d.ts

@@ -34,6 +34,7 @@ export declare class AudioNavigator extends MediaNavigator implements Configurab
     private _defaults;
     private _settings;
     private _preferencesEditor;
+    private _mediaSessionEnabled;
     private pool;
     private readonly _navigatorProtector;
     private readonly _keyboardPeripheralsManager;

package/types/src/audio/engine/AudioEngine.d.ts

@@ -10,10 +10,6 @@ export interface PlaybackState {
      * The duration of the audio resource.
      */
     duration: number;
-    /**
-     * The volume of the audio resource.
-     */
-    volume: number;
 }
 /**
  * Playback interface for an audio engine state

package/types/src/audio/engine/WebAudioEngine.d.ts

@@ -7,6 +7,7 @@ export declare class WebAudioEngine implements AudioEngine {
     private sourceNode;
     private gainNode;
     private listeners;
+    private currentVolume;
     private currentPlaybackRate;
     private isMutedValue;
     private isPlayingValue;