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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.4.0-alpha.1",
+  "version": "2.4.0-alpha.2",
   "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/navigator-html-injectables": "2.3.0",
-    "@readium/shared": "2.1.5"
+    "@readium/shared": "2.1.5",
+    "@readium/navigator-html-injectables": "2.3.0"
   },
   "scripts": {
     "clean": "rimraf types dist",

package/src/epub/frame/FrameBlobBuilder.ts

@@ -39,11 +39,12 @@ export default class FrameBlobBuider {
     }
 
     public async build(fxl = false): Promise<string> {
-        if(!this.item.mediaType.isHTML) {
-            if(this.item.mediaType.isBitmap || this.item.mediaType.equals(MediaType.SVG)) {
+        const link = await this.pub.get(this.item).link();
+        if(!link.mediaType.isHTML) {
+            if(link.mediaType.isBitmap || link.mediaType.equals(MediaType.SVG)) {
                 return await this.buildImageFrame();
             } else
-                throw Error("Unsupported frame mediatype " + this.item.mediaType.string);
+                throw Error("Unsupported frame mediatype " + link.mediaType.string);
         } else {
             return await this.buildHtmlFrame(fxl);
         }
@@ -51,26 +52,28 @@ export default class FrameBlobBuider {
 
     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}`);
+        const resource = this.pub.get(this.item);
+        const link = await resource.link();
+        const txt = await resource.readAsString();
+        if(!txt) throw new Error(`Failed reading item ${link.href}`);
         
         const doc = new DOMParser().parseFromString(
             txt,
-            this.item.mediaType.string as DOMParserSupportedType
+            link.mediaType.string as DOMParserSupportedType
         );
 
         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, (await this.pub.get(this.item).link()).toURL(this.baseURL) || "", this.item.mediaType, fxl, this.cssProperties);
+        return this.finalizeDOM(doc, this.pub.baseURL, link.toURL(this.baseURL) || "", link.mediaType, fxl, this.cssProperties);
     }
 
     private async buildImageFrame(): Promise<string> {
@@ -78,7 +81,7 @@ export default class FrameBlobBuider {
         const burl = link.toURL(this.baseURL) || ""
 
         // Rudimentary image display in an HTML doc
-        const doc = document.implementation.createHTMLDocument(this.item.title || this.item.href);
+        const doc = document.implementation.createHTMLDocument(link.title || link.href);
 
         // Add viewport if available
         if((link?.height || 0) > 0 && (link?.width || 0) > 0) {
@@ -91,13 +94,18 @@ export default class FrameBlobBuider {
 
         const simg = document.createElement("img");
         simg.src = burl || "";
-        simg.alt = this.item.title || "";
+        simg.alt = link.title || "";
         simg.decoding = "async";
         doc.body.appendChild(simg);
 
         // Apply resource injections if injection service is provided
         if (this.injector) {
-            await this.injector.injectForDocument(doc, this.item);
+            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
@@ -108,7 +116,7 @@ export default class FrameBlobBuider {
         img { margin: 0; padding: 0; border: 0; }`;
         doc.head.appendChild(sstyle);
 
-        return this.finalizeDOM(doc, this.pub.baseURL, burl, this.item.mediaType, true);
+        return this.finalizeDOM(doc, this.pub.baseURL, burl, link.mediaType, true);
     }
 
     private setProperties(cssProperties: { [key: string]: string }, doc: Document) {