@netless/window-manager 1.0.0-canary.55 → 1.0.0-canary.57

package/dist/index.cjs.js

@@ -963,6 +963,9 @@ class AppContext {
   get destroyed() {
     return this.appProxy.status === "destroyed";
   }
+  get attributes() {
+    return this.appProxy.attributes;
+  }
   get view() {
     return this.appProxy.view;
   }
@@ -1000,12 +1003,6 @@ class AppContext {
       uid: this.manager.uid
     }, self);
   }
-  get storage() {
-    if (!this._storage) {
-      this._storage = this.createStorage(this.appId, this.getAttributes());
-    }
-    return this._storage;
-  }
 }
 class AppPageStateImpl {
   constructor(params) {
@@ -2521,7 +2518,12 @@ class ScrollMode {
     });
     this.updateScroll(scrollTop$.value);
     this.sideEffect.push(this.scrollState$.subscribe((state) => callbacks.emit("scrollStateChange", state)));
-    this.initScroll();
+    this.sideEffect.push(valueEnhancer.combine([this._size$, this._scale$]).subscribe(([size, scale2]) => {
+      if (size.height > 0 && scale2 > 0) {
+        this.initScroll();
+        this.sideEffect.flush("initScroll");
+      }
+    }), "initScroll");
   }
   setRoot(root) {
     this._root$.setValue(root);
@@ -2554,6 +2556,15 @@ class ScrollMode {
   }
   dispose() {
     this.sideEffect.flushAll();
+    this.scrollStorage.disconnect();
+    this._root$.destroy();
+    this._scale$.destroy();
+    this._scrollTop$.destroy();
+    this._whiteboard$.destroy();
+    this.scrollState$.destroy();
+    this._page$.destroy();
+    this._size$.destroy();
+    this._mainView$.destroy();
   }
 }
 class AppManager {
@@ -2901,11 +2912,15 @@ class AppManager {
     this.members$.setValue(serializeRoomMembers(this.displayer.state.roomMembers));
     emitter.on("mainViewMounted", () => {
       this.windowManger.viewMode$.subscribe((viewMode) => {
+        var _a2;
         const playground = this.windowManger.playground$.value;
         if (viewMode === "scroll" && playground) {
           const scrollMode = new ScrollMode(this);
           this.scrollMode = scrollMode;
           scrollMode.setRoot(playground);
+        } else {
+          (_a2 = this.scrollMode) == null ? void 0 : _a2.dispose();
+          this.scrollMode = void 0;
         }
       });
     });
@@ -3257,6 +3272,7 @@ class AppManager {
     });
   }
   destroy() {
+    var _a;
     this.displayer.callbacks.off(this.eventName, this.displayerStateListener);
     this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
     this.appListeners.removeListeners();
@@ -3272,6 +3288,7 @@ class AppManager {
     this.sceneIndex$.destroy();
     this.focused$.destroy();
     this.members$.destroy();
+    (_a = this.scrollMode) == null ? void 0 : _a.dispose();
   }
 }
 /*! *****************************************************************************
@@ -11643,10 +11660,9 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.54";
+    this.version = "1.0.0-canary.57";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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.3", "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", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "^2.16.35" } };
     this.emitter = callbacks;
-    this.viewMode = whiteWebSdk.ViewMode.Broadcaster;
     this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);
     this.playground$ = new valueEnhancer.Val(void 0);
     this.isReplay = whiteWebSdk.isPlayer(this.displayer);
@@ -12032,7 +12048,6 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     if (mode === whiteWebSdk.ViewMode.Freedom || mode === "scroll") {
       mainViewProxy == null ? void 0 : mainViewProxy.stop();
     }
-    this.viewMode = mode;
     this.viewMode$.setValue(mode);
   }
   setBoxState(boxState) {
@@ -12115,6 +12130,9 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     var _a, _b;
     return Boolean((_b = (_a = this.appManager) == null ? void 0 : _a.boxManager) == null ? void 0 : _b.darkMode);
   }
+  get viewMode() {
+    return this.viewMode$.value;
+  }
   get prefersColorScheme() {
     var _a;
     if (this.appManager) {

package/dist/index.es.js

@@ -956,6 +956,9 @@ class AppContext {
   get destroyed() {
     return this.appProxy.status === "destroyed";
   }
+  get attributes() {
+    return this.appProxy.attributes;
+  }
   get view() {
     return this.appProxy.view;
   }
@@ -993,12 +996,6 @@ class AppContext {
       uid: this.manager.uid
     }, self);
   }
-  get storage() {
-    if (!this._storage) {
-      this._storage = this.createStorage(this.appId, this.getAttributes());
-    }
-    return this._storage;
-  }
 }
 class AppPageStateImpl {
   constructor(params) {
@@ -2514,7 +2511,12 @@ class ScrollMode {
     });
     this.updateScroll(scrollTop$.value);
     this.sideEffect.push(this.scrollState$.subscribe((state) => callbacks.emit("scrollStateChange", state)));
-    this.initScroll();
+    this.sideEffect.push(combine([this._size$, this._scale$]).subscribe(([size, scale2]) => {
+      if (size.height > 0 && scale2 > 0) {
+        this.initScroll();
+        this.sideEffect.flush("initScroll");
+      }
+    }), "initScroll");
   }
   setRoot(root) {
     this._root$.setValue(root);
@@ -2547,6 +2549,15 @@ class ScrollMode {
   }
   dispose() {
     this.sideEffect.flushAll();
+    this.scrollStorage.disconnect();
+    this._root$.destroy();
+    this._scale$.destroy();
+    this._scrollTop$.destroy();
+    this._whiteboard$.destroy();
+    this.scrollState$.destroy();
+    this._page$.destroy();
+    this._size$.destroy();
+    this._mainView$.destroy();
   }
 }
 class AppManager {
@@ -2894,11 +2905,15 @@ class AppManager {
     this.members$.setValue(serializeRoomMembers(this.displayer.state.roomMembers));
     emitter.on("mainViewMounted", () => {
       this.windowManger.viewMode$.subscribe((viewMode) => {
+        var _a2;
         const playground = this.windowManger.playground$.value;
         if (viewMode === "scroll" && playground) {
           const scrollMode = new ScrollMode(this);
           this.scrollMode = scrollMode;
           scrollMode.setRoot(playground);
+        } else {
+          (_a2 = this.scrollMode) == null ? void 0 : _a2.dispose();
+          this.scrollMode = void 0;
         }
       });
     });
@@ -3250,6 +3265,7 @@ class AppManager {
     });
   }
   destroy() {
+    var _a;
     this.displayer.callbacks.off(this.eventName, this.displayerStateListener);
     this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
     this.appListeners.removeListeners();
@@ -3265,6 +3281,7 @@ class AppManager {
     this.sceneIndex$.destroy();
     this.focused$.destroy();
     this.members$.destroy();
+    (_a = this.scrollMode) == null ? void 0 : _a.dispose();
   }
 }
 /*! *****************************************************************************
@@ -11636,10 +11653,9 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.54";
+    this.version = "1.0.0-canary.57";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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.3", "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", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "^2.16.35" } };
     this.emitter = callbacks;
-    this.viewMode = ViewMode.Broadcaster;
     this.viewMode$ = new Val(ViewMode.Broadcaster);
     this.playground$ = new Val(void 0);
     this.isReplay = isPlayer(this.displayer);
@@ -12025,7 +12041,6 @@ const _WindowManager = class extends InvisiblePlugin {
     if (mode === ViewMode.Freedom || mode === "scroll") {
       mainViewProxy == null ? void 0 : mainViewProxy.stop();
     }
-    this.viewMode = mode;
     this.viewMode$.setValue(mode);
   }
   setBoxState(boxState) {
@@ -12108,6 +12123,9 @@ const _WindowManager = class extends InvisiblePlugin {
     var _a, _b;
     return Boolean((_b = (_a = this.appManager) == null ? void 0 : _a.boxManager) == null ? void 0 : _b.darkMode);
   }
+  get viewMode() {
+    return this.viewMode$.value;
+  }
   get prefersColorScheme() {
     var _a;
     if (this.appManager) {

package/dist/index.umd.js

@@ -956,6 +956,9 @@ var __objRest = (source, exclude) => {
     get destroyed() {
       return this.appProxy.status === "destroyed";
     }
+    get attributes() {
+      return this.appProxy.attributes;
+    }
     get view() {
       return this.appProxy.view;
     }
@@ -993,12 +996,6 @@ var __objRest = (source, exclude) => {
         uid: this.manager.uid
       }, self2);
     }
-    get storage() {
-      if (!this._storage) {
-        this._storage = this.createStorage(this.appId, this.getAttributes());
-      }
-      return this._storage;
-    }
   }
   class AppPageStateImpl {
     constructor(params) {
@@ -2514,7 +2511,12 @@ var __objRest = (source, exclude) => {
       });
       this.updateScroll(scrollTop$.value);
       this.sideEffect.push(this.scrollState$.subscribe((state) => callbacks.emit("scrollStateChange", state)));
-      this.initScroll();
+      this.sideEffect.push(valueEnhancer.combine([this._size$, this._scale$]).subscribe(([size, scale2]) => {
+        if (size.height > 0 && scale2 > 0) {
+          this.initScroll();
+          this.sideEffect.flush("initScroll");
+        }
+      }), "initScroll");
     }
     setRoot(root) {
       this._root$.setValue(root);
@@ -2547,6 +2549,15 @@ var __objRest = (source, exclude) => {
     }
     dispose() {
       this.sideEffect.flushAll();
+      this.scrollStorage.disconnect();
+      this._root$.destroy();
+      this._scale$.destroy();
+      this._scrollTop$.destroy();
+      this._whiteboard$.destroy();
+      this.scrollState$.destroy();
+      this._page$.destroy();
+      this._size$.destroy();
+      this._mainView$.destroy();
     }
   }
   class AppManager {
@@ -2894,11 +2905,15 @@ var __objRest = (source, exclude) => {
       this.members$.setValue(serializeRoomMembers(this.displayer.state.roomMembers));
       emitter.on("mainViewMounted", () => {
         this.windowManger.viewMode$.subscribe((viewMode) => {
+          var _a2;
           const playground = this.windowManger.playground$.value;
           if (viewMode === "scroll" && playground) {
             const scrollMode = new ScrollMode(this);
             this.scrollMode = scrollMode;
             scrollMode.setRoot(playground);
+          } else {
+            (_a2 = this.scrollMode) == null ? void 0 : _a2.dispose();
+            this.scrollMode = void 0;
           }
         });
       });
@@ -3250,6 +3265,7 @@ var __objRest = (source, exclude) => {
       });
     }
     destroy() {
+      var _a;
       this.displayer.callbacks.off(this.eventName, this.displayerStateListener);
       this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
       this.appListeners.removeListeners();
@@ -3265,6 +3281,7 @@ var __objRest = (source, exclude) => {
       this.sceneIndex$.destroy();
       this.focused$.destroy();
       this.members$.destroy();
+      (_a = this.scrollMode) == null ? void 0 : _a.dispose();
     }
   }
   /*! *****************************************************************************
@@ -11636,10 +11653,9 @@ var __objRest = (source, exclude) => {
   const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     constructor(context) {
       super(context);
-      this.version = "1.0.0-canary.54";
+      this.version = "1.0.0-canary.57";
       this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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.3", "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", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "^2.16.35" } };
       this.emitter = callbacks;
-      this.viewMode = whiteWebSdk.ViewMode.Broadcaster;
       this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);
       this.playground$ = new valueEnhancer.Val(void 0);
       this.isReplay = whiteWebSdk.isPlayer(this.displayer);
@@ -12025,7 +12041,6 @@ var __objRest = (source, exclude) => {
       if (mode === whiteWebSdk.ViewMode.Freedom || mode === "scroll") {
         mainViewProxy == null ? void 0 : mainViewProxy.stop();
       }
-      this.viewMode = mode;
       this.viewMode$.setValue(mode);
     }
     setBoxState(boxState) {
@@ -12108,6 +12123,9 @@ var __objRest = (source, exclude) => {
       var _a, _b;
       return Boolean((_b = (_a = this.appManager) == null ? void 0 : _a.boxManager) == null ? void 0 : _b.darkMode);
     }
+    get viewMode() {
+      return this.viewMode$.value;
+    }
     get prefersColorScheme() {
       var _a;
       if (this.appManager) {

package/dist/src/App/AppContext.d.ts

@@ -37,6 +37,7 @@ export declare class AppContext<TAttributes extends Record<string, any> = any, T
     constructor(manager: AppManager, appId: string, appProxy: AppProxy, appOptions?: TAppOptions | (() => TAppOptions) | undefined);
     get displayer(): import("white-web-sdk").Displayer<import("white-web-sdk").DisplayerCallbacks>;
     get destroyed(): boolean;
+    get attributes(): TAttributes;
     /** @deprecated Use context.storage.state instead. */
     getAttributes: () => TAttributes | undefined;
     getScenes: () => SceneDefinition[] | undefined;
@@ -60,15 +61,12 @@ export declare class AppContext<TAttributes extends Record<string, any> = any, T
     setScenePath: (scenePath: string) => Promise<void>;
     /** Get the local App options. */
     getAppOptions: () => TAppOptions | undefined;
-    private _storage?;
-    /** Main Storage for attributes. */
-    get storage(): Storage<TAttributes>;
     /**
- * Create separated storages for flexible state management.
- * @param namespace Namespace for the storage. Storages of the same namespace share the same data.
- * @param defaultState Default state for initial storage creation.
- * @returns
- */
+     * Create separated storages for flexible state management.
+     * @param namespace Namespace for the storage. Storages of the same namespace share the same data.
+     * @param defaultState Default state for initial storage creation.
+     * @returns
+     */
     createStorage: <TState extends Record<string, any>>(namespace: string, defaultState?: TState | undefined) => Storage<TState>;
     /** Dispatch events to other clients (and self). */
     dispatchMagixEvent: MagixEventDispatcher<TMagixEventPayloads>;

package/dist/src/index.d.ts

@@ -128,7 +128,6 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     emitter: Emittery<PublicEvent>;
     appManager?: AppManager;
     cursorManager?: CursorManager;
-    viewMode: ManagerViewMode;
     viewMode$: Val<ManagerViewMode, any>;
     playground$: Val<HTMLElement | undefined, any>;
     isReplay: boolean;
@@ -215,6 +214,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     get apps(): Apps | undefined;
     get boxState(): TeleBoxState | undefined;
     get darkMode(): boolean;
+    get viewMode(): ManagerViewMode;
     get prefersColorScheme(): TeleBoxColorScheme | undefined;
     get fullscreen(): TeleBoxFullscreen | undefined;
     get focused(): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.55",
+  "version": "1.0.0-canary.57",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/App/AppContext.ts

@@ -75,6 +75,10 @@ export class AppContext<TAttributes extends Record<string, any> = any, TMagixEve
         return this.appProxy.status === "destroyed";
     }
 
+    public get attributes(): TAttributes {
+        return this.appProxy.attributes;
+    }
+
     /** @deprecated Use context.storage.state instead. */
     public getAttributes = (): TAttributes | undefined => {
         return this.appProxy.attributes;
@@ -220,17 +224,7 @@ export class AppContext<TAttributes extends Record<string, any> = any, TMagixEve
             : this.appOptions;
     };
 
-    private _storage?: Storage<TAttributes>;
-
-    /** Main Storage for attributes. */
-    public get storage(): Storage<TAttributes> {
-        if (!this._storage) {
-            this._storage = this.createStorage(this.appId, this.getAttributes());
-        }
-        return this._storage;
-    }
-
-        /**
+    /**
      * Create separated storages for flexible state management.
      * @param namespace Namespace for the storage. Storages of the same namespace share the same data.
      * @param defaultState Default state for initial storage creation.

package/src/AppManager.ts

@@ -136,6 +136,9 @@ export class AppManager {
                     const scrollMode = new ScrollMode(this);
                     this.scrollMode = scrollMode;
                     scrollMode.setRoot(playground);
+                } else {
+                    this.scrollMode?.dispose();
+                    this.scrollMode = undefined;
                 }
             });
         });
@@ -873,5 +876,6 @@ export class AppManager {
         this.sceneIndex$.destroy();
         this.focused$.destroy();
         this.members$.destroy();
+        this.scrollMode?.dispose();
     }
 }

package/src/View/ScrollMode.ts

@@ -149,7 +149,16 @@ export class ScrollMode {
         this.sideEffect.push(
             this.scrollState$.subscribe(state => callbacks.emit("scrollStateChange", state))
         );
-        this.initScroll();
+
+        this.sideEffect.push(
+            combine([this._size$, this._scale$]).subscribe(([size, scale]) => {
+                if (size.height > 0 && scale > 0) {
+                    this.initScroll();
+                    this.sideEffect.flush("initScroll");
+                }
+            }),
+            "initScroll"
+        );
     }
 
     private initScroll = (): void => {
@@ -192,6 +201,15 @@ export class ScrollMode {
 
     public dispose(): void {
         this.sideEffect.flushAll();
+        this.scrollStorage.disconnect();
+        this._root$.destroy();
+        this._scale$.destroy();
+        this._scrollTop$.destroy();
+        this._whiteboard$.destroy();
+        this.scrollState$.destroy();
+        this._page$.destroy();
+        this._size$.destroy();
+        this._mainView$.destroy();
     }
 
     private getWhiteboardElement = (root: HTMLElement | null): HTMLElement | null => {

package/src/index.ts

@@ -185,7 +185,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
     public emitter: Emittery<PublicEvent> = callbacks;
     public appManager?: AppManager;
     public cursorManager?: CursorManager;
-    public viewMode: ManagerViewMode = ViewMode.Broadcaster;
     public viewMode$ = new Val<ManagerViewMode>(ViewMode.Broadcaster);
     public playground$ = new Val<HTMLElement | undefined>(undefined);
     public isReplay = isPlayer(this.displayer);
@@ -638,7 +637,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         if (mode === ViewMode.Freedom || mode === "scroll") {
             mainViewProxy?.stop();
         }
-        this.viewMode = mode;
         this.viewMode$.setValue(mode);
     }
 
@@ -727,6 +725,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         return Boolean(this.appManager?.boxManager?.darkMode);
     }
 
+    public get viewMode() {
+        return this.viewMode$.value;
+    }
+
     public get prefersColorScheme(): TeleBoxColorScheme | undefined {
         if (this.appManager) {
             return this.appManager.boxManager?.prefersColorScheme;