Skip to content

Commit

Permalink
refactor(whiteboard): restore feature of the room vision control (#982)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cheerego7
Cheerego7 committed Sep 28, 2021
1 parent 3b3938f commit 262e039
Show file tree
Hide file tree
Showing 11 changed files with 136 additions and 124 deletions.
2 changes: 1 addition & 1 deletion desktop/renderer-app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
38 changes: 19 additions & 19 deletions desktop/renderer-app/src/pages/BigClassPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -308,14 +308,17 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
/>
)}

{/* {whiteboardStore.isWritable && (
{whiteboardStore.isWritable && (
<TopBarRightBtn
title="Vision control"
icon="follow"
active={whiteboardStore.viewMode === ViewMode.Broadcaster}
onClick={handleRoomController}
icon={
whiteboardStore.isBroadcasterMode === undefined
? "follow"
: "follow-active"
}
onClick={toggleRoomVisionController}
/>
)} */}
)}

{/* <TopBarRightBtn
title="Docs center"
Expand Down Expand Up @@ -404,19 +407,16 @@ export const BigClassPage = observer<BigClassPageProps>(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);
Expand Down
38 changes: 19 additions & 19 deletions desktop/renderer-app/src/pages/OneToOnePage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -266,14 +266,17 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
/>
)}

{/* {whiteboardStore.isWritable && (
{whiteboardStore.isWritable && (
<TopBarRightBtn
title="Vision control"
icon="follow"
active={whiteboardStore.viewMode === ViewMode.Broadcaster}
onClick={handleRoomController}
icon={
whiteboardStore.isBroadcasterMode === undefined
? "follow"
: "follow-active"
}
onClick={toggleRoomVisionController}
/>
)} */}
)}

{/* <TopBarRightBtn
title="Docs center"
Expand Down Expand Up @@ -338,19 +341,16 @@ export const OneToOnePage = observer<OneToOnePageProps>(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);
Expand Down
38 changes: 19 additions & 19 deletions desktop/renderer-app/src/pages/SmallClassPage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -334,14 +334,17 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
/>
)}

{/* {whiteboardStore.isWritable && (
{whiteboardStore.isWritable && (
<TopBarRightBtn
title="Vision control"
icon="follow"
active={whiteboardStore.viewMode === ViewMode.Broadcaster}
onClick={handleRoomController}
icon={
whiteboardStore.isBroadcasterMode === undefined
? "follow"
: "follow-active"
}
onClick={toggleRoomVisionController}
/>
)} */}
)}

{/* <TopBarRightBtn
title="Docs center"
Expand Down Expand Up @@ -399,19 +402,16 @@ export const SmallClassPage = observer<SmallClassPageProps>(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);
Expand Down
12 changes: 12 additions & 0 deletions desktop/renderer-app/src/stores/WhiteboardStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
};
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion web/flat-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
40 changes: 17 additions & 23 deletions web/flat-web/src/pages/BigClassPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -294,20 +294,17 @@ export const BigClassPage = observer<BigClassPageProps>(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 && (
<TopBarRightBtn
title="Vision control"
icon={
whiteboardStore.viewMode === ViewMode.Broadcaster
? "follow-active"
: "follow"
whiteboardStore.isBroadcasterMode === undefined
? "follow"
: "follow-active"
}
onClick={handleRoomController}
onClick={toggleRoomVisionController}
/>
)} */}
)}

{/* <TopBarRightBtn
title="Docs center"
Expand Down Expand Up @@ -395,19 +392,16 @@ export const BigClassPage = observer<BigClassPageProps>(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();
Expand Down
33 changes: 15 additions & 18 deletions web/flat-web/src/pages/OneToOnePage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -251,17 +251,17 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
/>
)}

{/* {whiteboardStore.isWritable && (
{whiteboardStore.isWritable && (
<TopBarRightBtn
title="Vision control"
icon={
whiteboardStore.viewMode === ViewMode.Broadcaster
whiteboardStore.isBroadcasterMode === undefined
? "follow-active"
: "follow"
}
onClick={handleRoomController}
onClick={toggleRoomVisionController}
/>
)} */}
)}

{/* <TopBarRightBtn
title="Docs center"
Expand Down Expand Up @@ -325,19 +325,16 @@ export const OneToOnePage = observer<OneToOnePageProps>(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);
Expand Down
Loading

0 comments on commit 262e039

Please sign in to comment.