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

package/dist/src/components/CallControls/ScreenShareButton.d.ts

@@ -1,5 +1,6 @@
+import { UseInputMediaDeviceOptions } from '@stream-io/video-react-bindings';
 import { PropsWithErrorHandler } from '../../utilities/callControlHandler';
 export type ScreenShareButtonProps = PropsWithErrorHandler<{
     caption?: string;
-}>;
+} & UseInputMediaDeviceOptions>;
 export declare const ScreenShareButton: (props: ScreenShareButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CallControls/ToggleAudioButton.d.ts

@@ -1,6 +1,7 @@
+import { type UseInputMediaDeviceOptions } from '@stream-io/video-react-bindings';
 import { IconButtonWithMenuProps } from '../Button';
 import { PropsWithErrorHandler } from '../../utilities/callControlHandler';
-export type ToggleAudioPreviewButtonProps = PropsWithErrorHandler<Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'>>;
+export type ToggleAudioPreviewButtonProps = PropsWithErrorHandler<Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'> & UseInputMediaDeviceOptions>;
 export declare const ToggleAudioPreviewButton: (props: ToggleAudioPreviewButtonProps) => import("react/jsx-runtime").JSX.Element;
-export type ToggleAudioPublishingButtonProps = PropsWithErrorHandler<Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'>>;
+export type ToggleAudioPublishingButtonProps = PropsWithErrorHandler<Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'> & UseInputMediaDeviceOptions>;
 export declare const ToggleAudioPublishingButton: (props: ToggleAudioPublishingButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CallControls/ToggleVideoButton.d.ts

@@ -1,7 +1,8 @@
+import { UseInputMediaDeviceOptions } from '@stream-io/video-react-bindings';
 import { IconButtonWithMenuProps } from '../Button/';
 import { PropsWithErrorHandler } from '../../utilities/callControlHandler';
-export type ToggleVideoPreviewButtonProps = PropsWithErrorHandler<Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'>>;
+export type ToggleVideoPreviewButtonProps = PropsWithErrorHandler<Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'> & UseInputMediaDeviceOptions>;
 export declare const ToggleVideoPreviewButton: (props: ToggleVideoPreviewButtonProps) => import("react/jsx-runtime").JSX.Element;
-type ToggleVideoPublishingButtonProps = PropsWithErrorHandler<Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'>>;
+type ToggleVideoPublishingButtonProps = PropsWithErrorHandler<Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'> & UseInputMediaDeviceOptions>;
 export declare const ToggleVideoPublishingButton: (props: ToggleVideoPublishingButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.20.2",
+  "version": "1.21.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.28.1",
+    "@stream-io/video-client": "1.29.0",
     "@stream-io/video-filters-web": "0.2.1",
-    "@stream-io/video-react-bindings": "1.7.16",
+    "@stream-io/video-react-bindings": "1.8.0",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"

package/src/components/CallControls/ScreenShareButton.tsx

@@ -3,6 +3,7 @@ import {
   Restricted,
   useCallStateHooks,
   useI18n,
+  UseInputMediaDeviceOptions,
 } from '@stream-io/video-react-bindings';
 import { CompositeButton } from '../Button/';
 import { PermissionNotification } from '../Notification';
@@ -14,13 +15,15 @@ import {
   createCallControlHandler,
 } from '../../utilities/callControlHandler';
 
-export type ScreenShareButtonProps = PropsWithErrorHandler<{
-  caption?: string;
-}>;
+export type ScreenShareButtonProps = PropsWithErrorHandler<
+  {
+    caption?: string;
+  } & UseInputMediaDeviceOptions
+>;
 
 export const ScreenShareButton = (props: ScreenShareButtonProps) => {
   const { t } = useI18n();
-  const { caption } = props;
+  const { caption, optimisticUpdates } = props;
 
   const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } =
     useCallStateHooks();
@@ -31,11 +34,15 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
   const callSettings = useCallSettings();
   const isScreenSharingAllowed = callSettings?.screensharing.enabled;
 
-  const { screenShare, optimisticIsMute } = useScreenShareState();
-  const amIScreenSharing = !optimisticIsMute;
+  const { screenShare, optionsAwareIsMute, isTogglePending } =
+    useScreenShareState({
+      optimisticUpdates,
+    });
+  const amIScreenSharing = !optionsAwareIsMute;
   const disableScreenShareButton =
-    !amIScreenSharing &&
-    (isSomeoneScreenSharing || isScreenSharingAllowed === false);
+    (!amIScreenSharing &&
+      (isSomeoneScreenSharing || isScreenSharingAllowed === false)) ||
+    (!optimisticUpdates && isTogglePending);
   const handleClick = createCallControlHandler(props, async () => {
     if (!hasPermission) {
       await requestPermission();

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -3,6 +3,7 @@ import {
   Restricted,
   useCallStateHooks,
   useI18n,
+  type UseInputMediaDeviceOptions,
 } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
 import { CompositeButton, IconButtonWithMenuProps } from '../Button';
@@ -21,7 +22,8 @@ export type ToggleAudioPreviewButtonProps = PropsWithErrorHandler<
   Pick<
     IconButtonWithMenuProps,
     'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
-  >
+  > &
+    UseInputMediaDeviceOptions
 >;
 
 export const ToggleAudioPreviewButton = (
@@ -32,16 +34,18 @@ export const ToggleAudioPreviewButton = (
     Menu = DeviceSelectorAudioInput,
     menuPlacement = 'top',
     onMenuToggle,
+    optimisticUpdates,
     ...restCompositeButtonProps
   } = props;
   const { t } = useI18n();
   const { useMicrophoneState } = useCallStateHooks();
   const {
     microphone,
-    optimisticIsMute,
     hasBrowserPermission,
     isPromptingPermission,
-  } = useMicrophoneState();
+    optionsAwareIsMute,
+    isTogglePending,
+  } = useMicrophoneState({ optimisticUpdates });
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
   const handleClick = createCallControlHandler(props, () =>
     microphone.toggle(),
@@ -57,15 +61,17 @@ export const ToggleAudioPreviewButton = (
       tooltipDisabled={tooltipDisabled}
     >
       <CompositeButton
-        active={optimisticIsMute}
+        active={optionsAwareIsMute}
         caption={caption}
         className={clsx(
           !hasBrowserPermission && 'str-video__device-unavailable',
         )}
         variant="secondary"
-        disabled={!hasBrowserPermission}
+        disabled={
+          !hasBrowserPermission || (!optimisticUpdates && isTogglePending)
+        }
         data-testid={
-          optimisticIsMute
+          optionsAwareIsMute
             ? 'preview-audio-unmute-button'
             : 'preview-audio-mute-button'
         }
@@ -78,7 +84,7 @@ export const ToggleAudioPreviewButton = (
           onMenuToggle?.(shown);
         }}
       >
-        <Icon icon={!optimisticIsMute ? 'mic' : 'mic-off'} />
+        <Icon icon={!optionsAwareIsMute ? 'mic' : 'mic-off'} />
         {!hasBrowserPermission && (
           <span
             className="str-video__no-media-permission"
@@ -102,7 +108,8 @@ export type ToggleAudioPublishingButtonProps = PropsWithErrorHandler<
   Pick<
     IconButtonWithMenuProps,
     'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
-  >
+  > &
+    UseInputMediaDeviceOptions
 >;
 
 export const ToggleAudioPublishingButton = (
@@ -114,6 +121,7 @@ export const ToggleAudioPublishingButton = (
     Menu = <DeviceSelectorAudioInput visualType="list" />,
     menuPlacement = 'top',
     onMenuToggle,
+    optimisticUpdates,
     ...restCompositeButtonProps
   } = props;
 
@@ -123,10 +131,12 @@ export const ToggleAudioPublishingButton = (
   const { useMicrophoneState } = useCallStateHooks();
   const {
     microphone,
-    optimisticIsMute,
     hasBrowserPermission,
     isPromptingPermission,
-  } = useMicrophoneState();
+    isTogglePending,
+    optionsAwareIsMute,
+  } = useMicrophoneState({ optimisticUpdates });
+
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
   const handleClick = createCallControlHandler(props, async () => {
     if (!hasPermission) {
@@ -156,12 +166,17 @@ export const ToggleAudioPublishingButton = (
           tooltipDisabled={tooltipDisabled}
         >
           <CompositeButton
-            active={optimisticIsMute}
+            active={optionsAwareIsMute}
             caption={caption}
             variant="secondary"
-            disabled={!hasBrowserPermission || !hasPermission}
+            disabled={
+              !hasBrowserPermission ||
+              !hasPermission ||
+              // disable button while the toggle action is pending when not using optimistic updates
+              (!optimisticUpdates && isTogglePending)
+            }
             data-testid={
-              optimisticIsMute ? 'audio-unmute-button' : 'audio-mute-button'
+              optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button'
             }
             onClick={handleClick}
             Menu={Menu}
@@ -173,7 +188,7 @@ export const ToggleAudioPublishingButton = (
               onMenuToggle?.(shown);
             }}
           >
-            <Icon icon={optimisticIsMute ? 'mic-off' : 'mic'} />
+            <Icon icon={optionsAwareIsMute ? 'mic-off' : 'mic'} />
             {(!hasBrowserPermission || !hasPermission) && (
               <span className="str-video__no-media-permission">!</span>
             )}

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -2,6 +2,7 @@ import {
   Restricted,
   useCallStateHooks,
   useI18n,
+  UseInputMediaDeviceOptions,
 } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
 import { OwnCapability } from '@stream-io/video-client';
@@ -21,7 +22,8 @@ export type ToggleVideoPreviewButtonProps = PropsWithErrorHandler<
   Pick<
     IconButtonWithMenuProps,
     'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
-  >
+  > &
+    UseInputMediaDeviceOptions
 >;
 
 export const ToggleVideoPreviewButton = (
@@ -32,16 +34,18 @@ export const ToggleVideoPreviewButton = (
     Menu = DeviceSelectorVideo,
     menuPlacement = 'top',
     onMenuToggle,
+    optimisticUpdates,
     ...restCompositeButtonProps
   } = props;
   const { t } = useI18n();
   const { useCameraState } = useCallStateHooks();
   const {
     camera,
-    optimisticIsMute,
     hasBrowserPermission,
     isPromptingPermission,
-  } = useCameraState();
+    isTogglePending,
+    optionsAwareIsMute,
+  } = useCameraState({ optimisticUpdates });
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
   const handleClick = createCallControlHandler(props, () => camera.toggle());
 
@@ -55,19 +59,21 @@ export const ToggleVideoPreviewButton = (
       tooltipDisabled={tooltipDisabled}
     >
       <CompositeButton
-        active={optimisticIsMute}
+        active={optionsAwareIsMute}
         caption={caption}
         className={clsx(
           !hasBrowserPermission && 'str-video__device-unavailable',
         )}
         variant="secondary"
         data-testid={
-          optimisticIsMute
+          optionsAwareIsMute
             ? 'preview-video-unmute-button'
             : 'preview-video-mute-button'
         }
         onClick={handleClick}
-        disabled={!hasBrowserPermission}
+        disabled={
+          !hasBrowserPermission || (!optimisticUpdates && isTogglePending)
+        }
         Menu={Menu}
         menuPlacement={menuPlacement}
         {...restCompositeButtonProps}
@@ -76,7 +82,7 @@ export const ToggleVideoPreviewButton = (
           onMenuToggle?.(shown);
         }}
       >
-        <Icon icon={!optimisticIsMute ? 'camera' : 'camera-off'} />
+        <Icon icon={!optionsAwareIsMute ? 'camera' : 'camera-off'} />
         {!hasBrowserPermission && (
           <span
             className="str-video__no-media-permission"
@@ -100,7 +106,8 @@ type ToggleVideoPublishingButtonProps = PropsWithErrorHandler<
   Pick<
     IconButtonWithMenuProps,
     'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
-  >
+  > &
+    UseInputMediaDeviceOptions
 >;
 
 export const ToggleVideoPublishingButton = (
@@ -112,6 +119,7 @@ export const ToggleVideoPublishingButton = (
     Menu = <DeviceSelectorVideo visualType="list" />,
     menuPlacement = 'top',
     onMenuToggle,
+    optimisticUpdates,
     ...restCompositeButtonProps
   } = props;
 
@@ -121,10 +129,11 @@ export const ToggleVideoPublishingButton = (
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const {
     camera,
-    optimisticIsMute,
+    optionsAwareIsMute,
     hasBrowserPermission,
     isPromptingPermission,
-  } = useCameraState();
+    isTogglePending,
+  } = useCameraState({ optimisticUpdates });
   const callSettings = useCallSettings();
   const isPublishingVideoAllowed = callSettings?.video.enabled;
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
@@ -160,16 +169,17 @@ export const ToggleVideoPublishingButton = (
           tooltipDisabled={tooltipDisabled}
         >
           <CompositeButton
-            active={optimisticIsMute}
+            active={optionsAwareIsMute}
             caption={caption}
             variant="secondary"
             disabled={
               !hasBrowserPermission ||
               !hasPermission ||
-              !isPublishingVideoAllowed
+              !isPublishingVideoAllowed ||
+              (!optimisticUpdates && isTogglePending)
             }
             data-testid={
-              optimisticIsMute ? 'video-unmute-button' : 'video-mute-button'
+              optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button'
             }
             onClick={handleClick}
             Menu={Menu}
@@ -181,7 +191,7 @@ export const ToggleVideoPublishingButton = (
               onMenuToggle?.(shown);
             }}
           >
-            <Icon icon={optimisticIsMute ? 'camera-off' : 'camera'} />
+            <Icon icon={optionsAwareIsMute ? 'camera-off' : 'camera'} />
             {(!hasBrowserPermission ||
               !hasPermission ||
               !isPublishingVideoAllowed) && (

package/src/components/Notification/PermissionNotification.tsx

@@ -62,10 +62,12 @@ export const PermissionNotification = (props: PermissionNotificationProps) => {
     'granted' | 'revoked'
   >();
   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;
     }

package/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -261,15 +261,24 @@ const useUpdateCallDuration = () => {
 
 const useToggleFullScreen = () => {
   const { participantViewElement } = useParticipantViewContext();
-  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(
+    !!document.fullscreenElement,
+  );
+  useEffect(() => {
+    const handler = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener('fullscreenchange', handler);
+    return () => {
+      document.removeEventListener('fullscreenchange', handler);
+    };
+  }, []);
   return 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]);