@stream-io/video-react-sdk 1.7.4 → 1.7.6

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { hasAudio, hasScreenShareAudio, CallingState, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, getLogger, disposeOfMediaStream, isPinned, name, NoiseCancellationSettingsModeEnum, SfuModels, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, setSdkInfo } from '@stream-io/video-client';
 export * from '@stream-io/video-client';
-import { useCall, useCallStateHooks, useI18n, Restricted, useConnectedUser, StreamCallProvider, StreamVideoProvider, useStreamVideoClient } from '@stream-io/video-react-bindings';
+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, useCallback, useRef, useMemo, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
@@ -245,39 +245,6 @@ const useHorizontalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD
     return scrollPosition;
 };
 
-const useToggleCallRecording = () => {
-    const call = useCall();
-    const { useIsCallRecordingInProgress } = useCallStateHooks();
-    const isCallRecordingInProgress = useIsCallRecordingInProgress();
-    const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
-    // TODO: add permissions
-    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 = 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 = useCall();
     const { useHasPermissions } = useCallStateHooks();
@@ -1234,17 +1201,10 @@ const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, d
         }), htmlFor: id, children: [jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
 };
 const DeviceSelectorList = (props) => {
-    const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, type, onChange, } = props;
+    const { devices = [], selectedDeviceId, title, type, onChange } = props;
     const { close } = useMenuContext();
-    // 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 (jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), !devices.length ? (jsx(DeviceSelectorOption, { id: `${type}--default`, label: "Default", name: type, defaultChecked: true, value: "default" })) : (devices.map((device) => {
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), devices.length === 0 ? (jsx(DeviceSelectorOption, { id: `${type}--default`, label: t('Default'), name: type, defaultChecked: true, value: "default" })) : (devices.map((device) => {
                 return (jsx(DeviceSelectorOption, { id: `${type}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
                         onChange?.(e.target.value);
                         close?.();
@@ -1252,29 +1212,20 @@ const DeviceSelectorList = (props) => {
             }))] }));
 };
 const DeviceSelectorDropdown = (props) => {
-    const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, onChange, icon, } = props;
-    // 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;
-    }
+    const { devices = [], selectedDeviceId, title, onChange, icon } = props;
+    const { t } = useI18n();
     const selectedIndex = devices.findIndex((d) => d.deviceId === selectedDeviceId);
     const handleSelect = useCallback((index) => {
         onChange?.(devices[index].deviceId);
     }, [devices, onChange]);
-    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: devices[selectedIndex]?.label, handleSelect: handleSelect, children: devices.map((device) => {
-                    return (jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
-                }) })] }));
+    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: devices[selectedIndex]?.label ?? t('Default'), handleSelect: handleSelect, children: devices.length === 0 ? (jsx(DropDownSelectOption, { icon: icon, label: t('Default'), selected: true })) : (devices.map((device) => (jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId)))) })] }));
 };
 const DeviceSelector = (props) => {
     const { visualType = 'list', icon, placeholder, ...rest } = props;
     if (visualType === 'list') {
         return jsx(DeviceSelectorList, { ...rest });
     }
-    return (jsx(DeviceSelectorDropdown, { ...rest, icon: icon, placeholder: placeholder }));
+    return jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
 };
 
 const DeviceSelectorAudioInput = ({ title, visualType, }) => {
@@ -2163,6 +2114,7 @@ var Join = "Join";
 var You = "You";
 var Me = "Me";
 var Unknown = "Unknown";
+var Default = "Default";
 var Refresh = "Refresh";
 var Allow = "Allow";
 var Revoke = "Revoke";
@@ -2213,6 +2165,7 @@ var en = {
 	Me: Me,
 	Unknown: Unknown,
 	"Toggle device menu": "Toggle device menu",
+	Default: Default,
 	"Call Recordings": "Call Recordings",
 	Refresh: Refresh,
 	"Check your browser video permissions": "Check your browser video permissions",
@@ -2576,7 +2529,7 @@ const LivestreamPlayer = (props) => {
     return (jsx(StreamCall, { call: call, children: jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.7.4").split('.');
+const [major, minor, patch] = ("1.7.6").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,