feat(desktop): support window manager in replay mode (#1142)

netless-io · Nov 25, 2021 · d0edfe0 · d0edfe0
1 parent 4e8c649
commit d0edfe0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/desktop/renderer-app/src/api-middleware/smart-player.ts b/desktop/renderer-app/src/api-middleware/smart-player.ts
@@ -1,7 +1,6 @@
 import "video.js/dist/video-js.css";
 
 import CombinePlayerFactory, { CombinePlayer, PublicCombinedStatus } from "@netless/combine-player";
-import { CursorTool } from "@netless/cursor-tool";
 import {
     PluginId as VideoJsPluginId,
     videoJsPlugin,
@@ -19,6 +18,7 @@ import {
 } from "white-web-sdk";
 import { Region } from "flat-components";
 import { NETLESS, NODE_ENV } from "../constants/process";
+import { WindowManager } from "@netless/window-manager";
 
 export enum SmartPlayerEventType {
     Ready = "Ready",
@@ -99,6 +99,7 @@ export class SmartPlayer extends EventEmitter {
             appIdentifier: NETLESS.APP_IDENTIFIER,
             plugins: plugins,
             region,
+            useMobXState: true,
         });
 
         this.whiteWebSdk = whiteWebSdk;
@@ -123,13 +124,12 @@ export class SmartPlayer extends EventEmitter {
                 }
             });
 
-        const cursorAdapter = new CursorTool();
-
         const replayRoomParams: ReplayRoomParams = {
             room: whiteboardUUID,
             roomToken: whiteboardRoomToken,
-            cursorAdapter: cursorAdapter,
             region,
+            invisiblePlugins: [WindowManager],
+            useMultiViews: true,
         };
 
         if (recording) {
@@ -138,9 +138,6 @@ export class SmartPlayer extends EventEmitter {
         }
 
         const player = await whiteWebSdk.replayRoom(replayRoomParams, {
-            onLoadFirstFrame: () => {
-                cursorAdapter.setPlayer(player);
-            },
             onPhaseChanged: phase => {
                 if (this.combinePlayer) {
                     return;
@@ -183,9 +180,12 @@ export class SmartPlayer extends EventEmitter {
             },
         });
 
-        cursorAdapter.setPlayer(player);
-
-        player.bindHtmlElement(whiteboardEl);
+        void WindowManager.mount({
+            room: player as any,
+            container: whiteboardEl,
+            cursor: true,
+            chessboard: false,
+        });
 
         this.whiteboardPlayer = player;
 

diff --git a/desktop/renderer-app/src/pages/ReplayPage/index.tsx b/desktop/renderer-app/src/pages/ReplayPage/index.tsx
@@ -13,6 +13,7 @@ import { RouteNameType, RouteParams } from "../../utils/routes";
 
 import videoPlaySVG from "../../assets/image/video-play.svg";
 import "video.js/dist/video-js.min.css";
+import "@netless/window-manager/dist/style.css";
 import "./ReplayPage.less";
 import { ExitReplayConfirmModal } from "../../components/Modal/ExitReplayConfirmModal";
 import { errorTips } from "../../components/Tips/ErrorTips";

diff --git a/desktop/renderer-app/src/stores/class-room-replay-store.ts b/desktop/renderer-app/src/stores/class-room-replay-store.ts
@@ -148,7 +148,7 @@ export class ClassRoomReplayStore {
             });
         } catch (error) {
             console.error(error);
-            this.updateError(error);
+            this.updateError(error as Error);
         }
 
         runInAction(() => {