@readium/navigator 2.4.0-alpha.6 → 2.4.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.4.0-alpha.6",
+  "version": "2.4.0-alpha.8",
   "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

@@ -76,14 +76,8 @@ export default class FrameBlobBuilder {
 
         // Load the HTML resource
         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(
-            txt,
-            link.mediaType.string as DOMParserSupportedType
-        );
-
+        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");

package/src/epub/fxl/FXLFrameManager.ts

@@ -21,6 +21,7 @@ export class FXLFrameManager {
     public debugHref: string;
     private loadPromise: Promise<Window> | undefined;
     private showPromise: Promise<void> | undefined;
+    private viewportSize: { width: number, height: number } | undefined = undefined;
 
     constructor(
         peripherals: FXLPeripherals, 
@@ -107,6 +108,7 @@ export class FXLFrameManager {
 
     // Parses the page size from the viewport meta tag of the loaded resource.
     loadPageSize(): { width: number, height: number } {
+        if(this.viewportSize) return this.viewportSize;
         const wnd = this.frame.contentWindow!;
 
         // Try to get the page size from the viewport meta tag
@@ -123,8 +125,10 @@ export class FXLFrameManager {
                 else if(match[1] === "height")
                     height = Number.parseFloat(match[2]);
             }
-            if(width > 0 && height > 0)
-                return { width, height };
+            if(width > 0 && height > 0) {
+                this.viewportSize = { width, height };
+                return this.viewportSize;
+            }
         }
 
         // Otherwise get it from the size of the loaded content

package/src/epub/fxl/FXLFramePoolManager.ts

@@ -91,7 +91,6 @@ export class FXLFramePoolManager {
             // Create <iframe>
             const fm = new FXLFrameManager(this.peripherals, this.pub.metadata.effectiveReadingProgression, link.href, this.contentProtectionConfig, this.keyboardPeripheralsConfig);
 
-            // this.pages.push(fm);
             this.pool.set(link.href, fm);
             fm.width = 100 / this.length * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
             fm.height = this.height;
@@ -137,15 +136,18 @@ export class FXLFramePoolManager {
 
         clearTimeout(this.resizeTimeout);
         this.resizeTimeout = window.setTimeout(() => {
-            // TODO optimize this expensive set of loops and operations 
+            const baseWidthFactor = 100 / this.length;
+            const itemLookup = new Map(this.pub.readingOrder.items.map(item => [item.href, item]));
             this.pool.forEach((frm, linkHref) => {
-                let i = this.pub.readingOrder.items.findIndex(l => l.href === linkHref);
-                const link = this.pub.readingOrder.items[i];
-                frm.width = 100 / this.length * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
-                frm.height = this.height;
-                if(!frm.loaded) return;
-                const spread = this.spreader.findByLink(link)!;
-                frm.update(this.spreadPosition(spread, link));
+                const link = itemLookup.get(linkHref);
+                if(!link) return;
+                requestAnimationFrame(() => {
+                    frm.width = baseWidthFactor * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
+                    frm.height = this.height;
+                    if(!frm.loaded) return;
+                    const spread = this.spreader.findByLink(link)!;
+                    frm.update(this.spreadPosition(spread, link));
+                });
             });
         }, RESIZE_UPDATE_TIMEOUT);
     }

package/types/src/epub/fxl/FXLFrameManager.d.ts

@@ -17,6 +17,7 @@ export declare class FXLFrameManager {
     debugHref: string;
     private loadPromise;
     private showPromise;
+    private viewportSize;
     constructor(peripherals: FXLPeripherals, direction: ReadingProgression, debugHref: string, contentProtectionConfig?: IContentProtectionConfig, keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig);
     load(modules: ModuleName[], source: string): Promise<Window>;
     loadPageSize(): {