From ebbdebf4446173d4e5eb035ec0c4c779dfe8a66a Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 28 Nov 2024 11:08:14 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(front)=20improve=20control=20bar?=
 =?UTF-8?q?=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want the bottom bar to stay at the center of the screen.

Co-authored-by: Nathan Vasse <nathan.vasse@gmail.com>
---
 src/frontend/src/App.tsx                      |  2 +-
 .../components/controls/SupportToggle.tsx     | 37 +++++++++++++++++
 .../rooms/livekit/prefabs/ControlBar.tsx      | 40 ++++++++++---------
 src/frontend/src/locales/de/rooms.json        |  3 +-
 src/frontend/src/locales/en/rooms.json        |  3 +-
 src/frontend/src/locales/fr/rooms.json        |  3 +-
 src/frontend/src/styles/index.css             |  4 ++
 7 files changed, 70 insertions(+), 22 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index fa940d49..cbe694ef 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -30,7 +30,7 @@ function App() {
               <Route component={NotFoundScreen} />
             </Switch>
           </Layout>
-          <ReactQueryDevtools initialIsOpen={false} />
+          <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" />
         </I18nProvider>
       </Suspense>
     </QueryClientProvider>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx
new file mode 100644
index 00000000..496ce7ad
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx
@@ -0,0 +1,37 @@
+import { ToggleButton } from '@/primitives'
+import { RiQuestionLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { Crisp } from 'crisp-sdk-web'
+import { useEffect, useState } from 'react'
+
+export const SupportToggle = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
+  const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))
+
+  useEffect(() => {
+    Crisp.chat.onChatOpened(() => {
+      setIsOpened(true)
+    })
+    Crisp.chat.onChatClosed(() => {
+      setIsOpened(false)
+    })
+    return () => {
+      Crisp.chat.offChatOpened()
+      Crisp.chat.offChatClosed()
+    }
+  }, [])
+
+  return (
+    <ToggleButton
+      square
+      variant="primaryTextDark"
+      tooltip={t('support')}
+      aria-label={t('support')}
+      isSelected={isOpened}
+      onPress={() => (isOpened ? Crisp.chat.close() : Crisp.chat.open())}
+      data-attr="controls-support"
+    >
+      <RiQuestionLine />
+    </ToggleButton>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
index 13f83461..9627a45d 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
@@ -14,6 +14,7 @@ import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
 import { LeaveButton } from '../components/controls/LeaveButton'
 import { ScreenShareToggle } from '../components/controls/ScreenShareToggle'
 import { css } from '@/styled-system/css'
+import { SupportToggle } from '@/features/rooms/livekit/components/controls/SupportToggle.tsx'
 
 /** @public */
 export type ControlBarControls = {
@@ -83,28 +84,32 @@ export function ControlBar({
   return (
     <div
       className={css({
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '.75rem',
-        maxHeight: 'var(--lk-control-bar-height)',
-        height: '80px',
+        width: '100vw',
+        display: 'flex',
         position: 'absolute',
+        padding: '1.125rem',
         bottom: 0,
         left: 0,
         right: 0,
-        display: 'flex',
       })}
     >
       <div
         className={css({
           display: 'flex',
-          gap: '.5rem',
+          justifyContent: 'flex-start',
+          flex: '1 1 33%',
           alignItems: 'center',
-          lg: {
-            position: 'absolute',
-            left: '50%',
-            transform: 'translateX(-50%)',
-          },
+          gap: '0.5rem',
+          marginLeft: '0.5rem',
+        })}
+      ></div>
+      <div
+        className={css({
+          flex: '1 1 33%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          display: 'flex',
+          gap: '0.65rem',
         })}
       >
         <SelectToggleDevice
@@ -142,17 +147,16 @@ export function ControlBar({
       <div
         className={css({
           display: 'flex',
-          gap: '.5rem',
+          justifyContent: 'flex-end',
+          flex: '1 1 33%',
           alignItems: 'center',
-          marginRight: '6.25rem',
-          lg: {
-            position: 'absolute',
-            right: 0,
-          },
+          gap: '0.5rem',
+          paddingRight: '0.25rem',
         })}
       >
         <ChatToggle />
         <ParticipantsToggle />
+        <SupportToggle />
       </div>
     </div>
   )
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 1531db47..11712fe3 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -70,7 +70,8 @@
     "participants": {
       "open": "",
       "closed": ""
-    }
+    },
+    "support": ""
   },
   "options": {
     "buttonLabel": "",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 24d96555..0e230fcf 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -69,7 +69,8 @@
     "participants": {
       "open": "Hide everyone",
       "closed": "See everyone"
-    }
+    },
+    "support": "Support"
   },
   "options": {
     "buttonLabel": "More Options",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 3c82c328..9336a1c1 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -69,7 +69,8 @@
     "participants": {
       "open": "Masquer les participants",
       "closed": "Afficher les participants"
-    }
+    },
+    "support": "Support"
   },
   "options": {
     "buttonLabel": "Plus d'options",
diff --git a/src/frontend/src/styles/index.css b/src/frontend/src/styles/index.css
index 92069f66..1e051cf6 100644
--- a/src/frontend/src/styles/index.css
+++ b/src/frontend/src/styles/index.css
@@ -25,3 +25,7 @@ body,
     transition: none !important;
   }
 }
+
+body:has(.lk-video-conference) #crisp-chatbox > div > a {
+  display: none !important;
+}