@readium/navigator 2.4.0-alpha.8 → 2.4.0-beta.1

package/src/audio/index.ts

@@ -1 +1,3 @@
-export * from './engine';
+export * from './engine';
+export * from './preferences';
+export * from './AudioNavigator';

package/src/audio/preferences/AudioDefaults.ts

@@ -0,0 +1,43 @@
+import { 
+  ensureBoolean,
+  ensureValueInRange,
+  ensureNonNegative
+} from "../../preferences/guards";
+import { 
+  volumeRangeConfig,
+  playbackRateRangeConfig,
+  skipIntervalRangeConfig
+} from "../../preferences/Types";
+
+export interface IAudioDefaults {
+  volume?: number | null;
+  playbackRate?: number | null;
+  preservePitch?: boolean | null;
+  skipBackwardInterval?: number | null;
+  skipForwardInterval?: number | null;
+  pollInterval?: number | null;
+  autoPlay?: boolean | null;
+  enableMediaSession?: boolean | null;
+}
+
+export class AudioDefaults {
+  public readonly volume: number;
+  public readonly playbackRate: number;
+  public readonly preservePitch: boolean;
+  public readonly skipBackwardInterval: number;
+  public readonly skipForwardInterval: number;
+  public readonly pollInterval: number;
+  public readonly autoPlay: boolean;
+  public readonly enableMediaSession: boolean;
+
+  constructor(defaults: IAudioDefaults = {}) {
+    this.volume = ensureValueInRange(defaults.volume, volumeRangeConfig.range) ?? 1;
+    this.playbackRate = ensureValueInRange(defaults.playbackRate, playbackRateRangeConfig.range) ?? 1;
+    this.preservePitch = ensureBoolean(defaults.preservePitch) ?? true;
+    this.skipBackwardInterval = ensureValueInRange(defaults.skipBackwardInterval, skipIntervalRangeConfig.range) ?? 10;
+    this.skipForwardInterval = ensureValueInRange(defaults.skipForwardInterval, skipIntervalRangeConfig.range) ?? 10;
+    this.pollInterval = ensureNonNegative(defaults.pollInterval) ?? 1000;
+    this.autoPlay = ensureBoolean(defaults.autoPlay) ?? true;
+    this.enableMediaSession = ensureBoolean(defaults.enableMediaSession) ?? true;
+  }
+}

package/src/audio/preferences/AudioPreferences.ts

@@ -0,0 +1,54 @@
+import { ConfigurablePreferences } from "../../preferences/Configurable";
+import {
+  ensureBoolean,
+  ensureValueInRange,
+  ensureNonNegative
+} from "../../preferences/guards";
+import {
+  volumeRangeConfig,
+  playbackRateRangeConfig,
+  skipIntervalRangeConfig
+} from "../../preferences/Types";
+
+export interface IAudioPreferences {
+  volume?: number | null;
+  playbackRate?: number | null;
+  preservePitch?: boolean | null;
+  skipBackwardInterval?: number | null;
+  skipForwardInterval?: number | null;
+  pollInterval?: number | null;
+  autoPlay?: boolean | null;
+  enableMediaSession?: boolean | null;
+}
+
+export class AudioPreferences implements ConfigurablePreferences<AudioPreferences> {
+  public readonly volume: number | null | undefined;
+  public readonly playbackRate: number | null | undefined;
+  public readonly preservePitch: boolean | null | undefined;
+  public readonly skipBackwardInterval: number | null | undefined;
+  public readonly skipForwardInterval: number | null | undefined;
+  public readonly pollInterval: number | null | undefined;
+  public readonly autoPlay: boolean | null | undefined;
+  public readonly enableMediaSession: boolean | null | undefined;
+
+  constructor(preferences: IAudioPreferences = {}) {
+    this.volume = ensureValueInRange(preferences.volume, volumeRangeConfig.range);
+    this.playbackRate = ensureValueInRange(preferences.playbackRate, playbackRateRangeConfig.range);
+    this.preservePitch = ensureBoolean(preferences.preservePitch);
+    this.skipBackwardInterval = ensureValueInRange(preferences.skipBackwardInterval, skipIntervalRangeConfig.range);
+    this.skipForwardInterval = ensureValueInRange(preferences.skipForwardInterval, skipIntervalRangeConfig.range);
+    this.pollInterval = ensureNonNegative(preferences.pollInterval);
+    this.autoPlay = ensureBoolean(preferences.autoPlay);
+    this.enableMediaSession = ensureBoolean(preferences.enableMediaSession);
+  }
+
+  merging(other: AudioPreferences): AudioPreferences {
+    const merged: IAudioPreferences = { ...this };
+    for (const key of Object.keys(other) as (keyof IAudioPreferences)[]) {
+      if (other[key] !== undefined) {
+        (merged as Record<string, unknown>)[key] = other[key];
+      }
+    }
+    return new AudioPreferences(merged);
+  }
+}

package/src/audio/preferences/AudioPreferencesEditor.ts

@@ -0,0 +1,123 @@
+import { IPreferencesEditor } from "../../preferences/PreferencesEditor";
+import { AudioPreferences } from "./AudioPreferences";
+import { AudioSettings } from "./AudioSettings";
+import { Preference, BooleanPreference, RangePreference } from "../../preferences/Preference";
+import { 
+  volumeRangeConfig,
+  playbackRateRangeConfig,
+  skipIntervalRangeConfig
+} from "../../preferences/Types";
+
+export class AudioPreferencesEditor implements IPreferencesEditor {
+  preferences: AudioPreferences;
+  private settings: AudioSettings;
+
+  constructor(initialPreferences: AudioPreferences, settings: AudioSettings) {
+    this.preferences = initialPreferences;
+    this.settings = settings;
+  }
+
+  clear(): void {
+    this.preferences = new AudioPreferences();
+  }
+
+  private updatePreference<K extends keyof AudioPreferences>(key: K, value: AudioPreferences[K]) {
+    this.preferences[key] = value;
+  }
+
+  get volume(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.volume,
+      effectiveValue: this.settings.volume,
+      isEffective: this.preferences.volume !== null,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("volume", newValue ?? 1);
+      },
+      supportedRange: volumeRangeConfig.range,
+      step: volumeRangeConfig.step
+    });
+  }
+
+  get playbackRate(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.playbackRate,
+      effectiveValue: this.settings.playbackRate,
+      isEffective: this.preferences.playbackRate !== null,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("playbackRate", newValue ?? 1);
+      },
+      supportedRange: playbackRateRangeConfig.range,
+      step: playbackRateRangeConfig.step
+    });
+  }
+
+  get preservePitch(): BooleanPreference {
+    return new BooleanPreference({
+      initialValue: this.preferences.preservePitch,
+      effectiveValue: this.settings.preservePitch,
+      isEffective: this.preferences.preservePitch !== null,
+      onChange: (newValue: boolean | null | undefined) => {
+        this.updatePreference("preservePitch", newValue ?? true);
+      }
+    });
+  }
+
+  get skipBackwardInterval(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.skipBackwardInterval,
+      effectiveValue: this.settings.skipBackwardInterval,
+      isEffective: this.preferences.skipBackwardInterval !== null,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("skipBackwardInterval", newValue ?? 10);
+      },
+      supportedRange: skipIntervalRangeConfig.range,
+      step: skipIntervalRangeConfig.step
+    });
+  }
+
+  get skipForwardInterval(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.skipForwardInterval,
+      effectiveValue: this.settings.skipForwardInterval,
+      isEffective: this.preferences.skipForwardInterval !== null,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("skipForwardInterval", newValue ?? 10);
+      },
+      supportedRange: skipIntervalRangeConfig.range,
+      step: skipIntervalRangeConfig.step
+    });
+  }
+
+  get pollInterval(): Preference<number> {
+    return new Preference<number>({
+      initialValue: this.preferences.pollInterval,
+      effectiveValue: this.settings.pollInterval,
+      isEffective: this.preferences.pollInterval !== null,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("pollInterval", newValue ?? 1000);
+      }
+    });
+  }
+
+  get autoPlay(): BooleanPreference {
+    return new BooleanPreference({
+      initialValue: this.preferences.autoPlay,
+      effectiveValue: this.settings.autoPlay,
+      isEffective: this.preferences.autoPlay !== null,
+      onChange: (newValue: boolean | null | undefined) => {
+        this.updatePreference("autoPlay", newValue ?? true);
+      }
+    });
+  }
+
+  get enableMediaSession(): BooleanPreference {
+    return new BooleanPreference({
+      initialValue: this.preferences.enableMediaSession,
+      effectiveValue: this.settings.enableMediaSession,
+      isEffective: this.preferences.enableMediaSession !== null,
+      onChange: (newValue: boolean | null | undefined) => {
+        this.updatePreference("enableMediaSession", newValue ?? true);
+      }
+    });
+  }
+}

package/src/audio/preferences/AudioSettings.ts

@@ -0,0 +1,36 @@
+import { AudioPreferences } from "./AudioPreferences";
+import { AudioDefaults } from "./AudioDefaults";
+import { ConfigurableSettings } from "../../preferences/Configurable";
+
+export interface IAudioSettings extends ConfigurableSettings {
+  volume: number;
+  playbackRate: number;
+  preservePitch: boolean;
+  skipBackwardInterval: number;
+  skipForwardInterval: number;
+  pollInterval: number;
+  autoPlay: boolean;
+  enableMediaSession: boolean;
+}
+
+export class AudioSettings implements IAudioSettings, ConfigurableSettings {
+  public readonly volume: number;
+  public readonly playbackRate: number;
+  public readonly preservePitch: boolean;
+  public readonly skipBackwardInterval: number;
+  public readonly skipForwardInterval: number;
+  public readonly pollInterval: number;
+  public readonly autoPlay: boolean;
+  public readonly enableMediaSession: boolean;
+
+  constructor(preferences: AudioPreferences, defaults: AudioDefaults) {
+    this.volume = preferences.volume ?? defaults.volume;
+    this.playbackRate = preferences.playbackRate ?? defaults.playbackRate;
+    this.preservePitch = preferences.preservePitch ?? defaults.preservePitch;
+    this.skipBackwardInterval = preferences.skipBackwardInterval ?? defaults.skipBackwardInterval;
+    this.skipForwardInterval = preferences.skipForwardInterval ?? defaults.skipForwardInterval;
+    this.pollInterval = preferences.pollInterval ?? defaults.pollInterval;
+    this.autoPlay = preferences.autoPlay ?? defaults.autoPlay;
+    this.enableMediaSession = preferences.enableMediaSession ?? defaults.enableMediaSession;
+  }
+}

package/src/audio/preferences/index.ts

@@ -0,0 +1,4 @@
+export * from './AudioPreferences';
+export * from './AudioDefaults';
+export * from './AudioSettings';
+export * from './AudioPreferencesEditor';

package/src/epub/EpubNavigator.ts

@@ -1,5 +1,5 @@
 import { Layout, Link, Locator, Profile, Publication, ReadingProgression } from "@readium/shared";
-import { Configurable, ConfigurablePreferences, ConfigurableSettings, LineLengths, ProgressionRange, VisualNavigator, VisualNavigatorViewport } from "../";
+import { Configurable, ConfigurableSettings, LineLengths, ProgressionRange, VisualNavigator, VisualNavigatorViewport } from "../";
 import { FramePoolManager } from "./frame/FramePoolManager";
 import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager";
 import { CommsEventKey, ContextMenuEvent, FXLModules, KeyboardEventData, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables";
@@ -64,7 +64,7 @@ const defaultListeners = (listeners: EpubNavigatorListeners): EpubNavigatorListe
     peripheral: listeners.peripheral || (() => {}),
 })
 
-export class EpubNavigator extends VisualNavigator implements Configurable<ConfigurableSettings, ConfigurablePreferences> {
+export class EpubNavigator extends VisualNavigator implements Configurable<ConfigurableSettings, EpubPreferences> {
     private readonly pub: Publication;
     private readonly container: HTMLElement;
     private readonly listeners: EpubNavigatorListeners;

package/src/epub/frame/FrameBlobBuilder.ts

@@ -1,4 +1,4 @@
-import { MediaType, Resource } from "@readium/shared";
+import { MediaType } from "@readium/shared";
 import { Link, Publication } from "@readium/shared";
 import { Injector } from "../../injection/Injector";
 
@@ -20,120 +20,73 @@ const csp = (domains: string[]) => {
     ].join("; ");
 };
 
-export default class FrameBlobBuilder {
+export default class FrameBlobBuider {
+    private readonly item: Link;
+    private readonly burl: string;
+    private readonly pub: Publication;
     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,
-        private readonly item: Link,
+        pub: Publication,
+        baseURL: string,
+        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.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;
+        if(!this.item.mediaType.isHTML) {
+            if(this.item.mediaType.isBitmap || this.item.mediaType.equals(MediaType.SVG)) {
+                return this.buildImageFrame();
             } else
-                throw Error("Unsupported frame mediatype " + link.mediaType.string);
+                throw Error("Unsupported frame mediatype " + this.item.mediaType.string);
         } else {
-            const blobUrl = await this.buildHtmlFrame(fxl);
-            this.currentUrl = blobUrl;
-            return blobUrl;
+            return await this.buildHtmlFrame(fxl);
         }
     }
 
     private async buildHtmlFrame(fxl = false): Promise<string> {
-        if(!this.currentResource) throw new Error("No resource loaded");
-
         // 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 txt = await this.pub.get(this.item).readAsString();
+        if(!txt) throw new Error(`Failed reading item ${this.item.href}`);
+        
+        const doc = new DOMParser().parseFromString(
+            txt,
+            this.item.mediaType.string as DOMParserSupportedType
+        );
+        
         const perror = doc.querySelector("parsererror");
         if (perror) {
             const details = perror.querySelector("div");
-            throw new Error(`Failed parsing item ${link.href}: ${details?.textContent || perror.textContent}`);
+            throw new Error(`Failed parsing item ${this.item.href}: ${details?.textContent || perror.textContent}`);
         }
 
         // Apply resource injections if injection service is provided
         if (this.injector) {
-            await this.injector.injectForDocument(doc, link);
+            await this.injector.injectForDocument(doc, this.item);
         }
 
-        return this.finalizeDOM(doc, this.pub.baseURL, link.toURL(this.baseURL) || "", link.mediaType, fxl, this.cssProperties);
+        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, fxl, this.cssProperties);
     }
 
-    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);
-        }
-
+    private buildImageFrame(): string {
+        // Rudimentary image display
+        const doc = document.implementation.createHTMLDocument(this.item.title || this.item.href);
         const simg = document.createElement("img");
-        simg.src = burl || "";
-        simg.alt = link.title || "";
+        simg.src = this.burl || "";
+        simg.alt = this.item.title || "";
         simg.decoding = "async";
         doc.body.appendChild(simg);
-
-        // 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);
+        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, true);
     }
 
     private setProperties(cssProperties: { [key: string]: string }, doc: Document) {
@@ -148,10 +101,7 @@ export default class FrameBlobBuilder {
 
         // 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] : []),
@@ -174,7 +124,6 @@ export default class FrameBlobBuilder {
         // 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/FramePoolManager.ts

@@ -1,6 +1,6 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
 import { Locator, Publication } from "@readium/shared";
-import FrameBlobBuilder from "./FrameBlobBuilder";
+import FrameBlobBuider 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, FrameBlobBuilder> = new Map();
+    private readonly blobs: Map<string, string> = new Map();
     private readonly inprogress: Map<string, Promise<void>> = new Map();
     private pendingUpdates: Map<string, { inPool: boolean }> = new Map();
     private currentBaseURL: string | undefined;
@@ -62,8 +62,10 @@ export class FramePoolManager {
         this.pool.clear();
 
         // Revoke all blobs
-        this.blobs.forEach(v => v.reset());
-        this.blobs.clear();
+        this.blobs.forEach(v => {
+            this.injector?.releaseBlobUrl?.(v);
+            URL.revokeObjectURL(v);
+        });
 
         // Clean up injector if it exists
         this.injector?.dispose();
@@ -104,18 +106,15 @@ 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 => v.reset());
+                this.blobs.forEach(v => {
+                    this.injector?.releaseBlobUrl?.(v);
+                    URL.revokeObjectURL(v);
+                });
                 this.blobs.clear();
             }
             this.currentBaseURL = pub.baseURL;
@@ -128,14 +127,18 @@ 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 => v.reset());
+                    this.blobs.forEach(v => {
+                        this.injector?.releaseBlobUrl?.(v);
+                        URL.revokeObjectURL(v);
+                    });
                     this.blobs.clear();
                     this.pendingUpdates.clear();
                 }
                 if(this.pendingUpdates.has(href) && this.pendingUpdates.get(href)?.inPool === false) {
-                    const v = this.blobs.get(href);
-                    if(v) {
-                        v.reset();
+                    const url = this.blobs.get(href);
+                    if(url) {
+                        this.injector?.releaseBlobUrl?.(url);
+                        URL.revokeObjectURL(url);
                         this.blobs.delete(href);
                         this.pendingUpdates.delete(href);
                     }
@@ -154,7 +157,7 @@ export class FramePoolManager {
                 const itm = pub.readingOrder.findWithHref(href);
                 if(!itm) return; // TODO throw?
                 if(!this.blobs.has(href)) {
-                    this.blobs.set(href, new FrameBlobBuilder(
+                    const blobBuilder = new FrameBlobBuider(
                         pub, 
                         this.currentBaseURL || "", 
                         itm, 
@@ -162,11 +165,13 @@ 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(await this.blobs.get(href)!.build(), this.contentProtectionConfig, this.keyboardPeripheralsConfig);
+                const fm = new FrameManager(this.blobs.get(href)!, 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/FXLFrameManager.ts

@@ -7,7 +7,6 @@ import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navi
 
 export class FXLFrameManager {
     private frame: HTMLIFrameElement;
-    private frameIsAppended = false;
     private loader: Loader | undefined;
     public source: string;
     private comms: FrameComms | undefined;
@@ -21,7 +20,6 @@ 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, 
@@ -56,13 +54,11 @@ export class FXLFrameManager {
         this.wrapper = document.createElement("div");
         this.wrapper.style.position = "relative";
         this.wrapper.style.float = this.wrapper.style.cssFloat = direction === ReadingProgression.rtl ? "right" : "left";
+
+        this.wrapper.appendChild(this.frame);
     }
 
     async load(modules: ModuleName[], source: string): Promise<Window> {
-        if(!this.frameIsAppended) {
-            this.wrapper.appendChild(this.frame);
-            this.frameIsAppended = true;
-        }
         if(this.source === source && this.loadPromise/* && this.loaded*/) {
             if([...this.currModules].sort().join("|") === [...modules].sort().join("|")) {
                 return this.loadPromise;
@@ -108,7 +104,6 @@ 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
@@ -125,10 +120,8 @@ export class FXLFrameManager {
                 else if(match[1] === "height")
                     height = Number.parseFloat(match[2]);
             }
-            if(width > 0 && height > 0) {
-                this.viewportSize = { width, height };
-                return this.viewportSize;
-            }
+            if(width > 0 && height > 0)
+                return { width, height };
         }
 
         // Otherwise get it from the size of the loaded content