From cec4d487ae5f8758f95c3e87039e1ad0c0bcc05f Mon Sep 17 00:00:00 2001
From: hudy9x <95471659+hudy9x@users.noreply.github.com>
Date: Tue, 25 Jun 2024 23:11:49 +0700
Subject: [PATCH] fix: cannot hide meeting dialog (#228)

---
 .../app/[orgID]/meeting/MeetingRoomList.tsx   |  2 +-
 .../app/[orgID]/meeting/[roomId]/page.tsx     |  2 +-
 .../MeetingRoom/index.tsx}                    | 62 ++++++++++++-------
 .../app/_features/MeetingRoom/style.css       |  3 +
 4 files changed, 45 insertions(+), 24 deletions(-)
 rename packages/ui-app/app/{[orgID]/meeting/[roomId]/MeetingRoom.tsx => _features/MeetingRoom/index.tsx} (60%)
 create mode 100644 packages/ui-app/app/_features/MeetingRoom/style.css

diff --git a/packages/ui-app/app/[orgID]/meeting/MeetingRoomList.tsx b/packages/ui-app/app/[orgID]/meeting/MeetingRoomList.tsx
index 0e0d0bd9..1c961531 100644
--- 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
index f32c0ed2..c3507cb9 100644
--- 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/packages/ui-app/app/[orgID]/meeting/[roomId]/MeetingRoom.tsx b/packages/ui-app/app/_features/MeetingRoom/index.tsx
similarity index 60%
rename from packages/ui-app/app/[orgID]/meeting/[roomId]/MeetingRoom.tsx
rename to packages/ui-app/app/_features/MeetingRoom/index.tsx
index 91f1b7e7..27821af8 100644
--- a/packages/ui-app/app/[orgID]/meeting/[roomId]/MeetingRoom.tsx
+++ b/packages/ui-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
new file mode 100644
index 00000000..1926d935
--- /dev/null
+++ b/packages/ui-app/app/_features/MeetingRoom/style.css
@@ -0,0 +1,3 @@
+.meeting-room .lk-chat {
+  @apply  h-screen;
+}