@netless/window-manager 0.4.65 → 0.4.66

package/dist/index.mjs

@@ -22,7 +22,7 @@ import Emittery from "emittery";
 import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$2, pick, isEmpty, isInteger, orderBy, isFunction, isNumber, isNull } from "lodash";
 import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, autorun, toJS, listenDisposed, unlistenDisposed, ViewMode, AnimationMode, isPlayer, isRoom, WhiteVersion, ApplianceNames, RoomPhase, PlayerPhase, InvisiblePlugin } from "white-web-sdk";
 import { v4 } from "uuid";
-import { genUID, SideEffectManager } from "side-effect-manager";
+import { genUID as genUID$1, SideEffectManager as SideEffectManager$1 } from "side-effect-manager";
 import { ResizeObserver as ResizeObserver$3 } from "@juggle/resize-observer";
 import p$1 from "video.js";
 var Events = /* @__PURE__ */ ((Events2) => {
@@ -691,12 +691,12 @@ function isRef(e2) {
   return Boolean(has(e2, "__isRef"));
 }
 function makeRef(v2) {
-  return { k: genUID(), v: v2, __isRef: true };
+  return { k: genUID$1(), v: v2, __isRef: true };
 }
 const STORAGE_NS = "_WM-STORAGE_";
 class Storage {
   constructor(context, id2, defaultState) {
-    this._sideEffect = new SideEffectManager();
+    this._sideEffect = new SideEffectManager$1();
     this._destroyed = false;
     this._refMap = /* @__PURE__ */ new WeakMap();
     this._lastValue = /* @__PURE__ */ new Map();
@@ -1073,6 +1073,12 @@ class AppContext {
   get pageState() {
     return this.appProxy.pageState;
   }
+  get kind() {
+    return this.appProxy.kind;
+  }
+  dispatchAppEvent(type, value) {
+    internalEmitter.emit(`custom-${this.kind}`, { kind: this.kind, appId: this.appId, type, value });
+  }
 }
 class AppPageStateImpl {
   constructor(params) {
@@ -1364,10 +1370,11 @@ class AppProxy {
       });
       (_b = this.manager.refresher) == null ? void 0 : _b.add(this.stateKey, () => {
         return autorun(() => {
-          var _a3, _b2, _c2;
+          var _a3, _b2, _c2, _d;
           const appState = (_a3 = this.appAttributes) == null ? void 0 : _a3.state;
           if ((appState == null ? void 0 : appState.zIndex) > 0 && appState.zIndex !== ((_b2 = this.box) == null ? void 0 : _b2.zIndex)) {
             (_c2 = this.boxManager) == null ? void 0 : _c2.setZIndex(appId2, appState.zIndex);
+            (_d = this.boxManager) == null ? void 0 : _d.focusBox({ appId: appId2 });
           }
         });
       });
@@ -1783,7 +1790,7 @@ class MainViewProxy {
     this.mainViewIsAddListener = false;
     this.store = this.manager.store;
     this.viewMode = this.manager.windowManger.viewMode;
-    this.sideEffectManager = new SideEffectManager();
+    this.sideEffectManager = new SideEffectManager$1();
     this.startListenWritableChange = () => {
       this.sideEffectManager.add(() => {
         return internalEmitter.on("writableChange", (isWritable) => {
@@ -2090,7 +2097,7 @@ class AppManager {
     this.mainViewScenesLength = 0;
     this.callbacksNode = null;
     this.appCreateQueue = new AppCreateQueue();
-    this.sideEffectManager = new SideEffectManager();
+    this.sideEffectManager = new SideEffectManager$1();
     this.sceneState = null;
     this.rootDirRemoving = false;
     this.onRemoveScenes = async (params) => {
@@ -2941,7 +2948,7 @@ var objectAssign = shouldUseNative$1() ? Object.assign : function(target, source
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var l$1 = objectAssign, n$3 = typeof Symbol === "function" && Symbol.for, p = n$3 ? Symbol.for("react.element") : 60103, q = n$3 ? Symbol.for("react.portal") : 60106, r$4 = n$3 ? Symbol.for("react.fragment") : 60107, t$3 = n$3 ? Symbol.for("react.strict_mode") : 60108, u$3 = n$3 ? Symbol.for("react.profiler") : 60114, v$2 = n$3 ? Symbol.for("react.provider") : 60109, w$1 = n$3 ? Symbol.for("react.context") : 60110, x$1 = n$3 ? Symbol.for("react.forward_ref") : 60112, y$1 = n$3 ? Symbol.for("react.suspense") : 60113, z$1 = n$3 ? Symbol.for("react.memo") : 60115, A$1 = n$3 ? Symbol.for("react.lazy") : 60116, B$1 = typeof Symbol === "function" && Symbol.iterator;
+var l$1 = objectAssign, n$2 = typeof Symbol === "function" && Symbol.for, p = n$2 ? Symbol.for("react.element") : 60103, q = n$2 ? Symbol.for("react.portal") : 60106, r$3 = n$2 ? Symbol.for("react.fragment") : 60107, t$3 = n$2 ? Symbol.for("react.strict_mode") : 60108, u$3 = n$2 ? Symbol.for("react.profiler") : 60114, v$2 = n$2 ? Symbol.for("react.provider") : 60109, w$1 = n$2 ? Symbol.for("react.context") : 60110, x$1 = n$2 ? Symbol.for("react.forward_ref") : 60112, y$1 = n$2 ? Symbol.for("react.suspense") : 60113, z$1 = n$2 ? Symbol.for("react.memo") : 60115, A$1 = n$2 ? Symbol.for("react.lazy") : 60116, B$1 = typeof Symbol === "function" && Symbol.iterator;
 function C$2(a2) {
   for (var b2 = "https://reactjs.org/docs/error-decoder.html?invariant=" + a2, c2 = 1; c2 < arguments.length; c2++)
     b2 += "&args[]=" + encodeURIComponent(arguments[c2]);
@@ -3129,7 +3136,7 @@ react_production_min.Children = { map: function(a2, b2, c2) {
   return a2;
 } };
 react_production_min.Component = F$2;
-react_production_min.Fragment = r$4;
+react_production_min.Fragment = r$3;
 react_production_min.Profiler = u$3;
 react_production_min.PureComponent = H$2;
 react_production_min.StrictMode = t$3;
@@ -4289,10 +4296,10 @@ var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
   }
   return true;
 };
-const e$1$1 = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", s$1$1 = e$1$1.length, t$1$1 = Array(20), r$1$1 = () => {
+const e$1 = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", s$1 = e$1.length, t$1 = Array(20), r$1$1 = () => {
   for (let r2 = 0; r2 < 20; r2++)
-    t$1$1[r2] = e$1$1.charAt(Math.random() * s$1$1);
-  return t$1$1.join("");
+    t$1[r2] = e$1.charAt(Math.random() * s$1);
+  return t$1.join("");
 };
 class o$1 {
   constructor() {
@@ -4347,7 +4354,7 @@ class o$1 {
 var e$2 = Object.defineProperty, s$2 = (typeof require != "undefined" && require, (s2, r2, t2) => (((s3, r3, t3) => {
   r3 in s3 ? e$2(s3, r3, { enumerable: true, configurable: true, writable: true, value: t3 }) : s3[r3] = t3;
 })(s2, typeof r2 != "symbol" ? r2 + "" : r2, t2), t2));
-class r$3 {
+class r$2 {
   constructor(e2, r2) {
     s$2(this, "_value"), s$2(this, "_beforeDestroys"), s$2(this, "_subscribers"), this._value = e2, r2 && (this.compare = r2);
   }
@@ -4370,7 +4377,7 @@ class r$3 {
     return e2(this._value, void 0, s2), r2;
   }
   derive(e2, s2, t2) {
-    const i2 = new r$3(e2(this.value, void 0, t2), s2), o2 = this.reaction((s3, r2, t3) => {
+    const i2 = new r$2(e2(this.value, void 0, t2), s2), o2 = this.reaction((s3, r2, t3) => {
       i2.setValue(e2(s3, r2, t3));
     });
     return i2.addBeforeDestroy(o2), i2;
@@ -4389,7 +4396,7 @@ class r$3 {
 }
 function t$2(e2, s2, t2, i2) {
   let o2 = e2.map((e3) => e3.value);
-  const u2 = new r$3(s2(o2, void 0, i2), t2);
+  const u2 = new r$2(s2(o2, void 0, i2), t2);
   return e2.forEach((e3, r2) => {
     const t3 = e3.reaction((e4, t4, i3) => {
       const c2 = o2.slice();
@@ -4400,7 +4407,7 @@ function t$2(e2, s2, t2, i2) {
     u2.addBeforeDestroy(t3);
   }), u2;
 }
-function i$2(e2, s2) {
+function i$1(e2, s2) {
   Object.keys(s2).forEach((r2) => {
     u$2(e2, r2, s2[r2]);
   });
@@ -4418,7 +4425,7 @@ function c(e2) {
       e2.remove(r2);
     }), s3;
   };
-  return { bindSideEffect: s2, combine: (e3, r2, i2, o2) => s2(t$2(e3, r2, i2, o2)), createVal: (e3, t2) => s2(new r$3(e3, t2)) };
+  return { bindSideEffect: s2, combine: (e3, r2, i2, o2) => s2(t$2(e3, r2, i2, o2)), createVal: (e3, t2) => s2(new r$2(e3, t2)) };
 }
 var TELE_BOX_COLOR_SCHEME;
 (function(TELE_BOX_COLOR_SCHEME2) {
@@ -4968,7 +4975,7 @@ class TeleBox {
       $userFooter: $userFooter$,
       $userStyles: $userStyles$
     };
-    i$2(this, valConfig);
+    i$1(this, valConfig);
     this._state$ = state$;
     this._minSize$ = minSize$;
     this._size$ = size$;
@@ -5888,7 +5895,7 @@ class TeleBoxManager {
       minimized: minimized$,
       maximized: maximized$
     };
-    i$2(this, valConfig);
+    i$1(this, valConfig);
     this._state$ = state$;
     this.root.appendChild(this.maxTitleBar.render());
   }
@@ -6053,7 +6060,7 @@ class TeleBoxManager {
     this.removeAll(skipUpdate);
     Object.keys(this).forEach((key) => {
       const value = this[key];
-      if (value instanceof r$3) {
+      if (value instanceof r$2) {
         value.destroy();
       }
     });
@@ -7295,7 +7302,7 @@ class CursorManager {
     this.manager = manager;
     this.enableCursor = enableCursor;
     this.cursorInstances = /* @__PURE__ */ new Map();
-    this.sideEffectManager = new SideEffectManager();
+    this.sideEffectManager = new SideEffectManager$1();
     this.store = this.manager.store;
     this.applianceIcons = ApplianceMap;
     this.onCursorMove = (payload) => {
@@ -7779,65 +7786,79 @@ const debounceFn = (inputFunction, options = {}) => {
   };
   return debouncedFunction;
 };
-const s$1 = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", e$1 = s$1.length, t$1 = Array(20), i$1 = () => {
-  for (let i2 = 0; i2 < 20; i2++)
-    t$1[i2] = s$1.charAt(Math.random() * e$1);
-  return t$1.join("");
+const SOUP = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const SOUP_LEN = 87;
+const ID_LEN = 20;
+const reusedIdCarrier = [];
+const genUID = () => {
+  for (let i2 = 0; i2 < ID_LEN; i2++) {
+    reusedIdCarrier[i2] = SOUP.charAt(Math.random() * SOUP_LEN);
+  }
+  return reusedIdCarrier.join("");
 };
-function r$2(s2) {
+function invoke(fn) {
   try {
-    return s2();
+    return fn();
   } catch (e2) {
     console.error(e2);
   }
 }
-class n$2 {
+class SideEffectManager {
   constructor() {
+    this.push = this.addDisposer;
     this.disposers = /* @__PURE__ */ new Map();
   }
-  addDisposer(s2, e2 = this.genUID()) {
-    return this.flush(e2), this.disposers.set(e2, Array.isArray(s2) ? () => s2.forEach(r$2) : s2), e2;
-  }
-  add(s2, e2 = this.genUID()) {
-    return this.addDisposer(s2(), e2);
-  }
-  addEventListener(s2, e2, t2, i2, r2 = this.genUID()) {
-    return s2.addEventListener(e2, t2, i2), this.addDisposer(() => s2.removeEventListener(e2, t2, i2), r2), r2;
-  }
-  setTimeout(s2, e2, t2 = this.genUID()) {
-    const i2 = window.setTimeout(() => {
-      this.remove(t2), s2();
-    }, e2);
-    return this.addDisposer(() => window.clearTimeout(i2), t2);
-  }
-  setInterval(s2, e2, t2 = this.genUID()) {
-    const i2 = window.setInterval(s2, e2);
-    return this.addDisposer(() => window.clearInterval(i2), t2);
-  }
-  remove(s2) {
-    const e2 = this.disposers.get(s2);
-    return this.disposers.delete(s2), e2;
-  }
-  flush(s2) {
-    const e2 = this.remove(s2);
-    if (e2)
-      try {
-        e2();
-      } catch (t2) {
-        console.error(t2);
-      }
+  addDisposer(disposer, disposerID = this.genUID()) {
+    this.flush(disposerID);
+    this.disposers.set(disposerID, Array.isArray(disposer) ? joinDisposers(disposer) : disposer);
+    return disposerID;
+  }
+  add(executor, disposerID = this.genUID()) {
+    const disposers = executor();
+    return disposers ? this.addDisposer(disposers, disposerID) : disposerID;
+  }
+  addEventListener(el, type, listener, options, disposerID = this.genUID()) {
+    el.addEventListener(type, listener, options);
+    this.addDisposer(() => el.removeEventListener(type, listener, options), disposerID);
+    return disposerID;
+  }
+  setTimeout(handler, timeout, disposerID = this.genUID()) {
+    const ticket = window.setTimeout(() => {
+      this.remove(disposerID);
+      handler();
+    }, timeout);
+    return this.addDisposer(() => window.clearTimeout(ticket), disposerID);
+  }
+  setInterval(handler, timeout, disposerID = this.genUID()) {
+    const ticket = window.setInterval(handler, timeout);
+    return this.addDisposer(() => window.clearInterval(ticket), disposerID);
+  }
+  remove(disposerID) {
+    const disposer = this.disposers.get(disposerID);
+    this.disposers.delete(disposerID);
+    return disposer;
+  }
+  flush(disposerID) {
+    const disposer = this.remove(disposerID);
+    if (disposer) {
+      disposer();
+    }
   }
   flushAll() {
-    this.disposers.forEach(r$2), this.disposers.clear();
+    this.disposers.forEach(invoke);
+    this.disposers.clear();
   }
   genUID() {
-    let s2;
+    let uid;
     do {
-      s2 = i$1();
-    } while (this.disposers.has(s2));
-    return s2;
+      uid = genUID();
+    } while (this.disposers.has(uid));
+    return uid;
   }
 }
+function joinDisposers(disposers) {
+  return () => disposers.forEach(invoke);
+}
 var resizeObservers = [];
 var hasActiveObservations = function() {
   return resizeObservers.some(function(ro) {
@@ -7913,11 +7934,11 @@ var isHidden = function(target) {
   return !(offsetWidth || offsetHeight || target.getClientRects().length);
 };
 var isElement = function(obj) {
-  var _a, _b;
+  var _a;
   if (obj instanceof Element) {
     return true;
   }
-  var scope = (_b = (_a = obj) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView;
+  var scope = (_a = obj === null || obj === void 0 ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
   return !!(scope && obj instanceof scope.Element);
 };
 var isReplacedElement = function(target) {
@@ -8114,7 +8135,7 @@ var queueMicroTask = function(callback) {
       return notify();
     }).observe(el_1, config);
     trigger = function() {
-      el_1.textContent = "" + (toggle_1 ? toggle_1-- : toggle_1++);
+      el_1.textContent = "".concat(toggle_1 ? toggle_1-- : toggle_1++);
     };
   }
   callbacks.push(callback);
@@ -9078,7 +9099,7 @@ class DocsViewer {
     this.namespace = "netless-app-docs-viewer";
     this.isShowPreview = false;
     this.isSmallBox = false;
-    this.sideEffect = new n$2();
+    this.sideEffect = new SideEffectManager();
     if (pages.length <= 0) {
       throw new Error("[DocsViewer] Empty pages.");
     }
@@ -9087,6 +9108,7 @@ class DocsViewer {
     this.pages = pages;
     this.onNewPageIndex = onNewPageIndex;
     this.onPlay = onPlay;
+    this.onPageIndexChanged = () => void 0;
     this.render();
   }
   mount() {
@@ -9120,6 +9142,7 @@ class DocsViewer {
     if (!Number.isNaN(pageIndex)) {
       this.pageIndex = pageIndex;
       this.$pageNumberInput.value = String(pageIndex + 1);
+      this.onPageIndexChanged(pageIndex);
     }
   }
   setSmallBox(isSmallBox) {
@@ -9639,7 +9662,7 @@ class PageRenderer {
 const SCROLLBAR_DEFAULT_MIN_HEIGHT = 30;
 class ScrollBar {
   constructor(config) {
-    this.sideEffect = new n$2();
+    this.sideEffect = new SideEffectManager();
     this.pagesScrollTop = config.pagesScrollTop || 0;
     this.containerWidth = config.containerWidth || 1;
     this.containerHeight = config.containerHeight || 1;
@@ -9770,7 +9793,7 @@ class StaticDocsViewer {
     baseScenePath,
     appId
   }) {
-    this.sideEffect = new n$2();
+    this.sideEffect = new SideEffectManager();
     this.userScrolling = false;
     this.onNewPageIndex = (index2) => {
       this.scrollToPage(index2);
@@ -10132,7 +10155,7 @@ class StaticDocsViewer {
 }
 class DynamicDocsViewer {
   constructor({ context, whiteboardView, box, pages }) {
-    this.sideEffect = new n$2();
+    this.sideEffect = new SideEffectManager();
     this.onPlayPPT = () => {
       const room = this.context.getRoom();
       if (room) {
@@ -10361,6 +10384,13 @@ function setupStaticDocsViewer(context, whiteboardView, box, pages) {
     baseScenePath: context.getInitScenePath(),
     appId: context.appId
   }).mount();
+  docsViewer.viewer.onPageIndexChanged = (index2) => {
+    context.dispatchAppEvent("pageStateChange", { index: index2, length: pages.length });
+  };
+  context.dispatchAppEvent("pageStateChange", {
+    index: docsViewer.viewer.pageIndex,
+    length: pages.length
+  });
   context.emitter.on("attributesUpdate", (attributes) => {
     if (attributes) {
       if (attributes.pageScrollTop != null) {
@@ -10381,6 +10411,13 @@ function setupDynamicDocsViewer(context, whiteboardView, box, pages) {
     box,
     pages
   }).mount();
+  docsViewer.viewer.onPageIndexChanged = (index2) => {
+    context.dispatchAppEvent("pageStateChange", { index: index2, length: pages.length });
+  };
+  context.dispatchAppEvent("pageStateChange", {
+    index: docsViewer.getPageIndex(),
+    length: pages.length
+  });
   context.mountView(docsViewer.$whiteboardView);
   if (context.isAddApp) {
     whiteboardView.callbacks.once("onSizeUpdated", ({ width: contentWidth, height: contentHeight }) => {
@@ -17009,7 +17046,7 @@ const _IframeBridge = class {
     this.allowAppliances = ["clicker"];
     this.bridgeDisposer = noop$2;
     this.rootRect = null;
-    this.sideEffectManager = new SideEffectManager();
+    this.sideEffectManager = new SideEffectManager$1();
     this.execListenIframe = debounce((options) => {
       this.listenIframe(options);
     }, 50);
@@ -17468,14 +17505,14 @@ const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "0.4.65";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.27", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.16", "@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", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
+    this.version = "0.4.66-beta.0";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.27", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.17", "@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", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
     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": "0.2.27", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.16", "@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", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.27", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.17", "@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", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
   }
   static async mount(params) {
     const room = params.room;
@@ -17701,11 +17738,12 @@ const _WindowManager = class extends InvisiblePlugin {
         for (const appId of apps) {
           const appScenePath = appManager.store.getAppScenePath(appId);
           if (appScenePath && appScenePath === scenePath) {
-            console.warn(`[WindowManager]: ScenePath ${scenePath} Already opened`);
+            console.warn(`[WindowManager]: ScenePath "${scenePath}" already opened`);
             if (this.boxManager) {
               const topBox = this.boxManager.getTopBox();
               if (topBox) {
                 this.boxManager.setZIndex(appId, topBox.zIndex + 1, false);
+                this.boxManager.focusBox({ appId }, false);
               }
             }
             return;
@@ -17827,6 +17865,9 @@ const _WindowManager = class extends InvisiblePlugin {
   onAppDestroy(kind2, listener) {
     addEmitterOnceListener(`destroy-${kind2}`, listener);
   }
+  onAppEvent(kind2, listener) {
+    return internalEmitter.on(`custom-${kind2}`, listener);
+  }
   setViewMode(mode) {
     var _a, _b, _c, _d;
     if (mode === ViewMode.Broadcaster || mode === ViewMode.Follower) {