From 73bd6444b8952be2a0a8953dcce61f7229167ce2 Mon Sep 17 00:00:00 2001
From: lukasIO <mail@lukasseiler.de>
Date: Tue, 11 Jun 2024 08:31:43 +0200
Subject: [PATCH] Add audio output selection (#270)

---
 lib/SettingsMenu.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/SettingsMenu.tsx b/lib/SettingsMenu.tsx
index 67d9916..41655dd 100644
--- a/lib/SettingsMenu.tsx
+++ b/lib/SettingsMenu.tsx
@@ -6,6 +6,7 @@ import {
   useLocalParticipant,
   MediaDeviceMenu,
   TrackToggle,
+  useRoomContext,
 } from '@livekit/components-react';
 import styles from '../styles/SettingsMenu.module.css';
 
@@ -19,10 +20,11 @@ export interface SettingsMenuProps extends React.HTMLAttributes<HTMLDivElement>
  */
 export function SettingsMenu(props: SettingsMenuProps) {
   const layoutContext = useMaybeLayoutContext();
+  const room = useRoomContext();
 
   const settings = React.useMemo(() => {
     return {
-      media: { camera: true, microphone: true, label: 'Media Devices', speaker: false },
+      media: { camera: true, microphone: true, label: 'Media Devices', speaker: true },
       effects: { label: 'Effects' },
     };
   }, []);
@@ -108,8 +110,11 @@ export function SettingsMenu(props: SettingsMenuProps) {
             {settings.media && settings.media.speaker && (
               <>
                 <h3>Speaker & Headphones</h3>
-                <section>
-                  <MediaDeviceMenu kind="audiooutput"></MediaDeviceMenu>
+                <section className="lk-button-group">
+                  <span className="lk-button">Audio Output</span>
+                  <div className="lk-button-group-menu">
+                    <MediaDeviceMenu kind="audiooutput"></MediaDeviceMenu>
+                  </div>
                 </section>
               </>
             )}