@netless/window-manager 0.4.73-beta.0 → 0.4.73-beta.1

package/src/BoxEmitter.ts

@@ -1,19 +1,25 @@
 import type { TELE_BOX_STATE } from "@netless/telebox-insider";
 import Emittery from "emittery";
 
-export type BoxMovePayload = { appId: string, x: number; y: number };
+export type BoxMovePayload = { appId: string; x: number; y: number };
 export type BoxFocusPayload = { appId: string };
-export type BoxResizePayload = { appId: string, width: number; height: number, x?: number, y?: number };
-export type BoxClosePayload = { appId: string, error?: Error };
-export type BoxStateChangePayload = { appId: string, state: TELE_BOX_STATE };
+export type BoxResizePayload = {
+    appId: string;
+    width: number;
+    height: number;
+    x?: number;
+    y?: number;
+};
+export type BoxClosePayload = { appId: string; error?: Error };
+export type BoxStateChangePayload = { appId: string; state: TELE_BOX_STATE };
 
 export type BoxEvent = {
     move: BoxMovePayload;
     focus: BoxFocusPayload;
     resize: BoxResizePayload;
     close: BoxClosePayload;
-    boxStateChange: BoxStateChangePayload
-}
+    boxStateChange: BoxStateChangePayload;
+};
 
 export type BoxEmitterType = Emittery<BoxEvent>;
 export const boxEmitter: BoxEmitterType = new Emittery();

package/src/BoxManager.ts

@@ -79,7 +79,7 @@ export const createBoxManager = (
             setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
-            boxEmitter
+            boxEmitter,
         },
         options
     );

package/src/ContainerResizeObserver.ts

@@ -70,6 +70,6 @@ export class ContainerResizeObserver {
         if (isFunction(this.disposer)) {
             this.disposer();
             this.disposer = undefined;
-        }        
+        }
     }
 }

package/src/Helper.ts

@@ -1,10 +1,11 @@
-import { getVersionNumber, wait } from "./Utils/Common";
-import { log } from "./Utils/log";
-import { REQUIRE_VERSION } from "./constants";
+import pRetry from "p-retry";
 import type { Room, RoomMember } from "white-web-sdk";
 import { WhiteVersion } from "white-web-sdk";
-import { WhiteWebSDKInvalidError } from "./Utils/error";
+import { REQUIRE_VERSION } from "./constants";
 import { WindowManager } from "./index";
+import { getVersionNumber } from "./Utils/Common";
+import { WhiteWebSDKInvalidError } from "./Utils/error";
+import { log } from "./Utils/log";
 
 export const setupWrapper = (
     root: HTMLElement
@@ -53,19 +54,70 @@ export const findMemberByUid = (room: Room | undefined, uid: string) => {
         }
     }
     return result;
-}
+};
+
+export const createInvisiblePlugin = async (room: Room): Promise<WindowManager> => {
+    let manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
+    if (manager) return manager;
 
-export const createInvisiblePlugin = async (room: Room) => {
+    let resolve!: (manager: WindowManager) => void;
+    const promise = new Promise<WindowManager>(r => {
+        // @ts-expect-error Set private property.
+        WindowManager._resolve = resolve = r;
+    });
+
+    let wasReadonly = false;
+    const canOperate = isRoomTokenWritable(room);
+    if (!room.isWritable && canOperate) {
+        wasReadonly = true;
+        await pRetry(
+            async count => {
+                log(`switching to writable (x${count})`);
+                await room.setWritable(true);
+            },
+            { retries: 10, maxTimeout: 5000 }
+        );
+    }
+    if (room.isWritable) {
+        log("creating InvisiblePlugin...");
+        room.createInvisiblePlugin(WindowManager, {}).catch(console.warn);
+    } else {
+        if (canOperate) console.warn("[WindowManager]: failed to switch to writable");
+        console.warn("[WindowManager]: waiting for others to create the plugin...");
+    }
+
+    const timeout = setTimeout(() => {
+        console.warn("[WindowManager]: no one called createInvisiblePlugin() after 20 seconds");
+    }, 20_000);
+
+    const abort = setTimeout(() => {
+        throw new Error("[WindowManager]: no one called createInvisiblePlugin() after 60 seconds");
+    }, 60_000);
+
+    const interval = setInterval(() => {
+        manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
+        if (manager) {
+            clearTimeout(abort);
+            clearTimeout(timeout);
+            clearInterval(interval);
+            resolve(manager);
+            if (wasReadonly && room.isWritable) {
+                setTimeout(() => room.setWritable(false).catch(console.warn), 500);
+            }
+        }
+    }, 200);
+
+    return promise;
+};
+
+const isRoomTokenWritable = (room: Room) => {
     try {
-        const manager = (await room.createInvisiblePlugin(WindowManager, {})) as WindowManager;
-        return manager;
+        const str = atob(room.roomToken.slice("NETLESSROOM_".length));
+        const index = str.indexOf("&role=");
+        const role = +str[index + "&role=".length];
+        return role < 2;
     } catch (error) {
-        // 如果有两个用户同时调用 WindowManager.mount 有概率出现这个错误
-        if (error.message === `invisible plugin "WindowManager" exits`) {
-            await wait(200);
-            return room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
-        } else {
-            log("createInvisiblePlugin failed", error);
-        }
+        console.error(error);
+        return false;
     }
 };

package/src/InternalEmitter.ts

@@ -2,8 +2,9 @@ import Emittery from "emittery";
 import type { AppInitState, CursorMovePayload } from "./index";
 
 export type RemoveSceneParams = {
-    scenePath: string, index?: number
-}
+    scenePath: string;
+    index?: number;
+};
 
 export type EmitterEvent = {
     onCreated: undefined;
@@ -21,7 +22,7 @@ export type EmitterEvent = {
     cursorMove: CursorMovePayload;
     updateManagerRect: undefined;
     focusedChange: { focused: string | undefined; prev: string | undefined };
-    rootDirRemoved: undefined;  // 根目录整个被删除
+    rootDirRemoved: undefined; // 根目录整个被删除
     rootDirSceneRemoved: string; // 根目录下的场景被删除
     setReadonly: boolean;
     changePageState: undefined;

package/src/Page/index.ts

@@ -15,4 +15,4 @@ export const calculateNextIndex = (index: number, pageState: PageState) => {
         nextIndex = pageState.index;
     }
     return nextIndex;
-}
+};

package/src/Register/index.ts

@@ -8,7 +8,7 @@ export type LoadAppEvent = {
     reason?: string;
 };
 
-export type SyncRegisterAppPayload =  { kind: string, src: string, name: string | undefined };
+export type SyncRegisterAppPayload = { kind: string; src: string; name: string | undefined };
 export type SyncRegisterApp = (payload: SyncRegisterAppPayload) => void;
 
 class AppRegister {
@@ -25,7 +25,7 @@ class AppRegister {
 
     public onSyncRegisterAppChange = (payload: SyncRegisterAppPayload) => {
         this.register({ kind: payload.kind, src: payload.src });
-    }
+    };
 
     public async register(params: RegisterParams): Promise<void> {
         this.appClassesCache.delete(params.kind);
@@ -36,7 +36,7 @@ class AppRegister {
 
         if (typeof paramSrc === "string") {
             downloadApp = async () => {
-                const result = await loadApp(paramSrc, params.kind, params.name) as any;
+                const result = (await loadApp(paramSrc, params.kind, params.name)) as any;
                 if (result.__esModule) {
                     return result.default;
                 }
@@ -48,16 +48,14 @@ class AppRegister {
         }
         if (typeof paramSrc === "function") {
             downloadApp = async () => {
-                let appClass = await paramSrc() as any;
+                let appClass = (await paramSrc()) as any;
                 if (appClass) {
                     if (appClass.__esModule || appClass.default) {
                         appClass = appClass.default;
                     }
                     return appClass;
                 } else {
-                    throw new Error(
-                        `[WindowManager]: load remote script failed, ${paramSrc}`
-                    );
+                    throw new Error(`[WindowManager]: load remote script failed, ${paramSrc}`);
                 }
             };
         }

package/src/Register/loader.ts

@@ -66,7 +66,7 @@ const getResult = (text: string, appName: string, key: string): NetlessApp => {
         callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
         throw error;
     }
-}
+};
 
 async function fetchWithTimeout(resource: string, options: RequestInit & { timeout: number }) {
     const { timeout = 10000 } = options;

package/src/Register/storage.ts

@@ -6,15 +6,15 @@ let store: IDBObjectStore;
 export type Item = {
     kind: string;
     sourceCode: string;
-}
+};
 
 export const initDb = async () => {
     db = await createDb();
-}
+};
 
 export const setItem = (key: string, val: any) => {
     if (!db) return;
-    return addRecord(db, { kind: key, sourceCode: val })
+    return addRecord(db, { kind: key, sourceCode: val });
 };
 
 export const getItem = async (key: string): Promise<Item | null> => {
@@ -30,9 +30,9 @@ export const removeItem = (key: string) => {
 function createDb(): Promise<IDBDatabase> {
     return new Promise((resolve, reject) => {
         const request = indexedDB.open(DatabaseName, 2);
-        request.onerror = (e) => {
+        request.onerror = e => {
             reject(e);
-        }
+        };
 
         request.onupgradeneeded = (event: any) => {
             const db = event.target.result as IDBDatabase;
@@ -40,28 +40,28 @@ function createDb(): Promise<IDBDatabase> {
                 store = db.createObjectStore("apps", { keyPath: "kind" });
                 store.createIndex("kind", "kind", { unique: true });
             }
-        }
+        };
 
         request.onsuccess = () => {
             const db = request.result;
             resolve(db);
-        }
-    })
+        };
+    });
 }
 
 function query<T>(db: IDBDatabase, val: string): Promise<T | null> {
     return new Promise((resolve, reject) => {
         const index = db.transaction(["apps"]).objectStore("apps").index("kind");
         const request = index.get(val);
-        request.onerror = (e) => reject(e);
+        request.onerror = e => reject(e);
         request.onsuccess = () => {
             if (request.result) {
                 resolve(request.result);
             } else {
                 resolve(null);
             }
-        }
-    })
+        };
+    });
 }
 
 function addRecord(db: IDBDatabase, payload: any): Promise<void> {
@@ -69,7 +69,7 @@ function addRecord(db: IDBDatabase, payload: any): Promise<void> {
         const request = db.transaction(["apps"], "readwrite").objectStore("apps").add(payload);
         request.onsuccess = () => resolve();
         request.onerror = () => reject();
-    })
+    });
 }
 
 function deleteRecord(db: IDBDatabase, key: string): Promise<void> {
@@ -77,5 +77,5 @@ function deleteRecord(db: IDBDatabase, key: string): Promise<void> {
         const request = db.transaction(["apps"], "readwrite").objectStore("apps").delete(key);
         request.onsuccess = () => resolve();
         request.onerror = () => reject();
-    })
+    });
 }

package/src/Utils/Common.ts

@@ -5,7 +5,7 @@ import { ROOT_DIR } from "../constants";
 import { ScenePathType } from "white-web-sdk";
 import { v4 } from "uuid";
 import type { PublicEvent } from "../callback";
-import type { Displayer, ViewVisionMode, Room, View , SceneDefinition} from "white-web-sdk";
+import type { Displayer, ViewVisionMode, Room, View, SceneDefinition } from "white-web-sdk";
 import type Emittery from "emittery";
 
 export const genAppId = async (kind: string) => {
@@ -104,14 +104,19 @@ export const entireScenes = (displayer: Displayer) => {
     return displayer.entireScenes();
 };
 
-export const putScenes = (room: Room | undefined, path: string, scenes: SceneDefinition[], index?: number) => {
+export const putScenes = (
+    room: Room | undefined,
+    path: string,
+    scenes: SceneDefinition[],
+    index?: number
+) => {
     for (let i = 0; i < scenes.length; ++i) {
-        if (scenes[i].name?.includes('/')) {
+        if (scenes[i].name?.includes("/")) {
             throw new Error("scenes name can not have '/'");
         }
     }
     return room?.putScenes(path, scenes, index);
-}
+};
 
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
@@ -156,4 +161,4 @@ export const isRootDirPage = (scenePath: string) => {
         return prev;
     }, 0);
     return delimiterCount === 1;
-}
+};

package/src/Utils/Reactive.ts

@@ -1,5 +1,5 @@
 import { listenUpdated, unlistenUpdated, reaction, UpdateEventKind } from "white-web-sdk";
-import type { AkkoObjectUpdatedProperty , AkkoObjectUpdatedListener } from "white-web-sdk";
+import type { AkkoObjectUpdatedProperty, AkkoObjectUpdatedListener } from "white-web-sdk";
 import { isObject } from "lodash";
 
 // 兼容 13 和 14 版本 SDK
@@ -12,7 +12,7 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 if (kinds.includes(event)) {
                     func();
                 }
-            }
+            };
             listenUpdated(object, listener);
             func();
             return () => unlistenUpdated(object, listener);
@@ -21,43 +21,44 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 () => object,
                 () => {
                     func();
-                }, {
+                },
+                {
                     fireImmediately: true,
                 }
-            )
+            );
         }
-    }
-}
+    };
+};
 
 export const safeListenPropsUpdated = <T>(
     getProps: () => T,
     callback: AkkoObjectUpdatedListener<T>,
     onDestroyed?: (props: unknown) => void
-  ) => {
+) => {
     let disposeListenUpdated: (() => void) | null = null;
     const disposeReaction = reaction(
-      getProps,
-      () => {
-        if (disposeListenUpdated) {
-          disposeListenUpdated();
-          disposeListenUpdated = null;
-        }
-        const props = getProps();
-        if (isObject(props)) {
-          disposeListenUpdated = () => unlistenUpdated(props, callback);
-          listenUpdated(props, callback);
-        } else {
-          onDestroyed?.(props);
-        }
-      },
-      { fireImmediately: true }
+        getProps,
+        () => {
+            if (disposeListenUpdated) {
+                disposeListenUpdated();
+                disposeListenUpdated = null;
+            }
+            const props = getProps();
+            if (isObject(props)) {
+                disposeListenUpdated = () => unlistenUpdated(props, callback);
+                listenUpdated(props, callback);
+            } else {
+                onDestroyed?.(props);
+            }
+        },
+        { fireImmediately: true }
     );
 
     return () => {
-      disposeListenUpdated?.();
-      disposeReaction();
+        disposeListenUpdated?.();
+        disposeReaction();
     };
-}
+};
 
 export const onObjectRemoved = onObjectByEvent(UpdateEventKind.Removed);
 export const onObjectInserted = onObjectByEvent(UpdateEventKind.Inserted);

package/src/Utils/RoomHacker.ts

@@ -78,7 +78,7 @@ const delegateSeekToProgressTime = (player: Player) => {
         // seek 时需要先关闭所有的 app 防止内部使用的 mobx 出现错误
         await internalEmitter.emit("seekStart");
         const seekResult = await originSeek.call(player, time);
-        internalEmitter.emit("seek", time); 
+        internalEmitter.emit("seek", time);
         return seekResult;
     }
     player.seekToProgressTime = newSeek;

package/src/Utils/error.ts

@@ -1,4 +1,3 @@
-
 export class AppCreateError extends Error {
     override message = "[WindowManager]: app duplicate exists and cannot be created again";
 }