feat(rtm): exit room when user login on other device. (#755)

netless-io · Jun 22, 2021 · b09b39d · b09b39d
1 parent 426d95a
commit b09b39d
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 7 deletions.
diff --git a/desktop/renderer-app/src/apiMiddleware/Rtm.ts b/desktop/renderer-app/src/apiMiddleware/Rtm.ts
@@ -83,6 +83,8 @@ export enum RTMessageType {
     RequestChannelStatus = "RequestChannelStatus",
     /** send room's status */
     ChannelStatus = "ChannelStatus",
+    /** user login on other device */
+    REMOTE_LOGIN = "REMOTE_LOGIN",
 }
 
 export type RTMEvents = {
@@ -123,6 +125,7 @@ export type RTMEvents = {
                 | ""}${NonDefaultUserProp | ""}`;
         };
     };
+    [RTMessageType.REMOTE_LOGIN]: void;
 };
 
 export interface RTMessage<U extends keyof RTMEvents = keyof RTMEvents> {
@@ -171,6 +174,9 @@ export class Rtm extends EventEmitter {
             await this.client.renewToken(this.token);
         });
         this.client.on("ConnectionStateChanged", (newState, reason) => {
+            if (reason === "REMOTE_LOGIN") {
+                this.emit(RTMessageType.REMOTE_LOGIN);
+            }
             console.log("RTM client state: ", newState, reason);
         });
         this.client.on("MessageFromPeer", (msg, senderId) => {

diff --git a/desktop/renderer-app/src/components/ClassRoom/RoomStatusStoppedModal.tsx b/desktop/renderer-app/src/components/ClassRoom/RoomStatusStoppedModal.tsx
@@ -6,21 +6,29 @@ import { RouteNameType, usePushHistory } from "../../utils/routes";
 
 export interface RoomStatusStoppedModalProps {
     isCreator: boolean;
+    isRemoteLogin: boolean;
     roomStatus: RoomStatus;
 }
 
 /**
  * Show an info modal on joiner side when room status becomes stopped
  */
 export const RoomStatusStoppedModal = observer<RoomStatusStoppedModalProps>(
-    function RoomStatusStoppedModal({ isCreator, roomStatus }) {
+    function RoomStatusStoppedModal({ isCreator, isRemoteLogin, roomStatus }) {
         const pushHistory = usePushHistory();
 
         const onExit = useCallback(() => {
             pushHistory(RouteNameType.HomePage);
         }, [pushHistory]);
 
-        return <RoomStoppedModal isCreator={isCreator} roomStatus={roomStatus} onExit={onExit} />;
+        return (
+            <RoomStoppedModal
+                isCreator={isCreator}
+                isRemoteLogin={isRemoteLogin}
+                roomStatus={roomStatus}
+                onExit={onExit}
+            />
+        );
     },
 );
 

diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -183,6 +183,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
             <RoomStatusStoppedModal
                 isCreator={classRoomStore.isCreator}
+                isRemoteLogin={classRoomStore.isRemoteLogin}
                 roomStatus={classRoomStore.roomStatus}
             />
         </div>

diff --git a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
@@ -139,6 +139,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
             <RoomStatusStoppedModal
                 isCreator={classRoomStore.isCreator}
+                isRemoteLogin={classRoomStore.isRemoteLogin}
                 roomStatus={classRoomStore.roomStatus}
             />
         </div>

diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -161,6 +161,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
             <RoomStatusStoppedModal
                 isCreator={classRoomStore.isCreator}
+                isRemoteLogin={classRoomStore.isRemoteLogin}
                 roomStatus={classRoomStore.roomStatus}
             />
         </div>

diff --git a/desktop/renderer-app/src/stores/ClassRoomStore.ts b/desktop/renderer-app/src/stores/ClassRoomStore.ts
@@ -68,6 +68,8 @@ export class ClassRoomStore {
     public isRecording = false;
     /** is RTC on */
     public isCalling = false;
+    /** is user login on other device */
+    public isRemoteLogin = false;
 
     public roomStatusLoading = RoomStatusLoadingType.Null;
 
@@ -148,6 +150,12 @@ export class ClassRoomStore {
                 });
             }
         });
+
+        this.rtm.once(RTMessageType.REMOTE_LOGIN, () => {
+            runInAction(() => {
+                this.isRemoteLogin = true;
+            });
+        });
     }
 
     public get ownerUUID(): string {

diff --git a/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/index.tsx b/packages/flat-components/src/components/ClassroomPage/RoomStoppedModal/index.tsx
@@ -5,6 +5,7 @@ import { RoomStatus } from "../../../types/room";
 
 export interface RoomStoppedModalProps {
     isCreator: boolean;
+    isRemoteLogin: boolean;
     roomStatus: RoomStatus;
     onExit: () => void;
 }
@@ -14,11 +15,22 @@ export interface RoomStoppedModalProps {
  *
  * **Note**: be sure to use `useCallback` when passing the `onExit` prop.
  */
-export const RoomStoppedModal: FC<RoomStoppedModalProps> = ({ isCreator, roomStatus, onExit }) => {
+export const RoomStoppedModal: FC<RoomStoppedModalProps> = ({
+    isCreator,
+    isRemoteLogin,
+    roomStatus,
+    onExit,
+}) => {
     const modalRef = useRef<ReturnType<typeof Modal.info>>();
     const [visible, setVisible] = useState(false);
     const { t } = useTranslation();
 
+    useEffect(() => {
+        if (isRemoteLogin) {
+            setVisible(true);
+        }
+    }, [isRemoteLogin]);
+
     useEffect(() => {
         if (roomStatus === RoomStatus.Stopped) {
             if (isCreator) {
@@ -34,12 +46,16 @@ export const RoomStoppedModal: FC<RoomStoppedModalProps> = ({ isCreator, roomSta
 
         if (visible) {
             let countdown = 5;
+
             modalRef.current = Modal.info({
-                title: t("the-room-has-ended-and-is-about-to-exit"),
+                title: isRemoteLogin
+                    ? t("you-have-entered-the-room-at-another-device")
+                    : t("the-room-has-ended-and-is-about-to-exit"),
                 okText: t("got-it-countdown", { countdown }),
                 onOk: onExit,
                 onCancel: onExit,
             });
+
             ticket = window.setInterval(() => {
                 modalRef.current?.update({
                     okText: t("got-it-countdown", { countdown: --countdown }),
@@ -55,7 +71,7 @@ export const RoomStoppedModal: FC<RoomStoppedModalProps> = ({ isCreator, roomSta
             window.clearInterval(ticket);
             modalRef.current?.destroy();
         };
-    }, [visible, onExit, t]);
+    }, [visible, onExit, t, isRemoteLogin]);
 
     return null;
 };
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -58,6 +58,7 @@
   "teacher-left-temporarily": "Teacher has left",
   "student-left-temporarily": "Student has left",
   "the-room-has-ended-and-is-about-to-exit": "The room has ended and is about to exit...",
+  "you-have-entered-the-room-at-another-device": "You have entered the room at another device",
   "class-picker-text": {
     "BigClass": "Suitable for 1 teacher for a large number of students",
     "OneToOne": "Suitable for 1 teacher and 1 student",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -41,6 +41,7 @@
   "current-status": "当前状态：",
   "current-mode": "当前模式：",
   "the-room-has-ended-and-is-about-to-exit": "房间已结束，即将退出...",
+  "you-have-entered-the-room-at-another-device": "你已在另外一台设备进入房间",
   "teacher-left-temporarily": "老师暂时离开",
   "student-left-temporarily": "学生暂时离开",
   "signal-text": "上行：{{up}}，下行：{{down}}",

diff --git a/web/flat-web/src/apiMiddleware/Rtm.ts b/web/flat-web/src/apiMiddleware/Rtm.ts
@@ -83,6 +83,8 @@ export enum RTMessageType {
     RequestChannelStatus = "RequestChannelStatus",
     /** send room's status */
     ChannelStatus = "ChannelStatus",
+    /** user login on other device */
+    REMOTE_LOGIN = "REMOTE_LOGIN",
 }
 
 export type RTMEvents = {
@@ -123,6 +125,7 @@ export type RTMEvents = {
                 | ""}${NonDefaultUserProp | ""}`;
         };
     };
+    [RTMessageType.REMOTE_LOGIN]: void;
 };
 
 export interface RTMessage<U extends keyof RTMEvents = keyof RTMEvents> {
@@ -171,6 +174,9 @@ export class Rtm extends EventEmitter<keyof RTMEvents> {
             await this.client.renewToken(this.token);
         });
         this.client.on("ConnectionStateChanged", (newState, reason) => {
+            if (reason === "REMOTE_LOGIN") {
+                this.emit(RTMessageType.REMOTE_LOGIN);
+            }
             console.log("RTM client state: ", newState, reason);
         });
         this.client.on("MessageFromPeer", (msg, senderId) => {

diff --git a/web/flat-web/src/components/ClassRoom/RoomStatusStoppedModal.tsx b/web/flat-web/src/components/ClassRoom/RoomStatusStoppedModal.tsx
@@ -6,21 +6,29 @@ import { RouteNameType, usePushHistory } from "../../utils/routes";
 
 export interface RoomStatusStoppedModalProps {
     isCreator: boolean;
+    isRemoteLogin: boolean;
     roomStatus: RoomStatus;
 }
 
 /**
  * Show an info modal on joiner side when room status becomes stopped
  */
 export const RoomStatusStoppedModal = observer<RoomStatusStoppedModalProps>(
-    function RoomStatusStoppedModal({ isCreator, roomStatus }) {
+    function RoomStatusStoppedModal({ isCreator, isRemoteLogin, roomStatus }) {
         const pushHistory = usePushHistory();
 
         const onExit = useCallback(() => {
             pushHistory(RouteNameType.HomePage);
         }, [pushHistory]);
 
-        return <RoomStoppedModal isCreator={isCreator} roomStatus={roomStatus} onExit={onExit} />;
+        return (
+            <RoomStoppedModal
+                isCreator={isCreator}
+                isRemoteLogin={isRemoteLogin}
+                roomStatus={roomStatus}
+                onExit={onExit}
+            />
+        );
     },
 );
 

diff --git a/web/flat-web/src/pages/BigClassPage/index.tsx b/web/flat-web/src/pages/BigClassPage/index.tsx
@@ -179,6 +179,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
             <RoomStatusStoppedModal
                 isCreator={classRoomStore.isCreator}
+                isRemoteLogin={classRoomStore.isRemoteLogin}
                 roomStatus={classRoomStore.roomStatus}
             />
         </div>

diff --git a/web/flat-web/src/pages/OneToOnePage/index.tsx b/web/flat-web/src/pages/OneToOnePage/index.tsx
@@ -134,6 +134,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
             <RoomStatusStoppedModal
                 isCreator={classRoomStore.isCreator}
+                isRemoteLogin={classRoomStore.isRemoteLogin}
                 roomStatus={classRoomStore.roomStatus}
             />
         </div>

diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -156,6 +156,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
             <RoomStatusStoppedModal
                 isCreator={classRoomStore.isCreator}
+                isRemoteLogin={classRoomStore.isRemoteLogin}
                 roomStatus={classRoomStore.roomStatus}
             />
         </div>

diff --git a/web/flat-web/src/stores/ClassRoomStore.ts b/web/flat-web/src/stores/ClassRoomStore.ts
@@ -67,6 +67,8 @@ export class ClassRoomStore {
     public isRecording = false;
     /** is RTC on */
     public isCalling = false;
+    /** is user login on other device */
+    public isRemoteLogin = false;
 
     public roomStatusLoading = RoomStatusLoadingType.Null;
 
@@ -148,6 +150,13 @@ export class ClassRoomStore {
                 });
             }
         });
+
+        this.rtm.once(RTMessageType.REMOTE_LOGIN, () => {
+            console.log("REMOTE_LOGIN");
+            runInAction(() => {
+                this.isRemoteLogin = true;
+            });
+        });
     }
 
     public get ownerUUID(): string {