feat(flat-components): add LoadingPage

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

@@ -7,6 +7,7 @@ import {
     RecordButton,
     TopBar,
     TopBarDivider,
+    LoadingPage,
 } from "flat-components";
 import { observer } from "mobx-react-lite";
 import React, { useContext, useEffect, useRef, useState } from "react";
@@ -29,7 +30,6 @@ import { TopBarRightBtn } from "../../components/TopBarRightBtn";
 import { GlobalStoreContext } from "../../components/StoreProvider";
 import { TopBarRoundBtn } from "../../components/TopBarRoundBtn";
 import { Whiteboard } from "../../components/Whiteboard";
-import LoadingPage from "../../LoadingPage";
 import {
     RecordingConfig,
     RoomStatusLoadingType,

desktop/renderer-app/src/pages/ModifyOrdinaryRoomPage/OrdinaryRoomForm.tsx

@@ -2,10 +2,9 @@ import { message } from "antd";
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
-import { EditRoomFormInitialValues, EditRoomFormValues } from "flat-components";
+import { EditRoomFormInitialValues, EditRoomFormValues, LoadingPage } from "flat-components";
 import { ordinaryRoomInfo, updateOrdinaryRoom } from "../../apiMiddleware/flatServer";
 import EditRoomPage from "../../components/EditRoomPage";
-import LoadingPage from "../../LoadingPage";
 import { useSafePromise } from "../../utils/hooks/lifecycle";
 import { errorTips } from "../../components/Tips/ErrorTips";
 export interface OrdinaryRoomFormProps {

desktop/renderer-app/src/pages/ModifyOrdinaryRoomPage/PeriodicSubRoomForm.tsx

@@ -2,12 +2,11 @@ import { message } from "antd";
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
+import { EditRoomFormInitialValues, EditRoomFormValues, LoadingPage } from "flat-components";
 import { periodicSubRoomInfo, updatePeriodicSubRoom } from "../../apiMiddleware/flatServer";
 import EditRoomPage from "../../components/EditRoomPage";
-import LoadingPage from "../../LoadingPage";
 import { useSafePromise } from "../../utils/hooks/lifecycle";
 import { errorTips } from "../../components/Tips/ErrorTips";
-import { EditRoomFormInitialValues, EditRoomFormValues } from "flat-components";
 
 export interface PeriodicSubRoomFormProps {
     roomUUID: string;

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

@@ -7,12 +7,12 @@ import {
     EditRoomFormValues,
     getEndTimeFromRate,
     getRateFromEndTime,
+    LoadingPage,
 } from "flat-components";
 import { useSafePromise } from "../../utils/hooks/lifecycle";
 import EditRoomPage from "../../components/EditRoomPage";
 import { RouteNameType, RouteParams, usePushHistory } from "../../utils/routes";
 import { periodicRoomInfo, updatePeriodicRoom } from "../../apiMiddleware/flatServer";
-import LoadingPage from "../../LoadingPage";
 import { errorTips } from "../../components/Tips/ErrorTips";
 import { useWindowSize } from "../../utils/hooks/useWindowSize";
 

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

@@ -12,6 +12,7 @@ import {
     RecordButton,
     TopBar,
     TopBarDivider,
+    LoadingPage,
 } from "flat-components";
 
 import InviteButton from "../../components/InviteButton";
@@ -27,7 +28,6 @@ import {
 } from "../../components/ExitRoomConfirm";
 import { Whiteboard } from "../../components/Whiteboard";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
-import LoadingPage from "../../LoadingPage";
 import { RoomStatus, RoomType } from "../../apiMiddleware/flatServer/constants";
 import {
     RecordingConfig,

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

@@ -1,20 +1,19 @@
 import "./index.less";
 
 import { clipboard } from "electron";
-import { MainPageHeader, PeriodicRoomPanel } from "flat-components";
+import { message } from "antd";
 import { observer } from "mobx-react-lite";
-import React, { useContext, useEffect, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
+import React, { useContext, useEffect, useState } from "react";
 import { useLastLocation } from "react-router-last-location";
+import { LoadingPage, MainPageHeader, PeriodicRoomPanel } from "flat-components";
 import { MainPageLayoutContainer } from "../../components/MainPageLayoutContainer";
 import { RoomStoreContext } from "../../components/StoreProvider";
 import { errorTips } from "../../components/Tips/ErrorTips";
-import LoadingPage from "../../LoadingPage";
 import { globalStore } from "../../stores/GlobalStore";
 import { useWindowSize } from "../../utils/hooks/useWindowSize";
 import { RouteNameType, RouteParams, usePushHistory } from "../../utils/routes";
 import { cancelPeriodicRoom, cancelPeriodicSubRoom } from "../../apiMiddleware/flatServer";
-import { message } from "antd";
 
 export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPage() {
     useWindowSize("Main");

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

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import { RouteComponentProps, useParams, useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { LoadingPage } from "flat-components";
 import PlayerController from "@netless/player-controller";
-import LoadingPage from "../../LoadingPage";
 import { ipcAsyncByMainWindow, ipcReceive, ipcReceiveRemove } from "../../utils/ipc";
 import PageError from "../../PageError";
 import { RealtimePanel } from "../../components/RealtimePanel";
@@ -40,6 +41,7 @@ export type ReplayPageState = {
 export const ReplayPage = observer<ReplayPageProps>(function ReplayPage() {
     useWindowSize("Replay");
 
+    const { t } = useTranslation();
     const whiteboardElRef = useRef<HTMLDivElement>(null);
     const videoElRef = useRef<HTMLVideoElement>(null);
     const [showExitReplayModal, setShowExitReplayModal] = useState(false);
@@ -179,7 +181,7 @@ export const ReplayPage = observer<ReplayPageProps>(function ReplayPage() {
             </div>
         ) : classRoomReplayStore.isReady ? null : (
             <div className="replay-overlay">
-                <LoadingPage text={"正在生成回放请耐心等待"} />
+                <LoadingPage text={t("waiting-for-record")} />
             </div>
         );
     }

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

@@ -3,13 +3,12 @@ import "./index.less";
 
 import React, { useContext, useEffect } from "react";
 import { clipboard } from "electron";
-import { MainPageHeader, RoomDetailPanel } from "flat-components";
+import { LoadingPage, MainPageHeader, RoomDetailPanel } from "flat-components";
 import { observer } from "mobx-react-lite";
 import { useHistory, useParams } from "react-router-dom";
 import { MainPageLayoutContainer } from "../../components/MainPageLayoutContainer";
 import { GlobalStoreContext, RoomStoreContext } from "../../components/StoreProvider";
 import { errorTips } from "../../components/Tips/ErrorTips";
-import LoadingPage from "../../LoadingPage";
 import { useWindowSize } from "../../utils/hooks/useWindowSize";
 import { RouteNameType, RouteParams, usePushHistory } from "../../utils/routes";
 import { joinRoomHandler } from "../utils/joinRoomHandler";

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

@@ -8,6 +8,7 @@ import { observer } from "mobx-react-lite";
 import React, { useContext, useEffect, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import { useLastLocation } from "react-router-last-location";
+import { LoadingPage } from "flat-components";
 import backSVG from "../../assets/image/back.svg";
 import moreBtnSVG from "../../assets/image/moreBtn.svg";
 import { CopyInvitationItem } from "../../components/MoreMenu/CopyInvitationItem";
@@ -16,7 +17,6 @@ import { RemoveRoomItem } from "../../components/MoreMenu/RemoveRoomItem";
 import { RoomDetailsItem } from "../../components/MoreMenu/RoomDetailsItem";
 import { RoomStatusElement } from "../../components/RoomStatusElement/RoomStatusElement";
 import { RoomStoreContext } from "../../components/StoreProvider";
-import LoadingPage from "../../LoadingPage";
 import { globalStore } from "../../stores/GlobalStore";
 import { RoomItem } from "../../stores/RoomStore";
 import { getRoomTypeName, getWeekName } from "../../utils/getTypeName";

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

@@ -10,6 +10,7 @@ import {
     RecordButton,
     TopBar,
     TopBarDivider,
+    LoadingPage,
 } from "flat-components";
 
 import InviteButton from "../../components/InviteButton";
@@ -24,7 +25,6 @@ import ExitRoomConfirm, {
     useExitRoomConfirmModal,
 } from "../../components/ExitRoomConfirm";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
-import LoadingPage from "../../LoadingPage";
 
 import { RtcChannelType } from "../../apiMiddleware/Rtc";
 import { ClassModeType } from "../../apiMiddleware/Rtm";

packages/flat-components/src/components/LoadingPage/LoadingPage.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, Story } from "@storybook/react";
+import faker from "faker";
+import React from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+import { LoadingPage, LoadingPageProps } from ".";
+
+const storyMeta: Meta = {
+    title: "LoadingPage/LoadingPage",
+    component: LoadingPage,
+};
+
+export default storyMeta;
+
+export const Overview: Story<LoadingPageProps> = args => (
+    <Router>
+        <LoadingPage {...args} />
+    </Router>
+);
+Overview.args = {
+    text: faker.random.words(),
+};

desktop/renderer-app/src/LoadingPage.tsx → packages/flat-components/src/components/LoadingPage/index.tsx

@@ -1,44 +1,39 @@
-import loading from "./assets/image/loading.gif";
-import "./LoadingPage.less";
+import "./style.less";
+import loadingGIF from "./icons/loading.gif";
 
 import React, { FC, useEffect, useState } from "react";
 import { Button } from "antd";
-import { Link } from "react-router-dom";
 import classNames from "classnames";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 export interface LoadingPageProps {
     text?: string;
 }
 
 export const LoadingPage: FC<LoadingPageProps> = ({ text }) => {
     const [isShowReturnHomePage, showReturnHomePage] = useState(false);
+    const { t } = useTranslation();
 
     useEffect(() => {
-        const ticket = window.setTimeout(() => {
-            showReturnHomePage(true);
-        }, 20000);
-
-        return () => {
-            window.clearTimeout(ticket);
-        };
+        const ticket = window.setTimeout(() => showReturnHomePage(true), 20000);
+        return () => window.clearTimeout(ticket);
     }, []);
 
     return (
-        <div className="loading-page-container">
+        <div className="loading-page">
             <div className="loading-page-content">
-                <img className="loading-page-image" src={loading} alt={"loading"} />
+                <img className="loading-page-image" src={loadingGIF} alt="loading" />
                 {text && <span>{text}</span>}
             </div>
             <Link
-                to={"/"}
+                to="/"
                 className={classNames("loading-page-return-btn", {
                     "is-show": isShowReturnHomePage,
                 })}
             >
-                <Button size="large">返回首页</Button>
+                <Button size="large">{t("return-home")}</Button>
             </Link>
         </div>
     );
 };
-
-export default LoadingPage;

desktop/renderer-app/src/LoadingPage.less → packages/flat-components/src/components/LoadingPage/style.less

@@ -1,4 +1,4 @@
-.loading-page-container {
+.loading-page {
     width: 100%;
     height: 100%;
     display: flex;

packages/flat-components/src/index.ts

@@ -9,6 +9,7 @@ export * from "./components/CloudStorage";
 export * from "./components/EditRoomPage";
 export * from "./components/HomePage";
 export * from "./components/InviteModal";
+export * from "./components/LoadingPage";
 export * from "./components/LoginPage";
 export * from "./components/MainPageLayout";
 export * from "./components/PeriodicRoomPage";

packages/flat-components/src/types/images.d.ts

@@ -12,3 +12,8 @@ declare module "*.png" {
     const content: string;
     export default content;
 }
+
+declare module "*.gif" {
+    const content: string;
+    export default content;
+}

packages/flat-i18n/locales/en.json

@@ -58,14 +58,14 @@
   "teacher-left-temporarily": "The teacher leaves temporarily",
   "the-room-has-ended-and-is-about-to-exit": "The room has ended and is about to exit...",
   "class-picker-text": {
-    "bigClass": "Suitable for 1 teacher for a large number of students",
-    "oneToOne": "Suitable for 1 teacher and 1 student",
-    "smallClass": "Suitable for 1 teacher for up to 16 students"
+    "BigClass": "Suitable for 1 teacher for a large number of students",
+    "OneToOne": "Suitable for 1 teacher and 1 student",
+    "SmallClass": "Suitable for 1 teacher for up to 16 students"
   },
   "class-room-type": {
-    "bigClass": "Large Class",
-    "oneToOne": "One to One",
-    "smallClass": "Small Class"
+    "BigClass": "Large Class",
+    "OneToOne": "One to One",
+    "SmallClass": "Small Class"
   },
   "home-page-hero-button-type": {
     "create": "Create",
@@ -76,5 +76,7 @@
     "idle": "idle",
     "running": "running",
     "stopped": "stopped"
-  }
+  },
+  "return-home": "Return Home",
+  "waiting-for-record": "Replay is being generated, please wait patiently."
 }

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

@@ -76,5 +76,7 @@
     "BigClass": "适用于 1 位老师面向大量学生",
     "OneToOne": "适用于 1 位老师与 1 名学生",
     "SmallClass": "适用于 1 位老师面向最多 16 名学生"
-  }
+  },
+  "return-home": "返回首页",
+  "waiting-for-record": "正在生成回放请耐心等待"
 }