@netless/window-manager 1.0.0-canary.0 → 1.0.0-canary.3

package/dist/index.es.js

@@ -19,10 +19,11 @@ var __spreadValues = (a2, b2) => {
 var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 import pRetry from "p-retry";
 import Emittery from "emittery";
-import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$1, pick, throttle, delay, isInteger, orderBy, isEmpty, isFunction, isNumber, isNull } from "lodash";
-import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, autorun, toJS, listenDisposed, unlistenDisposed, AnimationMode, isPlayer, isRoom, WhiteVersion, ApplianceNames, RoomPhase, InvisiblePlugin, ViewMode } from "white-web-sdk";
+import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$1, isNumber, pick, throttle, delay, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
+import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, WhiteVersion, autorun, toJS, listenDisposed, unlistenDisposed, AnimationMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin, ViewMode } from "white-web-sdk";
 import { v4 } from "uuid";
 import { genUID, SideEffectManager } from "side-effect-manager";
+import { Val, ValManager, combine, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
 import { ResizeObserver as ResizeObserver$2 } from "@juggle/resize-observer";
 import p$1 from "video.js";
 var Events = /* @__PURE__ */ ((Events2) => {
@@ -77,6 +78,7 @@ const DEFAULT_CONTAINER_RATIO = 9 / 16;
 const ROOT_DIR = "/";
 const INIT_DIR = "/init";
 const SETUP_APP_DELAY = 50;
+const MAX_PAGE_SIZE = 500;
 const callbacks$1 = new Emittery();
 class AppCreateQueue {
   constructor() {
@@ -688,7 +690,7 @@ class Storage {
     this.id = id2 || null;
     this._state = {};
     const rawState = this._getRawState(this._state);
-    if (this._context.getIsWritable()) {
+    if (this._context.isWritable) {
       if (this.id === null) {
         if (context.isAddApp && defaultState) {
           this.setState(defaultState);
@@ -748,7 +750,7 @@ class Storage {
       console.error(new Error(`Cannot call setState on destroyed Storage "${this.id}".`));
       return;
     }
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot setState on Storage "${this.id}" without writable access`), state);
       return;
     }
@@ -788,7 +790,7 @@ class Storage {
       console.error(new Error(`Cannot empty destroyed Storage "${this.id}".`));
       return;
     }
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot empty Storage "${this.id}" without writable access.`));
       return;
     }
@@ -798,7 +800,7 @@ class Storage {
     if (this.id === null) {
       throw new Error(`Cannot delete main Storage`);
     }
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot delete Storage "${this.id}" without writable access.`));
       return;
     }
@@ -890,6 +892,95 @@ class Storage {
     }
   }
 }
+class WhiteBoardView {
+  constructor(appContext, appProxy, removeViewWrapper) {
+    this.appContext = appContext;
+    this.appProxy = appProxy;
+    this.removeViewWrapper = removeViewWrapper;
+    this.nextPage = async () => {
+      const nextIndex = this.pageState.index + 1;
+      return this.jumpPage(nextIndex);
+    };
+    this.prevPage = async () => {
+      const nextIndex = this.pageState.index - 1;
+      return this.jumpPage(nextIndex);
+    };
+    this.jumpPage = async (index2) => {
+      if (index2 < 0 || index2 >= this.pageState.length) {
+        console.warn(`[WindowManager]: index ${index2} out of range`);
+        return false;
+      }
+      this.appProxy.setSceneIndex(index2);
+      return true;
+    };
+    this.addPage = async (params) => {
+      const after = params == null ? void 0 : params.after;
+      const scene = params == null ? void 0 : params.scene;
+      const scenePath = this.appProxy.scenePath;
+      if (!scenePath)
+        return;
+      if (after) {
+        const nextIndex = this.pageState.index + 1;
+        putScenes(this.appContext.room, scenePath, [scene || {}], nextIndex);
+      } else {
+        putScenes(this.appContext.room, scenePath, [scene || {}]);
+      }
+    };
+    this.removePage = async (index2) => {
+      const needRemoveIndex = index2 === void 0 ? this.pageState.index : index2;
+      if (this.pageState.length === 1) {
+        console.warn(`[WindowManager]: can not remove the last page`);
+        return false;
+      }
+      if (needRemoveIndex < 0 || needRemoveIndex >= this.pageState.length) {
+        console.warn(`[WindowManager]: page index ${index2} out of range`);
+        return false;
+      }
+      return this.appProxy.removeSceneByIndex(needRemoveIndex);
+    };
+    const pageState$ = new Val(appProxy.pageState);
+    this.pageState$ = pageState$;
+    appProxy.appEmitter.on("pageStateChange", (pageState) => {
+      pageState$.setValue(pageState);
+    });
+  }
+  get pageState() {
+    return this.pageState$.value;
+  }
+  destroy() {
+    this.removeViewWrapper();
+  }
+}
+const setupWrapper = (root) => {
+  const playground = document.createElement("div");
+  playground.className = "netless-window-manager-playground";
+  const mainViewElement = document.createElement("div");
+  mainViewElement.className = "netless-window-manager-main-view";
+  playground.appendChild(mainViewElement);
+  root.appendChild(playground);
+  return { playground, mainViewElement };
+};
+const checkVersion = () => {
+  const version = getVersionNumber(WhiteVersion);
+  if (version < getVersionNumber(REQUIRE_VERSION)) {
+    throw new WhiteWebSDKInvalidError(REQUIRE_VERSION);
+  }
+};
+const findMemberByUid = (room, uid) => {
+  const roomMembers = room == null ? void 0 : room.state.roomMembers;
+  return roomMembers == null ? void 0 : roomMembers.find((member) => {
+    var _a;
+    return ((_a = member.payload) == null ? void 0 : _a.uid) === uid;
+  });
+};
+const serializeRoomMembers = (members) => {
+  return members.map((member) => {
+    var _a;
+    return __spreadValues({
+      uid: ((_a = member.payload) == null ? void 0 : _a.uid) || ""
+    }, member);
+  });
+};
 class AppContext {
   constructor(manager, boxManager, appId, appProxy, appOptions) {
     this.manager = manager;
@@ -910,9 +1001,6 @@ class AppContext {
     };
     this.store = this.manager.store;
     this.isReplay = this.manager.isReplay;
-    this.getDisplayer = () => {
-      return this.manager.displayer;
-    };
     this.getAttributes = () => {
       return this.appProxy.attributes;
     };
@@ -924,36 +1012,49 @@ class AppContext {
         return appAttr == null ? void 0 : appAttr.options["scenes"];
       }
     };
-    this.getView = () => {
-      return this.appProxy.view;
+    this.createWhiteBoardView = (size2) => {
+      var _a;
+      if (this.whiteBoardView) {
+        return this.whiteBoardView;
+      }
+      let view = this.view;
+      if (!view) {
+        view = this.appProxy.createAppDir();
+      }
+      const viewWrapper = document.createElement("div");
+      viewWrapper.className = "window-manager-view-wrapper";
+      (_a = this.box.$content.parentElement) == null ? void 0 : _a.appendChild(viewWrapper);
+      const removeViewWrapper = () => {
+        var _a2;
+        (_a2 = this.box.$content.parentElement) == null ? void 0 : _a2.removeChild(viewWrapper);
+      };
+      view.divElement = viewWrapper;
+      if (this.isAddApp) {
+        this.initPageSize(size2);
+      }
+      this.whiteBoardView = new WhiteBoardView(this, this.appProxy, removeViewWrapper);
+      return this.whiteBoardView;
     };
-    this.mountView = (dom) => {
-      const view = this.getView();
-      if (view) {
-        view.divElement = dom;
-        setTimeout(() => {
-          var _a;
-          (_a = this.getRoom()) == null ? void 0 : _a.refreshViewSize();
-        }, 1e3);
+    this.initPageSize = (size2) => {
+      if (!isNumber(size2))
+        return;
+      if (!this.appProxy.scenePath)
+        return;
+      if (this.appProxy.pageState.length >= size2)
+        return;
+      if (size2 <= 0 || size2 >= MAX_PAGE_SIZE) {
+        throw Error(`[WindowManager]: size ${size2} muse be in range [1, ${MAX_PAGE_SIZE}]`);
       }
+      const needInsert = size2 - this.appProxy.pageState.length;
+      const startPageNumber = this.appProxy.pageState.length;
+      const scenes = new Array(needInsert).fill({}).map((_2, index2) => {
+        return { name: `${startPageNumber + index2 + 1}` };
+      });
+      putScenes(this.room, this.appProxy.scenePath, scenes);
     };
     this.getInitScenePath = () => {
       return this.manager.getAppInitPath(this.appId);
     };
-    this.getIsWritable = () => {
-      return this.manager.canOperate;
-    };
-    this.getBox = () => {
-      const box = this.boxManager.getBox(this.appId);
-      if (box) {
-        return box;
-      } else {
-        throw new BoxNotCreatedError();
-      }
-    };
-    this.getRoom = () => {
-      return this.manager.room;
-    };
     this.setAttributes = (attributes) => {
       this.manager.safeSetAttributes({ [this.appId]: attributes });
     };
@@ -967,7 +1068,7 @@ class AppContext {
       if (!this.appProxy.box)
         return;
       this.appProxy.setFullPath(scenePath);
-      (_a = this.getRoom()) == null ? void 0 : _a.setScenePath(scenePath);
+      (_a = this.room) == null ? void 0 : _a.setScenePath(scenePath);
     };
     this.getAppOptions = () => {
       return typeof this.appOptions === "function" ? this.appOptions() : this.appOptions;
@@ -990,92 +1091,93 @@ class AppContext {
       return () => this.manager.displayer.removeMagixEventListener(appScopeEvent, handler);
     };
     this.removeMagixEventListener = this.manager.displayer.removeMagixEventListener.bind(this.manager.displayer);
-    this.nextPage = async () => {
-      const nextIndex = this.pageState.index + 1;
-      if (nextIndex > this.pageState.length - 1) {
-        console.warn("[WindowManager] nextPage: index out of range");
-        return false;
-      }
-      this.appProxy.setSceneIndex(nextIndex);
-      return true;
-    };
-    this.prevPage = async () => {
-      const nextIndex = this.pageState.index - 1;
-      if (nextIndex < 0) {
-        console.warn("[WindowManager] prevPage: index out of range");
-        return false;
-      }
-      this.appProxy.setSceneIndex(nextIndex);
-      return true;
-    };
-    this.addPage = async (params) => {
-      const after = params == null ? void 0 : params.after;
-      const scene = params == null ? void 0 : params.scene;
-      const scenePath = this.appProxy.scenePath;
-      if (!scenePath)
-        return;
-      if (after) {
-        const nextIndex = this.pageState.index + 1;
-        putScenes(this.manager.room, scenePath, [scene || {}], nextIndex);
-      } else {
-        putScenes(this.manager.room, scenePath, [scene || {}]);
-      }
-    };
-    this.removePage = async (index2) => {
-      const needRemoveIndex = index2 === void 0 ? this.pageState.index : index2;
-      if (this.pageState.length === 1) {
-        console.warn(`[WindowManager]: can not remove the last page`);
-        return false;
-      }
-      if (needRemoveIndex < 0 || needRemoveIndex >= this.pageState.length) {
-        console.warn(`[WindowManager]: page index ${index2} out of range`);
-        return false;
-      }
-      return this.appProxy.removeSceneByIndex(needRemoveIndex);
-    };
     this.emitter = appProxy.appEmitter;
     this.isAddApp = appProxy.isAddApp;
   }
+  get displayer() {
+    return this.manager.displayer;
+  }
+  get view() {
+    return this.appProxy.view;
+  }
+  get isWritable() {
+    return this.manager.canOperate;
+  }
+  get box() {
+    const box = this.boxManager.getBox(this.appId);
+    if (box) {
+      return box;
+    } else {
+      throw new BoxNotCreatedError();
+    }
+  }
+  get room() {
+    return this.manager.room;
+  }
+  get members() {
+    return this.manager.members;
+  }
+  get memberState() {
+    const self2 = findMemberByUid(this.room, this.manager.uid);
+    if (!self2) {
+      throw new Error(`Member ${this.manager.uid} not found.`);
+    }
+    return __spreadValues({
+      uid: this.manager.uid
+    }, self2);
+  }
   get storage() {
     if (!this._storage) {
       this._storage = new Storage(this);
     }
     return this._storage;
   }
-  get pageState() {
-    return this.appProxy.pageState;
-  }
 }
 class AppPageStateImpl {
   constructor(params) {
     this.params = params;
     this.sceneNode = null;
-    this.onSceneChange = (node) => {
-      this.sceneNode = node;
+    this.createSceneNode = (scenePath2) => {
+      this.scenePath = scenePath2;
+      if (this.sceneNode) {
+        this.sceneNode.dispose();
+      }
+      this.sceneNode = this.params.displayer.createScenesCallback(scenePath2, {
+        onAddScene: this.onSceneChange,
+        onRemoveScene: this.onSceneChange
+      });
+      return this.sceneNode;
+    };
+    this.onSceneChange = () => {
       this.params.notifyPageStateChange();
     };
     const { displayer, scenePath } = this.params;
+    this.view = this.params.view;
     if (scenePath) {
+      this.scenePath = scenePath;
       this.sceneNode = displayer.createScenesCallback(scenePath, {
         onAddScene: this.onSceneChange,
         onRemoveScene: this.onSceneChange
       });
     }
   }
+  setView(view) {
+    this.view = view;
+  }
   getFullPath(index2) {
     var _a;
     const scenes = (_a = this.sceneNode) == null ? void 0 : _a.scenes;
-    if (this.params.scenePath && scenes) {
+    if (this.scenePath && scenes) {
       const name = scenes[index2];
       if (name) {
-        return `${this.params.scenePath}/${name}`;
+        return `${this.scenePath}/${name}`;
       }
     }
   }
   toObject() {
     var _a, _b;
     return {
-      index: ((_a = this.params.view) == null ? void 0 : _a.focusSceneIndex) || 0,
+      index: ((_a = this.view) == null ? void 0 : _a.focusSceneIndex) || 0,
       length: ((_b = this.sceneNode) == null ? void 0 : _b.scenes.length) || 0
     };
   }
@@ -1282,6 +1384,7 @@ class AppProxy {
     this.viewManager = this.manager.viewManager;
     this.store = this.manager.store;
     this.status = "normal";
+    this.sideEffectManager = new SideEffectManager();
     this.getAppInitState = (id2) => {
       var _a2, _b;
       const attrs = this.store.getAppState(id2);
@@ -1347,10 +1450,13 @@ class AppProxy {
       }
     }, 50);
     this.notifyPageStateChange = debounce(() => {
-      this.appEmitter.emit("pageStateChange", this.pageState);
+      if (this.pageState) {
+        this.appEmitter.emit("pageStateChange", this.pageState);
+      }
     }, 50);
     this.kind = params.kind;
     this.id = appId;
+    this.appScenePath = `/${this.id}-app-dir`;
     this.stateKey = `${this.id}_state`;
     this.appProxies.set(this.id, this);
     this.appEmitter = new Emittery();
@@ -1360,12 +1466,36 @@ class AppProxy {
     if ((_a = this.params.options) == null ? void 0 : _a.scenePath) {
       this.createView();
     }
+    if (!this.scenePath) {
+      this.scenePath = this.appScenePath;
+    }
     this._pageState = new AppPageStateImpl({
       displayer: this.manager.displayer,
       scenePath: this.scenePath,
       view: this.view,
       notifyPageStateChange: this.notifyPageStateChange
     });
+    this.sideEffectManager.add(() => {
+      return () => this._pageState.destroy();
+    });
+    this.sideEffectManager.add(() => {
+      return emitter.on("roomMembersChange", (members) => {
+        this.appEmitter.emit("roomMembersChange", members);
+      });
+    });
+  }
+  createAppDir() {
+    const scenePath = this.scenePath || this.appScenePath;
+    const sceneNode = this._pageState.createSceneNode(scenePath);
+    if (!sceneNode) {
+      putScenes(this.manager.room, scenePath, [{ name: "1" }]);
+      this._pageState.createSceneNode(scenePath);
+      this.setSceneIndex(0);
+    }
+    this.scenes = entireScenes(this.manager.displayer)[scenePath];
+    const view = this.createView();
+    this._pageState.setView(view);
+    return view;
   }
   initScenes() {
     var _a;
@@ -1594,8 +1724,8 @@ class AppProxy {
     }
     return fullPath;
   }
-  async createView() {
-    const view = await this.viewManager.createView(this.id);
+  createView() {
+    const view = this.viewManager.createView(this.id);
     this.setViewFocusScenePath();
     return view;
   }
@@ -1604,7 +1734,7 @@ class AppProxy {
   }
   async removeSceneByIndex(index2) {
     const scenePath = this._pageState.getFullPath(index2);
-    if (scenePath) {
+    if (scenePath && this.pageState) {
       const nextIndex = calculateNextIndex(index2, this.pageState);
       this.setSceneIndexWithoutSync(nextIndex);
       this.manager.dispatchInternalEvent(Events.SetAppFocusIndex, {
@@ -1657,13 +1787,13 @@ class AppProxy {
       }
     }
     this.appProxies.delete(this.id);
-    this._pageState.destroy();
     this.viewManager.destroyView(this.id);
     this.manager.appStatus.delete(this.id);
     (_b = this.manager.refresher) == null ? void 0 : _b.remove(this.id);
     (_c = this.manager.refresher) == null ? void 0 : _c.remove(this.stateKey);
     (_d = this.manager.refresher) == null ? void 0 : _d.remove(`${this.id}-fullPath`);
     this._prevFullPath = void 0;
+    this.sideEffectManager.flushAll();
   }
   close() {
     return this.destroy(true, true, false);
@@ -1844,7 +1974,7 @@ class MainViewProxy {
         }
       });
     });
-    const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.teleBoxManager.stageRect;
+    const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
     if (rect) {
       this.synchronizer.setRect(rect);
     }
@@ -1933,7 +2063,7 @@ class MainViewProxy {
   }
   getStageSize() {
     var _a;
-    const stage = (_a = this.manager.boxManager) == null ? void 0 : _a.teleBoxManager.stageRect;
+    const stage = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
     if (stage) {
       return { width: stage.width, height: stage.height };
     }
@@ -2299,6 +2429,9 @@ class AppManager {
       this.appProxies.forEach((appProxy) => {
         appProxy.appEmitter.emit("roomStateChange", state);
       });
+      if (state.roomMembers) {
+        emitter.emit("roomMembersChange", this.members);
+      }
       emitter.emit("observerIdChange", this.displayer.observerId);
     };
     this.displayerWritableListener = (isReadonly) => {
@@ -2412,6 +2545,9 @@ class AppManager {
     var _a;
     return ((_a = this.room) == null ? void 0 : _a.uid) || "";
   }
+  get members() {
+    return serializeRoomMembers(this.displayer.state.roomMembers);
+  }
   getMainViewSceneDir() {
     const scenePath = this.store.getMainViewScenePath();
     if (scenePath) {
@@ -2723,28 +2859,6 @@ class AppManager {
     this._prevSceneIndex = void 0;
   }
 }
-const setupWrapper = (root) => {
-  const playground = document.createElement("div");
-  playground.className = "netless-window-manager-playground";
-  const mainViewElement = document.createElement("div");
-  mainViewElement.className = "netless-window-manager-main-view";
-  playground.appendChild(mainViewElement);
-  root.appendChild(playground);
-  return { playground, mainViewElement };
-};
-const checkVersion = () => {
-  const version = getVersionNumber(WhiteVersion);
-  if (version < getVersionNumber(REQUIRE_VERSION)) {
-    throw new WhiteWebSDKInvalidError(REQUIRE_VERSION);
-  }
-};
-const findMemberByUid = (room, uid) => {
-  const roomMembers = room == null ? void 0 : room.state.roomMembers;
-  return roomMembers == null ? void 0 : roomMembers.find((member) => {
-    var _a;
-    return ((_a = member.payload) == null ? void 0 : _a.uid) === uid;
-  });
-};
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -3587,279 +3701,6 @@ var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
   }
   return true;
 };
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a2, b2) => {
-  for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp$1.call(b2, prop))
-      __defNormalProp$1(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b2)) {
-      if (__propIsEnum$1.call(b2, prop))
-        __defNormalProp$1(a2, prop, b2[prop]);
-    }
-  return a2;
-};
-var __spreadProps$1 = (a2, b2) => __defProps$1(a2, __getOwnPropDescs$1(b2));
-var __publicField = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class Subscribers {
-  constructor(beforeSubscribe) {
-    __publicField(this, "_subscribers");
-    __publicField(this, "_bSub");
-    __publicField(this, "_bSubDisposer");
-    this._bSub = beforeSubscribe;
-  }
-  get size() {
-    return this._subscribers ? this._subscribers.size : 0;
-  }
-  invoke(newValue, meta) {
-    if (this._subscribers) {
-      this._subscribers.forEach((subscriber) => subscriber(newValue, meta));
-    }
-  }
-  add(subscribe) {
-    if (this._bSub && (!this._subscribers || this._subscribers.size <= 0)) {
-      this._bSubDisposer = this._bSub();
-    }
-    if (!this._subscribers) {
-      this._subscribers = /* @__PURE__ */ new Set();
-    }
-    this._subscribers.add(subscribe);
-  }
-  remove(subscriber) {
-    if (this._subscribers) {
-      this._subscribers.delete(subscriber);
-    }
-    if (this._subscribers && this._subscribers.size <= 0) {
-      if (this._bSubDisposer) {
-        const _bSubDisposer = this._bSubDisposer;
-        this._bSubDisposer = null;
-        _bSubDisposer();
-      }
-    }
-  }
-  clear() {
-    if (this._subscribers) {
-      this._subscribers.clear();
-    }
-    if (this._bSubDisposer) {
-      const _bSubDisposer = this._bSubDisposer;
-      this._bSubDisposer = null;
-      _bSubDisposer();
-    }
-  }
-  destroy() {
-    this.clear();
-  }
-}
-class ReadonlyVal {
-  constructor(value, config) {
-    __publicField(this, "_subscribers");
-    __publicField(this, "_value");
-    this._value = value;
-    let beforeSubscribe;
-    if (config) {
-      if (config.compare) {
-        this.compare = config.compare;
-      }
-      if (config.beforeSubscribe) {
-        const _beforeSubscribe = config.beforeSubscribe;
-        const _setValue = this._setValue.bind(this);
-        beforeSubscribe = () => _beforeSubscribe(_setValue);
-      }
-    }
-    this._subscribers = new Subscribers(beforeSubscribe);
-  }
-  _setValue(value, meta) {
-    if (!this.compare(value, this._value)) {
-      this._value = value;
-      this._subscribers.invoke(value, meta);
-    }
-  }
-  get value() {
-    return this._value;
-  }
-  reaction(subscriber) {
-    this._subscribers.add(subscriber);
-    return () => {
-      this._subscribers.remove(subscriber);
-    };
-  }
-  subscribe(subscriber, meta) {
-    const disposer = this.reaction(subscriber);
-    subscriber(this._value, meta);
-    return disposer;
-  }
-  destroy() {
-    this._subscribers.destroy();
-  }
-  unsubscribe(subscriber) {
-    this._subscribers.remove(subscriber);
-  }
-  compare(newValue, oldValue) {
-    return newValue === oldValue;
-  }
-}
-class Val extends ReadonlyVal {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "setValue", this._setValue);
-  }
-}
-class DerivedVal extends ReadonlyVal {
-  constructor(val, transform, config = {}) {
-    super(transform(val.value), __spreadProps$1(__spreadValues$1({}, config), {
-      beforeSubscribe: (setValue) => {
-        const disposer = val.subscribe((newValue, meta) => setValue(transform(newValue), meta));
-        if (config.beforeSubscribe) {
-          const beforeSubscribeDisposer = config.beforeSubscribe(setValue);
-          if (beforeSubscribeDisposer) {
-            return () => {
-              disposer();
-              beforeSubscribeDisposer();
-            };
-          }
-        }
-        return disposer;
-      }
-    }));
-    __publicField(this, "_srcValue");
-    this._srcValue = () => transform(val.value);
-  }
-  get value() {
-    if (this._subscribers.size <= 0) {
-      const value = this._srcValue();
-      return this.compare(value, this._value) ? this._value : value;
-    }
-    return this._value;
-  }
-}
-function derive(val, transform = (value) => value, config = {}) {
-  return new DerivedVal(val, transform, config);
-}
-class CombinedVal extends ReadonlyVal {
-  constructor(valInputs, transform, config = {}) {
-    super(transform(getValues(valInputs)), __spreadProps$1(__spreadValues$1({}, config), {
-      beforeSubscribe: (setValue) => {
-        let lastValueInputs = getValues(valInputs);
-        setValue(transform(lastValueInputs));
-        const disposers = valInputs.map((val, i2) => val.reaction((value, meta) => {
-          lastValueInputs = lastValueInputs.slice();
-          lastValueInputs[i2] = value;
-          setValue(transform(lastValueInputs), meta);
-        }));
-        const disposer = () => disposers.forEach((disposer2) => disposer2());
-        if (config.beforeSubscribe) {
-          const beforeSubscribeDisposer = config.beforeSubscribe(setValue);
-          if (beforeSubscribeDisposer) {
-            return () => {
-              disposer();
-              beforeSubscribeDisposer();
-            };
-          }
-        }
-        return disposer;
-      }
-    }));
-    __publicField(this, "_srcValue");
-    this._srcValue = () => transform(getValues(valInputs));
-  }
-  get value() {
-    if (this._subscribers.size <= 0) {
-      const value = this._srcValue();
-      return this.compare(value, this._value) ? this._value : value;
-    }
-    return this._value;
-  }
-}
-function getValues(valInputs) {
-  return valInputs.map(getValue);
-}
-function getValue(val) {
-  return val.value;
-}
-function combine(valInputs, transform = (value) => value, config = {}) {
-  return new CombinedVal(valInputs, transform, config);
-}
-function withReadonlyValueEnhancer(instance2, config, valManager) {
-  Object.keys(config).forEach((key) => {
-    bindInstance$1(instance2, key, config[key]);
-    if (valManager) {
-      valManager.attach(config[key]);
-    }
-  });
-}
-function bindInstance$1(instance2, key, val) {
-  Object.defineProperties(instance2, {
-    [key]: {
-      get() {
-        return val.value;
-      }
-    },
-    [`_${key}$`]: {
-      value: val
-    }
-  });
-  return instance2;
-}
-function withValueEnhancer(instance2, config, valManager) {
-  Object.keys(config).forEach((key) => {
-    bindInstance(instance2, key, config[key]);
-    if (valManager) {
-      valManager.attach(config[key]);
-    }
-  });
-}
-function bindInstance(instance2, key, val) {
-  Object.defineProperties(instance2, {
-    [key]: {
-      get() {
-        return val.value;
-      },
-      set(value) {
-        val.setValue(value);
-      }
-    },
-    [`_${key}$`]: {
-      value: val
-    },
-    [`set${capitalize(key)}`]: {
-      value: (value, meta) => val.setValue(value, meta)
-    }
-  });
-  return instance2;
-}
-function capitalize(str) {
-  return str[0].toUpperCase() + str.slice(1);
-}
-class ValManager {
-  constructor() {
-    __publicField(this, "vals", /* @__PURE__ */ new Set());
-  }
-  attach(val) {
-    this.vals.add(val);
-    return val;
-  }
-  detach(val) {
-    this.vals.delete(val);
-    return val;
-  }
-  destroy() {
-    this.vals.forEach(destroyVal);
-    this.vals.clear();
-  }
-}
-function destroyVal(val) {
-  val.destroy();
-}
 var e$2 = Object.defineProperty, t$3 = Object.defineProperties, i$1 = Object.getOwnPropertyDescriptors, s$2 = Object.getOwnPropertySymbols, a$1 = Object.prototype.hasOwnProperty, o$2 = Object.prototype.propertyIsEnumerable, r$4 = (t2, i2, s2) => i2 in t2 ? e$2(t2, i2, { enumerable: true, configurable: true, writable: true, value: s2 }) : t2[i2] = s2, n$3 = (e2, t2) => {
   for (var i2 in t2 || (t2 = {}))
     a$1.call(t2, i2) && r$4(e2, i2, t2[i2]);
@@ -4701,6 +4542,9 @@ class BoxManager {
   get boxSize() {
     return this.teleBoxManager.boxes.length;
   }
+  get stageRect() {
+    return this.teleBoxManager.stageRect;
+  }
   createBox(params) {
     var _a, _b, _c;
     if (!this.teleBoxManager)
@@ -4729,7 +4573,7 @@ class BoxManager {
   setupBoxManager(createTeleBoxManagerConfig) {
     const root = WindowManager.playground;
     const initManagerState = {
-      stageRatio: 3 / 4,
+      stageRatio: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.stageRatio,
       root,
       fence: false,
       prefersColorScheme: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.prefersColorScheme
@@ -4847,6 +4691,9 @@ class BoxManager {
   setRoot(root) {
     this.teleBoxManager._root$.setValue(root);
   }
+  setCollector(collector) {
+    this.teleBoxManager.collector.set$collector(collector);
+  }
   destroy() {
     this.sideEffectManager.flushAll();
     this.teleBoxManager.destroy();
@@ -15469,14 +15316,14 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.0";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.8", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@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.22", "@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", "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", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    this.version = "1.0.0-canary.3";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.9", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@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.22", "@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", "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", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.8", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@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.22", "@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", "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", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.9", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@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.22", "@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", "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", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
   }
   static async mount(params) {
     var _a;
@@ -15618,7 +15465,7 @@ const _WindowManager = class extends InvisiblePlugin {
   }
   bindCollectorContainer(container) {
     if (_WindowManager.isCreated && this.boxManager) {
-      this.boxManager.teleBoxManager.collector.set$collector(container);
+      this.boxManager.setCollector(container);
     } else {
       if (_WindowManager.params) {
         _WindowManager.params.collectorContainer = container;