@readium/navigator 2.4.0-alpha.2 → 2.4.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.4.0-alpha.2",
+  "version": "2.4.0-alpha.4",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -55,8 +55,8 @@
     "typescript-plugin-css-modules": "^5.2.0",
     "user-agent-data-types": "^0.4.2",
     "vite": "^7.3.1",
-    "@readium/shared": "2.1.5",
-    "@readium/navigator-html-injectables": "2.3.0"
+    "@readium/navigator-html-injectables": "2.3.0",
+    "@readium/shared": "2.1.5"
   },
   "scripts": {
     "clean": "rimraf types dist",

package/src/epub/frame/FrameBlobBuilder.ts

@@ -1,4 +1,4 @@
-import { MediaType } from "@readium/shared";
+import { MediaType, Resource } from "@readium/shared";
 import { Link, Publication } from "@readium/shared";
 import { Injector } from "../../injection/Injector";
 
@@ -20,10 +20,13 @@ const csp = (domains: string[]) => {
     ].join("; ");
 };
 
-export default class FrameBlobBuider {
+export default class FrameBlobBuilder {
     private readonly cssProperties?: { [key: string]: string };
     private readonly injector: Injector | null = null;
 
+    private currentUrl?: string;
+    private currentResource?: Resource;
+
     constructor(
         private readonly pub: Publication,
         private readonly baseURL: string,
@@ -38,23 +41,36 @@ export default class FrameBlobBuider {
         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> {
-        const link = await this.pub.get(this.item).link();
+        if(this.currentUrl) return this.currentUrl;
+
+        this.currentResource = this.pub.get(this.item);
+        const link = await this.currentResource.link();
         if(!link.mediaType.isHTML) {
             if(link.mediaType.isBitmap || link.mediaType.equals(MediaType.SVG)) {
-                return await this.buildImageFrame();
+                const blobUrl = await this.buildImageFrame();
+                this.currentUrl = blobUrl;
+                return blobUrl;
             } else
                 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 resource = this.pub.get(this.item);
-        const link = await resource.link();
-        const txt = await resource.readAsString();
+        const link = await this.currentResource!.link();
+        const txt = await this.currentResource!.readAsString();
         if(!txt) throw new Error(`Failed reading item ${link.href}`);
         
         const doc = new DOMParser().parseFromString(
@@ -77,7 +93,7 @@ export default class FrameBlobBuider {
     }
 
     private async buildImageFrame(): Promise<string> {
-        const link = await this.pub.get(this.item).link();
+        const link = await this.currentResource!.link();
         const burl = link.toURL(this.baseURL) || ""
 
         // Rudimentary image display in an HTML doc

package/src/epub/frame/FramePoolManager.ts

@@ -1,6 +1,6 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
 import { Locator, Publication } from "@readium/shared";
-import FrameBlobBuider from "./FrameBlobBuilder";
+import FrameBlobBuilder from "./FrameBlobBuilder";
 import { FrameManager } from "./FrameManager";
 import { Injector } from "../../injection/Injector";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator";
@@ -14,7 +14,7 @@ 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 blobs: Map<string, FrameBlobBuilder> = new Map();
     private readonly inprogress: Map<string, Promise<void>> = new Map();
     private pendingUpdates: Map<string, { inPool: boolean }> = new Map();
     private currentBaseURL: string | undefined;
@@ -62,10 +62,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();
@@ -106,15 +104,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 +128,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 +154,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,13 +162,11 @@ 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);

package/src/epub/fxl/FXLFramePoolManager.ts

@@ -1,7 +1,7 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
 import { Locator, Publication, ReadingProgression, Page, Link } from "@readium/shared";
 import { FrameCommsListener } from "../frame";
-import FrameBlobBuider from "../frame/FrameBlobBuilder";
+import FrameBlobBuilder from "../frame/FrameBlobBuilder";
 import { FXLFrameManager } from "./FXLFrameManager";
 import { FXLPeripherals } from "./FXLPeripherals";
 import { FXLSpreader, Orientation, Spread } from "./FXLSpreader";
@@ -21,7 +21,7 @@ export class FXLFramePoolManager {
     private readonly container: HTMLElement;
     private readonly positions: Locator[];
     private readonly pool: Map<string, FXLFrameManager> = new Map();
-    private readonly blobs: Map<string, string> = new Map();
+    private readonly blobs: Map<string, FrameBlobBuilder> = new Map();
     private readonly inprogress: Map<string, Promise<void>> = new Map();
     private readonly delayedShow: Map<string, Promise<void>> = new Map();
     private readonly delayedTimeout: Map<string, number> = new Map();
@@ -405,7 +405,8 @@ export class FXLFramePoolManager {
         this.pool.clear();
 
         // Revoke all blobs
-        this.blobs.forEach(v => URL.revokeObjectURL(v));
+        this.blobs.forEach(v => v.reset());
+        this.blobs.clear();
 
         // Clean up injector if it exists
         this.injector?.dispose();
@@ -496,13 +497,13 @@ export class FXLFramePoolManager {
                 if(!this.pool.has(href)) return;
                 this.cancelShowing(href);
                 await this.pool.get(href)?.unload();
-                // this.pool.delete(href);
+                this.blobs.get(href)?.reset();
             });
 
             // Check if base URL of publication has changed
             if(this.currentBaseURL !== undefined && pub.baseURL !== this.currentBaseURL) {
                 // Revoke all blobs
-                this.blobs.forEach(v => URL.revokeObjectURL(v));
+                this.blobs.forEach(v => v.reset());
                 this.blobs.clear();
             }
             this.currentBaseURL = pub.baseURL;
@@ -512,16 +513,14 @@ export class FXLFramePoolManager {
                 const itm = pub.readingOrder.items[index];
                 if(!itm) return; // TODO throw?
                 if(!this.blobs.has(href)) {
-                    const blobBuilder = new FrameBlobBuider(
+                    this.blobs.set(href, new FrameBlobBuilder(
                         pub, 
                         this.currentBaseURL || "", 
                         itm,
                         {
                             injector: this.injector
                         }
-                    );
-                    const blobURL = await blobBuilder.build(true);
-                    this.blobs.set(href, blobURL);
+                    ));
                 }
 
                 // Show future offscreen frame in advance after a delay
@@ -535,7 +534,7 @@ export class FXLFramePoolManager {
                             const spread = this.makeSpread(this.reAlign(index));
                             const page = this.spreadPosition(spread, itm);
                             const fm = this.pool.get(href)!;
-                            await fm.load(modules, this.blobs.get(href)!);
+                            await fm.load(modules, await this.blobs.get(href)!.build(true));
                             if(!this.peripherals.isScaled) // When scaled, positioning is screwed up, so wait to show
                                 await fm.show(page); // Show/activate new frame
                             this.delayedShow.delete(href);
@@ -559,10 +558,10 @@ export class FXLFramePoolManager {
             for (const s of spread) {
                 const newFrame = this.pool.get(s.href)!;
                 const source = this.blobs.get(s.href);
-                if(!source) continue; // This can get destroyed
+                if(!source) continue; // Thfis can get destroyed
 
                 this.cancelShowing(s.href);
-                await newFrame.load(modules, source); // In order to ensure modules match the latest configuration
+                await newFrame.load(modules, await source.build(true)); // In order to ensure modules match the latest configuration
                 await newFrame.show(this.spreadPosition(spread, s)); // Show/activate new frame
                 this.previousFrames.push(newFrame);
                 await newFrame.activate();

package/src/injection/Injector.ts

@@ -155,7 +155,7 @@ export class Injector implements IInjector {
         return [...this.allowedDomains]; // Return a copy to prevent external modification
     }
 
-    public async injectForDocument(doc: Document, link: Link): Promise<void> {        
+    public async injectForDocument(doc: Document, link: Link): Promise<void> {
         for (const rule of this.rules) {
             if (this.matchesRule(rule, link)) {
                 await this.applyRule(doc, rule);
@@ -178,7 +178,7 @@ export class Injector implements IInjector {
     private async getOrCreateBlobUrl(resource: IInjectable): Promise<string> {
         // Use the injectable ID as the cache key
         const cacheKey = resource.id!; // ID is guaranteed to exist after constructor
-        
+
         if (this.blobStore.has(cacheKey)) {
             const entry = this.blobStore.get(cacheKey)!;
             entry.refCount++;
@@ -191,7 +191,7 @@ export class Injector implements IInjector {
             this.createdBlobUrls.add(url);
             return url;
         }
-        
+
         throw new Error("Resource must have a blob property");
     }
 
@@ -304,13 +304,13 @@ export class Injector implements IInjector {
         let url: string | null = null;
         try {
             url = await this.getResourceUrl(resource, doc);
-            
+
             if (resource.rel === "preload" && "url" in resource) {
                 this.createPreloadLink(doc, resource, url);
             } else {
                 const element = this.createElement(doc, resource, url);
                 createdElements.push({ element, url });
-                
+
                 if (position === "prepend") {
                     target.prepend(element);
                 } else {

package/types/src/epub/frame/FrameBlobBuilder.d.ts

@@ -1,17 +1,20 @@
 import { Link, Publication } from "@readium/shared";
 import { Injector } from "../../injection/Injector";
-export default class FrameBlobBuider {
+export default class FrameBlobBuilder {
     private readonly pub;
     private readonly baseURL;
     private readonly item;
     private readonly cssProperties?;
     private readonly injector;
+    private currentUrl?;
+    private currentResource?;
     constructor(pub: Publication, baseURL: string, item: Link, options: {
         cssProperties?: {
             [key: string]: string;
         };
         injector?: Injector | null;
     });
+    reset(): void;
     build(fxl?: boolean): Promise<string>;
     private buildHtmlFrame;
     private buildImageFrame;