@netless/app-presentation 0.1.12 → 0.1.13-beta.1

package/dist/index.global.js

@@ -1150,6 +1150,9 @@ var NetlessAppPresentation = (function (exports) {
       // 当前触摸的索引
       this.touchIndex = 0;
       this.preloadSize = 0;
+      // 暂停后不再创建预加载链接（app 失焦降级时调用）；已插入的 link 会被移除，
+      // 挂起的 idle 回调重新进入 touch() 时也会被跳过
+      this.paused = false;
       this.preloadMap = new Map(pages.map((e, index) => [index, {
         src: e.src,
         state: 0 /* unloaded */
@@ -1157,7 +1160,21 @@ var NetlessAppPresentation = (function (exports) {
       this.preloadSize = this.preloadMap.size;
       this.touch(0, true);
     }
+    pause() {
+      if (this.paused)
+        return;
+      this.paused = true;
+      this.destroySomeLink();
+    }
+    resume(index) {
+      if (!this.paused)
+        return;
+      this.paused = false;
+      this.touch(index != null ? index : this.touchIndex, true);
+    }
     touch(index, force = false) {
+      if (this.paused)
+        return;
       if (index >= this.preloadSize) {
         this.touchIndex = 0;
       } else {
@@ -1956,6 +1973,138 @@ var NetlessAppPresentation = (function (exports) {
     const size = fitPageSizeToOrigin(ppt, originSize);
     return __spreadProps(__spreadValues({}, size), { src: ppt.src, thumbnail: ppt.previewURL, name });
   };
+  var findBackgroundImage = (view) => {
+    const container = view.divElement;
+    if (!container || typeof container.querySelector !== "function")
+      return null;
+    return container.querySelector('img[alt="background"]');
+  };
+  var isBlurDegradationAllowed = (context) => {
+    const boxStatus = context.getBoxStatus();
+    if (boxStatus) {
+      return boxStatus !== "normal";
+    }
+    const boxState = context.getWindowManager().boxState;
+    return boxState !== void 0 && boxState !== "normal";
+  };
+  var DEFAULT_SETUP_READY_TIMEOUT = 5e3;
+  var waitForCurrentPageImage = (view, timeoutMs, isDisposed) => {
+    return new Promise((resolve) => {
+      let settled = false;
+      let pollTimer;
+      const settle = (loaded) => {
+        if (settled)
+          return;
+        settled = true;
+        window.clearTimeout(timeoutTimer);
+        if (pollTimer !== void 0)
+          window.clearInterval(pollTimer);
+        resolve(loaded);
+      };
+      const timeoutTimer = window.setTimeout(() => settle(false), timeoutMs);
+      const check = () => {
+        if (isDisposed()) {
+          settle(false);
+          return;
+        }
+        const img = findBackgroundImage(view);
+        if (img && img.complete && img.naturalWidth > 0) {
+          settle(true);
+        }
+      };
+      check();
+      if (!settled) {
+        pollTimer = window.setInterval(check, 100);
+      }
+    });
+  };
+  var resolveImageUrl = (url) => {
+    try {
+      return new URL(url, window.location.href).href;
+    } catch (e) {
+      return url;
+    }
+  };
+  var setupBlurThumbnailDegradation = (config) => {
+    const { context, view, pages, pageIndex$, app, dispose: dispose2 } = config;
+    let blurEpisode = false;
+    let reDegradeEnabled = false;
+    const degrade = () => {
+      const page = pages[pageIndex$.value];
+      if (!(page == null ? void 0 : page.thumbnail))
+        return;
+      const img = findBackgroundImage(view);
+      if (img && resolveImageUrl(img.src) !== resolveImageUrl(page.thumbnail)) {
+        img.src = page.thumbnail;
+      }
+    };
+    const restore2 = () => {
+      const page = pages[pageIndex$.value];
+      const img = findBackgroundImage(view);
+      if (page && img && resolveImageUrl(img.src) !== resolveImageUrl(page.src)) {
+        img.src = page.src;
+      }
+    };
+    const isBackgroundImg = (target) => {
+      var _a;
+      const el = target;
+      return Boolean(
+        el && el.tagName === "IMG" && ((_a = el.matches) == null ? void 0 : _a.call(el, 'img[alt="background"]'))
+      );
+    };
+    const onImgLoad = (ev) => {
+      if (!blurEpisode || !reDegradeEnabled)
+        return;
+      if (!isBackgroundImg(ev.target))
+        return;
+      degrade();
+    };
+    const onImgError = (ev) => {
+      if (!blurEpisode || !reDegradeEnabled)
+        return;
+      if (!isBackgroundImg(ev.target))
+        return;
+      reDegradeEnabled = false;
+    };
+    const offFocus = context.emitter.on("focus", (isFocused) => {
+      if (isFocused) {
+        if (blurEpisode) {
+          blurEpisode = false;
+          reDegradeEnabled = false;
+          restore2();
+          app.preload.resume(pageIndex$.value);
+        }
+      } else {
+        if (!isBlurDegradationAllowed(context))
+          return;
+        blurEpisode = true;
+        reDegradeEnabled = true;
+        degrade();
+        app.preload.pause();
+      }
+    });
+    dispose2.add(offFocus);
+    const viewEl = view.divElement;
+    if (viewEl && typeof viewEl.addEventListener === "function") {
+      viewEl.addEventListener("load", onImgLoad, true);
+      viewEl.addEventListener("error", onImgError, true);
+      dispose2.add(() => {
+        viewEl.removeEventListener("load", onImgLoad, true);
+        viewEl.removeEventListener("error", onImgError, true);
+      });
+    } else {
+      warnOnceMissingViewContainer(view);
+    }
+  };
+  var degradedWarnedViews = /* @__PURE__ */ new WeakSet();
+  var warnOnceMissingViewContainer = (view) => {
+    if (degradedWarnedViews.has(view))
+      return;
+    degradedWarnedViews.add(view);
+    console.warn(
+      "[Presentation]: blur thumbnail degradation runs without re-degrade coverage (view container unavailable)"
+    );
+  };
   var createLogger = (room) => {
     if (room && room.logger) {
       return (...args) => room.logger.info(...args);
@@ -1967,7 +2116,10 @@ var NetlessAppPresentation = (function (exports) {
     var _a;
     const createAppLogger = context.createLogger;
     if (typeof createAppLogger === "function") {
-      return createAppLogger.call(context, "camera", { debounceTime: 300, maxWaitTime: 2e3 });
+      return createAppLogger.call(context, "camera", {
+        debounceTime: 300,
+        maxWaitTime: 2e3
+      });
     }
     const roomLogger = (_a = context.getRoom()) == null ? void 0 : _a.logger;
     const prefix = `[Presentation][${context.appId}][camera]`;
@@ -2024,40 +2176,60 @@ var NetlessAppPresentation = (function (exports) {
       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 teardownByContext = /* @__PURE__ */ new WeakMap();
   var NetlessAppPresentation = {
     kind: "Presentation",
     setup(context) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       const diagnosticLogger = createDiagnosticLogger(context);
       const view = context.getView();
       if (!view)
-        throw new Error("[Presentation]: no whiteboard view, make sure you have added options.scenePath in addApp()");
+        throw new Error(
+          "[Presentation]: no whiteboard view, make sure you have added options.scenePath in addApp()"
+        );
       const options = context.getAppOptions() || {};
       const room = context.getRoom();
       const log = options.log || createLogger(room);
       const roomLogger = room == null ? void 0 : room.logger;
       const warn = (...data) => (roomLogger == null ? void 0 : roomLogger.warn) ? roomLogger.warn(...data) : log(...data);
       const configuredOriginSize = context.storage.state.originSize;
-      const originSize = isValidSize(configuredOriginSize) ? { width: configuredOriginSize.width, height: configuredOriginSize.height } : void 0;
+      const originSize = isValidSize(configuredOriginSize) ? {
+        width: configuredOriginSize.width,
+        height: configuredOriginSize.height
+      } : void 0;
       if (configuredOriginSize != null && !originSize) {
-        warn(`[Presentation] originSize should contain finite positive width and height, got ${JSON.stringify(configuredOriginSize)}`);
+        warn(
+          `[Presentation] originSize should contain finite positive width and height, got ${JSON.stringify(configuredOriginSize)}`
+        );
       }
       const pages = (_a = context.getScenes()) == null ? void 0 : _a.map(({ ppt, name }) => ppt2page(ppt, name, originSize)).filter(Boolean);
       if (!pages || pages.length === 0)
-        throw new Error("[Presentation]: empty scenes, make sure you have added options.scenes in addApp()");
+        throw new Error(
+          "[Presentation]: empty scenes, make sure you have added options.scenes in addApp()"
+        );
       if (pages[0].src.startsWith("ppt"))
-        throw new Error("[Presentation]: legacy dynamic PPT is unsupported, please use the projector converter and @netless/slide to render it");
+        throw new Error(
+          "[Presentation]: legacy dynamic PPT is unsupported, please use the projector converter and @netless/slide to render it"
+        );
       const scenePath = context.getInitScenePath();
       let maxCameraScale = (_b = options.maxCameraScale) != null ? _b : 3;
       if (!(Number.isFinite(maxCameraScale) && maxCameraScale > 0)) {
-        warn(`[Presentation] maxCameraScale should be a positive number, got ${options.maxCameraScale}`);
+        warn(
+          `[Presentation] maxCameraScale should be a positive number, got ${options.maxCameraScale}`
+        );
         maxCameraScale = 3;
       }
       log(`[Presentation] new ${context.appId}`);
       const dispose2 = disposableStore();
       dispose2.add(() => log(`[Presentation] dispose ${context.appId}`));
       dispose2.add(() => diagnosticLogger.flush());
-      const view$$ = context.createStorage("view", { uid: "", originX: 0, originY: 0, width: 0, height: 0 });
+      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);
@@ -2079,13 +2251,16 @@ var NetlessAppPresentation = (function (exports) {
       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);
+        return _addScenePathListener(
+          "onAppScenePathChange",
+          (payload) => {
+            const { appId } = payload;
+            if (appId === context.appId) {
+              const _pageIndex = getPageIndex(payload.view);
+              set(_pageIndex);
+            }
           }
-        });
+        );
       });
       dispose2.add(() => {
         pageIndex$.dispose();
@@ -2102,7 +2277,12 @@ 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)) {
-          await context.addPage({ scene: { name, ppt: { width: p.width, height: p.height, src: p.src } } });
+          await context.addPage({
+            scene: {
+              name,
+              ppt: { width: p.width, height: p.height, src: p.src }
+            }
+          });
         }
         if (logger) {
           logger.info(`[Presentation] syncPage ${scenePath}/${name}`);
@@ -2114,15 +2294,21 @@ var NetlessAppPresentation = (function (exports) {
         if (!context.isAddApp)
           return;
         if (pages.length > 100)
-          warn(`[Presentation]: too many pages (${pages.length}), may cause performance issues`);
+          warn(
+            `[Presentation]: too many pages (${pages.length}), may cause performance issues`
+          );
         if (!room || !room.isWritable)
           return;
         if (pageIndex$.value < 0 || pageIndex$.value >= pages.length) {
-          throw new Error(`[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`);
+          throw new Error(
+            `[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`
+          );
         }
         const scenes = room.entireScenes()[scenePath];
         if (!scenes || !scenes[pageIndex$.value]) {
-          throw new Error(`[Presentation]: no initial scene found at ${scenePath}, page index: ${pageIndex$.value}`);
+          throw new Error(
+            `[Presentation]: no initial scene found at ${scenePath}, page index: ${pageIndex$.value}`
+          );
         }
         const { name, ppt } = scenes[pageIndex$.value];
         const nextScenes = pages.map((page, index) => {
@@ -2151,16 +2337,22 @@ var NetlessAppPresentation = (function (exports) {
       const prepareScenesPromise = prepareScenes();
       const canJumpPage = (index) => {
         if (!context.getIsWritable()) {
-          warn("[Presentation]: no permission, make sure you have test room.isWritable");
+          warn(
+            "[Presentation]: no permission, make sure you have test room.isWritable"
+          );
           return false;
         }
         if (!(0 <= index && index < pages.length)) {
-          warn(`[Presentation]: page ${index + 1} out of bounds [1, ${pages.length}]`);
+          warn(
+            `[Presentation]: page ${index + 1} out of bounds [1, ${pages.length}]`
+          );
           return false;
         }
         const scenes = context.getDisplayer().entireScenes()[scenePath];
         if (!scenes) {
-          warn(`[Presentation]: no scenes found at ${scenePath}, make sure you have added options.scenePath in addApp()`);
+          warn(
+            `[Presentation]: no scenes found at ${scenePath}, make sure you have added options.scenePath in addApp()`
+          );
           return false;
         }
         return true;
@@ -2266,13 +2458,20 @@ var NetlessAppPresentation = (function (exports) {
               try {
                 const { camera, size } = view;
                 const referenceSize = getCameraReferenceSize(originSize, page);
-                const viewport = cameraToSharedViewport(camera, size, referenceSize);
+                const viewport = cameraToSharedViewport(
+                  camera,
+                  size,
+                  referenceSize
+                );
                 if (viewport)
                   view$$.setState(__spreadValues({ uid: me }, viewport));
                 if (pendingMoveCameraRequest) {
                   diagnosticLogger.debouncedInfo(
                     "moveCamera",
-                    getCameraDiagnosticState("moveCamera", pendingMoveCameraRequest)
+                    getCameraDiagnosticState(
+                      "moveCamera",
+                      pendingMoveCameraRequest
+                    )
                   );
                   pendingMoveCameraRequest = void 0;
                 }
@@ -2280,7 +2479,10 @@ var NetlessAppPresentation = (function (exports) {
                 diagnosticLogger.error(
                   "syncView.failed",
                   error,
-                  getCameraDiagnosticState("moveCamera", pendingMoveCameraRequest)
+                  getCameraDiagnosticState(
+                    "moveCamera",
+                    pendingMoveCameraRequest
+                  )
                 );
                 pendingMoveCameraRequest = void 0;
               }
@@ -2305,17 +2507,32 @@ var NetlessAppPresentation = (function (exports) {
           });
         }
       };
-      dispose2.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)));
+      dispose2.add(
+        view$$.addStateChangedListener(() => syncViewFromRemote(false, true))
+      );
       const getPageSize = () => {
         const { width, height } = app.page() || {};
         return { width: width || 0, height: height || 0 };
       };
       const box = context.getBox();
-      const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView));
-      app.contentDOM.dataset.appPresentationVersion = "0.1.12";
+      const app = dispose2.add(
+        createPresentation(
+          box,
+          pages,
+          jumpPage,
+          pageIndex$,
+          view,
+          options.thumbnail,
+          options.useClipView
+        )
+      );
+      app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.1";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       app.warn = warn;
+      if (pageIndex$.value !== 0) {
+        app.preload.touch(pageIndex$.value, true);
+      }
       const getCameraDiagnosticState = (reason, requestedCamera) => {
         const page = app.page();
         const pageSize = page && isValidSize(page) ? { width: page.width, height: page.height } : void 0;
@@ -2359,19 +2576,21 @@ var NetlessAppPresentation = (function (exports) {
       };
       if (originSize) {
         let previousPageIndex = pageIndex$.value;
-        dispose2.add(pageIndex$.subscribe((nextPageIndex) => {
-          if (nextPageIndex === previousPageIndex)
-            return;
-          previousPageIndex = nextPageIndex;
-          scaleDocsToFit();
-        }));
+        dispose2.add(
+          pageIndex$.subscribe((nextPageIndex) => {
+            if (nextPageIndex === previousPageIndex)
+              return;
+            previousPageIndex = nextPageIndex;
+            scaleDocsToFit();
+          })
+        );
       }
       if (options.justDocsViewReadonly) {
         app.setDocsViewReadonly(true);
       }
       const goToPageByClick = () => {
-        var _a2, _b2, _c2, _d;
-        const currentApplianceName = (_d = (_c2 = (_b2 = (_a2 = context.getRoom()) == null ? void 0 : _a2.state) == null ? void 0 : _b2.memberState) == null ? void 0 : _c2.currentApplianceName) != null ? _d : "";
+        var _a2, _b2, _c2, _d2;
+        const currentApplianceName = (_d2 = (_c2 = (_b2 = (_a2 = context.getRoom()) == null ? void 0 : _a2.state) == null ? void 0 : _b2.memberState) == null ? void 0 : _c2.currentApplianceName) != null ? _d2 : "";
         if (!app.readonly && currentApplianceName === "clicker") {
           nextPage();
         }
@@ -2413,9 +2632,14 @@ var NetlessAppPresentation = (function (exports) {
       });
       syncViewFromRemote(true);
       reportInitializedCamera("setup");
-      dispose2.add(context.emitter.on("writableChange", (isWritable) => {
-        app.setReadonly(!isWritable);
-      }));
+      dispose2.add(
+        context.emitter.on("writableChange", (isWritable) => {
+          app.setReadonly(!isWritable);
+        })
+      );
+      if (!options.disableBlurThumbnailDegradation) {
+        setupBlurThumbnailDegradation({ context, view, pages, pageIndex$, app, dispose: dispose2 });
+      }
       const getOriginScale = () => {
         const page = app.page();
         if (!page || !isValidSize(page))
@@ -2437,29 +2661,53 @@ var NetlessAppPresentation = (function (exports) {
         img.crossOrigin = "Anonymous";
         await new Promise((resolve, reject) => {
           img.onload = () => resolve();
-          img.onerror = () => reject(new Error(
-            `[Presentation]: failed to load screenshot page image: ${safeResourceLocation(src)}`
-          ));
+          img.onerror = () => reject(
+            new Error(
+              `[Presentation]: failed to load screenshot page image: ${safeResourceLocation(src)}`
+            )
+          );
           img.src = src;
         });
-        _context.drawImage(img, 0, 0, width, height, 0, 0, _width || width, _height || height);
+        _context.drawImage(
+          img,
+          0,
+          0,
+          width,
+          height,
+          0,
+          0,
+          _width || width,
+          _height || height
+        );
         const currentScenePath = view.focusScenePath;
         if (!currentScenePath) {
           throw new Error("[Presentation]: current scene path not found");
         }
         const windowManger = context.getWindowManager();
         if (windowManger._appliancePlugin) {
-          await windowManger._appliancePlugin.screenshotToCanvasAsync(_context, currentScenePath, _width || width, _height || height, {
-            centerX: 0,
-            centerY: 0,
-            scale: _width && _height ? Math.min(_width / width, _height / height) : 1
-          });
+          await windowManger._appliancePlugin.screenshotToCanvasAsync(
+            _context,
+            currentScenePath,
+            _width || width,
+            _height || height,
+            {
+              centerX: 0,
+              centerY: 0,
+              scale: _width && _height ? Math.min(_width / width, _height / height) : 1
+            }
+          );
         } else {
-          await view.screenshotToCanvasAsync(_context, currentScenePath, _width || width, _height || height, {
-            centerX: 0,
-            centerY: 0,
-            scale: _width && _height ? Math.min(_width / width, _height / height) : 1
-          });
+          await view.screenshotToCanvasAsync(
+            _context,
+            currentScenePath,
+            _width || width,
+            _height || height,
+            {
+              centerX: 0,
+              centerY: 0,
+              scale: _width && _height ? Math.min(_width / width, _height / height) : 1
+            }
+          );
         }
       };
       const screenshotCurrentPageAsync = async (_context, _width, _height) => {
@@ -2477,21 +2725,27 @@ var NetlessAppPresentation = (function (exports) {
       let scrollbar;
       if (options.useScrollbar) {
         dispose2.make(() => {
-          scrollbar = new Scrollbar(app.contentDOM, {
-            appId: context.appId,
-            getPageSize,
-            getOriginScale,
-            syncView,
-            getWritable: () => context.getIsWritable(),
-            scrollbarEventCallback: options.scrollbarEventCallback
-          }, view);
+          scrollbar = new Scrollbar(
+            app.contentDOM,
+            {
+              appId: context.appId,
+              getPageSize,
+              getOriginScale,
+              syncView,
+              getWritable: () => context.getIsWritable(),
+              scrollbarEventCallback: options.scrollbarEventCallback
+            },
+            view
+          );
           return () => scrollbar == null ? void 0 : scrollbar.destroy();
         });
       }
       const moveCamera = (camera) => {
         try {
           if (!context.getIsWritable()) {
-            throw new Error("[Presentation]: moveCamera must be called in writable room");
+            throw new Error(
+              "[Presentation]: moveCamera must be called in writable room"
+            );
           }
           pendingMoveCameraRequest = __spreadValues({}, camera);
           if (scrollbar) {
@@ -2512,9 +2766,29 @@ var NetlessAppPresentation = (function (exports) {
           throw error;
         }
       };
-      context.emitter.on("destroy", () => dispose2());
+      let disposed = false;
+      let offDestroy;
+      const teardown = () => {
+        if (disposed)
+          return;
+        disposed = true;
+        const removeDestroy = offDestroy;
+        offDestroy = void 0;
+        removeDestroy == null ? void 0 : removeDestroy();
+        dispose2();
+      };
+      offDestroy = context.emitter.on("destroy", teardown);
+      teardownByContext.set(context, teardown);
       const reportProgress = (progress, result) => {
-        window.postMessage({ type: "@netless/_result_save_pdf_", appId: context.appId, progress, result }, "*");
+        window.postMessage(
+          {
+            type: "@netless/_result_save_pdf_",
+            appId: context.appId,
+            progress,
+            result
+          },
+          "*"
+        );
         return result;
       };
       const base64url = async (url) => {
@@ -2554,7 +2828,9 @@ var NetlessAppPresentation = (function (exports) {
         }
         const scenes = context.getDisplayer().entireScenes()[scenePath];
         if (!scenes) {
-          throw new Error(`[Presentation]: no scenes found while exporting PDF: ${scenePath}`);
+          throw new Error(
+            `[Presentation]: no scenes found while exporting PDF: ${scenePath}`
+          );
         }
         const stage_canvas = document.createElement("canvas");
         stage_canvas.width = pdfWidth;
@@ -2579,20 +2855,32 @@ var NetlessAppPresentation = (function (exports) {
           const img = document.createElement("img");
           await new Promise((resolve, reject) => {
             img.onload = () => resolve();
-            img.onerror = () => reject(new Error(
-              `[Presentation]: failed to load PDF page image, page index: ${index}`
-            ));
+            img.onerror = () => reject(
+              new Error(
+                `[Presentation]: failed to load PDF page image, page index: ${index}`
+              )
+            );
             img.src = url;
           });
           stage.drawImage(img, 0, 0, width2, height2);
           wb.clearRect(0, 0, pdfWidth, pdfHeight);
           const name = (_a2 = p.name) != null ? _a2 : String(index + 1);
           if (scenes.some((scene) => scene.name == name)) {
-            const camera = { centerX: 0, centerY: 0, scale: Math.min(wb_canvas.width / width2, wb_canvas.height / height2) };
+            const camera = {
+              centerX: 0,
+              centerY: 0,
+              scale: Math.min(wb_canvas.width / width2, wb_canvas.height / height2)
+            };
             const sPath = `${scenePath}/${name}`;
             const windowManger = context.getWindowManager();
             if (windowManger._appliancePlugin) {
-              await windowManger._appliancePlugin.screenshotToCanvasAsync(wb, sPath, wb_canvas.width, wb_canvas.height, camera);
+              await windowManger._appliancePlugin.screenshotToCanvasAsync(
+                wb,
+                sPath,
+                wb_canvas.width,
+                wb_canvas.height,
+                camera
+              );
             } else {
               await view.screenshotToCanvasAsync(
                 wb,
@@ -2639,14 +2927,20 @@ var NetlessAppPresentation = (function (exports) {
           throw error;
         }
       };
-      dispose2.add(listen(window, "message", (ev) => {
-        if (ev.data && ev.data.type == "@netless/_request_save_pdf_" && ev.data.appId == context.appId) {
-          toPdf().catch((err) => {
-            warn(err);
-            reportProgress(100, null);
-          });
-        }
-      }));
+      dispose2.add(
+        listen(
+          window,
+          "message",
+          (ev) => {
+            if (ev.data && ev.data.type == "@netless/_request_save_pdf_" && ev.data.appId == context.appId) {
+              toPdf().catch((err) => {
+                warn(err);
+                reportProgress(100, null);
+              });
+            }
+          }
+        )
+      );
       const setDocsViewReadonly = (bol) => {
         app.setDocsViewReadonly(bol);
       };
@@ -2657,19 +2951,57 @@ var NetlessAppPresentation = (function (exports) {
           scrollbar.setReadonly(bol);
         }
       };
-      const controller = { app, view, context, jumpPage, prevPage, nextPage, jumpPageAsync, prevPageAsync, nextPageAsync, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale, getScale, getPageSize, screenshotCurrentPageAsync };
-      dispose2.add(listen(window, "message", (ev) => {
-        if (ev.data === "@netless/_presentation_") {
-          if (typeof window !== "undefined")
-            dispose2.make(() => {
-              const debug = window._presentation_ || (window._presentation_ = /* @__PURE__ */ new Set());
-              debug.add(controller);
-              return () => debug.delete(controller);
-            });
-          console.log(controller);
-        }
-      }));
-      return prepareScenesPromise.then(() => controller);
+      const controller = {
+        app,
+        view,
+        context,
+        jumpPage,
+        prevPage,
+        nextPage,
+        jumpPageAsync,
+        prevPageAsync,
+        nextPageAsync,
+        pageState,
+        toPdf,
+        log,
+        setDocsViewReadonly,
+        setReadonly,
+        moveCamera,
+        getOriginScale,
+        getScale,
+        getPageSize,
+        screenshotCurrentPageAsync
+      };
+      dispose2.add(
+        listen(
+          window,
+          "message",
+          (ev) => {
+            if (ev.data === "@netless/_presentation_") {
+              if (typeof window !== "undefined")
+                dispose2.make(() => {
+                  const debug = window._presentation_ || (window._presentation_ = /* @__PURE__ */ new Set());
+                  debug.add(controller);
+                  return () => debug.delete(controller);
+                });
+              console.log(controller);
+            }
+          }
+        )
+      );
+      const setupReadyTimeout = (_d = options.setupReadyTimeout) != null ? _d : DEFAULT_SETUP_READY_TIMEOUT;
+      return prepareScenesPromise.then(async () => {
+        const loaded = await waitForCurrentPageImage(view, setupReadyTimeout, () => disposed);
+        if (!loaded) {
+          warn(`[Presentation] setup ready wait timed out after ${setupReadyTimeout}ms`);
+        }
+        return controller;
+      });
+    },
+    teardown(context) {
+      var _a;
+      (_a = teardownByContext.get(context)) == null ? void 0 : _a();
+      teardownByContext.delete(context);
     }
   };
   var AppPresentation = class extends Presentation {
@@ -2689,19 +3021,29 @@ var NetlessAppPresentation = (function (exports) {
       if (0 <= index && index < this.pages.length) {
         this.jumpPage(index);
       } else {
-        (_a = this.warn) == null ? void 0 : _a.call(this, `[Presentation]: page index ${index} out of bounds [0, ${this.pages.length - 1}]`);
+        (_a = this.warn) == null ? void 0 : _a.call(
+          this,
+          `[Presentation]: page index ${index} out of bounds [0, ${this.pages.length - 1}]`
+        );
       }
     }
   };
   function createPresentation(box, pages, jumpPage, pageIndex$, view, thumbnail, useClipView) {
     box.mountStyles(style_default);
-    const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage, thumbnail });
+    const app = new AppPresentation({
+      pages,
+      readonly: box.readonly,
+      jumpPage,
+      thumbnail
+    });
     app.box = box;
     box.mountContent(app.contentDOM);
     box.mountFooter(app.footerDOM);
-    app.dispose.add(pageIndex$.subscribe((pageIndex) => {
-      app.setPageIndex(pageIndex);
-    }));
+    app.dispose.add(
+      pageIndex$.subscribe((pageIndex) => {
+        app.setPageIndex(pageIndex);
+      })
+    );
     if (useClipView && view) {
       const onCameraUpdatedEffectForMaskView = (0, import_debounce2.default)(() => {
         const { width: pageWidth, height: pageHeight } = app.page() || {};
@@ -2710,8 +3052,12 @@ var NetlessAppPresentation = (function (exports) {
         }
         const { scale } = view.camera;
         const { width, height } = view.size;
-        const pageRatioX = Math.round((1 - pageWidth * scale / width) / 2 * 100);
-        const pageRatioY = Math.round((1 - pageHeight * scale / height) / 2 * 100);
+        const pageRatioX = Math.round(
+          (1 - pageWidth * scale / width) / 2 * 100
+        );
+        const pageRatioY = Math.round(
+          (1 - pageHeight * scale / height) / 2 * 100
+        );
         app.whiteboardDOM.style.clipPath = `inset(${pageRatioY}% ${pageRatioX}%)`;
       }, 50);
       onCameraUpdatedEffectForMaskView();
@@ -2736,7 +3082,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.12";
+  var version = "0.1.13-beta.1";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;