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

package/dist/index.cjs.js

@@ -5,8 +5,6 @@ var videoReactBindings = require('@stream-io/video-react-bindings');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var clsx = require('clsx');
-var rxjs = require('rxjs');
-var operators = require('rxjs/operators');
 var react$1 = require('@floating-ui/react');
 var line = require('@nivo/line');
 
@@ -198,377 +196,6 @@ const useHasBrowserPermissions = (permissionName) => {
     }, [permissionName]);
     return canSubscribe;
 };
-/**
- * Observes changes in connected devices and maintains an up-to-date array of connected MediaDeviceInfo objects.
- * @param observeDevices
- * @category Device Management
- */
-const useDevices = (observeDevices) => {
-    const [devices, setDevices] = react.useState([]);
-    react.useEffect(() => {
-        const subscription = observeDevices().subscribe(setDevices);
-        return () => {
-            subscription.unsubscribe();
-        };
-    }, [observeDevices]);
-    return devices;
-};
-/**
- * Observes changes and maintains an array of connected video input devices
- * @category Device Management
- */
-const useVideoDevices = () => useDevices(videoClient.getVideoDevices);
-/**
- * Observes changes and maintains an array of connected audio input devices
- * @category Device Management
- */
-const useAudioInputDevices = () => useDevices(videoClient.getAudioDevices);
-/**
- * Observes changes and maintains an array of connected audio output devices
- * @category Device Management
- */
-const useAudioOutputDevices = () => useDevices(videoClient.getAudioOutputDevices);
-/**
- * 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
- */
-const useDeviceFallback = (canObserve, devices$, switchToDefaultDevice, selectedDeviceId) => {
-    react.useEffect(() => {
-        if (!canObserve)
-            return;
-        const validateDeviceId = devices$.pipe().subscribe((devices) => {
-            const deviceFound = devices.find((device) => device.deviceId === selectedDeviceId);
-            if (!deviceFound)
-                switchToDefaultDevice();
-        });
-        return () => {
-            validateDeviceId.unsubscribe();
-        };
-    }, [canObserve, devices$, selectedDeviceId, switchToDefaultDevice]);
-};
-/**
- * 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
- */
-const useVideoDeviceFallback = (switchToDefaultDevice, canObserve, selectedDeviceId) => useDeviceFallback(canObserve, videoClient.getVideoDevices(), switchToDefaultDevice, selectedDeviceId);
-/**
- * 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
- */
-const useAudioInputDeviceFallback = (switchToDefaultDevice, canObserve, selectedDeviceId) => useDeviceFallback(canObserve, videoClient.getAudioDevices(), switchToDefaultDevice, selectedDeviceId);
-/**
- * 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
- */
-const useAudioOutputDeviceFallback = (switchToDefaultDevice, canObserve, selectedDeviceId) => useDeviceFallback(canObserve, videoClient.getAudioOutputDevices(), switchToDefaultDevice, selectedDeviceId);
-/**
- * Observes devices of certain kind are made unavailable and executes onDisconnect callback.
- * @param observeDevices
- * @param onDisconnect
- * @category Device Management
- */
-const useOnUnavailableDevices = (observeDevices, onDisconnect) => {
-    react.useEffect(() => {
-        const subscription = observeDevices
-            .pipe(rxjs.pairwise())
-            .subscribe(([prev, current]) => {
-            if (prev.length > 0 && current.length === 0)
-                onDisconnect();
-        });
-        return () => subscription.unsubscribe();
-    }, [observeDevices, onDisconnect]);
-};
-/**
- * Observes disconnect of all video devices and executes onDisconnect callback.
- * @param onDisconnect
- * @category Device Management
- */
-const useOnUnavailableVideoDevices = (onDisconnect) => useOnUnavailableDevices(videoClient.getVideoDevices(), onDisconnect);
-/**
- * Observes disconnect of all audio input devices and executes onDisconnect callback.
- * @param onDisconnect
- * @category Device Management
- */
-const useOnUnavailableAudioInputDevices = (onDisconnect) => useOnUnavailableDevices(videoClient.getAudioDevices(), onDisconnect);
-/**
- * Observes disconnect of all audio output devices and executes onDisconnect callback.
- * @param onDisconnect
- * @category Device Management
- */
-const useOnUnavailableAudioOutputDevices = (onDisconnect) => useOnUnavailableDevices(videoClient.getAudioOutputDevices(), onDisconnect);
-
-/**
- * @internal
- * @category Device Management
- */
-const useAudioPublisher = ({ initialAudioMuted, audioDeviceId, }) => {
-    const call = videoReactBindings.useCall();
-    const { useCallState, useCallCallingState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
-    const callState = useCallState();
-    const callingState = useCallCallingState();
-    const participant = useLocalParticipant();
-    const hasBrowserPermissionAudioInput = useHasBrowserPermissions('microphone');
-    const { localParticipant$ } = callState;
-    const isPublishingAudio = participant?.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
-    const publishAudioStream = react.useCallback(async () => {
-        if (!call)
-            return;
-        if (!call.permissionsContext.hasPermission(videoClient.OwnCapability.SEND_AUDIO)) {
-            throw new Error(`No permission to publish audio`);
-        }
-        try {
-            const audioStream = await videoClient.getAudioStream({
-                deviceId: audioDeviceId,
-            });
-            await call.publishAudioStream(audioStream);
-        }
-        catch (e) {
-            console.log('Failed to publish audio stream', e);
-        }
-    }, [audioDeviceId, call]);
-    const lastAudioDeviceId = react.useRef(audioDeviceId);
-    react.useEffect(() => {
-        if (callingState === videoClient.CallingState.JOINED &&
-            audioDeviceId !== lastAudioDeviceId.current) {
-            lastAudioDeviceId.current = audioDeviceId;
-            publishAudioStream().catch((e) => {
-                console.error('Failed to publish audio stream', e);
-            });
-        }
-    }, [audioDeviceId, callingState, publishAudioStream]);
-    const initialPublishRun = react.useRef(false);
-    react.useEffect(() => {
-        if (callingState === videoClient.CallingState.JOINED &&
-            !initialPublishRun.current &&
-            !initialAudioMuted) {
-            // automatic publishing should happen only when joining the call
-            // from the lobby, and the audio is not muted
-            publishAudioStream().catch((e) => {
-                console.error('Failed to publish audio stream', e);
-            });
-            initialPublishRun.current = true;
-        }
-    }, [callingState, initialAudioMuted, publishAudioStream]);
-    react.useEffect(() => {
-        if (!localParticipant$ || !hasBrowserPermissionAudioInput)
-            return;
-        const subscription = videoClient.watchForDisconnectedAudioDevice(localParticipant$.pipe(rxjs.map((p) => p?.audioDeviceId))).subscribe(async () => {
-            if (!call)
-                return;
-            call.setAudioDevice(undefined);
-            await call.stopPublish(videoClient.SfuModels.TrackType.AUDIO);
-        });
-        return () => {
-            subscription.unsubscribe();
-        };
-    }, [hasBrowserPermissionAudioInput, localParticipant$, call]);
-    react.useEffect(() => {
-        if (!participant?.audioStream || !call || !isPublishingAudio)
-            return;
-        const [track] = participant.audioStream.getAudioTracks();
-        const selectedAudioDeviceId = track.getSettings().deviceId;
-        const republishDefaultDevice = videoClient.watchForAddedDefaultAudioDevice().subscribe(async () => {
-            if (!(call &&
-                participant.audioStream &&
-                selectedAudioDeviceId === 'default'))
-                return;
-            // We need to stop the original track first in order
-            // we can retrieve the new default device stream
-            track.stop();
-            const audioStream = await videoClient.getAudioStream({
-                deviceId: 'default',
-            });
-            await call.publishAudioStream(audioStream);
-        });
-        const handleTrackEnded = async () => {
-            if (selectedAudioDeviceId === audioDeviceId) {
-                const audioStream = await videoClient.getAudioStream({
-                    deviceId: audioDeviceId,
-                });
-                await call.publishAudioStream(audioStream);
-            }
-        };
-        track.addEventListener('ended', handleTrackEnded);
-        return () => {
-            track.removeEventListener('ended', handleTrackEnded);
-            republishDefaultDevice.unsubscribe();
-        };
-    }, [audioDeviceId, call, participant?.audioStream, isPublishingAudio]);
-    return publishAudioStream;
-};
-
-const useQueryParams = () => {
-    return react.useMemo(() => typeof window === 'undefined'
-        ? null
-        : new URLSearchParams(window.location.search), []);
-};
-/**
- * Internal purpose hook. Enables certain development mode tools.
- */
-const useIsDebugMode = () => {
-    const params = useQueryParams();
-    return !!params?.get('debug');
-};
-const useDebugPreferredVideoCodec = () => {
-    const params = useQueryParams();
-    return params?.get('video_codec');
-};
-
-/**
- * @internal
- * @category Device Management
- */
-const useVideoPublisher = ({ initialVideoMuted, videoDeviceId, }) => {
-    const call = videoReactBindings.useCall();
-    const { useCallState, useCallCallingState, useLocalParticipant, useCallSettings, } = videoReactBindings.useCallStateHooks();
-    const callState = useCallState();
-    const callingState = useCallCallingState();
-    const participant = useLocalParticipant();
-    const hasBrowserPermissionVideoInput = useHasBrowserPermissions('camera');
-    const { localParticipant$ } = callState;
-    const preferredCodec = useDebugPreferredVideoCodec();
-    const isPublishingVideo = participant?.publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
-    const settings = useCallSettings();
-    const videoSettings = settings?.video;
-    const targetResolution = videoSettings?.target_resolution;
-    const publishVideoStream = react.useCallback(async () => {
-        if (!call)
-            return;
-        if (!call.permissionsContext.hasPermission(videoClient.OwnCapability.SEND_VIDEO)) {
-            throw new Error(`No permission to publish video`);
-        }
-        try {
-            const videoStream = await videoClient.getVideoStream({
-                deviceId: videoDeviceId,
-                width: targetResolution?.width,
-                height: targetResolution?.height,
-                facingMode: toFacingMode(videoSettings?.camera_facing),
-            });
-            await call.publishVideoStream(videoStream, { preferredCodec });
-        }
-        catch (e) {
-            console.log('Failed to publish video stream', e);
-        }
-    }, [
-        call,
-        preferredCodec,
-        targetResolution?.height,
-        targetResolution?.width,
-        videoDeviceId,
-        videoSettings?.camera_facing,
-    ]);
-    const lastVideoDeviceId = react.useRef(videoDeviceId);
-    react.useEffect(() => {
-        if (callingState === videoClient.CallingState.JOINED &&
-            videoDeviceId !== lastVideoDeviceId.current) {
-            lastVideoDeviceId.current = videoDeviceId;
-            publishVideoStream().catch((e) => {
-                console.error('Failed to publish video stream', e);
-            });
-        }
-    }, [publishVideoStream, videoDeviceId, callingState]);
-    const initialPublishRun = react.useRef(false);
-    react.useEffect(() => {
-        if (callingState === videoClient.CallingState.JOINED &&
-            !initialPublishRun.current &&
-            !initialVideoMuted) {
-            // automatic publishing should happen only when joining the call
-            // from the lobby, and the video is not muted
-            publishVideoStream().catch((e) => {
-                console.error('Failed to publish video stream', e);
-            });
-            initialPublishRun.current = true;
-        }
-    }, [callingState, initialVideoMuted, publishVideoStream]);
-    react.useEffect(() => {
-        if (!localParticipant$ || !hasBrowserPermissionVideoInput)
-            return;
-        const subscription = videoClient.watchForDisconnectedVideoDevice(localParticipant$.pipe(operators.map((p) => p?.videoDeviceId))).subscribe(async () => {
-            if (!call)
-                return;
-            call.setVideoDevice(undefined);
-            await call.stopPublish(videoClient.SfuModels.TrackType.VIDEO);
-        });
-        return () => {
-            subscription.unsubscribe();
-        };
-    }, [hasBrowserPermissionVideoInput, localParticipant$, call]);
-    react.useEffect(() => {
-        if (!participant?.videoStream || !call || !isPublishingVideo)
-            return;
-        const [track] = participant.videoStream.getVideoTracks();
-        const selectedVideoDeviceId = track.getSettings().deviceId;
-        const republishDefaultDevice = videoClient.watchForAddedDefaultVideoDevice().subscribe(async () => {
-            if (!(call &&
-                participant.videoStream &&
-                selectedVideoDeviceId === 'default'))
-                return;
-            // We need to stop the original track first in order
-            // we can retrieve the new default device stream
-            track.stop();
-            const videoStream = await videoClient.getVideoStream({
-                deviceId: 'default',
-            });
-            await call.publishVideoStream(videoStream);
-        });
-        const handleTrackEnded = async () => {
-            if (selectedVideoDeviceId === videoDeviceId) {
-                const videoStream = await videoClient.getVideoStream({
-                    deviceId: videoDeviceId,
-                });
-                await call.publishVideoStream(videoStream);
-            }
-        };
-        track.addEventListener('ended', handleTrackEnded);
-        return () => {
-            track.removeEventListener('ended', handleTrackEnded);
-            republishDefaultDevice.unsubscribe();
-        };
-    }, [videoDeviceId, call, participant?.videoStream, isPublishingVideo]);
-    return publishVideoStream;
-};
-const toFacingMode = (value) => {
-    switch (value) {
-        case videoClient.VideoSettingsCameraFacingEnum.FRONT:
-            return 'user';
-        case videoClient.VideoSettingsCameraFacingEnum.BACK:
-            return 'environment';
-        default:
-            return undefined;
-    }
-};
 
 const useTrackElementVisibility = ({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }) => {
     const call = videoReactBindings.useCall();
@@ -619,6 +246,106 @@ const useFloatingUIPreset = ({ placement, strategy, }) => {
     return { refs, x, y, domReference, floating, strategy };
 };
 
+/**
+ * This hook will persist the device settings to local storage.
+ *
+ * @param key the key to use for local storage.
+ */
+const usePersistDevicePreferences = (key) => {
+    const { useMicrophoneState, useCameraState, useSpeakerState } = videoReactBindings.useCallStateHooks();
+    const mic = useMicrophoneState();
+    const camera = useCameraState();
+    const speaker = useSpeakerState();
+    react.useEffect(() => {
+        try {
+            const defaultDevice = 'default';
+            const preferences = {
+                mic: {
+                    selectedDeviceId: mic.selectedDevice || defaultDevice,
+                    muted: mic.isMute,
+                },
+                camera: {
+                    selectedDeviceId: camera.selectedDevice || defaultDevice,
+                    muted: camera.isMute,
+                },
+                speaker: {
+                    selectedDeviceId: speaker.selectedDevice || defaultDevice,
+                    muted: false,
+                },
+            };
+            window.localStorage.setItem(key, JSON.stringify(preferences));
+        }
+        catch (err) {
+            console.warn('Failed to save device preferences', err);
+        }
+    }, [
+        camera.isMute,
+        camera.selectedDevice,
+        key,
+        mic.isMute,
+        mic.selectedDevice,
+        speaker.selectedDevice,
+    ]);
+};
+/**
+ * This hook will apply the device settings from local storage.
+ *
+ * @param key the key to use for local storage.
+ */
+const useApplyDevicePreferences = (key) => {
+    const call = videoReactBindings.useCall();
+    react.useEffect(() => {
+        if (!call)
+            return;
+        const apply = async () => {
+            const initMic = async (setting) => {
+                await call.microphone.select(setting.selectedDeviceId);
+                if (setting.muted) {
+                    await call.microphone.disable();
+                }
+                else {
+                    await call.microphone.enable();
+                }
+            };
+            const initCamera = async (setting) => {
+                await call.camera.select(setting.selectedDeviceId);
+                if (setting.muted) {
+                    await call.camera.disable();
+                }
+                else {
+                    await call.camera.enable();
+                }
+            };
+            const initSpeaker = (setting) => {
+                call.speaker.select(setting.selectedDeviceId);
+            };
+            try {
+                const preferences = JSON.parse(window.localStorage.getItem(key));
+                if (preferences) {
+                    await initMic(preferences.mic);
+                    await initCamera(preferences.camera);
+                    initSpeaker(preferences.speaker);
+                }
+            }
+            catch (err) {
+                console.warn('Failed to load device preferences', err);
+            }
+        };
+        apply().catch((err) => {
+            console.warn('Failed to apply device preferences', err);
+        });
+    }, [call, key]);
+};
+/**
+ * This hook will apply and persist the device preferences from local storage.
+ *
+ * @param key the key to use for local storage.
+ */
+const usePersistedDevicePreferences = (key = '@stream-io/device-preferences') => {
+    useApplyDevicePreferences(key);
+    usePersistDevicePreferences(key);
+};
+
 const SCROLL_THRESHOLD = 10;
 /**
  * Hook which observes element's scroll position and returns text value based on the
@@ -681,6 +408,39 @@ const useHorizontalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD
     return scrollPosition;
 };
 
+const useToggleCallRecording = () => {
+    const call = videoReactBindings.useCall();
+    const { useIsCallRecordingInProgress } = videoReactBindings.useCallStateHooks();
+    const isCallRecordingInProgress = useIsCallRecordingInProgress();
+    const [isAwaitingResponse, setIsAwaitingResponse] = react.useState(false);
+    // TODO: add permissions
+    react.useEffect(() => {
+        // we wait until call.recording_started/stopped event to flips the
+        // `isCallRecordingInProgress` state variable.
+        // Once the flip happens, we remove the loading indicator
+        setIsAwaitingResponse((isAwaiting) => {
+            if (isAwaiting)
+                return false;
+            return isAwaiting;
+        });
+    }, [isCallRecordingInProgress]);
+    const toggleCallRecording = react.useCallback(async () => {
+        try {
+            setIsAwaitingResponse(true);
+            if (isCallRecordingInProgress) {
+                await call?.stopRecording();
+            }
+            else {
+                await call?.startRecording();
+            }
+        }
+        catch (e) {
+            console.error(`Failed start recording`, e);
+        }
+    }, [call, isCallRecordingInProgress]);
+    return { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress };
+};
+
 const useRequestPermission = (permission) => {
     const call = videoReactBindings.useCall();
     const hasPermission = videoReactBindings.useHasPermissions(permission);
@@ -716,104 +476,6 @@ const useRequestPermission = (permission) => {
     };
 };
 
-const useToggleAudioMuteState = () => {
-    const { publishAudioStream, stopPublishingAudio } = useMediaDevices();
-    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
-    const localParticipant = useLocalParticipant();
-    const { isAwaitingPermission, requestPermission } = useRequestPermission(videoClient.OwnCapability.SEND_AUDIO);
-    // to keep the toggle function as stable as possible
-    const isAudioMutedReference = react.useRef(false);
-    isAudioMutedReference.current = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
-    const toggleAudioMuteState = react.useCallback(async () => {
-        if (isAudioMutedReference.current) {
-            const canPublish = await requestPermission();
-            if (canPublish)
-                return publishAudioStream();
-        }
-        if (!isAudioMutedReference.current)
-            await stopPublishingAudio();
-    }, [publishAudioStream, requestPermission, stopPublishingAudio]);
-    return { toggleAudioMuteState, isAwaitingPermission };
-};
-
-const useToggleVideoMuteState = () => {
-    const { publishVideoStream, stopPublishingVideo } = useMediaDevices();
-    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
-    const localParticipant = useLocalParticipant();
-    const { isAwaitingPermission, requestPermission } = useRequestPermission(videoClient.OwnCapability.SEND_VIDEO);
-    // to keep the toggle function as stable as possible
-    const isVideoMutedReference = react.useRef(false);
-    isVideoMutedReference.current = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
-    const toggleVideoMuteState = react.useCallback(async () => {
-        if (isVideoMutedReference.current) {
-            const canPublish = await requestPermission();
-            if (canPublish)
-                return publishVideoStream();
-        }
-        if (!isVideoMutedReference.current)
-            await stopPublishingVideo();
-    }, [publishVideoStream, requestPermission, stopPublishingVideo]);
-    return { toggleVideoMuteState, isAwaitingPermission };
-};
-
-const useToggleScreenShare = () => {
-    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
-    const localParticipant = useLocalParticipant();
-    const call = videoReactBindings.useCall();
-    const isScreenSharingReference = react.useRef(false);
-    const { isAwaitingPermission, requestPermission } = useRequestPermission(videoClient.OwnCapability.SCREENSHARE);
-    const isScreenSharing = !!localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
-    isScreenSharingReference.current = isScreenSharing;
-    const toggleScreenShare = react.useCallback(async () => {
-        if (!isScreenSharingReference.current) {
-            const canPublish = await requestPermission();
-            if (!canPublish)
-                return;
-            const stream = await videoClient.getScreenShareStream().catch((e) => {
-                console.log(`Can't share screen: ${e}`);
-            });
-            if (stream) {
-                return call?.publishScreenShareStream(stream);
-            }
-        }
-        await call?.stopPublish(videoClient.SfuModels.TrackType.SCREEN_SHARE);
-    }, [call, requestPermission]);
-    return { toggleScreenShare, isAwaitingPermission, isScreenSharing };
-};
-
-const useToggleCallRecording = () => {
-    const call = videoReactBindings.useCall();
-    const { useIsCallRecordingInProgress } = videoReactBindings.useCallStateHooks();
-    const isCallRecordingInProgress = useIsCallRecordingInProgress();
-    const [isAwaitingResponse, setIsAwaitingResponse] = react.useState(false);
-    // TODO: add permissions
-    react.useEffect(() => {
-        // we wait until call.recording_started/stopped event to flips the
-        // `isCallRecordingInProgress` state variable.
-        // Once the flip happens, we remove the loading indicator
-        setIsAwaitingResponse((isAwaiting) => {
-            if (isAwaiting)
-                return false;
-            return isAwaiting;
-        });
-    }, [isCallRecordingInProgress]);
-    const toggleCallRecording = react.useCallback(async () => {
-        try {
-            setIsAwaitingResponse(true);
-            if (isCallRecordingInProgress) {
-                await call?.stopRecording();
-            }
-            else {
-                await call?.startRecording();
-            }
-        }
-        catch (e) {
-            console.error(`Failed start recording`, e);
-        }
-    }, [call, isCallRecordingInProgress]);
-    return { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress };
-};
-
 const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', children, }) => {
     const [menuShown, setMenuShown] = react.useState(false);
     const { floating, domReference, refs, x, y } = useFloatingUIPreset({
@@ -858,7 +520,7 @@ const GenericMenuButtonItem = ({ children, ...rest }) => {
     return (jsxRuntime.jsx("li", { className: "str-video__generic-menu--item", children: jsxRuntime.jsx("button", { ...rest, children: children }) }));
 };
 
-const Icon = ({ icon }) => (jsxRuntime.jsx("span", { className: clsx.clsx('str-video__icon', icon && `str-video__icon--${icon}`) }));
+const Icon = ({ icon }) => (jsxRuntime.jsx("span", { className: clsx('str-video__icon', icon && `str-video__icon--${icon}`) }));
 
 const IconButton = react.forwardRef((props, ref) => {
     const { icon, enabled, variant, onClick, className, ...rest } = props;
@@ -1015,50 +677,32 @@ const PermissionNotification = (props) => {
 };
 
 const SpeakingWhileMutedNotification = ({ children, text, }) => {
-    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
-    const localParticipant = useLocalParticipant();
-    const { getAudioStream } = useMediaDevices();
-    const { t } = videoReactBindings.useI18n();
-    const message = text ?? t('You are muted. Unmute to speak.');
-    const isAudioMute = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
-    const audioDeviceId = localParticipant?.audioDeviceId;
-    const [isSpeakingWhileMuted, setIsSpeakingWhileMuted] = react.useState(false);
-    react.useEffect(() => {
-        // do nothing when not muted
-        if (!isAudioMute)
-            return;
-        const disposeSoundDetector = getAudioStream({
-            deviceId: audioDeviceId,
-        }).then((audioStream) => videoClient.createSoundDetector(audioStream, ({ isSoundDetected }) => {
-            setIsSpeakingWhileMuted((isNotified) => isNotified ? isNotified : isSoundDetected);
-        }));
-        disposeSoundDetector.catch((err) => {
-            console.error('Error while creating sound detector', err);
-        });
-        return () => {
-            disposeSoundDetector
-                .then((dispose) => dispose())
-                .catch((err) => {
-                console.error('Error while disposing sound detector', err);
-            });
-            setIsSpeakingWhileMuted(false);
-        };
-    }, [audioDeviceId, getAudioStream, isAudioMute]);
-    react.useEffect(() => {
-        if (!isSpeakingWhileMuted)
-            return;
-        const timeout = setTimeout(() => {
-            setIsSpeakingWhileMuted(false);
-        }, 3500);
-        return () => {
-            clearTimeout(timeout);
-            setIsSpeakingWhileMuted(false);
-        };
-    }, [isSpeakingWhileMuted]);
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { isSpeakingWhileMuted } = useMicrophoneState();
+    const { t } = videoReactBindings.useI18n();
+    const message = text ?? t('You are muted. Unmute to speak.');
     return (jsxRuntime.jsx(Notification, { message: message, isVisible: isSpeakingWhileMuted, children: children }));
 };
 
-const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-video__call-controls", children: [jsxRuntime.jsx(RecordCallButton, {}), jsxRuntime.jsx(CallStatsButton, {}), jsxRuntime.jsx(ScreenShareButton, {}), jsxRuntime.jsx(SpeakingWhileMutedNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, {}) }), jsxRuntime.jsx(ToggleVideoPublishingButton, {}), jsxRuntime.jsx(CancelCallButton, { onLeave: onLeave })] }));
+const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
+    return (jsxRuntime.jsxs("div", { className: clsx('str-video__loading-indicator', className), title: tooltip, children: [jsxRuntime.jsx("div", { className: clsx('str-video__loading-indicator__icon', type) }), text && jsxRuntime.jsx("p", { className: "str-video__loading-indicator-text", children: text })] }));
+};
+
+const RecordCallButton = ({ caption = 'Record', }) => {
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
+            videoClient.OwnCapability.START_RECORD_CALL,
+            videoClient.OwnCapability.STOP_RECORD_CALL,
+        ], children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, { tooltip: isCallRecordingInProgress
+                    ? t('Waiting for recording to stop...')
+                    : t('Waiting for recording to start...') })) : (jsxRuntime.jsx(IconButton
+            // FIXME OL: sort out this ambiguity
+            , { 
+                // FIXME OL: sort out this ambiguity
+                enabled: !!call, disabled: !call, icon: isCallRecordingInProgress ? 'recording-on' : 'recording-off', title: t('Record call'), onClick: toggleCallRecording })) }) }));
+};
 
 const CallStatsLatencyChart = (props) => {
     const { values } = props;
@@ -1166,6 +810,132 @@ const calculateSubscribeBitrate = (previousCallStatsReport, callStatsReport) =>
 const CallStatsButton = () => (jsxRuntime.jsx(MenuToggle, { placement: "top-end", ToggleButton: ToggleMenuButton$1, children: jsxRuntime.jsx(CallStats, {}) }));
 const ToggleMenuButton$1 = react.forwardRef(({ menuShown }, ref) => (jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, caption: 'Stats', children: jsxRuntime.jsx(IconButton, { icon: "stats", title: "Statistics" }) })));
 
+const ScreenShareButton = (props) => {
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Screen Share') } = props;
+    const { useHasOngoingScreenShare, useScreenShareState } = videoReactBindings.useCallStateHooks();
+    const isSomeoneScreenSharing = useHasOngoingScreenShare();
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SCREENSHARE);
+    const { screenShare, isMute: isScreenSharing } = useScreenShareState();
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your screen.'), messageAwaitingApproval: t('Awaiting for an approval to share screen.'), messageRevoked: t('You can no longer share your screen.'), children: jsxRuntime.jsx(CompositeButton, { active: isSomeoneScreenSharing, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: isScreenSharing ? 'screen-share-on' : 'screen-share-off', title: t('Share screen'), disabled: !isScreenSharing && isSomeoneScreenSharing, onClick: async () => {
+                        if (!hasPermission) {
+                            await requestPermission();
+                        }
+                        else {
+                            await screenShare.toggle();
+                        }
+                    } }) }) }) }));
+};
+
+const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, defaultChecked, value, }) => {
+    return (jsxRuntime.jsxs("label", { className: clsx('str-video__device-settings__option', {
+            'str-video__device-settings__option--selected': selected,
+            'str-video__device-settings__option--disabled': disabled,
+        }), htmlFor: id, children: [jsxRuntime.jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
+};
+const DeviceSelector = (props) => {
+    const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, onChange, } = props;
+    const inputGroupName = title.replace(' ', '-').toLowerCase();
+    // sometimes the browser (Chrome) will report the system-default device
+    // with an id of 'default'. In case when it doesn't, we'll select the first
+    // available device.
+    let selectedDeviceId = selectedDeviceFromProps;
+    if (devices.length > 0 &&
+        !devices.find((d) => d.deviceId === selectedDeviceId)) {
+        selectedDeviceId = devices[0].deviceId;
+    }
+    return (jsxRuntime.jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsxRuntime.jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), !devices.length ? (jsxRuntime.jsx(DeviceSelectorOption, { id: `${inputGroupName}--default`, label: "Default", name: inputGroupName, defaultChecked: true, value: "default" })) : (devices.map((device) => {
+                return (jsxRuntime.jsx(DeviceSelectorOption, { id: `${inputGroupName}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
+                        onChange?.(e.target.value);
+                    }, name: inputGroupName, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
+            }))] }));
+};
+
+const DeviceSelectorAudioInput = ({ title, }) => {
+    const { t } = videoReactBindings.useI18n();
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { microphone, selectedDevice, devices } = useMicrophoneState();
+    return (jsxRuntime.jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, onChange: async (deviceId) => {
+            await microphone.select(deviceId);
+        }, title: title || t('Select a Mic') }));
+};
+const DeviceSelectorAudioOutput = ({ title, }) => {
+    const { t } = videoReactBindings.useI18n();
+    const { useSpeakerState } = videoReactBindings.useCallStateHooks();
+    const { speaker, selectedDevice, devices, isDeviceSelectionSupported } = useSpeakerState();
+    if (!isDeviceSelectionSupported)
+        return null;
+    return (jsxRuntime.jsx(DeviceSelector, { devices: devices, selectedDeviceId: selectedDevice, onChange: (deviceId) => {
+            speaker.select(deviceId);
+        }, title: title || t('Select Speakers') }));
+};
+
+const DeviceSelectorVideo = ({ title }) => {
+    const { t } = videoReactBindings.useI18n();
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { camera, devices, selectedDevice } = useCameraState();
+    return (jsxRuntime.jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, onChange: async (deviceId) => {
+            await camera.select(deviceId);
+        }, title: title || t('Select a Camera') }));
+};
+
+const DeviceSettings = () => {
+    return (jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleMenuButton, children: jsxRuntime.jsx(Menu, {}) }));
+};
+const Menu = () => (jsxRuntime.jsxs("div", { className: "str-video__device-settings", children: [jsxRuntime.jsx(DeviceSelectorVideo, {}), jsxRuntime.jsx(DeviceSelectorAudioInput, {}), jsxRuntime.jsx(DeviceSelectorAudioOutput, {})] }));
+const ToggleMenuButton = react.forwardRef(({ menuShown }, ref) => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__device-settings__button', {
+            'str-video__device-settings__button--active': menuShown,
+        }), title: t('Toggle device menu'), icon: "device-settings", ref: ref }));
+});
+
+const ToggleAudioPreviewButton = (props) => {
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { microphone, isMute } = useMicrophoneState();
+    return (jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: isMute, caption: caption || t('Mic'), children: jsxRuntime.jsx(IconButton, { icon: !isMute ? 'mic' : 'mic-off', onClick: () => microphone.toggle() }) }));
+};
+const ToggleAudioPublishingButton = (props) => {
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_AUDIO);
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { microphone, isMute } = useMicrophoneState();
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now speak.'), messageAwaitingApproval: t('Awaiting for an approval to speak.'), messageRevoked: t('You can no longer speak.'), children: jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: isMute, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: isMute ? 'mic-off' : 'mic', onClick: async () => {
+                        if (!hasPermission) {
+                            await requestPermission();
+                        }
+                        else {
+                            await microphone.toggle();
+                        }
+                    } }) }) }) }));
+};
+
+const ToggleVideoPreviewButton = (props) => {
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { camera, isMute } = useCameraState();
+    return (jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: isMute, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: !isMute ? 'camera' : 'camera-off', onClick: () => camera.toggle() }) }));
+};
+const ToggleVideoPublishingButton = (props) => {
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_VIDEO);
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { camera, isMute } = useCameraState();
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your video.'), messageAwaitingApproval: t('Awaiting for an approval to share your video.'), messageRevoked: t('You can no longer share your video.'), children: jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: isMute, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: isMute ? 'camera-off' : 'camera', onClick: async () => {
+                        if (!hasPermission) {
+                            await requestPermission();
+                        }
+                        else {
+                            await camera.toggle();
+                        }
+                    } }) }) }) }));
+};
+
 const CancelCallButton = ({ disabled, onClick, onLeave, }) => {
     const call = videoReactBindings.useCall();
     const handleClick = react.useCallback(async (e) => {
@@ -1180,6 +950,8 @@ const CancelCallButton = ({ disabled, onClick, onLeave, }) => {
     return (jsxRuntime.jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", onClick: handleClick }));
 };
 
+const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-video__call-controls", children: [jsxRuntime.jsx(RecordCallButton, {}), jsxRuntime.jsx(CallStatsButton, {}), jsxRuntime.jsx(ScreenShareButton, {}), jsxRuntime.jsx(SpeakingWhileMutedNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, {}) }), jsxRuntime.jsx(ToggleVideoPublishingButton, {}), jsxRuntime.jsx(CancelCallButton, { onLeave: onLeave })] }));
+
 const defaultEmojiReactionMap = {
     ':like:': '👍',
     ':raise-hand:': '✋',
@@ -1246,132 +1018,10 @@ const DefaultReactionsMenu = ({ reactions, }) => {
             }, children: reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code] }, reaction.emoji_code))) }));
 };
 
-const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
-    return (jsxRuntime.jsxs("div", { className: clsx('str-video__loading-indicator', className), title: tooltip, children: [jsxRuntime.jsx("div", { className: clsx('str-video__loading-indicator__icon', type) }), text && jsxRuntime.jsx("p", { className: "str-video__loading-indicator-text", children: text })] }));
-};
-
-const RecordCallButton = ({ caption = 'Record', }) => {
-    const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
-    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
-            videoClient.OwnCapability.START_RECORD_CALL,
-            videoClient.OwnCapability.STOP_RECORD_CALL,
-        ], children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, { tooltip: isCallRecordingInProgress
-                    ? t('Waiting for recording to stop...')
-                    : t('Waiting for recording to start...') })) : (jsxRuntime.jsx(IconButton
-            // FIXME OL: sort out this ambiguity
-            , { 
-                // FIXME OL: sort out this ambiguity
-                enabled: !!call, disabled: !call, icon: isCallRecordingInProgress ? 'recording-on' : 'recording-off', title: t('Record call'), onClick: toggleCallRecording })) }) }));
-};
-
-const ScreenShareButton = (props) => {
-    const call = videoReactBindings.useCall();
-    const { useHasOngoingScreenShare } = videoReactBindings.useCallStateHooks();
-    const isSomeoneScreenSharing = useHasOngoingScreenShare();
-    const { t } = videoReactBindings.useI18n();
-    const { caption = t('Screen Share') } = props;
-    const { toggleScreenShare, isAwaitingPermission, isScreenSharing } = useToggleScreenShare();
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your screen.'), messageAwaitingApproval: t('Awaiting for an approval to share screen.'), messageRevoked: t('You can no longer share your screen.'), children: jsxRuntime.jsx(CompositeButton, { active: isSomeoneScreenSharing, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: isScreenSharing ? 'screen-share-on' : 'screen-share-off', title: t('Share screen'), disabled: (!isScreenSharing && isSomeoneScreenSharing) || !call, onClick: toggleScreenShare }) }) }) }));
-};
-
-const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, defaultChecked, value, }) => {
-    return (jsxRuntime.jsxs("label", { className: clsx('str-video__device-settings__option', {
-            'str-video__device-settings__option--selected': selected,
-            'str-video__device-settings__option--disabled': disabled,
-        }), htmlFor: id, children: [jsxRuntime.jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
-};
-const DeviceSelector = (props) => {
-    const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, onChange, } = props;
-    const inputGroupName = title.replace(' ', '-').toLowerCase();
-    // sometimes the browser (Chrome) will report the system-default device
-    // with an id of 'default'. In case when it doesn't, we'll select the first
-    // available device.
-    let selectedDeviceId = selectedDeviceFromProps;
-    if (devices.length > 0 &&
-        !devices.find((d) => d.deviceId === selectedDeviceId)) {
-        selectedDeviceId = devices[0].deviceId;
-    }
-    return (jsxRuntime.jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsxRuntime.jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), !devices.length ? (jsxRuntime.jsx(DeviceSelectorOption, { id: `${inputGroupName}--default`, label: "Default", name: inputGroupName, defaultChecked: true, value: "default" })) : (devices.map((device) => {
-                return (jsxRuntime.jsx(DeviceSelectorOption, { id: `${inputGroupName}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
-                        onChange?.(e.target.value);
-                    }, name: inputGroupName, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
-            }))] }));
-};
-
-const DeviceSelectorAudioInput = ({ title = 'Select a Mic', }) => {
-    const { selectedAudioInputDeviceId, switchDevice } = useMediaDevices();
-    const audioInputDevices = useAudioInputDevices();
-    return (jsxRuntime.jsx(DeviceSelector, { devices: audioInputDevices, selectedDeviceId: selectedAudioInputDeviceId, onChange: (deviceId) => {
-            switchDevice('audioinput', deviceId);
-        }, title: title }));
-};
-const DeviceSelectorAudioOutput = ({ title = 'Select Speakers', }) => {
-    const { isAudioOutputChangeSupported, selectedAudioOutputDeviceId, switchDevice, } = useMediaDevices();
-    const audioOutputDevices = useAudioOutputDevices();
-    if (!isAudioOutputChangeSupported)
-        return null;
-    return (jsxRuntime.jsx(DeviceSelector, { devices: audioOutputDevices, selectedDeviceId: selectedAudioOutputDeviceId, onChange: (deviceId) => {
-            switchDevice('audiooutput', deviceId);
-        }, title: title }));
-};
-
-const DeviceSelectorVideo = ({ title }) => {
-    const { selectedVideoDeviceId, switchDevice } = useMediaDevices();
-    const videoDevices = useVideoDevices();
-    return (jsxRuntime.jsx(DeviceSelector, { devices: videoDevices, selectedDeviceId: selectedVideoDeviceId, onChange: (deviceId) => {
-            switchDevice('videoinput', deviceId);
-        }, title: title || 'Select a Camera' }));
-};
-
-const DeviceSettings = () => {
-    return (jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleMenuButton, children: jsxRuntime.jsx(Menu, {}) }));
-};
-const Menu = () => (jsxRuntime.jsxs("div", { className: "str-video__device-settings", children: [jsxRuntime.jsx(DeviceSelectorVideo, {}), jsxRuntime.jsx(DeviceSelectorAudioInput, {}), jsxRuntime.jsx(DeviceSelectorAudioOutput, {})] }));
-const ToggleMenuButton = react.forwardRef(({ menuShown }, ref) => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__device-settings__button', {
-            'str-video__device-settings__button--active': menuShown,
-        }), title: t('Toggle device menu'), icon: "device-settings", ref: ref }));
-});
-
-const ToggleAudioPreviewButton = (props) => {
-    const { initialAudioEnabled, toggleInitialAudioMuteState } = useMediaDevices();
-    const { t } = videoReactBindings.useI18n();
-    const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
-    return (jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: !initialAudioEnabled, caption: caption || t('Mic'), children: jsxRuntime.jsx(IconButton, { icon: initialAudioEnabled ? 'mic' : 'mic-off', onClick: toggleInitialAudioMuteState }) }));
-};
-const ToggleAudioPublishingButton = (props) => {
-    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
-    const localParticipant = useLocalParticipant();
-    const { t } = videoReactBindings.useI18n();
-    const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
-    const isAudioMute = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
-    const { toggleAudioMuteState: handleClick, isAwaitingPermission } = useToggleAudioMuteState();
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now speak.'), messageAwaitingApproval: t('Awaiting for an approval to speak.'), messageRevoked: t('You can no longer speak.'), children: jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: isAudioMute, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: isAudioMute ? 'mic-off' : 'mic', onClick: handleClick }) }) }) }));
-};
-
 const ToggleAudioOutputButton = (props) => {
     const { t } = videoReactBindings.useI18n();
     const { caption = t('Speakers'), Menu = DeviceSelectorAudioOutput } = props;
-    return (jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: true, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: "speaker" }) }));
-};
-
-const ToggleVideoPreviewButton = (props) => {
-    const { toggleInitialVideoMuteState, initialVideoState } = useMediaDevices();
-    const { t } = videoReactBindings.useI18n();
-    const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
-    return (jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: !initialVideoState.enabled, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: initialVideoState.enabled ? 'camera' : 'camera-off', onClick: toggleInitialVideoMuteState }) }));
-};
-const ToggleVideoPublishingButton = (props) => {
-    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
-    const localParticipant = useLocalParticipant();
-    const { t } = videoReactBindings.useI18n();
-    const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
-    const isVideoMute = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
-    const { toggleVideoMuteState: handleClick, isAwaitingPermission } = useToggleVideoMuteState();
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your video.'), messageAwaitingApproval: t('Awaiting for an approval to share your video.'), messageRevoked: t('You can no longer share your video.'), children: jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: isVideoMute, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: isVideoMute ? 'camera-off' : 'camera', onClick: handleClick }) }) }) }));
+    return (jsxRuntime.jsx(CompositeButton, { Menu: Menu, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: "speaker" }) }));
 };
 
 const BlockedUserListing = ({ data }) => {
@@ -1640,7 +1290,7 @@ const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnF
 const ToggleButton$1 = react.forwardRef((props, ref) => {
     return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
 });
-const InviteLinkButton = react.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsxs("button", { ...props, className: clsx.clsx('str-video__invite-link-button', className), ref: ref, children: [jsxRuntime.jsx("div", { className: "str-video__invite-participant-icon" }), jsxRuntime.jsx("div", { className: "str-video__invite-link-button__text", children: "Invite Link" })] })));
+const InviteLinkButton = react.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsxs("button", { ...props, className: clsx('str-video__invite-link-button', className), ref: ref, children: [jsxRuntime.jsx("div", { className: "str-video__invite-participant-icon" }), jsxRuntime.jsx("div", { className: "str-video__invite-link-button__text", children: "Invite Link" })] })));
 
 const CallPreview = (props) => {
     const { className, style } = props;
@@ -1836,69 +1486,24 @@ const DefaultDisabledVideoPreview = () => {
 const DefaultNoCameraPreview = () => {
     return jsxRuntime.jsx("div", { children: "No camera found" });
 };
-const DefaultVideoErrorPreview = ({ message }) => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { children: "Error:" }), jsxRuntime.jsx("p", { children: message || 'Unexpected error happened' })] }));
-};
-const VideoPreview = ({ mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, VideoErrorPreview = DefaultVideoErrorPreview, }) => {
-    const [stream, setStream] = react.useState();
-    const { selectedVideoDeviceId, getVideoStream, initialVideoState, setInitialVideoState, } = useMediaDevices();
-    // When there are 0 video devices (e.g. when laptop lid closed),
-    // we do not restart the video automatically when the device is again available,
-    // but rather leave turning the video on manually to the user.
-    useOnUnavailableVideoDevices(() => setInitialVideoState(DEVICE_STATE.stopped));
-    const videoDevices = useVideoDevices();
-    react.useEffect(() => {
-        if (!initialVideoState.enabled)
-            return;
-        getVideoStream({ deviceId: selectedVideoDeviceId })
-            .then((s) => {
-            setStream((previousStream) => {
-                if (previousStream) {
-                    videoClient.disposeOfMediaStream(previousStream);
-                }
-                return s;
-            });
-        })
-            .catch((e) => setInitialVideoState({
-            ...DEVICE_STATE.error,
-            message: e.message,
-        }));
-        return () => {
-            setStream(undefined);
-        };
-    }, [
-        initialVideoState,
-        getVideoStream,
-        selectedVideoDeviceId,
-        setInitialVideoState,
-        videoDevices.length,
-    ]);
-    react.useEffect(() => {
-        if (initialVideoState.type === 'stopped') {
-            setStream(undefined);
-        }
-    }, [initialVideoState]);
-    const handleOnPlay = react.useCallback(() => {
-        setInitialVideoState(DEVICE_STATE.playing);
-    }, [setInitialVideoState]);
+const VideoPreview = ({ mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, }) => {
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { devices, status, isMute, mediaStream } = useCameraState();
     let contents;
-    if (initialVideoState.type === 'error') {
-        contents = jsxRuntime.jsx(VideoErrorPreview, {});
-    }
-    else if (initialVideoState.type === 'stopped' && !videoDevices.length) {
+    if (isMute && devices?.length === 0) {
         contents = jsxRuntime.jsx(NoCameraPreview, {});
     }
-    else if (initialVideoState.enabled) {
-        const loading = initialVideoState.type === 'starting';
-        contents = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stream && (jsxRuntime.jsx(BaseVideo, { stream: stream, className: clsx('str-video__video-preview', {
+    else if (status === 'enabled') {
+        const loading = !mediaStream;
+        contents = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mediaStream && (jsxRuntime.jsx(BaseVideo, { stream: mediaStream, className: clsx('str-video__video-preview', {
                         'str-video__video-preview--mirror': mirror,
                         'str-video__video-preview--loading': loading,
-                    }), onPlay: handleOnPlay })), loading && jsxRuntime.jsx(StartingCameraPreview, {})] }));
+                    }) })), loading && jsxRuntime.jsx(StartingCameraPreview, {})] }));
     }
     else {
         contents = jsxRuntime.jsx(DisabledVideoPreview, {});
     }
-    return (jsxRuntime.jsx("div", { className: clsx('str-video__video-preview-container'), children: contents }));
+    return jsxRuntime.jsx("div", { className: "str-video__video-preview-container", children: contents });
 };
 
 const DebugParticipantPublishQuality = (props) => {
@@ -2010,15 +1615,32 @@ const unwrapStats = (rawStats) => {
     return decodedStats;
 };
 
+const useQueryParams = () => {
+    return react.useMemo(() => typeof window === 'undefined'
+        ? null
+        : new URLSearchParams(window.location.search), []);
+};
+/**
+ * Internal purpose hook. Enables certain development mode tools.
+ */
+const useIsDebugMode = () => {
+    const params = useQueryParams();
+    return !!params?.get('debug');
+};
+
+const ParticipantViewContext = react.createContext(undefined);
+const useParticipantViewContext = () => react.useContext(ParticipantViewContext);
+
 const ToggleButton = react.forwardRef((props, ref) => {
     return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
 });
 const DefaultScreenShareOverlay = () => {
     const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
     const stopScreenShare = () => {
-        call?.stopPublish(videoClient.SfuModels.TrackType.SCREEN_SHARE).catch(console.error);
+        call?.screenShare.disable();
     };
-    return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: "You are presenting your screen" }), jsxRuntime.jsxs("button", { onClick: stopScreenShare, className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), " Stop Screen Sharing"] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxRuntime.jsxs("button", { onClick: stopScreenShare, className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
 };
 const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
     const { participant, participantViewElement, trackType, videoElement } = useParticipantViewContext();
@@ -2042,13 +1664,11 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const canUnpin = !!pin && pin.isLocalPin;
     const isDebugMode = useIsDebugMode();
     return (jsxRuntime.jsxs("div", { className: "str-video__participant-details", children: [jsxRuntime.jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isDominantSpeaker && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--dominant_speaker", title: "Dominant speaker" })), indicatorsVisible && (jsxRuntime.jsx(Notification, { isVisible: isLocalParticipant &&
-                            connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: "Poor connection quality. Please check your internet connection.", children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx.clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) })), indicatorsVisible && !hasAudio && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
+                            connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: "Poor connection quality. Please check your internet connection.", children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) })), indicatorsVisible && !hasAudio && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
                     // TODO: remove this monstrosity once we have a proper design
                     jsxRuntime.jsx("span", { title: "Unpin", onClick: () => call?.unpin(sessionId), style: { cursor: 'pointer' }, className: "str-video__participant-details__name--pinned" }))] }), isDebugMode && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DebugParticipantPublishQuality, { participant: participant, call: call }), jsxRuntime.jsx(DebugStatsView, { call: call, sessionId: sessionId, userId: userId, mediaStream: videoStream })] }))] }));
 };
 
-const ParticipantViewContext = react.createContext(undefined);
-const useParticipantViewContext = () => react.useContext(ParticipantViewContext);
 const ParticipantView = react.forwardRef(({ participant, trackType = 'videoTrack', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
     const { isLocalParticipant, isSpeaking, isDominantSpeaker, publishedTracks, sessionId, } = participant;
     const hasAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
@@ -2092,172 +1712,8 @@ const ParticipantView = react.forwardRef(({ participant, trackType = 'videoTrack
         }, className: clsx('str-video__participant-view', isDominantSpeaker && 'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideo && 'str-video__participant-view--no-video', !hasAudio && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudio && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudio && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, participant: participant, trackType: trackType, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
 });
 
-const DEVICE_STATE_TOGGLE = {
-    starting: 'stopped',
-    playing: 'stopped',
-    stopped: 'starting',
-    uninitialized: 'starting',
-    error: 'starting',
-};
-/**
- * Exclude types from documentation site, but we should still add doc comments
- * @internal
- */
-const DEVICE_STATE = {
-    starting: { type: 'starting', enabled: true },
-    playing: { type: 'playing', enabled: true },
-    stopped: { type: 'stopped', enabled: false },
-    uninitialized: { type: 'uninitialized', enabled: false },
-    error: { type: 'error', message: '', enabled: false },
-};
-const DEFAULT_DEVICE_ID = 'default';
-const MediaDevicesContext = react.createContext(null);
-/**
- * Context provider that internally puts in place mechanisms that:
- * 1. fall back to selecting a default device when trying to switch to a non-existent device
- * 2. fall back to a default device when an active device is disconnected
- * 3. stop publishing a media stream when a non-default device is disconnected
- * 4. republish a media stream from the newly connected default device
- * 5. republish a media stream when a new device is selected
- *
- * Provides `MediaDevicesContextAPI` that allow the integrators to handle:
- * 1. the initial device state enablement (for example apt for lobby scenario)
- * 2. media stream retrieval and disposal
- * 3. media stream publishing
- * 4. specific device selection
- * @param params
- * @returns
- *
- * @category Device Management
- */
-const MediaDevicesProvider = ({ children, initialAudioEnabled, initialVideoEnabled, initialVideoInputDeviceId = DEFAULT_DEVICE_ID, initialAudioOutputDeviceId = DEFAULT_DEVICE_ID, initialAudioInputDeviceId = DEFAULT_DEVICE_ID, }) => {
-    const call = videoReactBindings.useCall();
-    const { useCallCallingState, useCallState, useCallSettings } = videoReactBindings.useCallStateHooks();
-    const callingState = useCallCallingState();
-    const callState = useCallState();
-    const { localParticipant$ } = callState;
-    const hasBrowserPermissionVideoInput = useHasBrowserPermissions('camera');
-    const hasBrowserPermissionAudioInput = useHasBrowserPermissions('microphone');
-    const [selectedAudioInputDeviceId, selectAudioInputDeviceId] = react.useState(initialAudioInputDeviceId);
-    const [selectedAudioOutputDeviceId, selectAudioOutputDeviceId] = react.useState(initialAudioOutputDeviceId);
-    const [selectedVideoDeviceId, selectVideoDeviceId] = react.useState(initialVideoInputDeviceId);
-    const [isAudioOutputChangeSupported] = react.useState(() => videoClient.checkIfAudioOutputChangeSupported());
-    const [initAudioEnabled, setInitialAudioEnabled] = react.useState(!!initialAudioEnabled);
-    const [initialVideoState, setInitialVideoState] = react.useState(() => initialVideoEnabled ? DEVICE_STATE.starting : DEVICE_STATE.uninitialized);
-    const settings = useCallSettings();
-    react.useEffect(() => {
-        if (!settings)
-            return;
-        const { audio, video } = settings;
-        if (typeof initialAudioEnabled === 'undefined' && audio.mic_default_on) {
-            setInitialAudioEnabled(audio.mic_default_on);
-        }
-        if (typeof initialVideoEnabled === 'undefined' && video.camera_default_on) {
-            setInitialVideoState(DEVICE_STATE.starting);
-        }
-    }, [initialAudioEnabled, initialVideoEnabled, settings]);
-    const publishVideoStream = useVideoPublisher({
-        initialVideoMuted: !initialVideoState.enabled,
-        videoDeviceId: selectedVideoDeviceId,
-    });
-    const publishAudioStream = useAudioPublisher({
-        initialAudioMuted: !initAudioEnabled,
-        audioDeviceId: selectedAudioInputDeviceId,
-    });
-    const stopPublishingAudio = react.useCallback(async () => {
-        if (callingState === videoClient.CallingState.IDLE ||
-            callingState === videoClient.CallingState.RINGING) {
-            setInitialAudioEnabled(false);
-        }
-        else {
-            call?.stopPublish(videoClient.SfuModels.TrackType.AUDIO);
-        }
-    }, [call, callingState]);
-    const stopPublishingVideo = react.useCallback(async () => {
-        if (callingState === videoClient.CallingState.IDLE ||
-            callingState === videoClient.CallingState.RINGING) {
-            setInitialVideoState(DEVICE_STATE.stopped);
-        }
-        else {
-            call?.stopPublish(videoClient.SfuModels.TrackType.VIDEO);
-        }
-    }, [call, callingState]);
-    const toggleInitialAudioMuteState = react.useCallback(() => setInitialAudioEnabled((prev) => !prev), []);
-    const toggleInitialVideoMuteState = react.useCallback(() => setInitialVideoState((prev) => {
-        const newType = DEVICE_STATE_TOGGLE[prev.type];
-        return DEVICE_STATE[newType];
-    }), []);
-    const switchDevice = react.useCallback((kind, deviceId) => {
-        if (kind === 'videoinput') {
-            selectVideoDeviceId(deviceId);
-        }
-        if (kind === 'audioinput') {
-            selectAudioInputDeviceId(deviceId);
-        }
-        if (kind === 'audiooutput') {
-            selectAudioOutputDeviceId(deviceId);
-        }
-    }, []);
-    useAudioInputDeviceFallback(() => switchDevice('audioinput', DEFAULT_DEVICE_ID), hasBrowserPermissionAudioInput, selectedAudioInputDeviceId);
-    useAudioOutputDeviceFallback(() => switchDevice('audiooutput', DEFAULT_DEVICE_ID), 
-    // audiooutput devices can be enumerated only with microphone permissions
-    hasBrowserPermissionAudioInput, selectedAudioOutputDeviceId);
-    useVideoDeviceFallback(() => switchDevice('videoinput', DEFAULT_DEVICE_ID), hasBrowserPermissionVideoInput, selectedVideoDeviceId);
-    react.useEffect(() => {
-        if (!call || callingState !== videoClient.CallingState.JOINED)
-            return;
-        call.setAudioOutputDevice(selectedAudioOutputDeviceId);
-    }, [call, callingState, selectedAudioOutputDeviceId]);
-    react.useEffect(() => {
-        // audiooutput devices can be enumerated only with microphone permissions
-        if (!localParticipant$ || !hasBrowserPermissionAudioInput)
-            return;
-        const subscription = videoClient.watchForDisconnectedAudioOutputDevice(localParticipant$.pipe(rxjs.map((p) => p?.audioOutputDeviceId))).subscribe(async () => {
-            selectAudioOutputDeviceId(DEFAULT_DEVICE_ID);
-        });
-        return () => {
-            subscription.unsubscribe();
-        };
-    }, [hasBrowserPermissionAudioInput, localParticipant$]);
-    const contextValue = {
-        disposeOfMediaStream: videoClient.disposeOfMediaStream,
-        getAudioStream: videoClient.getAudioStream,
-        getVideoStream: videoClient.getVideoStream,
-        isAudioOutputChangeSupported,
-        selectedAudioInputDeviceId,
-        selectedAudioOutputDeviceId,
-        selectedVideoDeviceId,
-        switchDevice,
-        initialAudioEnabled: initAudioEnabled,
-        initialVideoState,
-        setInitialAudioEnabled,
-        setInitialVideoState,
-        toggleInitialAudioMuteState,
-        toggleInitialVideoMuteState,
-        publishAudioStream,
-        publishVideoStream,
-        stopPublishingAudio,
-        stopPublishingVideo,
-    };
-    return (jsxRuntime.jsx(MediaDevicesContext.Provider, { value: contextValue, children: children }));
-};
-/**
- * Context consumer retrieving MediaDevicesContextAPI.
- * @returns
- *
- * @category Device Management
- */
-const useMediaDevices = () => {
-    const value = react.useContext(MediaDevicesContext);
-    if (!value) {
-        console.warn(`Null MediaDevicesContext`);
-    }
-    return value;
-};
-
-const StreamCall = ({ children, call, mediaDevicesProviderProps, }) => {
-    return (jsxRuntime.jsx(videoReactBindings.StreamCallProvider, { call: call, children: jsxRuntime.jsx(MediaDevicesProvider, { ...mediaDevicesProviderProps, children: children }) }));
-};
+// re-exporting the StreamCallProvider as StreamCall
+const StreamCall = videoReactBindings.StreamCallProvider;
 
 var Joining = "Joining";
 var Mic = "Mic";
@@ -2319,6 +1775,8 @@ var en = {
 	Me: Me,
 	Unknown: Unknown,
 	"Toggle device menu": "Toggle device menu",
+	"You are presenting your screen": "You are presenting your screen",
+	"Stop Screen Sharing": "Stop Screen Sharing",
 	Allow: Allow,
 	Revoke: Revoke,
 	Dismiss: Dismiss,
@@ -2635,7 +2093,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 const hasScreenShare = (p) => !!p?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("0.3.47" ).split('.');
+const [major, minor, patch] = ("0.4.0" ).split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -2661,7 +2119,6 @@ exports.CancelCallButton = CancelCallButton;
 exports.CompositeButton = CompositeButton;
 exports.CopyToClipboardButton = CopyToClipboardButton;
 exports.CopyToClipboardButtonWithPopup = CopyToClipboardButtonWithPopup;
-exports.DEVICE_STATE = DEVICE_STATE;
 exports.DefaultParticipantViewUI = DefaultParticipantViewUI;
 exports.DefaultReactionsMenu = DefaultReactionsMenu;
 exports.DefaultScreenShareOverlay = DefaultScreenShareOverlay;
@@ -2679,13 +2136,13 @@ exports.IconButton = IconButton;
 exports.LivestreamLayout = LivestreamLayout;
 exports.LoadingCallRecordingListing = LoadingCallRecordingListing;
 exports.LoadingIndicator = LoadingIndicator;
-exports.MediaDevicesProvider = MediaDevicesProvider;
 exports.MenuToggle = MenuToggle;
 exports.Notification = Notification;
 exports.PaginatedGridLayout = PaginatedGridLayout;
 exports.ParticipantActionsContextMenu = ParticipantActionsContextMenu;
 exports.ParticipantDetails = ParticipantDetails;
 exports.ParticipantView = ParticipantView;
+exports.ParticipantViewContext = ParticipantViewContext;
 exports.ParticipantsAudio = ParticipantsAudio;
 exports.PermissionNotification = PermissionNotification;
 exports.PermissionRequestList = PermissionRequestList;
@@ -2714,28 +2171,13 @@ exports.VideoPreview = VideoPreview;
 exports.WithTooltip = WithTooltip;
 exports.defaultReactions = defaultReactions;
 exports.translations = translations;
-exports.useAudioInputDeviceFallback = useAudioInputDeviceFallback;
-exports.useAudioInputDevices = useAudioInputDevices;
-exports.useAudioOutputDeviceFallback = useAudioOutputDeviceFallback;
-exports.useAudioOutputDevices = useAudioOutputDevices;
-exports.useAudioPublisher = useAudioPublisher;
-exports.useDeviceFallback = useDeviceFallback;
-exports.useDevices = useDevices;
 exports.useHasBrowserPermissions = useHasBrowserPermissions;
 exports.useHorizontalScrollPosition = useHorizontalScrollPosition;
-exports.useMediaDevices = useMediaDevices;
-exports.useOnUnavailableAudioInputDevices = useOnUnavailableAudioInputDevices;
-exports.useOnUnavailableAudioOutputDevices = useOnUnavailableAudioOutputDevices;
-exports.useOnUnavailableDevices = useOnUnavailableDevices;
-exports.useOnUnavailableVideoDevices = useOnUnavailableVideoDevices;
 exports.useParticipantViewContext = useParticipantViewContext;
-exports.useToggleAudioMuteState = useToggleAudioMuteState;
-exports.useToggleVideoMuteState = useToggleVideoMuteState;
+exports.usePersistedDevicePreferences = usePersistedDevicePreferences;
+exports.useRequestPermission = useRequestPermission;
 exports.useTrackElementVisibility = useTrackElementVisibility;
 exports.useVerticalScrollPosition = useVerticalScrollPosition;
-exports.useVideoDeviceFallback = useVideoDeviceFallback;
-exports.useVideoDevices = useVideoDevices;
-exports.useVideoPublisher = useVideoPublisher;
 Object.keys(videoClient).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,