fix(flat-pages): show room stopped modal on creator side

packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/RoomStoppedModal.stories.tsx

@@ -13,5 +13,5 @@ export default storyMeta;
 export const Overview: Story<RoomStoppedModalProps> = args => <RoomStoppedModal {...args} />;
 Overview.args = {
     roomStatus: RoomStatus.Stopped,
-    isCreator: false,
+    isExitConfirmModalVisible: false,
 };

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<RoomStoppedModalProps> = ({
-    isCreator,
     isRemoteLogin,
+    isExitConfirmModalVisible,
     roomStatus,
     onExit,
 }) => {
@@ -33,13 +33,13 @@ export const RoomStoppedModal: FC<RoomStoppedModalProps> = ({
 
     useEffect(() => {
         if (roomStatus === RoomStatus.Stopped) {
-            if (isCreator) {
+            if (isExitConfirmModalVisible) {
                 onExit();
             } else {
                 setVisible(true);
             }
         }
-    }, [roomStatus, isCreator, onExit]);
+    }, [roomStatus]);
 
     useEffect(() => {
         let ticket: number | undefined;

packages/flat-pages/src/BigClassPage/index.tsx

@@ -94,7 +94,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                             {...exitConfirmModalProps}
                         />
                         <RoomStatusStoppedModal
-                            isCreator={classroomStore.isCreator}
+                            isExitConfirmModalVisible={exitConfirmModalProps.visible}
                             isRemoteLogin={classroomStore.isRemoteLogin}
                             roomStatus={classroomStore.roomStatus}
                         />

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 () => {

packages/flat-pages/src/OneToOnePage/index.tsx

@@ -88,7 +88,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                             {...exitConfirmModalProps}
                         />
                         <RoomStatusStoppedModal
-                            isCreator={classroomStore.isCreator}
+                            isExitConfirmModalVisible={exitConfirmModalProps.visible}
                             isRemoteLogin={classroomStore.isRemoteLogin}
                             roomStatus={classroomStore.roomStatus}
                         />

packages/flat-pages/src/SmallClassPage/index.tsx

@@ -111,7 +111,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                             {...exitConfirmModalProps}
                         />
                         <RoomStatusStoppedModal
-                            isCreator={classroomStore.isCreator}
+                            isExitConfirmModalVisible={exitConfirmModalProps.visible}
                             isRemoteLogin={classroomStore.isRemoteLogin}
                             roomStatus={classroomStore.roomStatus}
                         />

packages/flat-pages/src/components/ClassRoom/RoomStatusStoppedModal.tsx

@@ -5,16 +5,16 @@ import { RoomStatus } from "@netless/flat-server-api";
 import { RouteNameType, usePushHistory } from "../../utils/routes";
 
 export interface RoomStatusStoppedModalProps {
-    isCreator: boolean;
     isRemoteLogin: boolean;
+    isExitConfirmModalVisible: boolean;
     roomStatus: RoomStatus;
 }
 
 /**
  * Show an info modal on joiner side when room status becomes stopped
  */
 export const RoomStatusStoppedModal = observer<RoomStatusStoppedModalProps>(
-    function RoomStatusStoppedModal({ isCreator, isRemoteLogin, roomStatus }) {
+    function RoomStatusStoppedModal({ isRemoteLogin, isExitConfirmModalVisible, roomStatus }) {
         const pushHistory = usePushHistory();
 
         const onExit = useCallback(() => {
@@ -23,7 +23,7 @@ export const RoomStatusStoppedModal = observer<RoomStatusStoppedModalProps>(
 
         return (
             <RoomStoppedModal
-                isCreator={isCreator}
+                isExitConfirmModalVisible={isExitConfirmModalVisible}
                 isRemoteLogin={isRemoteLogin}
                 roomStatus={roomStatus}
                 onExit={onExit}

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;

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 => {

packages/flat-stores/src/whiteboard-store/index.ts

@@ -85,11 +85,9 @@ export class WhiteboardStore {
                 // Room creator do not need to listen to this event
                 // as they are in control of exiting room.
                 // Listening to this may interrupt the stop room process.
-                if (!this.isCreator) {
-                    runInAction(() => {
-                        this.isKicked = true;
-                    });
-                }
+                runInAction(() => {
+                    this.isKicked = true;
+                });
             }),
             config.whiteboard.$Val.phase$.subscribe(() => {
                 const room = this.getRoom();

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: {