chore(ux-feedback): re-arrange call control buttons (#1093)

Applies consistent ordering of the call control buttons: - Mic - Camera - Speakers
GetStream · Sep 18, 2023 · 4b523f4 · 4b523f4
1 parent f1e36cc
commit 4b523f4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 30 deletions.
diff --git a/packages/react-sdk/README.md b/packages/react-sdk/README.md
@@ -58,7 +58,7 @@ Here are some of the features we support:
 - [X] Composite layout for streaming and recording
 - [ ] Livestream Player
 - [ ] Screenshare Audio
-- [ ] Screensharing resolution and FPS control
+- [ ] Screen-sharing resolution and FPS control
 - [ ] Fast-reconnects
 - [ ] New Device Management API
 - [X] SFU retries

diff --git a/sample-apps/react/react-dogfood/components/Lobby.tsx b/sample-apps/react/react-dogfood/components/Lobby.tsx
@@ -98,9 +98,9 @@ export const Lobby = ({ onJoin, callId, enablePreview = true }: LobbyProps) => {
                   marginTop: '0.75rem',
                 }}
               >
-                {isAudioOutputChangeSupported && <ToggleAudioOutputButton />}
                 <ToggleAudioPreviewButton Menu={LobbyToggleAudioMenu} />
                 <ToggleVideoPreviewButton />
+                {isAudioOutputChangeSupported && <ToggleAudioOutputButton />}
               </div>
             )}
           </Box>

diff --git a/sample-apps/react/react-video-demo/src/components/ControlMenu/ControlMenu.tsx b/sample-apps/react/react-video-demo/src/components/ControlMenu/ControlMenu.tsx
@@ -104,35 +104,8 @@ export const ControlMenu: FC<Props> = ({ className, call, preview }) => {
     setAudioOutputVisible(!isAudioOutputVisible);
   }, [isAudioOutputVisible]);
 
-  const rootClassName = classnames(styles.root, className);
-
   return (
-    <div className={rootClassName}>
-      {isAudioOutputChangeSupported ? (
-        <PanelButton
-          className={styles.speakerButton}
-          prefix={<Speaker />}
-          portalId="audio-output-settings"
-          label="Audio"
-          showPanel={isAudioOutputVisible}
-          onClick={() => toggleAudioOutputPanel()}
-          panel={
-            <Portal
-              className={styles.audioSettings}
-              selector="audio-output-settings"
-            >
-              <ControlMenuPanel
-                className={styles.panel}
-                selectedDeviceId={selectedAudioOutputDeviceId}
-                selectDevice={switchDevice}
-                devices={audioOutputDevices}
-                title="Select an Audio Output"
-              />
-            </Portal>
-          }
-        />
-      ) : null}
-
+    <div className={classnames(styles.root, className)}>
       <ControlButton
         className={styles.audioButton}
         onClick={audio}
@@ -170,6 +143,31 @@ export const ControlMenu: FC<Props> = ({ className, call, preview }) => {
           </Portal>
         }
       />
+
+      {isAudioOutputChangeSupported ? (
+        <PanelButton
+          className={styles.speakerButton}
+          prefix={<Speaker />}
+          portalId="audio-output-settings"
+          label="Audio"
+          showPanel={isAudioOutputVisible}
+          onClick={() => toggleAudioOutputPanel()}
+          panel={
+            <Portal
+              className={styles.audioSettings}
+              selector="audio-output-settings"
+            >
+              <ControlMenuPanel
+                className={styles.panel}
+                selectedDeviceId={selectedAudioOutputDeviceId}
+                selectDevice={switchDevice}
+                devices={audioOutputDevices}
+                title="Select an Audio Output"
+              />
+            </Portal>
+          }
+        />
+      ) : null}
     </div>
   );
 };