feat(webapp): add button hang up

binbat · Dec 22, 2023 · 9e5b342 · 9e5b342
1 parent dc67da1
commit 9e5b342
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/webapp/components/layout.tsx b/webapp/components/layout.tsx
@@ -4,12 +4,14 @@ import Member from './member'
 import WhipPlayer from './player/whip-player'
 import WhepPlayer from './player/whep-player'
 import DeviceBar from './device'
-import { UserStatus, localStreamIdAtom } from '../store/atom'
+import { UserStatus, localStreamIdAtom, meetingJoinedAtom } from '../store/atom'
 import copy from 'copy-to-clipboard'
 import SvgDone from './svg/done'
+import SvgEnd from './svg/end'
 
 export default function Layout(props: { meetingId: string }) {
   const [copyStatus, setCopyStatus] = useState(false)
+  const [_, setMeetingJoined] = useAtom(meetingJoinedAtom)
 
   const [localStreamId] = useAtom(localStreamIdAtom)
   const [remoteUserStatus, setRemoteUserStatus] = useState<{ [_: string]: UserStatus }>({})
@@ -30,6 +32,12 @@ export default function Layout(props: { meetingId: string }) {
     setRemoteUserStatus(r)
   }
 
+  const callEnd = async () => {
+    // TODO:
+    // need clear server status
+    setMeetingJoined(false)
+  }
+
   useEffect(() => {
     let shareScreenId = ""
     const setShareScreenId = (id: string) => shareScreenId = id
@@ -78,7 +86,15 @@ export default function Layout(props: { meetingId: string }) {
           </section>
 
           <DeviceBar />
-          <div></div>
+
+          <section className='m-sm p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
+            <button className='rounded-md w-12 h-9' onClick={() => callEnd()}>
+              <center>
+                <SvgEnd />
+              </center>
+            </button>
+          </section>
+
         </div>
       </center>
 

diff --git a/webapp/components/svg/end.tsx b/webapp/components/svg/end.tsx
@@ -0,0 +1,7 @@
+export default function SvgEnd() {
+  return (
+    <svg height="24" viewBox="0 -960 960 960" width="24">
+      <path d="m136-304-92-90q-12-12-12-28t12-28q88-95 203-142.5T480-640q118 0 232.5 47.5T916-450q12 12 12 28t-12 28l-92 90q-11 11-25.5 12t-26.5-8l-116-88q-8-6-12-14t-4-18v-114q-38-12-78-19t-82-7q-42 0-82 7t-78 19v114q0 10-4 18t-12 14l-116 88q-12 9-26.5 8T136-304Zm104-198q-29 15-56 34.5T128-424l40 40 72-56v-62Zm480 2v60l72 56 40-38q-29-26-56-45t-56-33Zm-480-2Zm480 2Z" />
+    </svg>
+  )
+}