@netless/window-manager 0.4.32 → 1.0.0-canary.10

package/src/AppManager.ts

@@ -3,7 +3,7 @@ import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./App";
 import { appRegister } from "./Register";
-import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
+import { autorun, isPlayer, isRoom, ScenePathType, toJS } from "white-web-sdk";
 import { boxEmitter } from "./BoxEmitter";
 import { calculateNextIndex } from "./Page";
 import { callbacks } from "./callback";
@@ -15,8 +15,10 @@ import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
 import { reconnectRefresher, WindowManager } from "./index";
 import { RedoUndo } from "./RedoUndo";
+import { serializeRoomMembers } from "./Helper";
 import { SideEffectManager } from "side-effect-manager";
 import { ViewManager } from "./View/ViewManager";
+import { Val } from "value-enhancer";
 import type { SyncRegisterAppPayload } from "./Register";
 import type { RemoveSceneParams } from "./InternalEmitter";
 import {
@@ -33,10 +35,10 @@ import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
 import type {
     Displayer,
-    DisplayerState,
     Room,
     ScenesCallbacksNode,
     SceneState,
+    RoomState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
@@ -46,7 +48,7 @@ import type {
     BoxResizePayload,
     BoxStateChangePayload,
 } from "./BoxEmitter";
-
+import type { Member } from "./Helper";
 
 export class AppManager {
     public displayer: Displayer;
@@ -55,17 +57,17 @@ export class AppManager {
     public appStatus: Map<string, AppStatus> = new Map();
     public store = store;
     public mainViewProxy: MainViewProxy;
-    public refresher?: ReconnectRefresher;
+    public refresher: ReconnectRefresher;
     public isReplay = this.windowManger.isReplay;
     public mainViewScenesLength = 0;
 
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
 
-    private _prevSceneIndex: number | undefined;
-    private _prevFocused: string | undefined;
     private callbacksNode: ScenesCallbacksNode | null = null;
     private appCreateQueue = new AppCreateQueue();
+    private sceneIndex$ = new Val<number | undefined>(undefined);
+    private focused$ = new Val<string | undefined>(undefined);
 
     private sideEffectManager = new SideEffectManager();
 
@@ -299,6 +301,10 @@ export class AppManager {
         return this.room?.uid || "";
     }
 
+    public get members(): Member[] {
+        return serializeRoomMembers(this.displayer.state.roomMembers);
+    }
+
     public getMainViewSceneDir() {
         const scenePath = this.store.getMainViewScenePath();
         if (scenePath) {
@@ -319,31 +325,31 @@ export class AppManager {
 
         this.addAppsChangeListener();
         this.addAppCloseListener();
-        this.refresher?.add("maximized", () => {
+        this.refresher.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
                 this.boxManager?.setMaximized(Boolean(maximized));
             });
         });
-        this.refresher?.add("minimized", () => {
+        this.refresher.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
                 this.onMinimized(minimized);
             });
         });
-        this.refresher?.add("mainViewIndex", () => {
+        this.refresher.add("mainViewIndex", () => {
             return autorun(() => {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
                 this.onMainViewIndexChange(mainSceneIndex);
             });
         });
-        this.refresher?.add("focusedChange", () => {
+        this.refresher.add("focusedChange", () => {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
                 this.onFocusChange(focused);
             });
         });
-        this.refresher?.add("registeredChange", () => {
+        this.refresher.add("registeredChange", () => {
             return autorun(() => {
                 const registered = get(this.attributes, Fields.Registered);
                 this.onRegisteredChange(registered);
@@ -356,7 +362,7 @@ export class AppManager {
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
-        this._prevFocused = this.attributes.focus;
+        this.focused$.setValue(this.attributes.focus);
 
         this.sideEffectManager.add(() => {
             const redoUndo = new RedoUndo({
@@ -421,21 +427,21 @@ export class AppManager {
     };
 
     private onMainViewIndexChange = (index: number) => {
-        if (index !== undefined && this._prevSceneIndex !== index) {
+        if (index !== undefined && this.sceneIndex$.value !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
             emitter.emit("changePageState");
             if (this.callbacksNode) {
                 this.updateSceneState(this.callbacksNode);
             }
-            this._prevSceneIndex = index;
+            this.sceneIndex$.setValue(index);
         }
     };
 
     private onFocusChange = (focused: string | undefined) => {
-        if (this._prevFocused !== focused) {
+        if (this.focused$.value !== focused) {
             callbacks.emit("focusedChange", focused);
-            emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-            this._prevFocused = focused;
+            emitter.emit("focusedChange", { focused, prev: this.focused$.value });
+            this.focused$.setValue(focused);
             if (focused !== undefined) {
                 this.boxManager?.focusBox({ appId: focused });
                 // 确保 focus 修改的时候, appProxy 已经创建
@@ -646,7 +652,7 @@ export class AppManager {
         }
     }
 
-    private displayerStateListener = (state: Partial<DisplayerState>) => {
+    private displayerStateListener = (state: Partial<RoomState>) => {
         const sceneState = state.sceneState;
         if (sceneState) {
             const scenePath = sceneState.scenePath;
@@ -660,7 +666,13 @@ export class AppManager {
         this.appProxies.forEach(appProxy => {
             appProxy.appEmitter.emit("roomStateChange", state);
         });
+        if (state.roomMembers) {
+            emitter.emit("roomMembersChange", this.members);
+        }
         emitter.emit("observerIdChange", this.displayer.observerId);
+        if (state.memberState) {
+            emitter.emit("memberStateChange", toJS(state.memberState));
+        }
     };
 
     public displayerWritableListener = (isReadonly: boolean) => {
@@ -676,12 +688,9 @@ export class AppManager {
             appProxy.emitAppIsWritableChange();
         });
         if (isWritable === true) {
-            this.mainView.disableCameraTransform = false;
             if (this.room && this.room.disableSerialization === true) {
                 this.room.disableSerialization = false;
             }
-        } else {
-            this.mainView.disableCameraTransform = true;
         }
         emitter.emit("writableChange", isWritable);
     };
@@ -823,7 +832,7 @@ export class AppManager {
         }
         callbacks.clearListeners();
         this.sideEffectManager.flushAll();
-        this._prevFocused = undefined;
-        this._prevSceneIndex = undefined;
+        this.sceneIndex$.destroy();
+        this.focused$.destroy();
     }
 }

package/src/AttributesDelegate.ts

@@ -18,6 +18,8 @@ export enum Fields {
     CursorState = "cursorState",
     FullPath = "fullPath",
     Registered = "registered",
+    Camera = "camera",
+    Size = "size",
 }
 
 export type Apps = {
@@ -39,9 +41,13 @@ export type StoreContext = {
     safeSetAttributes: (attributes: any) => void;
 }
 
-export type ICamera = Camera & { id: string };
+export type ICamera = Camera & { 
+    id: string; // room uid
+};
 
-export type ISize = Size & { id: string };
+export type ISize = Size & {
+    id: string; // room uid
+};
 
 export class AttributesDelegate {
 
@@ -108,6 +114,10 @@ export class AttributesDelegate {
         }
     }
 
+    public updateAppAttributes(appId: string, key: string, value: any) {
+        this.context.safeUpdateAttributes([Fields.Apps, appId, key], value);
+    }
+
     public cleanAppAttributes(id: string) {
         this.context.safeUpdateAttributes([Fields.Apps, id], undefined);
         this.context.safeSetAttributes({ [id]: undefined });
@@ -149,11 +159,11 @@ export class AttributesDelegate {
         this.context.safeSetAttributes({ _mainSceneIndex: index });
     }
 
-    public getMainViewCamera(): MainViewCamera {
+    public getMainViewCamera(): ICamera {
         return get(this.attributes, [Fields.MainViewCamera]);
     }
 
-    public getMainViewSize(): MainViewSize {
+    public getMainViewSize(): ISize {
         return get(this.attributes, [Fields.MainViewSize]);
     }
 
@@ -214,19 +224,6 @@ export class AttributesDelegate {
     }
 }
 
-export type MainViewSize = {
-    id: string;
-    width: number;
-    height: number;
-};
-
-export type MainViewCamera = {
-    id: string;
-    centerX: number;
-    centerY: number;
-    scale: number;
-};
-
 export type Cursors = {
     [key: string]: Cursor;
 };

package/src/BoxManager.ts

@@ -1,6 +1,6 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
-import { TELE_BOX_STATE, TeleBoxCollector, TeleBoxManager } from "@netless/telebox-insider";
+import { TELE_BOX_STATE, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
 import type { BoxEmitterType } from "./BoxEmitter";
 import type { AddAppOptions, AppInitState } from "./index";
@@ -18,6 +18,7 @@ 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";
 
 export { TELE_BOX_STATE };
 
@@ -45,11 +46,12 @@ export type CreateTeleBoxManagerConfig = {
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
+    stageRatio?: number;
+    highlightStage?: boolean;
 };
 
 export type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;
-    getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
     emitter: EmitterType;
     boxEmitter: BoxEmitterType;
@@ -70,7 +72,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) =>
@@ -87,83 +88,93 @@ export const createBoxManager = (
 
 export class BoxManager {
     public teleBoxManager: TeleBoxManager;
+    protected sideEffectManager: SideEffectManager;
 
     constructor(
         private context: BoxManagerContext,
-        private createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
+        createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ) {
+        this.sideEffectManager = new SideEffectManager();
         const { emitter, callbacks, boxEmitter } = context;
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
-
-        // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
-        this.teleBoxManager._state$.reaction(state => {
-            callbacks.emit("boxStateChange", state);
-            emitter.emit("boxStateChange", state);
-        });
-
-        this.teleBoxManager._darkMode$.reaction(darkMode => {
-            callbacks.emit("darkModeChange", darkMode);
-        });
-        this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
-            callbacks.emit("prefersColorSchemeChange", colorScheme);
-        });
-
-        // events.on 的值则会根据 skipUpdate 来决定是否触发回调
-        this.teleBoxManager.events.on("minimized", minimized => {
-            this.context.safeSetAttributes({ minimized });
-            if (minimized) {
-                this.context.cleanFocus();
-                this.blurAllBox();
-            } else {
-                const topBox = this.getTopBox();
-                if (topBox) {
-                    this.context.setAppFocus(topBox.id);
-                    this.focusBox({ appId: topBox.id }, false);
+        this.sideEffectManager.add(() => [
+            // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
+            this.teleBoxManager._state$.reaction(state => {
+                callbacks.emit("boxStateChange", state);
+                emitter.emit("boxStateChange", state);
+            }),
+            this.teleBoxManager._darkMode$.reaction(darkMode => {
+                callbacks.emit("darkModeChange", darkMode);
+            }),
+            this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+                callbacks.emit("prefersColorSchemeChange", colorScheme);
+            }),
+            this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+                if (skipUpdate) {
+                    return;
                 }
-            }
-        });
-        this.teleBoxManager.events.on("maximized", maximized => {
-            this.context.safeSetAttributes({ maximized });
-        });
-        this.teleBoxManager.events.on("removed", boxes => {
-            boxes.forEach(box => {
-                boxEmitter.emit("close", { appId: box.id });
-            });
-        });
-        this.teleBoxManager.events.on(
-            "intrinsic_move",
-            debounce((box: ReadonlyTeleBox): void => {
-                boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
-            }, 50)
-        );
-        this.teleBoxManager.events.on(
-            "intrinsic_resize",
-            debounce((box: ReadonlyTeleBox): void => {
-                boxEmitter.emit("resize", {
-                    appId: box.id,
-                    width: box.intrinsicWidth,
-                    height: box.intrinsicHeight,
-                });
-            }, 200)
-        );
-        this.teleBoxManager.events.on("focused", box => {
-            if (box) {
-                if (this.canOperate) {
-                    boxEmitter.emit("focus", { appId: box.id });
+                this.context.safeSetAttributes({ minimized });
+                if (minimized) {
+                    this.context.cleanFocus();
+                    this.blurAllBox();
                 } else {
-                    this.teleBoxManager.blurBox(box.id);
+                    const topBox = this.getTopBox();
+                    if (topBox) {
+                        this.context.setAppFocus(topBox.id);
+                        this.focusBox({ appId: topBox.id }, false);
+                    }
                 }
-            }
-        });
-        this.teleBoxManager.events.on("z_index", box => {
-            this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
-        });
-        emitter.on("playgroundSizeChange", () => this.updateManagerRect());
-        emitter.on("updateManagerRect", () => this.updateManagerRect());
-    }
-
-    private get mainView() {
-        return this.context.getMainView();
+            }),
+            this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+                if (skipUpdate) {
+                    return;
+                }
+                this.context.safeSetAttributes({ maximized });
+            }),
+            this.teleBoxManager.events.on("removed", boxes => {
+                boxes.forEach(box => {
+                    boxEmitter.emit("close", { appId: box.id });
+                });
+            }),
+            this.teleBoxManager.events.on(
+                "intrinsic_move",
+                debounce((box: ReadonlyTeleBox): void => {
+                    boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+                }, 50)
+            ),
+            this.teleBoxManager.events.on(
+                "intrinsic_resize",
+                debounce((box: ReadonlyTeleBox): void => {
+                    boxEmitter.emit("resize", {
+                        appId: box.id,
+                        width: box.intrinsicWidth,
+                        height: box.intrinsicHeight,
+                    });
+                }, 200)
+            ),
+            this.teleBoxManager.events.on("focused", box => {
+                if (box) {
+                    if (this.canOperate) {
+                        boxEmitter.emit("focus", { appId: box.id });
+                    } else {
+                        this.teleBoxManager.blurBox(box.id);
+                    }
+                }
+            }),
+            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);
+            }),
+        ]);
     }
 
     private get canOperate() {
@@ -194,12 +205,16 @@ export class BoxManager {
         return this.teleBoxManager.boxes.length;
     }
 
-    public createBox(params: CreateBoxParams): void {
+    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 ?? {};
         const { width, height } = params.app.config ?? {};
         const title = params.options?.title || params.appId;
-        const rect = this.teleBoxManager.containerRect;
+        const rect = this.teleBoxManager.rootRect;
 
         if (minwidth > 1) {
             minwidth = minwidth / rect.width;
@@ -217,40 +232,21 @@ export class BoxManager {
             height,
             id: params.appId,
         };
-        this.teleBoxManager.create(createBoxConfig, params.smartPosition);
+        const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
-    }
-
-    public setBoxInitState(appId: string): void {
-        const box = this.teleBoxManager.queryOne({ id: appId });
-        if (box) {
-            if (box.state === TELE_BOX_STATE.Maximized) {
-                this.context.boxEmitter.emit("resize", {
-                    appId: appId,
-                    x: box.x,
-                    y: box.y,
-                    width: box.intrinsicWidth,
-                    height: box.intrinsicHeight,
-                });
-            }
-        }
+        return box;
     }
 
     public setupBoxManager(
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ): TeleBoxManager {
-        const root = WindowManager.wrapper ? WindowManager.wrapper : document.body;
-        const rect = root.getBoundingClientRect();
+        const root = WindowManager.playground;
         const initManagerState: TeleBoxManagerConfig = {
+            stageRatio: createTeleBoxManagerConfig?.stageRatio,
             root: root,
-            containerRect: {
-                x: 0,
-                y: 0,
-                width: rect.width,
-                height: rect.height,
-            },
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
+            highlightStage: createTeleBoxManagerConfig?.highlightStage,
         };
 
         const manager = new TeleBoxManager(initManagerState);
@@ -258,20 +254,16 @@ export class BoxManager {
             this.teleBoxManager.destroy();
         }
         this.teleBoxManager = manager;
-        const container = createTeleBoxManagerConfig?.collectorContainer || WindowManager.wrapper;
+        const container = createTeleBoxManagerConfig?.collectorContainer;
         if (container) {
-            this.setCollectorContainer(container);
+            this.teleBoxManager.collector.set$collector(container);
+        }
+        if (createTeleBoxManagerConfig?.collectorStyles) {
+            this.teleBoxManager.collector.setStyles(createTeleBoxManagerConfig.collectorStyles);
         }
         return manager;
     }
 
-    public setCollectorContainer(container: HTMLElement) {
-        const collector = new TeleBoxCollector({
-            styles: this.createTeleBoxManagerConfig?.collectorStyles,
-        }).mount(container);
-        this.teleBoxManager.setCollector(collector);
-    }
-
     public getBox(appId: string): ReadonlyTeleBox | undefined {
         return this.teleBoxManager.queryOne({ id: appId });
     }
@@ -324,15 +316,6 @@ export class BoxManager {
         }
     }
 
-    public updateManagerRect(): void {
-        const rect = this.mainView.divElement?.getBoundingClientRect();
-        if (rect && rect.width > 0 && rect.height > 0) {
-            const containerRect = { x: 0, y: 0, width: rect.width, height: rect.height };
-            this.teleBoxManager.setContainerRect(containerRect);
-            this.context.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
-        }
-    }
-
     public moveBox({ appId, x, y }: MoveBoxParams): void {
         this.teleBoxManager.update(appId, { x, y }, true);
     }
@@ -404,7 +387,16 @@ export class BoxManager {
         this.teleBoxManager.update(id, { zIndex }, skipUpdate);
     }
 
+    public setRoot(root: HTMLElement) {
+        this.teleBoxManager._root$.setValue(root);
+    }
+
+    public setCollector(collector: HTMLElement) {
+        this.teleBoxManager.collector.set$collector(collector);
+    }
+
     public destroy() {
+        this.sideEffectManager.flushAll();
         this.teleBoxManager.destroy();
     }
 }

package/src/Cursor/index.ts

@@ -34,9 +34,9 @@ export class CursorManager {
 
     constructor(private manager: AppManager, private enableCursor: boolean, applianceIcons?: ApplianceIcons) {
         this.roomMembers = this.manager.room?.state.roomMembers;
-        const wrapper = WindowManager.wrapper;
-        if (wrapper) {
-            this.setupWrapper(wrapper);
+        const playground = WindowManager.playground;
+        if (playground) {
+            this.setupWrapper(playground);
         }
         this.sideEffectManager.add(() => {
             return emitter.on("cursorMove", this.onCursorMove);
@@ -65,7 +65,7 @@ export class CursorManager {
     private initCursorInstance = (uid: string) => {
         let cursorInstance = this.cursorInstances.get(uid);
         if (!cursorInstance) {
-            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.wrapper);
+            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.playground);
             this.cursorInstances.set(uid, cursorInstance);
         }
         return cursorInstance;
@@ -169,7 +169,7 @@ export class CursorManager {
 
     public updateContainerRect() {
         this.containerRect = WindowManager.container?.getBoundingClientRect();
-        this.wrapperRect = WindowManager.wrapper?.getBoundingClientRect();
+        this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
     }
 
     public deleteCursor(uid: string) {

package/src/Helper.ts

@@ -2,36 +2,23 @@ import { getVersionNumber } from "./Utils/Common";
 import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import { WindowManager } from "./index";
-import type { Room } from "white-web-sdk";
+import type { Room , RoomMember} from "white-web-sdk";
 
 export const setupWrapper = (
     root: HTMLElement
 ): {
     playground: HTMLDivElement;
-    wrapper: HTMLDivElement;
-    sizer: HTMLDivElement;
     mainViewElement: HTMLDivElement;
 } => {
     const playground = document.createElement("div");
     playground.className = "netless-window-manager-playground";
 
-    const sizer = document.createElement("div");
-    sizer.className = "netless-window-manager-sizer";
-
-    const wrapper = document.createElement("div");
-    wrapper.className = "netless-window-manager-wrapper";
-
     const mainViewElement = document.createElement("div");
     mainViewElement.className = "netless-window-manager-main-view";
-
-    playground.appendChild(sizer);
-    sizer.appendChild(wrapper);
-    wrapper.appendChild(mainViewElement);
+    playground.appendChild(mainViewElement);
     root.appendChild(playground);
-    WindowManager.wrapper = wrapper;
 
-    return { playground, wrapper, sizer, mainViewElement };
+    return { playground, mainViewElement };
 };
 
 export const checkVersion = () => {
@@ -45,3 +32,12 @@ export const findMemberByUid = (room: Room | undefined, uid: string) => {
     const roomMembers = room?.state.roomMembers;
     return roomMembers?.find(member => member.payload?.uid === uid);
 };
+
+export type Member = RoomMember & { uid: string };
+
+export const serializeRoomMembers = (members: readonly RoomMember[]) => {
+    return members.map(member => ({
+        uid: member.payload?.uid || "",
+        ...member,
+    }));
+}