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

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -10,10 +10,18 @@ import { DeviceSelectorVideo } 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 ToggleVideoPreviewButtonProps = Pick<
-  IconButtonWithMenuProps,
-  'caption' | 'Menu' | 'menuPlacement'
+export type ToggleVideoPreviewButtonProps = PropsWithErrorHandler<
+  Pick<
+    IconButtonWithMenuProps,
+    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
+  >
 >;
 
 export const ToggleVideoPreviewButton = (
@@ -28,44 +36,55 @@ export const ToggleVideoPreviewButton = (
   const { t } = useI18n();
   const { useCameraState } = useCallStateHooks();
   const { camera, optimisticIsMute, hasBrowserPermission } = useCameraState();
+  const [tooltipDisabled, setTooltipDisabled] = useState(false);
+  const handleClick = createCallControlHandler(props, () => camera.toggle());
 
   return (
-    <CompositeButton
-      active={optimisticIsMute}
-      caption={caption}
-      className={clsx(!hasBrowserPermission && 'str-video__device-unavailable')}
+    <WithTooltip
       title={
         !hasBrowserPermission
           ? t('Check your browser video permissions')
-          : caption || t('Video')
-      }
-      variant="secondary"
-      data-testid={
-        optimisticIsMute
-          ? 'preview-video-unmute-button'
-          : 'preview-video-mute-button'
+          : caption ?? t('Video')
       }
-      onClick={() => camera.toggle()}
-      disabled={!hasBrowserPermission}
-      Menu={Menu}
-      menuPlacement={menuPlacement}
-      {...restCompositeButtonProps}
+      tooltipDisabled={tooltipDisabled}
     >
-      <Icon icon={!optimisticIsMute ? 'camera' : 'camera-off'} />
-      {!hasBrowserPermission && (
-        <span
-          className="str-video__no-media-permission"
-          title={t('Check your browser video permissions')}
-          children="!"
-        />
-      )}
-    </CompositeButton>
+      <CompositeButton
+        active={optimisticIsMute}
+        caption={caption}
+        className={clsx(
+          !hasBrowserPermission && 'str-video__device-unavailable',
+        )}
+        variant="secondary"
+        data-testid={
+          optimisticIsMute
+            ? 'preview-video-unmute-button'
+            : 'preview-video-mute-button'
+        }
+        onClick={handleClick}
+        disabled={!hasBrowserPermission}
+        Menu={Menu}
+        menuPlacement={menuPlacement}
+        onMenuToggle={(shown) => setTooltipDisabled(shown)}
+        {...restCompositeButtonProps}
+      >
+        <Icon icon={!optimisticIsMute ? 'camera' : 'camera-off'} />
+        {!hasBrowserPermission && (
+          <span
+            className="str-video__no-media-permission"
+            title={t('Check your browser video permissions')}
+            children="!"
+          />
+        )}
+      </CompositeButton>
+    </WithTooltip>
   );
 };
 
-type ToggleVideoPublishingButtonProps = Pick<
-  IconButtonWithMenuProps,
-  'caption' | 'Menu' | 'menuPlacement'
+type ToggleVideoPublishingButtonProps = PropsWithErrorHandler<
+  Pick<
+    IconButtonWithMenuProps,
+    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
+  >
 >;
 
 export const ToggleVideoPublishingButton = (
@@ -86,6 +105,14 @@ export const ToggleVideoPublishingButton = (
   const { camera, optimisticIsMute, hasBrowserPermission } = useCameraState();
   const callSettings = useCallSettings();
   const isPublishingVideoAllowed = callSettings?.video.enabled;
+  const [tooltipDisabled, setTooltipDisabled] = useState(false);
+  const handleClick = createCallControlHandler(props, async () => {
+    if (!hasPermission) {
+      await requestPermission();
+    } else {
+      await camera.toggle();
+    }
+  });
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
@@ -98,10 +125,7 @@ export const ToggleVideoPublishingButton = (
         )}
         messageRevoked={t('You can no longer share your video.')}
       >
-        <CompositeButton
-          active={optimisticIsMute}
-          caption={caption}
-          variant="secondary"
+        <WithTooltip
           title={
             !hasPermission
               ? t('You have no permission to share your video')
@@ -111,31 +135,35 @@ export const ToggleVideoPublishingButton = (
               ? t('Video publishing is disabled by the system')
               : 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}
+          tooltipDisabled={tooltipDisabled}
         >
-          <Icon icon={optimisticIsMute ? 'camera-off' : 'camera'} />
-          {(!hasBrowserPermission ||
-            !hasPermission ||
-            !isPublishingVideoAllowed) && (
-            <span className="str-video__no-media-permission">!</span>
-          )}
-        </CompositeButton>
+          <CompositeButton
+            active={optimisticIsMute}
+            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}
+            onMenuToggle={(shown) => setTooltipDisabled(shown)}
+            {...restCompositeButtonProps}
+          >
+            <Icon icon={optimisticIsMute ? 'camera-off' : 'camera'} />
+            {(!hasBrowserPermission ||
+              !hasPermission ||
+              !isPublishingVideoAllowed) && (
+              <span className="str-video__no-media-permission">!</span>
+            )}
+          </CompositeButton>
+        </WithTooltip>
       </PermissionNotification>
     </Restricted>
   );

package/src/components/DeviceSettings/DeviceSelector.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { ChangeEventHandler, useCallback } from 'react';
 
 import { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';
+import { useMenuContext } from '../Menu';
 
 type DeviceSelectorOptionProps = {
   id: string;
@@ -64,6 +65,8 @@ const DeviceSelectorList = (props: {
     onChange,
   } = props;
 
+  const { close } = useMenuContext();
+
   // sometimes the browser (Chrome) will report the system-default device
   // with an id of 'default'. In case when it doesn't, we'll select the first
   // available device.
@@ -100,6 +103,7 @@ const DeviceSelectorList = (props: {
               key={device.deviceId}
               onChange={(e) => {
                 onChange?.(e.target.value);
+                close?.();
               }}
               name={type}
               selected={

package/src/components/Menu/MenuToggle.tsx

@@ -6,6 +6,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -34,6 +35,7 @@ export type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{
   strategy?: Strategy;
   offset?: number;
   visualType?: MenuVisualType;
+  onToggle?: (menuShown: boolean) => void;
 }>;
 
 export type MenuContextValue = {
@@ -84,8 +86,11 @@ export const MenuToggle = <E extends HTMLElement>({
   offset,
   visualType = MenuVisualType.MENU,
   children,
+  onToggle,
 }: MenuToggleProps<E>) => {
   const [menuShown, setMenuShown] = useState(false);
+  const toggleHandler = useRef(onToggle);
+  toggleHandler.current = onToggle;
 
   const { floating, domReference, refs, x, y } = useFloatingUIPreset({
     placement,
@@ -97,8 +102,10 @@ export const MenuToggle = <E extends HTMLElement>({
     const handleClick = (event: MouseEvent) => {
       if (!floating && domReference?.contains(event.target as Node)) {
         setMenuShown(true);
+        toggleHandler.current?.(true);
       } else if (floating && !floating?.contains(event.target as Node)) {
         setMenuShown(false);
+        toggleHandler.current?.(false);
       }
     };
 
@@ -109,6 +116,7 @@ export const MenuToggle = <E extends HTMLElement>({
         !event.ctrlKey
       ) {
         setMenuShown(false);
+        toggleHandler.current?.(false);
       }
     };
     document?.addEventListener('click', handleClick, { capture: true });
@@ -135,6 +143,7 @@ export const MenuToggle = <E extends HTMLElement>({
                 left: x ?? 0,
                 overflowY: 'auto',
               }}
+              role="menu"
               children={children}
             />
           ) : null}

package/src/components/Tooltip/WithTooltip.tsx

@@ -3,13 +3,16 @@ import { Tooltip, TooltipProps } from './Tooltip';
 import { useEnterLeaveHandlers } from './hooks';
 
 type WithPopupProps = ComponentProps<'div'> &
-  Omit<TooltipProps<HTMLDivElement>, 'referenceElement'>;
+  Omit<TooltipProps<HTMLDivElement>, 'referenceElement' | 'children'> & {
+    tooltipDisabled?: boolean;
+  };
 
 // todo: duplicate of CallParticipantList.tsx#MediaIndicator - refactor to a single component
 export const WithTooltip = ({
   title,
   tooltipClassName,
   tooltipPlacement,
+  tooltipDisabled,
   ...props
 }: WithPopupProps) => {
   const { handleMouseEnter, handleMouseLeave, tooltipVisible } =
@@ -17,12 +20,14 @@ export const WithTooltip = ({
   const [tooltipAnchor, setTooltipAnchor] = useState<HTMLDivElement | null>(
     null,
   );
+  const tooltipActuallyVisible =
+    !tooltipDisabled && Boolean(title) && tooltipVisible;
 
   return (
     <>
       <Tooltip
         referenceElement={tooltipAnchor}
-        visible={tooltipVisible}
+        visible={tooltipActuallyVisible}
         tooltipClassName={tooltipClassName}
         tooltipPlacement={tooltipPlacement}
       >

package/src/utilities/callControlHandler.ts

@@ -0,0 +1,43 @@
+import { getLogger } from '@stream-io/video-client';
+
+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 const createCallControlHandler = (
+  props: PropsWithErrorHandler,
+  handler: () => Promise<void>,
+): (() => Promise<void>) => {
+  const logger = getLogger(['react-sdk']);
+
+  return async () => {
+    try {
+      await handler();
+    } catch (error) {
+      if (props.onError) {
+        props.onError(error);
+        return;
+      }
+
+      if (!isNotAllowedError(error)) {
+        logger('error', 'Call control handler failed', error);
+      }
+    }
+  };
+};
+
+function isNotAllowedError(error: unknown): error is DOMException {
+  return error instanceof DOMException && error.name === 'NotAllowedError';
+}