♻️(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,7 +127,6 @@ export function ControlBar({
 
   return (
     <div {...htmlProps}>
-      {visibleControls.microphone && (
       <div className="lk-button-group">
         <TrackToggle
           source={Track.Source.Microphone}
@@ -165,8 +147,6 @@ export function ControlBar({
           />
         </div>
       </div>
-      )}
-      {visibleControls.camera && (
       <div className="lk-button-group">
         <TrackToggle
           source={Track.Source.Camera}
@@ -187,8 +167,7 @@ export function ControlBar({
           />
         </div>
       </div>
-      )}
+      {browserSupportsScreenSharing && (
-      {visibleControls.screenShare && browserSupportsScreenSharing && (
         <TrackToggle
           source={Track.Source.ScreenShare}
           captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
@@ -206,24 +185,18 @@ export function ControlBar({
             )}
         </TrackToggle>
       )}
-      {visibleControls.chat && (
       <ChatToggle>
         {showIcon && <ChatIcon />}
         {showText && t('controls.chat')}
       </ChatToggle>
-      )}
-      {visibleControls.settings && (
       <SettingsMenuToggle>
         {showIcon && <GearIcon />}
         {showText && t('controls.settings')}
       </SettingsMenuToggle>
-      )}
-      {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' }}