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

package/package.json

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

package/src/audio/AudioNavigator.ts

@@ -1,5 +1,5 @@
 import { Link, Locator, LocatorLocations, Publication } from "@readium/shared";
-import { MediaNavigator } from "../Navigator";
+import { MediaNavigator, IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator";
 import { Configurable } from "../preferences";
 import { WebAudioEngine, PlaybackState } from "./engine";
 import {
@@ -11,6 +11,10 @@ import {
     IAudioDefaults
 } from "./preferences";
 import { AudioPoolManager } from "./AudioPoolManager";
+import { ContextMenuEvent, KeyboardEventData, SuspiciousActivityEvent } from "@readium/navigator-html-injectables";
+import { AudioNavigatorProtector } from "./protection/AudioNavigatorProtector";
+import { NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT } from "../protection/NavigatorProtector";
+import { KeyboardPeripherals, NAVIGATOR_KEYBOARD_PERIPHERAL_EVENT } from "../peripherals/KeyboardPeripherals";
 
 export interface AudioNavigatorListeners {
     trackLoaded: (media: HTMLMediaElement) => void;
@@ -23,11 +27,32 @@ export interface AudioNavigatorListeners {
     stalled: (isStalled: boolean) => void;
     seeking: (isSeeking: boolean) => void;
     seekable: (seekable: TimeRanges) => void;
+    contentProtection: (type: string, data: SuspiciousActivityEvent) => void;
+    peripheral: (data: KeyboardEventData) => void;
+    contextMenu: (data: ContextMenuEvent) => void;
 }
 
+const defaultListeners = (listeners: Partial<AudioNavigatorListeners>): AudioNavigatorListeners => ({
+    trackLoaded: listeners.trackLoaded ?? (() => {}),
+    positionChanged: listeners.positionChanged ?? (() => {}),
+    error: listeners.error ?? (() => {}),
+    trackEnded: listeners.trackEnded ?? (() => {}),
+    play: listeners.play ?? (() => {}),
+    pause: listeners.pause ?? (() => {}),
+    metadataLoaded: listeners.metadataLoaded ?? (() => {}),
+    stalled: listeners.stalled ?? (() => {}),
+    seeking: listeners.seeking ?? (() => {}),
+    seekable: listeners.seekable ?? (() => {}),
+    contentProtection: listeners.contentProtection ?? (() => {}),
+    peripheral: listeners.peripheral ?? (() => {}),
+    contextMenu: listeners.contextMenu ?? (() => {}),
+});
+
 export interface AudioNavigatorConfiguration {
     preferences: IAudioPreferences;
     defaults: IAudioDefaults;
+    contentProtection?: IContentProtectionConfig;
+    keyboardPeripherals?: IKeyboardPeripheralsConfig;
 }
 
 export class AudioNavigator extends MediaNavigator implements Configurable<AudioSettings, AudioPreferences> {
@@ -42,6 +67,10 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
     private _settings: AudioSettings;
     private _preferencesEditor: AudioPreferencesEditor | null = null;
     private pool: AudioPoolManager;
+    private readonly _navigatorProtector: AudioNavigatorProtector | null = null;
+    private readonly _keyboardPeripheralsManager: KeyboardPeripherals | null = null;
+    private readonly _suspiciousActivityListener: ((event: Event) => void) | null = null;
+    private readonly _keyboardPeripheralListener: ((event: Event) => void) | null = null;
 
     constructor(publication: Publication, listeners: AudioNavigatorListeners, initialPosition?: Locator, configuration: AudioNavigatorConfiguration = {
         preferences: {},
@@ -49,11 +78,11 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
     }) {
         super();
         this.pub = publication;
+        this.listeners = defaultListeners(listeners);
 
         this._preferences = new AudioPreferences(configuration.preferences);
         this._defaults = new AudioDefaults(configuration.defaults);
         this._settings = new AudioSettings(this._preferences, this._defaults);
-        this.listeners = listeners;
 
         if (initialPosition) {
             this.currentLocation = this.ensureLocatorLocations(initialPosition);
@@ -88,14 +117,49 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
             }
         });
 
-        this.pool = new AudioPoolManager(audioEngine);
+        this.pool = new AudioPoolManager(audioEngine, publication);
+
+        // Initialize content protection
+        const contentProtection = configuration.contentProtection || {};
+        const keyboardPeripherals = this.mergeKeyboardPeripherals(
+            contentProtection,
+            configuration.keyboardPeripherals || []
+        );
+
+        if (contentProtection.disableContextMenu ||
+            contentProtection.checkAutomation ||
+            contentProtection.checkIFrameEmbedding ||
+            contentProtection.monitorDevTools ||
+            contentProtection.protectPrinting?.disable ||
+            contentProtection.disableDragAndDrop ||
+            contentProtection.protectCopy) {
+            this._navigatorProtector = new AudioNavigatorProtector(contentProtection);
+            this._suspiciousActivityListener = (event: Event) => {
+                const { type, ...detail } = (event as CustomEvent).detail;
+                if (type === "context_menu") {
+                    this.listeners.contextMenu(detail as ContextMenuEvent);
+                } else {
+                    this.listeners.contentProtection(type, detail as SuspiciousActivityEvent);
+                }
+            };
+            window.addEventListener(NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT, this._suspiciousActivityListener);
+        }
+
+        if (keyboardPeripherals.length > 0) {
+            this._keyboardPeripheralsManager = new KeyboardPeripherals({ keyboardPeripherals });
+            this._keyboardPeripheralListener = (event: Event) => {
+                this.listeners.peripheral((event as CustomEvent).detail);
+            };
+            window.addEventListener(NAVIGATOR_KEYBOARD_PERIPHERAL_EVENT, this._keyboardPeripheralListener);
+        }
+
         this.setupEventListeners();
 
         if (this._settings.enableMediaSession) {
             this.setupMediaSession();
         }
 
-        this.pool.setCurrentAudio(initialHref, this.pub, trackIndex, "forward");
+        this.pool.setCurrentAudio(trackIndex, "forward");
 
         // Load and seek to initial position, then notify consumer.
         // No cancellation needed here — the constructor runs once.
@@ -370,7 +434,7 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
             const wasPlaying = this.isPlaying;
 
             this.stopPositionPolling();
-            this.pool.setCurrentAudio(href, this.pub, trackIndex, direction);
+            this.pool.setCurrentAudio(trackIndex, direction);
             this.currentLocation = locator.copyWithLocations(locator.locations);
 
             await this.waitForLoadedAndSeeked(time, id);
@@ -399,7 +463,8 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
             cb(false);
             return;
         }
-        const locator = this.createLocator(trackIndex, 0);
+        const time = link.locator.locations?.time() ?? 0;
+        const locator = this.createLocator(trackIndex, time);
         await this.go(locator, _animated, cb);
     }
 
@@ -492,6 +557,14 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
     destroy(): void {
         this.stopPositionPolling();
         this.destroyMediaSession();
+        if (this._suspiciousActivityListener) {
+            window.removeEventListener(NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT, this._suspiciousActivityListener);
+        }
+        if (this._keyboardPeripheralListener) {
+            window.removeEventListener(NAVIGATOR_KEYBOARD_PERIPHERAL_EVENT, this._keyboardPeripheralListener);
+        }
+        this._navigatorProtector?.destroy();
+        this._keyboardPeripheralsManager?.destroy();
         this.pool.destroy();
     }
 }

package/src/audio/AudioPoolManager.ts

@@ -1,12 +1,46 @@
-import { Publication } from "@readium/shared";
+import { Link, Publication } from "@readium/shared";
 import { WebAudioEngine } from "./engine/WebAudioEngine";
 
 export class AudioPoolManager {
     private preloadedElements: Map<string, HTMLAudioElement> = new Map();
     private _audioEngine: WebAudioEngine;
+    private readonly _publication: Publication;
+    private readonly _supportedAudioTypes: Map<string, "probably" | "maybe">;
 
-    constructor(audioEngine: WebAudioEngine) {
+    constructor(audioEngine: WebAudioEngine, publication: Publication) {
         this._audioEngine = audioEngine;
+        this._publication = publication;
+        this._supportedAudioTypes = this.detectSupportedAudioTypes();
+    }
+
+    private detectSupportedAudioTypes(): Map<string, "probably" | "maybe"> {
+        const audio = document.createElement("audio");
+        const unique = new Set<string>();
+        for (const link of this._publication.readingOrder.items) {
+            if (link.type) unique.add(link.type);
+            for (const alt of link.alternates?.items ?? []) {
+                if (alt.type) unique.add(alt.type);
+            }
+        }
+        const supported = new Map<string, "probably" | "maybe">();
+        for (const type of unique) {
+            const result = audio.canPlayType(type);
+            if (result !== "") supported.set(type, result as "probably" | "maybe");
+        }
+        return supported;
+    }
+
+    private pickPlayableHref(link: Link): string {
+        const candidates = [link, ...(link.alternates?.items ?? [])];
+        let best: { href: string; confidence: "probably" | "maybe" } | undefined;
+        for (const candidate of candidates) {
+            if (!candidate.type) continue;
+            const confidence = this._supportedAudioTypes.get(candidate.type);
+            if (!confidence) continue;
+            if (confidence === "probably") return candidate.href;
+            if (!best) best = { href: candidate.href, confidence };
+        }
+        return best?.href ?? link.href;
     }
 
     get audioEngine(): WebAudioEngine {
@@ -21,7 +55,8 @@ export class AudioPoolManager {
      * @param currentIndex The current track index.
      * @param direction The navigation direction ('forward' or 'backward').
      */
-    setCurrentAudio(href: string, publication: Publication, currentIndex: number, direction: 'forward' | 'backward'): void {
+    setCurrentAudio(currentIndex: number, direction: 'forward' | 'backward'): void {
+        const href = this.pickPlayableHref(this._publication.readingOrder.items[currentIndex]);
         // When Web Audio is active, preloaded elements lack crossOrigin="anonymous"
         // and cannot be connected to MediaElementAudioSourceNode, so bypass the pool.
         const preloadedElement = !this.audioEngine.isWebAudioActive ? this.get(href) : undefined;
@@ -32,7 +67,7 @@ export class AudioPoolManager {
             this.clear(href);
             this.audioEngine.loadAudio(href);
         }
-        this.preloadAdjacent(publication, currentIndex, direction);
+        this.preloadAdjacent(currentIndex, direction);
     }
     preload(href: string): void {
         if (this.preloadedElements.has(href)) {
@@ -69,44 +104,38 @@ export class AudioPoolManager {
      * @param publication The publication containing the reading order.
      * @param currentIndex The current track index.
      */
-    preloadNext(publication: Publication, currentIndex: number): void {
+    preloadNext(currentIndex: number): void {
         const nextIndex = currentIndex + 1;
-        if (nextIndex < publication.readingOrder.items.length) {
-            const nextLink = publication.readingOrder.items[nextIndex];
-            if (nextLink.href) {
-                this.preload(nextLink.href);
-            }
+        if (nextIndex < this._publication.readingOrder.items.length) {
+            const nextLink = this._publication.readingOrder.items[nextIndex];
+            this.preload(this.pickPlayableHref(nextLink));
         }
     }
 
     /**
      * Preloads the previous track in the reading order.
-     * @param publication The publication containing the reading order.
      * @param currentIndex The current track index.
      */
-    preloadPrevious(publication: Publication, currentIndex: number): void {
+    preloadPrevious(currentIndex: number): void {
         const prevIndex = currentIndex - 1;
         if (prevIndex >= 0) {
-            const prevLink = publication.readingOrder.items[prevIndex];
-            if (prevLink.href) {
-                this.preload(prevLink.href);
-            }
+            const prevLink = this._publication.readingOrder.items[prevIndex];
+            this.preload(this.pickPlayableHref(prevLink));
         }
     }
 
     /**
      * Preloads adjacent tracks (previous and next) for smoother navigation.
-     * @param publication The publication containing the reading order.
      * @param currentIndex The current track index.
      * @param direction The navigation direction ('forward' or 'backward').
      */
-    preloadAdjacent(publication: Publication, currentIndex: number, direction: 'forward' | 'backward' = 'forward'): void {
+    preloadAdjacent(currentIndex: number, direction: 'forward' | 'backward' = 'forward'): void {
         if (direction === 'forward') {
-            this.preloadNext(publication, currentIndex);
-            this.preloadPrevious(publication, currentIndex);
+            this.preloadNext(currentIndex);
+            this.preloadPrevious(currentIndex);
         } else {
-            this.preloadPrevious(publication, currentIndex);
-            this.preloadNext(publication, currentIndex);
+            this.preloadPrevious(currentIndex);
+            this.preloadNext(currentIndex);
         }
     }
 

package/src/audio/protection/AudioNavigatorProtector.ts

@@ -0,0 +1,38 @@
+import { NavigatorProtector } from "../../protection/NavigatorProtector";
+import { DragAndDropProtector } from "../../protection/DragAndDropProtector";
+import { CopyProtector } from "../../protection/CopyProtector";
+import { IContentProtectionConfig } from "../../Navigator";
+
+export class AudioNavigatorProtector extends NavigatorProtector {
+    private dragAndDropProtector?: DragAndDropProtector;
+    private copyProtector?: CopyProtector;
+
+    constructor(config: IContentProtectionConfig = {}) {
+        super(config);
+
+        if (config.disableDragAndDrop) {
+            this.dragAndDropProtector = new DragAndDropProtector({
+                onDragDetected: (dataTransferTypes) => {
+                    this.dispatchSuspiciousActivity("drag_detected", { dataTransferTypes, targetFrameSrc: "" });
+                },
+                onDropDetected: (dataTransferTypes, fileCount) => {
+                    this.dispatchSuspiciousActivity("drop_detected", { dataTransferTypes, fileCount, targetFrameSrc: "" });
+                }
+            });
+        }
+
+        if (config.protectCopy) {
+            this.copyProtector = new CopyProtector({
+                onCopyBlocked: () => {
+                    this.dispatchSuspiciousActivity("bulk_copy", { targetFrameSrc: "" });
+                }
+            });
+        }
+    }
+
+    public override destroy() {
+        super.destroy();
+        this.dragAndDropProtector?.destroy();
+        this.copyProtector?.destroy();
+    }
+}

package/src/protection/CopyProtector.ts

@@ -0,0 +1,22 @@
+export interface CopyProtectionOptions {
+    onCopyBlocked?: () => void;
+}
+
+export class CopyProtector {
+    private copyHandler: (event: ClipboardEvent) => void;
+
+    constructor(options: CopyProtectionOptions = {}) {
+        this.copyHandler = (event: ClipboardEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            options.onCopyBlocked?.();
+        };
+
+        document.addEventListener("copy", this.copyHandler, true);
+        window.addEventListener("unload", () => this.destroy());
+    }
+
+    public destroy() {
+        document.removeEventListener("copy", this.copyHandler, true);
+    }
+}

package/src/protection/DragAndDropProtector.ts

@@ -0,0 +1,34 @@
+export interface DragAndDropProtectionOptions {
+    onDragDetected?: (dataTransferTypes: readonly string[]) => void;
+    onDropDetected?: (dataTransferTypes: readonly string[], fileCount: number) => void;
+}
+
+export class DragAndDropProtector {
+    private dragstartHandler: (event: DragEvent) => void;
+    private dropHandler: (event: DragEvent) => void;
+
+    constructor(options: DragAndDropProtectionOptions = {}) {
+        this.dragstartHandler = (event: DragEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            options.onDragDetected?.(Array.from(event.dataTransfer?.types ?? []));
+        };
+
+        this.dropHandler = (event: DragEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const types = Array.from(event.dataTransfer?.types ?? []);
+            const fileCount = event.dataTransfer?.files.length ?? 0;
+            options.onDropDetected?.(types, fileCount);
+        };
+
+        document.addEventListener("dragstart", this.dragstartHandler, true);
+        document.addEventListener("drop", this.dropHandler, true);
+        window.addEventListener("unload", () => this.destroy());
+    }
+
+    public destroy() {
+        document.removeEventListener("dragstart", this.dragstartHandler, true);
+        document.removeEventListener("drop", this.dropHandler, true);
+    }
+}

package/src/protection/NavigatorProtector.ts

@@ -15,7 +15,7 @@ export class NavigatorProtector {
     private printProtector?: PrintProtector;
     private contextMenuProtector?: ContextMenuProtector;
 
-    private dispatchSuspiciousActivity(type: string, detail: Record<string, unknown>) {
+    protected dispatchSuspiciousActivity(type: string, detail: Record<string, unknown>) {
         const event = new CustomEvent(NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT, {
             detail: {
                 type,
@@ -55,7 +55,7 @@ export class NavigatorProtector {
                 }
             });
         }
-        
+
         // Enable iframe embedding detection if explicitly enabled in config
         if (config.checkIFrameEmbedding) {
             this.iframeEmbeddingDetector = new IframeEmbeddingDetector({
@@ -74,7 +74,7 @@ export class NavigatorProtector {
                 }
             });
         }
-        
+
         // Enable context menu protection if configured
         if (config.disableContextMenu) {
             this.contextMenuProtector = new ContextMenuProtector({

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

@@ -1,7 +1,8 @@
 import { Link, Locator, Publication } from "@readium/shared";
-import { MediaNavigator } from "../Navigator";
+import { MediaNavigator, IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator";
 import { Configurable } from "../preferences";
 import { AudioPreferences, AudioSettings, AudioPreferencesEditor, IAudioPreferences, IAudioDefaults } from "./preferences";
+import { ContextMenuEvent, KeyboardEventData, SuspiciousActivityEvent } from "@readium/navigator-html-injectables";
 export interface AudioNavigatorListeners {
     trackLoaded: (media: HTMLMediaElement) => void;
     positionChanged: (locator: Locator) => void;
@@ -13,10 +14,15 @@ export interface AudioNavigatorListeners {
     stalled: (isStalled: boolean) => void;
     seeking: (isSeeking: boolean) => void;
     seekable: (seekable: TimeRanges) => void;
+    contentProtection: (type: string, data: SuspiciousActivityEvent) => void;
+    peripheral: (data: KeyboardEventData) => void;
+    contextMenu: (data: ContextMenuEvent) => void;
 }
 export interface AudioNavigatorConfiguration {
     preferences: IAudioPreferences;
     defaults: IAudioDefaults;
+    contentProtection?: IContentProtectionConfig;
+    keyboardPeripherals?: IKeyboardPeripheralsConfig;
 }
 export declare class AudioNavigator extends MediaNavigator implements Configurable<AudioSettings, AudioPreferences> {
     private readonly pub;
@@ -29,6 +35,10 @@ export declare class AudioNavigator extends MediaNavigator implements Configurab
     private _settings;
     private _preferencesEditor;
     private pool;
+    private readonly _navigatorProtector;
+    private readonly _keyboardPeripheralsManager;
+    private readonly _suspiciousActivityListener;
+    private readonly _keyboardPeripheralListener;
     constructor(publication: Publication, listeners: AudioNavigatorListeners, initialPosition?: Locator, configuration?: AudioNavigatorConfiguration);
     get settings(): AudioSettings;
     get preferencesEditor(): AudioPreferencesEditor;

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

@@ -3,7 +3,11 @@ import { WebAudioEngine } from "./engine/WebAudioEngine";
 export declare class AudioPoolManager {
     private preloadedElements;
     private _audioEngine;
-    constructor(audioEngine: WebAudioEngine);
+    private readonly _publication;
+    private readonly _supportedAudioTypes;
+    constructor(audioEngine: WebAudioEngine, publication: Publication);
+    private detectSupportedAudioTypes;
+    private pickPlayableHref;
     get audioEngine(): WebAudioEngine;
     /**
      * Sets the current audio by href, using preloaded element if available or loading otherwise,
@@ -13,7 +17,7 @@ export declare class AudioPoolManager {
      * @param currentIndex The current track index.
      * @param direction The navigation direction ('forward' or 'backward').
      */
-    setCurrentAudio(href: string, publication: Publication, currentIndex: number, direction: 'forward' | 'backward'): void;
+    setCurrentAudio(currentIndex: number, direction: 'forward' | 'backward'): void;
     preload(href: string): void;
     /**
      * Retrieves a preloaded audio element by URL.
@@ -31,20 +35,18 @@ export declare class AudioPoolManager {
      * @param publication The publication containing the reading order.
      * @param currentIndex The current track index.
      */
-    preloadNext(publication: Publication, currentIndex: number): void;
+    preloadNext(currentIndex: number): void;
     /**
      * Preloads the previous track in the reading order.
-     * @param publication The publication containing the reading order.
      * @param currentIndex The current track index.
      */
-    preloadPrevious(publication: Publication, currentIndex: number): void;
+    preloadPrevious(currentIndex: number): void;
     /**
      * Preloads adjacent tracks (previous and next) for smoother navigation.
-     * @param publication The publication containing the reading order.
      * @param currentIndex The current track index.
      * @param direction The navigation direction ('forward' or 'backward').
      */
-    preloadAdjacent(publication: Publication, currentIndex: number, direction?: 'forward' | 'backward'): void;
+    preloadAdjacent(currentIndex: number, direction?: 'forward' | 'backward'): void;
     /**
      * Destroys the pool by stopping the engine and clearing all preloaded elements.
      */

package/types/src/audio/protection/AudioNavigatorProtector.d.ts

@@ -0,0 +1,8 @@
+import { NavigatorProtector } from "../../protection/NavigatorProtector";
+import { IContentProtectionConfig } from "../../Navigator";
+export declare class AudioNavigatorProtector extends NavigatorProtector {
+    private dragAndDropProtector?;
+    private copyProtector?;
+    constructor(config?: IContentProtectionConfig);
+    destroy(): void;
+}

package/types/src/protection/CopyProtector.d.ts

@@ -0,0 +1,8 @@
+export interface CopyProtectionOptions {
+    onCopyBlocked?: () => void;
+}
+export declare class CopyProtector {
+    private copyHandler;
+    constructor(options?: CopyProtectionOptions);
+    destroy(): void;
+}

package/types/src/protection/DragAndDropProtector.d.ts

@@ -0,0 +1,10 @@
+export interface DragAndDropProtectionOptions {
+    onDragDetected?: (dataTransferTypes: readonly string[]) => void;
+    onDropDetected?: (dataTransferTypes: readonly string[], fileCount: number) => void;
+}
+export declare class DragAndDropProtector {
+    private dragstartHandler;
+    private dropHandler;
+    constructor(options?: DragAndDropProtectionOptions);
+    destroy(): void;
+}

package/types/src/protection/NavigatorProtector.d.ts

@@ -6,7 +6,7 @@ export declare class NavigatorProtector {
     private iframeEmbeddingDetector?;
     private printProtector?;
     private contextMenuProtector?;
-    private dispatchSuspiciousActivity;
+    protected dispatchSuspiciousActivity(type: string, detail: Record<string, unknown>): void;
     constructor(config?: IContentProtectionConfig);
     destroy(): void;
 }