@netless/app-presentation 0.1.7 → 0.1.8-beta.1

package/dist/index.d.ts

@@ -197,9 +197,8 @@ interface ILazyLoadInstance {
 
 declare enum ELoadState {
     unloaded = 0,
-    loading = 1,
-    loaded = 2,
-    error = 3
+    loaded = 1,
+    error = 2
 }
 interface IPreloadMapValue {
     src: string;
@@ -208,19 +207,18 @@ interface IPreloadMapValue {
 declare class Preload implements IDisposable {
     readonly pages: PresentationPage[];
     static maxLinks: number;
-    readonly loadingLinks: Map<number, HTMLLinkElement>;
+    readonly loadingLinks: Map<number, {
+        link: HTMLLinkElement;
+        isForce: boolean;
+    }>;
     readonly preloadMap: Map<number, IPreloadMapValue>;
-    readonly waitingLoadSet: Set<number>;
-    readonly waitinglinks: number[];
     touchIndex: number;
     preloadSize: number;
     constructor(pages: PresentationPage[]);
-    touch(index: number): Promise<ELoadState>;
-    private autoTouch;
+    touch(index: number, force?: boolean): void;
     private createLink;
-    private handler;
+    private destroySomeLink;
     private requestAsyncCallBack;
-    private destroyLink;
     dispose(): void;
 }
 
@@ -229,7 +227,7 @@ interface PresentationPage {
     width: number;
     height: number;
     thumbnail?: string | undefined;
-    name?: string | undefined;
+    name?: string;
 }
 interface PresentationConfig {
     readonly pages: PresentationPage[];

package/dist/index.global.js

@@ -793,127 +793,98 @@ var NetlessAppPresentation = (function (exports) {
   var _Preload = class _Preload {
     constructor(pages) {
       this.pages = pages;
+      // 正在加载的链接
       this.loadingLinks = /* @__PURE__ */ new Map();
+      // 需要预加载的链接集合
       this.preloadMap = /* @__PURE__ */ new Map();
-      this.waitingLoadSet = /* @__PURE__ */ new Set();
-      this.waitinglinks = [];
+      // 当前触摸的索引
       this.touchIndex = 0;
       this.preloadSize = 0;
       this.preloadMap = new Map(pages.map((e, index) => [index, {
         src: e.src,
         state: 0 /* unloaded */
       }]));
-      this.waitingLoadSet = new Set(pages.map((e, index) => index));
       this.preloadSize = this.preloadMap.size;
-      this.touch(0);
+      this.touch(0, true);
     }
-    async touch(index) {
-      this.touchIndex = index;
-      const value = this.preloadMap.get(index);
-      let state = 0 /* unloaded */;
-      if (value) {
-        state = value.state;
-        if (value.state === 0 /* unloaded */) {
-          if (this.loadingLinks.size) {
-            for (const [i, link] of this.loadingLinks) {
-              this.destroyLink(i, link);
-              this.waitingLoadSet.add(i);
-              const v = this.preloadMap.get(i);
-              if (v) {
-                v.state = 0 /* unloaded */;
-                this.preloadMap.set(i, v);
-              }
-            }
-            for (const i of this.waitinglinks) {
-              this.waitingLoadSet.add(i);
-            }
-            this.waitinglinks.length = 0;
-          }
-          if (this.waitinglinks.includes(index)) {
-            this.waitinglinks.splice(this.waitinglinks.indexOf(index), 1);
-          }
-          state = await new Promise((resolve) => {
-            this.waitingLoadSet.delete(index);
-            this.createLink(index, resolve);
-          });
-        }
-      }
-      if (this.waitingLoadSet.size) {
-        this.requestAsyncCallBack(() => {
-          this.autoTouch();
-        }, 1e3);
-      }
-      return state;
-    }
-    autoTouch() {
-      this.handler();
-      if (this.waitingLoadSet.size === 0) {
-        return;
+    touch(index, force = false) {
+      if (index >= this.preloadSize) {
+        this.touchIndex = 0;
+      } else {
+        this.touchIndex = index;
       }
-      let nextTouchDelay = 1e3;
-      this.touchIndex = (this.touchIndex + 1) % this.preloadSize;
       const value = this.preloadMap.get(this.touchIndex);
-      if (value) {
-        switch (value.state) {
-          case 0 /* unloaded */:
-          case 3 /* error */:
-            if (!this.waitinglinks.includes(this.touchIndex)) {
-              this.waitinglinks.push(this.touchIndex);
-              this.waitingLoadSet.delete(this.touchIndex);
-            }
-            nextTouchDelay = 0;
-            break;
+      if (value && value.state === 0 /* unloaded */) {
+        this.createLink(this.touchIndex, force);
+      }
+      if (this.loadingLinks.size < _Preload.maxLinks) {
+        const willLoad = [...this.preloadMap.entries()].find(([i, e]) => i > this.touchIndex && e.state !== 1 /* loaded */);
+        if (willLoad) {
+          this.requestAsyncCallBack(() => {
+            this.touch(willLoad[0], false);
+          }, 100);
         }
       }
-      this.requestAsyncCallBack(() => {
-        this.autoTouch();
-      }, nextTouchDelay);
     }
-    createLink(index, resolve) {
+    createLink(index, force = false) {
       const value = this.preloadMap.get(index);
+      if (force) {
+        this.destroySomeLink(index);
+      }
       if (value) {
-        const link = document.createElement("link");
-        link.rel = "preload";
-        link.as = "image";
-        link.href = value.src;
-        link.dataset.order = index + "";
-        document.head.appendChild(link);
-        link.onload = () => {
-          value.state = 2 /* loaded */;
-          this.preloadMap.set(index, value);
-          document.head.contains(link) && document.head.removeChild(link);
-          this.loadingLinks.delete(index);
-          resolve && resolve(2 /* loaded */);
-          this.autoTouch();
+        if (value.state === 1 /* loaded */) {
+          return 1 /* loaded */;
+        }
+        const curlink = this.loadingLinks.get(index);
+        if (curlink) {
+          if (curlink.isForce !== force) {
+            curlink.isForce = force;
+            this.loadingLinks.set(index, curlink);
+          }
+          return 0 /* unloaded */;
+        }
+        if (this.loadingLinks.size > _Preload.maxLinks) {
+          return 0 /* unloaded */;
+        }
+        const linkDom = document.createElement("link");
+        linkDom.rel = "preload";
+        linkDom.as = "image";
+        linkDom.href = value.src;
+        linkDom.dataset.order = index + "";
+        document.head.appendChild(linkDom);
+        linkDom.onload = () => {
+          const value2 = this.preloadMap.get(index);
+          if (value2) {
+            value2.state = 1 /* loaded */;
+            this.preloadMap.set(index, value2);
+            document.head.contains(linkDom) && document.head.removeChild(linkDom);
+            this.loadingLinks.delete(index);
+            this.touch(this.touchIndex + 1, false);
+          }
         };
-        link.onerror = () => {
-          value.state = 3 /* error */;
-          this.preloadMap.set(index, value);
-          if (!this.waitinglinks.includes(index)) {
-            this.waitinglinks.push(index);
-            this.waitingLoadSet.delete(this.touchIndex);
+        linkDom.onerror = () => {
+          const value2 = this.preloadMap.get(index);
+          if (value2 == null ? void 0 : value2.src) {
+            linkDom.href = value2.src;
           }
-          document.head.contains(link) && document.head.removeChild(link);
-          this.loadingLinks.delete(index);
-          resolve && resolve(3 /* error */);
-          this.autoTouch();
         };
-        this.loadingLinks.set(index, link);
-        value.state = 1 /* loading */;
+        this.loadingLinks.set(index, {
+          link: linkDom,
+          isForce: force
+        });
+        value.state = 0 /* unloaded */;
         this.preloadMap.set(index, value);
+        return 0 /* unloaded */;
       }
+      return 2 /* error */;
     }
-    handler() {
-      if (!this.waitinglinks.length) {
-        return;
-      }
-      let i = this.loadingLinks.size;
-      while (i < _Preload.maxLinks) {
-        const index = this.waitinglinks.shift();
-        if (index !== void 0) {
-          this.createLink(index);
+    destroySomeLink(excludeIndex) {
+      for (const [index, { link }] of this.loadingLinks) {
+        if (excludeIndex !== void 0 && index === excludeIndex) {
+          continue;
         }
-        i++;
+        document.head.contains(link) && document.head.removeChild(link);
+        this.loadingLinks.delete(index);
       }
     }
     async requestAsyncCallBack(callBack, timeout) {
@@ -930,17 +901,9 @@ var NetlessAppPresentation = (function (exports) {
       });
       callBack();
     }
-    destroyLink(index, link) {
-      document.head.contains(link) && document.head.removeChild(link);
-      this.loadingLinks.delete(index);
-    }
     dispose() {
-      for (const [index, link] of this.loadingLinks) {
-        this.destroyLink(index, link);
-      }
+      this.destroySomeLink();
       this.preloadMap.clear();
-      this.waitingLoadSet.clear();
-      this.waitinglinks.length = 0;
     }
   };
   _Preload.maxLinks = 5;
@@ -1167,16 +1130,7 @@ var NetlessAppPresentation = (function (exports) {
       }
       this.timer = setTimeout(() => {
         this.timer = null;
-        this.preload.touch(this.pageIndex).then(() => {
-          const page = this.page();
-          if (!page) {
-            this.image.src = "";
-            return;
-          }
-          this.image.width = page.width;
-          this.image.height = page.height;
-          this.image.src = page.src;
-        });
+        this.preload.touch(this.pageIndex, true);
       }, 200);
     }
     /** Returns a modified URL that points to the thumbnail image. */
@@ -1204,7 +1158,77 @@ var NetlessAppPresentation = (function (exports) {
   // src/style.scss?inline
   var style_default = ".netless-app-presentation{height:100%;display:flex;flex-flow:column nowrap}.netless-app-presentation-content{position:relative;height:100%;overflow:hidden}.netless-app-presentation-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-presentation-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:#ededf0e6;box-shadow:inset -1px 0 #0000001c;transition:transform .4s;overflow:auto;overflow-y:scroll}.netless-app-presentation-preview-active .netless-app-presentation-preview-mask{display:block}.netless-app-presentation-preview-active .netless-app-presentation-preview{transform:translate(0)}.netless-app-presentation-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:#0000;outline:none;border:7px solid rgba(0,0,0,0);border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-presentation-preview-page:hover,.netless-app-presentation-preview-page.netless-app-presentation-preview-page-active{border-color:#444e601a}.netless-app-presentation-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-presentation-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-presentation-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-presentation-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:#f9f9fce6;transition:opacity .4s}.netless-app-presentation-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:#0000;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-footer-btn:hover{background:#ededf0e6}@media (hover: none){.netless-app-presentation-footer-btn:hover{background:#0000!important}}.netless-app-presentation-footer-btn>svg{width:100%;height:100%}.netless-app-presentation-footer-btn>svg:nth-of-type(2){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-presentation-footer-btn~.netless-app-presentation-footer-btn{margin-left:15px}.netless-app-presentation-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-presentation-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-presentation-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:#0000;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-page-number-input:hover,.netless-app-presentation-page-number-input:focus,.netless-app-presentation-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-presentation-readonly.netless-app-presentation-footer{display:none}.netless-app-presentation-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden;transition:opacity .2s}.netless-app-presentation-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-presentation-image>img{max-width:100%;max-height:100%;object-fit:contain}.telebox-color-scheme-dark .netless-app-presentation-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-presentation-page-number-input:active,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:focus,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-presentation-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-presentation-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-presentation-preview{background:#323232e6}";
 
+  // src/store.ts
+  function noop() {
+  }
+  function safe_not_equal(a, b) {
+    return a != a ? b == b : a !== b || a && typeof a === "object" || typeof a === "function";
+  }
+  function readable(value, start = noop) {
+    let stop;
+    const subscribers = /* @__PURE__ */ new Set();
+    function set(new_value) {
+      if (safe_not_equal(value, new_value)) {
+        value = new_value;
+        if (stop) {
+          for (const run of subscribers) {
+            run(value);
+          }
+        }
+      }
+    }
+    function subscribe(run) {
+      subscribers.add(run);
+      if (subscribers.size === 1) {
+        stop = start(set) || noop;
+      }
+      run(value);
+      return () => {
+        subscribers.delete(run);
+        if (subscribers.size === 0) {
+          stop && stop();
+          stop = void 0;
+        }
+      };
+    }
+    function reaction(run) {
+      subscribers.add(run);
+      if (subscribers.size === 1) {
+        stop = start(set) || noop;
+      }
+      return () => {
+        subscribers.delete(run);
+        if (subscribers.size === 0) {
+          stop && stop();
+          stop = void 0;
+        }
+      };
+    }
+    function dispose2(new_value) {
+      if (new_value !== void 0) {
+        set(new_value);
+      }
+      subscribers.clear();
+      stop && stop();
+      stop = void 0;
+    }
+    return {
+      get value() {
+        if (subscribers.size === 0) {
+          stop = start(set) || noop;
+          stop();
+          stop = void 0;
+        }
+        return value;
+      },
+      subscribe,
+      reaction,
+      dispose: dispose2
+    };
+  }
+
   // src/app-presentation.ts
+  var emptySceneName = "$$empty$$";
   var ppt2page = (ppt, name) => ppt ? { width: ppt.width, height: ppt.height, src: ppt.src, thumbnail: ppt.previewURL, name } : null;
   var createLogger = (room) => {
     if (room && room.logger) {
@@ -1213,10 +1237,22 @@ var NetlessAppPresentation = (function (exports) {
       return (...args) => console.log(...args);
     }
   };
+  var scenesEqual = (scenes1, scenes2) => {
+    if (!scenes1 || !scenes2) {
+      return false;
+    }
+    if (scenes1.length !== scenes2.length)
+      return false;
+    return scenes1.every((scene, index) => {
+      var _a, _b, _c, _d, _e, _f;
+      const scene2 = scenes2[index];
+      return scene.name === scene2.name && ((_a = scene.ppt) == null ? void 0 : _a.width) === ((_b = scene2.ppt) == null ? void 0 : _b.width) && ((_c = scene.ppt) == null ? void 0 : _c.height) === ((_d = scene2.ppt) == null ? void 0 : _d.height) && ((_e = scene.ppt) == null ? void 0 : _e.src) === ((_f = scene2.ppt) == null ? void 0 : _f.src);
+    });
+  };
   var NetlessAppPresentation = {
     kind: "Presentation",
     setup(context) {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c;
       const view = context.getView();
       if (!view)
         throw new Error("[Presentation]: no whiteboard view, make sure you have added options.scenePath in addApp()");
@@ -1234,43 +1270,88 @@ var NetlessAppPresentation = (function (exports) {
       }
       const log = options.log || createLogger(context.getRoom());
       log(`[Presentation] new ${context.appId}`);
+      const dispose2 = disposableStore();
+      dispose2.add(() => log(`[Presentation] dispose ${context.appId}`));
+      const view$$ = context.createStorage("view", { uid: "", originX: 0, originY: 0, width: 0, height: 0 });
+      const _addScenePathListener = (name, listener) => {
+        const windowManger = context.manager.windowManger;
+        windowManger.emitter.on(name, listener);
+        return () => windowManger == null ? void 0 : windowManger.emitter.off(name, listener);
+      };
+      const getPageIndex = (view2) => {
+        const focusScenePath = view2.focusScenePath;
+        const name = focusScenePath == null ? void 0 : focusScenePath.split("/").pop();
+        let _pageIndex = pages.findIndex((page, index) => {
+          var _a2;
+          const n = (_a2 = page.name) != null ? _a2 : String(index + 1);
+          return n === name;
+        });
+        if (_pageIndex === -1) {
+          _pageIndex = 0;
+        }
+        return _pageIndex;
+      };
+      let pageIndex = getPageIndex(view);
+      const pageIndex$ = readable(pageIndex, (set) => {
+        set(pageIndex);
+        return _addScenePathListener("onAppScenePathChange", (payload) => {
+          const { appId } = payload;
+          if (appId === context.appId) {
+            const _pageIndex = getPageIndex(payload.view);
+            set(_pageIndex);
+          }
+        });
+      });
+      dispose2.add(() => {
+        pageIndex$.dispose();
+      });
       if (context.isAddApp) {
         if (pages.length > 100)
           console.warn(`[Presentation]: too many pages (${pages.length}), may cause performance issues`);
+        let redirectResolve = void 0;
         const room = context.getRoom();
         if (room && room.isWritable) {
           const scenes = room.entireScenes()[scenePath];
-          for (let i = 0; i < pages.length; i++) {
-            const p = pages[i];
-            const name = (_c = p.name) != null ? _c : String(i + 1);
-            const scene = scenes.find((scene2) => scene2.name == name && scene2.ppt);
-            if (scene) {
-              if (scene.ppt && ((_d = scene.ppt) == null ? void 0 : _d.src) === p.src) {
-                continue;
-              }
-              room.removeScenes(`${scenePath}/${name}`);
-            }
-            room.putScenes(scenePath, pages.map((p2, index) => {
+          if (pageIndex$.value < 0 || pageIndex$.value >= pages.length) {
+            throw new Error(`[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`);
+          }
+          new Promise((resolve) => {
+            const { name, ppt } = scenes[pageIndex$.value];
+            redirectResolve = resolve;
+            const _scenes = pages.map((p, index) => {
               var _a2;
               return {
-                name: (_a2 = p2.name) != null ? _a2 : String(index + 1),
-                ppt: { width: p2.width, height: p2.height, src: p2.src }
+                name: (_a2 = p.name) != null ? _a2 : String(index + 1),
+                ppt: { width: p.width, height: p.height, src: p.src }
               };
-            }));
-          }
+            });
+            if (!scenesEqual(scenes, _scenes)) {
+              room.removeScenes(scenePath);
+              room.putScenes(scenePath, _scenes);
+            }
+            if (name === _scenes[pageIndex$.value].name && !ppt) {
+              context.addPage({ scene: { name: emptySceneName } }).then(() => {
+                log(`[Presentation] setup setScenePath ${scenePath}/${emptySceneName}`);
+                context.setScenePath(`${scenePath}/${emptySceneName}`).then(() => {
+                  redirectResolve && redirectResolve(true);
+                });
+              });
+            } else {
+              redirectResolve && redirectResolve(false);
+            }
+          }).then(async (bol) => {
+            await syncPage(pageIndex$.value, room.logger);
+            if (bol) {
+              log(`[Presentation] setup removeScenes ${scenePath}/${emptySceneName}`);
+              room.removeScenes(`${scenePath}/${emptySceneName}`);
+            }
+          });
         }
       }
-      const dispose2 = disposableStore();
-      dispose2.add(() => log(`[Presentation] dispose ${context.appId}`));
-      const page$$ = context.createStorage("page", { index: 0 });
-      const view$$ = context.createStorage("view", { uid: "", originX: 0, originY: 0, width: 0, height: 0 });
-      let lastIndex = -1;
-      const syncPage = async (index) => {
+      const me = ((_c = context.getRoom()) == null ? void 0 : _c.uid) || context.getDisplayer().observerId + "";
+      let throttleSyncView = 0;
+      const syncPage = async (index, logger) => {
         var _a2;
-        if (lastIndex !== index) {
-          lastIndex = index;
-          context.dispatchAppEvent("pageStateChange", { index, length: pages.length });
-        }
         if (!context.getIsWritable())
           return;
         const scenes = context.getDisplayer().entireScenes()[scenePath];
@@ -1281,6 +1362,9 @@ var NetlessAppPresentation = (function (exports) {
         if (!scenes.some((scene) => scene.name === name)) {
           await context.addPage({ scene: { name, ppt: { width: p.width, height: p.height, src: p.src } } });
         }
+        if (logger) {
+          logger.info(`[Presentation] syncPage ${scenePath}/${name}`);
+        }
         await context.setScenePath(`${scenePath}/${name}`);
       };
       const jumpPage = (index) => {
@@ -1301,14 +1385,14 @@ var NetlessAppPresentation = (function (exports) {
         const p = pages[index];
         const name = (_a2 = p.name) != null ? _a2 : String(index + 1);
         if (!scenes.some((scene) => scene.name === name)) {
-          context.addPage({ scene: { name } });
+          context.addPage({ scene: { name, ppt: { width: p.width, height: p.height, src: p.src } } });
         }
-        page$$.setState({ index });
+        syncPage(index);
         return true;
       };
-      const prevPage = () => jumpPage(page$$.state.index - 1);
-      const nextPage = () => jumpPage(page$$.state.index + 1);
-      const pageState = () => ({ index: page$$.state.index, length: pages.length });
+      const prevPage = () => jumpPage(pageIndex$.value - 1);
+      const nextPage = () => jumpPage(pageIndex$.value + 1);
+      const pageState = () => ({ index: pageIndex$.value, length: pages.length });
       const scaleDocsToFit = () => {
         const { width, height } = app.page() || {};
         if (width && height) {
@@ -1333,8 +1417,6 @@ var NetlessAppPresentation = (function (exports) {
           syncViewFromRemote(true);
         }
       };
-      const me = ((_e = context.getRoom()) == null ? void 0 : _e.uid) || context.getDisplayer().observerId + "";
-      let throttleSyncView = 0;
       const syncView = () => {
         if (throttleSyncView > 0)
           return;
@@ -1369,12 +1451,10 @@ var NetlessAppPresentation = (function (exports) {
           });
         }
       };
-      syncPage(page$$.state.index);
-      dispose2.add(page$$.addStateChangedListener(() => syncPage(page$$.state.index)));
       dispose2.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)));
       const box = context.getBox();
-      const app = dispose2.add(createPresentation(box, pages, jumpPage, page$$, options.thumbnail));
-      app.contentDOM.dataset.appPresentationVersion = "0.1.7";
+      const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, options.thumbnail));
+      app.contentDOM.dataset.appPresentationVersion = "0.1.8-beta.1";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       if (options.justDocsViewReadonly) {
@@ -1548,6 +1628,7 @@ var NetlessAppPresentation = (function (exports) {
       this.image.style.display = "none";
     }
     updateImage() {
+      super.updateImage();
     }
     onNewPageIndex(index, origin) {
       if (origin === "keydown" && this.box && !this.box.focus)
@@ -1561,15 +1642,14 @@ var NetlessAppPresentation = (function (exports) {
       }
     }
   };
-  function createPresentation(box, pages, jumpPage, page$$, thumbnail) {
+  function createPresentation(box, pages, jumpPage, pageIndex$, thumbnail) {
     box.mountStyles(style_default);
     const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage, thumbnail });
     app.box = box;
     box.mountContent(app.contentDOM);
     box.mountFooter(app.footerDOM);
-    app.setPageIndex(page$$.state.index);
-    app.dispose.add(page$$.addStateChangedListener(() => {
-      app.setPageIndex(page$$.state.index);
+    app.dispose.add(pageIndex$.subscribe((pageIndex) => {
+      app.setPageIndex(pageIndex);
     }));
     return app;
   }
@@ -1582,7 +1662,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.7";
+  var version = "0.1.8-beta.1";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;