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

package/dist/index.d.ts

@@ -218,7 +218,10 @@ declare class Preload implements IDisposable {
     readonly preloadMap: Map<number, IPreloadMapValue>;
     touchIndex: number;
     preloadSize: number;
+    paused: boolean;
     constructor(pages: PresentationPage[]);
+    pause(): void;
+    resume(index?: number): void;
     touch(index: number, force?: boolean): void;
     private createLink;
     private destroySomeLink;
@@ -420,6 +423,17 @@ interface PresentationAppOptions {
     goToPageByClick?: boolean;
     /** useClipView is used to set the presentation use clip view, it will be used in the presentation, and the presentation will be use clip view when the app is initialized */
     useClipView?: boolean;
+    /**
+     * Max time (ms) `setup()` waits for the first visible page image to load
+     * before resolving anyway. Default: 5_000.
+     */
+    setupReadyTimeout?: number;
+    /**
+     * Blur thumbnail degradation keeps cached (focused-lost) presentations on
+     * the low-res `previewURL` thumbnail to save memory. Enabled by default in
+     * maximized/minimized states; set `true` to disable it.
+     */
+    disableBlurThumbnailDegradation?: boolean;
 }
 interface PresentationController {
     readonly app: Presentation;

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);
@@ -2031,7 +2180,7 @@ var NetlessAppPresentation = (function (exports) {
   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)
@@ -2377,10 +2526,13 @@ var NetlessAppPresentation = (function (exports) {
           options.useClipView
         )
       );
-      app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.0";
+      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;
@@ -2437,8 +2589,8 @@ var NetlessAppPresentation = (function (exports) {
         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();
         }
@@ -2485,6 +2637,9 @@ var NetlessAppPresentation = (function (exports) {
           app.setReadonly(!isWritable);
         })
       );
+      if (!options.disableBlurThumbnailDegradation) {
+        setupBlurThumbnailDegradation({ context, view, pages, pageIndex$, app, dispose: dispose2 });
+      }
       const getOriginScale = () => {
         const page = app.page();
         if (!page || !isValidSize(page))
@@ -2834,9 +2989,14 @@ var NetlessAppPresentation = (function (exports) {
           }
         )
       );
-      return prepareScenesPromise.then(
-        () => 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;
@@ -2922,7 +3082,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.13-beta.0";
+  var version = "0.1.13-beta.1";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;

package/dist/index.js

@@ -1151,6 +1151,9 @@ var _Preload = class _Preload {
     // 当前触摸的索引
     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 */
@@ -1158,7 +1161,21 @@ var _Preload = class _Preload {
     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 {
@@ -1957,6 +1974,138 @@ var ppt2page = (ppt, name, originSize) => {
   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);
@@ -2032,7 +2181,7 @@ 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)
@@ -2378,10 +2527,13 @@ var NetlessAppPresentation = {
         options.useClipView
       )
     );
-    app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.0";
+    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;
@@ -2438,8 +2590,8 @@ var NetlessAppPresentation = {
       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();
       }
@@ -2486,6 +2638,9 @@ var NetlessAppPresentation = {
         app.setReadonly(!isWritable);
       })
     );
+    if (!options.disableBlurThumbnailDegradation) {
+      setupBlurThumbnailDegradation({ context, view, pages, pageIndex$, app, dispose: dispose2 });
+    }
     const getOriginScale = () => {
       const page = app.page();
       if (!page || !isValidSize(page))
@@ -2835,9 +2990,14 @@ var NetlessAppPresentation = {
         }
       )
     );
-    return prepareScenesPromise.then(
-      () => 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;
@@ -2923,7 +3083,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.13-beta.0";
+var version = "0.1.13-beta.1";
 
 exports.NetlessAppPresentation = NetlessAppPresentation;
 exports.Presentation = Presentation;