@stream-io/video-react-sdk 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [1.0.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.0.2...@stream-io/video-react-sdk-1.0.3) (2024-05-13)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.0.3`
+* `@stream-io/video-react-bindings` updated to version `0.4.29`
+### [1.0.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.0.1...@stream-io/video-react-sdk-1.0.2) (2024-05-13)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.0.2`
+* `@stream-io/video-react-bindings` updated to version `0.4.28`
+
+### Bug Fixes
+
+* optimistically toggle device status ([#1342](https://github.com/GetStream/stream-video-js/issues/1342)) ([2e4e470](https://github.com/GetStream/stream-video-js/commit/2e4e470347fce7c7499dd21a931e5dec74bf9618))
+
 ### [1.0.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.0.0...@stream-io/video-react-sdk-1.0.1) (2024-05-07)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -828,11 +828,11 @@ const ScreenShareButton = (props) => {
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SCREENSHARE);
     const callSettings = useCallSettings();
     const isScreenSharingAllowed = callSettings?.screensharing.enabled;
-    const { screenShare, isMute: amIScreenSharing } = useScreenShareState();
-    const disableScreenShareButton = amIScreenSharing
-        ? isSomeoneScreenSharing || isScreenSharingAllowed === false
-        : false;
-    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, title: caption || t('Share screen'), variant: "primary", "data-testid": isSomeoneScreenSharing
+    const { screenShare, optimisticIsMute } = useScreenShareState();
+    const amIScreenSharing = !optimisticIsMute;
+    const disableScreenShareButton = !amIScreenSharing &&
+        (isSomeoneScreenSharing || isScreenSharingAllowed === false);
+    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 || amIScreenSharing, caption: caption, title: caption || t('Share screen'), variant: "primary", "data-testid": isSomeoneScreenSharing
                     ? 'screen-share-stop-button'
                     : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: async () => {
                     if (!hasPermission) {
@@ -1006,62 +1006,66 @@ const ToggleAudioPreviewButton = (props) => {
     const { caption, Menu, menuPlacement, ...restCompositeButtonProps } = props;
     const { t } = videoReactBindings.useI18n();
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
-    const { microphone, isMute, hasBrowserPermission } = useMicrophoneState();
-    return (jsxRuntime.jsxs(CompositeButton, { active: isMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", title: !hasBrowserPermission
+    const { microphone, optimisticIsMute, hasBrowserPermission } = useMicrophoneState();
+    return (jsxRuntime.jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", title: !hasBrowserPermission
             ? t('Check your browser audio permissions')
-            : caption || t('Mic'), disabled: !hasBrowserPermission, "data-testid": isMute ? 'preview-audio-unmute-button' : 'preview-audio-mute-button', onClick: () => microphone.toggle(), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, children: [jsxRuntime.jsx(Icon, { icon: !isMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" }))] }));
+            : caption || t('Mic'), disabled: !hasBrowserPermission, "data-testid": optimisticIsMute
+            ? 'preview-audio-unmute-button'
+            : 'preview-audio-mute-button', onClick: () => microphone.toggle(), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, 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: "!" }))] }));
 };
 const ToggleAudioPublishingButton = (props) => {
     const { t } = videoReactBindings.useI18n();
     const { caption, Menu = jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_AUDIO);
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
-    const { microphone, isMute, hasBrowserPermission } = 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.jsxs(CompositeButton, { active: isMute, caption: caption, title: !hasPermission
+    const { microphone, optimisticIsMute, hasBrowserPermission } = 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.jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, title: !hasPermission
                     ? t('You have no permission to share your audio')
                     : !hasBrowserPermission
                         ? t('Check your browser mic permissions')
-                        : caption || t('Mic'), variant: "secondary", disabled: !hasBrowserPermission || !hasPermission, "data-testid": isMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: async () => {
+                        : caption || t('Mic'), variant: "secondary", disabled: !hasBrowserPermission || !hasPermission, "data-testid": optimisticIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: async () => {
                     if (!hasPermission) {
                         await requestPermission();
                     }
                     else {
                         await microphone.toggle();
                     }
-                }, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, children: [jsxRuntime.jsx(Icon, { icon: isMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" }))] }) }) }));
+                }, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, children: [jsxRuntime.jsx(Icon, { icon: optimisticIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" }))] }) }) }));
 };
 
 const ToggleVideoPreviewButton = (props) => {
     const { caption, Menu = DeviceSelectorVideo, menuPlacement = 'top', ...restCompositeButtonProps } = props;
     const { t } = videoReactBindings.useI18n();
     const { useCameraState } = videoReactBindings.useCallStateHooks();
-    const { camera, isMute, hasBrowserPermission } = useCameraState();
-    return (jsxRuntime.jsxs(CompositeButton, { active: isMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), title: !hasBrowserPermission
+    const { camera, optimisticIsMute, hasBrowserPermission } = useCameraState();
+    return (jsxRuntime.jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), title: !hasBrowserPermission
             ? t('Check your browser video permissions')
-            : caption || t('Video'), variant: "secondary", "data-testid": isMute ? 'preview-video-unmute-button' : 'preview-video-mute-button', onClick: () => camera.toggle(), disabled: !hasBrowserPermission, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, children: [jsxRuntime.jsx(Icon, { icon: !isMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" }))] }));
+            : caption || t('Video'), variant: "secondary", "data-testid": optimisticIsMute
+            ? 'preview-video-unmute-button'
+            : 'preview-video-mute-button', onClick: () => camera.toggle(), disabled: !hasBrowserPermission, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, 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: "!" }))] }));
 };
 const ToggleVideoPublishingButton = (props) => {
     const { t } = videoReactBindings.useI18n();
     const { caption, Menu = jsxRuntime.jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_VIDEO);
     const { useCameraState, useCallSettings } = videoReactBindings.useCallStateHooks();
-    const { camera, isMute, hasBrowserPermission } = useCameraState();
+    const { camera, optimisticIsMute, hasBrowserPermission } = useCameraState();
     const callSettings = useCallSettings();
     const isPublishingVideoAllowed = callSettings?.video.enabled;
-    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.jsxs(CompositeButton, { active: isMute, caption: caption, variant: "secondary", title: !hasPermission
+    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.jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, variant: "secondary", title: !hasPermission
                     ? t('You have no permission to share your video')
                     : !hasBrowserPermission
                         ? t('Check your browser video permissions')
                         : !isPublishingVideoAllowed
                             ? t('Video publishing is disabled by the system')
-                            : caption || t('Video'), disabled: !hasBrowserPermission || !hasPermission || !isPublishingVideoAllowed, "data-testid": isMute ? 'video-unmute-button' : 'video-mute-button', onClick: async () => {
+                            : caption || t('Video'), disabled: !hasBrowserPermission || !hasPermission || !isPublishingVideoAllowed, "data-testid": optimisticIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: async () => {
                     if (!hasPermission) {
                         await requestPermission();
                     }
                     else {
                         await camera.toggle();
                     }
-                }, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, children: [jsxRuntime.jsx(Icon, { icon: isMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                }, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, children: [jsxRuntime.jsx(Icon, { icon: optimisticIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
                         !hasPermission ||
                         !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" }))] }) }) }));
 };
@@ -2510,7 +2514,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 const hasScreenShare = (p) => !!p?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("1.0.1" ).split('.');
+const [major, minor, patch] = ("1.0.3" ).split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,