feat(classroom): add record hint tips (#334)

netless-io · Mar 2, 2021 · 134e586 · 134e586
1 parent becf2b6
commit 134e586
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 15 deletions.
diff --git a/src/renderer-app/src/components/RecordHintTips/RecordHintTips.less b/src/renderer-app/src/components/RecordHintTips/RecordHintTips.less
@@ -0,0 +1,13 @@
+.record-hint-tips {
+    max-width: unset !important;
+
+    .ant-tooltip-inner {
+        border-radius: 5px;
+    }
+}
+
+.record-hint-tips-close {
+    margin-left: 0.5em;
+    color: currentColor !important;
+    opacity: 0.7;
+}
diff --git a/src/renderer-app/src/components/RecordHintTips/index.tsx b/src/renderer-app/src/components/RecordHintTips/index.tsx
@@ -0,0 +1,38 @@
+import "./RecordHintTips.less";
+
+import React, { useContext } from "react";
+import { observer } from "mobx-react-lite";
+import { CloseOutlined } from "@ant-design/icons";
+import { Button, Tooltip } from "antd";
+import { GlobalStoreContext } from "../StoreProvider";
+
+export interface RecordHintTipsProps {}
+
+export const RecordHintTips = observer<RecordHintTipsProps>(function RecordHintTips(props) {
+    const globalStore = useContext(GlobalStoreContext);
+
+    return (
+        <Tooltip
+            overlayClassName="record-hint-tips"
+            placement="bottom"
+            color="rgba(68, 78, 96, 0.72)"
+            visible={globalStore.isShowRecordHintTips}
+            title={
+                <div>
+                    点击「开始上课」才能录制并生成回放哦~
+                    <Button
+                        className="record-hint-tips-close"
+                        size="small"
+                        type="text"
+                        icon={<CloseOutlined />}
+                        onClick={globalStore.hideRecordHintTips}
+                    />
+                </div>
+            }
+        >
+            {props.children}
+        </Tooltip>
+    );
+});
+
+export default RecordHintTips;
diff --git a/src/renderer-app/src/pages/BigClassPage/index.tsx b/src/renderer-app/src/pages/BigClassPage/index.tsx
@@ -18,6 +18,7 @@ import { TopBarRoundBtn } from "../../components/TopBarRoundBtn";
 import { ExitRoomConfirm, ExitRoomConfirmType } from "../../components/ExitRoomConfirm";
 import { Whiteboard } from "../../components/Whiteboard";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
+import { RecordHintTips } from "../../components/RecordHintTips";
 import LoadingPage from "../../LoadingPage";
 import { RoomStatus, RoomType } from "../../apiMiddleware/flatServer/constants";
 import { useWhiteboardStore } from "../../stores/WhiteboardStore";
@@ -217,11 +218,13 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
             }
             default: {
                 return (
-                    <TopBarRoundBtn iconName="class-begin" onClick={classRoomStore.startClass}>
-                        {classRoomStore.roomStatusLoading === RoomStatusLoadingType.Starting
-                            ? "开始中..."
-                            : "开始上课"}
-                    </TopBarRoundBtn>
+                    <RecordHintTips>
+                        <TopBarRoundBtn iconName="class-begin" onClick={classRoomStore.startClass}>
+                            {classRoomStore.roomStatusLoading === RoomStatusLoadingType.Starting
+                                ? "开始中..."
+                                : "开始上课"}
+                        </TopBarRoundBtn>
+                    </RecordHintTips>
                 );
             }
         }

diff --git a/src/renderer-app/src/pages/OneToOnePage/index.tsx b/src/renderer-app/src/pages/OneToOnePage/index.tsx
@@ -17,6 +17,7 @@ import { TopBarRoundBtn } from "../../components/TopBarRoundBtn";
 import { ExitRoomConfirm, ExitRoomConfirmType } from "../../components/ExitRoomConfirm";
 import { Whiteboard } from "../../components/Whiteboard";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
+import { RecordHintTips } from "../../components/RecordHintTips";
 import LoadingPage from "../../LoadingPage";
 import { RoomStatus, RoomType } from "../../apiMiddleware/flatServer/constants";
 import { useWhiteboardStore } from "../../stores/WhiteboardStore";
@@ -166,11 +167,13 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
             }
             default: {
                 return (
-                    <TopBarRoundBtn iconName="class-begin" onClick={classRoomStore.startClass}>
-                        {classRoomStore.roomStatusLoading === RoomStatusLoadingType.Starting
-                            ? "开始中..."
-                            : "开始上课"}
-                    </TopBarRoundBtn>
+                    <RecordHintTips>
+                        <TopBarRoundBtn iconName="class-begin" onClick={classRoomStore.startClass}>
+                            {classRoomStore.roomStatusLoading === RoomStatusLoadingType.Starting
+                                ? "开始中..."
+                                : "开始上课"}
+                        </TopBarRoundBtn>
+                    </RecordHintTips>
                 );
             }
         }

diff --git a/src/renderer-app/src/pages/SmallClassPage/index.tsx b/src/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -17,6 +17,7 @@ import { RoomInfo } from "../../components/RoomInfo";
 import { Whiteboard } from "../../components/Whiteboard";
 import ExitRoomConfirm, { ExitRoomConfirmType } from "../../components/ExitRoomConfirm";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
+import { RecordHintTips } from "../../components/RecordHintTips";
 import LoadingPage from "../../LoadingPage";
 
 import { ipcAsyncByMainWindow } from "../../utils/ipc";
@@ -258,11 +259,13 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
             }
             default: {
                 return (
-                    <TopBarRoundBtn iconName="class-begin" onClick={classRoomStore.startClass}>
-                        {classRoomStore.roomStatusLoading === RoomStatusLoadingType.Starting
-                            ? "开始中..."
-                            : "开始上课"}
-                    </TopBarRoundBtn>
+                    <RecordHintTips>
+                        <TopBarRoundBtn iconName="class-begin" onClick={classRoomStore.startClass}>
+                            {classRoomStore.roomStatusLoading === RoomStatusLoadingType.Starting
+                                ? "开始中..."
+                                : "开始上课"}
+                        </TopBarRoundBtn>
+                    </RecordHintTips>
                 );
             }
         }

diff --git a/src/renderer-app/src/stores/GlobalStore.ts b/src/renderer-app/src/stores/GlobalStore.ts
@@ -14,6 +14,11 @@ export interface WechatInfo {
  * Properties in Global Store are persisted and shared globally.
  */
 export class GlobalStore {
+    /**
+     * Show tooltips for classroom record hints.
+     * Hide it permanently if user close the tooltip.
+     */
+    isShowRecordHintTips = true;
     wechat: WechatInfo | null = null;
     whiteboardRoomUUID: string | null = null;
     whiteboardRoomToken: string | null = null;
@@ -59,6 +64,10 @@ export class GlobalStore {
             }
         }
     };
+
+    hideRecordHintTips = (): void => {
+        this.isShowRecordHintTips = false;
+    };
 }
 
 export const globalStore = new GlobalStore();