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

package/src/components/CallControls/ToggleVideoButton.tsx

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

package/src/components/CallParticipantsList/CallParticipantListingItem.tsx

@@ -1,7 +1,12 @@
 import clsx from 'clsx';
 import { ComponentProps, ComponentType, forwardRef } from 'react';
 import { useConnectedUser, useI18n } from '@stream-io/video-react-bindings';
-import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import {
+  hasAudio,
+  hasVideo,
+  isPinned,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
 import { IconButton } from '../Button';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 import { WithTooltip } from '../Tooltip';
@@ -21,13 +26,9 @@ export const CallParticipantListingItem = ({
   participant,
   DisplayName = DefaultDisplayName,
 }: CallParticipantListingItemProps) => {
-  const isAudioOn = participant.publishedTracks.includes(
-    SfuModels.TrackType.AUDIO,
-  );
-  const isVideoOn = participant.publishedTracks.includes(
-    SfuModels.TrackType.VIDEO,
-  );
-  const isPinned = !!participant.pin;
+  const isAudioOn = hasAudio(participant);
+  const isVideoOn = hasVideo(participant);
+  const isPinnedOn = isPinned(participant);
 
   const { t } = useI18n();
 
@@ -54,7 +55,7 @@ export const CallParticipantListingItem = ({
             }`,
           )}
         />
-        {isPinned && (
+        {isPinnedOn && (
           <MediaIndicator
             title={t('Pinned')}
             className={clsx(

package/src/components/DeviceSettings/DeviceSelector.tsx

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

package/src/components/Menu/MenuToggle.tsx

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

package/src/components/Tooltip/WithTooltip.tsx

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

package/src/core/components/Audio/ParticipantsAudio.tsx

@@ -1,5 +1,9 @@
 import { ComponentProps, Fragment } from 'react';
-import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import {
+  hasAudio,
+  hasScreenShareAudio,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
 import { Audio } from './Audio';
 
 export type ParticipantsAudioProps = {
@@ -20,15 +24,10 @@ export const ParticipantsAudio = (props: ParticipantsAudioProps) => {
     <>
       {participants.map((participant) => {
         if (participant.isLocalParticipant) return null;
-        const {
-          publishedTracks,
-          audioStream,
-          screenShareAudioStream,
-          sessionId,
-        } = participant;
+        const { audioStream, screenShareAudioStream, sessionId } = participant;
 
-        const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
-        const audioTrackElement = hasAudio && audioStream && (
+        const hasAudioTrack = hasAudio(participant);
+        const audioTrackElement = hasAudioTrack && audioStream && (
           <Audio
             {...audioProps}
             trackType="audioTrack"
@@ -36,10 +35,8 @@ export const ParticipantsAudio = (props: ParticipantsAudioProps) => {
           />
         );
 
-        const hasScreenShareAudio = publishedTracks.includes(
-          SfuModels.TrackType.SCREEN_SHARE_AUDIO,
-        );
-        const screenShareAudioTrackElement = hasScreenShareAudio &&
+        const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
+        const screenShareAudioTrackElement = hasScreenShareAudioTrack &&
           screenShareAudioStream && (
             <Audio
               {...audioProps}

package/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -5,7 +5,7 @@ import {
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
-import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { hasScreenShare } from '@stream-io/video-client';
 import { ParticipantView, useParticipantViewContext } from '../ParticipantView';
 import { ParticipantsAudio } from '../Audio';
 import { usePaginatedLayoutSortPreset } from './hooks';
@@ -59,12 +59,13 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
   const { useParticipants, useRemoteParticipants, useHasOngoingScreenShare } =
     useCallStateHooks();
   const call = useCall();
-  const [currentSpeaker, ...otherParticipants] = useParticipants();
+  const participants = useParticipants();
+  const [currentSpeaker] = participants;
   const remoteParticipants = useRemoteParticipants();
   const hasOngoingScreenShare = useHasOngoingScreenShare();
   const presenter = hasOngoingScreenShare
-    ? hasScreenShare(currentSpeaker) && currentSpeaker
-    : otherParticipants.find(hasScreenShare);
+    ? participants.find(hasScreenShare)
+    : undefined;
 
   usePaginatedLayoutSortPreset(call);
 
@@ -122,9 +123,6 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
   );
 };
 
-const hasScreenShare = (p?: StreamVideoParticipant) =>
-  !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
-
 const ParticipantOverlay = (props: {
   enableFullScreen?: boolean;
   showParticipantCount?: boolean;

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import clsx from 'clsx';
-import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { hasScreenShare } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 
 import {
@@ -56,7 +56,8 @@ export const SpeakerLayout = ({
   const [buttonsWrapperElement, setButtonsWrapperElement] =
     useState<HTMLDivElement | null>(null);
 
-  const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
+  const isSpeakerScreenSharing =
+    participantInSpotlight && hasScreenShare(participantInSpotlight);
   const hardLimit = useCalculateHardLimit(
     buttonsWrapperElement,
     participantsBarElement,
@@ -247,6 +248,3 @@ const VerticalScrollButtons = <T extends HTMLElement>({
     </>
   );
 };
-
-const hasScreenShare = (p?: StreamVideoParticipant) =>
-  !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);

package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -1,6 +1,11 @@
 import { ComponentType, forwardRef } from 'react';
 import { Placement } from '@floating-ui/react';
-import { SfuModels } from '@stream-io/video-client';
+import {
+  hasAudio,
+  hasScreenShare,
+  hasVideo,
+  SfuModels,
+} from '@stream-io/video-client';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
 
@@ -71,15 +76,11 @@ export const DefaultParticipantViewUI = ({
   ParticipantActionsContextMenu = DefaultParticipantActionsContextMenu,
 }: DefaultParticipantViewUIProps) => {
   const { participant, trackType } = useParticipantViewContext();
-  const { publishedTracks } = participant;
-
-  const hasScreenShare = publishedTracks.includes(
-    SfuModels.TrackType.SCREEN_SHARE,
-  );
+  const isScreenSharing = hasScreenShare(participant);
 
   if (
     participant.isLocalParticipant &&
-    hasScreenShare &&
+    isScreenSharing &&
     trackType === 'screenShareTrack'
   ) {
     return (
@@ -114,7 +115,6 @@ export const ParticipantDetails = ({
   const {
     isLocalParticipant,
     connectionQuality,
-    publishedTracks,
     pin,
     sessionId,
     name,
@@ -127,8 +127,8 @@ export const ParticipantDetails = ({
     !!connectionQuality &&
     SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
 
-  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
-  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const hasAudioTrack = hasAudio(participant);
+  const hasVideoTrack = hasVideo(participant);
   const canUnpin = !!pin && pin.isLocalPin;
 
   return (
@@ -137,10 +137,10 @@ export const ParticipantDetails = ({
         <span className="str-video__participant-details__name">
           {name || userId}
 
-          {indicatorsVisible && !hasAudio && (
+          {indicatorsVisible && !hasAudioTrack && (
             <span className="str-video__participant-details__name--audio-muted" />
           )}
-          {indicatorsVisible && !hasVideo && (
+          {indicatorsVisible && !hasVideoTrack && (
             <span className="str-video__participant-details__name--video-muted" />
           )}
           {indicatorsVisible && canUnpin && (

package/src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx

@@ -1,6 +1,12 @@
 import { useEffect, useState } from 'react';
 import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
-import { OwnCapability, SfuModels } from '@stream-io/video-client';
+import {
+  hasAudio,
+  hasScreenShare,
+  hasScreenShareAudio,
+  hasVideo,
+  OwnCapability,
+} from '@stream-io/video-client';
 import { useParticipantViewContext } from './ParticipantViewContext';
 import {
   GenericMenu,
@@ -21,16 +27,12 @@ export const ParticipantActionsContextMenu = () => {
   const call = useCall();
   const { t } = useI18n();
 
-  const { pin, publishedTracks, sessionId, userId } = participant;
+  const { pin, sessionId, userId } = participant;
 
-  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
-  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
-  const hasScreenShare = publishedTracks.includes(
-    SfuModels.TrackType.SCREEN_SHARE,
-  );
-  const hasScreenShareAudio = publishedTracks.includes(
-    SfuModels.TrackType.SCREEN_SHARE_AUDIO,
-  );
+  const hasAudioTrack = hasAudio(participant);
+  const hasVideoTrack = hasVideo(participant);
+  const hasScreenShareTrack = hasScreenShare(participant);
+  const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
 
   const blockUser = () => call?.blockUser(userId);
   const muteAudio = () => call?.muteUser(userId, 'audio');
@@ -161,25 +163,25 @@ export const ParticipantActionsContextMenu = () => {
         </GenericMenuButtonItem>
       </Restricted>
       <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
-        {hasVideo && (
+        {hasVideoTrack && (
           <GenericMenuButtonItem onClick={muteVideo}>
             <Icon icon="camera-off-outline" />
             {t('Turn off video')}
           </GenericMenuButtonItem>
         )}
-        {hasScreenShare && (
+        {hasScreenShareTrack && (
           <GenericMenuButtonItem onClick={muteScreenShare}>
             <Icon icon="screen-share-off" />
             {t('Turn off screen share')}
           </GenericMenuButtonItem>
         )}
-        {hasAudio && (
+        {hasAudioTrack && (
           <GenericMenuButtonItem onClick={muteAudio}>
             <Icon icon="no-audio" />
             {t('Mute audio')}
           </GenericMenuButtonItem>
         )}
-        {hasScreenShareAudio && (
+        {hasScreenShareAudioTrack && (
           <GenericMenuButtonItem onClick={muteScreenShareAudio}>
             <Icon icon="no-audio" />
             {t('Mute screen share audio')}

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -7,7 +7,9 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import {
-  SfuModels,
+  hasAudio,
+  hasScreenShareAudio,
+  hasVideo,
   StreamVideoParticipant,
   VideoTrackType,
 } from '@stream-io/video-client';
@@ -74,19 +76,12 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
     },
     ref,
   ) {
-    const {
-      isLocalParticipant,
-      isSpeaking,
-      isDominantSpeaker,
-      publishedTracks,
-      sessionId,
-    } = participant;
+    const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } =
+      participant;
 
-    const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
-    const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
-    const hasScreenShareAudio = publishedTracks.includes(
-      SfuModels.TrackType.SCREEN_SHARE_AUDIO,
-    );
+    const hasAudioTrack = hasAudio(participant);
+    const hasVideoTrack = hasVideo(participant);
+    const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
 
     const [trackedElement, setTrackedElement] = useState<HTMLDivElement | null>(
       null,
@@ -147,8 +142,8 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
           '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',
+          !hasVideoTrack && 'str-video__participant-view--no-video',
+          !hasAudioTrack && 'str-video__participant-view--no-audio',
           className,
         )}
       >
@@ -156,10 +151,10 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
           {/* mute the local participant, as we don't want to hear ourselves */}
           {!isLocalParticipant && !muteAudio && (
             <>
-              {hasAudio && (
+              {hasAudioTrack && (
                 <Audio participant={participant} trackType="audioTrack" />
               )}
-              {hasScreenShareAudio && (
+              {hasScreenShareAudioTrack && (
                 <Audio
                   participant={participant}
                   trackType="screenShareAudioTrack"

package/src/core/components/Video/Video.tsx

@@ -6,7 +6,8 @@ import {
   useState,
 } from 'react';
 import {
-  SfuModels,
+  hasScreenShare,
+  hasVideo,
   StreamVideoParticipant,
   VideoTrackType,
   VisibilityState,
@@ -64,7 +65,6 @@ export const Video = ({
     sessionId,
     videoStream,
     screenShareStream,
-    publishedTracks,
     viewportVisibilityState,
     isLocalParticipant,
     userId,
@@ -130,9 +130,9 @@ export const Video = ({
 
   const isPublishingTrack =
     trackType === 'videoTrack'
-      ? publishedTracks.includes(SfuModels.TrackType.VIDEO)
+      ? hasVideo(participant)
       : trackType === 'screenShareTrack'
-      ? publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE)
+      ? hasScreenShare(participant)
       : false;
 
   const isInvisible =