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

package/dist/index.es.js

@@ -20,7 +20,7 @@ var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 import pRetry from "p-retry";
 import Emittery from "emittery";
 import { debounce, isObject, has, get, size as size$1, mapValues, noop as noop$1, pick, isBoolean, isNumber, throttle, isEqual, omitBy, isUndefined, isInteger, orderBy, isEmpty, omit, 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 { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, toJS, WhiteVersion, autorun, 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";
@@ -42,6 +42,7 @@ var Events = /* @__PURE__ */ ((Events2) => {
   Events2["RootDirRemoved"] = "RootDirRemoved";
   Events2["Refresh"] = "Refresh";
   Events2["InitMainViewCamera"] = "InitMainViewCamera";
+  Events2["InvokeAttributesUpdateCallback"] = "InvokeAttributesUpdateCallback";
   return Events2;
 })(Events || {});
 const MagixEventName = "__WindowManger";
@@ -494,6 +495,10 @@ class AppListeners {
             this.setAppFocusViewIndexHandler(data.payload);
             break;
           }
+          case Events.InvokeAttributesUpdateCallback: {
+            this.manager.attributesUpdateCallback(this.manager.attributes.apps);
+            break;
+          }
         }
       }
     };
@@ -997,7 +1002,7 @@ const serializeRoomMembers = (members) => {
     var _a;
     return __spreadValues({
       uid: ((_a = member.payload) == null ? void 0 : _a.uid) || ""
-    }, member);
+    }, toJS(member));
   });
 };
 const createInvisiblePlugin = async (room) => {
@@ -1163,7 +1168,7 @@ class AppContext {
     return this.manager.room;
   }
   get members() {
-    return this.manager.members;
+    return this.manager.members$.value;
   }
   get currentMember() {
     const self2 = findMemberByUid(this.room, this.manager.uid);
@@ -1244,7 +1249,6 @@ class CameraSynchronizer {
       }
     };
     this.onRemoteUpdate = throttle((camera, size2) => {
-      var _a;
       this.remoteCamera = camera;
       this.remoteSize = size2;
       if (this.remoteSize && this.rect) {
@@ -1261,7 +1265,7 @@ class CameraSynchronizer {
         if (camera.centerY !== null) {
           config.centerY = camera.centerY;
         }
-        (_a = this.view) == null ? void 0 : _a.moveCamera(config);
+        this.moveCamera(config);
       }
     }, 10);
   }
@@ -1269,15 +1273,13 @@ class CameraSynchronizer {
     this.view = view;
   }
   onRemoteSizeUpdate(size2) {
-    var _a;
     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;
-      (_a = this.view) == null ? void 0 : _a.moveCamera({
-        scale: nextScale,
-        animationMode: AnimationMode.Continuous
+      this.moveCamera({
+        scale: nextScale
       });
     }
   }
@@ -1285,6 +1287,10 @@ class CameraSynchronizer {
     this.saveCamera(camera);
     this.remoteCamera = camera;
   }
+  moveCamera(camera) {
+    var _a;
+    (_a = this.view) == null ? void 0 : _a.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: AnimationMode.Continuous }));
+  }
 }
 class ViewSync {
   constructor(context) {
@@ -1440,7 +1446,7 @@ class AttributesDelegate {
       attrNames.push("scenes");
     }
     const options = pick(params.options, attrNames);
-    const attrs = { kind: params.kind, options, isDynamicPPT };
+    const attrs = { kind: params.kind, options, isDynamicPPT, setup: false };
     if (typeof params.src === "string") {
       attrs.src = params.src;
     }
@@ -1718,6 +1724,10 @@ class AppProxy {
     this.onFocus = () => {
       this.setScenePath();
     };
+    this.setupDone = () => {
+      this.store.updateAppAttributes(this.id, "setup", true);
+      this.manager.dispatchInternalEvent(Events.InvokeAttributesUpdateCallback);
+    };
     this.kind = params.kind;
     this.id = appId;
     this.appScenePath = `/${this.id}-app-dir`;
@@ -1740,9 +1750,6 @@ class AppProxy {
       notifyPageStateChange: this.notifyPageStateChange
     });
     this.sideEffectManager.add(() => () => this._pageState.destroy());
-    this.sideEffectManager.add(() => emitter.on("roomMembersChange", (members) => {
-      this.appEmitter.emit("roomMembersChange", members);
-    }));
     this.camera$.setValue(toJS(this.appAttributes.camera));
     this.size$.setValue(toJS(this.appAttributes.size));
     this.addCameraReaction();
@@ -1802,6 +1809,9 @@ class AppProxy {
             }
           });
         }
+      }),
+      this.manager.members$.reaction((members) => {
+        this.appEmitter.emit("roomMembersChange", members);
       })
     ]);
   }
@@ -1909,6 +1919,7 @@ class AppProxy {
           this.appResult = result;
           appRegister.notifyApp(this.kind, "created", { appId, result });
           this.fixMobileSize();
+          this.setupDone();
         }, SETUP_APP_DELAY);
       });
       const box = (_a = this.boxManager) == null ? void 0 : _a.createBox({
@@ -2484,6 +2495,7 @@ class AppManager {
     this.appCreateQueue = new AppCreateQueue();
     this.sceneIndex$ = new Val(void 0);
     this.focused$ = new Val(void 0);
+    this.members$ = new Val([]);
     this.sideEffectManager = new SideEffectManager();
     this.sceneState = null;
     this.rootDirRemoving = false;
@@ -2731,7 +2743,7 @@ class AppManager {
         appProxy.appEmitter.emit("roomStateChange", state);
       });
       if (state.roomMembers) {
-        emitter.emit("roomMembersChange", this.members);
+        this.members$.setValue(serializeRoomMembers(state.roomMembers));
       }
       emitter.emit("observerIdChange", this.displayer.observerId);
       if (state.memberState) {
@@ -2809,6 +2821,7 @@ class AppManager {
     appRegister.setSyncRegisterApp((payload) => {
       this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
     });
+    this.members$.setValue(serializeRoomMembers(this.displayer.state.roomMembers));
   }
   async onRootDirRemoved(needClose = true) {
     await this.setMainViewScenePath(INIT_DIR);
@@ -2846,9 +2859,6 @@ class AppManager {
     var _a;
     return ((_a = this.room) == null ? void 0 : _a.uid) || "";
   }
-  get members() {
-    return serializeRoomMembers(this.displayer.state.roomMembers);
-  }
   getMainViewSceneDir() {
     const scenePath = this.store.getMainViewScenePath();
     if (scenePath) {
@@ -2924,13 +2934,17 @@ class AppManager {
         this.appCreateQueue.emitReady();
       }
       const appsWithCreatedAt = appIds.map((appId) => {
-        return {
-          id: appId,
-          createdAt: apps[appId].createdAt
-        };
+        if (apps[appId].setup) {
+          return {
+            id: appId,
+            createdAt: apps[appId].createdAt
+          };
+        } else {
+          return {};
+        }
       });
       for (const { id: id2 } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
-        if (!this.appProxies.has(id2) && !this.appStatus.has(id2)) {
+        if (id2 && !this.appProxies.has(id2) && !this.appStatus.has(id2)) {
           const app = apps[id2];
           try {
             const appAttributes = this.attributes[id2];
@@ -2973,11 +2987,11 @@ class AppManager {
     mainView.disableCameraTransform = disableCameraTransform;
     wait(30).then(() => {
       mainView.divElement = divElement;
+      emitter.emit("mainViewMounted");
     });
     if (!mainView.focusScenePath) {
       this.setMainViewFocusPath();
     }
-    emitter.emit("mainViewMounted");
   }
   setMainViewFocusPath(scenePath) {
     var _a;
@@ -3162,6 +3176,7 @@ class AppManager {
     this.sideEffectManager.flushAll();
     this.sceneIndex$.destroy();
     this.focused$.destroy();
+    this.members$.destroy();
   }
 }
 /*! *****************************************************************************
@@ -4006,7 +4021,7 @@ var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
   }
   return true;
 };
-var shadowStyles = /* @__PURE__ */ (() => '.telebox-quarantine {\n  all: initial;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\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\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\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\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\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-body-wrap {\n  color: #e9e9e9;\n  color: var(--tele-box-color-dark, #e9e9e9);\n}\n\n.telebox-color-scheme-dark .telebox-content {\n  background-color: #25282e;\n  background-color: var(--tele-manager-container-background-dark, #25282e);\n}\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\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-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 TELE_BOX_COLOR_SCHEME = /* @__PURE__ */ ((TELE_BOX_COLOR_SCHEME2) => {
   TELE_BOX_COLOR_SCHEME2["Light"] = "light";
   TELE_BOX_COLOR_SCHEME2["Dark"] = "dark";
@@ -16532,15 +16547,15 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.28";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.26", "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.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.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.26", "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.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" } };
   }
   static async mount(params) {
     var _a;