From 95116f70e8cf54c8c244a193dafebd68a5f4d209 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 16 Sep 2024 11:28:08 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20enhance=20quit=20butto?=
 =?UTF-8?q?n=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improved handling of the disconnect call by properly managing the returned
promise. Simplified the approach by skipping the useDisconnectButton hook.
Updated the button to display only an icon for a cleaner interface.
---
 .../features/rooms/components/Conference.tsx  | 22 +-----------
 .../components/controls/LeaveButton.tsx       | 36 +++++++++++++++++++
 .../rooms/livekit/prefabs/ControlBar.tsx      | 16 ++++-----
 3 files changed, 43 insertions(+), 31 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/LeaveButton.tsx

diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx
index 093d3af4..b99ec661 100644
--- a/src/frontend/src/features/rooms/components/Conference.tsx
+++ b/src/frontend/src/features/rooms/components/Conference.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import {
@@ -9,7 +9,6 @@ import {
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
-import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { QueryAware } from '@/components/QueryAware'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -79,25 +78,6 @@ export const Conference = ({
 
   const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
 
-  /**
-   * checks for actual click on the leave button instead of
-   * relying on LiveKitRoom onDisconnected because onDisconnected
-   * triggers even on page reload, it's not a user "onLeave" event really.
-   * Here we want to react to the user actually deciding to leave.
-   */
-  useEffect(() => {
-    const checkOnLeaveClick = (event: MouseEvent) => {
-      const target = event.target as HTMLElement
-      if (target.classList.contains('lk-disconnect-button')) {
-        navigateTo('feedback')
-      }
-    }
-    document.body.addEventListener('click', checkOnLeaveClick)
-    return () => {
-      document.body.removeEventListener('click', checkOnLeaveClick)
-    }
-  }, [])
-
   const { t } = useTranslation('rooms')
   if (isCreateError) {
     // this error screen should be replaced by a proper waiting room for anonymous user.
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/LeaveButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/LeaveButton.tsx
new file mode 100644
index 00000000..600dbf7e
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/LeaveButton.tsx
@@ -0,0 +1,36 @@
+import { useConnectionState, useRoomContext } from '@livekit/components-react'
+import { Button } from '@/primitives'
+import { navigateTo } from '@/navigation/navigateTo'
+import { RiPhoneFill } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { ConnectionState } from 'livekit-client'
+
+export const LeaveButton = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
+  const room = useRoomContext()
+  const connectionState = useConnectionState(room)
+  return (
+    <Button
+      isDisabled={connectionState === ConnectionState.Disconnected}
+      variant={'danger'}
+      tooltip={t('leave')}
+      aria-label={t('leave')}
+      onPress={() => {
+        room
+          .disconnect(true)
+          .catch((e) =>
+            console.error('An error occurred while disconnecting:', e)
+          )
+          .finally(() => {
+            navigateTo('feedback')
+          })
+      }}
+    >
+      <RiPhoneFill
+        style={{
+          transform: 'rotate(135deg)',
+        }}
+      />
+    </Button>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
index c60eb1dc..7fc24085 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
@@ -4,8 +4,6 @@ import * as React from 'react'
 import { supportsScreenSharing } from '@livekit/components-core'
 
 import {
-  DisconnectButton,
-  LeaveIcon,
   TrackToggle,
   useMaybeLayoutContext,
   usePersistentUserChoices,
@@ -16,10 +14,11 @@ import { StartMediaButton } from '../components/controls/StartMediaButton'
 import { useMediaQuery } from '../hooks/useMediaQuery'
 import { useTranslation } from 'react-i18next'
 import { OptionsButton } from '../components/controls/Options/OptionsButton'
-import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
-import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
-import { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
-import { SelectToggleDevice } from '@/features/rooms/livekit/components/controls/SelectToggleDevice'
+import { ParticipantsToggle } from '../components/controls/Participants/ParticipantsToggle'
+import { ChatToggle } from '../components/controls/ChatToggle'
+import { HandToggle } from '../components/controls/HandToggle'
+import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
+import { LeaveButton } from '../components/controls/LeaveButton'
 
 /** @public */
 export type ControlBarControls = {
@@ -168,10 +167,7 @@ export function ControlBar({
       <ChatToggle />
       <ParticipantsToggle />
       <OptionsButton />
-      <DisconnectButton>
-        {showIcon && <LeaveIcon />}
-        {showText && t('controls.leave')}
-      </DisconnectButton>
+      <LeaveButton />
       <StartMediaButton />
     </div>
   )