@readium/navigator 2.6.1 → 2.7.0-alpha.1

package/src/epub/EpubNavigator.ts

@@ -6,6 +6,7 @@ import { CommsEventKey, ContextMenuEvent, DecorationActivatedEvent, FXLModules,
 import { Decoration, DecorationActivationEvent, DecorationObserver, DecorableNavigator, DecoratorConfig, decorationsEqual, resolveDecorationForWire, BUILTIN_DECORATION_TYPES } from "../decorations/index.ts";
 import * as path from "path-browserify";
 import { FXLFrameManager } from "./fxl/FXLFrameManager.ts";
+import { isTypedOMSupported } from "./fxl/FXLPeripherals.ts";
 import { FrameManager } from "./frame/FrameManager.ts";
 import { IEpubPreferences, EpubPreferences } from "./preferences/EpubPreferences.ts";
 import { IEpubDefaults, EpubDefaults } from "./preferences/EpubDefaults.ts";
@@ -71,6 +72,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     private readonly container: HTMLElement;
     private readonly listeners: EpubNavigatorListeners;
     private framePool!: FramePoolManager | FXLFramePoolManager;
+    private _destroyed = false;
     private positions!: Locator[];
     private currentLocation!: Locator;
     private lastLocationInView: Locator | undefined;
@@ -249,11 +251,14 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             });
         }
 
+        if (this._destroyed) return;
+
         if(this._layout === Layout.fixed) {
             this.framePool = new FXLFramePoolManager(
                 this.container,
                 this.positions,
                 this.pub,
+                this._layout,
                 this._injector,
                 this._contentProtection,
                 this._keyboardPeripherals
@@ -263,6 +268,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             }
         } else {
             await this.updateCSS(false);
+            if (this._destroyed) return;
             const cssProperties = this.compileCSSProperties(this._css);
             this.framePool = new FramePoolManager(
                 this.container,
@@ -276,9 +282,17 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
 
         if(this.currentLocation === undefined)
             this.currentLocation = this.positions[0];
+        else
+            this.currentLocation = this.completeLocator(this.currentLocation);
 
         await this.resizeHandler();
-        await this.apply();
+        if (this._destroyed) return;
+        return new Promise(async res => {
+            if (this._destroyed) return res(false);
+            await this.go(this.currentLocation, false, (s) => {
+                res(s);
+            });
+        });
     }
 
     public get settings(): Readonly<EpubSettings> {
@@ -383,7 +397,12 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         const parentEl = this.container.parentElement || document.documentElement;
 
         if (this._layout === Layout.fixed) {
-            this.container.style.width = `${ getContentWidth(parentEl) - this._settings.constraint }px`;
+            const width = getContentWidth(parentEl) - this._settings.constraint;
+            if (isTypedOMSupported()) {
+                this.container.attributeStyleMap.set("width", CSS.px(width));
+            } else {
+                this.container.style.width = `${ width }px`;
+            }
             if (!this.framePool) return;
             (this.framePool as FXLFramePoolManager).resizeHandler();
         } else {
@@ -779,6 +798,8 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     // End of Decoration
 
     public async destroy() {
+        // Flag synchronously so an in-flight load() bails before attaching frames.
+        this._destroyed = true;
         if (this._suspiciousActivityListener) {
             window.removeEventListener(NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT, this._suspiciousActivityListener);
         }
@@ -1078,7 +1099,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             return;
         }
 
-        const progression = locator?.locations?.progression;
+        const progression = locator.locations?.progression;
         const hasProgression = progression && progression > 0;
         if(hasProgression)
             done = await new Promise<boolean>((res, _) => {
@@ -1089,7 +1110,42 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         cb(done);
     }
 
+    private completeLocator(locator: Locator): Locator {
+        if(!locator.href) {
+            let fellback = false;
+            if(typeof locator.locations.position === "number") {
+                const match = this.positions.find(p => p.locations.position === locator.locations.position);
+                if (match) {
+                    locator = match.copyWithLocations(locator.locations);
+                    fellback = true;
+                }
+            }
+            if(!fellback && typeof locator.locations?.totalProgression === "number") {
+                // If locator has no href, but it does have a totalProgression,
+                // we can attempt to find the right resource from the positions list.
+                // This is here to help with conversion from OPDS locators which only
+                // require the total progression in the publication.
+                const targetProgression = locator.locations.totalProgression;
+                let closestIdx = 0;
+                let closestDist = Infinity;
+                for (let i = 0; i < this.positions.length; i++) {
+                    const pos = this.positions[i];
+                    // Use totalProgression if available, otherwise estimate from index
+                    const posProg = pos.locations.totalProgression ?? (i / this.positions.length);
+                    const dist = Math.abs(posProg - targetProgression);
+                    if (dist < closestDist) {
+                        closestDist = dist;
+                        closestIdx = i;
+                    }
+                }
+                locator = this.positions[closestIdx].copyWithLocations(locator.locations);
+            }
+        }
+        return locator;
+    }
+
     public go(locator: Locator, _: boolean, cb: (ok: boolean) => void): void {
+        locator = this.completeLocator(locator);
         const href = locator.href.split("#")[0];
         let link = this.pub.readingOrder.findWithHref(href);
         if(!link) {

package/src/epub/frame/FrameBlobBuilder.ts

@@ -1,4 +1,4 @@
-import { Link, MediaType, Publication, ReadingProgression } from "@readium/shared";
+import { Link, MediaType, Publication, ReadingProgression, Resource } from "@readium/shared";
 import { Injector } from "../../injection/Injector.ts";
 import { getScriptMode } from "../../helpers/scriptMode.ts";
 
@@ -20,73 +20,121 @@ const csp = (domains: string[]) => {
     ].join("; ");
 };
 
-export default class FrameBlobBuider {
-    private readonly item: Link;
-    private readonly burl: string;
-    private readonly pub: Publication;
+export default class FrameBlobBuilder {
     private readonly cssProperties?: { [key: string]: string };
     private readonly injector: Injector | null = null;
 
+    private currentUrl?: string;
+    private currentResource?: Resource;
+
     constructor(
-        pub: Publication,
-        baseURL: string,
-        item: Link,
+        private readonly pub: Publication,
+        private readonly baseURL: string,
+        private readonly item: Link,
         options: {
             cssProperties?: { [key: string]: string };
             injector?: Injector | null;
         }
     ) {
-        this.pub = pub;
         this.item = item;
-        this.burl = item.toURL(baseURL) || "";
         this.cssProperties = options.cssProperties;
         this.injector = options.injector ?? null;
     }
 
+    public reset() {
+        this.currentUrl && URL.revokeObjectURL(this.currentUrl);
+        this.currentUrl = undefined;
+        this.currentResource?.close();
+        this.currentResource = undefined;
+    }
+
     public async build(fxl = false): Promise<string> {
-        if(!this.item.mediaType.isHTML) {
-            if(this.item.mediaType.isBitmap || this.item.mediaType.equals(MediaType.SVG)) {
-                return this.buildImageFrame();
+        if(this.currentUrl) return this.currentUrl;
+
+        this.currentResource = this.pub.get(this.item);
+        const link = await this.currentResource.link();
+        if(!this.currentResource) {
+            // Reset has occured in the meantime
+            return "about:blank";
+        }
+        if(!link.mediaType.isHTML) {
+            if(link.mediaType.isBitmap || link.mediaType.equals(MediaType.SVG)) {
+                const blobUrl = await this.buildImageFrame();
+                this.currentUrl = blobUrl;
+                return blobUrl;
             } else
-                throw Error("Unsupported frame mediatype " + this.item.mediaType.string);
+                throw Error("Unsupported frame mediatype " + link.mediaType.string);
         } else {
-            return await this.buildHtmlFrame(fxl);
+            const blobUrl = await this.buildHtmlFrame(fxl);
+            this.currentUrl = blobUrl;
+            return blobUrl;
         }
     }
 
     private async buildHtmlFrame(fxl = false): Promise<string> {
-        // Load the HTML resource
-        const txt = await this.pub.get(this.item).readAsString();
-        if(!txt) throw new Error(`Failed reading item ${this.item.href}`);
+        if(!this.currentResource) throw new Error("No resource loaded");
 
-        const doc = new DOMParser().parseFromString(
-            txt,
-            this.item.mediaType.string as DOMParserSupportedType
-        );
+        // Load the HTML resource
+        const link = await this.currentResource.link();
+        const doc = await this.currentResource.readAsXML() as HTMLDocument;
+        if(!doc) throw new Error(`Failed reading item ${link.href}`);
 
         const perror = doc.querySelector("parsererror");
         if (perror) {
             const details = perror.querySelector("div");
-            throw new Error(`Failed parsing item ${this.item.href}: ${details?.textContent || perror.textContent}`);
+            throw new Error(`Failed parsing item ${link.href}: ${details?.textContent || perror.textContent}`);
         }
 
         // Apply resource injections if injection service is provided
         if (this.injector) {
-            await this.injector.injectForDocument(doc, this.item);
+            await this.injector.injectForDocument(doc, link);
         }
 
-        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, fxl, this.cssProperties);
+        return this.finalizeDOM(doc, this.pub.baseURL, link.toURL(this.baseURL) || "", link.mediaType, fxl, this.cssProperties);
     }
 
-    private buildImageFrame(): string {
-        // Rudimentary image display
-        const doc = document.implementation.createHTMLDocument(this.item.title || this.item.href);
+    private async buildImageFrame(): Promise<string> {
+        if(!this.currentResource) throw new Error("No resource loaded");
+        const link = await this.currentResource.link();
+        const burl = link.toURL(this.baseURL) || ""
+
+        // Rudimentary image display in an HTML doc
+        const doc = document.implementation.createHTMLDocument(link.title || link.href);
+
+        // Add viewport if available
+        if((link?.height || 0) > 0 && (link?.width || 0) > 0) {
+            const viewportMeta = doc.createElement("meta");
+            viewportMeta.name = "viewport";
+            viewportMeta.content = `width=${link.width}, height=${link.height}`;
+            viewportMeta.dataset.readium = "true";
+            doc.head.appendChild(viewportMeta);
+        }
+
         const simg = document.createElement("img");
-        simg.src = this.burl || "";
-        simg.alt = this.item.title || "";
-        simg.decoding = "async";
+        simg.src = burl || "";
+        simg.alt = link.title || "";
+        await simg.decode(); // Reduce repaints
         doc.body.appendChild(simg);
-        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, true);
+
+        // Apply resource injections if injection service is provided
+        if (this.injector) {
+            await this.injector.injectForDocument(doc, new Link({
+                // Temporary solution to address injector only expecting (X)HTML
+                // documents for injection, which we are technically providing
+                href: "readium-image-frame.xhtml",
+                type: MediaType.XHTML.string
+            }));
+        }
+
+        // Add image style
+        const sstyle = doc.createElement("style");
+        sstyle.dataset.readium = "true";
+        sstyle.textContent = `
+        html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 0; }
+        img { margin: 0; padding: 0; border: 0; }`;
+        doc.head.appendChild(sstyle);
+
+        return this.finalizeDOM(doc, this.pub.baseURL, burl, link.mediaType, true);
     }
 
     private setProperties(cssProperties: { [key: string]: string }, doc: Document) {
@@ -102,6 +150,10 @@ export default class FrameBlobBuider {
         // Get allowed domains from injector if it exists
         const allowedDomains = this.injector?.getAllowedDomains?.() || [];
 
+        // Remove query from root if present, as CSP doesn't allow them
+        root = root?.split("?")[0];
+
+
         // Always include the root domain if provided
         const domains = [...new Set([
             ...(root ? [root] : []),
@@ -124,6 +176,7 @@ export default class FrameBlobBuider {
         // loaded in parallel, greatly increasing overall speed.
         doc.body.querySelectorAll("img").forEach((img) => {
             img.setAttribute("fetchpriority", "high");
+            img.setAttribute("referrerpolicy", "origin");
         });
 
         // We need to ensure that lang is set on the root element

package/src/epub/frame/FrameManager.ts

@@ -27,7 +27,7 @@ export class FrameManager {
         this.frame.sandbox.value = "allow-same-origin allow-scripts";
         this.frame.classList.add("readium-navigator-iframe");
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -111,7 +111,7 @@ export class FrameManager {
     async hide(): Promise<void> {
         if(this.destroyed) return;
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.pointerEvents = "none";
         this.hidden = true;
@@ -143,9 +143,9 @@ export class FrameManager {
 
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
-                        this.frame.style.removeProperty("aria-hidden");
                         this.frame.style.removeProperty("opacity");
                         this.frame.style.removeProperty("pointer-events");
+                        this.frame.ariaHidden = null;
                         this.hidden = false;
 
                         if (sML.UA.WebKit) {

package/src/epub/frame/FramePoolManager.ts

@@ -1,12 +1,12 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
 import { Locator, Publication } from "@readium/shared";
-import FrameBlobBuider from "./FrameBlobBuilder.ts";
+import FrameBlobBuilder from "./FrameBlobBuilder.ts";
 import { FrameManager } from "./FrameManager.ts";
 import { Injector } from "../../injection/Injector.ts";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 
-const UPPER_BOUNDARY = 5;
-const LOWER_BOUNDARY = 3;
+const UPPER_BOUNDARY = 10;
+const LOWER_BOUNDARY = 5;
 
 export class FramePoolManager {
     private readonly container: HTMLElement;
@@ -14,13 +14,14 @@ export class FramePoolManager {
     private _currentFrame: FrameManager | undefined;
     private currentCssProperties: { [key: string]: string } | undefined;
     private readonly pool: Map<string, FrameManager> = new Map();
-    private readonly blobs: Map<string, string> = new Map();
-    private readonly inprogress: Map<string, Promise<void>> = new Map();
+    private readonly blobs: Map<string, FrameBlobBuilder> = new Map();
+    private readonly inprogress: Map<string, Promise<unknown>> = new Map();
     private pendingUpdates: Map<string, { inPool: boolean }> = new Map();
     private currentBaseURL: string | undefined;
     private readonly injector: Injector | null = null;
     private readonly contentProtectionConfig: IContentProtectionConfig;
     private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
+    private updateSequence = 0;
 
     constructor(
         container: HTMLElement,
@@ -42,7 +43,7 @@ export class FramePoolManager {
         // Wait for all in-progress loads to complete
         let iit = this.inprogress.values();
         let inp = iit.next();
-        const inprogressPromises: Promise<void>[] = [];
+        const inprogressPromises: Promise<unknown>[] = [];
         while(inp.value) {
             inprogressPromises.push(inp.value);
             inp = iit.next();
@@ -62,10 +63,8 @@ export class FramePoolManager {
         this.pool.clear();
 
         // Revoke all blobs
-        this.blobs.forEach(v => {
-            this.injector?.releaseBlobUrl?.(v);
-            URL.revokeObjectURL(v);
-        });
+        this.blobs.forEach(v => v.reset());
+        this.blobs.clear();
 
         // Clean up injector if it exists
         this.injector?.dispose();
@@ -77,6 +76,7 @@ export class FramePoolManager {
     }
 
     async update(pub: Publication, locator: Locator, modules: ModuleName[], force=false) {
+        const updateSequence = ++this.updateSequence;
         let i = this.positions.findIndex(l => l.locations.position === locator.locations.position);
         if(i < 0) throw Error(`Locator not found in position list: ${locator.locations.position} > ${this.positions.reduce<number>((acc, l) => l.locations.position || 0 > acc ? l.locations.position || 0 : acc, 0)  }`);
         const newHref = this.positions[i].href;
@@ -106,15 +106,18 @@ export class FramePoolManager {
                 this.pool.delete(href);
                 if(this.pendingUpdates.has(href))
                     this.pendingUpdates.set(href, { inPool: false });
+                // Note that we don't reset the blob here, unlike in the FXL pool.
+                // This is because FXL tends to have a ton more blobs. Maybe we'll adjust
+                // this at a later point with a much larger boundary for resets to deal
+                // with extremely long/large reflowable publications.
+                // Reflowable publication resources also tend to be much larger documents,
+                // so they're more expensive to preprocess with the FrameBlobBuilder.
             });
 
             // Check if base URL of publication has changed
             if(this.currentBaseURL !== undefined && pub.baseURL !== this.currentBaseURL) {
                 // Revoke all blobs
-                this.blobs.forEach(v => {
-                    this.injector?.releaseBlobUrl?.(v);
-                    URL.revokeObjectURL(v);
-                });
+                this.blobs.forEach(v => v.reset());
                 this.blobs.clear();
             }
             this.currentBaseURL = pub.baseURL;
@@ -127,18 +130,14 @@ export class FramePoolManager {
                     // when navigating backwards, where paginated will go the
                     // start of the resource instead of the end due to the
                     // corrupted width ColumnSnapper (injectables) gets on init
-                    this.blobs.forEach(v => {
-                        this.injector?.releaseBlobUrl?.(v);
-                        URL.revokeObjectURL(v);
-                    });
+                    this.blobs.forEach(v => v.reset());
                     this.blobs.clear();
                     this.pendingUpdates.clear();
                 }
                 if(this.pendingUpdates.has(href) && this.pendingUpdates.get(href)?.inPool === false) {
-                    const url = this.blobs.get(href);
-                    if(url) {
-                        this.injector?.releaseBlobUrl?.(url);
-                        URL.revokeObjectURL(url);
+                    const v = this.blobs.get(href);
+                    if(v) {
+                        v.reset();
                         this.blobs.delete(href);
                         this.pendingUpdates.delete(href);
                     }
@@ -157,7 +156,7 @@ export class FramePoolManager {
                 const itm = pub.readingOrder.findWithHref(href);
                 if(!itm) return; // TODO throw?
                 if(!this.blobs.has(href)) {
-                    const blobBuilder = new FrameBlobBuider(
+                    this.blobs.set(href, new FrameBlobBuilder(
                         pub,
                         this.currentBaseURL || "",
                         itm,
@@ -165,36 +164,81 @@ export class FramePoolManager {
                             cssProperties: this.currentCssProperties,
                             injector: this.injector
                         }
-                    );
-                    const blobURL = await blobBuilder.build();
-                    this.blobs.set(href, blobURL);
+                    ));
                 }
 
                 // Create <iframe>
-                const fm = new FrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig);
+                const fm = new FrameManager(await this.blobs.get(href)!.build(), this.contentProtectionConfig, this.keyboardPeripheralsConfig);
                 if(href !== newHref) await fm.hide(); // Avoid unecessary hide
                 this.container.appendChild(fm.iframe);
                 await fm.load(modules);
                 this.pool.set(href, fm);
+                return fm;
             }
+
+            // Target frame is awaited
             try {
-                await Promise.all(creation.map(href => creator(href)));
+                await Promise.all(creation.filter(href => href === newHref).map(href => creator(href)));
             } catch (error) {
                 reject(error);
+                return;
+            }
+
+            if (updateSequence !== this.updateSequence) {
+                resolve();
+                return;
             }
 
+            // Remaining frames can resolve later
+            Promise.all(creation.map(async href => {
+                const c = creator(href);
+                this.inprogress.set(href, c);
+                await c;
+                this.inprogress.delete(href);
+            }));
+
             // Update current frame
-            const newFrame = this.pool.get(newHref)!;
+            const newFrame = this.pool.get(newHref);
+            if (!newFrame) {
+                resolve();
+                return;
+            }
+
             if(newFrame?.source !== this._currentFrame?.source || force) {
                 await this._currentFrame?.hide(); // Hide current frame. It's possible it no longer even exists in the DOM at this point
-                if(newFrame) // If user is speeding through the publication, this can get destroyed
-                    await newFrame.load(modules); // In order to ensure modules match the latest configuration
+
+                // Resolve if there is a concurrent update that has started since this one began
+                if (updateSequence !== this.updateSequence) {
+                    resolve();
+                    return;
+                }
+
+                // If user is speeding through the publication, this can get destroyed
+                const currentFrame = this.pool.get(newHref);
+                if (!currentFrame) {
+                    resolve();
+                    return;
+                }
+                
+                await currentFrame.load(modules); // In order to ensure modules match the latest configuration
+
+                // Resolve if there is a concurrent update that has started since this one began
+                if (updateSequence !== this.updateSequence) {
+                    resolve();
+                    return;
+                }
+
+                // Check if it was destroyed, again
+                const latestFrame = this.pool.get(newHref);
+                if (!latestFrame) {
+                    resolve();
+                    return;
+                }
 
                 // Update progression if necessary and show the new frame
-                if(newFrame) // If user is speeding through the publication, this can get destroyed
-                    await newFrame.show(locator.locations.progression); // Show/activate new frame
+                await latestFrame.show(locator.locations.progression); // Show/activate new frame
 
-                this._currentFrame = newFrame;
+                this._currentFrame = latestFrame;
 
                 // Safari retains focus on the hidden iframe; transfer it to the new
                 // frame only if no meaningful element in the parent document owns focus.