@netless/window-manager 0.2.12-canary.2 → 0.2.15

package/dist/sdk.d.ts

@@ -3,7 +3,7 @@ import type { MountParams } from "./index";
 import type { WhiteWebSdkConfiguration, JoinRoomParams } from "white-web-sdk";
 declare type WhiteWindowSDKConfiguration = Omit<WhiteWebSdkConfiguration, "useMobXState">;
 declare type WindowJoinRoomParams = {
-    joinRoomParams: Omit<JoinRoomParams, "useMultiViews">;
+    joinRoomParams: Omit<JoinRoomParams, "useMultiViews" | "disableMagixEventDispatchLimit">;
     mountParams: Omit<MountParams, "room">;
 };
 export declare class WhiteWindowSDK {

package/dist/typings.d.ts

@@ -46,6 +46,7 @@ export declare type AppEmitterEvent<T = any> = {
     roomStateChange: Partial<DisplayerState>;
     focus: boolean;
     reconnected: void;
+    seek: number;
 };
 export declare type RegisterEventData = {
     appId: string;

package/docs/camera.md

@@ -1,5 +1,5 @@
 # 视角
-在多窗口模式下, 可以同时存在多块白板，但是大多数情况下用户都只需要对主白板也就是 `mainView` 进行操作
+在多窗口模式下, 可以同时存在多块白板，但是大多数情况下用户都只需要对主白板也就是 `mainView` 进行操作
 
 
 ## 获取 `mainView` 的 `camera`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.2.12-canary.2",
+  "version": "0.2.15",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

package/src/AppManager.ts

@@ -6,14 +6,14 @@ import {
     } from './constants';
 import { AppListeners } from './AppListener';
 import { AppProxy } from './AppProxy';
-import { AttributesDelegate, Fields } from './AttributesDelegate';
+import { AttributesDelegate } from './AttributesDelegate';
 import { BoxManager, TELE_BOX_STATE } from './BoxManager';
 import { callbacks, emitter } from './index';
 import { CameraStore } from './Utils/CameraStore';
 import { genAppId, makeValidScenePath } from './Utils/Common';
 import {
+    isPlayer,
     isRoom,
-    reaction,
     ScenePathType
     } from 'white-web-sdk';
 import { log } from './Utils/log';
@@ -51,17 +51,20 @@ export class AppManager {
             this.appProxies
         );
         this.displayer.callbacks.on(this.eventName, this.displayerStateListener);
-        this.displayerWritableListener(!this.room?.isWritable);
-        this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
         this.appListeners.addListeners();
 
-        if (this.room) {
-            this.refresher = new ReconnectRefresher(this.room, this);
-        }
+        this.refresher = new ReconnectRefresher(this.room, this);
 
         this.mainViewProxy = new MainViewProxy(this);
 
         emitter.once("onCreated").then(() => this.onCreated());
+
+        if (isPlayer(this.displayer)) {
+            emitter.on("seek", time => {
+                this.appProxies.forEach(appProxy => appProxy.appEmitter.emit("seek", time));
+                this.attributesUpdateCallback(this.attributes.apps);
+            })
+        }
     }
 
     private async onCreated() {
@@ -85,6 +88,8 @@ export class AppManager {
                 this.room?.setScenePath(mainScenePath);
             }
         }
+        this.displayerWritableListener(!this.room?.isWritable);
+        this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
     }
 
     /**
@@ -221,6 +226,9 @@ export class AppManager {
             if (!this.delegate.focus) {
                 this.viewManager.switchMainViewModeToWriter();
             }
+            this.mainView.disableCameraTransform = false;
+        } else {
+            this.mainView.disableCameraTransform = true;
         }
     }
 
@@ -420,7 +428,7 @@ export class AppManager {
         this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
         this.appListeners.removeListeners();
         emitter.offAny(this.boxEventListener);
-
+        emitter.clearListeners();
         if (this.appProxies.size) {
             this.appProxies.forEach(appProxy => {
                 appProxy.destroy(true, false);

package/src/AttributesDelegate.ts

@@ -135,7 +135,7 @@ export class AttributesDelegate {
         return get(this.manager.attributes, [Fields.MainViewCamera]);
     }
 
-    public getMainViewSize(): Size {
+    public getMainViewSize(): Size & { id: number } | undefined {
         return get(this.manager.attributes, [Fields.MainViewSize]);
     }
 
@@ -143,7 +143,7 @@ export class AttributesDelegate {
         this.manager.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
     }
 
-    public setMainViewSize(size: Size | undefined) {
+    public setMainViewSize(size: Size & { id: number } | undefined) {
         this.manager.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 

package/src/Cursor/Cursor.ts

@@ -45,6 +45,7 @@ export class Cursor {
         this.disposer = autorun(() => {
             const cursor = this.cursorPosition;
             const state = this.cursorState;
+            if (!cursor) return;
             if (cursor.type === "main") {
                 const rect = this.cursorManager.wrapperRect;
                 if (this.component && rect) {
@@ -125,11 +126,11 @@ export class Cursor {
         }
     }
 
-    public get cursorState(): CursorState {
+    public get cursorState(): CursorState | undefined {
         return get(this.cursors, [this.memberId, Fields.CursorState]);
     }
 
-    public get cursorPosition(): Position {
+    public get cursorPosition(): Position | undefined {
         return get(this.cursors, [this.memberId, Fields.Position]);
     }
 

package/src/MainView.ts

@@ -3,23 +3,29 @@ import { Fields } from './AttributesDelegate';
 import { debounce, isEmpty, isEqual } from 'lodash';
 import type { Camera, Size, View } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
+import { emitter } from './index';
 
 export class MainViewProxy {
     private scale?: number;
     private delegate = this.manager.delegate;
     private started = false;
+    private observerId = this.manager.displayer.observerId;
 
     constructor(
         private manager: AppManager,
     ) {
-        this.start();
+        emitter.once("mainViewMounted").then(() => {
+            setTimeout(() => {
+                this.start();
+            }, 300); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
+        })
     }
 
     private cameraReaction = () => {
         return reaction(
             () => this.manager.attributes?.[Fields.MainViewCamera],
             camera => {
-                if (camera && camera.id !== this.manager.displayer.observerId) {
+                if (camera && camera.id !== this.observerId) {
                     this.moveCamera(camera);
                 }
             },
@@ -33,7 +39,7 @@ export class MainViewProxy {
         return reaction(
             () => this.manager.attributes?.[Fields.MainViewSize],
             size => {
-                if (size) {
+                if (size && size.id !== this.observerId) {
                     this.moveCameraToContian(size);
                     this.moveCamera(this.delegate.getMainViewCamera());
                 }
@@ -49,7 +55,10 @@ export class MainViewProxy {
     }
 
     private cameraListener = (camera: Camera) => {
-        this.delegate.setMainViewCamera({ ...camera, id: this.manager.displayer.observerId });
+        this.delegate.setMainViewCamera({ ...camera, id: this.observerId});
+        if (this.delegate.getMainViewSize()?.id !== this.observerId) {
+            this.setMainViewSize(this.view.size);
+        }
     }
 
     private sizeListener = (size: Size) => {
@@ -57,8 +66,8 @@ export class MainViewProxy {
     }
 
     public setMainViewSize = debounce(size => {
-        this.manager.delegate.setMainViewSize({ ...size });
-    }, 200);
+        this.manager.delegate.setMainViewSize({ ...size, id: this.observerId });
+    }, 50);
 
     private addCameraListener() {
         this.view.callbacks.on("onCameraUpdatedByDevice", this.cameraListener);
@@ -109,5 +118,6 @@ export class MainViewProxy {
         this.manager.refresher?.remove(Fields.MainViewCamera);
         this.manager.refresher?.remove(Fields.MainViewSize);
         this.view.callbacks.off("onSizeUpdated", this.sizeListener);
+        this.started = false;
     }
 }

package/src/ReconnectRefresher.ts

@@ -2,18 +2,19 @@ import { isFunction } from 'lodash';
 import { RoomPhase } from 'white-web-sdk';
 import type { Room } from "white-web-sdk";
 import type { AppManager } from './AppManager';
+import { log } from './Utils/log';
 
 // 白板重连之后会刷新所有的对象，导致 listener 失效, 所以这里在重连之后重新对所有对象进行监听
 export class ReconnectRefresher {
-    private phase: RoomPhase;
-    private room: Room;
+    private phase?: RoomPhase;
+    private room: Room | undefined;
     private reactors: Map<string, any> = new Map();
     private disposers: Map<string, any> = new Map();
 
-    constructor(room: Room, private manager: AppManager) {
+    constructor(room: Room | undefined, private manager: AppManager) {
         this.room = room;
-        this.phase = room.phase;
-        room.callbacks.on("onPhaseChanged", this.onPhaseChanged);
+        this.phase = room?.phase;
+        room?.callbacks.on("onPhaseChanged", this.onPhaseChanged);
     }
 
     private onPhaseChanged = (phase: RoomPhase) => {
@@ -24,6 +25,7 @@ export class ReconnectRefresher {
     }
 
     private onReconnected = () => {
+        log("onReconnected refresh reactors");
         this.releaseDisposers();
         this.reactors.forEach((func, id) => {
             if (isFunction(func)) {
@@ -63,7 +65,7 @@ export class ReconnectRefresher {
     }
 
     public destroy() {
-        this.room.callbacks.off("onPhaseChanged", this.onPhaseChanged);
+        this.room?.callbacks.off("onPhaseChanged", this.onPhaseChanged);
         this.releaseDisposers();
     }
 }

package/src/Utils/RoomHacker.ts

@@ -1,7 +1,7 @@
+import { emitter } from '../index';
 import { isPlayer } from 'white-web-sdk';
-import type { Camera, Room , Player } from "white-web-sdk";
+import type { Camera, Room , Player , PlayerSeekingResult } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
-import { emitter } from "../index";
 
 // 修改多窗口状态下一些失效的方法实现到 manager 的 mainview 上, 降低迁移成本
 export const replaceRoomFunction = (room: Room, manager: AppManager) => {
@@ -9,11 +9,14 @@ export const replaceRoomFunction = (room: Room, manager: AppManager) => {
         const player = room as unknown as Player;
         const originSeek = player.seekToProgressTime;
         // eslint-disable-next-line no-inner-declarations
-        function newSeek(time: number) {
-            originSeek.call(player, time);
-            emitter.emit("seek", time);
+        async function newSeek(time: number): Promise<PlayerSeekingResult> {
+            const seekResult = await originSeek.call(player, time);
+            if (seekResult === "success") {
+                emitter.emit("seek", time);
+            }
+            return seekResult;
         }
-        player.seekToProgressTime = newSeek as any;
+        player.seekToProgressTime = newSeek;
     } else {
         const descriptor = Object.getOwnPropertyDescriptor(room, "disableCameraTransform");
         if (descriptor) return;

package/src/index.ts

@@ -128,6 +128,7 @@ type EmitterEvent = {
     snapshot: { appId: string, rect: any },
     error: Error,
     seek: number,
+    mainViewMounted: undefined,
     [TELE_BOX_STATE.Normal]: undefined,
     [TELE_BOX_STATE.Maximized]: undefined,
     [TELE_BOX_STATE.Minimized]: undefined,
@@ -466,9 +467,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 设置 ViewMode
      */
     public setViewMode(mode: ViewMode): void {
+        if (!this.canOperate) return;
         if (mode === ViewMode.Broadcaster) {
             this.appManager?.delegate.setMainViewCamera({ ...this.mainView.camera, id: this.displayer.observerId });
-            this.appManager?.delegate.setMainViewSize(this.mainView.size);
+            this.appManager?.delegate.setMainViewSize({ ...this.mainView.size, id: this.displayer.observerId });
             this.appManager?.mainViewProxy.start();
         }
         if (mode === ViewMode.Freedom) {
@@ -581,6 +583,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 this.appManager.viewManager.switchMainViewToWriter();
             }
             this.appManager.viewManager.addMainViewListener();
+            emitter.emit("mainViewMounted");
         }
     }
 

package/src/sdk.ts

@@ -7,7 +7,7 @@ import type { WhiteWebSdkConfiguration, JoinRoomParams } from "white-web-sdk";
 
 type WhiteWindowSDKConfiguration = Omit<WhiteWebSdkConfiguration, "useMobXState">
 type WindowJoinRoomParams = {
-    joinRoomParams: Omit<JoinRoomParams, "useMultiViews">,
+    joinRoomParams: Omit<JoinRoomParams, "useMultiViews" | "disableMagixEventDispatchLimit">,
     mountParams: Omit<MountParams, "room">,
 }
 
@@ -24,6 +24,7 @@ export class WhiteWindowSDK {
             ...params.joinRoomParams,
             useMultiViews: true,
             invisiblePlugins: [...invisiblePlugins, WindowManager],
+            disableMagixEventDispatchLimit: true,
         });
         const manager = await WindowManager.mount({
             room,

package/src/typings.ts

@@ -49,6 +49,7 @@ export type AppEmitterEvent<T = any> = {
     roomStateChange: Partial<DisplayerState>;
     focus: boolean;
     reconnected: void;
+    seek: number;
 };
 
 export type RegisterEventData = {