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

package/src/View/IframeBridge.ts

@@ -10,627 +10,671 @@ import { log } from "../Utils/log";
 
 // Note: typo below should not be fixed.
 export enum IframeEvents {
-  Init = "Init",
-  AttributesUpdate = "AttributesUpdate",
-  SetAttributes = "SetAttributes",
-  RegisterMagixEvent = "RegisterMagixEvent",
-  RemoveMagixEvent = "RemoveMagixEvent",
-  RemoveAllMagixEvent = "RemoveAllMagixEvent",
-  RoomStateChanged = "RoomStateChanged",
-  DispatchMagixEvent = "DispatchMagixEvent",
-  ReciveMagixEvent = "ReciveMagixEvent",
-  NextPage = "NextPage",
-  PrevPage = "PrevPage",
-  SDKCreate = "SDKCreate",
-  OnCreate = "OnCreate",
-  SetPage = "SetPage",
-  GetAttributes = "GetAttributes",
-  Ready = "Ready",
-  Destory = "Destory",
-  StartCreate = "StartCreate",
-  WrapperDidUpdate = "WrapperDidUpdate",
-  DispayIframe = "DispayIframe",
-  HideIframe = "HideIframe",
-  GetRootRect = "GetRootRect",
-  ReplayRootRect = "ReplayRootRect",
-  PageTo = "PageTo",
+    Init = "Init",
+    AttributesUpdate = "AttributesUpdate",
+    SetAttributes = "SetAttributes",
+    RegisterMagixEvent = "RegisterMagixEvent",
+    RemoveMagixEvent = "RemoveMagixEvent",
+    RemoveAllMagixEvent = "RemoveAllMagixEvent",
+    RoomStateChanged = "RoomStateChanged",
+    DispatchMagixEvent = "DispatchMagixEvent",
+    ReciveMagixEvent = "ReciveMagixEvent",
+    NextPage = "NextPage",
+    PrevPage = "PrevPage",
+    SDKCreate = "SDKCreate",
+    OnCreate = "OnCreate",
+    SetPage = "SetPage",
+    GetAttributes = "GetAttributes",
+    Ready = "Ready",
+    Destory = "Destory",
+    StartCreate = "StartCreate",
+    WrapperDidUpdate = "WrapperDidUpdate",
+    DispayIframe = "DispayIframe",
+    HideIframe = "HideIframe",
+    GetRootRect = "GetRootRect",
+    ReplayRootRect = "ReplayRootRect",
+    PageTo = "PageTo",
 }
 
 export enum DomEvents {
-  WrapperDidMount = "WrapperDidMount",
-  IframeLoad = "IframeLoad",
+    WrapperDidMount = "WrapperDidMount",
+    IframeLoad = "IframeLoad",
 }
 
 export type IframeBridgeAttributes = {
-  readonly url: string;
-  readonly width: number;
-  readonly height: number;
-  readonly displaySceneDir: string;
-  readonly lastEvent?: { name: string, payload: any };
-  readonly useClicker?: boolean;
-  readonly useSelector?: boolean;
+    readonly url: string;
+    readonly width: number;
+    readonly height: number;
+    readonly displaySceneDir: string;
+    readonly lastEvent?: { name: string; payload: any };
+    readonly useClicker?: boolean;
+    readonly useSelector?: boolean;
 };
 
 export type IframeBridgeEvents = {
-  created: undefined;
-  [IframeEvents.Ready]: undefined;
-  [IframeEvents.StartCreate]: undefined;
-  [IframeEvents.OnCreate]: IframeBridge;
-  [IframeEvents.Destory]: undefined;
-  [IframeEvents.GetRootRect]: undefined;
-  [IframeEvents.ReplayRootRect]: DOMRect;
-  [DomEvents.WrapperDidMount]: undefined;
-  [IframeEvents.WrapperDidUpdate]: undefined;
-  [DomEvents.IframeLoad]: Event;
-  [IframeEvents.HideIframe]: undefined;
-  [IframeEvents.DispayIframe]: undefined;
-}
+    created: undefined;
+    [IframeEvents.Ready]: undefined;
+    [IframeEvents.StartCreate]: undefined;
+    [IframeEvents.OnCreate]: IframeBridge;
+    [IframeEvents.Destory]: undefined;
+    [IframeEvents.GetRootRect]: undefined;
+    [IframeEvents.ReplayRootRect]: DOMRect;
+    [DomEvents.WrapperDidMount]: undefined;
+    [IframeEvents.WrapperDidUpdate]: undefined;
+    [DomEvents.IframeLoad]: Event;
+    [IframeEvents.HideIframe]: undefined;
+    [IframeEvents.DispayIframe]: undefined;
+};
 
 export type IframeSize = {
-  readonly width: number;
-  readonly height: number;
+    readonly width: number;
+    readonly height: number;
 };
 
 type BaseOption = {
-  readonly url: string;
-  readonly width: number;
-  readonly height: number;
-  readonly displaySceneDir: string;
-}
+    readonly url: string;
+    readonly width: number;
+    readonly height: number;
+    readonly displaySceneDir: string;
+};
 
 export type InsertOptions = {
-  readonly useClicker?: boolean;
-  readonly useSelector?: boolean;
+    readonly useClicker?: boolean;
+    readonly useSelector?: boolean;
 } & BaseOption;
 
 export type OnCreateInsertOption = {
-  readonly displayer: Displayer;
+    readonly displayer: Displayer;
 } & BaseOption;
 
 const RefreshIDs = {
-  Ready: IframeEvents.Ready,
-  RootRect: IframeEvents.ReplayRootRect,
-  Message: "message",
-  ComputeStyle: "computeStyle",
-  Load: "load",
-  DisplayerState: "displayerState",
-  Show: "show",
-  Hide: "hide",
+    Ready: IframeEvents.Ready,
+    RootRect: IframeEvents.ReplayRootRect,
+    Message: "message",
+    ComputeStyle: "computeStyle",
+    Load: "load",
+    DisplayerState: "displayerState",
+    Show: "show",
+    Hide: "hide",
 };
 
 const times = <T>(number: number, iteratee: (value: number) => T) => {
-  return new Array(number).fill(0).map((_, index) => iteratee(index));
+    return new Array(number).fill(0).map((_, index) => iteratee(index));
 };
 
 /**
  * {@link https://github.com/netless-io/netless-iframe-bridge @netless/iframe-bridge}
  */
 export class IframeBridge {
-  public static readonly kind = "IframeBridge";
-  public static readonly hiddenClass = "netless-iframe-brdige-hidden";
-  public static emitter: Emittery<IframeBridgeEvents> = new Emittery();
-  private static displayer: Displayer | null = null
-  private static alreadyCreate = false;
-
-  public displayer: Displayer;
-  public iframe: HTMLIFrameElement;
-
-  private readonly magixEventMap = new Map<string, any>();
-  private cssList: string[] = [];
-  private allowAppliances: string[] = ["clicker"];
-  private bridgeDisposer: () => void = noop;
-  private rootRect: DOMRect | null = null;
-
-  private sideEffectManager = new SideEffectManager();
-
-  constructor(readonly manager: WindowManager, readonly appManager: AppManager) {
-    this.displayer = IframeBridge.displayer = appManager.displayer;
-
-    this.iframe = this._createIframe();
-
-    this.sideEffectManager.addDisposer(IframeBridge.emitter.on(IframeEvents.ReplayRootRect, rect => {
-      this.rootRect = rect;
-    }), RefreshIDs.RootRect);
-
-    this.sideEffectManager.addDisposer(IframeBridge.emitter.on(IframeEvents.HideIframe, () => {
-      this.iframe.className = IframeBridge.hiddenClass;
-    }), RefreshIDs.Hide);
-
-    this.sideEffectManager.addDisposer(IframeBridge.emitter.on(IframeEvents.DispayIframe, () => {
-      this.iframe.className = "";
-    }), RefreshIDs.Show);
-
-    this.sideEffectManager.addDisposer(IframeBridge.emitter.on("created", () => {
-      this.bridgeDisposer();
-      this.bridgeDisposer = autorun(() => {
-        const attributes = this.attributes;
-        if (attributes.url) {
-          const iframeSrc = this.iframe?.src;
-          if (iframeSrc && iframeSrc !== attributes.url) {
-            this.execListenIframe(attributes);
-          }
+    public static readonly kind = "IframeBridge";
+    public static readonly hiddenClass = "netless-iframe-brdige-hidden";
+    public static emitter: Emittery<IframeBridgeEvents> = new Emittery();
+    private static displayer: Displayer | null = null;
+    private static alreadyCreate = false;
+
+    public displayer: Displayer;
+    public iframe: HTMLIFrameElement;
+
+    private readonly magixEventMap = new Map<string, any>();
+    private cssList: string[] = [];
+    private allowAppliances: string[] = ["clicker"];
+    private bridgeDisposer: () => void = noop;
+    private rootRect: DOMRect | null = null;
+
+    private sideEffectManager = new SideEffectManager();
+
+    constructor(readonly manager: WindowManager, readonly appManager: AppManager) {
+        this.displayer = IframeBridge.displayer = appManager.displayer;
+
+        this.iframe = this._createIframe();
+
+        this.sideEffectManager.addDisposer(
+            IframeBridge.emitter.on(IframeEvents.ReplayRootRect, rect => {
+                this.rootRect = rect;
+            }),
+            RefreshIDs.RootRect
+        );
+
+        this.sideEffectManager.addDisposer(
+            IframeBridge.emitter.on(IframeEvents.HideIframe, () => {
+                this.iframe.className = IframeBridge.hiddenClass;
+            }),
+            RefreshIDs.Hide
+        );
+
+        this.sideEffectManager.addDisposer(
+            IframeBridge.emitter.on(IframeEvents.DispayIframe, () => {
+                this.iframe.className = "";
+            }),
+            RefreshIDs.Show
+        );
+
+        this.sideEffectManager.addDisposer(
+            IframeBridge.emitter.on("created", () => {
+                this.bridgeDisposer();
+                this.bridgeDisposer = autorun(() => {
+                    const attributes = this.attributes;
+                    if (attributes.url) {
+                        const iframeSrc = this.iframe?.src;
+                        if (iframeSrc && iframeSrc !== attributes.url) {
+                            this.execListenIframe(attributes);
+                        }
+                    }
+                    if (attributes.displaySceneDir) {
+                        this.computedIframeDisplay(this.displayer.state, attributes);
+                    }
+                    if ((attributes.width || attributes.height) && this.iframe) {
+                        this.iframe.width = `${attributes.width}px`;
+                        this.iframe.height = `${attributes.height}px`;
+                    }
+                    this.postMessage({ kind: IframeEvents.AttributesUpdate, payload: attributes });
+                });
+            })
+        );
+
+        this.sideEffectManager.addDisposer(
+            manager.emitter.on("cameraStateChange", () => {
+                this.computedStyle(this.displayer.state);
+            })
+        );
+
+        IframeBridge.onCreate(this);
+    }
+
+    public static onCreate(plugin: IframeBridge): void {
+        IframeBridge.emitter.emit(IframeEvents.StartCreate);
+        IframeBridge.emitter.emit(IframeEvents.OnCreate, plugin);
+        IframeBridge.emitter.emit("created");
+    }
+
+    public insert(options: InsertOptions): this {
+        const initAttributes: IframeBridgeAttributes = {
+            url: options.url,
+            width: options.width,
+            height: options.height,
+            displaySceneDir: options.displaySceneDir,
+            useClicker: options.useClicker || false,
+            useSelector: options.useSelector,
+        };
+        this.setAttributes(initAttributes);
+
+        const wrapperDidMountListener = () => {
+            this.getIframe();
+            this.listenIframe(this.attributes);
+            this.listenDisplayerState();
+            IframeBridge.emitter.emit(IframeEvents.GetRootRect);
+        };
+
+        if (this.getIframe()) {
+            wrapperDidMountListener();
         }
-        if (attributes.displaySceneDir) {
-          this.computedIframeDisplay(this.displayer.state, attributes);
+        // Code below will never be executed, just copying the old code...
+        else {
+            const didMount = this.sideEffectManager.addDisposer(
+                IframeBridge.emitter.on(DomEvents.WrapperDidMount, () => {
+                    wrapperDidMountListener();
+                    this.sideEffectManager.flush(didMount);
+                })
+            );
+            const didUpdate = this.sideEffectManager.addDisposer(
+                IframeBridge.emitter.on(IframeEvents.WrapperDidUpdate, () => {
+                    wrapperDidMountListener();
+                    this.sideEffectManager.flush(didUpdate);
+                })
+            );
         }
-        if ((attributes.width || attributes.height) && this.iframe) {
-          this.iframe.width = `${attributes.width}px`;
-          this.iframe.height = `${attributes.height}px`;
+        if (this.attributes.useSelector) {
+            this.allowAppliances.push("selector");
         }
-        this.postMessage({ kind: IframeEvents.AttributesUpdate, payload: attributes });
-      });
-    }));
-
-    this.sideEffectManager.addDisposer(manager.emitter.on("cameraStateChange", () => {
-      this.computedStyle(this.displayer.state);
-    }));
-
-    IframeBridge.onCreate(this);
-  }
-
-  public static onCreate(plugin: IframeBridge): void {
-    IframeBridge.emitter.emit(IframeEvents.StartCreate);
-    IframeBridge.emitter.emit(IframeEvents.OnCreate, plugin);
-    IframeBridge.emitter.emit("created");
-  }
-
-  public insert(options: InsertOptions): this {
-    const initAttributes: IframeBridgeAttributes = {
-      url: options.url,
-      width: options.width,
-      height: options.height,
-      displaySceneDir: options.displaySceneDir,
-      useClicker: options.useClicker || false,
-      useSelector: options.useSelector,
-    };
-    this.setAttributes(initAttributes);
 
-    const wrapperDidMountListener = () => {
-      this.getIframe()
-      this.listenIframe(this.attributes);
-      this.listenDisplayerState();
-      IframeBridge.emitter.emit(IframeEvents.GetRootRect);
-    };
+        this.computedStyle(this.displayer.state);
+        this.listenDisplayerCallbacks();
+        this.getComputedIframeStyle();
+        this.sideEffectManager.addEventListener(
+            window,
+            "message",
+            this.messageListener.bind(this),
+            void 0,
+            RefreshIDs.Message
+        );
+
+        IframeBridge.alreadyCreate = true;
+        return this;
+    }
+
+    // 在某些安卓机型中会遇到 iframe 嵌套计算 bug，需要手动延迟触发一下重绘
+    private getComputedIframeStyle(): void {
+        this.sideEffectManager.setTimeout(
+            () => {
+                if (this.iframe) {
+                    getComputedStyle(this.iframe);
+                }
+            },
+            200,
+            RefreshIDs.ComputeStyle
+        );
+    }
+
+    public destroy() {
+        this.sideEffectManager.flushAll();
+        IframeBridge.emitter.emit(IframeEvents.Destory);
+        IframeBridge.alreadyCreate = false;
+        IframeBridge.emitter.clearListeners();
+    }
+
+    private getIframe(): HTMLIFrameElement {
+        this.iframe || (this.iframe = this._createIframe());
+        return this.iframe;
+    }
+
+    public setIframeSize(params: IframeSize): void {
+        if (this.iframe) {
+            this.iframe.width = `${params.width}px`;
+            this.iframe.height = `${params.height}px`;
+            this.setAttributes({ width: params.width, height: params.height });
+        }
+    }
+
+    public get attributes(): Partial<IframeBridgeAttributes> {
+        return this.appManager.store.getIframeBridge();
+    }
+
+    public setAttributes(data: Partial<IframeBridgeAttributes>): void {
+        this.appManager.store.setIframeBridge(data);
+    }
+
+    private _createIframe() {
+        const iframe = document.createElement("iframe");
+        iframe.id = "IframeBridge";
+        iframe.className = IframeBridge.hiddenClass;
+        if (this.appManager.mainView.divElement) {
+            this.appManager.mainView.divElement.appendChild(iframe);
+        }
+        return iframe;
+    }
+
+    public scaleIframeToFit(animationMode: AnimationMode = AnimationMode.Immediately) {
+        if (!this.inDisplaySceneDir) {
+            return;
+        }
+        const { width = 1280, height = 720 } = this.attributes;
+        const x = width ? -width / 2 : 0;
+        const y = height ? -height / 2 : 0;
+
+        this.manager.moveCameraToContain({
+            originX: x,
+            originY: y,
+            width,
+            height,
+            animationMode,
+        });
+    }
+
+    public get isReplay(): boolean {
+        return this.manager.isReplay;
+    }
+
+    private handleSetPage(data: any): void {
+        if (this.isReplay || !this.attributes.displaySceneDir) {
+            return;
+        }
+        const page = data.payload;
+        const room = this.displayer as Room;
+        const scenes = room.entireScenes()[this.attributes.displaySceneDir];
+        if (!scenes || scenes.length !== page) {
+            const genScenes = times<{ name: string }>(page, (index: number) => ({
+                name: String(index + 1),
+            }));
+            room.putScenes(this.attributes.displaySceneDir, genScenes);
+            this.manager.setMainViewScenePath(this.attributes.displaySceneDir);
+        }
+    }
 
-    if (this.getIframe()) {
-      wrapperDidMountListener();
-    }
-    // Code below will never be executed, just copying the old code...
-    else {
-      const didMount = this.sideEffectManager.addDisposer(IframeBridge.emitter.on(DomEvents.WrapperDidMount, () => {
-        wrapperDidMountListener();
-        this.sideEffectManager.flush(didMount);
-      }));
-      const didUpdate = this.sideEffectManager.addDisposer(IframeBridge.emitter.on(IframeEvents.WrapperDidUpdate, () => {
-        wrapperDidMountListener();
-        this.sideEffectManager.flush(didUpdate);
-      }));
-    }
-    if (this.attributes.useSelector) {
-      this.allowAppliances.push("selector");
-    }
-
-    this.computedStyle(this.displayer.state);
-    this.listenDisplayerCallbacks();
-    this.getComputedIframeStyle();
-    this.sideEffectManager.addEventListener(window, "message",
-      this.messageListener.bind(this), void 0, RefreshIDs.Message);
-
-    IframeBridge.alreadyCreate = true;
-    return this;
-  }
-
-  // 在某些安卓机型中会遇到 iframe 嵌套计算 bug，需要手动延迟触发一下重绘
-  private getComputedIframeStyle(): void {
-    this.sideEffectManager.setTimeout(() => {
-      if (this.iframe) {
-        getComputedStyle(this.iframe);
-      }
-    }, 200, RefreshIDs.ComputeStyle);
-  }
-
-  public destroy() {
-    this.sideEffectManager.flushAll();
-    IframeBridge.emitter.emit(IframeEvents.Destory);
-    IframeBridge.alreadyCreate = false;
-    IframeBridge.emitter.clearListeners();
-  }
-
-  private getIframe(): HTMLIFrameElement {
-    this.iframe || (this.iframe = this._createIframe());
-    return this.iframe;
-  }
-
-  public setIframeSize(params: IframeSize): void {
-    if (this.iframe) {
-      this.iframe.width = `${params.width}px`;
-      this.iframe.height = `${params.height}px`;
-      this.setAttributes({ width: params.width, height: params.height });
-    }
-  }
-
-  public get attributes(): Partial<IframeBridgeAttributes> {
-    return this.appManager.store.getIframeBridge();
-  }
-
-  public setAttributes(data: Partial<IframeBridgeAttributes>): void {
-    this.appManager.store.setIframeBridge(data);
-  }
-
-  private _createIframe() {
-    const iframe = document.createElement("iframe");
-    iframe.id = "IframeBridge";
-    iframe.className = IframeBridge.hiddenClass;
-    if (this.appManager.mainView.divElement) {
-      this.appManager.mainView.divElement.appendChild(iframe);
-    }
-    return iframe;
-  }
-
-  public scaleIframeToFit(animationMode: AnimationMode = AnimationMode.Immediately) {
-    if (!this.inDisplaySceneDir) {
-      return;
-    }
-    const { width = 1280, height = 720 } = this.attributes;
-    const x = width ? -width / 2 : 0;
-    const y = height ? -height / 2 : 0;
-
-    this.manager.moveCameraToContain({
-      originX: x,
-      originY: y,
-      width,
-      height,
-      animationMode,
-    });
-  }
-
-  public get isReplay(): boolean {
-    return this.manager.isReplay;
-  }
-
-  private handleSetPage(data: any): void {
-    if (this.isReplay || !this.attributes.displaySceneDir) {
-      return;
-    }
-    const page = data.payload;
-    const room = this.displayer as Room;
-    const scenes = room.entireScenes()[this.attributes.displaySceneDir];
-    if (!scenes || scenes.length !== page) {
-      const genScenes = times<{ name: string }>(page, (index: number) => ({ name: String(index + 1) }));
-      room.putScenes(this.attributes.displaySceneDir, genScenes);
-      this.manager.setMainViewScenePath(this.attributes.displaySceneDir);
-    }
-  }
-
-  private execListenIframe = debounce((options: Partial<IframeBridgeAttributes>) => {
-    this.listenIframe(options);
-  }, 50);
-
-  private src_url_equal_anchor?: HTMLAnchorElement
-  private listenIframe(options: Partial<IframeBridgeAttributes>): void {
-    const loadListener = (ev: Event) => {
-      this.postMessage({
-        kind: IframeEvents.Init, payload: {
-          attributes: this.attributes,
-          roomState: IframeBridge.displayer?.state,
-          currentPage: this.currentPage,
-          observerId: this.displayer.observerId
+    private execListenIframe = debounce((options: Partial<IframeBridgeAttributes>) => {
+        this.listenIframe(options);
+    }, 50);
+
+    private src_url_equal_anchor?: HTMLAnchorElement;
+    private listenIframe(options: Partial<IframeBridgeAttributes>): void {
+        const loadListener = (ev: Event) => {
+            this.postMessage({
+                kind: IframeEvents.Init,
+                payload: {
+                    attributes: this.attributes,
+                    roomState: IframeBridge.displayer?.state,
+                    currentPage: this.currentPage,
+                    observerId: this.displayer.observerId,
+                },
+            });
+            IframeBridge.emitter.emit(DomEvents.IframeLoad, ev);
+            this.sideEffectManager.addDisposer(
+                IframeBridge.emitter.on(IframeEvents.Ready, () => {
+                    this.postMessage(this.attributes.lastEvent?.payload);
+                }),
+                RefreshIDs.Ready
+            );
+            this.computedStyleAndIframeDisplay();
+            // if ((this.displayer as Room).isWritable) {
+            //   this.manager.moveCamera({
+            //     scale: this.manager.camera.scale + 1e-6,
+            //     animationMode: AnimationMode.Immediately,
+            //   })
+            // }
+        };
+        if (options.url && this.iframe.src !== options.url) {
+            if (!this.src_url_equal_anchor) this.src_url_equal_anchor = document.createElement("a");
+            this.src_url_equal_anchor.href = options.url;
+            if (this.src_url_equal_anchor.href !== this.iframe.src) {
+                this.iframe.src = options.url;
+            }
+        }
+        this.iframe.width = `${options.width}px`;
+        this.iframe.height = `${options.height}px`;
+        this.sideEffectManager.addEventListener(
+            this.iframe,
+            "load",
+            loadListener,
+            void 0,
+            RefreshIDs.Load
+        );
+    }
+
+    private onPhaseChangedListener = (phase: PlayerPhase) => {
+        if (phase === PlayerPhase.Playing) {
+            this.computedStyleAndIframeDisplay();
         }
-      })
-      IframeBridge.emitter.emit(DomEvents.IframeLoad, ev);
-      this.sideEffectManager.addDisposer(IframeBridge.emitter.on(IframeEvents.Ready, () => {
-        this.postMessage(this.attributes.lastEvent?.payload);
-      }), RefreshIDs.Ready)
-      this.computedStyleAndIframeDisplay();
-      // if ((this.displayer as Room).isWritable) {
-      //   this.manager.moveCamera({
-      //     scale: this.manager.camera.scale + 1e-6,
-      //     animationMode: AnimationMode.Immediately,
-      //   })
-      // }
     };
-    if (options.url && this.iframe.src !== options.url) {
-      if (!this.src_url_equal_anchor) this.src_url_equal_anchor = document.createElement('a');
-      this.src_url_equal_anchor.href = options.url
-      if (this.src_url_equal_anchor.href !== this.iframe.src) {
-        this.iframe.src = options.url;
-      }
-    }
-    this.iframe.width = `${options.width}px`;
-    this.iframe.height = `${options.height}px`;
-    this.sideEffectManager.addEventListener(this.iframe, "load", loadListener, void 0, RefreshIDs.Load);
-  }
-
-  private onPhaseChangedListener = (phase: PlayerPhase) => {
-    if (phase === PlayerPhase.Playing) {
-      this.computedStyleAndIframeDisplay();
-    }
-  }
-
-  private listenDisplayerState(): void {
-    if (this.isReplay) {
-      if ((this.displayer as any)._phase === PlayerPhase.Playing) {
+
+    private listenDisplayerState(): void {
+        if (this.isReplay) {
+            if ((this.displayer as any)._phase === PlayerPhase.Playing) {
+                this.computedStyleAndIframeDisplay();
+            }
+            this.sideEffectManager.add(() => {
+                this.displayer.callbacks.on("onPhaseChanged", this.onPhaseChangedListener);
+                return () =>
+                    this.displayer.callbacks.off("onPhaseChanged", this.onPhaseChangedListener);
+            }, RefreshIDs.DisplayerState);
+        }
         this.computedStyleAndIframeDisplay();
-      }
-      this.sideEffectManager.add(() => {
-        this.displayer.callbacks.on("onPhaseChanged", this.onPhaseChangedListener);
-        return () => this.displayer.callbacks.off("onPhaseChanged", this.onPhaseChangedListener);
-      }, RefreshIDs.DisplayerState);
-    }
-    this.computedStyleAndIframeDisplay();
-  }
-
-  private computedStyleAndIframeDisplay(): void {
-    this.computedStyle(this.displayer.state);
-    this.computedIframeDisplay(this.displayer.state, this.attributes);
-  }
-
-  private listenDisplayerCallbacks(): void {
-    this.displayer.callbacks.on(this.callbackName as any, this.stateChangeListener);
-  }
-
-  private get callbackName(): string {
-    return this.isReplay ? "onPlayerStateChanged" : "onRoomStateChanged";
-  }
-
-  private stateChangeListener = (state: RoomState) => {
-    state = { ...state };
-    state.cameraState = this.manager.cameraState;
-    this.postMessage({ kind: IframeEvents.RoomStateChanged, payload: state });
-    if (state.cameraState) {
-      IframeBridge.emitter.emit(IframeEvents.GetRootRect);
-      this.computedStyle(state);
-    }
-    if (state.memberState) {
-      this.computedZindex();
-      this.updateStyle();
-    }
-    if (state.sceneState) {
-      this.computedIframeDisplay(state, this.attributes);
-    }
-  }
-
-  private computedStyle(_state: DisplayerState): void {
-    const cameraState = this.manager.cameraState;
-    const setWidth = this.attributes.width || 1280;
-    const setHeight = this.attributes.height || 720;
-    if (this.iframe) {
-      const { width, height, scale, centerX, centerY } = cameraState;
-      const rootRect = this.rootRect || { x: 0, y: 0 }
-      const transformOriginX = `${(width / 2) + rootRect.x}px`;
-      const transformOriginY = `${(height / 2) + rootRect.y}px`;
-      const transformOrigin = `transform-origin: ${transformOriginX} ${transformOriginY};`;
-      const iframeXDiff = ((width - setWidth) / 2) * scale;
-      const iframeYDiff = ((height - setHeight) / 2) * scale;
-      const x = - (centerX * scale) + iframeXDiff;
-      const y = - (centerY * scale) + iframeYDiff;
-      const transform = `transform: translate(${x}px,${y}px) scale(${scale}, ${scale});`;
-      const position = "position: absolute;";
-      // 在某些安卓机型, border-width 不为 0 时，才能正确计算 iframe 里嵌套 iframe 的大小
-      const borderWidth = "border: 0.1px solid rgba(0,0,0,0);";
-      const left = `left: 0px;`;
-      const top = `top: 0px;`;
-      const cssList = [position, borderWidth, top, left, transformOrigin, transform];
-      this.cssList = cssList;
-      this.computedZindex();
-      this.updateStyle();
-    }
-  }
-
-  private computedIframeDisplay(_state: DisplayerState, _attributes: Partial<IframeBridgeAttributes>): void {
-    if (this.inDisplaySceneDir) {
-      IframeBridge.emitter.emit(IframeEvents.DispayIframe);
-    } else {
-      IframeBridge.emitter.emit(IframeEvents.HideIframe);
-    }
-  }
-
-  public computedZindex(): void {
-    const zIndexString = "z-index: -1;";
-    const index = this.cssList.findIndex(css => css === zIndexString);
-    if (index !== -1) {
-      this.cssList.splice(index, 1);
-    }
-    if (!this.isClicker() || this.isDisableInput) {
-      this.cssList.push(zIndexString);
-    }
-  }
-
-  private updateStyle(): void {
-    this.iframe.style.cssText = this.cssList.join(" ");
-  }
-
-  private get iframeOrigin(): string | undefined {
-    if (this.iframe) {
-      try {
-        return new URL(this.iframe.src).origin;
-      } catch (err) {
-        console.warn(err);
-      }
-    }
-  }
-
-  private messageListener(event: MessageEvent): void {
-    log("<<<", JSON.stringify(event.data));
-    if (event.origin !== this.iframeOrigin) {
-      return;
-    }
-    const data = event.data;
-    switch (data.kind) {
-      case IframeEvents.SetAttributes: {
-        this.handleSetAttributes(data);
-        break;
-      }
-      case IframeEvents.RegisterMagixEvent: {
-        this.handleRegisterMagixEvent(data);
-        break;
-      }
-      case IframeEvents.RemoveMagixEvent: {
-        this.handleRemoveMagixEvent(data);
-        break;
-      }
-      case IframeEvents.DispatchMagixEvent: {
-        this.handleDispatchMagixEvent(data);
-        break;
-      }
-      case IframeEvents.RemoveAllMagixEvent: {
-        this.handleRemoveAllMagixEvent();
-        break;
-      }
-      case IframeEvents.NextPage: {
-        this.handleNextPage();
-        break;
-      }
-      case IframeEvents.PrevPage: {
-        this.handlePrevPage();
-        break;
-      }
-      case IframeEvents.SDKCreate: {
-        this.handleSDKCreate();
-        break;
-      }
-      case IframeEvents.SetPage: {
-        this.handleSetPage(data);
-        break;
-      }
-      case IframeEvents.GetAttributes: {
-        this.handleGetAttributes();
-        break;
-      }
-      case IframeEvents.PageTo: {
-        this.handlePageTo(data);
-        break
-      }
-      default: {
-        log(`${data.kind} not allow event.`);
-        break;
-      }
-    }
-  }
-
-  private handleSDKCreate(): void {
-    this.postMessage({
-      kind: IframeEvents.Init, payload: {
-        attributes: this.attributes,
-        roomState: this.displayer.state,
-        currentPage: this.currentPage,
-        observerId: this.displayer.observerId
-      }
-    });
-  }
-
-  private handleDispatchMagixEvent(data: any): void {
-    const eventPayload: { event: string, payload: any } = data.payload;
-    this.appManager.safeDispatchMagixEvent(eventPayload.event, eventPayload.payload);
-  }
-
-  private handleSetAttributes(data: any): void {
-    this.setAttributes(data.payload);
-  }
-
-  private handleRegisterMagixEvent(data: any): void {
-    const eventName = data.payload as string;
-    const listener = (event: any) => {
-      if (event.authorId === this.displayer.observerId) {
-        return;
-      }
-      this.postMessage({ kind: IframeEvents.ReciveMagixEvent, payload: event });
+    }
+
+    private computedStyleAndIframeDisplay(): void {
+        this.computedStyle(this.displayer.state);
+        this.computedIframeDisplay(this.displayer.state, this.attributes);
+    }
+
+    private listenDisplayerCallbacks(): void {
+        this.displayer.callbacks.on(this.callbackName as any, this.stateChangeListener);
+    }
+
+    private get callbackName(): string {
+        return this.isReplay ? "onPlayerStateChanged" : "onRoomStateChanged";
+    }
+
+    private stateChangeListener = (state: RoomState) => {
+        state = { ...state };
+        state.cameraState = this.manager.cameraState;
+        this.postMessage({ kind: IframeEvents.RoomStateChanged, payload: state });
+        if (state.cameraState) {
+            IframeBridge.emitter.emit(IframeEvents.GetRootRect);
+            this.computedStyle(state);
+        }
+        if (state.memberState) {
+            this.computedZindex();
+            this.updateStyle();
+        }
+        if (state.sceneState) {
+            this.computedIframeDisplay(state, this.attributes);
+        }
     };
-    this.magixEventMap.set(eventName, listener);
-    this.displayer.addMagixEventListener(eventName, listener);
-  }
-
-  private handleRemoveMagixEvent(data: any): void {
-    const eventName = data.payload as string;
-    const listener = this.magixEventMap.get(eventName);
-    this.displayer.removeMagixEventListener(eventName, listener);
-  }
-
-  private handleNextPage(): void {
-    if (this.manager.canOperate) {
-      this.manager.nextPage();
-      this.dispatchMagixEvent(IframeEvents.NextPage, {});
-    }
-  }
-
-  private handlePrevPage(): void {
-    if (this.manager.canOperate) {
-      this.manager.prevPage();
-      this.dispatchMagixEvent(IframeEvents.PrevPage, {});
-    }
-  }
-
-  private handlePageTo(data: any): void {
-    if (this.manager.canOperate) {
-      const page = data.payload as number;
-      if (!Number.isSafeInteger(page) || page <= 0) {
-        return;
-      }
-      this.manager.setMainViewSceneIndex(page - 1);
-      this.dispatchMagixEvent(IframeEvents.PageTo, page - 1);
-    }
-  }
-
-  private handleRemoveAllMagixEvent(): void {
-    this.magixEventMap.forEach((listener, event) => {
-      this.displayer.removeMagixEventListener(event, listener);
-    });
-    this.magixEventMap.clear();
-  }
-
-  private handleGetAttributes(): void {
-    this.postMessage({
-      kind: IframeEvents.GetAttributes,
-      payload: this.attributes,
-    });
-  }
-
-  public postMessage(message: any): void {
-    if (this.iframe) {
-      this.iframe.contentWindow?.postMessage(JSON.parse(JSON.stringify(message)), "*");
-    }
-  }
-
-  public dispatchMagixEvent(event: string, payload: any): void {
-    if (this.manager.canOperate) {
-      this.setAttributes({ lastEvent: { name: event, payload } });
-      (this.displayer as Room).dispatchMagixEvent(event, payload);
-    }
-  }
-
-  private get currentIndex(): number {
-    return this.manager.mainViewSceneIndex;
-  }
-
-  private get currentPage(): number {
-    return this.currentIndex + 1;
-  }
-
-  private get totalPage(): number {
-    return this.manager.mainViewScenesLength;
-  }
-
-  private get readonly(): boolean {
-    return !(this.displayer as any).isWritable;
-  }
-
-  public get inDisplaySceneDir(): boolean {
-    return this.manager.mainViewSceneDir === this.attributes.displaySceneDir;
-  }
-
-  private isClicker(): boolean {
-    if (this.readonly) {
-      return false;
-    }
-    const currentApplianceName = (this.displayer as Room).state.memberState.currentApplianceName;
-    return this.allowAppliances.includes(currentApplianceName);
-  }
-
-  private get isDisableInput(): boolean {
-    if ("disableDeviceInputs" in this.displayer) {
-      return (this.displayer as Room).disableDeviceInputs;
-    } else {
-      return true;
-    }
-  }
+
+    private computedStyle(_state: DisplayerState): void {
+        const cameraState = this.manager.cameraState;
+        const setWidth = this.attributes.width || 1280;
+        const setHeight = this.attributes.height || 720;
+        if (this.iframe) {
+            const { width, height, scale, centerX, centerY } = cameraState;
+            const rootRect = this.rootRect || { x: 0, y: 0 };
+            const transformOriginX = `${width / 2 + rootRect.x}px`;
+            const transformOriginY = `${height / 2 + rootRect.y}px`;
+            const transformOrigin = `transform-origin: ${transformOriginX} ${transformOriginY};`;
+            const iframeXDiff = ((width - setWidth) / 2) * scale;
+            const iframeYDiff = ((height - setHeight) / 2) * scale;
+            const x = -(centerX * scale) + iframeXDiff;
+            const y = -(centerY * scale) + iframeYDiff;
+            const transform = `transform: translate(${x}px,${y}px) scale(${scale}, ${scale});`;
+            const position = "position: absolute;";
+            // 在某些安卓机型, border-width 不为 0 时，才能正确计算 iframe 里嵌套 iframe 的大小
+            const borderWidth = "border: 0.1px solid rgba(0,0,0,0);";
+            const left = `left: 0px;`;
+            const top = `top: 0px;`;
+            const cssList = [position, borderWidth, top, left, transformOrigin, transform];
+            this.cssList = cssList;
+            this.computedZindex();
+            this.updateStyle();
+        }
+    }
+
+    private computedIframeDisplay(
+        _state: DisplayerState,
+        _attributes: Partial<IframeBridgeAttributes>
+    ): void {
+        if (this.inDisplaySceneDir) {
+            IframeBridge.emitter.emit(IframeEvents.DispayIframe);
+        } else {
+            IframeBridge.emitter.emit(IframeEvents.HideIframe);
+        }
+    }
+
+    public computedZindex(): void {
+        const zIndexString = "z-index: -1;";
+        const index = this.cssList.findIndex(css => css === zIndexString);
+        if (index !== -1) {
+            this.cssList.splice(index, 1);
+        }
+        if (!this.isClicker() || this.isDisableInput) {
+            this.cssList.push(zIndexString);
+        }
+    }
+
+    private updateStyle(): void {
+        this.iframe.style.cssText = this.cssList.join(" ");
+    }
+
+    private get iframeOrigin(): string | undefined {
+        if (this.iframe) {
+            try {
+                return new URL(this.iframe.src).origin;
+            } catch (err) {
+                console.warn(err);
+            }
+        }
+    }
+
+    private messageListener(event: MessageEvent): void {
+        log("<<<", JSON.stringify(event.data));
+        if (event.origin !== this.iframeOrigin) {
+            return;
+        }
+        const data = event.data;
+        switch (data.kind) {
+            case IframeEvents.SetAttributes: {
+                this.handleSetAttributes(data);
+                break;
+            }
+            case IframeEvents.RegisterMagixEvent: {
+                this.handleRegisterMagixEvent(data);
+                break;
+            }
+            case IframeEvents.RemoveMagixEvent: {
+                this.handleRemoveMagixEvent(data);
+                break;
+            }
+            case IframeEvents.DispatchMagixEvent: {
+                this.handleDispatchMagixEvent(data);
+                break;
+            }
+            case IframeEvents.RemoveAllMagixEvent: {
+                this.handleRemoveAllMagixEvent();
+                break;
+            }
+            case IframeEvents.NextPage: {
+                this.handleNextPage();
+                break;
+            }
+            case IframeEvents.PrevPage: {
+                this.handlePrevPage();
+                break;
+            }
+            case IframeEvents.SDKCreate: {
+                this.handleSDKCreate();
+                break;
+            }
+            case IframeEvents.SetPage: {
+                this.handleSetPage(data);
+                break;
+            }
+            case IframeEvents.GetAttributes: {
+                this.handleGetAttributes();
+                break;
+            }
+            case IframeEvents.PageTo: {
+                this.handlePageTo(data);
+                break;
+            }
+            default: {
+                log(`${data.kind} not allow event.`);
+                break;
+            }
+        }
+    }
+
+    private handleSDKCreate(): void {
+        this.postMessage({
+            kind: IframeEvents.Init,
+            payload: {
+                attributes: this.attributes,
+                roomState: this.displayer.state,
+                currentPage: this.currentPage,
+                observerId: this.displayer.observerId,
+            },
+        });
+    }
+
+    private handleDispatchMagixEvent(data: any): void {
+        const eventPayload: { event: string; payload: any } = data.payload;
+        this.appManager.safeDispatchMagixEvent(eventPayload.event, eventPayload.payload);
+    }
+
+    private handleSetAttributes(data: any): void {
+        this.setAttributes(data.payload);
+    }
+
+    private handleRegisterMagixEvent(data: any): void {
+        const eventName = data.payload as string;
+        const listener = (event: any) => {
+            if (event.authorId === this.displayer.observerId) {
+                return;
+            }
+            this.postMessage({ kind: IframeEvents.ReciveMagixEvent, payload: event });
+        };
+        this.magixEventMap.set(eventName, listener);
+        this.displayer.addMagixEventListener(eventName, listener);
+    }
+
+    private handleRemoveMagixEvent(data: any): void {
+        const eventName = data.payload as string;
+        const listener = this.magixEventMap.get(eventName);
+        this.displayer.removeMagixEventListener(eventName, listener);
+    }
+
+    private handleNextPage(): void {
+        if (this.manager.canOperate) {
+            this.manager.nextPage();
+            this.dispatchMagixEvent(IframeEvents.NextPage, {});
+        }
+    }
+
+    private handlePrevPage(): void {
+        if (this.manager.canOperate) {
+            this.manager.prevPage();
+            this.dispatchMagixEvent(IframeEvents.PrevPage, {});
+        }
+    }
+
+    private handlePageTo(data: any): void {
+        if (this.manager.canOperate) {
+            const page = data.payload as number;
+            if (!Number.isSafeInteger(page) || page <= 0) {
+                return;
+            }
+            this.manager.setMainViewSceneIndex(page - 1);
+            this.dispatchMagixEvent(IframeEvents.PageTo, page - 1);
+        }
+    }
+
+    private handleRemoveAllMagixEvent(): void {
+        this.magixEventMap.forEach((listener, event) => {
+            this.displayer.removeMagixEventListener(event, listener);
+        });
+        this.magixEventMap.clear();
+    }
+
+    private handleGetAttributes(): void {
+        this.postMessage({
+            kind: IframeEvents.GetAttributes,
+            payload: this.attributes,
+        });
+    }
+
+    public postMessage(message: any): void {
+        if (this.iframe) {
+            this.iframe.contentWindow?.postMessage(JSON.parse(JSON.stringify(message)), "*");
+        }
+    }
+
+    public dispatchMagixEvent(event: string, payload: any): void {
+        if (this.manager.canOperate) {
+            this.setAttributes({ lastEvent: { name: event, payload } });
+            (this.displayer as Room).dispatchMagixEvent(event, payload);
+        }
+    }
+
+    private get currentIndex(): number {
+        return this.manager.mainViewSceneIndex;
+    }
+
+    private get currentPage(): number {
+        return this.currentIndex + 1;
+    }
+
+    private get totalPage(): number {
+        return this.manager.mainViewScenesLength;
+    }
+
+    private get readonly(): boolean {
+        return !(this.displayer as any).isWritable;
+    }
+
+    public get inDisplaySceneDir(): boolean {
+        return this.manager.mainViewSceneDir === this.attributes.displaySceneDir;
+    }
+
+    private isClicker(): boolean {
+        if (this.readonly) {
+            return false;
+        }
+        const currentApplianceName = (this.displayer as Room).state.memberState
+            .currentApplianceName;
+        return this.allowAppliances.includes(currentApplianceName);
+    }
+
+    private get isDisableInput(): boolean {
+        if ("disableDeviceInputs" in this.displayer) {
+            return (this.displayer as Room).disableDeviceInputs;
+        } else {
+            return true;
+        }
+    }
 }