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

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [1.0.9](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.0.8...@stream-io/video-react-sdk-1.0.9) (2024-05-21)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.0.7`
+* `@stream-io/video-react-bindings` updated to version `0.4.33`
+### [1.0.8](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.0.7...@stream-io/video-react-sdk-1.0.8) (2024-05-17)
+
+### Dependency Updates
+
+* `@stream-io/video-styling` updated to version `1.0.3`
+
+### Bug Fixes
+
+* popup-related UI updates ([#1356](https://github.com/GetStream/stream-video-js/issues/1356)) ([a1a3238](https://github.com/GetStream/stream-video-js/commit/a1a3238370b1ed5b7877f744bebea9f51a843256))
+
 ### [1.0.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.0.6...@stream-io/video-react-sdk-1.0.7) (2024-05-16)
 
 ### Dependency Updates

package/dist/css/styles.css

@@ -2388,7 +2388,7 @@
   display: flex;
   justify-content: center;
   padding: 0.5rem 1rem;
-  z-index: 1;
+  z-index: 4;
   max-width: 250px;
   width: max-content;
   white-space: initial;
@@ -2397,7 +2397,7 @@
 
 .str-video {
   /* The border radius used for the borders of the component */
-  --str-video__tooltip--border-radius: var(--str-video__border-radius-xxxs);
+  --str-video__tooltip--border-radius: var(--str-video__border-radius-xs);
   /* The text/icon color of the component */
   --str-video__tooltip--color: var(--str-video__text-color3);
   /* The background color of the component */
@@ -2411,7 +2411,7 @@
   /* Right (left in RTL layout) border of the component */
   --str-video__tooltip--border-inline-end: none;
   /* Box shadow applied to the component */
-  --str-video__tooltip--box-shadow: 0 0 20px var(--str-video__background-color2);
+  --str-video__tooltip--box-shadow: none;
 }
 
 .str-video__tooltip {

package/dist/index.cjs.js

@@ -516,8 +516,10 @@ const MenuPortal = ({ children, refs, }) => {
     const portalId = react.useMemo(() => `str-video-portal-${Math.random().toString(36).substring(2, 9)}`, []);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: portalId, className: "str-video__portal" }), jsxRuntime.jsx(react$1.FloatingOverlay, { children: jsxRuntime.jsx(react$1.FloatingPortal, { id: portalId, children: jsxRuntime.jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
 };
-const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', offset, visualType = exports.MenuVisualType.MENU, children, }) => {
+const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', offset, visualType = exports.MenuVisualType.MENU, children, onToggle, }) => {
     const [menuShown, setMenuShown] = react.useState(false);
+    const toggleHandler = react.useRef(onToggle);
+    toggleHandler.current = onToggle;
     const { floating, domReference, refs, x, y } = useFloatingUIPreset({
         placement,
         strategy,
@@ -527,9 +529,11 @@ const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolut
         const handleClick = (event) => {
             if (!floating && domReference?.contains(event.target)) {
                 setMenuShown(true);
+                toggleHandler.current?.(true);
             }
             else if (floating && !floating?.contains(event.target)) {
                 setMenuShown(false);
+                toggleHandler.current?.(false);
             }
         };
         const handleKeyDown = (event) => {
@@ -537,6 +541,7 @@ const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolut
                 !event.altKey &&
                 !event.ctrlKey) {
                 setMenuShown(false);
+                toggleHandler.current?.(false);
             }
         };
         document?.addEventListener('click', handleClick, { capture: true });
@@ -551,7 +556,7 @@ const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolut
                         top: y ?? 0,
                         left: x ?? 0,
                         overflowY: 'auto',
-                    }, children: children })) : null })), jsxRuntime.jsx(ToggleButton, { menuShown: menuShown, ref: refs.setReference })] }));
+                    }, role: "menu", children: children })) : null })), jsxRuntime.jsx(ToggleButton, { menuShown: menuShown, ref: refs.setReference })] }));
 };
 
 const GenericMenu = ({ children, onItemClick, }) => {
@@ -600,7 +605,7 @@ const applyElementToRef = (ref, element) => {
     ref.current = element;
 };
 
-const CompositeButton = react.forwardRef(function CompositeButton({ caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, ...restButtonProps }, ref) {
+const CompositeButton = react.forwardRef(function CompositeButton({ caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
     return (jsxRuntime.jsxs("div", { className: clsx('str-video__composite-button', className, {
             'str-video__composite-button--caption': caption,
             'str-video__composite-button--menu': Menu,
@@ -611,7 +616,7 @@ const CompositeButton = react.forwardRef(function CompositeButton({ caption, chi
                 }), children: [jsxRuntime.jsx("button", { type: "button", className: "str-video__composite-button__button", onClick: (e) => {
                             e.preventDefault();
                             onClick?.(e);
-                        }, ...restButtonProps, children: children }), Menu && (jsxRuntime.jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu }))] }), caption && (jsxRuntime.jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
+                        }, ...restButtonProps, children: children }), Menu && (jsxRuntime.jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu }))] }), caption && (jsxRuntime.jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
 });
 const DefaultToggleMenuButton = react.forwardRef(function DefaultToggleMenuButton({ menuShown }, ref) {
     return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__menu-toggle-button', {
@@ -710,6 +715,45 @@ const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
     return (jsxRuntime.jsxs("div", { className: clsx('str-video__loading-indicator', className), title: tooltip, children: [jsxRuntime.jsx("div", { className: clsx('str-video__loading-indicator__icon', type) }), text && jsxRuntime.jsx("p", { className: "str-video__loading-indicator-text", children: text })] }));
 };
 
+const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
+    const { refs, x, y, strategy } = useFloatingUIPreset({
+        placement: tooltipPlacement,
+        strategy: 'absolute',
+    });
+    react.useEffect(() => {
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    if (!visible)
+        return null;
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+        }, children: children }));
+};
+
+const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
+    const [tooltipVisible, setTooltipVisible] = react.useState(false);
+    const handleMouseEnter = react.useCallback((e) => {
+        setTooltipVisible(true);
+        onMouseEnter?.(e);
+    }, [onMouseEnter]);
+    const handleMouseLeave = react.useCallback((e) => {
+        setTooltipVisible(false);
+        onMouseLeave?.(e);
+    }, [onMouseLeave]);
+    return { handleMouseEnter, handleMouseLeave, tooltipVisible };
+};
+
+// todo: duplicate of CallParticipantList.tsx#MediaIndicator - refactor to a single component
+const WithTooltip = ({ title, tooltipClassName, tooltipPlacement, tooltipDisabled, ...props }) => {
+    const { handleMouseEnter, handleMouseLeave, tooltipVisible } = useEnterLeaveHandlers();
+    const [tooltipAnchor, setTooltipAnchor] = react.useState(null);
+    const tooltipActuallyVisible = !tooltipDisabled && Boolean(title) && tooltipVisible;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { referenceElement: tooltipAnchor, visible: tooltipActuallyVisible, tooltipClassName: tooltipClassName, tooltipPlacement: tooltipPlacement, children: title || '' }), jsxRuntime.jsx("div", { ref: setTooltipAnchor, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props })] }));
+};
+
 const RecordEndConfirmation = () => {
     const { t } = videoReactBindings.useI18n();
     const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();
@@ -728,15 +772,18 @@ const RecordCallConfirmationButton = ({ caption, }) => {
                 videoClient.OwnCapability.STOP_RECORD_CALL,
             ], children: jsxRuntime.jsx(MenuToggle, { ToggleButton: ToggleEndRecordingMenuButton, visualType: exports.MenuVisualType.PORTAL, children: jsxRuntime.jsx(RecordEndConfirmation, {}) }) }));
     }
+    const title = isAwaitingResponse
+        ? t('Waiting for recording to start...')
+        : caption ?? t('Record call');
     return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
             videoClient.OwnCapability.START_RECORD_CALL,
             videoClient.OwnCapability.STOP_RECORD_CALL,
-        ], children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, title: caption || t('Record call'), variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : toggleCallRecording, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, { tooltip: t('Waiting for recording to start...') })) : (jsxRuntime.jsx(Icon, { icon: "recording-off" })) }) }));
+        ], children: jsxRuntime.jsx(WithTooltip, { title: title, children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : toggleCallRecording, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, {})) : (jsxRuntime.jsx(Icon, { icon: "recording-off" })) }) }) }));
 };
 const RecordCallButton = ({ caption }) => {
     const { t } = videoReactBindings.useI18n();
     const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
-    let title = caption || t('Record call');
+    let title = caption ?? t('Record call');
     if (isAwaitingResponse) {
         title = isCallRecordingInProgress
             ? t('Waiting for recording to stop...')
@@ -808,18 +855,48 @@ const ReactionsButton = ({ reactions = defaultReactions, }) => {
 };
 const ToggleReactionsMenuButton = react.forwardRef(function ToggleReactionsMenuButton({ menuShown }, ref) {
     const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", title: t('Reactions'), children: jsxRuntime.jsx(Icon, { icon: "reactions" }) }));
+    return (jsxRuntime.jsx(WithTooltip, { title: t('Reactions'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", children: jsxRuntime.jsx(Icon, { icon: "reactions" }) }) }));
 });
 const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
     const call = videoReactBindings.useCall();
+    const { close } = useMenuContext();
     return (jsxRuntime.jsx("div", { className: clsx('str-video__reactions-menu', {
             'str-video__reactions-menu--horizontal': layout === 'horizontal',
             'str-video__reactions-menu--vertical': layout === 'vertical',
         }), children: reactions.map((reaction) => (jsxRuntime.jsx("button", { type: "button", className: "str-video__reactions-menu__button", onClick: () => {
                 call?.sendReaction(reaction);
+                close?.();
             }, children: reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code] }, reaction.emoji_code))) }));
 };
 
+/**
+ * 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
+ */
+const createCallControlHandler = (props, handler) => {
+    const logger = videoClient.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) {
+    return error instanceof DOMException && error.name === 'NotAllowedError';
+}
+
 const ScreenShareButton = (props) => {
     const { t } = videoReactBindings.useI18n();
     const { caption } = props;
@@ -832,16 +909,17 @@ const ScreenShareButton = (props) => {
     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) {
-                        await requestPermission();
-                    }
-                    else {
-                        await screenShare.toggle();
-                    }
-                }, children: jsxRuntime.jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }));
+    const handleClick = createCallControlHandler(props, async () => {
+        if (!hasPermission) {
+            await requestPermission();
+        }
+        else {
+            await screenShare.toggle();
+        }
+    });
+    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(WithTooltip, { title: caption ?? t('Share screen'), children: jsxRuntime.jsx(CompositeButton, { active: isSomeoneScreenSharing || amIScreenSharing, caption: caption, variant: "primary", "data-testid": isSomeoneScreenSharing
+                        ? 'screen-share-stop-button'
+                        : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: handleClick, children: jsxRuntime.jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }) }));
 };
 
 const SelectContext = react.createContext({});
@@ -923,6 +1001,7 @@ const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, d
 };
 const DeviceSelectorList = (props) => {
     const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, type, 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.
@@ -934,6 +1013,7 @@ const DeviceSelectorList = (props) => {
     return (jsxRuntime.jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsxRuntime.jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), !devices.length ? (jsxRuntime.jsx(DeviceSelectorOption, { id: `${type}--default`, label: "Default", name: type, defaultChecked: true, value: "default" })) : (devices.map((device) => {
                 return (jsxRuntime.jsx(DeviceSelectorOption, { id: `${type}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
                         onChange?.(e.target.value);
+                        close?.();
                     }, name: type, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
             }))] }));
 };
@@ -1007,11 +1087,13 @@ const ToggleAudioPreviewButton = (props) => {
     const { t } = videoReactBindings.useI18n();
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
     const { microphone, optimisticIsMute, hasBrowserPermission } = useMicrophoneState();
-    return (jsxRuntime.jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", title: !hasBrowserPermission
+    const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
+    const handleClick = createCallControlHandler(props, () => microphone.toggle());
+    return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
             ? t('Check your browser audio permissions')
-            : 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: "!" }))] }));
+            : caption ?? t('Mic'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(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, 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();
@@ -1019,18 +1101,20 @@ const ToggleAudioPublishingButton = (props) => {
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_AUDIO);
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
     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
+    const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
+    const handleClick = createCallControlHandler(props, async () => {
+        if (!hasPermission) {
+            await requestPermission();
+        }
+        else {
+            await microphone.toggle();
+        }
+    });
+    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.jsx(WithTooltip, { 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": 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: optimisticIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" }))] }) }) }));
+                        : caption ?? t('Mic'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(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, children: [jsxRuntime.jsx(Icon, { icon: optimisticIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" }))] }) }) }) }));
 };
 
 const ToggleVideoPreviewButton = (props) => {
@@ -1038,11 +1122,13 @@ const ToggleVideoPreviewButton = (props) => {
     const { t } = videoReactBindings.useI18n();
     const { useCameraState } = videoReactBindings.useCallStateHooks();
     const { camera, optimisticIsMute, hasBrowserPermission } = useCameraState();
-    return (jsxRuntime.jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), title: !hasBrowserPermission
+    const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
+    const handleClick = createCallControlHandler(props, () => camera.toggle());
+    return (jsxRuntime.jsx(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', 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: "!" }))] }));
+            : caption ?? t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(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, 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();
@@ -1052,22 +1138,26 @@ const ToggleVideoPublishingButton = (props) => {
     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: optimisticIsMute, caption: caption, variant: "secondary", title: !hasPermission
+    const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
+    const handleClick = createCallControlHandler(props, async () => {
+        if (!hasPermission) {
+            await requestPermission();
+        }
+        else {
+            await camera.toggle();
+        }
+    });
+    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.jsx(WithTooltip, { 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": 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: optimisticIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                            : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optimisticIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
                         !hasPermission ||
-                        !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" }))] }) }) }));
+                        !isPublishingVideoAllowed, "data-testid": optimisticIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, onMenuToggle: (shown) => setTooltipDisabled(shown), ...restCompositeButtonProps, children: [jsxRuntime.jsx(Icon, { icon: optimisticIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                            !hasPermission ||
+                            !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" }))] }) }) }) }));
 };
 
 const EndCallMenu = (props) => {
@@ -1077,7 +1167,7 @@ const EndCallMenu = (props) => {
 };
 const CancelCallToggleMenuButton = react.forwardRef(function CancelCallToggleMenuButton(props, ref) {
     const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(IconButton, { icon: "call-end", variant: "danger", title: t('Leave call'), "data-testid": "leave-call-button", ref: ref }));
+    return (jsxRuntime.jsx(WithTooltip, { title: t('Leave call'), children: jsxRuntime.jsx(IconButton, { icon: "call-end", variant: "danger", "data-testid": "leave-call-button", ref: ref }) }));
 });
 const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
     const call = videoReactBindings.useCall();
@@ -1101,7 +1191,7 @@ const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
     }, [onClick, onLeave, call]);
     return (jsxRuntime.jsx(MenuToggle, { placement: "top-start", ToggleButton: CancelCallToggleMenuButton, children: jsxRuntime.jsx(EndCallMenu, { onEnd: handleEndCall, onLeave: handleLeave }) }));
 };
-const CancelCallButton = ({ disabled, onClick, onLeave, }) => {
+const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
     const call = videoReactBindings.useCall();
     const { t } = videoReactBindings.useI18n();
     const handleClick = react.useCallback(async (e) => {
@@ -1113,10 +1203,10 @@ const CancelCallButton = ({ disabled, onClick, onLeave, }) => {
             onLeave?.();
         }
     }, [onClick, onLeave, call]);
-    return (jsxRuntime.jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", title: t('Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
+    return (jsxRuntime.jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", title: caption ?? t('Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
 };
 
-const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-video__call-controls", children: [jsxRuntime.jsx(RecordCallButton, {}), jsxRuntime.jsx(ReactionsButton, {}), jsxRuntime.jsx(ScreenShareButton, {}), jsxRuntime.jsx(SpeakingWhileMutedNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, {}) }), jsxRuntime.jsx(ToggleVideoPublishingButton, {}), jsxRuntime.jsx(CancelCallButton, { onLeave: onLeave })] }));
+const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-video__call-controls", children: [jsxRuntime.jsx(SpeakingWhileMutedNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, {}) }), jsxRuntime.jsx(ToggleVideoPublishingButton, {}), jsxRuntime.jsx(ReactionsButton, {}), jsxRuntime.jsx(ScreenShareButton, {}), jsxRuntime.jsx(RecordCallButton, {}), jsxRuntime.jsx(CancelCallButton, { onLeave: onLeave })] }));
 
 chart_js.Chart.register(chart_js.CategoryScale, chart_js.LinearScale, chart_js.LineElement, chart_js.PointElement);
 const CallStatsLatencyChart = (props) => {
@@ -1333,44 +1423,6 @@ const CallParticipantListHeader = ({ onClose, }) => {
     return (jsxRuntime.jsxs("div", { className: "str-video__participant-list-header", children: [jsxRuntime.jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxRuntime.jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsxRuntime.jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsxRuntime.jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
 };
 
-const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
-    const { refs, x, y, strategy } = useFloatingUIPreset({
-        placement: tooltipPlacement,
-        strategy: 'absolute',
-    });
-    react.useEffect(() => {
-        refs.setReference(referenceElement);
-    }, [referenceElement, refs]);
-    if (!visible)
-        return null;
-    return (jsxRuntime.jsx("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-            overflowY: 'auto',
-        }, children: children }));
-};
-
-const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
-    const [tooltipVisible, setTooltipVisible] = react.useState(false);
-    const handleMouseEnter = react.useCallback((e) => {
-        setTooltipVisible(true);
-        onMouseEnter?.(e);
-    }, [onMouseEnter]);
-    const handleMouseLeave = react.useCallback((e) => {
-        setTooltipVisible(false);
-        onMouseLeave?.(e);
-    }, [onMouseLeave]);
-    return { handleMouseEnter, handleMouseLeave, tooltipVisible };
-};
-
-// todo: duplicate of CallParticipantList.tsx#MediaIndicator - refactor to a single component
-const WithTooltip = ({ title, tooltipClassName, tooltipPlacement, ...props }) => {
-    const { handleMouseEnter, handleMouseLeave, tooltipVisible } = useEnterLeaveHandlers();
-    const [tooltipAnchor, setTooltipAnchor] = react.useState(null);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { referenceElement: tooltipAnchor, visible: tooltipVisible, tooltipClassName: tooltipClassName, tooltipPlacement: tooltipPlacement, children: title || '' }), jsxRuntime.jsx("div", { ref: setTooltipAnchor, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props })] }));
-};
-
 const CallParticipantListingItem = ({ participant, DisplayName = DefaultDisplayName, }) => {
     const isAudioOn = videoClient.hasAudio(participant);
     const isVideoOn = videoClient.hasVideo(participant);
@@ -2515,7 +2567,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (jsxRuntime.jsx(IconButton, { onClick: scrollTopClickHandler, icon: "caret-up", className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (jsxRuntime.jsx(IconButton, { onClick: scrollBottomClickHandler, icon: "caret-down", className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
 };
 
-const [major, minor, patch] = ("1.0.7" ).split('.');
+const [major, minor, patch] = ("1.0.9" ).split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,