style(flat-components): update status text and join button (#2114)

- show "running" status by time instead of the actual status - show "join" instead of "start" room button - trivial style updates to invite modal and schedule room page
netless-io · Feb 19, 2024 · dda6d21 · dda6d21
1 parent f59f98c
commit dda6d21
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 67 deletions.
diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx
@@ -96,7 +96,7 @@ export const EditRoomBody: React.FC<EditRoomBodyProps> = ({
     const [isShowEditSubmitConfirm, showEditSubmitConfirm] = useState(false);
 
     const [isPeriodic, setIsPeriodic] = useState(false);
-    const showPmi = useMemo(() => !!pmi && !isPeriodic, [isPeriodic, pmi]);
+    const enablePmi = useMemo(() => !!pmi && !isPeriodic, [isPeriodic, pmi]);
 
     // @TODO: need to remove
     const [region] = useState<Region>(initialValues.region);
@@ -172,16 +172,16 @@ export const EditRoomBody: React.FC<EditRoomBodyProps> = ({
                             nextPeriodicRoomEndTime,
                         )}
                         {renderEndTimePicker(t, form, nextPeriodicRoomEndTime)}
-                        {showPmi && updateAutoPmiOn && (
+                        {updateAutoPmiOn && (
                             <Form.Item
                                 className="edit-room-form-item no-margin pmi"
                                 name="pmi"
                                 valuePropName="checked"
                             >
-                                <div>
+                                <div title={t("periodic-cannot-use-pmi")}>
                                     <Checkbox
-                                        checked={autoPmiOn}
-                                        disabled={pmiRoomExist}
+                                        checked={enablePmi && autoPmiOn}
+                                        disabled={pmiRoomExist || !enablePmi}
                                         onClick={() => updateAutoPmiOn(!autoPmiOn)}
                                     >
                                         <PmiDesc

diff --git a/packages/flat-components/src/components/InviteModal/index.less b/packages/flat-components/src/components/InviteModal/index.less
@@ -45,14 +45,15 @@
         display: inline-block;
 
         &:first-of-type {
-            padding-right: 16px;
             white-space: nowrap;
             color: var(--text);
         }
 
         &:last-of-type {
+            padding-left: 16px;
             flex: 1;
             text-align: right;
+            user-select: text;
         }
     }
 

diff --git a/packages/flat-components/src/components/InviteModal/index.tsx b/packages/flat-components/src/components/InviteModal/index.tsx
@@ -51,7 +51,7 @@ export const InviteModal: React.FC<InviteModalProps> = ({
                 ? onlySuffixTimeFormat(endTime)
                 : completeTimeFormat(endTime);
 
-        return `${formatBeginTime}~${formatEndTime}`;
+        return `${formatBeginTime} ~ ${formatEndTime}`;
     }, [beginTime, endTime]);
 
     const onCopyClicked = (): void => {
@@ -97,7 +97,7 @@ export const InviteModal: React.FC<InviteModalProps> = ({
                 </div>
                 <div className="invite-modal-content-item">
                     <span>{t("room-uuid")}</span>
-                    <span style={{ userSelect: "text" }}>{formatInviteCode(uuid, inviteCode)}</span>
+                    <span>{formatInviteCode(uuid, inviteCode)}</span>
                 </div>
                 {formattedTimeRange && (
                     <div className="invite-modal-content-item">
@@ -107,7 +107,7 @@ export const InviteModal: React.FC<InviteModalProps> = ({
                 )}
                 <div className="invite-modal-content-item">
                     <span>{t("join-link")}</span>
-                    <span style={{ userSelect: "text" }}>{joinLink}</span>
+                    <span>{joinLink}</span>
                 </div>
             </div>
         </Modal>

diff --git a/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx b/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx
@@ -87,7 +87,7 @@ export const RoomDetailFooter = /* @__PURE__ */ observer<RoomDetailFooterProps>(
                     {t("invitation")}
                 </Button>
                 <Button className="room-detail-footer-btn" type="primary" onClick={onJoinRoom}>
-                    {isCreator && room.roomStatus === RoomStatus.Idle ? t("begin") : t("join-room")}
+                    {t("join-room")}
                 </Button>
                 <InviteModal
                     baseUrl={inviteBaseUrl}

diff --git a/packages/flat-components/src/components/RoomStatusElement/index.tsx b/packages/flat-components/src/components/RoomStatusElement/index.tsx
@@ -8,18 +8,24 @@ export interface RoomStatusElementProps {
     room: RoomInfo;
 }
 
+const statusMap: Record<"running" | "stopped" | "upcoming", "started" | "stopped" | "idle"> = {
+    running: "started",
+    stopped: "stopped",
+    upcoming: "idle",
+};
+
 export const RoomStatusElement: React.FC<RoomStatusElementProps> = ({ room }) => {
     const t = useTranslate();
-    switch (room.roomStatus) {
-        case RoomStatus.Started:
-        case RoomStatus.Paused: {
-            return <span className="room-status-started">{t("room-status.running")}</span>;
-        }
-        case RoomStatus.Stopped: {
-            return <span className="room-status-stopped">{t("room-status.stopped")}</span>;
-        }
-        default: {
-            return <span className="room-status-idle">{t("room-status.upcoming")}</span>;
-        }
+
+    const now = Date.now();
+    let status: "running" | "stopped" | "upcoming";
+    if (room.beginTime && now < room.beginTime) {
+        status = "upcoming";
+    } else if (room.roomStatus === RoomStatus.Stopped || (room.endTime && now > room.endTime)) {
+        status = "stopped";
+    } else {
+        status = "running";
     }
+
+    return <span className={"room-status-" + statusMap[status]}>{t("room-status." + status)}</span>;
 };
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -323,6 +323,7 @@
   "periodic-rooms-do-not-exist": "Periodic room does not exist",
   "periodic-rooms-have-ended": "Periodic room has ended",
   "periodic-sub-rooms-do-not-exist": "Periodic sub-room does not exist",
+  "periodic-cannot-use-pmi": "Periodic room cannot use PMI",
   "replay-does-not-exist": "Replay does not exist",
   "request-error": "Request error",
   "request-failed": "Request failed",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -333,6 +333,7 @@
   "periodic-rooms-do-not-exist": "周期性房间不存在",
   "periodic-rooms-have-ended": "周期性房间已结束",
   "periodic-sub-rooms-do-not-exist": "周期性子房间不存在",
+  "periodic-cannot-use-pmi": "周期性房间不能使用个人房间号",
   "user-does-not-exist": "用户不存在",
   "user-room-list-is-not-empty": "用户房间列表不为空",
   "user-already-binding": "用户已绑定",

diff --git a/packages/flat-pages/src/HomePage/MainRoomListPanel/MainRoomList.tsx b/packages/flat-pages/src/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -81,53 +81,20 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                 const primaryAction = (
                     roomStatus?: RoomStatus,
                 ): RoomListItemPrimaryAction<"replay" | "join" | "begin"> | null => {
-                    let primaryAction: RoomListItemPrimaryAction<
-                        "replay" | "join" | "begin"
-                    > | null;
-                    switch (roomStatus) {
-                        case RoomStatus.Idle: {
-                            const isCreator = room.ownerUUID === globalStore.userUUID;
-                            primaryAction = isCreator
-                                ? {
-                                      key: "begin",
-                                      text: t("begin"),
-                                      type: "primary",
-                                  }
-                                : {
-                                      key: "join",
-                                      text: t("join"),
-                                      type: "primary",
-                                  };
-                            break;
-                        }
-                        case RoomStatus.Started:
-                        case RoomStatus.Paused: {
-                            primaryAction = {
-                                key: "join",
-                                text: t("join"),
-                                type: "primary",
-                            };
-                            break;
-                        }
-                        case RoomStatus.Stopped: {
-                            primaryAction = room.hasRecord
-                                ? {
-                                      key: "replay",
-                                      text: t("replay"),
-                                  }
-                                : null;
-                            break;
-                        }
-                        default: {
-                            primaryAction = {
-                                key: "begin",
-                                text: t("begin"),
-                                type: "primary",
-                            };
-                            break;
-                        }
+                    if (roomStatus === RoomStatus.Stopped) {
+                        return room.hasRecord
+                            ? {
+                                  key: "replay",
+                                  text: t("replay"),
+                              }
+                            : null;
+                    } else {
+                        return {
+                            key: "join",
+                            text: t("join"),
+                            type: "primary",
+                        };
                     }
-                    return primaryAction;
                 };
 
                 return (