@readium/navigator 2.11.0 → 2.11.1

package/dist/epub/frame/FrameComms.js

@@ -1 +1 @@
-import{mid as n,COMMS_VERSION as a}from"@readium/navigator-html-injectables";const d=1e4;class f{constructor(t,e){this.registry=new Map,this._ready=!1,this.listenerBuffer=[],this.handler=this.handle.bind(this),this.wnd=t,this.origin=e;try{this.channelId=window.crypto.randomUUID()}catch{this.channelId=n()}this.gc=setInterval(()=>{this.registry.forEach((i,r)=>{performance.now()-i.time>d&&(console.warn(r,"event for",i.key,"was never handled!"),this.registry.delete(r))})},5e3),window.addEventListener("message",this.handler),this.send("_ping",void 0)}set listener(t){this.listenerBuffer.length>0&&this.listenerBuffer.forEach(e=>t(e[0],e[1])),this.listenerBuffer=[],this._listener=t}clearListener(){typeof this._listener=="function"&&(this._listener=void 0)}halt(){this._ready=!1,window.removeEventListener("message",this.handler),clearInterval(this.gc),this._listener=void 0,this.registry.clear()}resume(){window.addEventListener("message",this.handler),this._ready=!0}handle(t){const e=t.data;if(!e._readium){console.warn("Ignoring",e);return}if(e._channel===this.channelId)switch(e.key){case"_ack":{if(!e.id)return;const i=this.registry.get(e.id);if(!i)return;this.registry.delete(e.id),i.cb(!!e.data);return}case"_pong":this._ready=!0;default:{if(!this.ready)return;typeof this._listener=="function"?this._listener(e.key,e.data):this.listenerBuffer.push([e.key,e.data])}}}get ready(){return this._ready}send(t,e,i,r=!1,h=[]){const s=n();return i&&this.registry.set(s,{cb:i,time:performance.now(),key:t}),this.wnd.postMessage({_readium:a,_channel:this.channelId,id:s,data:e,key:t,strict:r},"/",h),s}}export{f as FrameComms};
+import{mid as n,COMMS_VERSION as d}from"@readium/navigator-html-injectables";const a=1e4,l=5e3;class v{constructor(e,i){this.registry=new Map,this._ready=!1,this.listenerBuffer=[],this.visibleTime=0,this.visibleSince=document.hidden?void 0:performance.now(),this.visibilityHandler=this.handleVisibility.bind(this),this.handler=this.handle.bind(this),this.wnd=e,this.origin=i;try{this.channelId=window.crypto.randomUUID()}catch{this.channelId=n()}this.startGc(),window.addEventListener("message",this.handler),this.send("_ping",void 0)}set listener(e){this.listenerBuffer.length>0&&this.listenerBuffer.forEach(i=>e(i[0],i[1])),this.listenerBuffer=[],this._listener=e}clearListener(){typeof this._listener=="function"&&(this._listener=void 0)}startGc(){this.gc===void 0&&(this.handleVisibility(),document.addEventListener("visibilitychange",this.visibilityHandler),this.gc=setInterval(()=>{const e=this.visibleNow();this.registry.forEach((i,t)=>{e-i.time>a&&(console.warn(t,"event for",i.key,"was never handled!"),this.registry.delete(t))})},l))}stopGc(){this.visibleTime=this.visibleNow(),this.visibleSince=void 0,document.removeEventListener("visibilitychange",this.visibilityHandler),clearInterval(this.gc),this.gc=void 0}visibleNow(){return this.visibleTime+(this.visibleSince===void 0?0:performance.now()-this.visibleSince)}handleVisibility(){document.hidden?(this.visibleTime=this.visibleNow(),this.visibleSince=void 0):this.visibleSince===void 0&&(this.visibleSince=performance.now())}halt(){this._ready=!1,window.removeEventListener("message",this.handler),this.stopGc(),this._listener=void 0,this.registry.clear()}resume(){window.addEventListener("message",this.handler),this.startGc(),this._ready=!0}handle(e){const i=e.data;if(!i._readium){console.warn("Ignoring",i);return}if(i._channel===this.channelId)switch(i.key){case"_ack":{if(!i.id)return;const t=this.registry.get(i.id);if(!t)return;this.registry.delete(i.id),t.cb(!!i.data);return}case"_pong":this._ready=!0;default:{if(!this.ready)return;typeof this._listener=="function"?this._listener(i.key,i.data):this.listenerBuffer.push([i.key,i.data])}}}get ready(){return this._ready}send(e,i,t,r=!1,h=[]){const s=n();return t&&this.registry.set(s,{cb:t,time:this.visibleNow(),key:e}),this.wnd.postMessage({_readium:d,_channel:this.channelId,id:s,data:i,key:e,strict:r},"/",h),s}}export{v as FrameComms};

package/dist/epub/frame/FrameManager.js

@@ -1 +1 @@
-import{Loader as o}from"@readium/navigator-html-injectables";import{FrameComms as n}from"./FrameComms.js";import{sML as h}from"@readium/helpers";import{KeyboardConditionBridge as a}from"../../peripherals/KeyboardConditionBridge.js";class y{constructor(t,i={},s=[],e=[],r=[]){this.timelineFragmentIds=e,this.hidden=!0,this.destroyed=!1,this.pendingUnwatchSelectors=[],this.currModules=[],this.frame=document.createElement("iframe"),this.frame.sandbox.value="allow-same-origin allow-scripts",this.frame.classList.add("readium-navigator-iframe"),this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.opacity="0",this.frame.style.position="absolute",this.frame.style.pointerEvents="none",this.frame.style.transition="visibility 0s, opacity 0.1s linear",this.source=t,this.contentProtectionConfig={...i},this.keyboardPeripheralsConfig=[...s],this.resizeWatchSelectors=[...r]}async load(t){return new Promise((i,s)=>{if(this.loader){const e=this.frame.contentWindow;if([...this.currModules].sort().join("|")===[...t].sort().join("|")){try{i(e)}catch{}return}this.comms?.halt(),this.loader.destroy(),this.loader=new o(e,t),this.currModules=t,this.comms=void 0;try{i(e)}catch{}return}this.frame.onload=()=>{const e=this.frame.contentWindow;this.loader=new o(e,t),this.currModules=t;try{i(e)}catch{}},this.frame.onerror=e=>{try{s(e)}catch{}},this.frame.contentWindow.location.replace(this.source)})}applyContentProtection(){this.comms||this.comms.resume(),this.comms.send("peripherals_protection",this.contentProtectionConfig),this.keyboardPeripheralsConfig&&this.keyboardPeripheralsConfig.length>0&&(this.conditionBridge?.destroy(),this.conditionBridge=new a(this.keyboardPeripheralsConfig,t=>{t.length>0&&this.comms.send("keyboard_peripherals",t)}),this.conditionBridge.setup()),this.contentProtectionConfig.monitorScrollingExperimental&&this.comms.send("scroll_protection",{}),this.contentProtectionConfig.protectPrinting?.disable&&this.comms.send("print_protection",this.contentProtectionConfig.protectPrinting),this.resizeWatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"watch",selector:t})}),this.pendingUnwatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"unwatch",selector:t})}),this.pendingUnwatchSelectors=[]}addResizeTarget(t){this.resizeWatchSelectors.includes(t)||this.resizeWatchSelectors.push(t),this.pendingUnwatchSelectors=this.pendingUnwatchSelectors.filter(i=>i!==t),this.comms?.ready&&this.comms.send("decoration_resize",{action:"watch",selector:t})}removeResizeTarget(t){this.resizeWatchSelectors=this.resizeWatchSelectors.filter(i=>i!==t),this.comms?.ready?this.comms.send("decoration_resize",{action:"unwatch",selector:t}):this.pendingUnwatchSelectors.includes(t)||this.pendingUnwatchSelectors.push(t)}async destroy(){this.conditionBridge?.destroy(),await this.hide(),this.loader?.destroy(),this.frame.remove(),this.destroyed=!0}async hide(){if(!this.destroyed){if(this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.opacity="0",this.frame.style.pointerEvents="none",this.hidden=!0,this.frame.blur(),this.frame.parentElement)return this.comms===void 0||!this.comms.ready?void 0:new Promise((t,i)=>{this.comms?.send("unfocus",void 0,s=>{this.comms?.halt(),t()})});this.comms?.halt()}}async show(t){if(this.destroyed)throw Error("Trying to show frame when it doesn't exist");if(!this.frame.parentElement)throw Error("Trying to show frame that is not attached to the DOM");return this.comms?this.comms.resume():this.comms=new n(this.frame.contentWindow,this.source),new Promise((i,s)=>{this.comms?.send("activate",void 0,()=>{this.comms?.send("focus",void 0,()=>{this.applyContentProtection(),this.timelineFragmentIds.length>0&&this.comms?.send("timeline_entries",this.timelineFragmentIds);const e=()=>{this.frame.style.removeProperty("visibility"),this.frame.style.removeProperty("opacity"),this.frame.style.removeProperty("pointer-events"),this.frame.ariaHidden=null,this.hidden=!1,h.UA.WebKit&&this.comms?.send("force_webkit_recalc",void 0),i()};t!==void 0?this.comms?.send("go_progression",t,e):e()})})})}setCSSProperties(t){this.destroyed||!this.frame.contentWindow||(this.hidden&&!this.comms&&(this.comms=new n(this.frame.contentWindow,this.source),this.comms.halt()),this.comms?.send("update_properties",t))}get iframe(){if(this.destroyed)throw Error("Trying to use frame when it doesn't exist");return this.frame}get realSize(){if(this.destroyed)throw Error("Trying to use frame client rect when it doesn't exist");return this.frame.getBoundingClientRect()}get isDestroyed(){return this.destroyed}get window(){if(this.destroyed||!this.frame.contentWindow)throw Error("Trying to use frame window when it doesn't exist");return this.frame.contentWindow}get atLeft(){return this.window.scrollX<5}get atRight(){return this.window.scrollX>this.window.document.scrollingElement.scrollWidth-this.window.innerWidth-5}get msg(){return this.comms}get ldr(){return this.loader}}export{y as FrameManager};
+import{Loader as o}from"@readium/navigator-html-injectables";import{FrameComms as n}from"./FrameComms.js";import{sML as h}from"@readium/helpers";import{KeyboardConditionBridge as a}from"../../peripherals/KeyboardConditionBridge.js";import{createSerializer as c}from"../../helpers/serialize.js";class u{constructor(t,i={},s=[],e=[],r=[]){this.timelineFragmentIds=e,this.hidden=!0,this.destroyed=!1,this.pendingUnwatchSelectors=[],this.currModules=[],this.serialize=c(),this.frame=document.createElement("iframe"),this.frame.sandbox.value="allow-same-origin allow-scripts",this.frame.classList.add("readium-navigator-iframe"),this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.opacity="0",this.frame.style.position="absolute",this.frame.style.pointerEvents="none",this.frame.style.transition="visibility 0s, opacity 0.1s linear",this.source=t,this.contentProtectionConfig={...i},this.keyboardPeripheralsConfig=[...s],this.resizeWatchSelectors=[...r]}async load(t){return this.serialize(()=>new Promise((i,s)=>{if(this.loader){const e=this.frame.contentWindow;if([...this.currModules].sort().join("|")===[...t].sort().join("|")){try{i(e)}catch{}return}this.comms?.halt(),this.loader.destroy(),this.loader=new o(e,t),this.currModules=t,this.comms=void 0;try{i(e)}catch{}return}this.frame.onload=()=>{const e=this.frame.contentWindow;this.loader=new o(e,t),this.currModules=t;try{i(e)}catch{}},this.frame.onerror=e=>{try{s(e)}catch{}},this.frame.contentWindow.location.replace(this.source)}))}applyContentProtection(){this.comms||this.comms.resume(),this.comms.send("peripherals_protection",this.contentProtectionConfig),this.keyboardPeripheralsConfig&&this.keyboardPeripheralsConfig.length>0&&(this.conditionBridge?.destroy(),this.conditionBridge=new a(this.keyboardPeripheralsConfig,t=>{t.length>0&&this.comms.send("keyboard_peripherals",t)}),this.conditionBridge.setup()),this.contentProtectionConfig.monitorScrollingExperimental&&this.comms.send("scroll_protection",{}),this.contentProtectionConfig.protectPrinting?.disable&&this.comms.send("print_protection",this.contentProtectionConfig.protectPrinting),this.resizeWatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"watch",selector:t})}),this.pendingUnwatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"unwatch",selector:t})}),this.pendingUnwatchSelectors=[]}addResizeTarget(t){this.resizeWatchSelectors.includes(t)||this.resizeWatchSelectors.push(t),this.pendingUnwatchSelectors=this.pendingUnwatchSelectors.filter(i=>i!==t),this.comms?.ready&&this.comms.send("decoration_resize",{action:"watch",selector:t})}removeResizeTarget(t){this.resizeWatchSelectors=this.resizeWatchSelectors.filter(i=>i!==t),this.comms?.ready?this.comms.send("decoration_resize",{action:"unwatch",selector:t}):this.pendingUnwatchSelectors.includes(t)||this.pendingUnwatchSelectors.push(t)}async destroy(){return this.serialize(async()=>{this.conditionBridge?.destroy(),await this.hideNow(),this.loader?.destroy(),this.frame.remove(),this.destroyed=!0})}async hide(){return this.serialize(()=>this.hideNow())}async hideNow(){if(!this.destroyed){if(this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.opacity="0",this.frame.style.pointerEvents="none",this.hidden=!0,this.frame.blur(),this.frame.parentElement)return this.comms===void 0||!this.comms.ready?void 0:new Promise((t,i)=>{this.comms?.send("unfocus",void 0,s=>{this.comms?.halt(),t()})});this.comms?.halt()}}async show(t){return this.serialize(()=>this.showNow(t))}async showNow(t){if(this.destroyed)throw Error("Trying to show frame when it doesn't exist");if(!this.frame.parentElement)throw Error("Trying to show frame that is not attached to the DOM");return this.comms?this.comms.resume():this.comms=new n(this.frame.contentWindow,this.source),new Promise((i,s)=>{this.comms?.send("activate",void 0,()=>{this.comms?.send("focus",void 0,()=>{this.applyContentProtection(),this.timelineFragmentIds.length>0&&this.comms?.send("timeline_entries",this.timelineFragmentIds);const e=()=>{this.frame.style.removeProperty("visibility"),this.frame.style.removeProperty("opacity"),this.frame.style.removeProperty("pointer-events"),this.frame.ariaHidden=null,this.hidden=!1,h.UA.WebKit&&this.comms?.send("force_webkit_recalc",void 0),i()};t!==void 0?this.comms?.send("go_progression",t,e):e()})})})}setCSSProperties(t){this.destroyed||!this.frame.contentWindow||(this.hidden&&!this.comms&&(this.comms=new n(this.frame.contentWindow,this.source),this.comms.halt()),this.comms?.send("update_properties",t))}get iframe(){if(this.destroyed)throw Error("Trying to use frame when it doesn't exist");return this.frame}get realSize(){if(this.destroyed)throw Error("Trying to use frame client rect when it doesn't exist");return this.frame.getBoundingClientRect()}get isDestroyed(){return this.destroyed}get window(){if(this.destroyed||!this.frame.contentWindow)throw Error("Trying to use frame window when it doesn't exist");return this.frame.contentWindow}get atLeft(){return this.window.scrollX<5}get atRight(){return this.window.scrollX>this.window.document.scrollingElement.scrollWidth-this.window.innerWidth-5}get msg(){return this.comms}get ldr(){return this.loader}}export{u as FrameManager};

package/dist/epub/fxl/FXLFrameManager.js

@@ -1 +1 @@
-import{Loader as a}from"@readium/navigator-html-injectables";import{ReadingProgression as d,Page as h}from"@readium/shared";import{FrameComms as c}from"../frame/FrameComms.js";import{isTypedOMSupported as n}from"./FXLPeripherals.js";import{KeyboardConditionBridge as l}from"../../peripherals/KeyboardConditionBridge.js";class g{constructor(t,e,s,r={},i=[],o=[]){this.frameIsAppended=!1,this.pendingUnwatchSelectors=[],this.currModules=[],this.viewportSize=void 0,this.cachedPage=void 0,this.peripherals=t,this.debugHref=s,this.contentProtectionConfig={...r},this.keyboardPeripheralsConfig=[...i],this.resizeWatchSelectors=[...o],this.frame=document.createElement("iframe"),this.frame.sandbox.value="allow-same-origin allow-scripts",this.frame.classList.add("readium-navigator-iframe"),this.frame.classList.add("blank"),this.frame.scrolling="no",this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.display="none",this.frame.style.position="absolute",this.frame.style.pointerEvents="none",this.frame.style.transformOrigin="0 0",this.frame.style.transform="scale(1)",this.frame.style.background="#fff",this.frame.style.touchAction="none",this.frame.dataset.originalHref=s,this.source="about:blank",this.wrapper=document.createElement("div"),this.wrapper.style.position="relative",this.wrapper.style.contain="strict",this.wrapper.style.float=this.wrapper.style.cssFloat=e===d.rtl?"right":"left"}async load(t,e){return this.frameIsAppended||(this.wrapper.appendChild(this.frame),this.frameIsAppended=!0),this.source===e&&this.loadPromise&&[...this.currModules].sort().join("|")===[...t].sort().join("|")?this.loadPromise:(this.loaded&&this.source!==e&&this.window.stop(),this.source=e,this.loadPromise=new Promise((s,r)=>{if(this.loader&&this.loaded){const i=this.frame.contentWindow;if([...this.currModules].sort().join("|")===[...t].sort().join("|")){try{s(i),this.loadPromise=void 0}catch{}return}this.comms?.halt(),this.loader.destroy(),this.loader=new a(i,t),this.currModules=t,this.comms=void 0;try{s(i),this.loadPromise=void 0}catch{}return}this.frame.addEventListener("load",()=>{const i=this.frame.contentWindow;this.loader=new a(i,t),this.currModules=t,this.peripherals.observe(this.wrapper),this.peripherals.observe(i);try{s(i)}catch{}},{once:!0}),this.frame.addEventListener("error",i=>{try{r(i.error),this.loadPromise=void 0}catch{}},{once:!0}),this.frame.style.removeProperty("display"),this.frame.contentWindow.location.replace(this.source)}),this.loadPromise)}loadPageSize(){if(this.viewportSize)return this.viewportSize;const t=this.frame.contentWindow,e=t.document.head.querySelector("meta[name=viewport]");if(e){const s=/(\w+) *= *([^\s,]+)/g;let r,i=0,o=0;for(;r=s.exec(e.content);)r[1]==="width"?i=Number.parseFloat(r[2]):r[1]==="height"&&(o=Number.parseFloat(r[2]));if(i>0&&o>0)return this.viewportSize={width:i,height:o},this.viewportSize}return{width:t.document.body.scrollWidth,height:t.document.body.scrollHeight}}update(t){if(!this.loaded)return;const e=this.loadPageSize(),s=Math.min(this.wrapper.clientWidth/e.width,this.wrapper.clientHeight/e.height);n()?(this.frame.attributeStyleMap.set("width",CSS.px(e.width)),this.frame.attributeStyleMap.set("height",CSS.px(e.height)),this.frame.attributeStyleMap.set("transform",new CSSTransformValue([new CSSScale(s,s)]))):(this.frame.style.height=`${e.height}px`,this.frame.style.width=`${e.width}px`,this.frame.style.transform=`scale(${s})`);const r=this.frame.getBoundingClientRect(),i=this.wrapper.clientHeight-r.height;if(n())if(this.frame.attributeStyleMap.set("top",CSS.px(i/2)),t===h.left){const o=this.wrapper.clientWidth-r.width;this.frame.attributeStyleMap.set("left",CSS.px(o))}else if(t===h.center){const o=this.wrapper.clientWidth-r.width;this.frame.attributeStyleMap.set("left",CSS.px(o/2))}else this.frame.attributeStyleMap.set("left",CSS.px(0));else if(this.frame.style.top=`${i/2}px`,t===h.left){const o=this.wrapper.clientWidth-r.width;this.frame.style.left=`${o}px`}else if(t===h.center){const o=this.wrapper.clientWidth-r.width;this.frame.style.left=`${o/2}px`}else this.frame.style.left="0px";this.frame.style.removeProperty("visibility"),this.frame.ariaHidden=null,this.frame.style.removeProperty("pointer-events"),this.frame.classList.remove("blank"),this.frame.classList.add("loaded")}async destroy(){this.conditionBridge?.destroy(),await this.unfocus(),this.loader?.destroy(),this.wrapper.remove()}async unload(){if(this.loaded)return this.deselect(),this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.pointerEvents="none",this.frame.classList.add("blank"),this.frame.classList.remove("loaded"),this.comms?.halt(),this.loader?.destroy(),this.comms=void 0,this.frame.blur(),new Promise((t,e)=>{this.frame.addEventListener("load",()=>{try{this.showPromise=void 0,t()}catch{}},{once:!0}),this.frame.addEventListener("error",s=>{try{this.showPromise=void 0,e(s.error)}catch{}},{once:!0}),this.source="about:blank",this.frame.contentWindow.location.replace("about:blank"),this.frame.style.display="none",this.frame.style.width="0px",this.frame.style.height="0px"})}deselect(){this.frame.contentWindow?.getSelection()?.removeAllRanges()}async unfocus(){if(this.frame.parentElement)return this.comms===void 0?void 0:(this.frame.blur(),new Promise((t,e)=>{this.comms?.send("unfocus",void 0,s=>{this.comms?.halt(),this.showPromise=void 0,t()})}));this.comms?.halt()}applyContentProtection(){this.comms||this.comms.resume(),this.comms.send("peripherals_protection",this.contentProtectionConfig),this.keyboardPeripheralsConfig&&this.keyboardPeripheralsConfig.length>0&&(this.conditionBridge?.destroy(),this.conditionBridge=new l(this.keyboardPeripheralsConfig,t=>{t.length>0&&this.comms.send("keyboard_peripherals",t)}),this.conditionBridge.setup()),this.contentProtectionConfig.protectPrinting?.disable&&this.comms.send("print_protection",this.contentProtectionConfig.protectPrinting),this.resizeWatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"watch",selector:t})}),this.pendingUnwatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"unwatch",selector:t})}),this.pendingUnwatchSelectors=[]}addResizeTarget(t){this.resizeWatchSelectors.includes(t)||this.resizeWatchSelectors.push(t),this.pendingUnwatchSelectors=this.pendingUnwatchSelectors.filter(e=>e!==t),this.comms?.ready&&this.comms.send("decoration_resize",{action:"watch",selector:t})}removeResizeTarget(t){this.resizeWatchSelectors=this.resizeWatchSelectors.filter(e=>e!==t),this.comms?.ready?this.comms.send("decoration_resize",{action:"unwatch",selector:t}):this.pendingUnwatchSelectors.includes(t)||this.pendingUnwatchSelectors.push(t)}async show(t){if(!this.frame.parentElement){console.warn("Trying to show frame that is not attached to the DOM");return}if(!this.loaded){this.showPromise=void 0;return}return this.showPromise?(this.cachedPage!==t&&(this.update(t),this.cachedPage=t),this.showPromise):(this.cachedPage=t,this.comms?this.comms.resume():this.comms=new c(this.frame.contentWindow,this.source),this.showPromise=new Promise((e,s)=>{this.comms.send("focus",void 0,r=>{this.update(this.cachedPage),this.applyContentProtection(),e()})}),this.showPromise)}async activate(){return new Promise((t,e)=>{if(!this.comms)return t();this.comms?.send("activate",void 0,()=>{t()})})}get element(){return this.wrapper}get iframe(){return this.frame}get realSize(){return this.frame.getBoundingClientRect()}get loaded(){return this.frame.contentWindow&&this.frame.contentWindow.location.href!=="about:blank"}set width(t){if(n()){const e=this.wrapper.attributeStyleMap.get("width");if(e instanceof CSSUnitValue&&e.unit==="percent"&&e.value===t)return;this.wrapper.attributeStyleMap.set("width",CSS.percent(t))}else{const e=`${t}%`;if(this.wrapper.style.width===e)return;this.wrapper.style.width=e}}set height(t){if(n()){const e=this.wrapper.attributeStyleMap.get("height");if(e instanceof CSSUnitValue&&e.unit==="px"&&e.value===t)return;this.wrapper.attributeStyleMap.set("height",CSS.px(t))}else{const e=`${t}px`;if(this.wrapper.style.height===e)return;this.wrapper.style.height=e}}get window(){if(!this.frame.contentWindow)throw Error("Trying to use frame window when it doesn't exist");return this.frame.contentWindow}get atLeft(){return this.window.scrollX<5}get atRight(){return this.window.scrollX>this.window.document.scrollingElement.scrollWidth-this.window.innerWidth-5}get msg(){return this.comms}get ldr(){return this.loader}}export{g as FXLFrameManager};
+import{Loader as n}from"@readium/navigator-html-injectables";import{ReadingProgression as c,Page as h}from"@readium/shared";import{FrameComms as d}from"../frame/FrameComms.js";import{isTypedOMSupported as a}from"./FXLPeripherals.js";import{KeyboardConditionBridge as l}from"../../peripherals/KeyboardConditionBridge.js";import{createSerializer as m}from"../../helpers/serialize.js";class v{constructor(t,e,s,r={},i=[],o=[]){this.frameIsAppended=!1,this.pendingUnwatchSelectors=[],this.currModules=[],this.viewportSize=void 0,this.serialize=m(),this.cachedPage=void 0,this.peripherals=t,this.debugHref=s,this.contentProtectionConfig={...r},this.keyboardPeripheralsConfig=[...i],this.resizeWatchSelectors=[...o],this.frame=document.createElement("iframe"),this.frame.sandbox.value="allow-same-origin allow-scripts",this.frame.classList.add("readium-navigator-iframe"),this.frame.classList.add("blank"),this.frame.scrolling="no",this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.display="none",this.frame.style.position="absolute",this.frame.style.pointerEvents="none",this.frame.style.transformOrigin="0 0",this.frame.style.transform="scale(1)",this.frame.style.background="#fff",this.frame.style.touchAction="none",this.frame.dataset.originalHref=s,this.source="about:blank",this.wrapper=document.createElement("div"),this.wrapper.style.position="relative",this.wrapper.style.contain="strict",this.wrapper.style.float=this.wrapper.style.cssFloat=e===c.rtl?"right":"left"}async load(t,e){return this.serialize(()=>this.loadNow(t,e))}async loadNow(t,e){return this.frameIsAppended||(this.wrapper.appendChild(this.frame),this.frameIsAppended=!0),this.source===e&&this.loadPromise&&[...this.currModules].sort().join("|")===[...t].sort().join("|")?this.loadPromise:(this.loaded&&this.source!==e&&this.window.stop(),this.source=e,this.loadPromise=new Promise((s,r)=>{if(this.loader&&this.loaded){const i=this.frame.contentWindow;if([...this.currModules].sort().join("|")===[...t].sort().join("|")){try{s(i),this.loadPromise=void 0}catch{}return}this.comms?.halt(),this.loader.destroy(),this.loader=new n(i,t),this.currModules=t,this.comms=void 0;try{s(i),this.loadPromise=void 0}catch{}return}this.frame.addEventListener("load",()=>{const i=this.frame.contentWindow;this.loader=new n(i,t),this.currModules=t,this.peripherals.observe(this.wrapper),this.peripherals.observe(i);try{s(i)}catch{}},{once:!0}),this.frame.addEventListener("error",i=>{try{r(i.error),this.loadPromise=void 0}catch{}},{once:!0}),this.frame.style.removeProperty("display"),this.frame.contentWindow.location.replace(this.source)}),this.loadPromise)}loadPageSize(){if(this.viewportSize)return this.viewportSize;const t=this.frame.contentWindow,e=t.document.head.querySelector("meta[name=viewport]");if(e){const s=/(\w+) *= *([^\s,]+)/g;let r,i=0,o=0;for(;r=s.exec(e.content);)r[1]==="width"?i=Number.parseFloat(r[2]):r[1]==="height"&&(o=Number.parseFloat(r[2]));if(i>0&&o>0)return this.viewportSize={width:i,height:o},this.viewportSize}return{width:t.document.body.scrollWidth,height:t.document.body.scrollHeight}}update(t){if(!this.loaded)return;const e=this.loadPageSize(),s=Math.min(this.wrapper.clientWidth/e.width,this.wrapper.clientHeight/e.height);a()?(this.frame.attributeStyleMap.set("width",CSS.px(e.width)),this.frame.attributeStyleMap.set("height",CSS.px(e.height)),this.frame.attributeStyleMap.set("transform",new CSSTransformValue([new CSSScale(s,s)]))):(this.frame.style.height=`${e.height}px`,this.frame.style.width=`${e.width}px`,this.frame.style.transform=`scale(${s})`);const r=this.frame.getBoundingClientRect(),i=this.wrapper.clientHeight-r.height;if(a())if(this.frame.attributeStyleMap.set("top",CSS.px(i/2)),t===h.left){const o=this.wrapper.clientWidth-r.width;this.frame.attributeStyleMap.set("left",CSS.px(o))}else if(t===h.center){const o=this.wrapper.clientWidth-r.width;this.frame.attributeStyleMap.set("left",CSS.px(o/2))}else this.frame.attributeStyleMap.set("left",CSS.px(0));else if(this.frame.style.top=`${i/2}px`,t===h.left){const o=this.wrapper.clientWidth-r.width;this.frame.style.left=`${o}px`}else if(t===h.center){const o=this.wrapper.clientWidth-r.width;this.frame.style.left=`${o/2}px`}else this.frame.style.left="0px";this.frame.style.removeProperty("visibility"),this.frame.ariaHidden=null,this.frame.style.removeProperty("pointer-events"),this.frame.classList.remove("blank"),this.frame.classList.add("loaded")}async destroy(){return this.serialize(async()=>{this.conditionBridge?.destroy(),await this.unfocusNow(),this.loader?.destroy(),this.wrapper.remove()})}async unload(){return this.serialize(()=>this.unloadNow())}async unloadNow(){if(this.loaded)return this.deselect(),this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.pointerEvents="none",this.frame.classList.add("blank"),this.frame.classList.remove("loaded"),this.comms?.halt(),this.loader?.destroy(),this.comms=void 0,this.frame.blur(),new Promise((t,e)=>{this.frame.addEventListener("load",()=>{try{this.showPromise=void 0,t()}catch{}},{once:!0}),this.frame.addEventListener("error",s=>{try{this.showPromise=void 0,e(s.error)}catch{}},{once:!0}),this.source="about:blank",this.frame.contentWindow.location.replace("about:blank"),this.frame.style.display="none",this.frame.style.width="0px",this.frame.style.height="0px"})}deselect(){this.frame.contentWindow?.getSelection()?.removeAllRanges()}async unfocus(){return this.serialize(()=>this.unfocusNow())}async unfocusNow(){if(this.frame.parentElement)return this.comms===void 0||!this.comms.ready?void 0:(this.frame.blur(),new Promise((t,e)=>{this.comms?.send("unfocus",void 0,s=>{this.comms?.halt(),this.showPromise=void 0,t()})}));this.comms?.halt()}applyContentProtection(){this.comms||this.comms.resume(),this.comms.send("peripherals_protection",this.contentProtectionConfig),this.keyboardPeripheralsConfig&&this.keyboardPeripheralsConfig.length>0&&(this.conditionBridge?.destroy(),this.conditionBridge=new l(this.keyboardPeripheralsConfig,t=>{t.length>0&&this.comms.send("keyboard_peripherals",t)}),this.conditionBridge.setup()),this.contentProtectionConfig.protectPrinting?.disable&&this.comms.send("print_protection",this.contentProtectionConfig.protectPrinting),this.resizeWatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"watch",selector:t})}),this.pendingUnwatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"unwatch",selector:t})}),this.pendingUnwatchSelectors=[]}addResizeTarget(t){this.resizeWatchSelectors.includes(t)||this.resizeWatchSelectors.push(t),this.pendingUnwatchSelectors=this.pendingUnwatchSelectors.filter(e=>e!==t),this.comms?.ready&&this.comms.send("decoration_resize",{action:"watch",selector:t})}removeResizeTarget(t){this.resizeWatchSelectors=this.resizeWatchSelectors.filter(e=>e!==t),this.comms?.ready?this.comms.send("decoration_resize",{action:"unwatch",selector:t}):this.pendingUnwatchSelectors.includes(t)||this.pendingUnwatchSelectors.push(t)}async show(t){return this.serialize(()=>this.showNow(t))}async showNow(t){if(!this.frame.parentElement){console.warn("Trying to show frame that is not attached to the DOM");return}if(!this.loaded){this.showPromise=void 0;return}return this.showPromise?(this.cachedPage!==t&&(this.update(t),this.cachedPage=t),this.showPromise):(this.cachedPage=t,this.comms?this.comms.resume():this.comms=new d(this.frame.contentWindow,this.source),this.showPromise=new Promise((e,s)=>{this.comms.send("focus",void 0,r=>{this.update(this.cachedPage),this.applyContentProtection(),e()})}),this.showPromise)}async activate(){return this.serialize(()=>new Promise((t,e)=>{if(!this.comms?.ready)return t();this.comms?.send("activate",void 0,()=>{t()})}))}get element(){return this.wrapper}get iframe(){return this.frame}get realSize(){return this.frame.getBoundingClientRect()}get loaded(){return this.frame.contentWindow&&this.frame.contentWindow.location.href!=="about:blank"}set width(t){if(a()){const e=this.wrapper.attributeStyleMap.get("width");if(e instanceof CSSUnitValue&&e.unit==="percent"&&e.value===t)return;this.wrapper.attributeStyleMap.set("width",CSS.percent(t))}else{const e=`${t}%`;if(this.wrapper.style.width===e)return;this.wrapper.style.width=e}}set height(t){if(a()){const e=this.wrapper.attributeStyleMap.get("height");if(e instanceof CSSUnitValue&&e.unit==="px"&&e.value===t)return;this.wrapper.attributeStyleMap.set("height",CSS.px(t))}else{const e=`${t}px`;if(this.wrapper.style.height===e)return;this.wrapper.style.height=e}}get window(){if(!this.frame.contentWindow)throw Error("Trying to use frame window when it doesn't exist");return this.frame.contentWindow}get atLeft(){return this.window.scrollX<5}get atRight(){return this.window.scrollX>this.window.document.scrollingElement.scrollWidth-this.window.innerWidth-5}get msg(){return this.comms}get ldr(){return this.loader}}export{v as FXLFrameManager};

package/dist/helpers/serialize.js

@@ -0,0 +1 @@
+function n(){let e=Promise.resolve();return t=>{const r=e.then(t);return e=r.catch(()=>{}),r}}export{n as createSerializer};

package/dist/webpub/WebPubFrameManager.js

@@ -1 +1 @@
-import{Loader as o}from"@readium/navigator-html-injectables";import{FrameComms as n}from"../epub/frame/FrameComms.js";import{sML as h}from"@readium/helpers";import{KeyboardConditionBridge as a}from"../peripherals/KeyboardConditionBridge.js";class y{constructor(t,i={},s=[],e=[],r=[]){this.timelineFragmentIds=e,this.hidden=!0,this.destroyed=!1,this.pendingUnwatchSelectors=[],this.currModules=[],this.frame=document.createElement("iframe"),this.frame.classList.add("readium-navigator-iframe"),this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.opacity="0",this.frame.style.position="absolute",this.frame.style.pointerEvents="none",this.frame.style.transition="visibility 0s, opacity 0.1s linear",this.frame.style.backgroundColor="#FFFFFF",this.source=t,this.contentProtectionConfig={...i},this.keyboardPeripheralsConfig=[...s],this.resizeWatchSelectors=[...r]}async load(t=[]){return new Promise((i,s)=>{if(this.loader){const e=this.frame.contentWindow;if([...this.currModules].sort().join("|")===[...t].sort().join("|")){try{i(e)}catch{}return}this.comms?.halt(),this.loader.destroy(),this.loader=new o(e,t),this.currModules=t,this.comms=void 0;try{i(e)}catch{}return}this.frame.onload=()=>{const e=this.frame.contentWindow;this.loader=new o(e,t),this.currModules=t;try{i(e)}catch{}},this.frame.onerror=e=>{try{s(e)}catch{}},this.frame.contentWindow.location.replace(this.source)})}applyContentProtection(){this.comms||this.comms.resume(),this.comms.send("peripherals_protection",this.contentProtectionConfig),this.keyboardPeripheralsConfig&&this.keyboardPeripheralsConfig.length>0&&(this.conditionBridge?.destroy(),this.conditionBridge=new a(this.keyboardPeripheralsConfig,t=>{t.length>0&&this.comms.send("keyboard_peripherals",t)}),this.conditionBridge.setup()),this.contentProtectionConfig.monitorScrollingExperimental&&this.comms.send("scroll_protection",{}),this.contentProtectionConfig.protectPrinting?.disable&&this.comms.send("print_protection",this.contentProtectionConfig.protectPrinting),this.resizeWatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"watch",selector:t})}),this.pendingUnwatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"unwatch",selector:t})}),this.pendingUnwatchSelectors=[]}addResizeTarget(t){this.resizeWatchSelectors.includes(t)||this.resizeWatchSelectors.push(t),this.pendingUnwatchSelectors=this.pendingUnwatchSelectors.filter(i=>i!==t),this.comms?.ready&&this.comms.send("decoration_resize",{action:"watch",selector:t})}removeResizeTarget(t){this.resizeWatchSelectors=this.resizeWatchSelectors.filter(i=>i!==t),this.comms?.ready?this.comms.send("decoration_resize",{action:"unwatch",selector:t}):this.pendingUnwatchSelectors.includes(t)||this.pendingUnwatchSelectors.push(t)}async destroy(){this.conditionBridge?.destroy(),await this.hide(),this.loader?.destroy(),this.frame.remove(),this.destroyed=!0}async hide(){if(!this.destroyed){if(this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.opacity="0",this.frame.style.pointerEvents="none",this.hidden=!0,this.frame.parentElement)return this.comms===void 0||!this.comms.ready?void 0:new Promise((t,i)=>{this.comms?.send("unfocus",void 0,s=>{this.comms?.halt(),t()})});this.comms?.halt()}}async show(t){if(this.destroyed)throw Error("Trying to show frame when it doesn't exist");if(!this.frame.parentElement)throw Error("Trying to show frame that is not attached to the DOM");return this.comms?this.comms.resume():this.comms=new n(this.frame.contentWindow,this.source),new Promise((i,s)=>{this.comms?.send("activate",void 0,()=>{this.comms?.send("focus",void 0,()=>{this.applyContentProtection(),this.timelineFragmentIds.length>0&&this.comms?.send("timeline_entries",this.timelineFragmentIds);const e=()=>{this.frame.style.removeProperty("visibility"),this.frame.ariaHidden=null,this.frame.style.removeProperty("opacity"),this.frame.style.removeProperty("pointer-events"),this.hidden=!1,h.UA.WebKit&&this.comms?.send("force_webkit_recalc",void 0),i()};t!==void 0?this.comms?.send("go_progression",t,e):e()})})})}setCSSProperties(t){this.destroyed||!this.frame.contentWindow||(this.hidden&&!this.comms&&(this.comms=new n(this.frame.contentWindow,this.source),this.comms.halt()),this.comms?.send("update_properties",t))}get iframe(){if(this.destroyed)throw Error("Trying to use frame when it doesn't exist");return this.frame}get realSize(){if(this.destroyed)throw Error("Trying to use frame client rect when it doesn't exist");return this.frame.getBoundingClientRect()}get window(){if(this.destroyed||!this.frame.contentWindow)throw Error("Trying to use frame window when it doesn't exist");return this.frame.contentWindow}get msg(){return this.comms}get ldr(){return this.loader}}export{y as WebPubFrameManager};
+import{Loader as o}from"@readium/navigator-html-injectables";import{FrameComms as n}from"../epub/frame/FrameComms.js";import{sML as h}from"@readium/helpers";import{KeyboardConditionBridge as a}from"../peripherals/KeyboardConditionBridge.js";import{createSerializer as c}from"../helpers/serialize.js";class w{constructor(t,i={},s=[],e=[],r=[]){this.timelineFragmentIds=e,this.hidden=!0,this.destroyed=!1,this.pendingUnwatchSelectors=[],this.currModules=[],this.serialize=c(),this.frame=document.createElement("iframe"),this.frame.classList.add("readium-navigator-iframe"),this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.opacity="0",this.frame.style.position="absolute",this.frame.style.pointerEvents="none",this.frame.style.transition="visibility 0s, opacity 0.1s linear",this.frame.style.backgroundColor="#FFFFFF",this.source=t,this.contentProtectionConfig={...i},this.keyboardPeripheralsConfig=[...s],this.resizeWatchSelectors=[...r]}async load(t=[]){return this.serialize(()=>new Promise((i,s)=>{if(this.loader){const e=this.frame.contentWindow;if([...this.currModules].sort().join("|")===[...t].sort().join("|")){try{i(e)}catch{}return}this.comms?.halt(),this.loader.destroy(),this.loader=new o(e,t),this.currModules=t,this.comms=void 0;try{i(e)}catch{}return}this.frame.onload=()=>{const e=this.frame.contentWindow;this.loader=new o(e,t),this.currModules=t;try{i(e)}catch{}},this.frame.onerror=e=>{try{s(e)}catch{}},this.frame.contentWindow.location.replace(this.source)}))}applyContentProtection(){this.comms||this.comms.resume(),this.comms.send("peripherals_protection",this.contentProtectionConfig),this.keyboardPeripheralsConfig&&this.keyboardPeripheralsConfig.length>0&&(this.conditionBridge?.destroy(),this.conditionBridge=new a(this.keyboardPeripheralsConfig,t=>{t.length>0&&this.comms.send("keyboard_peripherals",t)}),this.conditionBridge.setup()),this.contentProtectionConfig.monitorScrollingExperimental&&this.comms.send("scroll_protection",{}),this.contentProtectionConfig.protectPrinting?.disable&&this.comms.send("print_protection",this.contentProtectionConfig.protectPrinting),this.resizeWatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"watch",selector:t})}),this.pendingUnwatchSelectors.forEach(t=>{this.comms.send("decoration_resize",{action:"unwatch",selector:t})}),this.pendingUnwatchSelectors=[]}addResizeTarget(t){this.resizeWatchSelectors.includes(t)||this.resizeWatchSelectors.push(t),this.pendingUnwatchSelectors=this.pendingUnwatchSelectors.filter(i=>i!==t),this.comms?.ready&&this.comms.send("decoration_resize",{action:"watch",selector:t})}removeResizeTarget(t){this.resizeWatchSelectors=this.resizeWatchSelectors.filter(i=>i!==t),this.comms?.ready?this.comms.send("decoration_resize",{action:"unwatch",selector:t}):this.pendingUnwatchSelectors.includes(t)||this.pendingUnwatchSelectors.push(t)}async destroy(){return this.serialize(async()=>{this.conditionBridge?.destroy(),await this.hideNow(),this.loader?.destroy(),this.frame.remove(),this.destroyed=!0})}async hide(){return this.serialize(()=>this.hideNow())}async hideNow(){if(!this.destroyed){if(this.frame.style.visibility="hidden",this.frame.ariaHidden="true",this.frame.style.opacity="0",this.frame.style.pointerEvents="none",this.hidden=!0,this.frame.parentElement)return this.comms===void 0||!this.comms.ready?void 0:new Promise((t,i)=>{this.comms?.send("unfocus",void 0,s=>{this.comms?.halt(),t()})});this.comms?.halt()}}async show(t){return this.serialize(()=>this.showNow(t))}async showNow(t){if(this.destroyed)throw Error("Trying to show frame when it doesn't exist");if(!this.frame.parentElement)throw Error("Trying to show frame that is not attached to the DOM");return this.comms?this.comms.resume():this.comms=new n(this.frame.contentWindow,this.source),new Promise((i,s)=>{this.comms?.send("activate",void 0,()=>{this.comms?.send("focus",void 0,()=>{this.applyContentProtection(),this.timelineFragmentIds.length>0&&this.comms?.send("timeline_entries",this.timelineFragmentIds);const e=()=>{this.frame.style.removeProperty("visibility"),this.frame.ariaHidden=null,this.frame.style.removeProperty("opacity"),this.frame.style.removeProperty("pointer-events"),this.hidden=!1,h.UA.WebKit&&this.comms?.send("force_webkit_recalc",void 0),i()};t!==void 0?this.comms?.send("go_progression",t,e):e()})})})}setCSSProperties(t){this.destroyed||!this.frame.contentWindow||(this.hidden&&!this.comms&&(this.comms=new n(this.frame.contentWindow,this.source),this.comms.halt()),this.comms?.send("update_properties",t))}get iframe(){if(this.destroyed)throw Error("Trying to use frame when it doesn't exist");return this.frame}get realSize(){if(this.destroyed)throw Error("Trying to use frame client rect when it doesn't exist");return this.frame.getBoundingClientRect()}get window(){if(this.destroyed||!this.frame.contentWindow)throw Error("Trying to use frame window when it doesn't exist");return this.frame.contentWindow}get msg(){return this.comms}get ldr(){return this.loader}}export{w as WebPubFrameManager};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -45,9 +45,9 @@
   },
   "dependencies": {
     "@readium/decorator": "1.2.4",
-    "@readium/shared": "2.6.0",
     "@readium/helpers": "1.1.1",
-    "@readium/navigator-html-injectables": "2.8.4"
+    "@readium/navigator-html-injectables": "2.8.4",
+    "@readium/shared": "2.6.0"
   },
   "devDependencies": {
     "@readium/css": "^2.0.5",

package/src/epub/frame/FrameComms.ts

@@ -14,19 +14,22 @@ interface RegistryValue {
     cb: CommsAck;
 }
 const REGISTRY_EXPIRY = 10000; // 10 seconds max
+const GC_INTERVAL = 5000;
 
 export type FrameCommsListener = (key: CommsEventKey | ManagerEventKey, value: unknown) => void;
 
 export class FrameComms {
     private readonly wnd: Window;
     private readonly registry = new Map<string, RegistryValue>();
-    private readonly gc: ReturnType<typeof setInterval>;
+    private gc: ReturnType<typeof setInterval> | undefined;
     // @ts-ignore
     private readonly origin: string;
     public readonly channelId: string;
     private _ready = false;
     private _listener: FrameCommsListener | undefined;
     private listenerBuffer: [key: CommsEventKey, value: unknown][] = [];
+    private visibleTime = 0;
+    private visibleSince: number | undefined = document.hidden ? undefined : performance.now();
 
     public set listener(listener: FrameCommsListener) {
         if(this.listenerBuffer.length > 0)
@@ -46,28 +49,60 @@ export class FrameComms {
         } catch (error) {
             this.channelId = mid();
         }
+        this.startGc();
+        window.addEventListener("message", this.handler);
+        this.send("_ping", undefined);
+    }
+
+    private startGc() {
+        if (this.gc !== undefined) return;
+        this.handleVisibility();
+        document.addEventListener("visibilitychange", this.visibilityHandler);
         this.gc = setInterval(() => {
+            const now = this.visibleNow();
             this.registry.forEach((v, k) => {
-                if (performance.now() - v.time > REGISTRY_EXPIRY) {
+                if (now - v.time > REGISTRY_EXPIRY) {
                     console.warn(k, "event for", v.key, "was never handled!");
                     this.registry.delete(k);
                 }
             });
-        }, 5000);
-        window.addEventListener("message", this.handler);
-        this.send("_ping", undefined);
+        }, GC_INTERVAL);
     }
 
+    private stopGc() {
+        this.visibleTime = this.visibleNow();
+        this.visibleSince = undefined;
+        document.removeEventListener("visibilitychange", this.visibilityHandler);
+        clearInterval(this.gc);
+        this.gc = undefined;
+    }
+
+    // Frames ack some commands from requestAnimationFrame, which doesn't run while the page is hidden
+    private visibleNow() {
+        return this.visibleTime + (this.visibleSince === undefined ? 0 : performance.now() - this.visibleSince);
+    }
+
+    private handleVisibility() {
+        if (document.hidden) {
+            this.visibleTime = this.visibleNow();
+            this.visibleSince = undefined;
+        } else if (this.visibleSince === undefined) {
+            this.visibleSince = performance.now();
+        }
+    }
+    private visibilityHandler = this.handleVisibility.bind(this);
+
     public halt() {
         this._ready = false;
         window.removeEventListener("message", this.handler);
-        clearInterval(this.gc);
+        this.stopGc();
         this._listener = undefined;
         this.registry.clear();
     }
 
     public resume() {
         window.addEventListener("message", this.handler);
+        this.startGc();
         this._ready = true;
     }
 
@@ -122,7 +157,7 @@ export class FrameComms {
             this.registry.set(id, {
                 // Add callback to the registry
                 cb: callback,
-                time: performance.now(),
+                time: this.visibleNow(),
                 key,
             });
         this.wnd.postMessage(

package/src/epub/frame/FrameManager.ts

@@ -4,6 +4,7 @@ import type { ReadiumWindow } from "@readium/navigator-html-injectables";
 import { sML } from "@readium/helpers";
 import type { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 import { KeyboardConditionBridge } from "../../peripherals/KeyboardConditionBridge.ts";
+import { createSerializer } from "../../helpers/serialize.ts";
 
 
 export class FrameManager {
@@ -19,6 +20,8 @@ export class FrameManager {
     private pendingUnwatchSelectors: string[] = [];
     private conditionBridge?: KeyboardConditionBridge;
     private currModules: ModuleName[] = [];
+    // Halting comms drops pending acks, so an operation must not start while another awaits one
+    private readonly serialize = createSerializer();
 
     constructor(
         source: string,
@@ -46,7 +49,7 @@ export class FrameManager {
     }
 
     async load(modules: ModuleName[]): Promise<Window> {
-        return new Promise((res, rej) => {
+        return this.serialize(() => new Promise((res, rej) => {
             if(this.loader) {
                 const wnd = this.frame.contentWindow!;
                 // Check if currently loaded modules are equal
@@ -72,7 +75,7 @@ export class FrameManager {
                 try { rej(err); } catch (error) {}
             }
             this.frame.contentWindow!.location.replace(this.source);
-        });
+        }));
     }
 
     private applyContentProtection() {
@@ -132,14 +135,20 @@ export class FrameManager {
     }
 
     async destroy() {
-        this.conditionBridge?.destroy();
-        await this.hide();
-        this.loader?.destroy();
-        this.frame.remove();
-        this.destroyed = true;
+        return this.serialize(async () => {
+            this.conditionBridge?.destroy();
+            await this.hideNow();
+            this.loader?.destroy();
+            this.frame.remove();
+            this.destroyed = true;
+        });
     }
 
     async hide(): Promise<void> {
+        return this.serialize(() => this.hideNow());
+    }
+
+    private async hideNow(): Promise<void> {
         if(this.destroyed) return;
         this.frame.style.visibility = "hidden";
         this.frame.ariaHidden = "true";
@@ -162,6 +171,10 @@ export class FrameManager {
     }
 
     async show(atProgress?: number): Promise<void> {
+        return this.serialize(() => this.showNow(atProgress));
+    }
+
+    private async showNow(atProgress?: number): Promise<void> {
         if(this.destroyed) throw Error("Trying to show frame when it doesn't exist");
         if(!this.frame.parentElement) throw Error("Trying to show frame that is not attached to the DOM");
         if(this.comms) this.comms.resume();

package/src/epub/fxl/FXLFrameManager.ts

@@ -5,6 +5,7 @@ import { FXLPeripherals, isTypedOMSupported } from "./FXLPeripherals.ts";
 import type { ReadiumWindow } from "@readium/navigator-html-injectables";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 import { KeyboardConditionBridge } from "../../peripherals/KeyboardConditionBridge.ts";
+import { createSerializer } from "../../helpers/serialize.ts";
 
 export class FXLFrameManager {
     private frame: HTMLIFrameElement;
@@ -26,6 +27,8 @@ export class FXLFrameManager {
     private loadPromise: Promise<Window> | undefined;
     private showPromise: Promise<void> | undefined;
     private viewportSize: { width: number, height: number } | undefined = undefined;
+    // Halting comms drops pending acks, so an operation must not start while another awaits one
+    private readonly serialize = createSerializer();
 
     constructor(
         peripherals: FXLPeripherals,
@@ -65,6 +68,10 @@ export class FXLFrameManager {
     }
 
     async load(modules: ModuleName[], source: string): Promise<Window> {
+        return this.serialize(() => this.loadNow(modules, source));
+    }
+
+    private async loadNow(modules: ModuleName[], source: string): Promise<Window> {
         if(!this.frameIsAppended) {
             this.wrapper.appendChild(this.frame);
             this.frameIsAppended = true;
@@ -194,13 +201,19 @@ export class FXLFrameManager {
     }
 
     async destroy() {
-        this.conditionBridge?.destroy();
-        await this.unfocus();
-        this.loader?.destroy();
-        this.wrapper.remove();
+        return this.serialize(async () => {
+            this.conditionBridge?.destroy();
+            await this.unfocusNow();
+            this.loader?.destroy();
+            this.wrapper.remove();
+        });
     }
 
     async unload() {
+        return this.serialize(() => this.unloadNow());
+    }
+
+    private async unloadNow() {
         if(!this.loaded) return;
         this.deselect();
         this.frame.style.visibility = "hidden";
@@ -232,8 +245,13 @@ export class FXLFrameManager {
     }
 
     async unfocus(): Promise<void> {
+        return this.serialize(() => this.unfocusNow());
+    }
+
+    private async unfocusNow(): Promise<void> {
         if(this.frame.parentElement) {
-            if(this.comms === undefined) return;
+            // A halted channel no longer receives acks
+            if(this.comms === undefined || !this.comms.ready) return;
             // Return focus to the parent document so keyboard events aren't silently
             // swallowed by an off-screen iframe whose comms channel has been halted.
             this.frame.blur();
@@ -301,6 +319,10 @@ export class FXLFrameManager {
 
     private cachedPage: Page | undefined = undefined;
     async show(page: Page): Promise<void> {
+        return this.serialize(() => this.showNow(page));
+    }
+
+    private async showNow(page: Page): Promise<void> {
         if(!this.frame.parentElement) {
             console.warn("Trying to show frame that is not attached to the DOM");
             return;
@@ -332,12 +354,12 @@ export class FXLFrameManager {
     }
 
     async activate(): Promise<void> {
-        return new Promise<void>((res, _) => {
-            if(!this.comms) return res(); // TODO: investigate when this is the case
+        return this.serialize(() => new Promise<void>((res, _) => {
+            if(!this.comms?.ready) return res(); // TODO: investigate when this is the case
             this.comms?.send("activate", undefined, () => {
                 res();
             });
-        });
+        }));
     }
 
     get element() {

package/src/helpers/serialize.ts

@@ -0,0 +1,9 @@
+// Returns a function that runs operations one after another, even when one rejects
+export function createSerializer() {
+    let queue: Promise<unknown> = Promise.resolve();
+    return <T>(operation: () => Promise<T>): Promise<T> => {
+        const result = queue.then(operation);
+        queue = result.catch(() => {});
+        return result;
+    };
+}

package/src/webpub/WebPubFrameManager.ts

@@ -4,6 +4,7 @@ import type { ReadiumWindow } from "@readium/navigator-html-injectables";
 import { sML } from "@readium/helpers";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator.ts";
 import { KeyboardConditionBridge } from "../peripherals/KeyboardConditionBridge.ts";
+import { createSerializer } from "../helpers/serialize.ts";
 
 export class WebPubFrameManager {
     private frame: HTMLIFrameElement;
@@ -18,6 +19,8 @@ export class WebPubFrameManager {
     private pendingUnwatchSelectors: string[] = [];
     private conditionBridge?: KeyboardConditionBridge;
     private currModules: ModuleName[] = [];
+    // Halting comms drops pending acks, so an operation must not start while another awaits one
+    private readonly serialize = createSerializer();
 
     constructor(
         source: string,
@@ -45,7 +48,7 @@ export class WebPubFrameManager {
     }
 
     async load(modules: ModuleName[] = []): Promise<Window> {
-        return new Promise((res, rej) => {
+        return this.serialize(() => new Promise((res, rej) => {
             if (this.loader) {
                 const wnd = this.frame.contentWindow!;
                 if ([...this.currModules].sort().join("|") === [...modules].sort().join("|")) {
@@ -70,7 +73,7 @@ export class WebPubFrameManager {
                 try { rej(err); } catch (error) {}
             }
             this.frame.contentWindow!.location.replace(this.source);
-        });
+        }));
     }
 
     private applyContentProtection() {
@@ -130,14 +133,20 @@ export class WebPubFrameManager {
     }
 
     async destroy() {
-        this.conditionBridge?.destroy();
-        await this.hide();
-        this.loader?.destroy();
-        this.frame.remove();
-        this.destroyed = true;
+        return this.serialize(async () => {
+            this.conditionBridge?.destroy();
+            await this.hideNow();
+            this.loader?.destroy();
+            this.frame.remove();
+            this.destroyed = true;
+        });
     }
 
     async hide(): Promise<void> {
+        return this.serialize(() => this.hideNow());
+    }
+
+    private async hideNow(): Promise<void> {
         if(this.destroyed) return;
         this.frame.style.visibility = "hidden";
         this.frame.ariaHidden = "true";
@@ -159,6 +168,10 @@ export class WebPubFrameManager {
     }
 
     async show(atProgress?: number): Promise<void> {
+        return this.serialize(() => this.showNow(atProgress));
+    }
+
+    private async showNow(atProgress?: number): Promise<void> {
         if (this.destroyed) throw Error("Trying to show frame when it doesn't exist");
         if (!this.frame.parentElement) throw Error("Trying to show frame that is not attached to the DOM");
         if (this.comms) this.comms.resume();

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

@@ -4,15 +4,22 @@ export type FrameCommsListener = (key: CommsEventKey | ManagerEventKey, value: u
 export declare class FrameComms {
     private readonly wnd;
     private readonly registry;
-    private readonly gc;
+    private gc;
     private readonly origin;
     readonly channelId: string;
     private _ready;
     private _listener;
     private listenerBuffer;
+    private visibleTime;
+    private visibleSince;
     set listener(listener: FrameCommsListener);
     clearListener(): void;
     constructor(wnd: Window, origin: string);
+    private startGc;
+    private stopGc;
+    private visibleNow;
+    private handleVisibility;
+    private visibilityHandler;
     halt(): void;
     resume(): void;
     private handle;

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

@@ -15,6 +15,7 @@ export declare class FrameManager {
     private pendingUnwatchSelectors;
     private conditionBridge?;
     private currModules;
+    private readonly serialize;
     constructor(source: string, contentProtectionConfig?: IContentProtectionConfig, keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig, timelineFragmentIds?: string[], resizeWatchSelectors?: string[]);
     load(modules: ModuleName[]): Promise<Window>;
     private applyContentProtection;
@@ -22,7 +23,9 @@ export declare class FrameManager {
     removeResizeTarget(selector: string): void;
     destroy(): Promise<void>;
     hide(): Promise<void>;
+    private hideNow;
     show(atProgress?: number): Promise<void>;
+    private showNow;
     setCSSProperties(properties: {
         [key: string]: string;
     }): void;

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

@@ -21,8 +21,10 @@ export declare class FXLFrameManager {
     private loadPromise;
     private showPromise;
     private viewportSize;
+    private readonly serialize;
     constructor(peripherals: FXLPeripherals, direction: ReadingProgression, debugHref: string, contentProtectionConfig?: IContentProtectionConfig, keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig, resizeWatchSelectors?: string[]);
     load(modules: ModuleName[], source: string): Promise<Window>;
+    private loadNow;
     loadPageSize(): {
         width: number;
         height: number;
@@ -30,13 +32,16 @@ export declare class FXLFrameManager {
     update(page?: Page): void;
     destroy(): Promise<void>;
     unload(): Promise<void>;
+    private unloadNow;
     deselect(): void;
     unfocus(): Promise<void>;
+    private unfocusNow;
     private applyContentProtection;
     addResizeTarget(selector: string): void;
     removeResizeTarget(selector: string): void;
     private cachedPage;
     show(page: Page): Promise<void>;
+    private showNow;
     activate(): Promise<void>;
     get element(): HTMLDivElement;
     get iframe(): HTMLIFrameElement;

package/types/src/helpers/serialize.d.ts

@@ -0,0 +1 @@
+export declare function createSerializer(): <T>(operation: () => Promise<T>) => Promise<T>;

package/types/src/webpub/WebPubFrameManager.d.ts

@@ -15,6 +15,7 @@ export declare class WebPubFrameManager {
     private pendingUnwatchSelectors;
     private conditionBridge?;
     private currModules;
+    private readonly serialize;
     constructor(source: string, contentProtectionConfig?: IContentProtectionConfig, keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig, timelineFragmentIds?: string[], resizeWatchSelectors?: string[]);
     load(modules?: ModuleName[]): Promise<Window>;
     private applyContentProtection;
@@ -22,7 +23,9 @@ export declare class WebPubFrameManager {
     removeResizeTarget(selector: string): void;
     destroy(): Promise<void>;
     hide(): Promise<void>;
+    private hideNow;
     show(atProgress?: number): Promise<void>;
+    private showNow;
     setCSSProperties(properties: {
         [key: string]: string;
     }): void;