@readium/navigator 2.4.0-beta.9 → 2.5.0-beta.1

package/src/audio/engine/WebAudioEngine.ts

@@ -3,8 +3,8 @@
 import {
   AudioEngine,
   Playback,
-} from "./AudioEngine";
-import { PreservePitchWorklet } from "./PreservePitchWorklet";
+} from "./AudioEngine.ts";
+import { PreservePitchWorklet } from "./PreservePitchWorklet.ts";
 
 type EventCallback = (data: any) => void;
 
@@ -16,8 +16,6 @@ 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;
   private isPausedValue: boolean = false;
@@ -95,120 +93,6 @@ export class WebAudioEngine implements AudioEngine {
     );
   }
 
-  private deactivateWebAudio(): void {
-    if (this.worklet) {
-      this.worklet.destroy();
-      this.worklet = null;
-    }
-    if (this.sourceNode) {
-      this.sourceNode.disconnect();
-      this.sourceNode = null;
-    }
-    if (this.gainNode) {
-      this.gainNode.disconnect();
-      this.gainNode = null;
-    }
-    this.webAudioActive = false;
-  }
-
-  /**
-   * Sets the media element for playback.
-   * @param element The HTML audio element to use.
-   */
-  public setMediaElement(element: HTMLAudioElement): void {
-    // Remove listeners BEFORE pausing so the pause doesn't leak through
-    this.mediaElement.removeEventListener("canplaythrough", this.boundOnCanPlayThrough);
-    this.mediaElement.removeEventListener("timeupdate", this.boundOnTimeUpdate);
-    this.mediaElement.removeEventListener("error", this.boundOnError);
-    this.mediaElement.removeEventListener("ended", this.boundOnEnded);
-    this.mediaElement.removeEventListener("stalled", this.boundOnStalled);
-    this.mediaElement.removeEventListener("emptied", this.boundOnEmptied);
-    this.mediaElement.removeEventListener("suspend", this.boundOnSuspend);
-    this.mediaElement.removeEventListener("waiting", this.boundOnWaiting);
-    this.mediaElement.removeEventListener("loadedmetadata", this.boundOnLoadedMetadata);
-    this.mediaElement.removeEventListener("seeking", this.boundOnSeeking);
-    this.mediaElement.removeEventListener("seeked", this.boundOnSeeked);
-    this.mediaElement.removeEventListener("play", this.boundOnPlay);
-    this.mediaElement.removeEventListener("playing", this.boundOnPlaying);
-    this.mediaElement.removeEventListener("pause", this.boundOnPause);
-    this.mediaElement.removeEventListener("progress", this.boundOnProgress);
-
-    // Now safe to pause the outgoing element
-    this.mediaElement.pause();
-    this.isPlayingValue = false;
-    this.isPausedValue = false;
-
-    // Disconnect old source node if it exists
-    if (this.sourceNode) {
-      this.sourceNode.disconnect();
-      this.sourceNode = null;
-    }
-
-    // Set new media element
-    this.mediaElement = element;
-
-    // Add event listeners to new element
-    this.mediaElement.addEventListener("canplaythrough", this.boundOnCanPlayThrough);
-    this.mediaElement.addEventListener("timeupdate", this.boundOnTimeUpdate);
-    this.mediaElement.addEventListener("error", this.boundOnError);
-    this.mediaElement.addEventListener("ended", this.boundOnEnded);
-    this.mediaElement.addEventListener("stalled", this.boundOnStalled);
-    this.mediaElement.addEventListener("emptied", this.boundOnEmptied);
-    this.mediaElement.addEventListener("suspend", this.boundOnSuspend);
-    this.mediaElement.addEventListener("waiting", this.boundOnWaiting);
-    this.mediaElement.addEventListener("loadedmetadata", this.boundOnLoadedMetadata);
-    this.mediaElement.addEventListener("seeking", this.boundOnSeeking);
-    this.mediaElement.addEventListener("seeked", this.boundOnSeeked);
-    this.mediaElement.addEventListener("play", this.boundOnPlay);
-    this.mediaElement.addEventListener("playing", this.boundOnPlaying);
-    this.mediaElement.addEventListener("pause", this.boundOnPause);
-    this.mediaElement.addEventListener("progress", this.boundOnProgress);
-
-    // Re-apply current volume and playback rate to the new element
-    this.mediaElement.volume = this.isMutedValue ? 0 : this.currentVolume;
-    this.mediaElement.playbackRate = this.currentPlaybackRate;
-
-    // Reconnect the Web Audio graph to the new element
-    if (this.webAudioActive) {
-      try {
-        const ctx = this.getOrCreateAudioContext();
-        this.sourceNode = new MediaElementAudioSourceNode(ctx, { mediaElement: this.mediaElement });
-        if (!this.gainNode) {
-          this.gainNode = ctx.createGain();
-          this.gainNode.connect(ctx.destination);
-        }
-        if (this.worklet?.workletNode) {
-          this.sourceNode.connect(this.worklet.workletNode);
-        } else {
-          this.sourceNode.connect(this.gainNode);
-        }
-      } catch {
-        // CORS failed on this element — deactivate Web Audio gracefully
-        this.deactivateWebAudio();
-      }
-    }
-
-    // Check if metadata is already loaded (common with preloaded elements)
-    if (this.mediaElement.readyState >= 1) {
-      this.onLoadedMetadata(new Event('loadedmetadata'));
-    }
-
-    // Preloaded elements may have already buffered data before being swapped in,
-    // so progress events would have fired before we were listening. Emit now if
-    // seekable ranges are already available.
-    if (this.mediaElement.seekable.length > 0) {
-      this.onProgress();
-    }
-
-    // Check if the element is already loaded and trigger appropriate events
-    if (this.mediaElement.readyState >= 4) {
-      this.onCanPlayThrough();
-    } else {
-      this.isLoadingValue = true;
-      this.isLoadedValue = false;
-    }
-  }
-
   // Ensure AudioContext is running
   private async ensureAudioContextRunning() {
     if (!this.audioContext) {
@@ -313,6 +197,9 @@ export class WebAudioEngine implements AudioEngine {
     }
 
     try {
+      if (this.audioContext) {
+        await this.ensureAudioContextRunning();
+      }
       await this.mediaElement.play();
       this.isPlayingValue = true;
       this.isPausedValue = false;
@@ -351,24 +238,17 @@ export class WebAudioEngine implements AudioEngine {
    * @volume The volume to set, in the range [0, 1].
    */
   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;
-      return;
-    }
-    if (volume > 1) {
-      this.setVolume(volume / 100);
-      return;
-    }
-    this.currentVolume = volume;
-    this.mediaElement.volume = volume;
+    const clamped = Math.max(0, Math.min(1, volume));
     if (this.gainNode) {
-      this.gainNode.gain.value = volume;
+      // When the Web Audio graph is active, keep the media element at full
+      // volume and control level exclusively through the GainNode to avoid
+      // double-attenuation (e.g. 0.5 × 0.5 = 0.25).
+      this.mediaElement.volume = 1;
+      this.gainNode.gain.value = clamped;
+    } else {
+      this.mediaElement.volume = clamped;
     }
+    this.isMutedValue = clamped === 0;
   }
 
   /**
@@ -452,7 +332,6 @@ export class WebAudioEngine implements AudioEngine {
    * Sets the playback rate of the audio resource with pitch preservation.
    */
   public setPlaybackRate(rate: number, preservePitch: boolean): void {
-    this.currentPlaybackRate = rate;
     this.mediaElement.playbackRate = rate;
     if (preservePitch) {
       if ('preservesPitch' in this.mediaElement) {
@@ -461,16 +340,14 @@ export class WebAudioEngine implements AudioEngine {
         // Activate Web Audio graph first, then attach the worklet
         this.activateWebAudio().then(() => {
           if (!this.worklet) {
-            if (this.sourceNode) {
-              this.sourceNode.disconnect();
-              this.sourceNode = null;
-            }
             PreservePitchWorklet.createWorklet({
               ctx: this.getOrCreateAudioContext(),
-              mediaElement: this.mediaElement,
               pitchFactor: 1.0
             }).then(worklet => {
+              // Rewire: sourceNode → workletNode → gainNode
+              if (this.sourceNode) this.sourceNode.disconnect();
               this.worklet = worklet;
+              this.sourceNode?.connect(this.worklet.workletNode!);
               this.worklet.workletNode!.connect(this.gainNode!);
               this.worklet.updatePitchFactor(1 / rate);
             }).catch(err => {
@@ -484,12 +361,17 @@ export class WebAudioEngine implements AudioEngine {
         });
       }
     } else {
+      // Disable native pitch preservation (mirrors the check in the true branch)
+      if ('preservesPitch' in this.mediaElement) {
+        (this.mediaElement as any).preservesPitch = false;
+      }
+
       if (this.worklet) {
         this.worklet.destroy();
         this.worklet = null;
-        // Worklet is gone; restore the direct source → gain path
-        if (this.webAudioActive) {
-          this.sourceNode = new MediaElementAudioSourceNode(this.getOrCreateAudioContext(), { mediaElement: this.mediaElement });
+        // Restore: sourceNode → gainNode
+        if (this.webAudioActive && this.sourceNode) {
+          this.sourceNode.disconnect();
           this.sourceNode.connect(this.gainNode!);
         }
       }
@@ -519,28 +401,57 @@ export class WebAudioEngine implements AudioEngine {
     this.mediaElement.src = src;
     this.mediaElement.load();
 
-    await new Promise<void>((resolve, reject) => {
-      const onReady = () => {
-        this.mediaElement.removeEventListener("canplaythrough", onReady);
-        this.mediaElement.removeEventListener("error", onFail);
-        resolve();
-      };
-      const onFail = () => {
-        this.mediaElement.removeEventListener("canplaythrough", onReady);
-        this.mediaElement.removeEventListener("error", onFail);
-        reject(new Error("Audio reload with CORS failed — server may not send Access-Control-Allow-Origin"));
-      };
-      this.mediaElement.addEventListener("canplaythrough", onReady);
-      this.mediaElement.addEventListener("error", onFail);
-    });
+    try {
+      await new Promise<void>((resolve, reject) => {
+        const onReady = () => {
+          this.mediaElement.removeEventListener("canplaythrough", onReady);
+          this.mediaElement.removeEventListener("error", onFail);
+          resolve();
+        };
+        const onFail = () => {
+          this.mediaElement.removeEventListener("canplaythrough", onReady);
+          this.mediaElement.removeEventListener("error", onFail);
+          reject(new Error("Audio reload with CORS failed — server may not send Access-Control-Allow-Origin"));
+        };
+        this.mediaElement.addEventListener("canplaythrough", onReady);
+        this.mediaElement.addEventListener("error", onFail);
+      });
+    } catch (err) {
+      // Roll back to non-CORS mode so the element remains playable.
+      // crossOrigin = "" still maps to "anonymous"; remove the attribute entirely
+      // to disable CORS on the reload.
+      this.mediaElement.removeAttribute("crossorigin");
+      this.mediaElement.src = src;
+      this.mediaElement.load();
+      if (wasPlaying) {
+        await new Promise<void>(resolve => {
+          const onReady = () => {
+            this.mediaElement.removeEventListener("canplaythrough", onReady);
+            resolve();
+          };
+          this.mediaElement.addEventListener("canplaythrough", onReady);
+        });
+        this.mediaElement.currentTime = currentTime;
+        await this.mediaElement.play();
+        this.isPlayingValue = true;
+        this.isPausedValue = false;
+      } else {
+        this.mediaElement.currentTime = currentTime;
+      }
+      throw err;
+    }
 
     this.mediaElement.currentTime = currentTime;
 
     this.sourceNode = new MediaElementAudioSourceNode(this.getOrCreateAudioContext(), { mediaElement: this.mediaElement });
-    
-    // Create gainNode lazily when Web Audio is activated
+
+    // Create gainNode lazily when Web Audio is activated.
+    // Seed its gain from the current element volume, then reset the element to
+    // 1.0 so volume isn't applied twice once setVolume routes through the node.
     const audioContext = this.getOrCreateAudioContext();
     this.gainNode = audioContext.createGain();
+    this.gainNode.gain.value = this.mediaElement.volume;
+    this.mediaElement.volume = 1;
     this.sourceNode.connect(this.gainNode);
     this.gainNode.connect(audioContext.destination);
 
@@ -558,10 +469,77 @@ export class WebAudioEngine implements AudioEngine {
     return this.webAudioActive;
   }
 
+  /**
+   * Tears down the Web Audio graph and restores the media element to standalone
+   * playback. Safe to call even if Web Audio was never activated.
+   */
+  private tearDownWebAudio(): void {
+    if (this.worklet) {
+      this.worklet.destroy();
+      this.worklet = null;
+    }
+    if (this.sourceNode) {
+      this.sourceNode.disconnect();
+      this.sourceNode = null;
+    }
+    if (this.gainNode) {
+      // Restore the volume that was previously managed by the GainNode.
+      this.mediaElement.volume = this.gainNode.gain.value;
+      this.gainNode.disconnect();
+      this.gainNode = null;
+    }
+    this.webAudioActive = false;
+  }
+
+  /**
+   * Changes the src of the primary media element without swapping the element.
+   * Preserves the RemotePlayback session and all attached event listeners.
+   * When the Web Audio graph is active, the new src is loaded with
+   * crossOrigin="anonymous". If the CORS request fails (server does not send
+   * the required headers), the graph is torn down and the src is reloaded
+   * without CORS so playback continues — just without pitch correction.
+   */
+  public changeSrc(href: string): void {
+    if (this.mediaElement.src === href) {
+      return;
+    }
+    this.mediaElement.pause();
+    this.isPlayingValue = false;
+    this.isPausedValue = false;
+    this.isLoadedValue = false;
+    this.isLoadingValue = true;
+    this.isEndedValue = false;
+
+    if (this.webAudioActive) {
+      this.mediaElement.crossOrigin = "anonymous";
+      this.mediaElement.src = href;
+      this.mediaElement.load();
+
+      const onReady = () => { cleanup(); };
+      const onFail = () => {
+        cleanup();
+        console.warn("CORS reload failed for new track — disabling Web Audio graph:", href);
+        this.tearDownWebAudio();
+        this.mediaElement.removeAttribute("crossorigin");
+        this.mediaElement.src = href;
+        this.mediaElement.load();
+      };
+      const cleanup = () => {
+        this.mediaElement.removeEventListener("canplaythrough", onReady);
+        this.mediaElement.removeEventListener("error", onFail);
+      };
+      this.mediaElement.addEventListener("canplaythrough", onReady);
+      this.mediaElement.addEventListener("error", onFail);
+    } else {
+      this.mediaElement.src = href;
+      this.mediaElement.load();
+    }
+  }
+
   /**
    * Returns the HTML media element used for playback.
    */
   public getMediaElement(): HTMLMediaElement {
     return this.mediaElement;
   }
-}
+}

package/src/audio/engine/index.ts

@@ -1,2 +1,2 @@
-export * from './AudioEngine';
-export * from './WebAudioEngine';
+export * from './AudioEngine.ts';
+export * from './WebAudioEngine.ts';

package/src/audio/index.ts

@@ -1,3 +1,3 @@
-export * from './engine';
-export * from './preferences';
-export * from './AudioNavigator';
+export * from './engine/index.ts';
+export * from './preferences/index.ts';
+export * from './AudioNavigator.ts';

package/src/audio/preferences/AudioDefaults.ts

@@ -2,12 +2,12 @@ import {
   ensureBoolean,
   ensureValueInRange,
   ensureNonNegative
-} from "../../preferences/guards";
+} from "../../preferences/guards.ts";
 import { 
   volumeRangeConfig,
   playbackRateRangeConfig,
   skipIntervalRangeConfig
-} from "../../preferences/Types";
+} from "../../preferences/Types.ts";
 
 export interface IAudioDefaults {
   volume?: number | null;

package/src/audio/preferences/AudioPreferences.ts

@@ -1,14 +1,14 @@
-import { ConfigurablePreferences } from "../../preferences/Configurable";
+import { ConfigurablePreferences } from "../../preferences/Configurable.ts";
 import {
   ensureBoolean,
   ensureValueInRange,
   ensureNonNegative
-} from "../../preferences/guards";
+} from "../../preferences/guards.ts";
 import {
   volumeRangeConfig,
   playbackRateRangeConfig,
   skipIntervalRangeConfig
-} from "../../preferences/Types";
+} from "../../preferences/Types.ts";
 
 export interface IAudioPreferences {
   volume?: number | null;
@@ -22,14 +22,14 @@ export interface IAudioPreferences {
 }
 
 export class AudioPreferences implements ConfigurablePreferences<AudioPreferences> {
-  public readonly volume: number | null | undefined;
-  public readonly playbackRate: number | null | undefined;
-  public readonly preservePitch: boolean | null | undefined;
-  public readonly skipBackwardInterval: number | null | undefined;
-  public readonly skipForwardInterval: number | null | undefined;
-  public readonly pollInterval: number | null | undefined;
-  public readonly autoPlay: boolean | null | undefined;
-  public readonly enableMediaSession: boolean | null | undefined;
+  public volume: number | null | undefined;
+  public playbackRate: number | null | undefined;
+  public preservePitch: boolean | null | undefined;
+  public skipBackwardInterval: number | null | undefined;
+  public skipForwardInterval: number | null | undefined;
+  public pollInterval: number | null | undefined;
+  public autoPlay: boolean | null | undefined;
+  public enableMediaSession: boolean | null | undefined;
 
   constructor(preferences: IAudioPreferences = {}) {
     this.volume = ensureValueInRange(preferences.volume, volumeRangeConfig.range);

package/src/audio/preferences/AudioPreferencesEditor.ts

@@ -1,12 +1,12 @@
-import { IPreferencesEditor } from "../../preferences/PreferencesEditor";
-import { AudioPreferences } from "./AudioPreferences";
-import { AudioSettings } from "./AudioSettings";
-import { Preference, BooleanPreference, RangePreference } from "../../preferences/Preference";
+import { IPreferencesEditor } from "../../preferences/PreferencesEditor.ts";
+import { AudioPreferences } from "./AudioPreferences.ts";
+import { AudioSettings } from "./AudioSettings.ts";
+import { Preference, BooleanPreference, RangePreference } from "../../preferences/Preference.ts";
 import { 
   volumeRangeConfig,
   playbackRateRangeConfig,
   skipIntervalRangeConfig
-} from "../../preferences/Types";
+} from "../../preferences/Types.ts";
 
 export class AudioPreferencesEditor implements IPreferencesEditor {
   preferences: AudioPreferences;
@@ -31,7 +31,7 @@ export class AudioPreferencesEditor implements IPreferencesEditor {
       effectiveValue: this.settings.volume,
       isEffective: this.preferences.volume !== null,
       onChange: (newValue: number | null | undefined) => {
-        this.updatePreference("volume", newValue ?? 1);
+        this.updatePreference("volume", newValue ?? null);
       },
       supportedRange: volumeRangeConfig.range,
       step: volumeRangeConfig.step
@@ -44,7 +44,7 @@ export class AudioPreferencesEditor implements IPreferencesEditor {
       effectiveValue: this.settings.playbackRate,
       isEffective: this.preferences.playbackRate !== null,
       onChange: (newValue: number | null | undefined) => {
-        this.updatePreference("playbackRate", newValue ?? 1);
+        this.updatePreference("playbackRate", newValue ?? null);
       },
       supportedRange: playbackRateRangeConfig.range,
       step: playbackRateRangeConfig.step
@@ -57,7 +57,7 @@ export class AudioPreferencesEditor implements IPreferencesEditor {
       effectiveValue: this.settings.preservePitch,
       isEffective: this.preferences.preservePitch !== null,
       onChange: (newValue: boolean | null | undefined) => {
-        this.updatePreference("preservePitch", newValue ?? true);
+        this.updatePreference("preservePitch", newValue ?? null);
       }
     });
   }
@@ -68,7 +68,7 @@ export class AudioPreferencesEditor implements IPreferencesEditor {
       effectiveValue: this.settings.skipBackwardInterval,
       isEffective: this.preferences.skipBackwardInterval !== null,
       onChange: (newValue: number | null | undefined) => {
-        this.updatePreference("skipBackwardInterval", newValue ?? 10);
+        this.updatePreference("skipBackwardInterval", newValue ?? null);
       },
       supportedRange: skipIntervalRangeConfig.range,
       step: skipIntervalRangeConfig.step
@@ -81,7 +81,7 @@ export class AudioPreferencesEditor implements IPreferencesEditor {
       effectiveValue: this.settings.skipForwardInterval,
       isEffective: this.preferences.skipForwardInterval !== null,
       onChange: (newValue: number | null | undefined) => {
-        this.updatePreference("skipForwardInterval", newValue ?? 10);
+        this.updatePreference("skipForwardInterval", newValue ?? null);
       },
       supportedRange: skipIntervalRangeConfig.range,
       step: skipIntervalRangeConfig.step
@@ -94,7 +94,7 @@ export class AudioPreferencesEditor implements IPreferencesEditor {
       effectiveValue: this.settings.pollInterval,
       isEffective: this.preferences.pollInterval !== null,
       onChange: (newValue: number | null | undefined) => {
-        this.updatePreference("pollInterval", newValue ?? 1000);
+        this.updatePreference("pollInterval", newValue ?? null);
       }
     });
   }
@@ -105,7 +105,7 @@ export class AudioPreferencesEditor implements IPreferencesEditor {
       effectiveValue: this.settings.autoPlay,
       isEffective: this.preferences.autoPlay !== null,
       onChange: (newValue: boolean | null | undefined) => {
-        this.updatePreference("autoPlay", newValue ?? true);
+        this.updatePreference("autoPlay", newValue ?? null);
       }
     });
   }
@@ -116,7 +116,7 @@ export class AudioPreferencesEditor implements IPreferencesEditor {
       effectiveValue: this.settings.enableMediaSession,
       isEffective: this.preferences.enableMediaSession !== null,
       onChange: (newValue: boolean | null | undefined) => {
-        this.updatePreference("enableMediaSession", newValue ?? true);
+        this.updatePreference("enableMediaSession", newValue ?? null);
       }
     });
   }

package/src/audio/preferences/AudioSettings.ts

@@ -1,6 +1,6 @@
-import { AudioPreferences } from "./AudioPreferences";
-import { AudioDefaults } from "./AudioDefaults";
-import { ConfigurableSettings } from "../../preferences/Configurable";
+import { AudioPreferences } from "./AudioPreferences.ts";
+import { AudioDefaults } from "./AudioDefaults.ts";
+import { ConfigurableSettings } from "../../preferences/Configurable.ts";
 
 export interface IAudioSettings extends ConfigurableSettings {
   volume: number;

package/src/audio/preferences/index.ts

@@ -1,4 +1,4 @@
-export * from './AudioPreferences';
-export * from './AudioDefaults';
-export * from './AudioSettings';
-export * from './AudioPreferencesEditor';
+export * from './AudioPreferences.ts';
+export * from './AudioDefaults.ts';
+export * from './AudioSettings.ts';
+export * from './AudioPreferencesEditor.ts';

package/src/audio/protection/AudioNavigatorProtector.ts

@@ -1,7 +1,7 @@
-import { NavigatorProtector } from "../../protection/NavigatorProtector";
-import { DragAndDropProtector } from "../../protection/DragAndDropProtector";
-import { CopyProtector } from "../../protection/CopyProtector";
-import { IContentProtectionConfig } from "../../Navigator";
+import { NavigatorProtector } from "../../protection/NavigatorProtector.ts";
+import { DragAndDropProtector } from "../../protection/DragAndDropProtector.ts";
+import { CopyProtector } from "../../protection/CopyProtector.ts";
+import { IContentProtectionConfig } from "../../Navigator.ts";
 
 export class AudioNavigatorProtector extends NavigatorProtector {
     private dragAndDropProtector?: DragAndDropProtector;

package/src/css/index.ts

@@ -1 +1 @@
-export * from "./Properties";
+export * from "./Properties.ts";