feat(ui): add ClassRoom Timer

desktop/renderer-app/src/pages/BigClassPage/index.tsx

@@ -9,14 +9,15 @@ import {
     TopBarDivider,
     LoadingPage,
     CloudRecordBtn,
+    Timer,
 } from "flat-components";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 import { RoomPhase } from "white-web-sdk";
 import { useTranslation } from "react-i18next";
 import { AgoraCloudRecordBackgroundConfigItem } from "../../api-middleware/flatServer/agora";
-import { RoomStatus, RoomType } from "../../api-middleware/flatServer/constants";
+import { RoomStatus } from "../../api-middleware/flatServer/constants";
 import { RtcChannelType } from "../../api-middleware/rtc";
 import { ChatPanel } from "../../components/ChatPanel";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
@@ -227,8 +228,18 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
         return (
             <>
                 <NetworkStatus networkQuality={classRoomStore.networkQuality} />
-                {!classRoomStore.isCreator && (
-                    <RoomInfo roomStatus={classRoomStore.roomStatus} roomType={RoomType.BigClass} />
+                {classRoomStore.isCreator ? (
+                    classRoomStore.roomInfo?.beginTime && (
+                        <Timer
+                            beginTime={classRoomStore.roomInfo.beginTime}
+                            roomStatus={classRoomStore.roomStatus}
+                        />
+                    )
+                ) : (
+                    <RoomInfo
+                        roomStatus={classRoomStore.roomStatus}
+                        roomType={classRoomStore.roomInfo?.roomType}
+                    />
                 )}
             </>
         );

desktop/renderer-app/src/pages/OneToOnePage/index.tsx

@@ -12,6 +12,7 @@ import {
     TopBarDivider,
     LoadingPage,
     CloudRecordBtn,
+    Timer,
 } from "flat-components";
 
 import InviteButton from "../../components/InviteButton";
@@ -26,7 +27,7 @@ import {
 } from "../../components/ExitRoomConfirm";
 import { Whiteboard } from "../../components/Whiteboard";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
-import { RoomStatus, RoomType } from "../../api-middleware/flatServer/constants";
+import { RoomStatus } from "../../api-middleware/flatServer/constants";
 import { RecordingConfig, useClassRoomStore } from "../../stores/class-room-store";
 import { RtcChannelType } from "../../api-middleware/rtc";
 import { useComputed } from "../../utils/mobx";
@@ -185,8 +186,18 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
         return (
             <>
                 <NetworkStatus networkQuality={classRoomStore.networkQuality} />
-                {!classRoomStore.isCreator && (
-                    <RoomInfo roomStatus={classRoomStore.roomStatus} roomType={RoomType.OneToOne} />
+                {classRoomStore.isCreator ? (
+                    classRoomStore.roomInfo?.beginTime && (
+                        <Timer
+                            beginTime={classRoomStore.roomInfo.beginTime}
+                            roomStatus={classRoomStore.roomStatus}
+                        />
+                    )
+                ) : (
+                    <RoomInfo
+                        roomStatus={classRoomStore.roomStatus}
+                        roomType={classRoomStore.roomInfo?.roomType}
+                    />
                 )}
             </>
         );

desktop/renderer-app/src/pages/SmallClassPage/index.tsx

@@ -13,6 +13,7 @@ import {
     TopBarDivider,
     LoadingPage,
     CloudRecordBtn,
+    Timer,
 } from "flat-components";
 
 import InviteButton from "../../components/InviteButton";
@@ -223,7 +224,14 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
         return (
             <>
                 <NetworkStatus networkQuality={classRoomStore.networkQuality} />
-                {!classRoomStore.isCreator && (
+                {classRoomStore.isCreator ? (
+                    classRoomStore.roomInfo?.beginTime && (
+                        <Timer
+                            beginTime={classRoomStore.roomInfo.beginTime}
+                            roomStatus={classRoomStore.roomStatus}
+                        />
+                    )
+                ) : (
                     <RoomInfo
                         roomStatus={classRoomStore.roomStatus}
                         roomType={classRoomStore.roomInfo?.roomType}

packages/flat-components/src/components/ClassroomPage/Timer/index.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import "./style.less";
+import { useIsUnMounted } from "../../../utils/hooks";
+import { RoomStatus } from "../../../types/room";
+import { intervalToDuration } from "date-fns/fp";
+
+export type TimerProps = {
+    roomStatus: RoomStatus;
+    beginTime: number;
+};
+
+const paddingZero = (number: number): string => {
+    return String(number).padStart(2, "0");
+};
+
+const useClockTick = (beginTime: number, roomStatus: RoomStatus): string => {
+    const [timestamp, updateTimestamp] = useState<number>(Date.now());
+    const unmounted = useIsUnMounted();
+
+    useEffect(() => {
+        if (unmounted.current) {
+            return;
+        }
+
+        if (roomStatus === RoomStatus.Started) {
+            updateTimestamp(Date.now());
+        }
+    }, [roomStatus, timestamp, unmounted]);
+
+    return useMemo(() => {
+        const {
+            days = 0,
+            hours = 0,
+            minutes = 0,
+            seconds = 0,
+        } = intervalToDuration({
+            start: beginTime,
+            end: timestamp,
+        });
+
+        const minutesAndSeconds = `${paddingZero(minutes)}:${paddingZero(seconds)}`;
+        const dayHours = hours + days * 24;
+
+        return dayHours > 0 ? `${paddingZero(dayHours)}:${minutesAndSeconds}` : minutesAndSeconds;
+    }, [beginTime, timestamp]);
+};
+
+export const Timer: React.FC<TimerProps> = ({ roomStatus = RoomStatus.Paused, beginTime }) => {
+    const timing = useClockTick(beginTime, roomStatus);
+
+    const { t } = useTranslation();
+
+    return (
+        <span className="timer-bar">
+            <span className={`timer-${roomStatus}`}>{t("room-started")}</span>
+            <span>{timing}</span>
+        </span>
+    );
+};

packages/flat-components/src/components/ClassroomPage/Timer/style.less

@@ -0,0 +1,5 @@
+.timer-bar {
+    color: #7a7b7c;
+    font-size: 12px;
+    margin: 0 8px;
+}

packages/flat-components/src/components/ClassroomPage/Timer/timer.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { RoomStatus } from "../../../types/room";
+import { Timer, TimerProps } from ".";
+
+const storyMeta: Meta = {
+    title: "ClassroomPage/Timer",
+    component: Timer,
+};
+
+export default storyMeta;
+
+export const Overview: Story<TimerProps> = args => {
+    return <Timer {...args} />;
+};
+
+Overview.args = {
+    roomStatus: RoomStatus.Paused,
+    beginTime: Date.now(),
+};

packages/flat-components/src/index.ts

@@ -20,3 +20,4 @@ export * from "./components/RoomStatusElement";
 export * from "./containers/CloudStorageContainer";
 export * from "./components/DeviceTestPage";
 export * from "./components/ClassroomPage/CloudRecordBtn";
+export * from "./components/ClassroomPage/Timer";

packages/flat-i18n/locales/en.json

@@ -390,5 +390,6 @@
   "user-guide-button": "Check it out now",
   "start-recording": "Start recording",
   "stop-recording": "Stop recording",
-  "open-in-browser": "Open in Browser"
+  "open-in-browser": "Open in Browser",
+  "room-started": "Started:"
 }

packages/flat-i18n/locales/zh-CN.json

@@ -390,5 +390,6 @@
   "user-guide-button": "立即查看",
   "start-recording": "开始录制",
   "stop-recording": "停止录制",
-  "open-in-browser": "请在浏览器中打开"
+  "open-in-browser": "请在浏览器中打开",
+  "room-started": "已上课："
 }

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

@@ -4,6 +4,7 @@ import { message } from "antd";
 import classNames from "classnames";
 import {
     CloudRecordBtn,
+    Timer,
     LoadingPage,
     NetworkStatus,
     RoomInfo,
@@ -16,7 +17,7 @@ import { useParams } from "react-router-dom";
 import { RoomPhase } from "white-web-sdk";
 import { useTranslation } from "react-i18next";
 import { AgoraCloudRecordBackgroundConfigItem } from "../../api-middleware/flatServer/agora";
-import { RoomStatus, RoomType } from "../../api-middleware/flatServer/constants";
+import { RoomStatus } from "../../api-middleware/flatServer/constants";
 import { RtcChannelType } from "../../api-middleware/rtc/room";
 import { ChatPanel } from "../../components/ChatPanel";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
@@ -201,8 +202,18 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
         return (
             <>
                 <NetworkStatus networkQuality={classRoomStore.networkQuality} />
-                {!classRoomStore.isCreator && (
-                    <RoomInfo roomStatus={classRoomStore.roomStatus} roomType={RoomType.BigClass} />
+                {classRoomStore.isCreator ? (
+                    classRoomStore.roomInfo?.beginTime && (
+                        <Timer
+                            beginTime={classRoomStore.roomInfo.beginTime}
+                            roomStatus={classRoomStore.roomStatus}
+                        />
+                    )
+                ) : (
+                    <RoomInfo
+                        roomStatus={classRoomStore.roomStatus}
+                        roomType={classRoomStore.roomInfo?.roomType}
+                    />
                 )}
             </>
         );

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

@@ -11,6 +11,7 @@ import {
     TopBar,
     TopBarDivider,
     LoadingPage,
+    Timer,
     CloudRecordBtn,
 } from "flat-components";
 
@@ -26,7 +27,7 @@ import {
 } from "../../components/ExitRoomConfirm";
 import { Whiteboard } from "../../components/Whiteboard";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
-import { RoomStatus, RoomType } from "../../api-middleware/flatServer/constants";
+import { RoomStatus } from "../../api-middleware/flatServer/constants";
 import { RecordingConfig, useClassRoomStore } from "../../stores/class-room-store";
 import { RtcChannelType } from "../../api-middleware/rtc/room";
 import { useComputed } from "../../utils/mobx";
@@ -161,8 +162,18 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
         return (
             <>
                 <NetworkStatus networkQuality={classRoomStore.networkQuality} />
-                {!classRoomStore.isCreator && (
-                    <RoomInfo roomStatus={classRoomStore.roomStatus} roomType={RoomType.OneToOne} />
+                {classRoomStore.isCreator ? (
+                    classRoomStore.roomInfo?.beginTime && (
+                        <Timer
+                            beginTime={classRoomStore.roomInfo.beginTime}
+                            roomStatus={classRoomStore.roomStatus}
+                        />
+                    )
+                ) : (
+                    <RoomInfo
+                        roomStatus={classRoomStore.roomStatus}
+                        roomType={classRoomStore.roomInfo?.roomType}
+                    />
                 )}
             </>
         );

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

@@ -9,6 +9,7 @@ import {
     TopBar,
     TopBarDivider,
     LoadingPage,
+    Timer,
     CloudRecordBtn,
 } from "flat-components";
 
@@ -204,7 +205,14 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
         return (
             <>
                 <NetworkStatus networkQuality={classRoomStore.networkQuality} />
-                {!classRoomStore.isCreator && (
+                {classRoomStore.isCreator ? (
+                    classRoomStore.roomInfo?.beginTime && (
+                        <Timer
+                            beginTime={classRoomStore.roomInfo.beginTime}
+                            roomStatus={classRoomStore.roomStatus}
+                        />
+                    )
+                ) : (
                     <RoomInfo
                         roomStatus={classRoomStore.roomStatus}
                         roomType={classRoomStore.roomInfo?.roomType}