@netless/app-presentation 0.1.8-beta.0 → 0.1.8

package/dist/index.js

@@ -794,127 +794,98 @@ function arrowRightSVG(namespace) {
 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) {
@@ -931,17 +902,9 @@ var _Preload = class _Preload {
     });
     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;
@@ -1168,16 +1131,7 @@ var Presentation = class {
     }
     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. */
@@ -1205,7 +1159,77 @@ var Presentation = class {
 // 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) {
@@ -1214,10 +1238,22 @@ var createLogger = (room) => {
     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()");
@@ -1235,43 +1271,88 @@ var NetlessAppPresentation = {
     }
     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];
@@ -1282,6 +1363,9 @@ var NetlessAppPresentation = {
       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) => {
@@ -1302,14 +1386,14 @@ var NetlessAppPresentation = {
       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) {
@@ -1334,8 +1418,6 @@ var NetlessAppPresentation = {
         syncViewFromRemote(true);
       }
     };
-    const me = ((_e = context.getRoom()) == null ? void 0 : _e.uid) || context.getDisplayer().observerId + "";
-    let throttleSyncView = 0;
     const syncView = () => {
       if (throttleSyncView > 0)
         return;
@@ -1370,12 +1452,10 @@ var NetlessAppPresentation = {
         });
       }
     };
-    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";
     app.scaleDocsToFit = scaleDocsToFit;
     app.log = log;
     if (options.justDocsViewReadonly) {
@@ -1549,6 +1629,7 @@ var AppPresentation = class extends Presentation {
     this.image.style.display = "none";
   }
   updateImage() {
+    super.updateImage();
   }
   onNewPageIndex(index, origin) {
     if (origin === "keydown" && this.box && !this.box.focus)
@@ -1562,15 +1643,14 @@ var AppPresentation = class extends Presentation {
     }
   }
 };
-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;
 }
@@ -1583,7 +1663,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.7";
+var version = "0.1.8";
 
 exports.NetlessAppPresentation = NetlessAppPresentation;
 exports.Presentation = Presentation;