♻️(frontend) simplify the controls component

As we duplicated the code, we don't need anymore to configure
the available controls from the video conference.

src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx

@@ -11,7 +11,6 @@ import {
   LeaveIcon,
   MediaDeviceMenu,
   TrackToggle,
-  useLocalParticipantPermissions,
   useMaybeLayoutContext,
   usePersistentUserChoices,
 } from '@livekit/components-react'
@@ -21,6 +20,7 @@ import { mergeProps } from '@/utils/mergeProps.ts'
 import { StartMediaButton } from '../components/controls/StartMediaButton'
 import { useMediaQuery } from '../hooks/useMediaQuery'
 import { useTranslation } from 'react-i18next'
+import { SettingsButton } from '@/features/settings'
 
 /** @public */
 export type ControlBarControls = {
@@ -64,7 +64,6 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export function ControlBar({
   variation,
-  controls,
   saveUserChoices = true,
   onDeviceError,
   ...props
@@ -85,22 +84,6 @@ export function ControlBar({
   const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose'
   variation ??= defaultVariation
 
-  const visibleControls = { leave: true, ...controls }
-
-  const localPermissions = useLocalParticipantPermissions()
-
-  if (!localPermissions) {
-    visibleControls.camera = false
-    visibleControls.chat = false
-    visibleControls.microphone = false
-    visibleControls.screenShare = false
-  } else {
-    visibleControls.camera ??= localPermissions.canPublish
-    visibleControls.microphone ??= localPermissions.canPublish
-    visibleControls.screenShare ??= localPermissions.canPublish
-    visibleControls.chat ??= localPermissions.canPublishData && controls?.chat
-  }
-
   const showIcon = React.useMemo(
     () => variation === 'minimal' || variation === 'verbose',
     [variation]
@@ -144,51 +127,47 @@ export function ControlBar({
 
   return (
     <div {...htmlProps}>
-      {visibleControls.microphone && (
+      <div className="lk-button-group">
-        <div className="lk-button-group">
+        <TrackToggle
-          <TrackToggle
+          source={Track.Source.Microphone}
-            source={Track.Source.Microphone}
+          showIcon={showIcon}
-            showIcon={showIcon}
+          onChange={microphoneOnChange}
-            onChange={microphoneOnChange}
+          onDeviceError={(error) =>
-            onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Microphone, error })
-              onDeviceError?.({ source: Track.Source.Microphone, error })
+          }
+        >
+          {showText && t('controls.microphone')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="audioinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
             }
-          >
+          />
-            {showText && t('controls.microphone')}
-          </TrackToggle>
-          <div className="lk-button-group-menu">
-            <MediaDeviceMenu
-              kind="audioinput"
-              onActiveDeviceChange={(_kind, deviceId) =>
-                saveAudioInputDeviceId(deviceId ?? '')
-              }
-            />
-          </div>
         </div>
-      )}
+      </div>
-      {visibleControls.camera && (
+      <div className="lk-button-group">
-        <div className="lk-button-group">
+        <TrackToggle
-          <TrackToggle
+          source={Track.Source.Camera}
-            source={Track.Source.Camera}
+          showIcon={showIcon}
-            showIcon={showIcon}
+          onChange={cameraOnChange}
-            onChange={cameraOnChange}
+          onDeviceError={(error) =>
-            onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Camera, error })
-              onDeviceError?.({ source: Track.Source.Camera, error })
+          }
+        >
+          {showText && t('controls.camera')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="videoinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
             }
-          >
+          />
-            {showText && t('controls.camera')}
-          </TrackToggle>
-          <div className="lk-button-group-menu">
-            <MediaDeviceMenu
-              kind="videoinput"
-              onActiveDeviceChange={(_kind, deviceId) =>
-                saveVideoInputDeviceId(deviceId ?? '')
-              }
-            />
-          </div>
         </div>
-      )}
+      </div>
-      {visibleControls.screenShare && browserSupportsScreenSharing && (
+      {browserSupportsScreenSharing && (
         <TrackToggle
           source={Track.Source.ScreenShare}
           captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
@@ -206,24 +185,18 @@ export function ControlBar({
             )}
         </TrackToggle>
       )}
-      {visibleControls.chat && (
+      <ChatToggle>
-        <ChatToggle>
+        {showIcon && <ChatIcon />}
-          {showIcon && <ChatIcon />}
+        {showText && t('controls.chat')}
-          {showText && t('controls.chat')}
+      </ChatToggle>
-        </ChatToggle>
+      <SettingsMenuToggle>
-      )}
+        {showIcon && <GearIcon />}
-      {visibleControls.settings && (
+        {showText && t('controls.settings')}
-        <SettingsMenuToggle>
+      </SettingsMenuToggle>
-          {showIcon && <GearIcon />}
+      <DisconnectButton>
-          {showText && t('controls.settings')}
+        {showIcon && <LeaveIcon />}
-        </SettingsMenuToggle>
+        {showText && t('controls.leave')}
-      )}
+      </DisconnectButton>
-      {visibleControls.leave && (
-        <DisconnectButton>
-          {showIcon && <LeaveIcon />}
-          {showText && t('controls.leave')}
-        </DisconnectButton>
-      )}
       <StartMediaButton />
     </div>
   )

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -65,7 +65,6 @@ export function VideoConference({
   chatMessageFormatter,
   chatMessageDecoder,
   chatMessageEncoder,
-  SettingsComponent,
   ...props
 }: VideoConferenceProps) {
   const [widgetState, setWidgetState] = React.useState<WidgetState>({
@@ -180,9 +179,7 @@ export function VideoConference({
                 </FocusLayoutContainer>
               </div>
             )}
-            <ControlBar
+            <ControlBar />
-              controls={{ chat: true, settings: !!SettingsComponent }}
-            />
           </div>
           <Chat
             style={{ display: widgetState.showChat ? 'grid' : 'none' }}