@netless/window-manager 1.0.0-canary.9 → 1.0.1

package/src/View/IframeBridge.ts

@@ -0,0 +1,680 @@
+import type { Displayer, DisplayerState, Room, RoomState } from "white-web-sdk";
+import type { AppManager } from "../AppManager";
+import type { WindowManager } from "../index";
+
+import Emittery from "emittery";
+import { PlayerPhase, AnimationMode, autorun } from "white-web-sdk";
+import { SideEffectManager } from "side-effect-manager";
+import { debounce, noop } from "lodash";
+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",
+}
+
+export enum DomEvents {
+    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;
+};
+
+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;
+};
+
+export type IframeSize = {
+    readonly width: number;
+    readonly height: number;
+};
+
+type BaseOption = {
+    readonly url: string;
+    readonly width: number;
+    readonly height: number;
+    readonly displaySceneDir: string;
+};
+
+export type InsertOptions = {
+    readonly useClicker?: boolean;
+    readonly useSelector?: boolean;
+} & BaseOption;
+
+export type OnCreateInsertOption = {
+    readonly displayer: Displayer;
+} & BaseOption;
+
+const RefreshIDs = {
+    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));
+};
+
+/**
+ * {@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);
+                        }
+                    }
+                    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();
+        }
+        // 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,
+                },
+            });
+            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) {
+                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 });
+        };
+        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;
+        }
+    }
+}