diff --git a/desktop/renderer-app/package.json b/desktop/renderer-app/package.json index 15f6f406d8d..ebe9a7f379a 100644 --- a/desktop/renderer-app/package.json +++ b/desktop/renderer-app/package.json @@ -13,7 +13,7 @@ "@netless/redo-undo": "^0.0.5", "@netless/tool-box": "^0.1.4", "@netless/video-js-plugin": "^0.3.6", - "@netless/window-manager": "^0.1.65", + "@netless/window-manager": "^0.1.66-canary.1", "@videojs/vhs-utils": "^2.3.0", "agora-rtm-sdk": "^1.4.3", "antd": "^4.15.4", diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx index c2b31117af3..2173bc62492 100644 --- a/desktop/renderer-app/src/pages/BigClassPage/index.tsx +++ b/desktop/renderer-app/src/pages/BigClassPage/index.tsx @@ -12,7 +12,7 @@ import { import { observer } from "mobx-react-lite"; import React, { useContext, useEffect, useRef, useState } from "react"; import { useParams } from "react-router-dom"; -import { RoomPhase } from "white-web-sdk"; +import { RoomPhase, ViewMode } from "white-web-sdk"; import { useTranslation } from "react-i18next"; import { AgoraCloudRecordBackgroundConfigItem } from "../../apiMiddleware/flatServer/agora"; import { RoomStatus, RoomType } from "../../apiMiddleware/flatServer/constants"; @@ -308,14 +308,17 @@ export const BigClassPage = observer(function BigClassPage() /> )} - {/* {whiteboardStore.isWritable && ( + {whiteboardStore.isWritable && ( - )} */} + )} {/* (function BigClassPage() ); } - // function handleRoomController(): void { - // const { room } = whiteboardStore; - // if (!room) { - // return; - // } - // if (room.state.broadcastState.mode !== ViewMode.Broadcaster) { - // room.setViewMode(ViewMode.Broadcaster); - // void message.success(t("follow-your-perspective-tips")); - // } else { - // room.setViewMode(ViewMode.Freedom); - // void message.success(t("Stop-following-your-perspective-tips")); - // } - // } + function toggleRoomVisionController(): void { + const { isBroadcasterMode } = whiteboardStore; + if (isBroadcasterMode === undefined) { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Broadcaster); + void message.success(t("follow-your-perspective-tips")); + } else { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Freedom); + void message.success(t("Stop-following-your-perspective-tips")); + } + } function handleSideOpenerSwitch(): void { openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen); diff --git a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx index 7e7f85eb2e0..422d14b4da4 100644 --- a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx +++ b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx @@ -4,7 +4,7 @@ import React, { useContext, useEffect, useRef, useState } from "react"; import { useParams } from "react-router-dom"; import { observer } from "mobx-react-lite"; import { message } from "antd"; -import { RoomPhase } from "white-web-sdk"; +import { RoomPhase, ViewMode } from "white-web-sdk"; import { NetworkStatus, RoomInfo, @@ -266,14 +266,17 @@ export const OneToOnePage = observer(function OneToOnePage() /> )} - {/* {whiteboardStore.isWritable && ( + {whiteboardStore.isWritable && ( - )} */} + )} {/* (function OneToOnePage() ); } - // function handleRoomController(): void { - // const { room } = whiteboardStore; - // if (!room) { - // return; - // } - // if (room.state.broadcastState.mode !== ViewMode.Broadcaster) { - // room.setViewMode(ViewMode.Broadcaster); - // void message.success(t("follow-your-perspective-tips")); - // } else { - // room.setViewMode(ViewMode.Freedom); - // void message.success(t("Stop-following-your-perspective-tips")); - // } - // } + function toggleRoomVisionController(): void { + const { isBroadcasterMode } = whiteboardStore; + if (isBroadcasterMode === undefined) { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Broadcaster); + void message.success(t("follow-your-perspective-tips")); + } else { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Freedom); + void message.success(t("Stop-following-your-perspective-tips")); + } + } function handleSideOpenerSwitch(): void { openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen); diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx index 56e61abaadc..8d2cf887c14 100644 --- a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx +++ b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useRef, useState } from "react"; import { message } from "antd"; -import { RoomPhase } from "white-web-sdk"; +import { RoomPhase, ViewMode } from "white-web-sdk"; import { observer } from "mobx-react-lite"; import { useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; @@ -334,14 +334,17 @@ export const SmallClassPage = observer(function SmallClassP /> )} - {/* {whiteboardStore.isWritable && ( + {whiteboardStore.isWritable && ( - )} */} + )} {/* (function SmallClassP ); } - // function handleRoomController(): void { - // const { room } = whiteboardStore; - // if (!room) { - // return; - // } - // if (room.state.broadcastState.mode !== ViewMode.Broadcaster) { - // room.setViewMode(ViewMode.Broadcaster); - // void message.success(t("follow-your-perspective-tips")); - // } else { - // room.setViewMode(ViewMode.Freedom); - // void message.success(t("Stop-following-your-perspective-tips")); - // } - // } + function toggleRoomVisionController(): void { + const { isBroadcasterMode } = whiteboardStore; + if (isBroadcasterMode === undefined) { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Broadcaster); + void message.success(t("follow-your-perspective-tips")); + } else { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Freedom); + void message.success(t("Stop-following-your-perspective-tips")); + } + } function stopClass(): void { confirm(ExitRoomConfirmType.StopClassButton); diff --git a/desktop/renderer-app/src/stores/WhiteboardStore.ts b/desktop/renderer-app/src/stores/WhiteboardStore.ts index 822082a5e94..3415617c432 100644 --- a/desktop/renderer-app/src/stores/WhiteboardStore.ts +++ b/desktop/renderer-app/src/stores/WhiteboardStore.ts @@ -26,6 +26,7 @@ export class WhiteboardStore { public phase: RoomPhase = RoomPhase.Connecting; public viewMode: ViewMode | null = null; public windowManager: WindowManager | null = null; + public isBroadcasterMode: number | undefined = undefined; public isWritable: boolean; public isShowPreviewPanel = false; public isFileOpen = false; @@ -98,6 +99,10 @@ export class WhiteboardStore { this.isFocusWindow = isFocus; }; + public updateBroadcasterMode = (isBroadcasterMode: number | undefined): void => { + this.isBroadcasterMode = isBroadcasterMode; + }; + public getWhiteboardRatio = (): number => { // the Ratio of whiteboard compute method is height / width. if (this.roomType === RoomType.SmallClass) { @@ -114,6 +119,11 @@ export class WhiteboardStore { this.isFileOpen = !this.isFileOpen; }; + public toggleMainViewVisionMode = (mode: ViewMode): void => { + this.windowManager?.setViewMode(mode); + this.updateBroadcasterMode(this.windowManager?.broadcaster); + }; + public showPreviewPanel = (): void => { this.isShowPreviewPanel = true; }; @@ -347,6 +357,8 @@ export class WhiteboardStore { this.updateScenesCount(room.state.sceneState.scenes.length); + this.updateBroadcasterMode(this.windowManager?.broadcaster); + if (this.room) { const windowManager = this.room.getInvisiblePlugin(WindowManager.kind) as WindowManager; this.updateWindowManager(windowManager); diff --git a/web/flat-web/package.json b/web/flat-web/package.json index f1ca5310440..66babfa78e2 100644 --- a/web/flat-web/package.json +++ b/web/flat-web/package.json @@ -41,7 +41,7 @@ "@netless/redo-undo": "^0.0.5", "@netless/tool-box": "^0.1.5", "@netless/video-js-plugin": "^0.3.6", - "@netless/window-manager": "^0.1.65", + "@netless/window-manager": "^0.1.66-canary.1", "@videojs/vhs-utils": "^2.3.0", "@zip.js/zip.js": "^2.3.7", "agora-rtc-sdk-ng": "^4.5.0", diff --git a/web/flat-web/src/pages/BigClassPage/index.tsx b/web/flat-web/src/pages/BigClassPage/index.tsx index 0be51f552ce..8abdd1f4940 100644 --- a/web/flat-web/src/pages/BigClassPage/index.tsx +++ b/web/flat-web/src/pages/BigClassPage/index.tsx @@ -14,7 +14,7 @@ import { import { observer } from "mobx-react-lite"; import React, { useContext, useEffect, useRef, useState } from "react"; import { useParams } from "react-router-dom"; -import { RoomPhase } from "white-web-sdk"; +import { RoomPhase, ViewMode } from "white-web-sdk"; import { useTranslation } from "react-i18next"; import { AgoraCloudRecordBackgroundConfigItem } from "../../apiMiddleware/flatServer/agora"; import { RoomStatus, RoomType } from "../../apiMiddleware/flatServer/constants"; @@ -294,20 +294,17 @@ export const BigClassPage = observer(function BigClassPage() /> )} - {/* - * TODO: After the whiteboard supports multi-window, the vision control function is disabled, so hide the function for the time being. - */} - {/* {whiteboardStore.isWritable && ( + {whiteboardStore.isWritable && ( - )} */} + )} {/* (function BigClassPage() ); } - // function handleRoomController(): void { - // const { room } = whiteboardStore; - // if (!room) { - // return; - // } - // if (room.state.broadcastState.mode !== ViewMode.Broadcaster) { - // room.setViewMode(ViewMode.Broadcaster); - // void message.success(t("follow-your-perspective-tips")); - // } else { - // room.setViewMode(ViewMode.Freedom); - // void message.success(t("Stop-following-your-perspective-tips")); - // } - // } + function toggleRoomVisionController(): void { + const { isBroadcasterMode } = whiteboardStore; + if (isBroadcasterMode === undefined) { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Broadcaster); + void message.success(t("follow-your-perspective-tips")); + } else { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Freedom); + void message.success(t("Stop-following-your-perspective-tips")); + } + } function handleShareScreen(): void { void shareScreenStore.toggle(); diff --git a/web/flat-web/src/pages/OneToOnePage/index.tsx b/web/flat-web/src/pages/OneToOnePage/index.tsx index e962c1c34a1..c41775db8aa 100644 --- a/web/flat-web/src/pages/OneToOnePage/index.tsx +++ b/web/flat-web/src/pages/OneToOnePage/index.tsx @@ -4,7 +4,7 @@ import React, { useContext, useEffect, useRef, useState } from "react"; import { useParams } from "react-router-dom"; import { observer } from "mobx-react-lite"; import { message } from "antd"; -import { RoomPhase } from "white-web-sdk"; +import { RoomPhase, ViewMode } from "white-web-sdk"; import { NetworkStatus, RoomInfo, @@ -251,17 +251,17 @@ export const OneToOnePage = observer(function OneToOnePage() /> )} - {/* {whiteboardStore.isWritable && ( + {whiteboardStore.isWritable && ( - )} */} + )} {/* (function OneToOnePage() ); } - // function handleRoomController(): void { - // const { room } = whiteboardStore; - // if (!room) { - // return; - // } - // if (room.state.broadcastState.mode !== ViewMode.Broadcaster) { - // room.setViewMode(ViewMode.Broadcaster); - // void message.success(t("follow-your-perspective-tips")); - // } else { - // room.setViewMode(ViewMode.Freedom); - // void message.success(t("Stop-following-your-perspective-tips")); - // } - // } + function toggleRoomVisionController(): void { + const { isBroadcasterMode } = whiteboardStore; + if (isBroadcasterMode === undefined) { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Broadcaster); + void message.success(t("follow-your-perspective-tips")); + } else { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Freedom); + void message.success(t("Stop-following-your-perspective-tips")); + } + } function handleSideOpenerSwitch(): void { openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen); diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx index 636665b3c6a..1f060c0e892 100644 --- a/web/flat-web/src/pages/SmallClassPage/index.tsx +++ b/web/flat-web/src/pages/SmallClassPage/index.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useRef, useState } from "react"; import { message } from "antd"; -import { RoomPhase } from "white-web-sdk"; +import { RoomPhase, ViewMode } from "white-web-sdk"; import { observer } from "mobx-react-lite"; import { useParams } from "react-router-dom"; import { @@ -320,17 +320,17 @@ export const SmallClassPage = observer(function SmallClassP /> )} - {/* {whiteboardStore.isWritable && ( + {whiteboardStore.isWritable && ( - )} */} + )} {/* (function SmallClassP ); } - // function handleRoomController(): void { - // const { room } = whiteboardStore; - // if (!room) { - // return; - // } - // if (room.state.broadcastState.mode !== ViewMode.Broadcaster) { - // room.setViewMode(ViewMode.Broadcaster); - // void message.success(t("follow-your-perspective-tips")); - // } else { - // room.setViewMode(ViewMode.Freedom); - // void message.success(t("Stop-following-your-perspective-tips")); - // } - // } + function toggleRoomVisionController(): void { + const { isBroadcasterMode } = whiteboardStore; + if (isBroadcasterMode === undefined) { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Broadcaster); + void message.success(t("follow-your-perspective-tips")); + } else { + whiteboardStore.toggleMainViewVisionMode(ViewMode.Freedom); + void message.success(t("Stop-following-your-perspective-tips")); + } + } function stopClass(): void { confirm(ExitRoomConfirmType.StopClassButton); diff --git a/web/flat-web/src/stores/WhiteboardStore.ts b/web/flat-web/src/stores/WhiteboardStore.ts index cc091004627..50837e59e00 100644 --- a/web/flat-web/src/stores/WhiteboardStore.ts +++ b/web/flat-web/src/stores/WhiteboardStore.ts @@ -26,6 +26,7 @@ export class WhiteboardStore { public phase: RoomPhase = RoomPhase.Connecting; public viewMode: ViewMode | null = null; public windowManager: WindowManager | null = null; + public isBroadcasterMode: number | undefined = undefined; public isWritable: boolean; public isShowPreviewPanel = false; public isFileOpen = false; @@ -103,6 +104,10 @@ export class WhiteboardStore { this.isFocusWindow = isFocus; }; + public updateBroadcasterMode = (isBroadcasterMode: number | undefined): void => { + this.isBroadcasterMode = isBroadcasterMode; + }; + public getWhiteboardRatio = (): number => { // the Ratio of whiteboard compute method is height / width. if (this.getRoomType() === RoomType.SmallClass) { @@ -119,6 +124,11 @@ export class WhiteboardStore { this.isFileOpen = !this.isFileOpen; }; + public toggleMainViewVisionMode = (mode: ViewMode): void => { + this.windowManager?.setViewMode(mode); + this.updateBroadcasterMode(this.windowManager?.broadcaster); + }; + public showPreviewPanel = (): void => { this.isShowPreviewPanel = true; }; @@ -355,6 +365,8 @@ export class WhiteboardStore { this.updateScenesCount(room.state.sceneState.scenes.length); + this.updateBroadcasterMode(this.windowManager?.broadcaster); + if (this.room) { const windowManager = this.room.getInvisiblePlugin(WindowManager.kind) as WindowManager; this.updateWindowManager(windowManager); diff --git a/yarn.lock b/yarn.lock index d49584d0c02..aedb78fbbe6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1942,10 +1942,10 @@ resolved "https://registry.yarnpkg.com/@netless/video-js-plugin/-/video-js-plugin-0.3.7.tgz#6c1f174f20e8a93634e1770e7e535c1302bdf22b" integrity sha512-UG1t9464w1bZT9kzdhxj/K7R6jqI9sqYfqfUQJ2w9JRWsNibL6O16OC81iwBJT6nkGXEVN7z2pqHvNg1OhKppw== -"@netless/window-manager@^0.1.65": - version "0.1.65" - resolved "https://registry.npmjs.org/@netless/window-manager/-/window-manager-0.1.65.tgz#f47fe261e3337bd172d7b50d6d2b95ee614a8e49" - integrity sha512-6Szw1Ypdov5cqbmM5OZiQSKHKP4om9nfoZB5+43/daTHgWOrSFR9QS+fb7VZQHNMP2VnQkWH/l6iw+V/nPi8sQ== +"@netless/window-manager@^0.1.66-canary.1": + version "0.1.66-canary.1" + resolved "https://registry.npmjs.org/@netless/window-manager/-/window-manager-0.1.66-canary.1.tgz#7cea6d049b54cb03e0984b8ffa4e5aa2809742dd" + integrity sha512-uQMwk7lD7hxXL+c9xOJ7nv7b3RvTvNQCvrYbX1aQS1EIHj+1rb02jKHll4p+6lwBTiP4ouZHlXfT2lFwfNfbGA== dependencies: "@juggle/resize-observer" "^3.3.1" "@netless/app-docs-viewer" "^0.1.21"