@netless/window-manager 1.0.0-canary.30 → 1.0.0-canary.33

package/dist/index.es.js

@@ -1351,7 +1351,7 @@ class ViewSync {
           this.synchronizer.onRemoteSizeUpdate(size2);
         }
       }),
-      this.context.stageRect$.reaction((rect) => {
+      this.context.stageRect$.subscribe((rect) => {
         if (rect) {
           this.synchronizer.setRect(rect);
         }
@@ -1919,7 +1919,9 @@ class AppProxy {
           this.appResult = result;
           appRegister.notifyApp(this.kind, "created", { appId, result });
           this.fixMobileSize();
-          this.setupDone();
+          if (this.isAddApp) {
+            this.setupDone();
+          }
         }, SETUP_APP_DELAY);
       });
       const box = (_a = this.boxManager) == null ? void 0 : _a.createBox({
@@ -4021,7 +4023,7 @@ var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
   }
   return true;
 };
-var shadowStyles = /* @__PURE__ */ (() => '.tele-fancy-scrollbar {\n  overscroll-behavior: contain;\n  overflow: auto;\n  overflow-y: scroll;\n  overflow-y: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n  background-color: transparent;\n  border-radius: 4px;\n  transition: background-color 0.4s;\n}\n.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}\n.telebox-quarantine {\n  all: initial;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.telebox-body-wrap {\n  color: #191919;\n  color: var(--tele-box-color, #191919);\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n}\n.telebox-content {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background-color: #f9f9f9;\n  background-color: var(--tele-manager-container-background, #f9f9f9);\n}\n.telebox-box-stage {\n  position: absolute;\n  z-index: 1;\n  overflow: hidden;\n  background-color: #fff;\n  background-color: var(--tele-manager-stage-background, #fff);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);\n  box-shadow: var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, 0.08));\n}\n.telebox-footer-wrap {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  color: #191919;\n  color: var(--tele-box-footer-color, #191919);\n  background-color: #fff;\n  background-color: var(--tele-box-footer-background, #fff);\n}\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark .telebox-body-wrap {\n  color: #e9e9e9;\n  color: var(--tele-box-color-dark, #e9e9e9);\n}\n.telebox-color-scheme-dark .telebox-content {\n  background-color: #25282e;\n  background-color: var(--tele-manager-container-background-dark, #25282e);\n}\n.telebox-color-scheme-dark .telebox-box-stage {\n  background-color: #272a30;\n  background-color: var(--tele-manager-stage-background-dark, #272a30);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);\n  box-shadow: var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, 0.24));\n}\n.telebox-color-scheme-dark .telebox-footer-wrap {\n  color: #e9e9e9;\n  color: var(--tele-box-footer-color-dark, #e9e9e9);\n  background-color: #383b42;\n  background-color: var(--tele-box-footer-background-dark, #383b42);\n}')();
+var shadowStyles = /* @__PURE__ */ (() => '.tele-fancy-scrollbar {\n  overscroll-behavior: contain;\n  overflow: auto;\n  overflow-y: scroll;\n  overflow-y: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n  background-color: transparent;\n  border-radius: 4px;\n  transition: background-color 0.4s;\n}\n.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}\n.telebox-quarantine {\n  all: initial;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.telebox-body-wrap {\n  color: #191919;\n  color: var(--tele-boxColor, #191919);\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n}\n.telebox-content {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background-color: #f9f9f9;\n  background-color: var(--tele-boxContainerBackground, #f9f9f9);\n}\n.telebox-box-stage {\n  position: absolute;\n  z-index: 1;\n  overflow: hidden;\n  background-color: #fff;\n  background-color: var(--tele-boxStageBackground, #fff);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);\n  box-shadow: var(--tele-boxStageShadow, 0px 0px 16px rgba(0, 0, 0, 0.08));\n}\n.telebox-footer-wrap {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  color: #191919;\n  color: var(--tele-boxFooterColor, #191919);\n  background-color: #fff;\n  background-color: var(--tele-boxFooterBackground, #fff);\n}\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark .telebox-body-wrap {\n  color: #e9e9e9;\n  color: var(--tele-boxColor, #e9e9e9);\n}\n.telebox-color-scheme-dark .telebox-content {\n  background-color: #25282e;\n  background-color: var(--tele-boxContainerBackground, #25282e);\n}\n.telebox-color-scheme-dark .telebox-box-stage {\n  background-color: #272a30;\n  background-color: var(--tele-boxStageBackground, #272a30);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);\n  box-shadow: var(--tele-boxStageShadow, 0px 0px 16px rgba(0, 0, 0, 0.24));\n}\n.telebox-color-scheme-dark .telebox-footer-wrap {\n  color: #e9e9e9;\n  color: var(--tele-boxFooterColor, #e9e9e9);\n  background-color: #383b42;\n  background-color: var(--tele-boxFooterBackground, #383b42);\n}')();
 var TELE_BOX_COLOR_SCHEME = /* @__PURE__ */ ((TELE_BOX_COLOR_SCHEME2) => {
   TELE_BOX_COLOR_SCHEME2["Light"] = "light";
   TELE_BOX_COLOR_SCHEME2["Dark"] = "dark";
@@ -4180,9 +4182,9 @@ class DefaultTitleBar {
           }
         });
       }), "render-state-btns");
-      this.sideEffect.addEventListener($buttonsContainer, "pointerup", (ev) => {
+      this.sideEffect.addEventListener($buttonsContainer, "click", (ev) => {
         var _a;
-        if (!ev.isPrimary || this.readonly$.value) {
+        if (this.readonly$.value) {
           return;
         }
         const target = ev.target;
@@ -4906,7 +4908,8 @@ class TeleBoxCollector {
     darkMode$,
     namespace = "telebox",
     styles: styles2 = {},
-    root$
+    root,
+    onClick
   }) {
     this._sideEffect = new SideEffectManager();
     this.namespace = namespace;
@@ -4921,10 +4924,6 @@ class TeleBoxCollector {
       $collector: el$
     };
     withValueEnhancer(this, valConfig, valManager);
-    const propsValConfig = {
-      root: root$
-    };
-    withReadonlyValueEnhancer(this, propsValConfig);
     const myReadonlyValConfig = {
       rect: rect$,
       visible: visible$
@@ -4933,9 +4932,13 @@ class TeleBoxCollector {
     el$.value.className = this.wrapClassName("collector");
     el$.value.style.backgroundImage = `url('${collectorSVG}')`;
     this._sideEffect.addDisposer(el$.subscribe(($collector) => {
-      this._sideEffect.addEventListener($collector, "pointerup", (ev) => {
-        if (ev.isPrimary && !readonly$.value) {
-          minimized$.setValue(false);
+      this._sideEffect.add(() => {
+        root.appendChild($collector);
+        return () => $collector.remove();
+      }, "telebox-collector-mount");
+      this._sideEffect.addEventListener($collector, "click", () => {
+        if (!readonly$.value) {
+          onClick == null ? void 0 : onClick();
         }
       }, {}, "telebox-collector-click");
       this._sideEffect.addDisposer([
@@ -4957,13 +4960,8 @@ class TeleBoxCollector {
             }
           });
         }),
-        root$.subscribe((root) => {
-          if (root) {
-            root.appendChild($collector);
-          }
-        }),
-        combine([minimized$, root$]).subscribe(([minimized, root]) => {
-          if (minimized && root) {
+        minimized$.subscribe((minimized) => {
+          if (minimized) {
             const { x: x2, y: y2, width, height } = $collector.getBoundingClientRect();
             const rootRect = root.getBoundingClientRect();
             rect$.setValue({
@@ -5092,6 +5090,7 @@ const ResizeObserver$2 = window.ResizeObserver || ResizeObserver$3;
 class TeleBoxManager {
   constructor({
     root = null,
+    fullscreen = false,
     prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
     minimized = false,
     maximized = false,
@@ -5103,7 +5102,8 @@ class TeleBoxManager {
     containerStyle = "",
     stageStyle = "",
     defaultBoxBodyStyle = null,
-    defaultBoxStageStyle = null
+    defaultBoxStageStyle = null,
+    theme = {}
   } = {}) {
     this.events = new Emittery();
     this._sideEffect = new SideEffectManager();
@@ -5112,14 +5112,19 @@ class TeleBoxManager {
     this._sideEffect.addDisposer(() => valManager.destroy());
     const root$ = new Val(root);
     const readonly$ = new Val(readonly);
-    const minimized$ = new Val(minimized);
-    const maximized$ = new Val(maximized);
     const fence$ = new Val(fence);
     const containerStyle$ = new Val(containerStyle);
     const stageStyle$ = new Val(stageStyle);
     const stageRatio$ = new Val(stageRatio);
     const defaultBoxBodyStyle$ = new Val(defaultBoxBodyStyle);
     const defaultBoxStageStyle$ = new Val(defaultBoxStageStyle);
+    const fullscreen$ = new Val(fullscreen);
+    const input_minimized$ = new Val(minimized);
+    const input_maximized$ = new Val(maximized);
+    const maximized$ = combine([input_maximized$, fullscreen$], ([maximized2, fullscreen2]) => fullscreen2 ? true : maximized2);
+    const minimized$ = combine([input_minimized$, fullscreen$], ([minimized2, fullscreen2]) => fullscreen2 ? false : minimized2);
+    this.setMaximized = (maximized2, skipUpdate) => input_maximized$.setValue(maximized2, skipUpdate);
+    this.setMinimized = (minimized2, skipUpdate) => input_minimized$.setValue(minimized2, skipUpdate);
     const rootRect$ = new Val({
       x: 0,
       y: 0,
@@ -5177,27 +5182,21 @@ class TeleBoxManager {
     }));
     const darkMode$ = combine([prefersDark$, prefersColorScheme$], ([prefersDark, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark : prefersColorScheme2 === "dark");
     const state$ = combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
-    this.collector = collector != null ? collector : new TeleBoxCollector({
-      minimized$,
-      readonly$,
-      darkMode$,
-      namespace,
-      root$
-    });
     const readonlyValConfig = {
       darkMode: darkMode$,
       state: state$,
       root: root$,
       rootRect: rootRect$,
-      stageRect: stageRect$
+      stageRect: stageRect$,
+      minimized: minimized$,
+      maximized: maximized$
     };
     withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
     const valConfig = {
+      fullscreen: fullscreen$,
       prefersColorScheme: prefersColorScheme$,
       readonly: readonly$,
       fence: fence$,
-      minimized: minimized$,
-      maximized: maximized$,
       stageRatio: stageRatio$,
       containerStyle: containerStyle$,
       stageStyle: stageStyle$,
@@ -5233,6 +5232,7 @@ class TeleBoxManager {
     this._sideEffect.addEventListener(window, "pointerdown", checkFocusBox, true);
     this.$container = document.createElement("div");
     this.$container.className = this.wrapClassName("manager-container");
+    this.setTheme(theme);
     this.$stage = document.createElement("div");
     this.$stage.className = this.wrapClassName("manager-stage");
     this.$container.appendChild(this.$stage);
@@ -5241,11 +5241,17 @@ class TeleBoxManager {
         this.$container.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
         this.$container.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
       }),
+      fullscreen$.subscribe((fullscreen2) => {
+        this.$container.classList.toggle(this.wrapClassName("is-fullscreen"), Boolean(fullscreen2));
+      }),
+      combine([this.boxes$, fullscreen$], ([boxes, fullscreen2]) => fullscreen2 === "no-titlebar" || fullscreen2 === true && boxes.length <= 1).subscribe((hideSingleTabTitlebar) => {
+        this.$container.classList.toggle(this.wrapClassName("hide-fullscreen-titlebar"), hideSingleTabTitlebar);
+      }),
       maximized$.subscribe((maximized2) => {
-        this.$container.classList.toggle("is-maximized", maximized2);
+        this.$container.classList.toggle(this.wrapClassName("is-maximized"), maximized2);
       }),
       minimized$.subscribe((minimized2) => {
-        this.$container.classList.toggle("is-minimized", minimized2);
+        this.$container.classList.toggle(this.wrapClassName("is-minimized"), minimized2);
       }),
       containerStyle$.subscribe((containerStyle2) => {
         this.$container.style.cssText = containerStyle2;
@@ -5267,6 +5273,14 @@ class TeleBoxManager {
         }
       })
     ]);
+    this.collector = collector != null ? collector : new TeleBoxCollector({
+      minimized$,
+      readonly$,
+      darkMode$,
+      namespace,
+      root: this.$container,
+      onClick: () => input_minimized$.setValue(false)
+    });
     this.titleBar = new MaxTitleBar({
       namespace: this.namespace,
       title$: derive(this.topBox$, (topBox) => (topBox == null ? void 0 : topBox.title) || ""),
@@ -5279,11 +5293,11 @@ class TeleBoxManager {
       onEvent: (event) => {
         switch (event.type) {
           case TELE_BOX_DELEGATE_EVENT.Maximize: {
-            maximized$.setValue(!maximized$.value);
+            this.setMaximized(!maximized$.value);
             break;
           }
           case TELE_BOX_DELEGATE_EVENT.Minimize: {
-            minimized$.setValue(true);
+            this.setMinimized(true);
             break;
           }
           case TELE_BOX_EVENT.Close: {
@@ -5456,6 +5470,12 @@ class TeleBoxManager {
     }
     return deletedBoxes;
   }
+  setTheme(theme) {
+    Object.keys(theme).forEach((key) => {
+      var _a;
+      this.$container.style.setProperty(`--tele-${key}`, (_a = theme[key]) != null ? _a : null);
+    });
+  }
   mount(root) {
     this._root$.setValue(root);
   }
@@ -5787,6 +5807,9 @@ class BoxManager {
     if (createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.stageStyle) {
       initManagerState.stageStyle = createTeleBoxManagerConfig.stageStyle;
     }
+    if (createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.fullscreen) {
+      initManagerState.fullscreen = createTeleBoxManagerConfig.fullscreen;
+    }
     const manager = new TeleBoxManager(initManagerState);
     if (this.teleBoxManager) {
       this.teleBoxManager.destroy();
@@ -6497,16 +6520,16 @@ class Cursor {
     this.cursorManager = cursorManager;
     this.wrapper = wrapper;
     this.move = (position) => {
-      var _a;
+      var _a, _b;
       if (position.type === "main") {
-        const rect = this.cursorManager.wrapperRect;
+        const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
         if (this.component && rect) {
           this.autoHidden();
           this.moveCursor(position, rect, this.manager.mainView);
         }
       } else {
         const focusView = this.cursorManager.focusView;
-        const viewRect = (_a = focusView == null ? void 0 : focusView.divElement) == null ? void 0 : _a.getBoundingClientRect();
+        const viewRect = (_b = focusView == null ? void 0 : focusView.divElement) == null ? void 0 : _b.getBoundingClientRect();
         const viewCamera = focusView == null ? void 0 : focusView.camera;
         if (focusView && viewRect && viewCamera && this.component) {
           this.autoHidden();
@@ -6706,7 +6729,7 @@ class CursorManager {
           return;
       }
       this.updateCursor(this.getType(event), event.clientX, event.clientY);
-    }, 16);
+    }, 48);
     this.getPoint = (view, clientX, clientY) => {
       var _a2;
       const rect = (_a2 = view == null ? void 0 : view.divElement) == null ? void 0 : _a2.getBoundingClientRect();
@@ -6767,6 +6790,7 @@ class CursorManager {
         wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
       };
     });
+    this.updateContainerRect();
   }
   setMainViewDivElement(div) {
     this.mainViewElement = div;
@@ -6796,7 +6820,7 @@ class CursorManager {
   }
   updateContainerRect() {
     var _a, _b;
-    this.wrapperRect = (_a = this.manager.boxManager) == null ? void 0 : _a.teleBoxManager.stageRect;
+    this.wrapperRect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
     this.playgroundRect = (_b = WindowManager.playground) == null ? void 0 : _b.getBoundingClientRect();
   }
   deleteCursor(uid) {
@@ -16547,15 +16571,15 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.30";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.27", "emittery": "^0.11.0", "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", "@playwright/test": "^1.23.0", "@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/node": "^18.0.0", "@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", "vite-plugin-dts": "^1.2.0", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    this.version = "1.0.0-canary.33";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.30", "emittery": "^0.11.0", "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", "@playwright/test": "^1.23.0", "@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/node": "^18.0.0", "@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", "vite-plugin-dts": "^1.2.0", "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.27", "emittery": "^0.11.0", "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", "@playwright/test": "^1.23.0", "@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/node": "^18.0.0", "@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", "vite-plugin-dts": "^1.2.0", "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.30", "emittery": "^0.11.0", "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", "@playwright/test": "^1.23.0", "@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/node": "^18.0.0", "@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", "vite-plugin-dts": "^1.2.0", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
   }
   static async mount(params) {
     var _a;
@@ -16611,7 +16635,8 @@ const _WindowManager = class extends InvisiblePlugin {
       prefersColorScheme: params.prefersColorScheme,
       stageRatio: _WindowManager.containerSizeRatio,
       containerStyle: params.containerStyle,
-      stageStyle: params.stageStyle
+      stageStyle: params.stageStyle,
+      fullscreen: params.fullscreen
     });
     (_a = manager.appManager) == null ? void 0 : _a.setBoxManager(manager.boxManager);
     if (params.container) {
@@ -16996,6 +17021,14 @@ const _WindowManager = class extends InvisiblePlugin {
       throw new AppManagerNotInitError();
     }
   }
+  get fullscreen() {
+    var _a;
+    if (this.appManager) {
+      return (_a = this.appManager.boxManager) == null ? void 0 : _a.teleBoxManager.fullscreen;
+    } else {
+      throw new AppManagerNotInitError();
+    }
+  }
   get focused() {
     return this.attributes.focus;
   }
@@ -17139,6 +17172,10 @@ const _WindowManager = class extends InvisiblePlugin {
     var _a, _b;
     (_b = (_a = this.appManager) == null ? void 0 : _a.boxManager) == null ? void 0 : _b.setPrefersColorScheme(scheme);
   }
+  setFullscreen(fullscreen) {
+    var _a, _b;
+    (_b = (_a = this.appManager) == null ? void 0 : _a.boxManager) == null ? void 0 : _b.teleBoxManager.setFullscreen(fullscreen);
+  }
   cleanCurrentScene() {
     var _a;
     (_a = this.focusedView) == null ? void 0 : _a.cleanCurrentScene();