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

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [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
+
+* `@stream-io/video-client` updated to version `1.0.6`
+* `@stream-io/video-react-bindings` updated to version `0.4.32`
+
+### Bug Fixes
+
+* **state:** aligns the participant state with other SDKs ([#1357](https://github.com/GetStream/stream-video-js/issues/1357)) ([146e6ac](https://github.com/GetStream/stream-video-js/commit/146e6acd7296488bc18f4bf5c76e9f2c9bfd97af))
+
 ### [1.0.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.0.5...@stream-io/video-react-sdk-1.0.6) (2024-05-16)
 
 ### Dependency Updates

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));
         }) }));
@@ -1372,11 +1372,11 @@ const WithTooltip = ({ title, tooltipClassName, tooltipPlacement, ...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 +1787,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 +1835,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 +1921,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 +2010,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 +2045,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 +2055,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 +2075,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 +2114,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 +2283,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 +2303,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 +2466,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 +2514,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.7" ).split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,