fix(pronto): use list visualType for device selection mobile devices (#2202)

### 💡 Overview
Use list visualType for device selectors on mobile devices. The preview
mode renders a live media stream per device, which is not reliably
supported on mobile browsers.

### 📝 Implementation notes

🎫 Ticket:
https://linear.app/stream/issue/REACT-940/device-preview-for-audio-and-video-devices

📑 Docs: GetStream/docs-content#1195


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Video device selector now automatically adapts its display layout
based on device type (list view on mobile, preview view on desktop) for
improved reliability and usability across different platforms.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: jdimovska

packages/react-sdk/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -5,6 +5,12 @@ import { DeviceVideoPreviewItem } from './DeviceVideoPreviewItem';
 
 export type DeviceSelectorVideoProps = {
   title?: string;
+  /**
+   * The visual style used to render the device selector.
+   *
+   * Note: `'preview'` is not reliable on mobile browsers. Use `'list'` or
+   * `'dropdown'` on mobile devices.
+   */
   visualType?: 'list' | 'dropdown' | 'preview';
 };
 

sample-apps/react/react-dogfood/components/ToggleCameraButton.tsx

@@ -9,6 +9,7 @@ import {
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-sdk';
+import { isMobile } from '../helpers/isMobile';
 
 const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
   function ToggleMenuButton(props, ref) {
@@ -34,13 +35,14 @@ const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
 );
 
 export const ToggleCameraButton = () => {
+  const visualType = isMobile() ? 'list' : 'preview';
   return (
     <MenuToggle
       placement="top-start"
       ToggleButton={ToggleMenuButton}
       visualType={MenuVisualType.MENU}
     >
-      <DeviceSelectorVideo visualType="preview" />
+      <DeviceSelectorVideo visualType={visualType} />
     </MenuToggle>
   );
 };

sample-apps/react/react-dogfood/components/ToggleDualCameraButton.tsx

@@ -4,15 +4,18 @@ import {
   Restricted,
   ToggleVideoPublishingButton,
 } from '@stream-io/video-react-sdk';
+import { isMobile } from '../helpers/isMobile';
 import { DegradedPerformanceNotification } from './DegradedPerformanceNotification';
 
 export const ToggleDualCameraButton = () => {
+  const visualType = isMobile() ? 'list' : 'preview';
+
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]} hasPermissionsOnly>
       <div className="rd__dual-toggle">
         <DegradedPerformanceNotification className="rd__call-controls__notification" />
         <ToggleVideoPublishingButton
-          Menu={<DeviceSelectorVideo visualType="preview" />}
+          Menu={<DeviceSelectorVideo visualType={visualType} />}
           menuPlacement="top"
         />
       </div>

sample-apps/react/react-dogfood/helpers/isMobile.ts

@@ -0,0 +1,2 @@
+export const isMobile = () =>
+  typeof navigator !== 'undefined' && /Mobi/i.test(navigator.userAgent);