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

package/dist/index.cjs.js

@@ -30,11 +30,11 @@ const ParticipantsAudio = (props) => {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: participants.map((participant) => {
             if (participant.isLocalParticipant)
                 return null;
-            const { publishedTracks, audioStream, screenShareAudioStream, sessionId, } = participant;
-            const hasAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
-            const audioTrackElement = hasAudio && audioStream && (jsxRuntime.jsx(Audio, { ...audioProps, trackType: "audioTrack", participant: participant }));
-            const hasScreenShareAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE_AUDIO);
-            const screenShareAudioTrackElement = hasScreenShareAudio &&
+            const { audioStream, screenShareAudioStream, sessionId } = participant;
+            const hasAudioTrack = videoClient.hasAudio(participant);
+            const audioTrackElement = hasAudioTrack && audioStream && (jsxRuntime.jsx(Audio, { ...audioProps, trackType: "audioTrack", participant: participant }));
+            const hasScreenShareAudioTrack = videoClient.hasScreenShareAudio(participant);
+            const screenShareAudioTrackElement = hasScreenShareAudioTrack &&
                 screenShareAudioStream && (jsxRuntime.jsx(Audio, { ...audioProps, trackType: "screenShareAudioTrack", participant: participant }));
             return (jsxRuntime.jsxs(react.Fragment, { children: [audioTrackElement, screenShareAudioTrackElement] }, sessionId));
         }) }));
@@ -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,50 +1423,12 @@ 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 = participant.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
-    const isVideoOn = participant.publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
-    const isPinned = !!participant.pin;
+    const isAudioOn = videoClient.hasAudio(participant);
+    const isVideoOn = videoClient.hasVideo(participant);
+    const isPinnedOn = videoClient.isPinned(participant);
     const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsxRuntime.jsx(DisplayName, { participant: participant }), jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsxRuntime.jsx(MediaIndicator, { title: isAudioOn ? t('Microphone on') : t('Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsxRuntime.jsx(MediaIndicator, { title: isVideoOn ? t('Camera on') : t('Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinned && (jsxRuntime.jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsxRuntime.jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsxRuntime.jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsxRuntime.jsx(DisplayName, { participant: participant }), jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsxRuntime.jsx(MediaIndicator, { title: isAudioOn ? t('Microphone on') : t('Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsxRuntime.jsx(MediaIndicator, { title: isVideoOn ? t('Camera on') : t('Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinnedOn && (jsxRuntime.jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsxRuntime.jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsxRuntime.jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
 };
 const MediaIndicator = (props) => (jsxRuntime.jsx(WithTooltip, { ...props }));
 const DefaultDisplayName = ({ participant }) => {
@@ -1787,7 +1839,7 @@ const InitialsFallback = (props) => {
 };
 
 const Video$1 = ({ trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, refs, ...rest }) => {
-    const { sessionId, videoStream, screenShareStream, publishedTracks, viewportVisibilityState, isLocalParticipant, userId, } = participant;
+    const { sessionId, videoStream, screenShareStream, viewportVisibilityState, isLocalParticipant, userId, } = participant;
     const call = videoReactBindings.useCall();
     const [videoElement, setVideoElement] = react.useState(null);
     // start with true, will flip once the video starts playing
@@ -1835,9 +1887,9 @@ const Video$1 = ({ trackType, participant, className, VideoPlaceholder = Default
     if (!call)
         return null;
     const isPublishingTrack = trackType === 'videoTrack'
-        ? publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO)
+        ? videoClient.hasVideo(participant)
         : trackType === 'screenShareTrack'
-            ? publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE)
+            ? videoClient.hasScreenShare(participant)
             : false;
     const isInvisible = trackType === 'none' ||
         viewportVisibilityState?.[trackType] === videoClient.VisibilityState.INVISIBLE;
@@ -1921,11 +1973,11 @@ const ParticipantActionsContextMenu = () => {
     const [pictureInPictureElement, setPictureInPictureElement] = react.useState(document.pictureInPictureElement);
     const call = videoReactBindings.useCall();
     const { t } = videoReactBindings.useI18n();
-    const { pin, publishedTracks, sessionId, userId } = participant;
-    const hasAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
-    const hasVideo = publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
-    const hasScreenShare = publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
-    const hasScreenShareAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE_AUDIO);
+    const { pin, sessionId, userId } = participant;
+    const hasAudioTrack = videoClient.hasAudio(participant);
+    const hasVideoTrack = videoClient.hasVideo(participant);
+    const hasScreenShareTrack = videoClient.hasScreenShare(participant);
+    const hasScreenShareAudioTrack = videoClient.hasScreenShareAudio(participant);
     const blockUser = () => call?.blockUser(userId);
     const muteAudio = () => call?.muteUser(userId, 'audio');
     const muteVideo = () => call?.muteUser(userId, 'video');
@@ -2010,7 +2062,7 @@ const ParticipantActionsContextMenu = () => {
         return document.exitPictureInPicture().catch(console.error);
     };
     const { close } = useMenuContext() || {};
-    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideo && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShare && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudio && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudio && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
+    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
                     direction: fullscreenModeOn ? t('Leave') : t('Enter'),
                 }) })), videoElement && document.pictureInPictureEnabled && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
                     direction: pictureInPictureElement === videoElement
@@ -2045,10 +2097,9 @@ const DefaultScreenShareOverlay = () => {
 };
 const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, }) => {
     const { participant, trackType } = useParticipantViewContext();
-    const { publishedTracks } = participant;
-    const hasScreenShare = publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
+    const isScreenSharing = videoClient.hasScreenShare(participant);
     if (participant.isLocalParticipant &&
-        hasScreenShare &&
+        isScreenSharing &&
         trackType === 'screenShareTrack') {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DefaultScreenShareOverlay, {}), jsxRuntime.jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
     }
@@ -2056,15 +2107,15 @@ const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'b
 };
 const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const { participant } = useParticipantViewContext();
-    const { isLocalParticipant, connectionQuality, publishedTracks, pin, sessionId, name, userId, } = participant;
+    const { isLocalParticipant, connectionQuality, pin, sessionId, name, userId, } = participant;
     const call = videoReactBindings.useCall();
     const { t } = videoReactBindings.useI18n();
     const connectionQualityAsString = !!connectionQuality &&
         videoClient.SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
-    const hasAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
-    const hasVideo = publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
+    const hasAudioTrack = videoClient.hasAudio(participant);
+    const hasVideoTrack = videoClient.hasVideo(participant);
     const canUnpin = !!pin && pin.isLocalPin;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudio && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
                         // TODO: remove this monstrosity once we have a proper design
                         jsxRuntime.jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsxRuntime.jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsxRuntime.jsx(Notification, { isVisible: isLocalParticipant &&
                     connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
@@ -2076,10 +2127,10 @@ const SpeechIndicator = () => {
 };
 
 const ParticipantView = react.forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
-    const { isLocalParticipant, isSpeaking, isDominantSpeaker, publishedTracks, sessionId, } = participant;
-    const hasAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
-    const hasVideo = publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
-    const hasScreenShareAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE_AUDIO);
+    const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
+    const hasAudioTrack = videoClient.hasAudio(participant);
+    const hasVideoTrack = videoClient.hasVideo(participant);
+    const hasScreenShareAudioTrack = videoClient.hasScreenShareAudio(participant);
     const [trackedElement, setTrackedElement] = react.useState(null);
     const [contextVideoElement, setContextVideoElement] = react.useState(null);
     const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement] = react.useState(null);
@@ -2115,7 +2166,7 @@ const ParticipantView = react.forwardRef(function ParticipantView({ participant,
     return (jsxRuntime.jsx("div", { "data-testid": "participant-view", ref: (element) => {
             applyElementToRef(ref, element);
             setTrackedElement(element);
-        }, className: clsx('str-video__participant-view', isDominantSpeaker && 'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideo && 'str-video__participant-view--no-video', !hasAudio && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudio && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudio && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, participant: participant, trackType: trackType, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
+        }, className: clsx('str-video__participant-view', isDominantSpeaker && 'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, participant: participant, trackType: trackType, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
 });
 
 // re-exporting the StreamCallProvider as StreamCall
@@ -2284,12 +2335,13 @@ const loggedIn = (a, b) => {
 const LivestreamLayout = (props) => {
     const { useParticipants, useRemoteParticipants, useHasOngoingScreenShare } = videoReactBindings.useCallStateHooks();
     const call = videoReactBindings.useCall();
-    const [currentSpeaker, ...otherParticipants] = useParticipants();
+    const participants = useParticipants();
+    const [currentSpeaker] = participants;
     const remoteParticipants = useRemoteParticipants();
     const hasOngoingScreenShare = useHasOngoingScreenShare();
     const presenter = hasOngoingScreenShare
-        ? hasScreenShare$1(currentSpeaker) && currentSpeaker
-        : otherParticipants.find(hasScreenShare$1);
+        ? participants.find(videoClient.hasScreenShare)
+        : undefined;
     usePaginatedLayoutSortPreset(call);
     const Overlay = (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName }));
     const { floatingParticipantProps } = props;
@@ -2303,7 +2355,6 @@ const LivestreamLayout = (props) => {
                     clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: FloatingParticipantOverlay || Overlay, muteAudio // audio is rendered by ParticipantsAudio
                 : true }))] }));
 };
-const hasScreenShare$1 = (p) => !!p?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
 const ParticipantOverlay = (props) => {
     const { enableFullScreen = true, showParticipantCount = true, showDuration = true, showLiveBadge = true, showSpeakerName = false, } = props;
     const { participant } = useParticipantViewContext();
@@ -2467,7 +2518,7 @@ const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, Par
     const [participantsBarWrapperElement, setParticipantsBarWrapperElement] = react.useState(null);
     const [participantsBarElement, setParticipantsBarElement] = react.useState(null);
     const [buttonsWrapperElement, setButtonsWrapperElement] = react.useState(null);
-    const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
+    const isSpeakerScreenSharing = participantInSpotlight && videoClient.hasScreenShare(participantInSpotlight);
     const hardLimit = useCalculateHardLimit(buttonsWrapperElement, participantsBarElement, participantsBarLimit);
     const isVertical = participantsBarPosition === 'left' || participantsBarPosition === 'right';
     const isHorizontal = participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
@@ -2515,9 +2566,8 @@ 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 hasScreenShare = (p) => !!p?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("1.0.6" ).split('.');
+const [major, minor, patch] = ("1.0.8" ).split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,