@stream-io/video-react-native-sdk 1.18.1 → 1.19.1

package/src/components/Call/CallContent/RTCViewPipIOS.tsx

@@ -9,14 +9,15 @@ import type { MediaStream } from '@stream-io/react-native-webrtc';
 import React, { useEffect, useMemo } from 'react';
 import { findNodeHandle } from 'react-native';
 import { onNativeCallClosed, RTCViewPipNative } from './RTCViewPipNative';
-import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { useDebouncedValue } from '../../../utils/hooks';
 import { shouldDisableIOSLocalVideoOnBackgroundRef } from '../../../utils/internal/shouldDisableIOSLocalVideoOnBackground';
 
 type Props = {
   includeLocalParticipantVideo?: boolean;
 };
 
-const RTCViewPipIOS = React.memo(({ includeLocalParticipantVideo }: Props) => {
+export const RTCViewPipIOS = React.memo((props: Props) => {
+  const { includeLocalParticipantVideo } = props;
   const call = useCall();
   const { useParticipants } = useCallStateHooks();
   const _allParticipants = useParticipants({
@@ -61,16 +62,14 @@ const RTCViewPipIOS = React.memo(({ includeLocalParticipantVideo }: Props) => {
         'debug',
         `onCallClosed due to call.ended event`,
       );
-      unsubFunc?.();
       onCallClosed();
     });
     const subscription = call?.state.callingState$.subscribe((state) => {
-      if (state === CallingState.LEFT || state === CallingState.IDLE) {
+      if (state === CallingState.LEFT) {
         getLogger(['RTCViewPipIOS'])(
           'debug',
           `onCallClosed due to callingState: ${state}`,
         );
-        subscription?.unsubscribe();
         onCallClosed();
       }
     });
@@ -101,5 +100,3 @@ const RTCViewPipIOS = React.memo(({ includeLocalParticipantVideo }: Props) => {
 });
 
 RTCViewPipIOS.displayName = 'RTCViewPipIOS';
-
-export default RTCViewPipIOS;

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

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import {
+  BadNetwork,
   MicOff,
   PinVertical,
   ScreenShareIndicator,
@@ -10,7 +11,7 @@ import { useCall, useI18n } from '@stream-io/video-react-bindings';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { type ParticipantViewProps } from './ParticipantView';
 import { Z_INDEX } from '../../../constants';
-import { hasAudio, hasVideo } from '@stream-io/video-client';
+import { hasAudio, hasPausedTrack, hasVideo } from '@stream-io/video-client';
 import { useTheme } from '../../../contexts/ThemeContext';
 import SpeechIndicator from './SpeechIndicator';
 
@@ -54,6 +55,7 @@ export const ParticipantLabel = ({
   const isPinningEnabled = pin?.isLocalPin;
   const isAudioMuted = !hasAudio(participant);
   const isVideoMuted = !hasVideo(participant);
+  const isTrackPaused = trackType && hasPausedTrack(participant, trackType);
 
   const unPinParticipantHandler = () => {
     call?.unpin(sessionId);
@@ -124,6 +126,13 @@ export const ParticipantLabel = ({
             <VideoSlash color={colors.iconPrimary} size={iconSizes.sm} />
           </View>
         )}
+        {isTrackPaused && (
+          <View
+            style={[styles.trackPausedIconContainer, videoMutedIconContainer]}
+          >
+            <BadNetwork color={colors.iconPrimary} size={iconSizes.sm} />
+          </View>
+        )}
         {isPinningEnabled && (
           <Pressable
             style={[styles.pinIconContainer, pinIconContainer]}
@@ -182,6 +191,10 @@ const useStyles = () => {
           marginLeft: theme.variants.spacingSizes.xs,
           justifyContent: 'center',
         },
+        trackPausedIconContainer: {
+          marginLeft: theme.variants.spacingSizes.xs,
+          justifyContent: 'center',
+        },
         pinIconContainer: {
           marginLeft: theme.variants.spacingSizes.xs,
           justifyContent: 'center',

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

@@ -5,6 +5,7 @@ import { RTCView } from '@stream-io/react-native-webrtc';
 import type { ParticipantViewProps } from './ParticipantView';
 import {
   CallingState,
+  hasPausedTrack,
   hasScreenShare,
   hasVideo,
   SfuModels,
@@ -96,9 +97,10 @@ export const VideoRenderer = ({
     !!videoStreamToRender &&
     isVisible &&
     isPublishingVideoTrack &&
+    !hasPausedTrack(participant, trackType) &&
     isParticipantVideoEnabled(participant.sessionId);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (
       Platform.OS === 'ios' &&
       registerIosScreenshot &&

package/src/icons/BadNetwork.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+  size: number;
+};
+
+export const BadNetwork = ({ color, size }: Props) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size}>
+    <Path d="M24 0H0v24h24z" fill="none" />
+    <Path
+      d="M8.1 5c.17 0 .32.09.41.23l.07.15 5.18 11.65c.16.29.26.61.26.96 0 1.11-.9 2.01-2.01 2.01-.96 0-1.77-.68-1.96-1.59l-.01-.03L7.6 5.5c0-.28.22-.5.5-.5M23 9l-2 2a12.66 12.66 0 0 0-10.53-3.62L9.28 4.7c4.83-.86 9.98.57 13.72 4.3M3 11 1 9a15.4 15.4 0 0 1 5.59-3.57l.53 2.82C5.62 8.87 4.22 9.78 3 11m4 4-2-2c.8-.8 1.7-1.42 2.66-1.89l.55 2.92c-.42.27-.83.59-1.21.97m12-2-2 2a7.1 7.1 0 0 0-4.03-2l-1.28-2.88c2.63-.08 5.3.87 7.31 2.88"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/index.tsx

@@ -1,3 +1,4 @@
+export * from './BadNetwork';
 export * from './CameraSwitch';
 export * from './Mic';
 export * from './MicOff';

package/src/providers/StreamCall/AppStateListener.tsx

@@ -72,11 +72,9 @@ export const AppStateListener = () => {
     const subscription = AppState.addEventListener('change', (nextAppState) => {
       const logger = getLogger(['AppStateListener']);
       if (appState.current.match(/background/) && nextAppState === 'active') {
-        if (
-          call?.camera?.state.status === 'enabled' &&
-          Platform.OS === 'android'
-        ) {
-          // when device is locked and resumed, the status isnt made disabled but stays enabled
+        if (call?.camera?.state.status === 'enabled') {
+          // Android: when device is locked and resumed, the status isnt made disabled but stays enabled
+          // iOS PiP: when local track was replaced by remote track, the local track shown is blank
           // as a workaround we stop the track and enable again if its already in enabled state
           call?.camera?.disable(true).then(() => {
             call?.camera?.enable();

package/src/version.ts

@@ -1 +1 @@
-export const version = '1.18.1';
+export const version = '1.19.1';