fix(flat-component): fixed an error in join room link (#754)

fix(flat-web): adjust join page css Co-authored-by: Leooeloel <1826234293@qq.com>
netless-io · Jun 18, 2021 · 426d95a · 426d95a
1 parent 7ee2c13
commit 426d95a
Show file tree

Hide file tree

Showing 24 changed files with 47 additions and 3 deletions.
diff --git a/config/.env b/config/.env
@@ -10,6 +10,7 @@ CLOUD_RECORDING_DEFAULT_AVATAR=
 
 WECHAT_APP_ID=
 FLAT_SERVER_DOMAIN=
+FLAT_WEB_DOMAIN=
 
 GITHUB_CLIENT_ID=
 

diff --git a/desktop/renderer-app/src/components/Modal/InviteModal.tsx b/desktop/renderer-app/src/components/Modal/InviteModal.tsx
@@ -8,6 +8,7 @@ import { RoomItem } from "../../stores/RoomStore";
 import { GlobalStoreContext, RoomStoreContext } from "../StoreProvider";
 import { clipboard } from "electron";
 import { errorTips } from "../Tips/ErrorTips";
+import { INVITE_BASEURL } from "../../constants/Process";
 
 export interface InviteModalProps {
     visible: boolean;
@@ -46,6 +47,7 @@ export const InviteModal = observer<InviteModalProps>(function InviteModal({
 
     return (
         <InviteModalImpl
+            baseUrl={INVITE_BASEURL}
             visible={visible}
             room={room}
             userName={globalStore.userName ?? ""}

diff --git a/desktop/renderer-app/src/constants/Process.ts b/desktop/renderer-app/src/constants/Process.ts
@@ -23,3 +23,6 @@ export const GITHUB = Object.freeze({
 });
 
 export const FLAT_SERVER_DOMAIN = process.env.FLAT_SERVER_DOMAIN;
+export const FLAT_WEB_DOMAIN = process.env.FLAT_WEB_DOMAIN;
+
+export const INVITE_BASEURL = `https://${FLAT_WEB_DOMAIN}`;
diff --git a/desktop/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx b/desktop/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -23,6 +23,7 @@ import { RoomItem } from "../../../stores/RoomStore";
 import { useSafePromise } from "../../../utils/hooks/lifecycle";
 import { RouteNameType, usePushHistory } from "../../../utils/routes";
 import { joinRoomHandler } from "../../utils/joinRoomHandler";
+import { INVITE_BASEURL } from "../../../constants/Process";
 
 export interface MainRoomListProps {
     listRoomsType: ListRoomsType;
@@ -183,6 +184,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
             )}
             {currentRoom && (
                 <InviteModal
+                    baseUrl={INVITE_BASEURL}
                     visible={inviteModalVisible}
                     room={currentRoom}
                     userName={globalStore.userName ?? ""}

diff --git a/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.tsx b/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.tsx
@@ -14,6 +14,7 @@ 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 { INVITE_BASEURL } from "../../constants/Process";
 
 export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPage() {
     useWindowSize("Main");
@@ -138,6 +139,7 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa
                 </div>
                 <div className="periodic-room-detail-page-panel-container fancy-scrollbar">
                     <PeriodicRoomPanel
+                        inviteBaseUrl={INVITE_BASEURL}
                         rooms={rooms}
                         userName={ownerUserName}
                         isCreator={isCreator}

diff --git a/desktop/renderer-app/src/pages/RoomDetailPage/index.tsx b/desktop/renderer-app/src/pages/RoomDetailPage/index.tsx
@@ -14,6 +14,7 @@ import { RouteNameType, RouteParams, usePushHistory } from "../../utils/routes";
 import { joinRoomHandler } from "../utils/joinRoomHandler";
 import { RoomStatus } from "../../apiMiddleware/flatServer/constants";
 import { message } from "antd";
+import { INVITE_BASEURL } from "../../constants/Process";
 
 export const RoomDetailPage = observer<{}>(function RoomDetailPage() {
     useWindowSize("Main");
@@ -131,6 +132,7 @@ export const RoomDetailPage = observer<{}>(function RoomDetailPage() {
             </div>
             <div className="room-detail-page-container">
                 <RoomDetailPanel
+                    inviteBaseUrl={INVITE_BASEURL}
                     roomInfo={roomInfo}
                     room={roomInfo}
                     userName={roomInfo.ownerUserName || ""}

diff --git a/desktop/renderer-app/typings/global.d.ts b/desktop/renderer-app/typings/global.d.ts
@@ -21,6 +21,7 @@ declare namespace NodeJS {
 
         WECHAT_APP_ID: string;
         FLAT_SERVER_DOMAIN: string;
+        FLAT_WEB_DOMAIN: string;
 
         CLOUD_RECORDING_DEFAULT_AVATAR?: string;
     }

diff --git a/packages/flat-components/src/components/InviteModal/InviteModal.stories.tsx b/packages/flat-components/src/components/InviteModal/InviteModal.stories.tsx
@@ -27,6 +27,7 @@ Overview.args = {
         beginTime: 1619771930756,
         endTime: 1619775530756,
     },
+    baseUrl: "https://flat-web.whiteboard.agora.io/join/34513345f235",
     userName: "Flat",
     onCopy: () => {
         message.success("复制成功");

diff --git a/packages/flat-components/src/components/InviteModal/index.tsx b/packages/flat-components/src/components/InviteModal/index.tsx
@@ -14,6 +14,7 @@ export interface InviteModalProps {
     visible: boolean;
     room: RoomInfo;
     userName: string;
+    baseUrl: string;
     // repeated weeks for periodic rooms
     periodicWeeks?: Week[];
     onCopy: (text: string) => void;
@@ -25,6 +26,7 @@ export const InviteModal: React.FC<InviteModalProps> = ({
     room,
     periodicWeeks,
     userName,
+    baseUrl,
     onCopy,
     onCancel,
 }) => {
@@ -51,7 +53,10 @@ export const InviteModal: React.FC<InviteModalProps> = ({
             t("invite-prefix", { userName, title }) +
             (formattedTimeRange ? t("invite-begin-time", { time: formattedTimeRange }) : "");
         const baseSuffixText =
-            "\n" + t("invite-suffix", { uuid }) + "\n" + t("join-link", { uuid });
+            "\n" +
+            t("invite-suffix", { uuid }) +
+            "\n" +
+            t("join-link", { link: `${baseUrl}/join/${uuid}` });
 
         if (periodicUUID) {
             const content = periodicWeeks

diff --git a/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx b/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx
@@ -9,6 +9,7 @@ import { CancelSubPeriodicRoomModal } from "./CancelSubPeriodicRoomModal";
 export interface MoreMenuProps {
     room: RoomInfo;
     userName: string;
+    inviteBaseUrl: string;
     isCreator: boolean;
     onCopyInvitation: (text: string) => void;
     onCancelSubPeriodicRoom: () => void;
@@ -19,6 +20,7 @@ export interface MoreMenuProps {
 export const MoreMenu: React.FC<MoreMenuProps> = ({
     room,
     userName,
+    inviteBaseUrl,
     isCreator,
     onCopyInvitation,
     onCancelSubPeriodicRoom,
@@ -54,6 +56,7 @@ export const MoreMenu: React.FC<MoreMenuProps> = ({
                         <InviteModal
                             visible={inviteRoomVisible}
                             room={room}
+                            baseUrl={inviteBaseUrl}
                             userName={userName}
                             onCopy={text => {
                                 onCopyInvitation(text);

diff --git a/packages/flat-components/src/components/PeriodicRoomPage/PeriodicRoomPanel.stories.tsx b/packages/flat-components/src/components/PeriodicRoomPage/PeriodicRoomPanel.stories.tsx
@@ -34,6 +34,7 @@ Overview.args = {
             };
         }),
     isCreator: true,
+    inviteBaseUrl: "https://flat-web.whiteboard.agora.io",
     periodicInfo: {
         weeks: [Week.Friday, Week.Sunday, Week.Wednesday],
         roomType: chance.pickone([RoomType.BigClass, RoomType.OneToOne, RoomType.SmallClass]),

diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
@@ -16,6 +16,7 @@ export interface PeriodicRoomPanelProps {
     rooms: (RoomInfo | undefined)[];
     userName: string;
     isCreator: boolean;
+    inviteBaseUrl: string;
     periodicInfo: {
         weeks: Week[];
         roomType: RoomType;
@@ -32,6 +33,7 @@ export interface PeriodicRoomPanelProps {
 export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
     rooms,
     userName,
+    inviteBaseUrl,
     isCreator,
     periodicInfo,
     onCopyInvitation,
@@ -121,6 +123,7 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
                             render={(_, room: RoomInfo) => {
                                 return (
                                     <MoreMenu
+                                        inviteBaseUrl={inviteBaseUrl}
                                         room={room}
                                         userName={userName}
                                         isCreator={isCreator}

diff --git a/...at-components/src/components/RoomDetailPage/RoomDetailFooter/RoomDetailFooter.stories.tsx b/...at-components/src/components/RoomDetailPage/RoomDetailFooter/RoomDetailFooter.stories.tsx
@@ -28,6 +28,7 @@ Overview.args = {
         beginTime: 1619771930756,
         endTime: 1619775530756,
     },
+    inviteBaseUrl: "https://flat-web.whiteboard.agora.io",
     periodicWeeks: [Week.Friday, Week.Saturday, Week.Sunday],
     isCreator: true,
     userName: "Flat",

diff --git a/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx b/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx
@@ -13,6 +13,7 @@ export interface RoomDetailFooterProps {
     userName: string;
     isCreator: boolean;
     isPeriodicDetailsPage: boolean;
+    inviteBaseUrl: string;
     // repeated weeks for periodic rooms
     periodicWeeks?: Week[];
     onJoinRoom: () => void;
@@ -25,6 +26,7 @@ export interface RoomDetailFooterProps {
 export const RoomDetailFooter = observer<RoomDetailFooterProps>(function RoomDetailFooter({
     room,
     userName,
+    inviteBaseUrl,
     isCreator,
     isPeriodicDetailsPage,
     periodicWeeks,
@@ -84,6 +86,7 @@ export const RoomDetailFooter = observer<RoomDetailFooterProps>(function RoomDet
             <InviteModal
                 visible={isShowInviteModal}
                 room={room}
+                baseUrl={inviteBaseUrl}
                 periodicWeeks={periodicWeeks}
                 userName={userName}
                 onCopy={text => {

diff --git a/packages/flat-components/src/components/RoomDetailPage/RoomDetailPanel.stories.tsx b/packages/flat-components/src/components/RoomDetailPage/RoomDetailPanel.stories.tsx
@@ -32,6 +32,7 @@ Overview.args = {
     roomInfo,
     room: roomInfo,
     userName: "Flat",
+    inviteBaseUrl: "https://flat-web.whiteboard.agora.io",
     periodicWeeks: [Week.Friday, Week.Sunday, Week.Wednesday],
     isCreator: true,
     isPeriodicDetailsPage: false,

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -98,7 +98,7 @@
   "invite-prefix": "{{userName}} invites you to join the Flat room\n\nRoom theme: {{title}}",
   "invite-suffix": "Room ID: {{uuid}}",
   "invite-title": "{{userName}} invite to join the FLAT room",
-  "join-link": "Join Link : https://flat-web.whiteboard.agora.io/join/{{uuid}}",
+  "join-link": "Join Link : {{link}}",
   "repeat-weeks": "Repeat period: {{weeks}}",
   "room-uuid": "Room ID",
   "room-theme": "Room theme",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -97,7 +97,7 @@
   "invite-prefix": "{{userName}} 邀请你加入 Flat 房间\n房间主题：{{title}}\n",
   "invite-begin-time": "开始时间：{{time}}\n",
   "invite-suffix": "房间号： {{uuid}}",
-  "join-link": "加入链接: https://flat-web.whiteboard.agora.io/join/{{uuid}}",
+  "join-link": "加入链接: {{link}}",
   "repeat-weeks": "重复周期：{{weeks}}",
   "invite-title": "{{userName}} 邀请加入 FLAT 房间",
   "join-and-book-by-room-uuid": "可通过房间号加入和预约",

diff --git a/web/flat-web/src/components/Modal/InviteModal.tsx b/web/flat-web/src/components/Modal/InviteModal.tsx
@@ -7,6 +7,7 @@ import { InviteModal as InviteModalImpl } from "flat-components";
 import { RoomItem } from "../../stores/RoomStore";
 import { GlobalStoreContext, RoomStoreContext } from "../StoreProvider";
 import { errorTips } from "../Tips/ErrorTips";
+import { INVITE_BASEURL } from "../../constants/Process";
 
 export interface InviteModalProps {
     visible: boolean;
@@ -45,6 +46,7 @@ export const InviteModal = observer<InviteModalProps>(function InviteModal({
 
     return (
         <InviteModalImpl
+            baseUrl={INVITE_BASEURL}
             visible={visible}
             room={room}
             userName={globalStore.userName ?? ""}

diff --git a/web/flat-web/src/constants/Process.ts b/web/flat-web/src/constants/Process.ts
@@ -23,3 +23,6 @@ export const GITHUB = Object.freeze({
 });
 
 export const FLAT_SERVER_DOMAIN = import.meta.env.FLAT_SERVER_DOMAIN;
+export const FLAT_WEB_DOMAIN = import.meta.env.FLAT_WEB_DOMAIN;
+
+export const INVITE_BASEURL = `https://${FLAT_WEB_DOMAIN}`;
diff --git a/web/flat-web/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx b/web/flat-web/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -22,6 +22,7 @@ import { RoomItem } from "../../../stores/RoomStore";
 import { useSafePromise } from "../../../utils/hooks/lifecycle";
 import { RouteNameType, usePushHistory } from "../../../utils/routes";
 import { joinRoomHandler } from "../../utils/joinRoomHandler";
+import { INVITE_BASEURL } from "../../../constants/Process";
 
 export interface MainRoomListProps {
     listRoomsType: ListRoomsType;
@@ -182,6 +183,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
             )}
             {currentRoom && (
                 <InviteModal
+                    baseUrl={INVITE_BASEURL}
                     visible={inviteModalVisible}
                     room={currentRoom}
                     userName={globalStore.userName ?? ""}

diff --git a/web/flat-web/src/pages/JoinPage/style.less b/web/flat-web/src/pages/JoinPage/style.less
@@ -51,6 +51,7 @@
     justify-content: center;
     flex: auto;
     text-align: center;
+    z-index: 1;
 }
 
 .join-page-content-title {

diff --git a/web/flat-web/src/pages/PeriodicRoomDetailPage/index.tsx b/web/flat-web/src/pages/PeriodicRoomDetailPage/index.tsx
@@ -11,6 +11,7 @@ import { errorTips } from "../../components/Tips/ErrorTips";
 import { globalStore } from "../../stores/GlobalStore";
 import { RouteNameType, RouteParams, usePushHistory } from "../../utils/routes";
 import { cancelPeriodicRoom, cancelPeriodicSubRoom } from "../../apiMiddleware/flatServer";
+import { INVITE_BASEURL } from "../../constants/Process";
 
 export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPage() {
     const params = useParams<RouteParams<RouteNameType.PeriodicRoomDetailPage>>();
@@ -133,6 +134,7 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa
         <div className="periodic-room-detail-page-container">
             <div className="periodic-room-detail-page-panel-container">
                 <PeriodicRoomPanel
+                    inviteBaseUrl={INVITE_BASEURL}
                     rooms={rooms}
                     userName={ownerUserName}
                     isCreator={isCreator}

diff --git a/web/flat-web/src/pages/RoomDetailPage/index.tsx b/web/flat-web/src/pages/RoomDetailPage/index.tsx
@@ -15,6 +15,7 @@ import { RouteNameType, RouteParams, usePushHistory } from "../../utils/routes";
 import { joinRoomHandler } from "../utils/joinRoomHandler";
 import { RoomStatus } from "../../apiMiddleware/flatServer/constants";
 import { message } from "antd";
+import { INVITE_BASEURL } from "../../constants/Process";
 
 export const RoomDetailPage = observer(function RoomDetailPage() {
     const { roomUUID, periodicUUID } = useParams<RouteParams<RouteNameType.RoomDetailPage>>();
@@ -118,6 +119,7 @@ export const RoomDetailPage = observer(function RoomDetailPage() {
         <div className="room-detail-page-container">
             <div className="room-detail-page-panel-container">
                 <RoomDetailPanel
+                    inviteBaseUrl={INVITE_BASEURL}
                     showRoomCountVisible={
                         periodicUUID ? roomInfo.roomStatus !== RoomStatus.Stopped : false
                     }

diff --git a/web/flat-web/typings/global.d.ts b/web/flat-web/typings/global.d.ts
@@ -29,6 +29,7 @@ interface ImportMetaEnv {
 
     WECHAT_APP_ID: string;
     FLAT_SERVER_DOMAIN: string;
+    FLAT_WEB_DOMAIN: string;
 
     CLOUD_RECORDING_DEFAULT_AVATAR?: string;
 }