@netless/window-manager 1.0.18 → 1.0.20

package/dist/index.mjs

@@ -56,6 +56,8 @@ const DEFAULT_CONTAINER_RATIO = 9 / 16;
 const ROOT_DIR = "/";
 const INIT_DIR = "/init";
 const SETUP_APP_DELAY = 50;
+const BOX_SIZE_SETTLE_DELAY = 650;
+const CONTAINER_STATE_LOG_DEBOUNCE = 1e3;
 const callbacks = new Emittery();
 class AppCreateQueue {
   constructor() {
@@ -1016,9 +1018,11 @@ class AppContext {
       const view = this.getView();
       if (view) {
         view.divElement = dom;
+        this.appProxy.scheduleBoxSizeSync();
         setTimeout(() => {
           var _a;
           (_a = this.getRoom()) == null ? void 0 : _a.refreshViewSize();
+          this.appProxy.scheduleBoxSizeSync();
           callbacks.emit("onAppViewMounted", { appId: this.appId, view });
         }, 1e3);
       }
@@ -5337,6 +5341,10 @@ const createBoxManager = (manager, callbacks2, emitter, boxEmitter2, options) =>
         var _a;
         return (_a = manager.appManager) == null ? void 0 : _a.notifyContainerRectUpdate(rect);
       },
+      scheduleAppBoxSizeSync: (appId) => {
+        var _a;
+        return (_a = manager.appManager) == null ? void 0 : _a.scheduleAppBoxSizeSync(appId);
+      },
       cleanFocus: () => {
         var _a;
         return (_a = manager.appManager) == null ? void 0 : _a.store.cleanFocus();
@@ -5415,6 +5423,9 @@ class BoxManager {
         });
       }, 200)
     );
+    this.teleBoxManager.events.on("visual_resize", (box) => {
+      this.context.scheduleAppBoxSizeSync(box.id);
+    });
     this.teleBoxManager.events.on("focused", (box) => {
       if (box) {
         if (this.canOperate) {
@@ -5437,6 +5448,7 @@ class BoxManager {
     this.teleBoxManager.events.on(
       "box_status",
       (box) => {
+        this.context.scheduleAppBoxSizeSync(box.id);
         if (this.canOperate) {
           this.context.setBoxStatus(box.id, box.boxStatus);
         }
@@ -5523,6 +5535,7 @@ class BoxManager {
   setBoxesStatus(status) {
     const map = new Map(Object.entries(status != null ? status : {}));
     this.teleBoxManager.setBoxesStatus(map, true);
+    this.context.scheduleAppBoxSizeSync();
     this.context.callbacks.emit("onBoxesStatusChange", map);
     this.context.emitter.emit("boxesStatusChange", map);
   }
@@ -5615,6 +5628,7 @@ class BoxManager {
         if (state.minimized != null) {
           this.teleBoxManager.setMinimized(Boolean(state.minimized), true);
         }
+        this.context.scheduleAppBoxSizeSync(box.id);
       }, 50);
       if (!state.boxStatus) {
         this.context.callbacks.emit("boxStateChange", this.teleBoxManager.state);
@@ -5628,6 +5642,7 @@ class BoxManager {
       const containerRect = { x: 0, y: 0, width: rect.width, height: rect.height };
       this.teleBoxManager.setContainerRect(containerRect);
       this.context.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
+      this.context.scheduleAppBoxSizeSync();
     }
   }
   moveBox({ appId, x, y }) {
@@ -5638,6 +5653,7 @@ class BoxManager {
   }
   resizeBox({ appId, width, height, skipUpdate }) {
     this.teleBoxManager.update(appId, { width, height }, skipUpdate);
+    this.context.scheduleAppBoxSizeSync(appId);
   }
   setBoxMinSize(params) {
     this.teleBoxManager.update(
@@ -5648,6 +5664,7 @@ class BoxManager {
       },
       true
     );
+    this.context.scheduleAppBoxSizeSync(params.appId);
   }
   setBoxTitle(params) {
     this.teleBoxManager.update(params.appId, { title: params.title }, true);
@@ -5661,10 +5678,12 @@ class BoxManager {
   setMaximized(maximized, skipUpdate = true) {
     if (maximized !== this.maximized) {
       this.teleBoxManager.setMaximized(maximized, skipUpdate);
+      this.context.scheduleAppBoxSizeSync();
     }
   }
   setMinimized(minimized, skipUpdate = true) {
     this.teleBoxManager.setMinimized(minimized, skipUpdate);
+    this.context.scheduleAppBoxSizeSync();
   }
   focusTopBox() {
     const boxes = this.teleBoxManager.query();
@@ -5677,6 +5696,7 @@ class BoxManager {
   }
   updateBox(id, payload, skipUpdate = true) {
     this.teleBoxManager.update(id, payload, skipUpdate);
+    this.context.scheduleAppBoxSizeSync(id);
   }
   setReadonly(readonly) {
     this.teleBoxManager.setReadonly(readonly);
@@ -7493,6 +7513,97 @@ const calculateNextIndex = (index2, pageState) => {
   return nextIndex;
 };
 const boxEmitter = new Emittery();
+const BOX_SIZE_EPSILON = 0.5;
+const BOX_SIZE_CONFIRM_DELAY = 100;
+const sizesEqual = (left, right) => Boolean(
+  left && Math.abs(left.width - right.width) <= BOX_SIZE_EPSILON && Math.abs(left.height - right.height) <= BOX_SIZE_EPSILON
+);
+class AppBoxSizeSynchronizer {
+  constructor(appId, getView, getElement, notify, onError) {
+    this.appId = appId;
+    this.getView = getView;
+    this.getElement = getElement;
+    this.notify = notify;
+    this.onError = onError;
+    this.destroyed = false;
+    this.schedule = () => {
+      if (this.destroyed)
+        return;
+      if (this.timer != null)
+        clearTimeout(this.timer);
+      if (this.frame != null) {
+        cancelAnimationFrame(this.frame);
+        this.frame = void 0;
+      }
+      this.pendingSize = void 0;
+      this.timer = setTimeout(() => {
+        this.timer = void 0;
+        this.frame = requestAnimationFrame(this.confirmDOMSize);
+      }, BOX_SIZE_SETTLE_DELAY);
+    };
+    this.confirmDOMSize = () => {
+      var _a, _b, _c, _d;
+      this.frame = void 0;
+      if (this.destroyed)
+        return;
+      const element2 = this.getElement();
+      if (!element2)
+        return;
+      const rect = element2.getBoundingClientRect();
+      const size2 = { width: rect.width, height: rect.height };
+      if (!Number.isFinite(size2.width) || !Number.isFinite(size2.height) || size2.width <= 0 || size2.height <= 0) {
+        this.pendingSize = void 0;
+        return;
+      }
+      if (!sizesEqual(this.pendingSize, size2)) {
+        this.pendingSize = size2;
+        this.timer = setTimeout(() => {
+          this.timer = void 0;
+          this.frame = requestAnimationFrame(this.confirmDOMSize);
+        }, BOX_SIZE_CONFIRM_DELAY);
+        return;
+      }
+      this.pendingSize = void 0;
+      const view = this.getView();
+      if (view && !sizesEqual(view.size, size2)) {
+        try {
+          if (typeof view.refreshSize === "function") {
+            view.refreshSize(size2.width, size2.height);
+          } else if (typeof ((_a = view.screen) == null ? void 0 : _a.refreshSize) === "function") {
+            const resizeObserver = view.screen.resizeObserver;
+            (_b = resizeObserver == null ? void 0 : resizeObserver.disconnect) == null ? void 0 : _b.call(resizeObserver);
+            try {
+              view.screen.refreshSize(size2.width, size2.height);
+            } finally {
+              if (view.divElement)
+                (_c = resizeObserver == null ? void 0 : resizeObserver.observe) == null ? void 0 : _c.call(resizeObserver, view.divElement);
+            }
+          }
+        } catch (error) {
+          (_d = this.onError) == null ? void 0 : _d.call(this, error);
+        }
+      }
+      if (!sizesEqual(this.lastNotifiedSize, size2)) {
+        this.lastNotifiedSize = size2;
+        this.notify({ appId: this.appId, ...size2 });
+      }
+    };
+  }
+  destroy() {
+    this.destroyed = true;
+    if (this.timer != null) {
+      clearTimeout(this.timer);
+      this.timer = void 0;
+    }
+    if (this.frame != null) {
+      cancelAnimationFrame(this.frame);
+      this.frame = void 0;
+    }
+    this.pendingSize = void 0;
+    this.lastNotifiedSize = void 0;
+  }
+}
+const APP_SETUP_WATCHDOG_TIMEOUT = 1e4;
 const _AppProxy = class {
   constructor(params, manager, appId, isAddApp) {
     var _a;
@@ -7503,6 +7614,10 @@ const _AppProxy = class {
     this.viewManager = this.manager.viewManager;
     this.store = this.manager.store;
     this.status = "normal";
+    this.scheduleBoxSizeSync = () => {
+      if (this.status !== "destroyed")
+        this.boxSizeSynchronizer.schedule();
+    };
     this.getAppInitState = (id) => {
       var _a2, _b, _c, _d;
       const attrs = this.store.getAppState(id);
@@ -7597,6 +7712,26 @@ const _AppProxy = class {
     this.stateKey = `${this.id}_state`;
     this.appProxies.set(this.id, this);
     this.appEmitter = new Emittery();
+    this.boxSizeSynchronizer = new AppBoxSizeSynchronizer(
+      this.id,
+      () => this.view,
+      () => {
+        var _a2, _b;
+        return ((_a2 = this.view) == null ? void 0 : _a2.divElement) || ((_b = this.box) == null ? void 0 : _b.$content);
+      },
+      (payload) => {
+        this.appEmitter.emit("boxSizeChange", payload).catch((error) => {
+          var _a2;
+          (_a2 = this.Logger) == null ? void 0 : _a2.error(
+            `[WindowManager]: failed to notify app box size change: ${error}`
+          );
+        });
+      },
+      (error) => {
+        var _a2;
+        (_a2 = this.Logger) == null ? void 0 : _a2.error(`[WindowManager]: failed to refresh app view size: ${error}`);
+      }
+    );
     this.appListener = this.makeAppEventListener(this.id);
     this.isAddApp = isAddApp;
     this.initScenes();
@@ -7725,8 +7860,12 @@ const _AppProxy = class {
           this.Logger && this.Logger.info(
             `[WindowManager]: setup app ${this.kind}, appId: ${appId}`
           );
-          const result = await app.setup(context);
+          const setupResult = await this.runAppSetup(appId, app, context);
+          if (!setupResult.succeeded)
+            return;
+          const { result } = setupResult;
           this.appResult = result;
+          this.scheduleBoxSizeSync();
           appRegister.notifyApp(this.kind, "created", { appId, result });
           this.afterSetupApp(boxInitState);
           this.fixMobileSize();
@@ -7763,6 +7902,36 @@ const _AppProxy = class {
       throw new Error(`[WindowManager]: app setup error: ${error.message}`);
     }
   }
+  async runAppSetup(appId, app, context) {
+    var _a;
+    this.clearSetupWatchdog();
+    this.setupWatchdogTimer = setTimeout(() => {
+      var _a2;
+      this.setupWatchdogTimer = void 0;
+      if (this.status === "destroyed")
+        return;
+      (_a2 = this.Logger) == null ? void 0 : _a2.warn(
+        `[WindowManager]: hydrate timeout, stage: app setup, kind: ${this.kind}, appId: ${appId}, timeout: ${APP_SETUP_WATCHDOG_TIMEOUT}ms`
+      );
+    }, APP_SETUP_WATCHDOG_TIMEOUT);
+    try {
+      return { succeeded: true, result: await app.setup(context) };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      (_a = this.Logger) == null ? void 0 : _a.error(
+        `[WindowManager]: app setup error, kind: ${this.kind}, appId: ${appId}, status: ${this.status}, error: ${message}`
+      );
+      return { succeeded: false };
+    } finally {
+      this.clearSetupWatchdog();
+    }
+  }
+  clearSetupWatchdog() {
+    if (this.setupWatchdogTimer != null) {
+      clearTimeout(this.setupWatchdogTimer);
+      this.setupWatchdogTimer = void 0;
+    }
+  }
   fixMobileSize() {
     var _a, _b;
     const box = (_a = this.boxManager) == null ? void 0 : _a.getBox(this.id);
@@ -7934,6 +8103,8 @@ const _AppProxy = class {
     if (this.status === "destroyed")
       return;
     this.status = "destroyed";
+    this.clearSetupWatchdog();
+    this.boxSizeSynchronizer.destroy();
     try {
       await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
       await this.appEmitter.emit("destroy", { error });
@@ -8637,6 +8808,15 @@ class AppManager {
         });
         callbacks.emit("onBoxResize", payload);
       }
+      this.scheduleAppBoxSizeSync(payload.appId);
+    };
+    this.scheduleAppBoxSizeSync = (appId) => {
+      var _a;
+      if (appId) {
+        (_a = this.appProxies.get(appId)) == null ? void 0 : _a.scheduleBoxSizeSync();
+      } else {
+        this.appProxies.forEach((appProxy) => appProxy.scheduleBoxSizeSync());
+      }
     };
     this.onBoxFocus = (payload) => {
       this.windowManger.safeSetAttributes({ focus: payload.appId });
@@ -9328,16 +9508,59 @@ class AppManager {
 AppManager.kind = "AppManager";
 const ResizeObserver = window.ResizeObserver || ResizeObserver$1;
 class ContainerResizeObserver {
-  constructor(emitter) {
+  constructor(emitter, logger, getInternalState) {
     this.emitter = emitter;
+    this.getInternalState = getInternalState;
     this.updateSizerLocalConsole = new LocalConsole("updateSizer", 100);
+    this.flushContainerStateLog = () => {
+      var _a, _b, _c, _d;
+      this.containerStateLogTimer = void 0;
+      const pendingState = this.pendingContainerState;
+      this.pendingContainerState = void 0;
+      if (!pendingState || !this.containerStateArgusLog || !this.container || !this.sizer || !this.wrapper) {
+        return;
+      }
+      const internalState = (_a = this.getInternalState) == null ? void 0 : _a.call(this);
+      const root = this.container.parentElement;
+      const rootRect = root == null ? void 0 : root.getBoundingClientRect();
+      const playgroundRect = this.container.getBoundingClientRect();
+      const sizerRect = this.sizer.getBoundingClientRect();
+      const wrapperRect = this.wrapper.getBoundingClientRect();
+      const mainViewRect = (_b = internalState == null ? void 0 : internalState.mainViewElement) == null ? void 0 : _b.getBoundingClientRect();
+      const rootStyle = root ? window.getComputedStyle(root) : void 0;
+      this.containerStateArgusLog.log(
+        `origin: ${pendingState.origin || "unknown"}, connected: ${Boolean(
+          root == null ? void 0 : root.isConnected
+        )}, observed: ${this.formatSize(
+          pendingState.observedSize || playgroundRect
+        )}, root: ${this.formatSize(rootRect)}, playground: ${this.formatSize(
+          playgroundRect
+        )}, sizer: ${this.formatSize(sizerRect)}, wrapper: ${this.formatSize(
+          wrapperRect
+        )}, mainViewDOM: ${this.formatSize(mainViewRect)}, mainViewSize: ${this.formatSize(
+          internalState == null ? void 0 : internalState.mainViewSize
+        )}, teleBoxRect: ${this.formatSize(
+          internalState == null ? void 0 : internalState.teleBoxContainerRect
+        )}, didRelease: ${(_c = internalState == null ? void 0 : internalState.mainViewDidRelease) != null ? _c : "unknown"}, ratio: ${(_d = internalState == null ? void 0 : internalState.containerSizeRatio) != null ? _d : "unknown"}, display: ${(rootStyle == null ? void 0 : rootStyle.display) || "unknown"}, visibility: ${(rootStyle == null ? void 0 : rootStyle.visibility) || "unknown"}, clientRects: ${(root == null ? void 0 : root.getClientRects().length) || 0}, inViewport: ${rootRect ? rootRect.bottom > 0 && rootRect.right > 0 && rootRect.top < window.innerHeight && rootRect.left < window.innerWidth : false}`
+      );
+    };
+    if (logger) {
+      this.containerStateArgusLog = new ArgusLog(logger, "containerState");
+    }
   }
-  static create(container, sizer, wrapper, emitter) {
-    const containerResizeObserver = new ContainerResizeObserver(emitter);
+  static create(container, sizer, wrapper, emitter, logger, getInternalState) {
+    const containerResizeObserver = new ContainerResizeObserver(
+      emitter,
+      logger,
+      getInternalState
+    );
     containerResizeObserver.observePlaygroundSize(container, sizer, wrapper);
     return containerResizeObserver;
   }
   observePlaygroundSize(container, sizer, wrapper) {
+    this.container = container;
+    this.sizer = sizer;
+    this.wrapper = wrapper;
     this.updateSizer(
       container.getBoundingClientRect(),
       sizer,
@@ -9360,6 +9583,7 @@ class ContainerResizeObserver {
     this.containerResizeObserver.observe(container);
   }
   updateSizer({ width, height }, sizer, wrapper, origin) {
+    const observedSize = { width, height };
     if (width && height) {
       if (height / width > WindowManager.containerSizeRatio) {
         height = width * WindowManager.containerSizeRatio;
@@ -9380,13 +9604,48 @@ class ContainerResizeObserver {
         origin
       });
     }
+    this.scheduleContainerStateLog(origin, observedSize);
+  }
+  logCurrentState(origin) {
+    this.scheduleContainerStateLog(origin);
+  }
+  scheduleContainerStateLog(origin, observedSize) {
+    if (!this.containerStateArgusLog || !this.container || !this.sizer || !this.wrapper)
+      return;
+    this.pendingContainerState = {
+      origin,
+      observedSize: observedSize ? { width: observedSize.width, height: observedSize.height } : void 0
+    };
+    if (this.containerStateLogTimer != null) {
+      clearTimeout(this.containerStateLogTimer);
+    }
+    this.containerStateLogTimer = setTimeout(
+      this.flushContainerStateLog,
+      CONTAINER_STATE_LOG_DEBOUNCE
+    );
+  }
+  formatSize(rect) {
+    if (!rect)
+      return "unknown";
+    return `${Math.round(rect.width * 100) / 100}x${Math.round(rect.height * 100) / 100}`;
   }
   disconnect() {
-    var _a, _b;
+    var _a, _b, _c;
     this.updateSizerLocalConsole.destroy();
-    (_a = this.containerResizeObserver) == null ? void 0 : _a.disconnect();
-    (_b = this.disposer) == null ? void 0 : _b.call(this);
+    if (this.containerStateLogTimer != null) {
+      clearTimeout(this.containerStateLogTimer);
+      this.containerStateLogTimer = void 0;
+    }
+    this.pendingContainerState = void 0;
+    (_a = this.containerStateArgusLog) == null ? void 0 : _a.destroy();
+    this.containerStateArgusLog = void 0;
+    (_b = this.containerResizeObserver) == null ? void 0 : _b.disconnect();
+    (_c = this.disposer) == null ? void 0 : _c.call(this);
     this.disposer = void 0;
+    this.container = void 0;
+    this.sizer = void 0;
+    this.wrapper = void 0;
+    this.getInternalState = void 0;
   }
 }
 class PageStateImpl {
@@ -10243,8 +10502,8 @@ const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.18";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.3.0", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.56" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.19", "@netless/app-media-player": "0.1.4", "@netless/app-presentation": "^0.1.10", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "1.0.0-next.30", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "^2.16.56" } };
+    this.version = "1.0.20";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.3.0", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.57" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.19", "@netless/app-media-player": "0.1.4", "@netless/app-presentation": "^0.1.10", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "1.0.0-next.30", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "^2.16.57" } };
     this.emitter = callbacks;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
@@ -10274,7 +10533,7 @@ const _WindowManager = class extends InvisiblePlugin {
       );
     };
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.3.0", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.56" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.19", "@netless/app-media-player": "0.1.4", "@netless/app-presentation": "^0.1.10", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "1.0.0-next.30", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "^2.16.56" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.3.0", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.57" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.19", "@netless/app-media-player": "0.1.4", "@netless/app-presentation": "^0.1.10", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "1.0.0-next.30", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "^2.16.57" } };
     this.emitter.on("mainViewScenePathChange", this.onMainViewScenePathChangeHandler);
   }
   get Logger() {
@@ -10433,7 +10692,19 @@ const _WindowManager = class extends InvisiblePlugin {
       playground,
       sizer,
       wrapper,
-      internalEmitter
+      internalEmitter,
+      manager.Logger,
+      () => {
+        var _a, _b;
+        const mainView = (_a = manager.appManager) == null ? void 0 : _a.mainViewProxy.view;
+        return {
+          mainViewElement: mainView == null ? void 0 : mainView.divElement,
+          mainViewSize: mainView == null ? void 0 : mainView.size,
+          teleBoxContainerRect: (_b = manager.boxManager) == null ? void 0 : _b.teleBoxManager.containerRect,
+          mainViewDidRelease: Boolean(mainView == null ? void 0 : mainView.didRelease),
+          containerSizeRatio: manager.containerSizeRatio
+        };
+      }
     );
     _WindowManager.wrapper = wrapper;
     _WindowManager.sizer = sizer;
@@ -10443,7 +10714,7 @@ const _WindowManager = class extends InvisiblePlugin {
     return appRegister.registered;
   }
   bindContainer(container) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (isRoom(this.displayer) && this.room.phase !== RoomPhase.Connected) {
       throw new BindContainerRoomPhaseInvalidError();
     }
@@ -10481,7 +10752,8 @@ const _WindowManager = class extends InvisiblePlugin {
     (_d = this.appManager) == null ? void 0 : _d.resetMinimized();
     (_e = this.appManager) == null ? void 0 : _e.displayerWritableListener(!this.room.isWritable);
     _WindowManager.container = container;
-    (_f = this.extendPluginManager) == null ? void 0 : _f.refreshContainer(container);
+    (_f = this.containerResizeObserver) == null ? void 0 : _f.logCurrentState("bindContainer");
+    (_g = this.extendPluginManager) == null ? void 0 : _g.refreshContainer(container);
   }
   bindCollectorContainer(container) {
     if (_WindowManager.isCreated && this.boxManager) {