@stream-io/video-react-sdk 0.3.47 → 0.4.0

package/dist/src/components/Notification/SpeakingWhileMutedNotification.d.ts

@@ -1,5 +1,8 @@
 import { PropsWithChildren } from 'react';
 export type SpeakingWhileMutedNotificationProps = {
+    /**
+     * Text message displayed by the notification.
+     */
     text?: string;
 };
 export declare const SpeakingWhileMutedNotification: ({ children, text, }: PropsWithChildren<SpeakingWhileMutedNotificationProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/{Video → VideoPreview}/VideoPreview.d.ts

@@ -1,7 +1,4 @@
 import { ComponentType } from 'react';
-type VideoErrorPreviewProps = {
-    message?: string;
-};
 export type VideoPreviewProps = {
     /**
      * Component rendered when user turns off the video.
@@ -19,10 +16,5 @@ export type VideoPreviewProps = {
      * Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).
      */
     StartingCameraPreview?: ComponentType;
-    /**
-     * Component rendered when the video stream could not be retrieved.
-     */
-    VideoErrorPreview?: ComponentType<VideoErrorPreviewProps>;
 };
-export declare const VideoPreview: ({ mirror, DisabledVideoPreview, NoCameraPreview, StartingCameraPreview, VideoErrorPreview, }: VideoPreviewProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const VideoPreview: ({ mirror, DisabledVideoPreview, NoCameraPreview, StartingCameraPreview, }: VideoPreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/index.d.ts

@@ -14,4 +14,4 @@ export * from './Permissions';
 export * from './StreamTheme';
 export * from './Search';
 export * from './Tooltip';
-export * from './Video';
+export * from './VideoPreview';

package/dist/src/core/components/ParticipantView/ParticipantView.d.ts

@@ -1,17 +1,11 @@
 import { ComponentType, ReactElement } from 'react';
-import { StreamVideoLocalParticipant, StreamVideoParticipant, VideoTrackType } from '@stream-io/video-client';
+import { StreamVideoParticipant, VideoTrackType } from '@stream-io/video-client';
 import { VideoProps } from '../Video';
-export type ParticipantViewContextValue = Required<Pick<ParticipantViewProps, 'participant' | 'trackType'>> & {
-    participantViewElement: HTMLDivElement | null;
-    videoElement: HTMLVideoElement | null;
-    videoPlaceholderElement: HTMLDivElement | null;
-};
-export declare const useParticipantViewContext: () => ParticipantViewContextValue;
 export type ParticipantViewProps = {
     /**
      * The participant whose video/audio stream we want to play.
      */
-    participant: StreamVideoParticipant | StreamVideoLocalParticipant;
+    participant: StreamVideoParticipant;
     /**
      * Override the default UI for rendering participant information/actions.
      * pass `null` if you wish to not render anything
@@ -42,7 +36,7 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
     /**
      * The participant whose video/audio stream we want to play.
      */
-    participant: StreamVideoParticipant | StreamVideoLocalParticipant;
+    participant: StreamVideoParticipant;
     /**
      * Override the default UI for rendering participant information/actions.
      * pass `null` if you wish to not render anything

package/dist/src/core/components/ParticipantView/ParticipantViewContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ParticipantViewProps } from './ParticipantView';
+export type ParticipantViewContextValue = Required<Pick<ParticipantViewProps, 'participant' | 'trackType'>> & {
+    participantViewElement: HTMLDivElement | null;
+    videoElement: HTMLVideoElement | null;
+    videoPlaceholderElement: HTMLDivElement | null;
+};
+export declare const ParticipantViewContext: import("react").Context<ParticipantViewContextValue | undefined>;
+export declare const useParticipantViewContext: () => ParticipantViewContextValue;

package/dist/src/core/components/ParticipantView/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ParticipantView';
+export * from './ParticipantViewContext';
 export * from './DefaultParticipantViewUI';

package/dist/src/core/components/StreamCall/StreamCall.d.ts

@@ -1,11 +1,2 @@
-import { PropsWithChildren } from 'react';
-import { Call } from '@stream-io/video-client';
-import { MediaDevicesProviderProps } from '../../contexts';
-export type StreamCallProps = {
-    call: Call;
-    /**
-     * An optional props to pass to the `MediaDevicesProvider`.
-     */
-    mediaDevicesProviderProps?: MediaDevicesProviderProps;
-};
-export declare const StreamCall: ({ children, call, mediaDevicesProviderProps, }: PropsWithChildren<StreamCallProps>) => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+export declare const StreamCall: (props: import("react").PropsWithChildren<import("@stream-io/video-react-bindings").StreamCallProviderProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/core/hooks/index.d.ts

@@ -1,4 +1,2 @@
-export * from './useAudioPublisher';
 export * from './useDevices';
-export * from './useVideoPublisher';
 export * from './useTrackElementVisibility';

package/dist/src/core/hooks/useDevices.d.ts

@@ -1,100 +1 @@
-import { Observable } from 'rxjs';
 export declare const useHasBrowserPermissions: (permissionName: PermissionName) => boolean;
-/**
- * Observes changes in connected devices and maintains an up-to-date array of connected MediaDeviceInfo objects.
- * @param observeDevices
- * @category Device Management
- */
-export declare const useDevices: (observeDevices: () => Observable<MediaDeviceInfo[]>) => MediaDeviceInfo[];
-/**
- * Observes changes and maintains an array of connected video input devices
- * @category Device Management
- */
-export declare const useVideoDevices: () => MediaDeviceInfo[];
-/**
- * Observes changes and maintains an array of connected audio input devices
- * @category Device Management
- */
-export declare const useAudioInputDevices: () => MediaDeviceInfo[];
-/**
- * Observes changes and maintains an array of connected audio output devices
- * @category Device Management
- */
-export declare const useAudioOutputDevices: () => MediaDeviceInfo[];
-/**
- * Verifies that newly selected device id exists among the registered devices.
- * If the selected device id is not found among existing devices, switches to the default device.
- * The media devices are observed only if a given permission ('camera' resp. 'microphone') is granted in browser.
- * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
- * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
- * @param canObserve
- * @param devices$
- * @param switchToDefaultDevice
- * @param selectedDeviceId
- * @category Device Management
- */
-export declare const useDeviceFallback: (canObserve: boolean, devices$: Observable<MediaDeviceInfo[]>, switchToDefaultDevice: () => void, selectedDeviceId?: string) => void;
-/**
- * Verifies that newly selected video device id exists among the registered devices.
- * If the selected device id is not found among existing devices, switches to the default video device.
- * The media devices are observed only if 'camera' permission is granted in browser.
- * It is integrators responsibility to instruct users how to enable required permissions.
- * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
- * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
- * @param switchToDefaultDevice
- * @param canObserve
- * @param selectedDeviceId
- * @category Device Management
- */
-export declare const useVideoDeviceFallback: (switchToDefaultDevice: () => void, canObserve: boolean, selectedDeviceId?: string) => void;
-/**
- * Verifies that newly selected audio input device id exists among the registered devices.
- * If the selected device id is not found among existing devices, switches to the default audio input device.
- * The media devices are observed only if 'microphone' permission is granted in browser.
- * It is integrators responsibility to instruct users how to enable required permissions.
- * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
- * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
- * @param switchToDefaultDevice
- * @param canObserve
- * @param selectedDeviceId
- * @category Device Management
- */
-export declare const useAudioInputDeviceFallback: (switchToDefaultDevice: () => void, canObserve: boolean, selectedDeviceId?: string) => void;
-/**
- * Verifies that newly selected audio output device id exists among the registered devices.
- * If the selected device id is not found among existing devices, switches to the default audio output device.
- * The media devices are observed only if 'microphone' permission is granted in browser.
- * It is integrators responsibility to instruct users how to enable required permissions.
- * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
- * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
- * @param switchToDefaultDevice
- * @param canObserve
- * @param selectedDeviceId
- * @category Device Management
- */
-export declare const useAudioOutputDeviceFallback: (switchToDefaultDevice: () => void, canObserve: boolean, selectedDeviceId?: string) => void;
-/**
- * Observes devices of certain kind are made unavailable and executes onDisconnect callback.
- * @param observeDevices
- * @param onDisconnect
- * @category Device Management
- */
-export declare const useOnUnavailableDevices: (observeDevices: Observable<MediaDeviceInfo[]>, onDisconnect: () => void) => void;
-/**
- * Observes disconnect of all video devices and executes onDisconnect callback.
- * @param onDisconnect
- * @category Device Management
- */
-export declare const useOnUnavailableVideoDevices: (onDisconnect: () => void) => void;
-/**
- * Observes disconnect of all audio input devices and executes onDisconnect callback.
- * @param onDisconnect
- * @category Device Management
- */
-export declare const useOnUnavailableAudioInputDevices: (onDisconnect: () => void) => void;
-/**
- * Observes disconnect of all audio output devices and executes onDisconnect callback.
- * @param onDisconnect
- * @category Device Management
- */
-export declare const useOnUnavailableAudioOutputDevices: (onDisconnect: () => void) => void;

package/dist/src/core/index.d.ts

@@ -1,3 +1,2 @@
 export * from './components';
-export * from './contexts';
 export * from './hooks';

package/dist/src/hooks/index.d.ts

@@ -1,7 +1,5 @@
 export * from './useFloatingUIPreset';
+export * from './usePersistedDevicePreferences';
 export * from './useScrollPosition';
-export * from './useToggleAudioMuteState';
-export * from './useToggleVideoMuteState';
-export * from './useToggleScreenShare';
 export * from './useToggleCallRecording';
 export * from './useRequestPermission';

package/dist/src/hooks/usePersistedDevicePreferences.d.ts

@@ -0,0 +1,13 @@
+export type LocalDevicePreference = {
+    selectedDeviceId: string;
+    muted: boolean;
+};
+export type LocalDevicePreferences = {
+    [type in 'mic' | 'camera' | 'speaker']: LocalDevicePreference;
+};
+/**
+ * This hook will apply and persist the device preferences from local storage.
+ *
+ * @param key the key to use for local storage.
+ */
+export declare const usePersistedDevicePreferences: (key?: string) => void;

package/dist/src/translations/index.d.ts

@@ -36,6 +36,8 @@ export declare const translations: {
         Me: string;
         Unknown: string;
         "Toggle device menu": string;
+        "You are presenting your screen": string;
+        "Stop Screen Sharing": string;
         Allow: string;
         Revoke: string;
         Dismiss: string;

package/index.ts

@@ -11,8 +11,8 @@ export * from './src/translations';
 export {
   useHorizontalScrollPosition,
   useVerticalScrollPosition,
-  useToggleAudioMuteState,
-  useToggleVideoMuteState,
+  useRequestPermission,
+  usePersistedDevicePreferences,
 } from './src/hooks';
 
 const [major, minor, patch] = (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.3.47",
+  "version": "0.4.0",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -31,8 +31,8 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/video-client": "^0.3.36",
-    "@stream-io/video-react-bindings": "^0.2.37",
+    "@stream-io/video-client": "^0.4.0",
+    "@stream-io/video-react-bindings": "^0.3.0",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",
     "rxjs": "~7.8.1"

package/src/components/CallControls/CallControls.tsx

@@ -1,12 +1,10 @@
-import {
-  CallStatsButton,
-  CancelCallButton,
-  RecordCallButton,
-  ScreenShareButton,
-  ToggleAudioPublishingButton,
-  ToggleVideoPublishingButton,
-} from './index';
 import { SpeakingWhileMutedNotification } from '../Notification';
+import { RecordCallButton } from './RecordCallButton';
+import { CallStatsButton } from './CallStatsButton';
+import { ScreenShareButton } from './ScreenShareButton';
+import { ToggleAudioPublishingButton } from './ToggleAudioButton';
+import { ToggleVideoPublishingButton } from './ToggleVideoButton';
+import { CancelCallButton } from './CancelCallButton';
 
 export type CallControlsProps = {
   onLeave?: () => void;

package/src/components/CallControls/ScreenShareButton.tsx

@@ -1,29 +1,27 @@
 import { OwnCapability } from '@stream-io/video-client';
 import {
   Restricted,
-  useCall,
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
 import { CompositeButton, IconButton } from '../Button/';
 import { PermissionNotification } from '../Notification';
-import { useToggleScreenShare } from '../../hooks';
+import { useRequestPermission } from '../../hooks';
 
 export type ScreenShareButtonProps = {
   caption?: string;
 };
 
 export const ScreenShareButton = (props: ScreenShareButtonProps) => {
-  const call = useCall();
-  const { useHasOngoingScreenShare } = useCallStateHooks();
-  const isSomeoneScreenSharing = useHasOngoingScreenShare();
-
   const { t } = useI18n();
   const { caption = t('Screen Share') } = props;
 
-  const { toggleScreenShare, isAwaitingPermission, isScreenSharing } =
-    useToggleScreenShare();
+  const { useHasOngoingScreenShare, useScreenShareState } = useCallStateHooks();
+  const isSomeoneScreenSharing = useHasOngoingScreenShare();
+  const { hasPermission, requestPermission, isAwaitingPermission } =
+    useRequestPermission(OwnCapability.SCREENSHARE);
 
+  const { screenShare, isMute: isScreenSharing } = useScreenShareState();
   return (
     <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>
       <PermissionNotification
@@ -37,8 +35,14 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
           <IconButton
             icon={isScreenSharing ? 'screen-share-on' : 'screen-share-off'}
             title={t('Share screen')}
-            disabled={(!isScreenSharing && isSomeoneScreenSharing) || !call}
-            onClick={toggleScreenShare}
+            disabled={!isScreenSharing && isSomeoneScreenSharing}
+            onClick={async () => {
+              if (!hasPermission) {
+                await requestPermission();
+              } else {
+                await screenShare.toggle();
+              }
+            }}
           />
         </CompositeButton>
       </PermissionNotification>

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -1,16 +1,14 @@
 import { ComponentType } from 'react';
-import { OwnCapability, SfuModels } from '@stream-io/video-client';
+import { OwnCapability } from '@stream-io/video-client';
 import {
   Restricted,
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
-
-import { useMediaDevices } from '../../core';
 import { DeviceSelectorAudioInput } from '../DeviceSettings';
 import { CompositeButton, IconButton } from '../Button';
 import { PermissionNotification } from '../Notification';
-import { useToggleAudioMuteState } from '../../hooks';
+import { useRequestPermission } from '../../hooks';
 
 export type ToggleAudioPreviewButtonProps = {
   caption?: string;
@@ -20,20 +18,17 @@ export type ToggleAudioPreviewButtonProps = {
 export const ToggleAudioPreviewButton = (
   props: ToggleAudioPreviewButtonProps,
 ) => {
-  const { initialAudioEnabled, toggleInitialAudioMuteState } =
-    useMediaDevices();
   const { t } = useI18n();
   const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
 
+  const { useMicrophoneState } = useCallStateHooks();
+  const { microphone, isMute } = useMicrophoneState();
+
   return (
-    <CompositeButton
-      Menu={Menu}
-      active={!initialAudioEnabled}
-      caption={caption || t('Mic')}
-    >
+    <CompositeButton Menu={Menu} active={isMute} caption={caption || t('Mic')}>
       <IconButton
-        icon={initialAudioEnabled ? 'mic' : 'mic-off'}
-        onClick={toggleInitialAudioMuteState}
+        icon={!isMute ? 'mic' : 'mic-off'}
+        onClick={() => microphone.toggle()}
       />
     </CompositeButton>
   );
@@ -47,18 +42,14 @@ export type ToggleAudioPublishingButtonProps = {
 export const ToggleAudioPublishingButton = (
   props: ToggleAudioPublishingButtonProps,
 ) => {
-  const { useLocalParticipant } = useCallStateHooks();
-  const localParticipant = useLocalParticipant();
   const { t } = useI18n();
-
   const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
 
-  const isAudioMute = !localParticipant?.publishedTracks.includes(
-    SfuModels.TrackType.AUDIO,
-  );
+  const { hasPermission, requestPermission, isAwaitingPermission } =
+    useRequestPermission(OwnCapability.SEND_AUDIO);
 
-  const { toggleAudioMuteState: handleClick, isAwaitingPermission } =
-    useToggleAudioMuteState();
+  const { useMicrophoneState } = useCallStateHooks();
+  const { microphone, isMute } = useMicrophoneState();
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
@@ -69,10 +60,16 @@ export const ToggleAudioPublishingButton = (
         messageAwaitingApproval={t('Awaiting for an approval to speak.')}
         messageRevoked={t('You can no longer speak.')}
       >
-        <CompositeButton Menu={Menu} active={isAudioMute} caption={caption}>
+        <CompositeButton Menu={Menu} active={isMute} caption={caption}>
           <IconButton
-            icon={isAudioMute ? 'mic-off' : 'mic'}
-            onClick={handleClick}
+            icon={isMute ? 'mic-off' : 'mic'}
+            onClick={async () => {
+              if (!hasPermission) {
+                await requestPermission();
+              } else {
+                await microphone.toggle();
+              }
+            }}
           />
         </CompositeButton>
       </PermissionNotification>

package/src/components/CallControls/ToggleAudioOutputButton.tsx

@@ -15,7 +15,7 @@ export const ToggleAudioOutputButton = (
   const { caption = t('Speakers'), Menu = DeviceSelectorAudioOutput } = props;
 
   return (
-    <CompositeButton Menu={Menu} active caption={caption}>
+    <CompositeButton Menu={Menu} caption={caption}>
       <IconButton icon="speaker" />
     </CompositeButton>
   );

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -5,12 +5,11 @@ import {
   useI18n,
 } from '@stream-io/video-react-bindings';
 
-import { OwnCapability, SfuModels } from '@stream-io/video-client';
+import { OwnCapability } from '@stream-io/video-client';
 import { CompositeButton, IconButton } from '../Button/';
-import { useMediaDevices } from '../../core';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
-import { useToggleVideoMuteState } from '../../hooks';
+import { useRequestPermission } from '../../hooks';
 
 export type ToggleVideoPreviewButtonProps = {
   caption?: string;
@@ -20,19 +19,17 @@ export type ToggleVideoPreviewButtonProps = {
 export const ToggleVideoPreviewButton = (
   props: ToggleVideoPreviewButtonProps,
 ) => {
-  const { toggleInitialVideoMuteState, initialVideoState } = useMediaDevices();
   const { t } = useI18n();
   const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
 
+  const { useCameraState } = useCallStateHooks();
+  const { camera, isMute } = useCameraState();
+
   return (
-    <CompositeButton
-      Menu={Menu}
-      active={!initialVideoState.enabled}
-      caption={caption}
-    >
+    <CompositeButton Menu={Menu} active={isMute} caption={caption}>
       <IconButton
-        icon={initialVideoState.enabled ? 'camera' : 'camera-off'}
-        onClick={toggleInitialVideoMuteState}
+        icon={!isMute ? 'camera' : 'camera-off'}
+        onClick={() => camera.toggle()}
       />
     </CompositeButton>
   );
@@ -46,18 +43,14 @@ type ToggleVideoPublishingButtonProps = {
 export const ToggleVideoPublishingButton = (
   props: ToggleVideoPublishingButtonProps,
 ) => {
-  const { useLocalParticipant } = useCallStateHooks();
-  const localParticipant = useLocalParticipant();
   const { t } = useI18n();
-
   const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
 
-  const isVideoMute = !localParticipant?.publishedTracks.includes(
-    SfuModels.TrackType.VIDEO,
-  );
+  const { hasPermission, requestPermission, isAwaitingPermission } =
+    useRequestPermission(OwnCapability.SEND_VIDEO);
 
-  const { toggleVideoMuteState: handleClick, isAwaitingPermission } =
-    useToggleVideoMuteState();
+  const { useCameraState } = useCallStateHooks();
+  const { camera, isMute } = useCameraState();
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
@@ -70,10 +63,16 @@ export const ToggleVideoPublishingButton = (
         )}
         messageRevoked={t('You can no longer share your video.')}
       >
-        <CompositeButton Menu={Menu} active={isVideoMute} caption={caption}>
+        <CompositeButton Menu={Menu} active={isMute} caption={caption}>
           <IconButton
-            icon={isVideoMute ? 'camera-off' : 'camera'}
-            onClick={handleClick}
+            icon={isMute ? 'camera-off' : 'camera'}
+            onClick={async () => {
+              if (!hasPermission) {
+                await requestPermission();
+              } else {
+                await camera.toggle();
+              }
+            }}
           />
         </CompositeButton>
       </PermissionNotification>

package/src/components/CallParticipantsList/CallParticipantsList.tsx

@@ -17,7 +17,7 @@ import {
   OwnCapability,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
-import { clsx } from 'clsx';
+import clsx from 'clsx';
 
 import { BlockedUserListing } from './BlockedUserListing';
 import {

package/src/components/DeviceSettings/DeviceSelectorAudio.tsx

@@ -1,28 +1,25 @@
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 import { DeviceSelector } from './DeviceSelector';
-import {
-  useMediaDevices,
-  useAudioInputDevices,
-  useAudioOutputDevices,
-} from '../../core';
 
 export type DeviceSelectorAudioInputProps = {
   title?: string;
 };
 
 export const DeviceSelectorAudioInput = ({
-  title = 'Select a Mic',
+  title,
 }: DeviceSelectorAudioInputProps) => {
-  const { selectedAudioInputDeviceId, switchDevice } = useMediaDevices();
-  const audioInputDevices = useAudioInputDevices();
+  const { t } = useI18n();
+  const { useMicrophoneState } = useCallStateHooks();
+  const { microphone, selectedDevice, devices } = useMicrophoneState();
 
   return (
     <DeviceSelector
-      devices={audioInputDevices}
-      selectedDeviceId={selectedAudioInputDeviceId}
-      onChange={(deviceId) => {
-        switchDevice('audioinput', deviceId);
+      devices={devices || []}
+      selectedDeviceId={selectedDevice}
+      onChange={async (deviceId) => {
+        await microphone.select(deviceId);
       }}
-      title={title}
+      title={title || t('Select a Mic')}
     />
   );
 };
@@ -32,26 +29,23 @@ export type DeviceSelectorAudioOutputProps = {
 };
 
 export const DeviceSelectorAudioOutput = ({
-  title = 'Select Speakers',
+  title,
 }: DeviceSelectorAudioOutputProps) => {
-  const {
-    isAudioOutputChangeSupported,
-    selectedAudioOutputDeviceId,
-    switchDevice,
-  } = useMediaDevices();
-
-  const audioOutputDevices = useAudioOutputDevices();
+  const { t } = useI18n();
+  const { useSpeakerState } = useCallStateHooks();
+  const { speaker, selectedDevice, devices, isDeviceSelectionSupported } =
+    useSpeakerState();
 
-  if (!isAudioOutputChangeSupported) return null;
+  if (!isDeviceSelectionSupported) return null;
 
   return (
     <DeviceSelector
-      devices={audioOutputDevices}
-      selectedDeviceId={selectedAudioOutputDeviceId}
+      devices={devices}
+      selectedDeviceId={selectedDevice}
       onChange={(deviceId) => {
-        switchDevice('audiooutput', deviceId);
+        speaker.select(deviceId);
       }}
-      title={title}
+      title={title || t('Select Speakers')}
     />
   );
 };

package/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -1,22 +1,23 @@
 import { DeviceSelector } from './DeviceSelector';
-import { useMediaDevices, useVideoDevices } from '../../core';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 
 export type DeviceSelectorVideoProps = {
   title?: string;
 };
 
 export const DeviceSelectorVideo = ({ title }: DeviceSelectorVideoProps) => {
-  const { selectedVideoDeviceId, switchDevice } = useMediaDevices();
-  const videoDevices = useVideoDevices();
+  const { t } = useI18n();
+  const { useCameraState } = useCallStateHooks();
+  const { camera, devices, selectedDevice } = useCameraState();
 
   return (
     <DeviceSelector
-      devices={videoDevices}
-      selectedDeviceId={selectedVideoDeviceId}
-      onChange={(deviceId) => {
-        switchDevice('videoinput', deviceId);
+      devices={devices || []}
+      selectedDeviceId={selectedDevice}
+      onChange={async (deviceId) => {
+        await camera.select(deviceId);
       }}
-      title={title || 'Select a Camera'}
+      title={title || t('Select a Camera')}
     />
   );
 };

package/src/components/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import { clsx } from 'clsx';
+import clsx from 'clsx';
 
 export type IconProps = {
   icon: string;