@stream-io/video-react-sdk 1.12.10 → 1.13.0

package/dist/index.es.js

@@ -3,7 +3,7 @@ export * from '@stream-io/video-client';
 import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, StreamCallProvider, StreamVideoProvider, useStreamVideoClient } from '@stream-io/video-react-bindings';
 export * from '@stream-io/video-react-bindings';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useRef, useCallback, useMemo, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
+import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useMemo, useRef, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
 import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, arrow, FloatingArrow, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList, useHover } from '@floating-ui/react';
 import clsx from 'clsx';
 import { flushSync } from 'react-dom';
@@ -75,135 +75,121 @@ const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: off
 
 const defaultDevice = 'default';
 /**
- * This hook will persist the device settings to local storage.
+ * This hook will apply and persist the device preferences from local storage.
  *
  * @param key the key to use for local storage.
  */
-const usePersistDevicePreferences = (key, shouldPersistRef) => {
-    const { useMicrophoneState, useCameraState, useSpeakerState } = useCallStateHooks();
-    const call = useCall();
-    const mic = useMicrophoneState();
-    const camera = useCameraState();
-    const speaker = useSpeakerState();
-    useEffect(() => {
-        if (!shouldPersistRef.current)
-            return;
-        if (!call)
+const usePersistedDevicePreferences = (key = '@stream-io/device-preferences') => {
+    const { useCameraState, useMicrophoneState, useSpeakerState } = useCallStateHooks();
+    usePersistedDevicePreference(key, 'camera', useCameraState());
+    usePersistedDevicePreference(key, 'microphone', useMicrophoneState());
+    usePersistedDevicePreference(key, 'speaker', useSpeakerState());
+};
+const usePersistedDevicePreference = (key, deviceKey, state) => {
+    const { useCallCallingState } = useCallStateHooks();
+    const callingState = useCallCallingState();
+    const [applyingState, setApplyingState] = useState('idle');
+    const manager = state[deviceKey];
+    useEffect(function apply() {
+        if (callingState === CallingState.LEFT ||
+            !state.devices?.length ||
+            applyingState !== 'idle') {
             return;
-        if (call.state.callingState === CallingState.LEFT)
+        }
+        const preferences = parseLocalDevicePreferences(key);
+        const preference = preferences[deviceKey];
+        setApplyingState('applying');
+        if (preference && !manager.state.selectedDevice) {
+            selectDevice(manager, [preference].flat(), state.devices)
+                .catch((err) => {
+                console.warn(`Failed to save ${deviceKey} device preferences`, err);
+            })
+                .finally(() => setApplyingState('applied'));
+        }
+        else {
+            setApplyingState('applied');
+        }
+    }, [applyingState, callingState, deviceKey, key, manager, state.devices]);
+    useEffect(function persist() {
+        if (callingState === CallingState.LEFT ||
+            !state.devices?.length ||
+            applyingState !== 'applied') {
             return;
+        }
         try {
-            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));
+            patchLocalDevicePreference(key, deviceKey, {
+                devices: state.devices,
+                selectedDevice: state.selectedDevice,
+                isMute: state.isMute,
+            });
         }
         catch (err) {
-            console.warn('Failed to save device preferences', err);
+            console.warn(`Failed to save ${deviceKey} device preferences`, err);
         }
     }, [
-        call,
-        camera.isMute,
-        camera.selectedDevice,
+        applyingState,
+        callingState,
+        deviceKey,
         key,
-        mic.isMute,
-        mic.selectedDevice,
-        speaker.selectedDevice,
-        shouldPersistRef,
+        state.devices,
+        state.isMute,
+        state.selectedDevice,
     ]);
 };
-/**
- * This hook will apply the device settings from local storage.
- *
- * @param key the key to use for local storage.
- */
-const useApplyDevicePreferences = (key, onApplied) => {
-    const call = useCall();
-    const onAppliedRef = useRef(onApplied);
-    onAppliedRef.current = onApplied;
-    useEffect(() => {
-        if (!call)
-            return;
-        if (call.state.callingState === CallingState.LEFT)
-            return;
-        let cancel = false;
-        const apply = async () => {
-            const initMic = async (setting) => {
-                if (cancel)
-                    return;
-                await call.microphone.select(parseDeviceId(setting.selectedDeviceId));
-                if (cancel)
-                    return;
-                if (setting.muted) {
-                    await call.microphone.disable();
-                }
-                else {
-                    await call.microphone.enable();
-                }
-            };
-            const initCamera = async (setting) => {
-                if (cancel)
-                    return;
-                await call.camera.select(parseDeviceId(setting.selectedDeviceId));
-                if (cancel)
-                    return;
-                if (setting.muted) {
-                    await call.camera.disable();
-                }
-                else {
-                    await call.camera.enable();
-                }
-            };
-            const initSpeaker = (setting) => {
-                if (cancel)
-                    return;
-                call.speaker.select(parseDeviceId(setting.selectedDeviceId) ?? '');
-            };
-            let preferences = null;
-            try {
-                preferences = JSON.parse(window.localStorage.getItem(key));
-            }
-            catch (err) {
-                console.warn('Failed to load device preferences', err);
-            }
-            if (preferences) {
-                await initMic(preferences.mic);
-                await initCamera(preferences.camera);
-                initSpeaker(preferences.speaker);
+const parseLocalDevicePreferences = (key) => {
+    const preferencesStr = window.localStorage.getItem(key);
+    let preferences = {};
+    if (preferencesStr) {
+        try {
+            preferences = JSON.parse(preferencesStr);
+            if (Object.hasOwn(preferences, 'mic')) {
+                // for backwards compatibility
+                preferences.microphone = preferences.mic;
             }
-        };
-        apply()
-            .then(() => onAppliedRef.current())
-            .catch((err) => {
-            console.warn('Failed to apply device preferences', err);
-        });
-        return () => {
-            cancel = true;
-        };
-    }, [call, key]);
+        }
+        catch {
+            /* assume preferences are empty */
+        }
+    }
+    return preferences;
+};
+const patchLocalDevicePreference = (key, deviceKey, state) => {
+    const preferences = parseLocalDevicePreferences(key);
+    const nextPreference = getSelectedDevicePreference(state.devices, state.selectedDevice);
+    const preferenceHistory = [preferences[deviceKey] ?? []]
+        .flat()
+        .filter((p) => p.selectedDeviceId !== nextPreference.selectedDeviceId &&
+        (p.selectedDeviceLabel === '' ||
+            p.selectedDeviceLabel !== nextPreference.selectedDeviceLabel));
+    window.localStorage.setItem(key, JSON.stringify({
+        ...preferences,
+        mic: undefined, // for backwards compatibility
+        [deviceKey]: [
+            {
+                ...nextPreference,
+                muted: state.isMute,
+            },
+            ...preferenceHistory,
+        ].slice(0, 3),
+    }));
 };
-/**
- * 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') => {
-    const shouldPersistRef = useRef(false);
-    useApplyDevicePreferences(key, () => (shouldPersistRef.current = true));
-    usePersistDevicePreferences(key, shouldPersistRef);
+const selectDevice = async (manager, preference, devices) => {
+    for (const p of preference) {
+        if (p.selectedDeviceId === defaultDevice) {
+            return;
+        }
+        const device = devices.find((d) => d.deviceId === p.selectedDeviceId) ??
+            devices.find((d) => d.label === p.selectedDeviceLabel);
+        if (device) {
+            await manager.select(device.deviceId);
+            return;
+        }
+    }
 };
-const parseDeviceId = (deviceId) => deviceId !== defaultDevice ? deviceId : undefined;
+const getSelectedDevicePreference = (devices, selectedDevice) => ({
+    selectedDeviceId: selectedDevice || defaultDevice,
+    selectedDeviceLabel: devices?.find((d) => d.deviceId === selectedDevice)?.label ?? '',
+});
 
 const SCROLL_THRESHOLD = 10;
 /**
@@ -673,7 +659,7 @@ const Video$1 = ({ enabled = true, mirror, trackType, participant, className, Vi
                 }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
                     setVideoElement(element);
                     refs?.setVideoElement?.(element);
-                } })), isPiP && (jsx(DefaultPictureInPicturePlaceholder, { style: { position: 'absolute' }, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
+                } })), isPiP && PictureInPicturePlaceholder && (jsx(PictureInPicturePlaceholder, { style: { position: 'absolute' }, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
 };
 Video$1.displayName = 'Video';
 
@@ -838,8 +824,10 @@ const useRenderer = (tfLite) => {
             output,
             stop: () => {
                 renderer?.dispose();
-                videoRef.current && (videoRef.current.srcObject = null);
-                outputStream && disposeOfMediaStream(outputStream);
+                if (videoRef.current)
+                    videoRef.current.srcObject = null;
+                if (outputStream)
+                    disposeOfMediaStream(outputStream);
             },
         };
     }, [backgroundBlurLevel, backgroundFilter, backgroundImage, tfLite]);
@@ -1033,7 +1021,7 @@ const RecordCallConfirmationButton = ({ caption, }) => {
     }
     const title = isAwaitingResponse
         ? t('Waiting for recording to start...')
-        : caption ?? t('Record call');
+        : (caption ?? t('Record call'));
     return (jsx(Restricted, { requiredGrants: [
             OwnCapability.START_RECORD_CALL,
             OwnCapability.STOP_RECORD_CALL,
@@ -1284,7 +1272,7 @@ const DeviceSelectorDropdown = (props) => {
     return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), jsx(DropDownSelect, { icon: icon, defaultSelectedIndex: selectedIndex, defaultSelectedLabel: selectedDeviceInfo.label, handleSelect: handleSelect, children: deviceList.map((device) => (jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.isSelected }, device.deviceId))) })] }));
 };
 const DeviceSelector = (props) => {
-    const { visualType = 'list', icon, placeholder, ...rest } = props;
+    const { visualType = 'list', icon, ...rest } = props;
     if (visualType === 'list') {
         return jsx(DeviceSelectorList, { ...rest });
     }
@@ -1339,7 +1327,7 @@ const ToggleAudioPreviewButton = (props) => {
     const handleClick = createCallControlHandler(props, () => microphone.toggle());
     return (jsx(WithTooltip, { title: !hasBrowserPermission
             ? t('Check your browser audio permissions')
-            : caption ?? t('Mic'), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission, "data-testid": optimisticIsMute
+            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission, "data-testid": optimisticIsMute
                 ? 'preview-audio-unmute-button'
                 : 'preview-audio-mute-button', onClick: handleClick, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
@@ -1365,7 +1353,7 @@ const ToggleAudioPublishingButton = (props) => {
                     ? t('You have no permission to share your audio')
                     : !hasBrowserPermission
                         ? t('Check your browser mic permissions')
-                        : caption ?? t('Mic'), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission || !hasPermission, "data-testid": optimisticIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                        : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission || !hasPermission, "data-testid": optimisticIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
                     }, children: [jsx(Icon, { icon: optimisticIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
@@ -1380,7 +1368,7 @@ const ToggleVideoPreviewButton = (props) => {
     const handleClick = createCallControlHandler(props, () => camera.toggle());
     return (jsx(WithTooltip, { title: !hasBrowserPermission
             ? t('Check your browser video permissions')
-            : caption ?? t('Video'), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optimisticIsMute
+            : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optimisticIsMute
                 ? 'preview-video-unmute-button'
                 : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
@@ -1690,7 +1678,7 @@ const SearchInput = ({ exitSearch, isActive, ...rest }) => {
         }), children: [jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive ? (jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsx("span", { className: "str-video__search-input__icon--active" }) })) : (jsx("span", { className: "str-video__search-input__icon" }))] }));
 };
 
-const SearchResults = ({ EmptySearchResultComponent, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, searchQueryInProgress, searchResults, SearchResultList, }) => {
+function SearchResults({ EmptySearchResultComponent, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, searchQueryInProgress, searchResults, SearchResultList, }) {
     if (searchQueryInProgress) {
         return (jsx("div", { className: "str-video__search-results--loading", children: jsx(LoadingIndicator$1, {}) }));
     }
@@ -1698,7 +1686,7 @@ const SearchResults = ({ EmptySearchResultComponent, LoadingIndicator: LoadingIn
         return jsx(EmptySearchResultComponent, {});
     }
     return jsx(SearchResultList, { data: searchResults });
-};
+}
 
 const useSearch = ({ debounceInterval, searchFn, searchQuery = '', }) => {
     const [searchResults, setSearchResults] = useState([]);
@@ -2309,7 +2297,7 @@ function checkConditions(obj, conditions) {
     for (const key of Object.keys(conditions)) {
         const operator = conditions[key];
         const maybeOperator = operator && typeof operator === 'object';
-        let value = obj[key];
+        const value = obj[key];
         if (maybeOperator && '$eq' in operator) {
             const eqOperator = operator;
             match && (match = eqOperator.$eq === value);
@@ -2680,7 +2668,7 @@ const LivestreamPlayer = (props) => {
     return (jsx(StreamCall, { call: call, children: jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.12.10").split('.');
+const [major, minor, patch] = ("1.13.0").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,