@stream-io/video-react-sdk 1.0.7 → 1.0.8

package/dist/src/components/Button/CompositeButton.d.ts

@@ -10,5 +10,6 @@ export type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> =
     menuOffset?: number;
     ToggleMenuButton?: ComponentType<ToggleMenuButtonProps<E>>;
     variant?: 'primary' | 'secondary';
+    onMenuToggle?: (menuShown: boolean) => void;
 }> & ComponentProps<'button'>;
 export declare const CompositeButton: import("react").ForwardRefExoticComponent<Omit<IconButtonWithMenuProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,9 @@
 import { MouseEventHandler } from 'react';
 export type CancelCallButtonProps = {
     disabled?: boolean;
+    caption?: string;
     onClick?: MouseEventHandler<HTMLButtonElement>;
     onLeave?: () => void;
 };
 export declare const CancelCallConfirmButton: ({ onClick, onLeave, }: CancelCallButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CancelCallButton: ({ disabled, onClick, onLeave, }: CancelCallButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CancelCallButton: ({ disabled, caption, onClick, onLeave, }: CancelCallButtonProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

package/dist/src/components/Menu/MenuToggle.d.ts

@@ -14,6 +14,7 @@ export type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{
     strategy?: Strategy;
     offset?: number;
     visualType?: MenuVisualType;
+    onToggle?: (menuShown: boolean) => void;
 }>;
 export type MenuContextValue = {
     close?: () => void;
@@ -22,4 +23,4 @@ export type MenuContextValue = {
  * Access to the closes MenuContext.
  */
 export declare const useMenuContext: () => MenuContextValue;
-export declare const MenuToggle: <E extends HTMLElement>({ ToggleButton, placement, strategy, offset, visualType, children, }: MenuToggleProps<E>) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuToggle: <E extends HTMLElement>({ ToggleButton, placement, strategy, offset, visualType, children, onToggle, }: MenuToggleProps<E>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Tooltip/WithTooltip.d.ts

@@ -1,5 +1,7 @@
 import { ComponentProps } from 'react';
 import { TooltipProps } from './Tooltip';
-type WithPopupProps = ComponentProps<'div'> & Omit<TooltipProps<HTMLDivElement>, 'referenceElement'>;
-export declare const WithTooltip: ({ title, tooltipClassName, tooltipPlacement, ...props }: WithPopupProps) => import("react/jsx-runtime").JSX.Element;
+type WithPopupProps = ComponentProps<'div'> & Omit<TooltipProps<HTMLDivElement>, 'referenceElement' | 'children'> & {
+    tooltipDisabled?: boolean;
+};
+export declare const WithTooltip: ({ title, tooltipClassName, tooltipPlacement, tooltipDisabled, ...props }: WithPopupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/utilities/callControlHandler.d.ts

@@ -0,0 +1,16 @@
+export type PropsWithErrorHandler<T = unknown> = T & {
+    /**
+     * Will be called if the call control action failed with an error (e.g. user didn't grant a
+     * browser permission to enable a media device). If no callback is provided, just logs the error.
+     * @param error Exception which caused call control action to fail
+     */
+    onError?: (error: unknown) => void;
+};
+/**
+ * Wraps an event handler, silencing and logging exceptions (excluding the NotAllowedError
+ * DOMException, which is a normal situation handled by the SDK)
+ *
+ * @param props component props, including the onError callback
+ * @param handler event handler to wrap
+ */
+export declare const createCallControlHandler: (props: PropsWithErrorHandler, handler: () => Promise<void>) => (() => Promise<void>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -45,7 +45,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-typescript": "^11.1.6",
     "@stream-io/audio-filters-web": "^0.1.0",
-    "@stream-io/video-styling": "^1.0.2",
+    "@stream-io/video-styling": "^1.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",

package/src/components/Button/CompositeButton.tsx

@@ -22,6 +22,7 @@ export type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> =
     menuOffset?: number;
     ToggleMenuButton?: ComponentType<ToggleMenuButtonProps<E>>;
     variant?: 'primary' | 'secondary';
+    onMenuToggle?: (menuShown: boolean) => void;
   }> &
     ComponentProps<'button'>;
 
@@ -41,6 +42,7 @@ export const CompositeButton = forwardRef<
     ToggleMenuButton = DefaultToggleMenuButton,
     variant,
     onClick,
+    onMenuToggle,
     ...restButtonProps
   },
   ref,
@@ -79,6 +81,7 @@ export const CompositeButton = forwardRef<
             offset={menuOffset}
             placement={menuPlacement}
             ToggleButton={ToggleMenuButton}
+            onToggle={onMenuToggle}
           >
             {isComponentType(Menu) ? <Menu /> : Menu}
           </MenuToggle>

package/src/components/CallControls/CallControls.tsx

@@ -12,13 +12,13 @@ export type CallControlsProps = {
 
 export const CallControls = ({ onLeave }: CallControlsProps) => (
   <div className="str-video__call-controls">
-    <RecordCallButton />
-    <ReactionsButton />
-    <ScreenShareButton />
     <SpeakingWhileMutedNotification>
       <ToggleAudioPublishingButton />
     </SpeakingWhileMutedNotification>
     <ToggleVideoPublishingButton />
+    <ReactionsButton />
+    <ScreenShareButton />
+    <RecordCallButton />
     <CancelCallButton onLeave={onLeave} />
   </div>
 );

package/src/components/CallControls/CancelCallButton.tsx

@@ -6,6 +6,7 @@ import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 
 import { IconButton } from '../Button';
 import { Icon } from '../Icon';
+import { WithTooltip } from '../Tooltip';
 
 const EndCallMenu = (props: {
   onLeave: MouseEventHandler<HTMLButtonElement>;
@@ -51,18 +52,20 @@ const CancelCallToggleMenuButton = forwardRef<
 >(function CancelCallToggleMenuButton(props, ref) {
   const { t } = useI18n();
   return (
-    <IconButton
-      icon="call-end"
-      variant="danger"
-      title={t('Leave call')}
-      data-testid="leave-call-button"
-      ref={ref}
-    />
+    <WithTooltip title={t('Leave call')}>
+      <IconButton
+        icon="call-end"
+        variant="danger"
+        data-testid="leave-call-button"
+        ref={ref}
+      />
+    </WithTooltip>
   );
 });
 
 export type CancelCallButtonProps = {
   disabled?: boolean;
+  caption?: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   onLeave?: () => void;
 };
@@ -106,6 +109,7 @@ export const CancelCallConfirmButton = ({
 
 export const CancelCallButton = ({
   disabled,
+  caption,
   onClick,
   onLeave,
 }: CancelCallButtonProps) => {
@@ -127,7 +131,7 @@ export const CancelCallButton = ({
       disabled={disabled}
       icon="call-end"
       variant="danger"
-      title={t('Leave call')}
+      title={caption ?? t('Leave call')}
       data-testid="cancel-call-button"
       onClick={handleClick}
     />

package/src/components/CallControls/ReactionsButton.tsx

@@ -4,10 +4,16 @@ import clsx from 'clsx';
 import { OwnCapability, StreamReaction } from '@stream-io/video-client';
 import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
 
-import { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';
+import {
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+  useMenuContext,
+} from '../Menu';
 import { CompositeButton } from '../Button';
 import { defaultEmojiReactionMap } from '../Reaction';
 import { Icon } from '../Icon';
+import { WithTooltip } from '../Tooltip';
 
 export const defaultReactions: StreamReaction[] = [
   {
@@ -63,14 +69,11 @@ const ToggleReactionsMenuButton = forwardRef<
 >(function ToggleReactionsMenuButton({ menuShown }, ref) {
   const { t } = useI18n();
   return (
-    <CompositeButton
-      ref={ref}
-      active={menuShown}
-      variant="primary"
-      title={t('Reactions')}
-    >
-      <Icon icon="reactions" />
-    </CompositeButton>
+    <WithTooltip title={t('Reactions')} tooltipDisabled={menuShown}>
+      <CompositeButton ref={ref} active={menuShown} variant="primary">
+        <Icon icon="reactions" />
+      </CompositeButton>
+    </WithTooltip>
   );
 });
 
@@ -84,6 +87,7 @@ export const DefaultReactionsMenu = ({
   layout = 'horizontal',
 }: DefaultReactionsMenuProps) => {
   const call = useCall();
+  const { close } = useMenuContext();
   return (
     <div
       className={clsx('str-video__reactions-menu', {
@@ -98,6 +102,7 @@ export const DefaultReactionsMenu = ({
           className="str-video__reactions-menu__button"
           onClick={() => {
             call?.sendReaction(reaction);
+            close?.();
           }}
         >
           {reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code]}

package/src/components/CallControls/RecordCallButton.tsx

@@ -12,6 +12,7 @@ import {
 } from '../Menu';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { useToggleCallRecording } from '../../hooks';
+import { WithTooltip } from '../Tooltip';
 
 export type RecordCallButtonProps = {
   caption?: string;
@@ -89,6 +90,10 @@ export const RecordCallConfirmationButton = ({
     );
   }
 
+  const title = isAwaitingResponse
+    ? t('Waiting for recording to start...')
+    : caption ?? t('Record call');
+
   return (
     <Restricted
       requiredGrants={[
@@ -96,20 +101,21 @@ export const RecordCallConfirmationButton = ({
         OwnCapability.STOP_RECORD_CALL,
       ]}
     >
-      <CompositeButton
-        active={isCallRecordingInProgress}
-        caption={caption}
-        title={caption || t('Record call')}
-        variant="secondary"
-        data-testid="recording-start-button"
-        onClick={isAwaitingResponse ? undefined : toggleCallRecording}
-      >
-        {isAwaitingResponse ? (
-          <LoadingIndicator tooltip={t('Waiting for recording to start...')} />
-        ) : (
-          <Icon icon="recording-off" />
-        )}
-      </CompositeButton>
+      <WithTooltip title={title}>
+        <CompositeButton
+          active={isCallRecordingInProgress}
+          caption={caption}
+          variant="secondary"
+          data-testid="recording-start-button"
+          onClick={isAwaitingResponse ? undefined : toggleCallRecording}
+        >
+          {isAwaitingResponse ? (
+            <LoadingIndicator />
+          ) : (
+            <Icon icon="recording-off" />
+          )}
+        </CompositeButton>
+      </WithTooltip>
     </Restricted>
   );
 };
@@ -119,7 +125,7 @@ export const RecordCallButton = ({ caption }: RecordCallButtonProps) => {
   const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =
     useToggleCallRecording();
 
-  let title = caption || t('Record call');
+  let title = caption ?? t('Record call');
 
   if (isAwaitingResponse) {
     title = isCallRecordingInProgress

package/src/components/CallControls/ScreenShareButton.tsx

@@ -8,10 +8,15 @@ import { CompositeButton } from '../Button/';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
 import { Icon } from '../Icon';
+import { WithTooltip } from '../Tooltip';
+import {
+  PropsWithErrorHandler,
+  createCallControlHandler,
+} from '../../utilities/callControlHandler';
 
-export type ScreenShareButtonProps = {
+export type ScreenShareButtonProps = PropsWithErrorHandler<{
   caption?: string;
-};
+}>;
 
 export const ScreenShareButton = (props: ScreenShareButtonProps) => {
   const { t } = useI18n();
@@ -31,6 +36,14 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
   const disableScreenShareButton =
     !amIScreenSharing &&
     (isSomeoneScreenSharing || isScreenSharingAllowed === false);
+  const handleClick = createCallControlHandler(props, async () => {
+    if (!hasPermission) {
+      await requestPermission();
+    } else {
+      await screenShare.toggle();
+    }
+  });
+
   return (
     <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>
       <PermissionNotification
@@ -40,31 +53,26 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
         messageAwaitingApproval={t('Awaiting for an approval to share screen.')}
         messageRevoked={t('You can no longer share your screen.')}
       >
-        <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) {
-              await requestPermission();
-            } else {
-              await screenShare.toggle();
-            }
-          }}
-        >
-          <Icon
-            icon={
-              isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off'
+        <WithTooltip title={caption ?? t('Share screen')}>
+          <CompositeButton
+            active={isSomeoneScreenSharing || amIScreenSharing}
+            caption={caption}
+            variant="primary"
+            data-testid={
+              isSomeoneScreenSharing
+                ? 'screen-share-stop-button'
+                : 'screen-share-start-button'
             }
-          />
-        </CompositeButton>
+            disabled={disableScreenShareButton}
+            onClick={handleClick}
+          >
+            <Icon
+              icon={
+                isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off'
+              }
+            />
+          </CompositeButton>
+        </WithTooltip>
       </PermissionNotification>
     </Restricted>
   );

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -10,10 +10,18 @@ import { DeviceSelectorAudioInput } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
 import { Icon } from '../Icon';
+import { WithTooltip } from '../Tooltip';
+import { useState } from 'react';
+import {
+  PropsWithErrorHandler,
+  createCallControlHandler,
+} from '../../utilities/callControlHandler';
 
-export type ToggleAudioPreviewButtonProps = Pick<
-  IconButtonWithMenuProps,
-  'caption' | 'Menu' | 'menuPlacement'
+export type ToggleAudioPreviewButtonProps = PropsWithErrorHandler<
+  Pick<
+    IconButtonWithMenuProps,
+    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
+  >
 >;
 
 export const ToggleAudioPreviewButton = (
@@ -24,44 +32,57 @@ export const ToggleAudioPreviewButton = (
   const { useMicrophoneState } = useCallStateHooks();
   const { microphone, optimisticIsMute, hasBrowserPermission } =
     useMicrophoneState();
+  const [tooltipDisabled, setTooltipDisabled] = useState(false);
+  const handleClick = createCallControlHandler(props, () =>
+    microphone.toggle(),
+  );
 
   return (
-    <CompositeButton
-      active={optimisticIsMute}
-      caption={caption}
-      className={clsx(!hasBrowserPermission && 'str-video__device-unavailable')}
-      variant="secondary"
+    <WithTooltip
       title={
         !hasBrowserPermission
           ? t('Check your browser audio permissions')
-          : caption || t('Mic')
+          : caption ?? t('Mic')
       }
-      disabled={!hasBrowserPermission}
-      data-testid={
-        optimisticIsMute
-          ? 'preview-audio-unmute-button'
-          : 'preview-audio-mute-button'
-      }
-      onClick={() => microphone.toggle()}
-      Menu={Menu}
-      menuPlacement={menuPlacement}
-      {...restCompositeButtonProps}
+      tooltipDisabled={tooltipDisabled}
     >
-      <Icon icon={!optimisticIsMute ? 'mic' : 'mic-off'} />
-      {!hasBrowserPermission && (
-        <span
-          className="str-video__no-media-permission"
-          title={t('Check your browser audio permissions')}
-          children="!"
-        />
-      )}
-    </CompositeButton>
+      <CompositeButton
+        active={optimisticIsMute}
+        caption={caption}
+        className={clsx(
+          !hasBrowserPermission && 'str-video__device-unavailable',
+        )}
+        variant="secondary"
+        disabled={!hasBrowserPermission}
+        data-testid={
+          optimisticIsMute
+            ? 'preview-audio-unmute-button'
+            : 'preview-audio-mute-button'
+        }
+        onClick={handleClick}
+        Menu={Menu}
+        menuPlacement={menuPlacement}
+        onMenuToggle={(shown) => setTooltipDisabled(shown)}
+        {...restCompositeButtonProps}
+      >
+        <Icon icon={!optimisticIsMute ? 'mic' : 'mic-off'} />
+        {!hasBrowserPermission && (
+          <span
+            className="str-video__no-media-permission"
+            title={t('Check your browser audio permissions')}
+            children="!"
+          />
+        )}
+      </CompositeButton>
+    </WithTooltip>
   );
 };
 
-export type ToggleAudioPublishingButtonProps = Pick<
-  IconButtonWithMenuProps,
-  'caption' | 'Menu' | 'menuPlacement'
+export type ToggleAudioPublishingButtonProps = PropsWithErrorHandler<
+  Pick<
+    IconButtonWithMenuProps,
+    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
+  >
 >;
 
 export const ToggleAudioPublishingButton = (
@@ -81,6 +102,14 @@ export const ToggleAudioPublishingButton = (
   const { useMicrophoneState } = useCallStateHooks();
   const { microphone, optimisticIsMute, hasBrowserPermission } =
     useMicrophoneState();
+  const [tooltipDisabled, setTooltipDisabled] = useState(false);
+  const handleClick = createCallControlHandler(props, async () => {
+    if (!hasPermission) {
+      await requestPermission();
+    } else {
+      await microphone.toggle();
+    }
+  });
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
@@ -91,38 +120,37 @@ export const ToggleAudioPublishingButton = (
         messageAwaitingApproval={t('Awaiting for an approval to speak.')}
         messageRevoked={t('You can no longer speak.')}
       >
-        <CompositeButton
-          active={optimisticIsMute}
-          caption={caption}
+        <WithTooltip
           title={
             !hasPermission
               ? t('You have no permission to share your audio')
               : !hasBrowserPermission
               ? t('Check your browser mic permissions')
-              : caption || t('Mic')
+              : 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}
+          tooltipDisabled={tooltipDisabled}
         >
-          <Icon icon={optimisticIsMute ? 'mic-off' : 'mic'} />
-          {(!hasBrowserPermission || !hasPermission) && (
-            <span className="str-video__no-media-permission">!</span>
-          )}
-        </CompositeButton>
+          <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}
+            onMenuToggle={(shown) => setTooltipDisabled(shown)}
+            {...restCompositeButtonProps}
+          >
+            <Icon icon={optimisticIsMute ? 'mic-off' : 'mic'} />
+            {(!hasBrowserPermission || !hasPermission) && (
+              <span className="str-video__no-media-permission">!</span>
+            )}
+          </CompositeButton>
+        </WithTooltip>
       </PermissionNotification>
     </Restricted>
   );