@netless/window-manager 1.0.0-canary.13 → 1.0.0-canary.16

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
+import { Val } from "value-enhancer";
 export declare type WindowMangerAttributes = {
     modelValue?: string;
     boxState: TELE_BOX_STATE;
@@ -108,6 +109,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     appManager?: AppManager;
     cursorManager?: CursorManager;
     viewMode: ViewMode;
+    viewMode$: Val<ViewMode, any>;
     isReplay: boolean;
     private _pageState?;
     private boxManager?;

package/dist/index.es.js

@@ -19,8 +19,8 @@ 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, isNumber, throttle, delay, pick, 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 { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$1, pick, isNumber, throttle, delay, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
+import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, WhiteVersion, autorun, toJS, listenDisposed, unlistenDisposed, AnimationMode, ViewMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin } from "white-web-sdk";
 import { v4 } from "uuid";
 import { genUID, SideEffectManager } from "side-effect-manager";
 import { Val, combine, ValManager, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
@@ -898,11 +898,10 @@ class Storage {
   }
 }
 class WhiteBoardView {
-  constructor(view, appContext, appProxy, removeViewWrapper, ensureSize) {
+  constructor(view, appContext, appProxy, ensureSize) {
     this.view = view;
     this.appContext = appContext;
     this.appProxy = appProxy;
-    this.removeViewWrapper = removeViewWrapper;
     this.ensureSize = ensureSize;
     this.nextPage = async () => {
       const nextIndex = this.pageState.index + 1;
@@ -947,9 +946,16 @@ class WhiteBoardView {
     };
     const pageState$ = new Val(appProxy.pageState);
     this.pageState$ = pageState$;
-    appProxy.appEmitter.on("pageStateChange", (pageState) => {
+    this.appProxy.sideEffectManager.add(() => appProxy.appEmitter.on("pageStateChange", (pageState) => {
       pageState$.setValue(pageState);
-    });
+    }));
+    const camera$ = new Val(pick(this.view.camera, ["centerX", "centerY"]));
+    this.camera$ = camera$;
+    this.appProxy.sideEffectManager.add(() => appProxy.camera$.subscribe((camera) => {
+      if (camera) {
+        camera$.setValue(pick(camera, ["centerX", "centerY"]));
+      }
+    }));
     view.disableCameraTransform = true;
   }
   get pageState() {
@@ -961,10 +967,6 @@ class WhiteBoardView {
   setRect(rect) {
     this.appProxy.updateSize(rect.width, rect.height);
   }
-  destroy() {
-    this.pageState$.destroy();
-    this.removeViewWrapper();
-  }
 }
 const setupWrapper = (root) => {
   const playground = document.createElement("div");
@@ -997,9 +999,8 @@ const serializeRoomMembers = (members) => {
   });
 };
 class AppContext {
-  constructor(manager, boxManager, appId, appProxy, appOptions) {
+  constructor(manager, appId, appProxy, appOptions) {
     this.manager = manager;
-    this.boxManager = boxManager;
     this.appId = appId;
     this.appProxy = appProxy;
     this.appOptions = appOptions;
@@ -1040,17 +1041,17 @@ class AppContext {
       this._viewWrapper = viewWrapper;
       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);
-        this._viewWrapper = void 0;
-      };
       view.divElement = viewWrapper;
       this.appProxy.fireMemberStateChange();
       if (this.isAddApp) {
         this.ensurePageSize(size2);
       }
-      this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, removeViewWrapper, this.ensurePageSize);
+      this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
+      this.appProxy.sideEffectManager.add(() => {
+        return () => {
+          this.whiteBoardView = void 0;
+        };
+      });
       return this.whiteBoardView;
     };
     this.ensurePageSize = (size2) => {
@@ -1123,7 +1124,7 @@ class AppContext {
     return this.manager.canOperate && !this.destroyed;
   }
   get box() {
-    const box = this.boxManager.getBox(this.appId);
+    const box = this.appProxy.box$.value;
     if (box) {
       return box;
     } else {
@@ -1243,8 +1244,11 @@ class CameraSynchronizer {
     this.view = view;
   }
   onRemoteSizeUpdate(size2) {
-    if (this.rect) {
-      const nextScale = this.rect.width / size2.width;
+    this.remoteSize = size2;
+    const needMoveCamera = !isEqual(pick(this.rect, ["width", "height"]), pick(size2, ["width", "height"]));
+    if (this.rect && this.remoteCamera && needMoveCamera) {
+      const scale2 = this.rect.width / size2.width;
+      const nextScale = this.remoteCamera.scale * scale2;
       const moveCamera = () => {
         var _a;
         (_a = this.view) == null ? void 0 : _a.moveCamera({
@@ -1252,6 +1256,7 @@ class CameraSynchronizer {
           animationMode: AnimationMode.Immediately
         });
       };
+      moveCamera();
       delay(moveCamera, 50);
     }
   }
@@ -1260,61 +1265,80 @@ class CameraSynchronizer {
     this.remoteCamera = camera;
   }
 }
-class AppViewSync {
-  constructor(appProxy) {
-    this.appProxy = appProxy;
+class ViewSync {
+  constructor(context) {
+    this.context = context;
     this.sem = new SideEffectManager();
     this.bindView = (view) => {
       if (!view)
         return;
       this.synchronizer.setView(view);
+      this.sem.flush("view");
       this.sem.add(() => {
         view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
         return () => view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
-      });
+      }, "view");
     };
     this.onCameraUpdatedByDevice = (camera) => {
-      var _a;
       this.synchronizer.onLocalCameraUpdate(camera);
-      const stage = (_a = this.appProxy.box) == null ? void 0 : _a.contentStageRect;
+      const stage = this.context.stageRect$.value;
       if (stage) {
-        const size2 = { width: stage.width, height: stage.height, id: this.appProxy.uid };
-        if (!isEqual(size2, this.appProxy.size$.value)) {
-          this.appProxy.storeSize(size2);
+        const size2 = { width: stage.width, height: stage.height, id: this.context.uid };
+        if (!isEqual(size2, this.context.size$.value)) {
+          this.context.storeSize(size2);
         }
       }
     };
     this.synchronizer = new CameraSynchronizer((camera) => {
-      this.appProxy.storeCamera(__spreadValues({
-        id: this.appProxy.uid
-      }, camera));
+      const iCamera = __spreadValues({
+        id: this.context.uid
+      }, camera);
+      this.context.camera$.setValue(iCamera, true);
+      const notStoreCamera = this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
+      if (notStoreCamera) {
+        return;
+      } else {
+        this.context.storeCamera(iCamera);
+      }
     });
-    this.bindView(appProxy.view);
-    this.sem.add(() => this.appProxy.camera$.subscribe((camera) => {
-      const size2 = this.appProxy.size$.value;
-      if (camera && size2) {
+    this.bindView(this.context.view$.value);
+    this.sem.add(() => this.context.view$.subscribe((view) => {
+      const currentCamera = this.context.camera$.value;
+      if (currentCamera && this.context.size$.value) {
+        view == null ? void 0 : view.moveCamera({
+          scale: 1,
+          animationMode: AnimationMode.Immediately
+        });
+        this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
+      }
+      this.bindView(view);
+    }));
+    this.sem.add(() => this.context.camera$.subscribe((camera, skipUpdate) => {
+      const size2 = this.context.size$.value;
+      if (camera && size2 && !skipUpdate) {
         this.synchronizer.onRemoteUpdate(camera, size2);
       }
     }));
-    this.sem.add(() => this.appProxy.size$.subscribe((size2) => {
+    this.sem.add(() => this.context.size$.subscribe((size2) => {
       if (size2) {
         this.synchronizer.onRemoteSizeUpdate(size2);
       }
     }));
-    const box = this.appProxy.box;
-    if (box && box.contentStageRect) {
-      this.synchronizer.setRect(box.contentStageRect);
-      this.sem.add(() => box._contentStageRect$.subscribe((rect) => {
+    if (this.context.stageRect$.value) {
+      this.synchronizer.setRect(this.context.stageRect$.value);
+      this.sem.add(() => this.context.stageRect$.subscribe((rect) => {
         if (rect) {
           this.synchronizer.setRect(rect);
         }
       }));
     }
-    this.sem.add(() => combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size2]) => {
+    const camera$size$ = combine([this.context.camera$, this.context.size$]);
+    camera$size$.subscribe(([camera, size2]) => {
       if (camera && size2) {
         this.synchronizer.onRemoteUpdate(camera, size2);
+        camera$size$.destroy();
       }
-    }));
+    });
   }
   destroy() {
     this.sem.flushAll();
@@ -1655,17 +1679,18 @@ class AppProxy {
       if (!this.camera$.value) {
         return;
       }
-      const nextCamera = __spreadValues(__spreadValues({}, this.camera$.value), camera);
+      const nextCamera = __spreadProps(__spreadValues(__spreadValues({}, this.camera$.value), camera), { id: this.uid });
       this.storeCamera(nextCamera);
+      this.camera$.setValue(nextCamera);
     };
     this.addCameraReaction = () => {
       this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-camera`, () => reaction(() => {
         var _a2;
         return (_a2 = this.appAttributes) == null ? void 0 : _a2.camera;
       }, (camera) => {
-        if (camera && camera.id !== this.uid) {
+        if (camera) {
           const rawCamera = toJS(camera);
-          if (rawCamera !== this.camera$.value) {
+          if (!isEqual(rawCamera, this.camera$.value)) {
             this.camera$.setValue(rawCamera);
           }
         }
@@ -1676,9 +1701,9 @@ class AppProxy {
         var _a2;
         return (_a2 = this.appAttributes) == null ? void 0 : _a2.size;
       }, (size2) => {
-        if (size2 && size2.id !== this.uid) {
+        if (size2) {
           const rawSize = toJS(size2);
-          if (this.size$.value !== rawSize) {
+          if (!isEqual(rawSize, this.size$.value)) {
             this.size$.setValue(rawSize);
           }
         }
@@ -1738,10 +1763,18 @@ class AppProxy {
           });
           this.size$.setValue(toJS(this.appAttributes.size));
         }
-        this.appViewSync = new AppViewSync(this);
+        this.viewSync = new ViewSync({
+          uid: this.uid,
+          view$: this.view$,
+          camera$: this.camera$,
+          size$: this.size$,
+          stageRect$: box._contentStageRect$,
+          storeCamera: this.storeCamera,
+          storeSize: this.storeSize
+        });
         this.sideEffectManager.add(() => () => {
           var _a2;
-          return (_a2 = this.appViewSync) == null ? void 0 : _a2.destroy();
+          return (_a2 = this.viewSync) == null ? void 0 : _a2.destroy();
         });
       }
     }));
@@ -1833,7 +1866,7 @@ class AppProxy {
     if (!this.boxManager) {
       throw new BoxManagerNotFoundError();
     }
-    const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
+    const context = new AppContext(this.manager, appId, this, appOptions);
     this.appContext = context;
     try {
       emitter.once(`${appId}${Events.WindowCreated}`).then(async () => {
@@ -2116,12 +2149,29 @@ const setDefaultCameraBound = (view) => {
 };
 class MainViewProxy {
   constructor(manager) {
-    var _a;
     this.manager = manager;
     this.started = false;
     this.mainViewIsAddListener = false;
     this.store = this.manager.store;
     this.sideEffectManager = new SideEffectManager();
+    this.camera$ = new Val(void 0);
+    this.size$ = new Val(void 0);
+    this.view$ = new Val(void 0);
+    this.createViewSync = () => {
+      var _a;
+      if (this.manager.boxManager && !this.viewSync) {
+        this.viewSync = new ViewSync({
+          uid: this.manager.uid,
+          view$: this.view$,
+          camera$: this.camera$,
+          size$: this.size$,
+          stageRect$: (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect$,
+          viewMode$: this.manager.windowManger.viewMode$,
+          storeCamera: this.storeCamera,
+          storeSize: this.storeSize
+        });
+      }
+    };
     this.startListenWritableChange = () => {
       this.sideEffectManager.add(() => emitter.on("writableChange", (isWritable) => {
         if (isWritable) {
@@ -2131,26 +2181,50 @@ class MainViewProxy {
     };
     this.addCameraReaction = () => {
       this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
+      this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
+    };
+    this.storeCurrentCamera = () => {
+      const iCamera = this.view.camera;
+      this.storeCamera(__spreadValues({
+        id: this.manager.uid
+      }, iCamera));
+    };
+    this.storeCurrentSize = () => {
+      var _a;
+      const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
+      if (rect) {
+        this.storeSize({
+          id: this.manager.uid,
+          width: rect.width,
+          height: rect.height
+        });
+      }
+    };
+    this.storeCamera = (camera) => {
+      this.store.setMainViewCamera(camera);
+    };
+    this.storeSize = (size2) => {
+      this.store.setMainViewSize(size2);
     };
     this.cameraReaction = () => {
       return reaction(() => this.mainViewCamera, (camera) => {
-        if (camera && camera.id !== this.manager.uid) {
-          this.synchronizer.onRemoteUpdate(camera, this.mainViewSize);
+        if (camera) {
+          const rawCamera = toJS(camera);
+          if (!isEqual(rawCamera, this.camera$.value)) {
+            this.camera$.setValue(rawCamera);
+          }
         }
       }, { fireImmediately: true });
     };
-    this.onUpdateContainerSizeRatio = () => {
-      const size2 = this.store.getMainViewSize();
-      if (size2.id === this.manager.uid) {
-        this.setCameraAndSize();
-      }
-    };
-    this.onCameraUpdatedByDevice = (camera) => {
-      this.synchronizer.onLocalCameraUpdate(camera);
-      const size2 = this.getStageSize();
-      if (size2 && !isEqual(size2, this.mainViewSize)) {
-        this.setMainViewSize(size2);
-      }
+    this.sizeReaction = () => {
+      return reaction(() => this.mainViewSize, (size2) => {
+        if (size2) {
+          const rawSize = toJS(size2);
+          if (!isEqual(rawSize, this.size$.value)) {
+            this.size$.setValue(rawSize);
+          }
+        }
+      }, { fireImmediately: true });
     };
     this.mainViewClickListener = () => {
       this.mainViewClickHandler();
@@ -2161,9 +2235,7 @@ class MainViewProxy {
     this.onCameraOrSizeUpdated = () => {
       callbacks$1.emit("cameraStateChange", this.cameraState);
     };
-    this.synchronizer = new CameraSynchronizer((camera) => this.store.setMainViewCamera(__spreadProps(__spreadValues({}, camera), { id: this.manager.uid })));
     this.mainView = this.createMainView();
-    this.moveCameraSizeByAttributes();
     emitter.once("mainViewMounted").then(() => {
       this.addMainViewListener();
       this.start();
@@ -2171,23 +2243,27 @@ class MainViewProxy {
       this.startListenWritableChange();
     });
     this.sideEffectManager.add(() => [
-      emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio),
       emitter.on("startReconnect", () => {
         releaseView(this.mainView);
-      }),
-      emitter.on("playgroundSizeChange", (rect2) => {
-        this.synchronizer.setRect(rect2);
       })
     ]);
-    const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
-    if (rect) {
-      this.synchronizer.setRect(rect);
-    }
+    this.createViewSync();
   }
   ensureCameraAndSize() {
+    var _a;
     if (!this.mainViewCamera || !this.mainViewSize) {
       this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
-      this.setCameraAndSize();
+      this.storeCamera(__spreadValues({
+        id: this.manager.uid
+      }, this.view.camera));
+      const stageRect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
+      if (stageRect && !this.mainViewSize) {
+        this.storeSize({
+          id: this.manager.uid,
+          width: stageRect.width,
+          height: stageRect.height
+        });
+      }
     }
   }
   get mainViewCamera() {
@@ -2199,9 +2275,6 @@ class MainViewProxy {
   get didRelease() {
     return get(this.view, ["didRelease"]);
   }
-  moveCameraSizeByAttributes() {
-    this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
-  }
   start() {
     if (this.started)
       return;
@@ -2209,14 +2282,6 @@ class MainViewProxy {
     this.addCameraReaction();
     this.started = true;
   }
-  setCameraAndSize() {
-    const stageSize = this.getStageSize();
-    if (stageSize) {
-      const camera = __spreadProps(__spreadValues({}, this.mainView.camera), { id: this.manager.uid });
-      const size2 = __spreadProps(__spreadValues({}, stageSize), { id: this.manager.uid });
-      this.store.setMainViewCameraAndSize(camera, size2);
-    }
-  }
   get view() {
     return this.mainView;
   }
@@ -2229,7 +2294,7 @@ class MainViewProxy {
     if (mainViewScenePath) {
       setViewFocusScenePath(mainView, mainViewScenePath);
     }
-    this.synchronizer.setView(mainView);
+    this.view$.setValue(mainView);
     return mainView;
   }
   onReconnect() {
@@ -2257,13 +2322,6 @@ class MainViewProxy {
     this.addMainViewListener();
     this.start();
   }
-  getStageSize() {
-    var _a;
-    const stage = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
-    if (stage) {
-      return { width: stage.width, height: stage.height };
-    }
-  }
   addMainViewListener() {
     if (this.mainViewIsAddListener)
       return;
@@ -2288,12 +2346,10 @@ class MainViewProxy {
     (_a = this.manager.boxManager) == null ? void 0 : _a.blurAllBox();
   }
   addCameraListener() {
-    this.view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
     this.view.callbacks.on("onCameraUpdated", this.onCameraOrSizeUpdated);
     this.view.callbacks.on("onSizeUpdated", this.onCameraOrSizeUpdated);
   }
   removeCameraListener() {
-    this.view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
     this.view.callbacks.off("onCameraUpdated", this.onCameraOrSizeUpdated);
     this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
   }
@@ -2304,6 +2360,9 @@ class MainViewProxy {
     this.started = false;
   }
   destroy() {
+    this.camera$.destroy();
+    this.size$.destroy();
+    this.view$.destroy();
     this.removeMainViewListener();
     this.stop();
     this.sideEffectManager.flushAll();
@@ -2399,7 +2458,7 @@ class AppManager {
           sceneName = (_b = this.callbacksNode) == null ? void 0 : _b.scenes[nextIndex];
         }
         if (sceneName) {
-          this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
+          await this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
         }
         await this.setMainViewSceneIndex(nextIndex);
       } else {
@@ -2639,7 +2698,7 @@ class AppManager {
     this.displayerWritableListener = (isReadonly) => {
       var _a, _b;
       const isWritable = !isReadonly;
-      const isManualWritable = this.windowManger.readonly === void 0 || this.windowManger.readonly === false;
+      const isManualWritable = this.windowManger.readonly === void 0 || !this.windowManger.readonly;
       if (this.windowManger.readonly === void 0) {
         (_a = this.boxManager) == null ? void 0 : _a.setReadonly(isReadonly);
       } else {
@@ -2648,7 +2707,7 @@ class AppManager {
       this.appProxies.forEach((appProxy) => {
         appProxy.emitAppIsWritableChange();
       });
-      if (isWritable === true) {
+      if (isWritable) {
         if (this.room && this.room.disableSerialization === true) {
           this.room.disableSerialization = false;
         }
@@ -2709,7 +2768,7 @@ class AppManager {
     });
   }
   async onRootDirRemoved(needClose = true) {
-    this.setMainViewScenePath(INIT_DIR);
+    await this.setMainViewScenePath(INIT_DIR);
     this.createRootDirScenesCallback();
     for (const [id2, appProxy] of this.appProxies.entries()) {
       if (appProxy.view) {
@@ -2717,7 +2776,7 @@ class AppManager {
       }
     }
     this.mainViewProxy.rebind();
-    emitter.emit("rootDirRemoved");
+    await emitter.emit("rootDirRemoved");
     this.updateRootDirRemoving(false);
   }
   get eventName() {
@@ -2856,6 +2915,7 @@ class AppManager {
   }
   setBoxManager(boxManager) {
     this.boxManager = boxManager;
+    this.mainViewProxy.createViewSync();
   }
   resetMaximized() {
     var _a;
@@ -4226,7 +4286,7 @@ class Y$3 {
           if (!this.$stage) {
             const e4 = document.createElement("div");
             this.$stage = e4, e4.className = this.wrapClassName("content-stage"), this._sideEffect.addDisposer(this._contentStageRect$.subscribe((t4) => {
-              t4 && (e4.style.top = t4.y + "px", e4.style.left = t4.x + "px", e4.style.width = t4.width + "px", e4.style.height = t4.height + "px");
+              e4.style.top = t4.y + "px", e4.style.left = t4.x + "px", e4.style.width = t4.width + "px", e4.style.height = t4.height + "px";
             }), "content-stage-rect"), r2.appendChild(e4);
           }
           this.$stage.parentElement || r2.appendChild(this.$stage), this.$stage.appendChild(t3);
@@ -4765,6 +4825,9 @@ class BoxManager {
   get stageRect() {
     return this.teleBoxManager.stageRect;
   }
+  get stageRect$() {
+    return this.teleBoxManager._stageRect$;
+  }
   createBox(params) {
     var _a, _b, _c;
     if (!this.teleBoxManager)
@@ -15539,14 +15602,15 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.13";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.16", "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.3.0", "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.16";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.17", "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.3.0", "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.viewMode$ = new Val(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.16", "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.3.0", "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.17", "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.3.0", "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;
@@ -15882,17 +15946,20 @@ const _WindowManager = class extends InvisiblePlugin {
     addEmitterOnceListener(`destroy-${kind2}`, listener);
   }
   setViewMode(mode) {
-    var _a, _b, _c;
+    var _a;
+    log("setViewMode", mode);
+    const mainViewProxy = (_a = this.appManager) == null ? void 0 : _a.mainViewProxy;
     if (mode === ViewMode.Broadcaster) {
       if (this.canOperate) {
-        (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.setCameraAndSize();
+        mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
       }
-      (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.start();
+      mainViewProxy == null ? void 0 : mainViewProxy.start();
     }
     if (mode === ViewMode.Freedom) {
-      (_c = this.appManager) == null ? void 0 : _c.mainViewProxy.stop();
+      mainViewProxy == null ? void 0 : mainViewProxy.stop();
     }
     this.viewMode = mode;
+    this.viewMode$.setValue(mode);
   }
   setBoxState(boxState) {
     if (!this.canOperate)
@@ -16039,7 +16106,7 @@ const _WindowManager = class extends InvisiblePlugin {
     (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCamera, camera);
     setTimeout(() => {
       var _a2;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.setCameraAndSize();
+      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
     }, 500);
   }
   moveCameraToContain(rectangle) {
@@ -16048,7 +16115,7 @@ const _WindowManager = class extends InvisiblePlugin {
     (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
     setTimeout(() => {
       var _a2;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.setCameraAndSize();
+      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
     }, 500);
   }
   convertToPointInWorld(point) {