@stream-io/video-react-native-sdk 0.7.6 → 0.7.7

package/src/components/Livestream/LivestreamLayout/LivestreamLayout.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { hasScreenShare, SfuModels } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import { usePaginatedLayoutSortPreset } from '../../../hooks/usePaginatedLayoutSortPreset';
@@ -9,7 +9,6 @@ import {
   VideoRendererProps,
 } from '../../Participant';
 import { ScreenShareOverlayProps } from '../../utility/ScreenShareOverlay';
-import { VideoDimension } from '@stream-io/video-client/dist/src/gen/video/sfu/models/models';
 
 /**
  * Props for the LivestreamLayout component.
@@ -30,9 +29,6 @@ export type LivestreamLayoutProps = {
   ScreenShareOverlay?: React.ComponentType<ScreenShareOverlayProps> | null;
 };
 
-const hasScreenShare = (p?: StreamVideoParticipant) =>
-  p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
-
 /**
  * The LivestreamLayout component presents the live stream video layout.
  */
@@ -46,11 +42,12 @@ export const LivestreamLayout = ({
   const {
     theme: { colors, livestreamLayout },
   } = useTheme();
-  const [currentSpeaker, ...otherParticipants] = useParticipants();
+  const participants = useParticipants();
+  const [currentSpeaker] = participants;
   const hasOngoingScreenShare = useHasOngoingScreenShare();
   const presenter = hasOngoingScreenShare
-    ? hasScreenShare(currentSpeaker) && currentSpeaker
-    : otherParticipants.find(hasScreenShare);
+    ? participants.find(hasScreenShare)
+    : undefined;
 
   usePaginatedLayoutSortPreset(call);
 
@@ -64,12 +61,15 @@ export const LivestreamLayout = ({
     ? undefined
     : objectFit;
 
-  const onDimensionsChange = useCallback((d: VideoDimension | undefined) => {
-    if (d) {
-      const isWidthWide = d.width > d.height;
-      setObjectFit(isWidthWide ? 'contain' : 'cover');
-    }
-  }, []);
+  const onDimensionsChange = useCallback(
+    (d: SfuModels.VideoDimension | undefined) => {
+      if (d) {
+        const isWidthWide = d.width > d.height;
+        setObjectFit(isWidthWide ? 'contain' : 'cover');
+      }
+    },
+    [],
+  );
 
   const landScapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
@@ -109,9 +109,9 @@ export const LivestreamLayout = ({
 const RemoteVideoTrackDimensionsRenderLessComponent = ({
   onDimensionsChange,
 }: {
-  onDimensionsChange: (d: VideoDimension | undefined) => void;
+  onDimensionsChange: (d: SfuModels.VideoDimension | undefined) => void;
 }) => {
-  const [dimension, setDimension] = useState<VideoDimension>();
+  const [dimension, setDimension] = useState<SfuModels.VideoDimension>();
   const { useCallStatsReport } = useCallStateHooks();
   const statsReport = useCallStatsReport();
   const highestFrameHeight = statsReport?.subscriberStats?.highestFrameHeight;

package/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx

@@ -21,10 +21,7 @@ import {
   FloatingParticipantView as DefaultFloatingParticipantView,
   FloatingParticipantViewProps,
 } from '../../Participant';
-import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
-
-const hasVideoTrack = (p?: StreamVideoParticipant) =>
-  p?.publishedTracks.includes(SfuModels.TrackType.VIDEO);
+import { hasVideo } from '@stream-io/video-client';
 
 /**
  * Props for the ViewerLivestream component.
@@ -71,7 +68,10 @@ export const ViewerLivestream = ({
   const hasOngoingScreenShare = useHasOngoingScreenShare();
   const [currentSpeaker] = useParticipants();
   const floatingParticipant =
-    hasOngoingScreenShare && hasVideoTrack(currentSpeaker) && currentSpeaker;
+    hasOngoingScreenShare &&
+    currentSpeaker &&
+    hasVideo(currentSpeaker) &&
+    currentSpeaker;
 
   const [topViewHeight, setTopViewHeight] = React.useState<number>();
   const [controlsHeight, setControlsHeight] = React.useState<number>();

package/src/components/Participant/ParticipantView/ParticipantLabel.tsx

@@ -10,7 +10,7 @@ import { useCall, useI18n } from '@stream-io/video-react-bindings';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { ParticipantViewProps } from './ParticipantView';
 import { Z_INDEX } from '../../../constants';
-import { SfuModels } from '@stream-io/video-client';
+import { hasAudio, hasVideo } from '@stream-io/video-client';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 /**
@@ -43,16 +43,15 @@ export const ParticipantLabel = ({
       },
     },
   } = useTheme();
-  const { name, userId, pin, publishedTracks, sessionId, isLocalParticipant } =
-    participant;
+  const { name, userId, pin, sessionId, isLocalParticipant } = participant;
   const call = useCall();
   const { t } = useI18n();
   const participantName = name ?? userId;
 
   const participantLabel = isLocalParticipant ? t('You') : participantName;
   const isPinningEnabled = pin?.isLocalPin;
-  const isAudioMuted = !publishedTracks.includes(SfuModels.TrackType.AUDIO);
-  const isVideoMuted = !publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const isAudioMuted = !hasAudio(participant);
+  const isVideoMuted = !hasVideo(participant);
 
   const unPinParticipantHandler = () => {
     call?.unpin(sessionId);

package/src/components/Participant/ParticipantView/VideoRenderer.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
+import type { MediaStream } from '@stream-io/react-native-webrtc';
 import { RTCView } from '@stream-io/react-native-webrtc';
 import { ParticipantViewProps } from './ParticipantView';
 import {
   CallingState,
+  hasScreenShare,
+  hasVideo,
   SfuModels,
   VideoTrackType,
   VisibilityState,
@@ -11,7 +14,6 @@ import {
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { ParticipantVideoFallback as DefaultParticipantVideoFallback } from './ParticipantVideoFallback';
 import { useTheme } from '../../../contexts/ThemeContext';
-import type { MediaStream } from '@stream-io/react-native-webrtc';
 
 const DEFAULT_VIEWPORT_VISIBILITY_STATE: Record<
   VideoTrackType,
@@ -59,18 +61,16 @@ export const VideoRenderer = ({
   const {
     isLocalParticipant,
     sessionId,
-    publishedTracks,
     viewportVisibilityState,
     videoStream,
     screenShareStream,
   } = participant;
 
   const isScreenSharing = trackType === 'screenShareTrack';
-  const isPublishingVideoTrack = publishedTracks.includes(
-    isScreenSharing
-      ? SfuModels.TrackType.SCREEN_SHARE
-      : SfuModels.TrackType.VIDEO,
-  );
+  const isPublishingVideoTrack = isScreenSharing
+    ? hasScreenShare(participant)
+    : hasVideo(participant);
+
   const hasJoinedCall = callingState === CallingState.JOINED;
   const videoStreamToRender = (isScreenSharing
     ? screenShareStream

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.7.6';
+export const version = '0.7.7';