@stream-io/video-react-sdk 1.20.2 → 1.21.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.21.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.20.2...@stream-io/video-react-sdk-1.21.0) (2025-09-09)
+
+### Dependency Updates
+
+- `@stream-io/video-client` updated to version `1.29.0`
+- `@stream-io/video-react-bindings` updated to version `1.8.0`
+
+### Features
+
+- opt-out from optimistic updates ([#1904](https://github.com/GetStream/stream-video-js/issues/1904)) ([45dba34](https://github.com/GetStream/stream-video-js/commit/45dba34d38dc64f456e37b593e38e420426529f5))
+
+### Bug Fixes
+
+- capabilities and call grants ([#1899](https://github.com/GetStream/stream-video-js/issues/1899)) ([5725dfa](https://github.com/GetStream/stream-video-js/commit/5725dfa29b1e5fdb6fe4e26825ce7b268664d2fa))
+- **LivestreamLayout:** handle enter/exit fullscreen gracefully ([#1916](https://github.com/GetStream/stream-video-js/issues/1916)) ([7dd2a0b](https://github.com/GetStream/stream-video-js/commit/7dd2a0b74d9767aae8463fb665a14b944e6cb204)), closes [#1915](https://github.com/GetStream/stream-video-js/issues/1915)
+
 ## [1.20.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.20.1...@stream-io/video-react-sdk-1.20.2) (2025-09-02)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -1072,11 +1072,13 @@ const PermissionNotification = (props) => {
     const prevHasPermission = react.useRef(hasPermission);
     const [showNotification, setShowNotification] = react.useState();
     react.useEffect(() => {
-        if (hasPermission && !prevHasPermission.current) {
+        if (prevHasPermission.current === hasPermission)
+            return;
+        if (hasPermission) {
             setShowNotification('granted');
             prevHasPermission.current = true;
         }
-        else if (!hasPermission && prevHasPermission.current) {
+        else {
             setShowNotification('revoked');
             prevHasPermission.current = false;
         }
@@ -1301,16 +1303,19 @@ function isNotAllowedError(error) {
 
 const ScreenShareButton = (props) => {
     const { t } = videoReactBindings.useI18n();
-    const { caption } = props;
+    const { caption, optimisticUpdates } = props;
     const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } = videoReactBindings.useCallStateHooks();
     const isSomeoneScreenSharing = useHasOngoingScreenShare();
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SCREENSHARE);
     const callSettings = useCallSettings();
     const isScreenSharingAllowed = callSettings?.screensharing.enabled;
-    const { screenShare, optimisticIsMute } = useScreenShareState();
-    const amIScreenSharing = !optimisticIsMute;
-    const disableScreenShareButton = !amIScreenSharing &&
-        (isSomeoneScreenSharing || isScreenSharingAllowed === false);
+    const { screenShare, optionsAwareIsMute, isTogglePending } = useScreenShareState({
+        optimisticUpdates,
+    });
+    const amIScreenSharing = !optionsAwareIsMute;
+    const disableScreenShareButton = (!amIScreenSharing &&
+        (isSomeoneScreenSharing || isScreenSharingAllowed === false)) ||
+        (!optimisticUpdates && isTogglePending);
     const handleClick = createCallControlHandler(props, async () => {
         if (!hasPermission) {
             await requestPermission();
@@ -1474,27 +1479,27 @@ const ToggleDeviceSettingsMenuButton = react.forwardRef(function ToggleDeviceSet
 });
 
 const ToggleAudioPreviewButton = (props) => {
-    const { caption, Menu = DeviceSelectorAudioInput, menuPlacement = 'top', onMenuToggle, ...restCompositeButtonProps } = props;
+    const { caption, Menu = DeviceSelectorAudioInput, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { t } = videoReactBindings.useI18n();
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
-    const { microphone, optimisticIsMute, hasBrowserPermission, isPromptingPermission, } = useMicrophoneState();
+    const { microphone, hasBrowserPermission, isPromptingPermission, optionsAwareIsMute, isTogglePending, } = useMicrophoneState({ optimisticUpdates });
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, () => microphone.toggle());
     return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
             ? t('Check your browser audio permissions')
-            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.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: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
                 ? 'preview-audio-unmute-button'
                 : 'preview-audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsxRuntime.jsx(Icon, { icon: !optimisticIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
 };
 const ToggleAudioPublishingButton = (props) => {
     const { t } = videoReactBindings.useI18n();
-    const { caption, Menu = jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, ...restCompositeButtonProps } = props;
+    const { caption, Menu = jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_AUDIO);
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
-    const { microphone, optimisticIsMute, hasBrowserPermission, isPromptingPermission, } = useMicrophoneState();
+    const { microphone, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useMicrophoneState({ optimisticUpdates });
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, async () => {
         if (!hasPermission) {
@@ -1508,34 +1513,37 @@ 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: jsxRuntime.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: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                        !hasPermission ||
+                        // disable button while the toggle action is pending when not using optimistic updates
+                        (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
-                    }, children: [jsxRuntime.jsx(Icon, { icon: optimisticIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
+                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
 };
 
 const ToggleVideoPreviewButton = (props) => {
-    const { caption, Menu = DeviceSelectorVideo, menuPlacement = 'top', onMenuToggle, ...restCompositeButtonProps } = props;
+    const { caption, Menu = DeviceSelectorVideo, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { t } = videoReactBindings.useI18n();
     const { useCameraState } = videoReactBindings.useCallStateHooks();
-    const { camera, optimisticIsMute, hasBrowserPermission, isPromptingPermission, } = useCameraState();
+    const { camera, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useCameraState({ optimisticUpdates });
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, () => camera.toggle());
     return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
             ? t('Check your browser video permissions')
-            : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optimisticIsMute
+            : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
                 ? 'preview-video-unmute-button'
-                : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsxRuntime.jsx(Icon, { icon: !optimisticIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
 };
 const ToggleVideoPublishingButton = (props) => {
     const { t } = videoReactBindings.useI18n();
-    const { caption, Menu = jsxRuntime.jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, ...restCompositeButtonProps } = props;
+    const { caption, Menu = jsxRuntime.jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_VIDEO);
     const { useCameraState, useCallSettings } = videoReactBindings.useCallStateHooks();
-    const { camera, optimisticIsMute, hasBrowserPermission, isPromptingPermission, } = useCameraState();
+    const { camera, optionsAwareIsMute, hasBrowserPermission, isPromptingPermission, isTogglePending, } = useCameraState({ optimisticUpdates });
     const callSettings = useCallSettings();
     const isPublishingVideoAllowed = callSettings?.video.enabled;
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
@@ -1553,12 +1561,13 @@ const ToggleVideoPublishingButton = (props) => {
                         ? t('Check your browser video permissions')
                         : !isPublishingVideoAllowed
                             ? t('Video publishing is disabled by the system')
-                            : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                            : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
                         !hasPermission ||
-                        !isPublishingVideoAllowed, "data-testid": optimisticIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                        !isPublishingVideoAllowed ||
+                        (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
-                    }, children: [jsxRuntime.jsx(Icon, { icon: optimisticIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
                             !hasPermission ||
                             !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
 };
@@ -2648,16 +2657,23 @@ const useUpdateCallDuration = () => {
 };
 const useToggleFullScreen = () => {
     const { participantViewElement } = useParticipantViewContext();
-    const [isFullscreen, setIsFullscreen] = react.useState(false);
+    const [isFullscreen, setIsFullscreen] = react.useState(!!document.fullscreenElement);
+    react.useEffect(() => {
+        const handler = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener('fullscreenchange', handler);
+        return () => {
+            document.removeEventListener('fullscreenchange', handler);
+        };
+    }, []);
     return react.useCallback(() => {
         if (isFullscreen) {
-            document.exitFullscreen().then(() => {
-                setIsFullscreen(false);
+            document.exitFullscreen().catch((err) => {
+                console.error('Failed to exit fullscreen', err);
             });
         }
         else {
-            participantViewElement?.requestFullscreen().then(() => {
-                setIsFullscreen(true);
+            participantViewElement?.requestFullscreen().catch((err) => {
+                console.error('Failed to enter fullscreen', err);
             });
         }
     }, [isFullscreen, participantViewElement]);
@@ -2954,7 +2970,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.20.2").split('.');
+const [major, minor, patch] = ("1.21.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,