fix: cannot hide meeting dialog (#228)

hudy9x · Jun 25, 2024 · cec4d48 · cec4d48
1 parent 4e4b59a
commit cec4d48
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 24 deletions.
diff --git a/packages/ui-app/app/[orgID]/meeting/MeetingRoomList.tsx b/packages/ui-app/app/[orgID]/meeting/MeetingRoomList.tsx
@@ -21,7 +21,7 @@ export default function MeetingRoomList() {
     })
   }
 
-  return <div className="meeting-list flex items-center justify-center h-screen">
+  return <div className="meeting-list flex bg-white dark:bg-gray-900 items-center justify-center h-screen">
     <div className="">
       <p className="text-2xl w-[450px] mb-8 text-gray-700 dark:text-gray-400">Quickly create your meeting room or just paste your meeting link or code to join for free</p>
       <div className="flex items-center gap-2">

diff --git a/packages/ui-app/app/[orgID]/meeting/[roomId]/page.tsx b/packages/ui-app/app/[orgID]/meeting/[roomId]/page.tsx
@@ -1,4 +1,4 @@
-import MeetingRoom from "./MeetingRoom";
+import MeetingRoom from "@/features/MeetingRoom";
 
 export default function Page() {
   return <MeetingRoom />

diff --git a/.../[orgID]/meeting/[roomId]/MeetingRoom.tsx → ...i-app/app/_features/MeetingRoom/index.tsx b/.../[orgID]/meeting/[roomId]/MeetingRoom.tsx → ...i-app/app/_features/MeetingRoom/index.tsx
@@ -17,8 +17,10 @@ import { meetingGetParticipant } from '@/services/meeting'
 import { useParams, useRouter } from 'next/navigation'
 import { useUser } from '@goalie/nextjs'
 import { Form, messageSuccess } from '@shared/ui'
-import { HiOutlineDuplicate } from 'react-icons/hi'
+import { HiOutlineDuplicate, HiOutlineX } from 'react-icons/hi'
 import { copyToClipboard } from '@shared/libs'
+import './style.css'
+import { HiOutlineInformationCircle } from 'react-icons/hi2'
 
 export default function MeetingContainer() {
   // TODO: get user input for room and name
@@ -27,8 +29,6 @@ export default function MeetingContainer() {
   const { user } = useUser()
   const [token, setToken] = useState('')
 
-  const link = `${process.env.NEXT_PUBLIC_FE_GATEWAY}${orgID}/meeting/${roomId}`
-
   useEffect(() => {
     if (user && user.name && roomId) {
       meetingGetParticipant({ room: roomId, username: user.name }).then(res => {
@@ -42,7 +42,7 @@ export default function MeetingContainer() {
   }
 
   return (
-    <div className='fixed top-0 left-0 z-10 w-full h-full'>
+    <div className='meeting-room fixed top-0 left-0 z-10 w-full h-full'>
       <LiveKitRoom
         onDisconnected={() => {
           push(`/${orgID}/meeting`)
@@ -68,30 +68,48 @@ export default function MeetingContainer() {
             <ControlBar />
           </div>
 
-          <div className='w-[350px] shrink-0 flex items-end h-full'>
-            <Chat />
-          </div>
+          {/* <div className='w-[350px] shrink-0 flex items-end h-full'> */}
+          {/*   <Chat className='' /> */}
+          {/* </div> */}
         </div>
       </LiveKitRoom>
-      <div className='fixed bottom-5 left-5 bg-white rounded-md shadow-lg p-4 w-[400px] text-gray-600 text-sm'>
-        <h2 className='text-2xl text-gray-800 mb-2'>Your meeting is ready</h2>
-        <div className='space-y-2'>
-          <p>Share this link with others you want in the meeting</p>
+      <MeetingRoomInfo />
+    </div>
+  )
+}
 
-          <div className='relative'>
-            <Form.Input readOnly value={link} />
-            <HiOutlineDuplicate
-              onClick={() => {
-                copyToClipboard(link)
-                messageSuccess('Copied to clipboard already !')
-              }}
-              className='absolute top-2 right-2 p-1 w-6 h-6 hover:border-gray-900 cursor-pointer bg-white border rounded-md shadow' />
-          </div>
-          <p>People who use this meeting link must get your permission before they can join </p>
+function MeetingRoomInfo() {
+  const { roomId, orgID } = useParams()
+  const [visible, setVisible] = useState(true)
+
+  const getLink = () => {
+    return `${window.location.protocol}//${window.location.host}/${orgID}/meeting/${roomId}`
+  }
+
+  return <div className={`fixed bottom-5 left-5 bg-white rounded-md shadow-lg p-4 text-gray-600 text-sm`}>
+    <HiOutlineInformationCircle onClick={() => {
+      setVisible(true)
+    }} className={`cursor-pointer ${visible ? 'hidden' : ''}`} />
+    <div className={`relative w-[400px] ${visible ? '' : 'hidden'}`}>
+      <HiOutlineX className='cursor-pointer w-7 h-7 p-1 rounded-md absolute top-1 right-1 border bg-gray-100' onClick={() => setVisible(false)} />
+      <h2 className='text-2xl text-gray-800 mb-2'>Your meeting is ready</h2>
+      <div className='space-y-2'>
+        <p>Share this link with others you want in the meeting</p>
+
+        <div className='relative'>
+          <Form.Input readOnly value={getLink()} />
+          <HiOutlineDuplicate
+            onClick={() => {
+              copyToClipboard(getLink())
+              messageSuccess('Copied to clipboard already !')
+            }}
+            className='absolute top-2 right-2 p-1 w-6 h-6 hover:border-gray-900 cursor-pointer bg-white border rounded-md shadow' />
         </div>
+        <p>People who use this meeting link must get your permission before they can join </p>
       </div>
     </div>
-  )
+  </div>
+
 }
 
 function MyVideoConference() {

diff --git a/packages/ui-app/app/_features/MeetingRoom/style.css b/packages/ui-app/app/_features/MeetingRoom/style.css
@@ -0,0 +1,3 @@
+.meeting-room .lk-chat {
+  @apply  h-screen;
+}