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

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.7.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.5...@stream-io/video-react-sdk-1.7.6) (2024-11-01)
+
+### Dependency Updates
+
+* `@stream-io/video-react-bindings` updated to version `1.1.11`
+
+### Bug Fixes
+
+* move useToggleCallRecording to react-bindings ([#1545](https://github.com/GetStream/stream-video-js/issues/1545)) ([73014ca](https://github.com/GetStream/stream-video-js/commit/73014ca6a4585680f581c4e9481c2d286f2fcd37))
+
+## [1.7.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.4...@stream-io/video-react-sdk-1.7.5) (2024-10-30)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.10.1`
+* `@stream-io/video-react-bindings` updated to version `1.1.10`
+
+### Bug Fixes
+
+* various device selector issues ([#1541](https://github.com/GetStream/stream-video-js/issues/1541)) ([f23618b](https://github.com/GetStream/stream-video-js/commit/f23618bda447eeb2d66f908bdb38b24db051f87c))
+
 ## [1.7.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.3...@stream-io/video-react-sdk-1.7.4) (2024-10-30)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -245,39 +245,6 @@ 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 { useHasPermissions } = videoReactBindings.useCallStateHooks();
@@ -930,7 +897,7 @@ const SpeakingWhileMutedNotification = ({ children, text, placement, }) => {
 
 const RecordingInProgressNotification = ({ children, text, }) => {
     const { t } = videoReactBindings.useI18n();
-    const { isCallRecordingInProgress } = useToggleCallRecording();
+    const { isCallRecordingInProgress } = videoReactBindings.useToggleCallRecording();
     const [isVisible, setVisible] = react.useState(false);
     const message = text ?? t('Recording in progress...');
     react.useEffect(() => {
@@ -990,7 +957,7 @@ const WithTooltip = ({ title, tooltipClassName, tooltipPlacement, tooltipDisable
 
 const RecordEndConfirmation = () => {
     const { t } = videoReactBindings.useI18n();
-    const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();
+    const { toggleCallRecording, isAwaitingResponse } = videoReactBindings.useToggleCallRecording();
     const { close } = useMenuContext();
     return (jsxRuntime.jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxRuntime.jsxs("div", { className: "str-video__end-recording__header", children: [jsxRuntime.jsx(Icon, { icon: "recording-on" }), jsxRuntime.jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsxRuntime.jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxRuntime.jsxs("div", { className: "str-video__end-recording__actions", children: [jsxRuntime.jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsxRuntime.jsx(CompositeButton, { variant: "primary", onClick: toggleCallRecording, children: isAwaitingResponse ? jsxRuntime.jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
 };
@@ -999,7 +966,7 @@ const ToggleEndRecordingMenuButton = react.forwardRef(function ToggleEndRecordin
 });
 const RecordCallConfirmationButton = ({ caption, }) => {
     const { t } = videoReactBindings.useI18n();
-    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = videoReactBindings.useToggleCallRecording();
     if (isCallRecordingInProgress) {
         return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
                 videoClient.OwnCapability.START_RECORD_CALL,
@@ -1016,7 +983,7 @@ const RecordCallConfirmationButton = ({ caption, }) => {
 };
 const RecordCallButton = ({ caption }) => {
     const { t } = videoReactBindings.useI18n();
-    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = videoReactBindings.useToggleCallRecording();
     let title = caption ?? t('Record call');
     if (isAwaitingResponse) {
         title = isCallRecordingInProgress
@@ -1234,17 +1201,10 @@ const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, d
         }), htmlFor: id, children: [jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsxRuntime.jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), !devices.length ? (jsxRuntime.jsx(DeviceSelectorOption, { id: `${type}--default`, label: "Default", name: type, defaultChecked: true, value: "default" })) : (devices.map((device) => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsxRuntime.jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), devices.length === 0 ? (jsxRuntime.jsx(DeviceSelectorOption, { id: `${type}--default`, label: t('Default'), name: type, defaultChecked: true, value: "default" })) : (devices.map((device) => {
                 return (jsxRuntime.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 } = videoReactBindings.useI18n();
     const selectedIndex = devices.findIndex((d) => d.deviceId === selectedDeviceId);
     const handleSelect = react.useCallback((index) => {
         onChange?.(devices[index].deviceId);
     }, [devices, onChange]);
-    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 }), jsxRuntime.jsx(DropDownSelect, { icon: icon, defaultSelectedIndex: selectedIndex, defaultSelectedLabel: devices[selectedIndex]?.label, handleSelect: handleSelect, children: devices.map((device) => {
-                    return (jsxRuntime.jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.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 }), jsxRuntime.jsx(DropDownSelect, { icon: icon, defaultSelectedIndex: selectedIndex, defaultSelectedLabel: devices[selectedIndex]?.label ?? t('Default'), handleSelect: handleSelect, children: devices.length === 0 ? (jsxRuntime.jsx(DropDownSelectOption, { icon: icon, label: t('Default'), selected: true })) : (devices.map((device) => (jsxRuntime.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 jsxRuntime.jsx(DeviceSelectorList, { ...rest });
     }
-    return (jsxRuntime.jsx(DeviceSelectorDropdown, { ...rest, icon: icon, placeholder: placeholder }));
+    return jsxRuntime.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 (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.7.4").split('.');
+const [major, minor, patch] = ("1.7.6").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,