refactor(flat-components): update styles (#2112)

- always update server config on init - slightly change the "join early" info - add "room will be closed" message in room - remove mobx configure (we are using only one mobx now) - update styles of the count up/down timer in room
netless-io · Jan 30, 2024 · 9fb5b5d · 9fb5b5d
1 parent 0c222d4
commit 9fb5b5d
Show file tree

Hide file tree

Showing 19 changed files with 210 additions and 130 deletions.
diff --git a/desktop/renderer-app/src/stores/utils.ts b/desktop/renderer-app/src/stores/utils.ts
diff --git a/desktop/renderer-app/src/tasks/init-region-configs.ts b/desktop/renderer-app/src/tasks/init-region-configs.ts
@@ -5,9 +5,7 @@ import { errorTips } from "flat-components";
 export const initRegionConfigs = async (): Promise<void> => {
     try {
         const regionConfigs = await getServerRegionConfigs();
-        if (regionConfigs.hash !== globalStore.configHash) {
-            globalStore.updateServerRegionConfig(regionConfigs);
-        }
+        globalStore.updateServerRegionConfig(regionConfigs);
     } catch (error) {
         globalStore.updateServerRegionConfig(null);
         console.error(error);

diff --git a/desktop/renderer-app/src/tasks/init-ui.tsx b/desktop/renderer-app/src/tasks/init-ui.tsx
@@ -15,12 +15,6 @@ import { windowsBtnContext } from "../components/WindowsBtnContext";
 import { runtime } from "../utils/runtime";
 import { autoUpdate } from "../utils/auto-update";
 
-/** configure right after import */
-import { configure } from "mobx";
-configure({
-    isolateGlobalState: true,
-});
-
 const App: React.FC = () => {
     const language = useLanguage();
 

diff --git a/desktop/renderer-app/src/tasks/init-url-protocol.ts b/desktop/renderer-app/src/tasks/init-url-protocol.ts
@@ -1,11 +1,6 @@
 import { ipcReceive } from "../utils/ipc";
-import { configure } from "mobx";
 import { urlProtocolStore } from "../stores/url-protocol-store";
 
-configure({
-    isolateGlobalState: true,
-});
-
 const requestJoinRoom = (): void => {
     ipcReceive("request-join-room", ({ roomUUID }) => {
         urlProtocolStore.updateToJoinRoomUUID(roomUUID);

diff --git a/packages/flat-components/src/components/ClassroomPage/Timer/index.tsx b/packages/flat-components/src/components/ClassroomPage/Timer/index.tsx
@@ -4,73 +4,78 @@ import React, { useState, useEffect, useMemo } from "react";
 import { useTranslate } from "@netless/flat-i18n";
 import { useIsUnMounted } from "../../../utils/hooks";
 import { RoomStatus } from "../../../types/room";
-import { intervalToDuration } from "date-fns/fp";
+import { intervalToDuration } from "date-fns";
 
 export type TimerProps = {
     roomStatus: RoomStatus;
     beginTime: number;
+    // Will show 'left time' when expireAt is set in the last 5 minutes
+    // 0 or undefined means no expire time
+    expireAt?: number;
 };
 
+const enum TimerStatus {
+    Prepare, // 0, show a count down time with normal color
+    Started, // 1, show a count up time in success color
+    WillEnd, // 2, show a count down time in warning color
+    Ended, // 3, show a count up time in error color
+}
+
 const paddingHexCode = (number: number): string => {
     return String(number).padStart(2, "0");
 };
 
-const useClockTick = (beginTime: number, roomStatus: RoomStatus): string => {
+const formatInterval = (start: number, end: number): string => {
+    const { days = 0, hours = 0, minutes = 0, seconds = 0 } = intervalToDuration({ start, end });
+
+    const minutesAndSeconds = `${paddingHexCode(minutes)}:${paddingHexCode(seconds)}`;
+    const dayHours = hours + days * 24;
+
+    return dayHours > 0 ? `${paddingHexCode(dayHours)}:${minutesAndSeconds}` : minutesAndSeconds;
+};
+
+const useClockTick = (beginTime: number, expireAt: number | undefined): [TimerStatus, string] => {
     const [timestamp, updateTimestamp] = useState<number>(Date.now());
     const unmounted = useIsUnMounted();
 
     useEffect(() => {
-        let timer = NaN;
+        let timer = 0;
 
         if (unmounted.current) {
             return;
         }
 
-        if (roomStatus === RoomStatus.Started) {
-            const startTimer = (): void => {
-                updateTimestamp(Math.floor(Date.now() / 1000) * 1000);
-                timer = window.requestAnimationFrame(startTimer);
-            };
-            startTimer();
-        }
+        const startTimer = (): void => {
+            updateTimestamp(Math.floor(Date.now() / 1000) * 1000);
+            timer = window.requestAnimationFrame(startTimer);
+        };
+        startTimer();
 
         return () => {
             window.cancelAnimationFrame(timer);
         };
-    }, [roomStatus, unmounted]);
+    }, [unmounted]);
 
     return useMemo(() => {
         if (beginTime > timestamp) {
-            return "00:00";
+            return [TimerStatus.Prepare, formatInterval(timestamp, beginTime)];
+        } else if (expireAt && expireAt - timestamp < 5 * 60_000) {
+            return [TimerStatus.WillEnd, formatInterval(timestamp, expireAt)];
+        } else if (expireAt && expireAt < timestamp) {
+            return [TimerStatus.Ended, formatInterval(expireAt, timestamp)];
+        } else {
+            return [TimerStatus.Started, formatInterval(beginTime, timestamp)];
         }
-
-        const {
-            days = 0,
-            hours = 0,
-            minutes = 0,
-            seconds = 0,
-        } = intervalToDuration({
-            start: beginTime,
-            end: timestamp,
-        });
-
-        const minutesAndSeconds = `${paddingHexCode(minutes)}:${paddingHexCode(seconds)}`;
-        const dayHours = hours + days * 24;
-
-        return dayHours > 0
-            ? `${paddingHexCode(dayHours)}:${minutesAndSeconds}`
-            : minutesAndSeconds;
-    }, [beginTime, timestamp]);
+    }, [beginTime, timestamp, expireAt]);
 };
 
-export const Timer: React.FC<TimerProps> = ({ roomStatus = RoomStatus.Paused, beginTime }) => {
-    const timing = useClockTick(beginTime, roomStatus);
-
+export const Timer: React.FC<TimerProps> = ({ beginTime, expireAt }) => {
     const t = useTranslate();
+    const [status, timing] = useClockTick(beginTime, expireAt);
 
     return (
-        <span className="timer-bar">
-            <span className={`timer-${roomStatus}`}>{t("room-started")}</span>
+        <span className={`timer-bar timer-bar-${status}`}>
+            <span className={`timer-${status}`}>{t(`timer-status-${status}`)}</span>
             <span className="timer-text">{timing}</span>
         </span>
     );

diff --git a/packages/flat-components/src/components/ClassroomPage/Timer/style.less b/packages/flat-components/src/components/ClassroomPage/Timer/style.less
@@ -3,6 +3,18 @@
     font-size: 12px;
     margin: 0 8px;
 
+    &-1 {
+        color: var(--success);
+    }
+
+    &-2 {
+        color: var(--warning);
+    }
+
+    &-3 {
+        color: var(--danger);
+    }
+
     .timer-text {
         display: inline-block;
         font-variant-numeric: tabular-nums;

diff --git a/packages/flat-components/src/components/HomePage/RoomList/RoomListItem/index.tsx b/packages/flat-components/src/components/HomePage/RoomList/RoomListItem/index.tsx
@@ -71,7 +71,7 @@ export function RoomListItem<T extends string = string>({
 
     // Force update after 1 minute to update the "will start after x minutes" text
     useEffect(() => {
-        if (diffMinutes !== null && joinEarly < diffMinutes && diffMinutes < oneHour) {
+        if (diffMinutes !== null && joinEarly <= diffMinutes && diffMinutes < oneHour) {
             const timer = setTimeout(
                 () => forceUpdate(a => (a + 1) | 0),
                 // Random delay to avoid performance issue
@@ -129,14 +129,14 @@ export function RoomListItem<T extends string = string>({
     let actionView: ReactNode = null;
     if (diffMinutes === null) {
         actionView = primaryView || statusView;
-    } else if (joinEarly < diffMinutes && diffMinutes < oneHour) {
+    } else if (joinEarly <= diffMinutes && diffMinutes < oneHour) {
         actionView = (
             <span className="room-list-item-status-success">
                 {t("will-start-after-minutes", { minutes: diffMinutes })}
             </span>
         );
     } else {
-        actionView = diffMinutes <= joinEarly && primaryView ? primaryView : statusView;
+        actionView = diffMinutes < joinEarly && primaryView ? primaryView : statusView;
     }
 
     return (
@@ -157,7 +157,7 @@ export function RoomListItem<T extends string = string>({
                     <h1 className="room-list-item-title">{title}</h1>
                     <div className="room-list-item-time-date">
                         <span className="room-list-item-time">
-                            {beginTime && format(beginTime, "HH:mm")}~
+                            {beginTime && format(beginTime, "HH:mm")} ~{" "}
                             {endTime && format(endTime, "HH:mm")}
                         </span>
                         <span className="room-list-item-date">{date}</span>
@@ -169,12 +169,10 @@ export function RoomListItem<T extends string = string>({
                             <Tooltip
                                 className="room-list-item-uuid-help"
                                 placement="right"
-                                title={t("click-to-copy")}
+                                title={t("copy")}
                             >
                                 <button
-                                    className={classNames("room-list-item-uuid", {
-                                        active: beginTime && isToday(beginTime),
-                                    })}
+                                    className={classNames("room-list-item-uuid")}
                                     onClick={copyInviteCode}
                                 >
                                     {t("invite-suffix", { uuid: formatInviteCode("", inviteCode) })}

diff --git a/packages/flat-components/src/components/HomePage/RoomList/RoomListItem/style.less b/packages/flat-components/src/components/HomePage/RoomList/RoomListItem/style.less
@@ -97,6 +97,30 @@
     }
 }
 
+.room-list-item-uuid-help+div {
+    .ant-tooltip-content {
+        left: -12px;
+    }
+
+    .ant-tooltip-arrow {
+        z-index: 3;
+        left: 1px;
+    }
+
+    .ant-tooltip-arrow-content {
+        --antd-arrow-background-color: #fff;
+    }
+
+    .ant-tooltip-inner {
+        min-width: 0;
+        min-height: 0;
+        padding: 5px 13px;
+        border-radius: 4px;
+        color: var(--text);
+        background-color: #fff;
+    }
+}
+
 .room-list-item-right {
     display: flex;
     flex-direction: column;
@@ -158,4 +182,15 @@
     .room-list-item-uuid:hover {
         background-color: var(--grey-10);
     }
+
+    .room-list-item-uuid-help+div {
+        .ant-tooltip-arrow-content {
+            --antd-arrow-background-color: var(--grey-9);
+        }
+
+        .ant-tooltip-inner {
+            color: var(--text);
+            background-color: var(--grey-9);
+        }
+    }
 }
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -490,6 +490,10 @@
   "recording": "Recording",
   "open-in-browser": "Open in Browser",
   "room-started": "Started: ",
+  "timer-status-0": "Will start: ",
+  "timer-status-1": "Started: ",
+  "timer-status-2": "Will end: ",
+  "timer-status-3": "Ended: ",
   "exit": "Exit",
   "side-panel": {
     "hide": "Hide",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -490,6 +490,10 @@
   "recording": "录制",
   "open-in-browser": "请在浏览器中打开",
   "room-started": "已上课：",
+  "timer-status-0": "距离上课：",
+  "timer-status-1": "开始上课：",
+  "timer-status-2": "剩余时间：",
+  "timer-status-3": "已结束：",
   "exit": "退出",
   "side-panel": {
     "hide": "折叠",

diff --git a/packages/flat-pages/src/BigClassPage/index.tsx b/packages/flat-pages/src/BigClassPage/index.tsx
@@ -36,6 +36,7 @@ import { ExtraPadding } from "../components/ExtraPadding";
 import { UsersButton } from "../components/UsersButton";
 import { Shortcuts, Rewards } from "../components/Shortcuts";
 import { PreferencesButton } from "../components/PreferencesButton";
+import { ClosableMessage } from "../components/ClosableMessage";
 
 export type BigClassPageProps = {};
 
@@ -98,6 +99,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                             isRemoteLogin={classroomStore.isRemoteLogin}
                             roomStatus={classroomStore.roomStatus}
                         />
+                        <ClosableMessage classroom={classroomStore} />
                     </div>
                 </div>
             </div>
@@ -111,6 +113,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                     {classroomStore.roomInfo?.beginTime && (
                         <Timer
                             beginTime={classroomStore.roomInfo.beginTime}
+                            expireAt={classroomStore.expireAt}
                             roomStatus={classroomStore.roomStatus}
                         />
                     )}

diff --git a/packages/flat-pages/src/OneToOnePage/index.tsx b/packages/flat-pages/src/OneToOnePage/index.tsx
@@ -36,6 +36,7 @@ import { ExtraPadding } from "../components/ExtraPadding";
 import { UsersButton } from "../components/UsersButton";
 import { Shortcuts, Rewards } from "../components/Shortcuts";
 import { PreferencesButton } from "../components/PreferencesButton";
+import { ClosableMessage } from "../components/ClosableMessage";
 
 export type OneToOnePageProps = {};
 
@@ -92,6 +93,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                             isRemoteLogin={classroomStore.isRemoteLogin}
                             roomStatus={classroomStore.roomStatus}
                         />
+                        <ClosableMessage classroom={classroomStore} />
                     </div>
                 </div>
             </div>
@@ -105,6 +107,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                     {classroomStore.roomInfo?.beginTime && (
                         <Timer
                             beginTime={classroomStore.roomInfo.beginTime}
+                            expireAt={classroomStore.expireAt}
                             roomStatus={classroomStore.roomStatus}
                         />
                     )}