@netless/window-manager 0.3.0-canary.0 → 0.3.0

package/example/index.tsx

@@ -0,0 +1,367 @@
+import React from "react";
+import ReactDom from "react-dom";
+import { PlayerPhase, WhiteWebSdk } from "white-web-sdk";
+import type { AppContext} from "../dist";
+import { BuiltinApps, WindowManager } from "../dist/index.es";
+import "../dist/style.css";
+import "video.js/dist/video-js.css";
+
+const anyWindow = window as any;
+
+const createHelloWorld = () => {
+    anyWindow.manager.addApp({
+        kind: "HelloWorld",
+        options: {
+            scenePath: "/helloworld1"
+        }
+    });
+}
+
+const createDocs1 = () => {
+    anyWindow.manager.addApp({
+        kind: BuiltinApps.DocsViewer,
+        options: {
+            scenePath: "/test5/",
+            title: "ppt1",
+            scenes: [
+                {
+                    name: "1",
+                    ppt: {
+                        "height": 1010,
+                        "src": "https://convertcdn.netless.link/staticConvert/18140800fe8a11eb8cb787b1c376634e/1.png",
+                        "width": 714
+                    }
+                },
+                {
+                    name: "2",
+                    ppt: {
+                        "height": 1010,
+                        "src": "https://convertcdn.netless.link/staticConvert/18140800fe8a11eb8cb787b1c376634e/2.png",
+                        "width": 714
+                    }
+                },
+            ]
+        },
+    }).then(appId => console.log("appID", appId));
+}
+const createDocs2 = () => {
+    anyWindow.manager.addApp({
+        kind: BuiltinApps.DocsViewer,
+        options: {
+            scenePath: "/ppt3",
+            title: "ppt3",
+            scenes: [
+                {
+                    "name": "1",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/1.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/1.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "2",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/2.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/2.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "3",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/3.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/3.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "4",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/4.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/4.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "5",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/5.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/5.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "6",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/6.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/6.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "7",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/7.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/7.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "8",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/8.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/8.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "9",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/9.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/9.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "10",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/10.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/10.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "11",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/11.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/11.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "12",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/12.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/12.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "13",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/13.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/13.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "14",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/14.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/14.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "15",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/15.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/15.slide",
+                        "width": 1280
+                    }
+                },
+                {
+                    "name": "16",
+                    "ppt": {
+                        "height": 720,
+                        "previewURL": "https://convertcdn.netless.link/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/preview/16.png",
+                        "src": "pptx://cover.herewhite.com/dynamicConvert/6a212c90fa5311ea8b9c074232aaccd4/16.slide",
+                        "width": 1280
+                    }
+                }
+            ]
+        }
+    })
+}
+const createVideo = () => {
+    anyWindow.manager.addApp({
+        kind: BuiltinApps.MediaPlayer,
+        attributes: {
+            src: "https://developer-assets.netless.link/Zelda.mp4"
+        }
+    })
+}
+
+let firstPlay = false;
+
+const replay = () => {
+    sdk.replayRoom({
+        room: process.env.ROOM_UUID,
+        roomToken: process.env.ROOM_TOKEN,
+        invisiblePlugins: [WindowManager as any],
+        useMultiViews: true,
+    }).then(async player => {
+        await anyWindow.manager.destroy();
+        anyWindow.room.disconnect();
+        setTimeout(async () => {
+            anyWindow.player = player;
+            // player.bindHtmlElement(document.getElementById("container") as any)
+            player.play()
+        }, 500)
+        player.callbacks.on("onPhaseChanged", phase => {
+            if (phase === PlayerPhase.Playing) {
+                if (firstPlay) return;
+                setTimeout(() => {
+                    mountManager(player, document.getElementById("container"))
+                }, 1000)
+                firstPlay = true
+            }
+        })
+    })
+}
+
+const onRef = (ref) => {
+    sdk.joinRoom({
+        uuid: process.env.ROOM_UUID,
+        roomToken: process.env.ROOM_TOKEN,
+        invisiblePlugins: [WindowManager as any],
+        useMultiViews: true,
+        userPayload: {
+            userId: "111",
+            cursorName: "测试测试",
+            avatar: "https://avatars.githubusercontent.com/u/8299540?s=60&v=4",
+        },
+        isWritable: !(isWritable === "false"),
+        cursorAdapter: undefined,
+        uid: Math.random().toString().substr(3, 8),
+        disableMagixEventDispatchLimit: true,
+    }).then(async room => {
+        if (room.isWritable) {
+            room.setMemberState({ strokeColor: [0, 0, 1] });
+        }
+
+        (window as any).room = room;
+        await mountManager(room, ref);
+    })
+}
+
+const HelloWorldApp = async () => {
+    console.log('start loading HelloWorld...')
+    // await new Promise(resolve => setTimeout(resolve, 2000))
+    console.log('HelloWorld Loaded')
+    return {
+        kind: "HelloWorld",
+        setup: (context: AppContext<any, any>) => {
+            console.log('helloworld options', context.getAppOptions());
+            context.mountView(context.getBox().$content as any);
+            context.emitter.on("destroy",() => console.log("[HelloWorld]: destroy"))
+            return "Hello World Result";
+        }
+    }
+};
+
+WindowManager.register({
+    kind: "HelloWorld",
+    src: HelloWorldApp,
+    appOptions: () => 'AppOptions',
+    addHooks: (emitter) => {
+        emitter.on('created', result => {
+            console.log('HelloWordResult', result);
+        })
+    }
+});
+
+const sdk = new WhiteWebSdk({
+    appIdentifier: process.env.APPID,
+    useMobXState: true
+});
+
+(window as any).WindowManager = WindowManager;
+const search = window.location.search;
+const url = new URLSearchParams(search);
+const isWritable = url.get("isWritable");
+
+const mountManager = async (room, root) => {
+    const manager = await WindowManager.mount({
+        room,
+        container: root,
+        // collectorStyles: { bottom: "100px", right: "30px" },
+        containerSizeRatio: 9 / 16,
+        chessboard: true,
+        debug: true,
+        cursor: true,
+        // disableCameraTransform: true,
+    });
+
+    (window as any).manager = manager;
+    (window as any).manager.onAppDestroy(BuiltinApps.DocsViewer, (error) => {
+        console.log("onAppDestroy", error)
+    });
+
+    (window as any).manager.emitter.on("mainViewModeChange", mode => {
+        console.log("mode", mode);
+    })
+
+    manager.emitter.on("boxStateChange", state => {
+        console.log("boxState", state);
+    });
+    console.log("boxState", manager.boxState);
+}
+const destroy = () => {
+    anyWindow.manager.destroy();
+    anyWindow.manager = undefined;
+}
+
+anyWindow.mountManager = mountManager;
+anyWindow.destroy = destroy;
+
+const App = () => {
+    return (
+        <div style={{
+            display: "flex",
+            width: "100vw",
+            height: "100vh",
+            padding: "16px 16px",
+            overflow: "hidden",
+            boxSizing: "border-box"
+        }}>
+            <div ref={onRef} id="container" style={{
+                flex: 1,
+                height: "calc(100vh - 32px)",
+                border: "1px solid"
+            }}>
+            </div>
+            <div style={{
+                flexShrink: 0,
+                padding: "16px",
+                marginRight: "16px",
+                textAlign: "center",
+                userSelect: "none"
+            }}>
+                <button style={{ display: "block", margin: "1em 0"  }} onClick={createHelloWorld}>Hello World</button>
+                <button style={{ display: "block", margin: "1em 0"  }} onClick={createDocs1}>课件1</button>
+                <button style={{ display: "block", margin: "1em 0"  }} onClick={createDocs2}>课件2</button>
+                <button style={{ display: "block", margin: "1em 0"  }} onClick={createVideo}>视频</button>
+                <button style={{ display: "block", margin: "1em 0"  }} onClick={replay}>回放</button>
+            </div>
+        </div>
+    )
+}
+
+ReactDom.render(<App />, document.getElementById("root"))

package/example/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "test",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "poi index.html --serve --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@netless/video-js-plugin": "^0.3.7",
+    "normalize.css": "^8.0.1",
+    "p-queue": "^7.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "video.js": "^7.14.3"
+  },
+  "devDependencies": {
+    "poi": "^12.10.3"
+  }
+}

package/example/poi.config.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line
+const dotenv = require('dotenv').config();
+
+// eslint-disable-next-line no-undef
+module.exports = {
+    envs: dotenv.parsed,
+    configureWebpack: {
+        module: {
+            unknownContextCritical: false
+        }
+    },
+}

package/example/test.js

@@ -0,0 +1,114 @@
+export const scenes = [
+    {
+        "name": "2d9a8a51-08c1-4949-94f9-7d186d04b3b0",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/1.png"
+        }
+    },
+    {
+        "name": "50bfa0be-c17b-4b36-87d8-39d406f2ff98",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/2.png"
+        }
+    },
+    {
+        "name": "4fcc3ac8-d730-43c0-ab8e-7cb633a9a333",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/3.png"
+        }
+    },
+    {
+        "name": "078be34b-9f0e-42b5-b972-8b0dd1f3bc8d",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/4.png"
+        }
+    },
+    {
+        "name": "753d4588-0a6b-413b-b6c1-2f6ead5040db",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/5.png"
+        }
+    },
+    {
+        "name": "855aeadf-2087-4c02-94a9-301e9c032a8f",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/6.png"
+        }
+    },
+    {
+        "name": "31c45862-a931-4733-86c1-3087a9f0f8d5",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/7.png"
+        }
+    },
+    {
+        "name": "bf4a0ca3-e4b4-402e-a150-6f6b2ae5b213",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/8.png"
+        }
+    },
+    {
+        "name": "fdad1852-b143-4f7c-926a-64902cdfc049",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/9.png"
+        }
+    },
+    {
+        "name": "1290c291-3b10-442f-b03d-8bbd5754b9b5",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/10.png"
+        }
+    },
+    {
+        "name": "a68cf556-4789-423e-bb93-d86429229043",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/11.png"
+        }
+    },
+    {
+        "name": "2bda29d6-484a-4ac5-ab53-52006b23ee6c",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/12.png"
+        }
+    },
+    {
+        "name": "90dd0526-dff9-494d-a2d6-417b64eb605b",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/13.png"
+        }
+    },
+    {
+        "name": "9fcb4e45-f160-42e6-88c8-1da7ff291b7d",
+        "ppt": {
+            "width": 612,
+            "height": 870,
+            "src": "https://convertcdn.netless.link/staticConvert/245bab80eeb911ebb78953592d694b06/14.png"
+        }
+    }
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.3.0-canary.0",
+  "version": "0.3.0",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -24,7 +24,7 @@
     "@juggle/resize-observer": "^3.3.1",
     "@netless/app-docs-viewer": "^0.1.21",
     "@netless/app-media-player": "0.1.0-beta.5",
-    "@netless/telebox-insider": "0.2.2",
+    "@netless/telebox-insider": "0.2.3",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",

package/src/AppListener.ts

@@ -1,7 +1,6 @@
 import { Events, MagixEventName } from "./constants";
 import { ViewVisionMode } from "white-web-sdk";
 import type { Event } from "white-web-sdk";
-import type { TeleBox } from "@netless/telebox-insider";
 import type { AppManager } from "./AppManager";
 
 export class AppListeners {

package/src/AppManager.ts

@@ -12,6 +12,7 @@ import { callbacks, emitter } from './index';
 import { CameraStore } from './Utils/CameraStore';
 import { genAppId, makeValidScenePath, setScenePath } from './Utils/Common';
 import {
+    autorun,
     isPlayer,
     isRoom,
     ScenePathType,
@@ -76,6 +77,22 @@ export class AppManager {
                 this.onAppDelete(this.attributes.apps);
             });
         });
+        this.refresher?.add("maximized", () => {
+            return autorun(
+                () => {
+                    const maximized = this.attributes.maximized
+                    this.boxManager.teleBoxManager.setMaximized(Boolean(maximized), true);
+                }
+            )
+        });
+        this.refresher?.add("minimized", () => {
+            return autorun(
+                () => {
+                    const minimized = this.attributes.minimized
+                    this.boxManager.teleBoxManager.setMinimized(Boolean(minimized), true);
+                }
+            )
+        });
         if (!this.attributes.apps || Object.keys(this.attributes.apps).length === 0) {
             const mainScenePath = this.store.getMainViewScenePath();
             if (!mainScenePath) return;
@@ -442,6 +459,7 @@ export class AppManager {
             });
         }
         this.viewManager.destroy();
+        this.boxManager.destroy();
         this.refresher?.destroy();
         this.mainViewProxy.destroy();
         callbacks.clearListeners();

package/src/AppProxy.ts

@@ -5,7 +5,7 @@ import { appRegister } from "./Register";
 import { autorun, ViewVisionMode } from "white-web-sdk";
 import { callbacks, emitter } from "./index";
 import { Fields } from "./AttributesDelegate";
-import { get, isEmpty } from "lodash";
+import { get } from "lodash";
 import { log } from "./Utils/log";
 import {
     notifyMainViewModeChange,

package/src/AttributesDelegate.ts

@@ -52,6 +52,10 @@ export class AttributesDelegate {
         return get(this.apps(), [id, Fields.State]);
     }
 
+    public getMaximized() {
+        return get(this.manager.attributes, ["maximized"])
+    }
+
     public setupAppAttributes(params: AddAppParams, id: string, isDynamicPPT: boolean) {
         const attributes = this.manager.attributes;
         if (!attributes.apps) {

package/src/Base/Context.ts

@@ -1,7 +1,6 @@
 import { memoize } from "lodash";
 import { emitter } from "../index";
 import type { AppManager } from "../AppManager";
-import type { MoveCursorParams } from "../Cursor";
 
 export class Context {
     public observerId: number;

package/src/BoxManager.ts

@@ -216,12 +216,16 @@ export class BoxManager {
             if (state.maximized != null) {
                 this.teleBoxManager.setMaximized(Boolean(state.maximized), true);
                 this.teleBoxManager.setMinimized(Boolean(state.minimized), true);
-            } else if (state.boxState) {
+            } 
+            if (state.boxState) {
                 this.teleBoxManager.setState(state.boxState, true);
             }
-            if (state.focus) {
-                this.teleBoxManager.update(box.id, { focus: true }, true);
-            }
+            setTimeout(() => {
+                if (state.focus) {
+                    this.teleBoxManager.update(box.id, { focus: true }, true);
+                }
+            }, 50);
+            callbacks.emit("boxStateChange", this.teleBoxManager.state);
         }
     }
 
@@ -281,4 +285,8 @@ export class BoxManager {
         this.teleBoxManager.setState(state, true);
         callbacks.emit("boxStateChange", state);
     }
+
+    public destroy() {
+        this.teleBoxManager.destroy();
+    }
 }

package/src/Cursor/Cursor.ts

@@ -142,6 +142,7 @@ export class Cursor extends Base {
         }
         this.timer = window.setTimeout(() => {
             this.hide();
+            this.store.updateCursorState(this.context.uid, CursorState.Leave);
         }, 1000 * 10); // 10 秒钟自动隐藏
     }