@netless/window-manager 1.0.0-canary.7 → 1.0.0-canary.71

package/src/BoxManager.ts

@@ -1,9 +1,11 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
+import { SideEffectManager } from "side-effect-manager";
 import { TELE_BOX_STATE, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
+import type { Writeable } from "./typings";
 import type { BoxEmitterType } from "./BoxEmitter";
-import type { AddAppOptions, AppInitState } from "./index";
+import type { AddAppOptions } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
     TeleBoxManagerCreateConfig,
@@ -12,13 +14,15 @@ import type {
     TeleBoxColorScheme,
     TeleBoxRect,
     TeleBoxConfig,
+    TeleBoxFullscreen,
+    TeleBoxManagerThemeConfig,
 } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 import type { CallbacksType } from "./callback";
 import type { EmitterType } from "./InternalEmitter";
-import { SideEffectManager } from "side-effect-manager";
+import type { AppState } from "./App/type";
 
 export { TELE_BOX_STATE };
 
@@ -47,11 +51,16 @@ export type CreateTeleBoxManagerConfig = {
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
     stageRatio?: number;
+    containerStyle?: string;
+    stageStyle?: string;
+    fullscreen?: TeleBoxFullscreen;
+    defaultBoxBodyStyle?: string | null;
+    defaultBoxStageStyle?: string | null;
+    theme?: TeleBoxManagerThemeConfig;
 };
 
 export type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;
-    getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
     emitter: EmitterType;
     boxEmitter: BoxEmitterType;
@@ -72,7 +81,6 @@ export const createBoxManager = (
     return new BoxManager(
         {
             safeSetAttributes: (attributes: any) => manager.safeSetAttributes(attributes),
-            getMainView: () => manager.mainView,
             updateAppState: (...args) => manager.appManager?.store.updateAppState(...args),
             canOperate: () => manager.canOperate,
             notifyContainerRectUpdate: (rect: TeleBoxRect) =>
@@ -81,7 +89,7 @@ export const createBoxManager = (
             setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
-            boxEmitter
+            boxEmitter,
         },
         options
     );
@@ -100,17 +108,17 @@ export class BoxManager {
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
         this.sideEffectManager.add(() => [
             // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
-            this.teleBoxManager._state$.reaction(state => {
+            this.teleBoxManager.onValChanged("state", state => {
                 callbacks.emit("boxStateChange", state);
                 emitter.emit("boxStateChange", state);
             }),
-            this.teleBoxManager._darkMode$.reaction(darkMode => {
+            this.teleBoxManager.onValChanged("darkMode", darkMode => {
                 callbacks.emit("darkModeChange", darkMode);
             }),
-            this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+            this.teleBoxManager.onValChanged("prefersColorScheme", colorScheme => {
                 callbacks.emit("prefersColorSchemeChange", colorScheme);
             }),
-            this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+            this.teleBoxManager.onValChanged("minimized", (minimized, skipUpdate) => {
                 if (skipUpdate) {
                     return;
                 }
@@ -126,7 +134,7 @@ export class BoxManager {
                     }
                 }
             }),
-            this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+            this.teleBoxManager.onValChanged("maximized", (maximized, skipUpdate) => {
                 if (skipUpdate) {
                     return;
                 }
@@ -140,7 +148,11 @@ export class BoxManager {
             this.teleBoxManager.events.on(
                 "intrinsic_move",
                 debounce((box: ReadonlyTeleBox): void => {
-                    boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+                    boxEmitter.emit("move", {
+                        appId: box.id,
+                        x: box.intrinsicX,
+                        y: box.intrinsicY,
+                    });
                 }, 50)
             ),
             this.teleBoxManager.events.on(
@@ -165,23 +177,15 @@ export class BoxManager {
             this.teleBoxManager.events.on("z_index", box => {
                 this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
             }),
-            this.teleBoxManager._stageRect$.subscribe(stage => {
-                emitter.emit("playgroundSizeChange", stage);
-                this.context.notifyContainerRectUpdate(stage);
-            }),
-            emitter.on("writableChange", isWritable => {
-                this.teleBoxManager.setHighlightStage(isWritable);
-            }),
             emitter.on("containerSizeRatioUpdate", ratio => {
                 this.teleBoxManager._stageRatio$.setValue(ratio);
             }),
+            this.teleBoxManager._fullscreen$.reaction(fullscreen => {
+                callbacks.emit("fullscreenChange", fullscreen);
+            }),
         ]);
     }
 
-    private get mainView() {
-        return this.context.getMainView();
-    }
-
     private get canOperate() {
         return this.context.canOperate();
     }
@@ -214,9 +218,14 @@ export class BoxManager {
         return this.teleBoxManager.stageRect;
     }
 
+    public get stageRect$() {
+        return this.teleBoxManager._stageRect$;
+    }
+
     public createBox(params: CreateBoxParams): ReadonlyTeleBox | undefined {
         if (!this.teleBoxManager) return;
-        let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
+        // eslint-disable-next-line prefer-const
+        let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT, enableShadowDOM = true } = params.app.config ?? {};
         const { width, height } = params.app.config ?? {};
         const title = params.options?.title || params.appId;
         const rect = this.teleBoxManager.rootRect;
@@ -236,6 +245,7 @@ export class BoxManager {
             width,
             height,
             id: params.appId,
+            enableShadowDOM,
         };
         const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
@@ -246,13 +256,37 @@ export class BoxManager {
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ): TeleBoxManager {
         const root = WindowManager.playground;
-        const initManagerState: TeleBoxManagerConfig = {
+        const initManagerState: Writeable<TeleBoxManagerConfig> = {
             stageRatio: createTeleBoxManagerConfig?.stageRatio,
             root: root,
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
         };
 
+        if (createTeleBoxManagerConfig?.containerStyle) {
+            initManagerState.containerStyle = createTeleBoxManagerConfig.containerStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.stageStyle) {
+            initManagerState.stageStyle = createTeleBoxManagerConfig.stageStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.fullscreen) {
+            initManagerState.fullscreen = createTeleBoxManagerConfig.fullscreen;
+        }
+
+        if (createTeleBoxManagerConfig?.defaultBoxBodyStyle !== undefined) {
+            initManagerState.defaultBoxBodyStyle = createTeleBoxManagerConfig.defaultBoxBodyStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.defaultBoxStageStyle !== undefined) {
+            initManagerState.defaultBoxStageStyle = createTeleBoxManagerConfig.defaultBoxStageStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.theme) {
+            initManagerState.theme = createTeleBoxManagerConfig.theme;
+        }
+
         const manager = new TeleBoxManager(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();
@@ -290,21 +324,19 @@ export class BoxManager {
         return this.teleBoxManager.topBox;
     }
 
-    public updateBoxState(state?: AppInitState): void {
+    public updateBoxState(state?: AppState): void {
         if (!state) return;
         const box = this.getBox(state.id);
         if (box) {
-            this.teleBoxManager.update(
-                box.id,
-                {
-                    x: state.x,
-                    y: state.y,
-                    width: state.width || 0.5,
-                    height: state.height || 0.5,
-                    zIndex: state.zIndex,
-                },
-                true
-            );
+            if (state.size) {
+                box._intrinsicSize$.setValue(state.size, true);
+            }
+            if (state.position && state.position.x !== undefined && state.position.y !== undefined) {
+                box._intrinsicCoord$.setValue({ x: state.position.x, y: state.position.y }, true);
+            }
+            if (state.zIndex) {
+                box._zIndex$.setValue(state.zIndex, true);
+            }
             setTimeout(() => {
                 if (state.focus) {
                     this.teleBoxManager.focusBox(box.id, true);
@@ -321,7 +353,10 @@ export class BoxManager {
     }
 
     public moveBox({ appId, x, y }: MoveBoxParams): void {
-        this.teleBoxManager.update(appId, { x, y }, true);
+        const box = this.getBox(appId);
+        if (box) {
+            box._intrinsicCoord$.setValue({ x, y }, true);
+        }
     }
 
     public focusBox({ appId }: AppId, skipUpdate = true): void {
@@ -329,7 +364,10 @@ export class BoxManager {
     }
 
     public resizeBox({ appId, width, height, skipUpdate }: ResizeBoxParams): void {
-        this.teleBoxManager.update(appId, { width, height }, skipUpdate);
+        const box = this.getBox(appId);
+        if (box) {
+            box._intrinsicSize$.setValue({ width, height }, skipUpdate);
+        }
     }
 
     public setBoxMinSize(params: SetBoxMinSizeParams): void {

package/src/BuiltinApps.ts

@@ -1,23 +1,24 @@
 import AppDocsViewer from "@netless/app-docs-viewer";
-import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
+import Plyr from "@netless/app-plyr";
 import { WindowManager } from "./index";
 
 export const setupBuiltin = () => {
-    if (WindowManager.debug) {
-        setOptions({ verbose: true });
-    }
-
     WindowManager.register({
         kind: AppDocsViewer.kind,
         src: AppDocsViewer,
     });
     WindowManager.register({
-        kind: AppMediaPlayer.kind,
-        src: AppMediaPlayer,
+        kind: Plyr.kind,
+        src: Plyr,
     });
 };
 
 export const BuiltinApps = {
     DocsViewer: AppDocsViewer.kind as string,
-    MediaPlayer: AppMediaPlayer.kind as string,
+    MediaPlayer: Plyr.kind as string,
 };
+
+export const BuiltinAppsMap = {
+    [BuiltinApps.DocsViewer]: AppDocsViewer,
+    [BuiltinApps.MediaPlayer]: Plyr,
+}

package/src/Cursor/Cursor.svelte

@@ -15,12 +15,16 @@
     export let color: string;
     export let cursorTagBackgroundColor: string;
     export let opacity: number;
+    export let pencilEraserSize: number;
 
     $: hasName = !isEmpty(cursorName);
     $: hasTagName = !isEmpty(tagName);
     $: hasAvatar = !isEmpty(avatar);
     $: display = visible ? "initial" : "none";
     $: isLaserPointer = appliance === ApplianceNames.laserPointer;
+    $: isLaserPointerPencilEraser = isLaserPointer || appliance === ApplianceNames.pencilEraser;
+    $: offset = isLaserPointerPencilEraser ? "netless-window-manager-laserPointer-pencilEraser-offset" : "";
+    $: pencilEraserSize3ImageOffset = pencilEraserSize === 3 ? "netless-window-manager-pencilEraser-3-offset" : "";
 
     const computedAvatarStyle = () => {
         return Object.entries({
@@ -40,7 +44,7 @@
     style="transform: translateX({x}px) translateY({y}px);display: {display}"
 >   
     {#if !isLaserPointer}
-        <div class="netless-window-manager-cursor-name">
+        <div class="netless-window-manager-cursor-name {offset} {pencilEraserSize3ImageOffset}">
             <div
                 class={theme}
                 style="background-color: {backgroundColor};color: {color};opacity: {opacity}"
@@ -63,6 +67,6 @@
         </div>
     {/if}
     <div class="cursor-image-wrapper">
-        <img class="netless-window-manager-cursor-{appliance}-image" {src} alt={appliance} />
+        <img class="netless-window-manager-cursor-{appliance}-image {pencilEraserSize3ImageOffset}" {src} alt={appliance} />
     </div>
 </div>

package/src/Cursor/Cursor.ts

@@ -7,6 +7,7 @@ import type { RoomMember } from "white-web-sdk";
 import type { CursorManager } from "./index";
 import type { SvelteComponent } from "svelte";
 import type { AppManager } from "../AppManager";
+import type { TeleBoxRect } from "@netless/telebox-insider";
 
 export type Payload = {
     [key: string]: any;
@@ -30,7 +31,7 @@ export class Cursor {
 
     public move = (position: Position) => {
         if (position.type === "main") {
-            const rect = this.cursorManager.wrapperRect;
+            const rect = this.manager.boxManager?.stageRect;
             if (this.component && rect) {
                 this.autoHidden();
                 this.moveCursor(position, rect, this.manager.mainView);
@@ -50,18 +51,21 @@ export class Cursor {
         this.hide();
     };
 
-    private moveCursor(cursor: Position, rect: DOMRect, view: any) {
+    private moveCursor(cursor: Position, rect: TeleBoxRect, view: any) {
         const { x, y, type } = cursor;
         const point = view?.screen.convertPointToScreen(x, y);
         if (point) {
             let translateX = point.x - 2;
             let translateY = point.y - 18;
             if (type === "app") {
-                const wrapperRect = this.cursorManager.wrapperRect;
+                const wrapperRect = this.cursorManager.playgroundRect;
                 if (wrapperRect) {
                     translateX = translateX + rect.x - wrapperRect.x;
                     translateY = translateY + rect.y - wrapperRect.y;
                 }
+            } else {
+                translateX = translateX + rect.x;
+                translateY = translateY + rect.y;
             }
             if (point.x < 0 || point.x > rect.width || point.y < 0 || point.y > rect.height) {
                 this.component?.$set({ visible: false, x: translateX, y: translateY });
@@ -153,13 +157,20 @@ export class Cursor {
             cursorTagBackgroundColor: this.memberCursorTagBackgroundColor,
             opacity: this.memberOpacity,
             tagName: this.memberTagName,
+            pencilEraserSize: this.member?.memberState.pencilEraserSize,
         };
     }
 
     private getIcon() {
         if (this.member) {
             const icons = this.cursorManager.applianceIcons;
-            const applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
+            let applianceSrc;
+            if (this.memberApplianceName === ApplianceNames.pencilEraser) {
+                const size = this.member?.memberState.pencilEraserSize || 1;
+                applianceSrc = icons[`${this.memberApplianceName}${size}`];
+            } else {
+                applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
+            }
             return applianceSrc || icons[ApplianceNames.shape];
         }
     }

package/src/Cursor/icons.ts

@@ -5,6 +5,9 @@ import eraser from "../image/eraser-cursor.png";
 import shape from "../image/shape-cursor.svg";
 import text from "../image/text-cursor.svg";
 import laser from "../image/laser-pointer-cursor.svg";
+import pencilEraser1 from "../image/pencil-eraser-1.svg";
+import pencilEraser2 from "../image/pencil-eraser-2.svg";
+import pencilEraser3 from "../image/pencil-eraser-3.svg";
 
 export const ApplianceMap: {
     [key: string]: string;
@@ -15,4 +18,7 @@ export const ApplianceMap: {
     [ApplianceNames.shape]: shape,
     [ApplianceNames.text]: text,
     [ApplianceNames.laserPointer]: laser,
+    ["pencilEraser1"]: pencilEraser1,
+    ["pencilEraser2"]: pencilEraser2,
+    ["pencilEraser3"]: pencilEraser3,
 };

package/src/Cursor/index.ts

@@ -5,11 +5,12 @@ import { emitter } from "../InternalEmitter";
 import { SideEffectManager } from "side-effect-manager";
 import { throttle } from "lodash";
 import { WindowManager } from "../index";
-import type { CursorMovePayload , ApplianceIcons} from "../index";
+import type { CursorMovePayload , ApplianceIcons, TeleBoxRect } from "../index";
 import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import { ApplianceMap } from "./icons";
+import { findMemberByUid } from "../Helper";
 
 export type EventType = {
     type: PositionType;
@@ -23,8 +24,8 @@ export type MoveCursorParams = {
 };
 
 export class CursorManager {
-    public containerRect?: DOMRect;
-    public wrapperRect?: DOMRect;
+    public wrapperRect?: TeleBoxRect;
+    public playgroundRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
     private mainViewElement?: HTMLDivElement;
@@ -32,9 +33,13 @@ export class CursorManager {
     private store = this.manager.store;
     public applianceIcons: ApplianceIcons = ApplianceMap;
 
+    public get playground$() {
+        return this.manager.windowManger.playground$;
+    }
+
     constructor(private manager: AppManager, private enableCursor: boolean, applianceIcons?: ApplianceIcons) {
         this.roomMembers = this.manager.room?.state.roomMembers;
-        const playground = WindowManager.playground;
+        const playground = this.playground$.value;
         if (playground) {
             this.setupWrapper(playground);
         }
@@ -65,7 +70,7 @@ export class CursorManager {
     private initCursorInstance = (uid: string) => {
         let cursorInstance = this.cursorInstances.get(uid);
         if (!cursorInstance) {
-            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.playground);
+            cursorInstance = new Cursor(this.manager, uid, this, this.playground$.value);
             this.cursorInstances.set(uid, cursorInstance);
         }
         return cursorInstance;
@@ -89,8 +94,7 @@ export class CursorManager {
                 wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
             };
         });
-
-        this.wrapperRect = wrapper.getBoundingClientRect();
+        this.updateContainerRect();
     }
 
     public setMainViewDivElement(div: HTMLDivElement) {
@@ -110,10 +114,11 @@ export class CursorManager {
             if (!event.isPrimary) return;
         }
         this.updateCursor(this.getType(event), event.clientX, event.clientY);
-    }, 16);
+    }, 48);
 
     private updateCursor(event: EventType, clientX: number, clientY: number) {
-        if (this.wrapperRect && this.manager.canOperate) {
+        const self = findMemberByUid(this.manager.room, this.manager.uid);
+        if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self)) {
             const view = event.type === "main" ? this.manager.mainView : this.focusView;
             const point = this.getPoint(view, clientX, clientY);
             if (point) {
@@ -168,8 +173,8 @@ export class CursorManager {
     };
 
     public updateContainerRect() {
-        this.containerRect = WindowManager.container?.getBoundingClientRect();
-        this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
+        this.wrapperRect = this.manager.boxManager?.stageRect;
+        this.playgroundRect = WindowManager.playground?.getBoundingClientRect();
     }
 
     public deleteCursor(uid: string) {

package/src/Helper.ts

@@ -1,11 +1,14 @@
-import { getVersionNumber } from "./Utils/Common";
+import { getVersionNumber, wait } from "./Utils/Common";
+import { log } from "./Utils/log";
 import { REQUIRE_VERSION } from "./constants";
-import { WhiteVersion } from "white-web-sdk";
+import { toJS, WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import type { Room , RoomMember} from "white-web-sdk";
+import { WindowManager } from "./index";
+import type { Room, RoomMember } from "white-web-sdk";
 
 export const setupWrapper = (
-    root: HTMLElement
+    root: HTMLElement,
+    target: HTMLElement
 ): {
     playground: HTMLDivElement;
     mainViewElement: HTMLDivElement;
@@ -15,7 +18,7 @@ export const setupWrapper = (
 
     const mainViewElement = document.createElement("div");
     mainViewElement.className = "netless-window-manager-main-view";
-    playground.appendChild(mainViewElement);
+    target.appendChild(mainViewElement);
     root.appendChild(playground);
 
     return { playground, mainViewElement };
@@ -38,6 +41,21 @@ export type Member = RoomMember & { uid: string };
 export const serializeRoomMembers = (members: readonly RoomMember[]) => {
     return members.map(member => ({
         uid: member.payload?.uid || "",
-        ...member,
+        ...toJS(member),
     }));
-}
+};
+
+export const createInvisiblePlugin = async (room: Room) => {
+    try {
+        const manager = (await room.createInvisiblePlugin(WindowManager, {})) as WindowManager;
+        return manager;
+    } 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);
+        }
+    }
+};

package/src/InternalEmitter.ts

@@ -1,7 +1,6 @@
 import Emittery from "emittery";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { AppInitState, CursorMovePayload } from "./index";
-import type { Member } from "./Helper";
+import type { CursorMovePayload } from "./index";
 import type { MemberState } from "white-web-sdk";
 
 export type RemoveSceneParams = {
@@ -11,7 +10,6 @@ export type RemoveSceneParams = {
 
 export type EmitterEvent = {
     onCreated: undefined;
-    InitReplay: AppInitState;
     error: Error;
     seekStart: undefined;
     seek: number;
@@ -31,7 +29,6 @@ export type EmitterEvent = {
     changePageState: undefined;
     writableChange: boolean;
     containerSizeRatioUpdate: number;
-    roomMembersChange: Member[];
     memberStateChange: MemberState;
 };
 

package/src/Page/PageController.ts

@@ -2,17 +2,19 @@ import type { SceneDefinition } from "white-web-sdk";
 
 export type AddPageParams = {
     after?: boolean;
-    scene?: SceneDefinition;
+    scene?: SceneDefinition | SceneDefinition[];
 };
 
 export type PageState = {
     index: number;
     length: number;
+    pages: string[];
 };
 
 export interface PageController {
     nextPage: () => Promise<boolean>;
     prevPage: () => Promise<boolean>;
+    jumpPage: (index: number) => Promise<boolean>;
     addPage: (params?: AddPageParams) => Promise<void>;
     removePage: (index: number) => Promise<boolean>;
     pageState: PageState;

package/src/PageState.ts

@@ -6,7 +6,7 @@ import type { PageState } from "./Page";
 export class PageStateImpl {
     constructor(private manager: AppManager) {
         emitter.on("changePageState", () => {
-            callbacks.emit("pageStateChange", this.toObject());
+          callbacks.emit("pageStateChange", this.toObject());
         });
     }
 
@@ -18,11 +18,18 @@ export class PageStateImpl {
         return this.manager?.mainViewScenesLength || 0;
     }
 
+    public getPages() {
+        return this.manager.callbacksNode?.scenes.map(sceneName => {
+            return `${this.manager.callbacksNode?.path}${sceneName}`;
+        }) || [];
+    }
+
     public toObject(): PageState {
         const index = this.index >= this.length ? this.length - 1 : this.index;
         return {
             index,
             length: this.length,
+            pages: this.getPages(),
         };
     }
 }

package/src/ReconnectRefresher.ts

@@ -46,14 +46,18 @@ export class ReconnectRefresher {
             this.ctx.emitter.emit("startReconnect");
         }
         if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
-            this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            if (this.room?.isWritable) {
+                this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            } else {
+                this.onReconnected();
+            }
         }
         this.phase = phase;
     };
 
     private onReconnected = debounce(() => {
         this._onReconnected();
-    }, 3000);
+    }, 1000);
 
     private _onReconnected = () => {
         log("onReconnected refresh reactors");
@@ -79,7 +83,7 @@ export class ReconnectRefresher {
         this._onReconnected();
     }
 
-    public add(id: string, func: any) {
+    public add(id: string, func: any): () => void {
         const disposer = this.disposers.get(id);
         if (disposer && isFunction(disposer)) {
             disposer();