From cd78ddbb5fcb4c96cb3c582d62db2476beb1624b Mon Sep 17 00:00:00 2001 From: hyrious Date: Thu, 11 Jan 2024 16:12:37 +0800 Subject: [PATCH 1/3] fix(flat-pages): show room stopped modal on creator side Previously, the creator controls exiting room so he doesn't need this modal. However now we have back-end ban room, so the logic is changed as: when the "exit confirm" modal is not visible then show the room stopped modal even in the creator side. - fix pmi: always refresh pmi room list once in the homepage --- .../ClassroomPage/RoomStoppedModal/index.tsx | 8 ++++---- packages/flat-pages/src/BigClassPage/index.tsx | 2 +- packages/flat-pages/src/HomePage/index.tsx | 11 ++++++++++- packages/flat-pages/src/OneToOnePage/index.tsx | 2 +- packages/flat-pages/src/SmallClassPage/index.tsx | 2 +- .../components/ClassRoom/RoomStatusStoppedModal.tsx | 6 +++--- packages/flat-stores/src/whiteboard-store/index.ts | 8 +++----- 7 files changed, 23 insertions(+), 16 deletions(-) diff --git a/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/index.tsx b/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/index.tsx index d884b06a2ea..a38a178f7cb 100644 --- a/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/index.tsx +++ b/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/index.tsx @@ -4,8 +4,8 @@ import { useTranslate } from "@netless/flat-i18n"; import { RoomStatus } from "../../../types/room"; export interface RoomStoppedModalProps { - isCreator: boolean; isRemoteLogin: boolean; + isExitConfirmModalVisible: boolean; roomStatus: RoomStatus; onExit: () => void; } @@ -16,8 +16,8 @@ export interface RoomStoppedModalProps { * **Note**: be sure to use `useCallback` when passing the `onExit` prop. */ export const RoomStoppedModal: FC = ({ - isCreator, isRemoteLogin, + isExitConfirmModalVisible, roomStatus, onExit, }) => { @@ -33,13 +33,13 @@ export const RoomStoppedModal: FC = ({ useEffect(() => { if (roomStatus === RoomStatus.Stopped) { - if (isCreator) { + if (isExitConfirmModalVisible) { onExit(); } else { setVisible(true); } } - }, [roomStatus, isCreator, onExit]); + }, [roomStatus]); useEffect(() => { let ticket: number | undefined; diff --git a/packages/flat-pages/src/BigClassPage/index.tsx b/packages/flat-pages/src/BigClassPage/index.tsx index 5efc8268c38..d4790112e9a 100644 --- a/packages/flat-pages/src/BigClassPage/index.tsx +++ b/packages/flat-pages/src/BigClassPage/index.tsx @@ -94,7 +94,7 @@ export const BigClassPage = withClassroomStore( {...exitConfirmModalProps} /> diff --git a/packages/flat-pages/src/HomePage/index.tsx b/packages/flat-pages/src/HomePage/index.tsx index 5005b2e3271..2b38e215cc1 100644 --- a/packages/flat-pages/src/HomePage/index.tsx +++ b/packages/flat-pages/src/HomePage/index.tsx @@ -8,13 +8,18 @@ import { MainRoomMenu } from "./MainRoomMenu"; import { MainRoomListPanel } from "./MainRoomListPanel"; import { MainRoomHistoryPanel } from "./MainRoomHistoryPanel"; import { useLoginCheck } from "../utils/use-login-check"; -import { PageStoreContext, RoomStoreContext } from "../components/StoreProvider"; +import { + GlobalStoreContext, + PageStoreContext, + RoomStoreContext, +} from "../components/StoreProvider"; import { AppUpgradeModal } from "../components/AppUpgradeModal"; export const HomePage = observer(function HomePage() { const sp = useSafePromise(); const pageStore = useContext(PageStoreContext); const roomStore = useContext(RoomStoreContext); + const globalStore = useContext(GlobalStoreContext); const [activeTab, setActiveTab] = useState<"all" | "today" | "periodic">("all"); @@ -44,6 +49,10 @@ export const HomePage = observer(function HomePage() { void refreshRooms(); + // Refresh PMI room list in case of PMI room is created or deleted in other sessions + // this only happen once in the homepage as there's [create room] button + void globalStore.updatePmiRoomList(); + const ticket = window.setInterval(refreshRooms, 30 * 1000); return () => { diff --git a/packages/flat-pages/src/OneToOnePage/index.tsx b/packages/flat-pages/src/OneToOnePage/index.tsx index 07bc7994df2..ad9f9fedf75 100644 --- a/packages/flat-pages/src/OneToOnePage/index.tsx +++ b/packages/flat-pages/src/OneToOnePage/index.tsx @@ -88,7 +88,7 @@ export const OneToOnePage = withClassroomStore( {...exitConfirmModalProps} /> diff --git a/packages/flat-pages/src/SmallClassPage/index.tsx b/packages/flat-pages/src/SmallClassPage/index.tsx index ec422f0e5e7..2f80b37f7d8 100644 --- a/packages/flat-pages/src/SmallClassPage/index.tsx +++ b/packages/flat-pages/src/SmallClassPage/index.tsx @@ -111,7 +111,7 @@ export const SmallClassPage = withClassroomStore( {...exitConfirmModalProps} /> diff --git a/packages/flat-pages/src/components/ClassRoom/RoomStatusStoppedModal.tsx b/packages/flat-pages/src/components/ClassRoom/RoomStatusStoppedModal.tsx index d4e69f8fdab..ab09c611ed5 100644 --- a/packages/flat-pages/src/components/ClassRoom/RoomStatusStoppedModal.tsx +++ b/packages/flat-pages/src/components/ClassRoom/RoomStatusStoppedModal.tsx @@ -5,8 +5,8 @@ import { RoomStatus } from "@netless/flat-server-api"; import { RouteNameType, usePushHistory } from "../../utils/routes"; export interface RoomStatusStoppedModalProps { - isCreator: boolean; isRemoteLogin: boolean; + isExitConfirmModalVisible: boolean; roomStatus: RoomStatus; } @@ -14,7 +14,7 @@ export interface RoomStatusStoppedModalProps { * Show an info modal on joiner side when room status becomes stopped */ export const RoomStatusStoppedModal = observer( - function RoomStatusStoppedModal({ isCreator, isRemoteLogin, roomStatus }) { + function RoomStatusStoppedModal({ isRemoteLogin, isExitConfirmModalVisible, roomStatus }) { const pushHistory = usePushHistory(); const onExit = useCallback(() => { @@ -23,7 +23,7 @@ export const RoomStatusStoppedModal = observer( return ( { - this.isKicked = true; - }); - } + runInAction(() => { + this.isKicked = true; + }); }), config.whiteboard.$Val.phase$.subscribe(() => { const room = this.getRoom(); From a8dc323e34ada1cb49fb57baa3a1df70003ddc63 Mon Sep 17 00:00:00 2001 From: hyrious Date: Thu, 11 Jan 2024 16:15:44 +0800 Subject: [PATCH 2/3] chore: fix storybook --- .../ClassroomPage/RoomStoppedModal/RoomStoppedModal.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/RoomStoppedModal.stories.tsx b/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/RoomStoppedModal.stories.tsx index 77cc96fa5e8..86767b4f497 100644 --- a/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/RoomStoppedModal.stories.tsx +++ b/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/RoomStoppedModal.stories.tsx @@ -13,5 +13,5 @@ export default storyMeta; export const Overview: Story = args => ; Overview.args = { roomStatus: RoomStatus.Stopped, - isCreator: false, + isExitConfirmModalVisible: false, }; From 6fbeed7945a18d48fb020a1270774de3b7d9a2fc Mon Sep 17 00:00:00 2001 From: hyrious Date: Thu, 11 Jan 2024 16:48:27 +0800 Subject: [PATCH 3/3] refactor(flat-services): show admin message as info popup --- .../src/services/text-chat/events.ts | 7 +++++++ .../flat-stores/src/classroom-store/index.ts | 6 ++++++ service-providers/agora-rtm/src/rtm.ts | 17 ++++++++++------- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/flat-services/src/services/text-chat/events.ts b/packages/flat-services/src/services/text-chat/events.ts index ba06ec17b92..c70ea25d0ec 100644 --- a/packages/flat-services/src/services/text-chat/events.ts +++ b/packages/flat-services/src/services/text-chat/events.ts @@ -10,6 +10,13 @@ export interface IServiceTextChatEventData { text: string; senderID: string; }; + "admin-message": { + roomUUID: string; + uuid: string; + timestamp: number; + text: string; + senderID: string; + }; "ban": { roomUUID: string; uuid: string; diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts index eb9bd49bd2e..81d2bfc234d 100644 --- a/packages/flat-stores/src/classroom-store/index.ts +++ b/packages/flat-stores/src/classroom-store/index.ts @@ -216,6 +216,12 @@ export class ClassroomStore { ), ); + this.sideEffect.addDisposer( + this.rtm.events.on("admin-message", ({ text }) => { + void message.info(text); + }), + ); + if (!this.isCreator) { this.sideEffect.addDisposer( this.rtm.events.on("update-room-status", event => { diff --git a/service-providers/agora-rtm/src/rtm.ts b/service-providers/agora-rtm/src/rtm.ts index fc172ed0296..78729b7e5a1 100644 --- a/service-providers/agora-rtm/src/rtm.ts +++ b/service-providers/agora-rtm/src/rtm.ts @@ -223,13 +223,16 @@ export class AgoraRTM extends IServiceTextChat { const handler = (msg: RtmMessage, senderID: string): void => { switch (msg.messageType) { case RtmEngine.MessageType.TEXT: { - this.events.emit("room-message", { - uuid: uuidv4(), - roomUUID, - text: msg.text, - senderID, - timestamp: Date.now(), - }); + this.events.emit( + senderID === "flat-server" ? "admin-message" : "room-message", + { + uuid: uuidv4(), + roomUUID, + text: msg.text, + senderID, + timestamp: Date.now(), + }, + ); break; } case RtmEngine.MessageType.RAW: {