@stream-io/video-react-sdk 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -29,9 +29,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
-    "@stream-io/video-client": "1.0.0",
+    "@stream-io/video-client": "1.0.2",
     "@stream-io/video-filters-web": "0.1.0",
-    "@stream-io/video-react-bindings": "0.4.26",
+    "@stream-io/video-react-bindings": "0.4.28",
     "chart.js": "^4.4.1",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"

package/src/components/CallControls/ScreenShareButton.tsx

@@ -26,10 +26,11 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
   const callSettings = useCallSettings();
   const isScreenSharingAllowed = callSettings?.screensharing.enabled;
 
-  const { screenShare, isMute: amIScreenSharing } = useScreenShareState();
-  const disableScreenShareButton = amIScreenSharing
-    ? isSomeoneScreenSharing || isScreenSharingAllowed === false
-    : false;
+  const { screenShare, optimisticIsMute } = useScreenShareState();
+  const amIScreenSharing = !optimisticIsMute;
+  const disableScreenShareButton =
+    !amIScreenSharing &&
+    (isSomeoneScreenSharing || isScreenSharingAllowed === false);
   return (
     <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>
       <PermissionNotification
@@ -40,7 +41,7 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
         messageRevoked={t('You can no longer share your screen.')}
       >
         <CompositeButton
-          active={isSomeoneScreenSharing}
+          active={isSomeoneScreenSharing || amIScreenSharing}
           caption={caption}
           title={caption || t('Share screen')}
           variant="primary"

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -22,11 +22,12 @@ export const ToggleAudioPreviewButton = (
   const { caption, Menu, menuPlacement, ...restCompositeButtonProps } = props;
   const { t } = useI18n();
   const { useMicrophoneState } = useCallStateHooks();
-  const { microphone, isMute, hasBrowserPermission } = useMicrophoneState();
+  const { microphone, optimisticIsMute, hasBrowserPermission } =
+    useMicrophoneState();
 
   return (
     <CompositeButton
-      active={isMute}
+      active={optimisticIsMute}
       caption={caption}
       className={clsx(!hasBrowserPermission && 'str-video__device-unavailable')}
       variant="secondary"
@@ -37,14 +38,16 @@ export const ToggleAudioPreviewButton = (
       }
       disabled={!hasBrowserPermission}
       data-testid={
-        isMute ? 'preview-audio-unmute-button' : 'preview-audio-mute-button'
+        optimisticIsMute
+          ? 'preview-audio-unmute-button'
+          : 'preview-audio-mute-button'
       }
       onClick={() => microphone.toggle()}
       Menu={Menu}
       menuPlacement={menuPlacement}
       {...restCompositeButtonProps}
     >
-      <Icon icon={!isMute ? 'mic' : 'mic-off'} />
+      <Icon icon={!optimisticIsMute ? 'mic' : 'mic-off'} />
       {!hasBrowserPermission && (
         <span
           className="str-video__no-media-permission"
@@ -76,7 +79,8 @@ export const ToggleAudioPublishingButton = (
     useRequestPermission(OwnCapability.SEND_AUDIO);
 
   const { useMicrophoneState } = useCallStateHooks();
-  const { microphone, isMute, hasBrowserPermission } = useMicrophoneState();
+  const { microphone, optimisticIsMute, hasBrowserPermission } =
+    useMicrophoneState();
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
@@ -88,7 +92,7 @@ export const ToggleAudioPublishingButton = (
         messageRevoked={t('You can no longer speak.')}
       >
         <CompositeButton
-          active={isMute}
+          active={optimisticIsMute}
           caption={caption}
           title={
             !hasPermission
@@ -99,7 +103,9 @@ export const ToggleAudioPublishingButton = (
           }
           variant="secondary"
           disabled={!hasBrowserPermission || !hasPermission}
-          data-testid={isMute ? 'audio-unmute-button' : 'audio-mute-button'}
+          data-testid={
+            optimisticIsMute ? 'audio-unmute-button' : 'audio-mute-button'
+          }
           onClick={async () => {
             if (!hasPermission) {
               await requestPermission();
@@ -112,7 +118,7 @@ export const ToggleAudioPublishingButton = (
           menuOffset={16}
           {...restCompositeButtonProps}
         >
-          <Icon icon={isMute ? 'mic-off' : 'mic'} />
+          <Icon icon={optimisticIsMute ? 'mic-off' : 'mic'} />
           {(!hasBrowserPermission || !hasPermission) && (
             <span className="str-video__no-media-permission">!</span>
           )}

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -27,11 +27,11 @@ export const ToggleVideoPreviewButton = (
   } = props;
   const { t } = useI18n();
   const { useCameraState } = useCallStateHooks();
-  const { camera, isMute, hasBrowserPermission } = useCameraState();
+  const { camera, optimisticIsMute, hasBrowserPermission } = useCameraState();
 
   return (
     <CompositeButton
-      active={isMute}
+      active={optimisticIsMute}
       caption={caption}
       className={clsx(!hasBrowserPermission && 'str-video__device-unavailable')}
       title={
@@ -41,7 +41,9 @@ export const ToggleVideoPreviewButton = (
       }
       variant="secondary"
       data-testid={
-        isMute ? 'preview-video-unmute-button' : 'preview-video-mute-button'
+        optimisticIsMute
+          ? 'preview-video-unmute-button'
+          : 'preview-video-mute-button'
       }
       onClick={() => camera.toggle()}
       disabled={!hasBrowserPermission}
@@ -49,7 +51,7 @@ export const ToggleVideoPreviewButton = (
       menuPlacement={menuPlacement}
       {...restCompositeButtonProps}
     >
-      <Icon icon={!isMute ? 'camera' : 'camera-off'} />
+      <Icon icon={!optimisticIsMute ? 'camera' : 'camera-off'} />
       {!hasBrowserPermission && (
         <span
           className="str-video__no-media-permission"
@@ -81,7 +83,7 @@ export const ToggleVideoPublishingButton = (
     useRequestPermission(OwnCapability.SEND_VIDEO);
 
   const { useCameraState, useCallSettings } = useCallStateHooks();
-  const { camera, isMute, hasBrowserPermission } = useCameraState();
+  const { camera, optimisticIsMute, hasBrowserPermission } = useCameraState();
   const callSettings = useCallSettings();
   const isPublishingVideoAllowed = callSettings?.video.enabled;
 
@@ -97,7 +99,7 @@ export const ToggleVideoPublishingButton = (
         messageRevoked={t('You can no longer share your video.')}
       >
         <CompositeButton
-          active={isMute}
+          active={optimisticIsMute}
           caption={caption}
           variant="secondary"
           title={
@@ -112,7 +114,9 @@ export const ToggleVideoPublishingButton = (
           disabled={
             !hasBrowserPermission || !hasPermission || !isPublishingVideoAllowed
           }
-          data-testid={isMute ? 'video-unmute-button' : 'video-mute-button'}
+          data-testid={
+            optimisticIsMute ? 'video-unmute-button' : 'video-mute-button'
+          }
           onClick={async () => {
             if (!hasPermission) {
               await requestPermission();
@@ -125,7 +129,7 @@ export const ToggleVideoPublishingButton = (
           menuOffset={16}
           {...restCompositeButtonProps}
         >
-          <Icon icon={isMute ? 'camera-off' : 'camera'} />
+          <Icon icon={optimisticIsMute ? 'camera-off' : 'camera'} />
           {(!hasBrowserPermission ||
             !hasPermission ||
             !isPublishingVideoAllowed) && (