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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -29,9 +29,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
-    "@stream-io/video-client": "1.0.4",
+    "@stream-io/video-client": "1.0.6",
     "@stream-io/video-filters-web": "0.1.0",
-    "@stream-io/video-react-bindings": "0.4.30",
+    "@stream-io/video-react-bindings": "0.4.32",
     "chart.js": "^4.4.1",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"

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/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 =