@stream-io/video-react-native-sdk 1.22.1-alpha.1 → 1.22.1

package/dist/commonjs/components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _videoClient = require("@stream-io/video-client");
+var _rxjs = require("rxjs");
+/**
+ * This component is used to subscribe to the video + audio track of the participant in the following cases:
+ * 1. When the participant starts publishing the video track
+ * 2. When the participant changes the video track dimensions
+ * 3. When the participant becomes visible
+ * 4. On joined callingState, this handles reconnection
+
+ * This component is used to unsubscribe to video track and subscribe only to the audio track of the participant (by passing undefined dimensions) in the following cases:
+ * 1. When the participant stops publishing the video track
+ * 2. When the participant becomes invisible
+*/
+const TrackSubscriber = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    call,
+    participantSessionId,
+    trackType,
+    isVisible
+  } = props;
+  const dimensions$ = (0, _react.useMemo)(() => {
+    return new _rxjs.BehaviorSubject(undefined);
+  }, []);
+  (0, _react.useEffect)(() => {
+    const requestTrackWithDimensions = (debounceType, dimension) => {
+      if (dimension && (dimension.width === 0 || dimension.height === 0)) {
+        // ignore 0x0 dimensions. this can happen when the video element
+        // is not visible (e.g., has display: none).
+        // we treat this as "unsubscription" as we don't want to keep
+        // consuming bandwidth for a video that is not visible on the screen.
+        dimension = undefined;
+      }
+      call.state.updateParticipantTracks(trackType, {
+        [participantSessionId]: {
+          dimension
+        }
+      });
+      call.dynascaleManager.applyTrackSubscriptions(debounceType);
+    };
+    const isPublishingTrack$ = call.state.participants$.pipe((0, _rxjs.map)(ps => ps.find(p => p.sessionId === participantSessionId)), (0, _rxjs.takeWhile)(p => !!p), (0, _rxjs.distinctUntilChanged)(), (0, _rxjs.distinctUntilKeyChanged)('publishedTracks'), (0, _rxjs.map)(p => trackType === 'videoTrack' ? (0, _videoClient.hasVideo)(p) : (0, _videoClient.hasScreenShare)(p)), (0, _rxjs.distinctUntilChanged)());
+    const isJoinedState$ = call.state.callingState$.pipe((0, _rxjs.map)(callingState => callingState === _videoClient.CallingState.JOINED));
+    const subscription = (0, _rxjs.combineLatest)([dimensions$, isPublishingTrack$, isJoinedState$]).subscribe(([dimension, isPublishing, isJoined]) => {
+      if (isJoined && isPublishing && !isVisible) {
+        // the participant is publishing and we are not visible, so we unsubscribe from the video track
+        requestTrackWithDimensions(_videoClient.DebounceType.FAST, undefined);
+      } else if (isJoined && isPublishing && isVisible && dimension) {
+        // the participant is publishing and we are visible and have valid dimensions, so we subscribe to the video track
+        requestTrackWithDimensions(_videoClient.DebounceType.IMMEDIATE, dimension);
+      } else if (isJoined && !isPublishing) {
+        // the participant stopped publishing a track, so we unsubscribe from the video track
+        requestTrackWithDimensions(_videoClient.DebounceType.FAST, undefined);
+      }
+      // if isPublishing but no dimension yet, we wait for dimensions
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [call, participantSessionId, trackType, isVisible, dimensions$]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    onLayoutUpdate: event => {
+      const dimension = {
+        width: Math.trunc(event.nativeEvent.layout.width),
+        height: Math.trunc(event.nativeEvent.layout.height)
+      };
+      dimensions$.next(dimension);
+    }
+  }), [dimensions$]);
+  return null;
+});
+TrackSubscriber.displayName = 'TrackSubscriber';
+var _default = exports.default = TrackSubscriber;
+//# sourceMappingURL=TrackSubscriber.js.map

package/dist/commonjs/components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_videoClient","_rxjs","TrackSubscriber","forwardRef","props","ref","call","participantSessionId","trackType","isVisible","dimensions$","useMemo","BehaviorSubject","undefined","useEffect","requestTrackWithDimensions","debounceType","dimension","width","height","state","updateParticipantTracks","dynascaleManager","applyTrackSubscriptions","isPublishingTrack$","participants$","pipe","map","ps","find","p","sessionId","takeWhile","distinctUntilChanged","distinctUntilKeyChanged","hasVideo","hasScreenShare","isJoinedState$","callingState$","callingState","CallingState","JOINED","subscription","combineLatest","subscribe","isPublishing","isJoined","DebounceType","FAST","IMMEDIATE","unsubscribe","useImperativeHandle","onLayoutUpdate","event","Math","trunc","nativeEvent","layout","next","displayName","_default","exports","default"],"sourceRoot":"../../../../../../src","sources":["components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/components/Participant/ParticipantView/{VideoRenderer.js → VideoRenderer/index.js}

@@ -9,10 +9,12 @@ var _reactNative = require("react-native");
 var _reactNativeWebrtc = require("@stream-io/react-native-webrtc");
 var _videoClient = require("@stream-io/video-client");
 var _videoReactBindings = require("@stream-io/video-react-bindings");
-var _ParticipantVideoFallback = require("./ParticipantVideoFallback");
-var _ThemeContext = require("../../../contexts/ThemeContext");
-var _useTrackDimensions = require("../../../hooks/useTrackDimensions");
-var _ScreenshotIosContext = require("../../../contexts/internal/ScreenshotIosContext");
+var _ParticipantVideoFallback = require("../ParticipantVideoFallback");
+var _ThemeContext = require("../../../../contexts/ThemeContext");
+var _useTrackDimensions = require("../../../../hooks/useTrackDimensions");
+var _ScreenshotIosContext = require("../../../../contexts/internal/ScreenshotIosContext");
+var _TrackSubscriber = _interopRequireDefault(require("./TrackSubscriber"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
   videoTrack: _videoClient.VisibilityState.UNKNOWN,
@@ -43,16 +45,13 @@ const VideoRenderer = ({
   } = (0, _ThemeContext.useTheme)();
   const call = (0, _videoReactBindings.useCall)();
   const {
-    useCallCallingState,
     useCameraState,
     useIncomingVideoSettings
   } = (0, _videoReactBindings.useCallStateHooks)();
+  const trackSubscriberRef = (0, _react.useRef)(null);
   const {
     isParticipantVideoEnabled
   } = useIncomingVideoSettings();
-  const callingState = useCallCallingState();
-  const pendingVideoLayoutRef = (0, _react.useRef)(undefined);
-  const subscribedVideoLayoutRef = (0, _react.useRef)(undefined);
   const {
     direction
   } = useCameraState();
@@ -72,7 +71,6 @@ const VideoRenderer = ({
   } = participant;
   const isScreenSharing = trackType === 'screenShareTrack';
   const isPublishingVideoTrack = isScreenSharing ? (0, _videoClient.hasScreenShare)(participant) : (0, _videoClient.hasVideo)(participant);
-  const hasJoinedCall = callingState === _videoClient.CallingState.JOINED;
   const videoStreamToRender = isScreenSharing ? screenShareStream : videoStream;
   const canShowVideo = !!videoStreamToRender && isVisible && isPublishingVideoTrack && !(0, _videoClient.hasPausedTrack)(participant, trackType) && isParticipantVideoEnabled(participant.sessionId);
   (0, _react.useEffect)(() => {
@@ -131,91 +129,21 @@ const VideoRenderer = ({
           }
         }));
       }
-      if (subscribedVideoLayoutRef.current) {
-        // when video is enabled again, we want to use the last subscribed dimension to resubscribe
-        pendingVideoLayoutRef.current = subscribedVideoLayoutRef.current;
-        subscribedVideoLayoutRef.current = undefined;
-      }
     }
   }, [sessionId, viewportVisibilityState, isVisible, call, trackType, isLocalParticipant]);
-  (0, _react.useEffect)(() => {
-    if (!hasJoinedCall && subscribedVideoLayoutRef.current) {
-      // when call is joined again, we want to use the last subscribed dimension to resubscribe
-      pendingVideoLayoutRef.current = subscribedVideoLayoutRef.current;
-      subscribedVideoLayoutRef.current = undefined;
-    }
-  }, [hasJoinedCall]);
-
-  /**
-   * This effect updates the subscription either
-   * 1. when video tracks are published and was unpublished before
-   * 2. when the view's visibility changes
-   * 3. when call was rejoined
-   */
-  (0, _react.useEffect)(() => {
-    if (!call || isLocalParticipant) {
-      return;
-    }
-    // NOTE: We only want to update the subscription if the pendingVideoLayoutRef is set
-    const updateIsNeeded = pendingVideoLayoutRef.current;
-    if (!updateIsNeeded || !isPublishingVideoTrack || !hasJoinedCall) {
-      return;
-    }
-
-    // NOTE: When the view is not visible, we want to subscribe to audio only.
-    // We unsubscribe their video by setting the dimension to undefined
-    const dimension = isVisible ? pendingVideoLayoutRef.current : undefined;
-    call.state.updateParticipantTracks(trackType, {
-      [sessionId]: {
-        dimension
-      }
-    });
-    call.dynascaleManager.applyTrackSubscriptions();
-    if (dimension) {
-      subscribedVideoLayoutRef.current = pendingVideoLayoutRef.current;
-      pendingVideoLayoutRef.current = undefined;
-    }
-  }, [call, isPublishingVideoTrack, trackType, isVisible, sessionId, hasJoinedCall, isLocalParticipant]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      subscribedVideoLayoutRef.current = undefined;
-      pendingVideoLayoutRef.current = undefined;
-    };
-  }, [trackType, sessionId]);
   const onLayout = event => {
-    if (!call || isLocalParticipant) {
-      return;
-    }
-    const dimension = {
-      width: Math.trunc(event.nativeEvent.layout.width),
-      height: Math.trunc(event.nativeEvent.layout.height)
-    };
-
-    // NOTE: If the participant hasn't published a video track yet,
-    // or the view is not viewable, we store the dimensions and handle it
-    // when the track is published or the video is enabled.
-    if (!isPublishingVideoTrack || !isVisible || !hasJoinedCall) {
-      pendingVideoLayoutRef.current = dimension;
-      return;
-    }
-
-    // NOTE: We don't want to update the subscription if the dimension hasn't changed
-    if (subscribedVideoLayoutRef.current?.width === dimension.width && subscribedVideoLayoutRef.current?.height === dimension.height) {
-      return;
-    }
-    call.state.updateParticipantTracks(trackType, {
-      [sessionId]: {
-        dimension
-      }
-    });
-    call.dynascaleManager.applyTrackSubscriptions();
-    subscribedVideoLayoutRef.current = dimension;
-    pendingVideoLayoutRef.current = undefined;
+    trackSubscriberRef.current?.onLayoutUpdate(event);
   };
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     onLayout: onLayout,
     style: [styles.container, videoRenderer.container]
-  }, canShowVideo && videoStreamToRender && (objectFit || isVideoDimensionsValid) ? /*#__PURE__*/_react.default.createElement(_reactNativeWebrtc.RTCView, {
+  }, call && !isLocalParticipant && /*#__PURE__*/_react.default.createElement(_TrackSubscriber.default, {
+    ref: trackSubscriberRef,
+    call: call,
+    participantSessionId: sessionId,
+    trackType: trackType,
+    isVisible: isVisible
+  }), canShowVideo && videoStreamToRender && (objectFit || isVideoDimensionsValid) ? /*#__PURE__*/_react.default.createElement(_reactNativeWebrtc.RTCView, {
     style: [styles.videoStream, videoRenderer.videoStream],
     streamURL: videoStreamToRender.toURL(),
     mirror: mirror,
@@ -235,4 +163,4 @@ const styles = _reactNative.StyleSheet.create({
     ..._reactNative.StyleSheet.absoluteFillObject
   }
 });
-//# sourceMappingURL=VideoRenderer.js.map
+//# sourceMappingURL=index.js.map

package/dist/commonjs/components/Participant/ParticipantView/VideoRenderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeWebrtc","_videoClient","_videoReactBindings","_ParticipantVideoFallback","_ThemeContext","_useTrackDimensions","_ScreenshotIosContext","_TrackSubscriber","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_VIEWPORT_VISIBILITY_STATE","videoTrack","VisibilityState","UNKNOWN","screenShareTrack","VideoRenderer","trackType","participant","isVisible","ParticipantVideoFallback","DefaultParticipantVideoFallback","objectFit","videoZOrder","theme","videoRenderer","useTheme","useCall","useCameraState","useIncomingVideoSettings","useCallStateHooks","trackSubscriberRef","useRef","isParticipantVideoEnabled","direction","viewRef","register","registerIosScreenshot","deregister","deregisterIosScreenshot","useScreenshotIosContext","videoDimensions","useTrackDimensions","isVideoDimensionsValid","width","height","isLocalParticipant","sessionId","viewportVisibilityState","videoStream","screenShareStream","isScreenSharing","isPublishingVideoTrack","hasScreenShare","hasVideo","videoStreamToRender","canShowVideo","hasPausedTrack","useEffect","Platform","OS","mirror","VISIBLE","state","updateParticipant","p","INVISIBLE","onLayout","event","current","onLayoutUpdate","createElement","View","style","styles","container","ref","participantSessionId","RTCView","streamURL","toURL","zOrder","exports","StyleSheet","create","absoluteFillObject"],"sourceRoot":"../../../../../../src","sources":["components/Participant/ParticipantView/VideoRenderer/index.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/version.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = void 0;
-const version = exports.version = '1.22.1-alpha.1';
+const version = exports.version = '1.22.1';
 //# sourceMappingURL=version.js.map

package/dist/commonjs/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["version","exports"],"sourceRoot":"../../src","sources":["version.ts"],"mappings":";;;;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,gBAAgB","ignoreList":[]}
+{"version":3,"names":["version","exports"],"sourceRoot":"../../src","sources":["version.ts"],"mappings":";;;;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,QAAQ","ignoreList":[]}

package/dist/module/components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.js

@@ -0,0 +1,73 @@
+import { forwardRef, useImperativeHandle, useEffect, useMemo } from 'react';
+import { CallingState, hasScreenShare, hasVideo, DebounceType } from '@stream-io/video-client';
+import { BehaviorSubject, combineLatest, distinctUntilChanged, distinctUntilKeyChanged, map, takeWhile } from 'rxjs';
+/**
+ * This component is used to subscribe to the video + audio track of the participant in the following cases:
+ * 1. When the participant starts publishing the video track
+ * 2. When the participant changes the video track dimensions
+ * 3. When the participant becomes visible
+ * 4. On joined callingState, this handles reconnection
+
+ * This component is used to unsubscribe to video track and subscribe only to the audio track of the participant (by passing undefined dimensions) in the following cases:
+ * 1. When the participant stops publishing the video track
+ * 2. When the participant becomes invisible
+*/
+const TrackSubscriber = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    call,
+    participantSessionId,
+    trackType,
+    isVisible
+  } = props;
+  const dimensions$ = useMemo(() => {
+    return new BehaviorSubject(undefined);
+  }, []);
+  useEffect(() => {
+    const requestTrackWithDimensions = (debounceType, dimension) => {
+      if (dimension && (dimension.width === 0 || dimension.height === 0)) {
+        // ignore 0x0 dimensions. this can happen when the video element
+        // is not visible (e.g., has display: none).
+        // we treat this as "unsubscription" as we don't want to keep
+        // consuming bandwidth for a video that is not visible on the screen.
+        dimension = undefined;
+      }
+      call.state.updateParticipantTracks(trackType, {
+        [participantSessionId]: {
+          dimension
+        }
+      });
+      call.dynascaleManager.applyTrackSubscriptions(debounceType);
+    };
+    const isPublishingTrack$ = call.state.participants$.pipe(map(ps => ps.find(p => p.sessionId === participantSessionId)), takeWhile(p => !!p), distinctUntilChanged(), distinctUntilKeyChanged('publishedTracks'), map(p => trackType === 'videoTrack' ? hasVideo(p) : hasScreenShare(p)), distinctUntilChanged());
+    const isJoinedState$ = call.state.callingState$.pipe(map(callingState => callingState === CallingState.JOINED));
+    const subscription = combineLatest([dimensions$, isPublishingTrack$, isJoinedState$]).subscribe(([dimension, isPublishing, isJoined]) => {
+      if (isJoined && isPublishing && !isVisible) {
+        // the participant is publishing and we are not visible, so we unsubscribe from the video track
+        requestTrackWithDimensions(DebounceType.FAST, undefined);
+      } else if (isJoined && isPublishing && isVisible && dimension) {
+        // the participant is publishing and we are visible and have valid dimensions, so we subscribe to the video track
+        requestTrackWithDimensions(DebounceType.IMMEDIATE, dimension);
+      } else if (isJoined && !isPublishing) {
+        // the participant stopped publishing a track, so we unsubscribe from the video track
+        requestTrackWithDimensions(DebounceType.FAST, undefined);
+      }
+      // if isPublishing but no dimension yet, we wait for dimensions
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [call, participantSessionId, trackType, isVisible, dimensions$]);
+  useImperativeHandle(ref, () => ({
+    onLayoutUpdate: event => {
+      const dimension = {
+        width: Math.trunc(event.nativeEvent.layout.width),
+        height: Math.trunc(event.nativeEvent.layout.height)
+      };
+      dimensions$.next(dimension);
+    }
+  }), [dimensions$]);
+  return null;
+});
+TrackSubscriber.displayName = 'TrackSubscriber';
+export default TrackSubscriber;
+//# sourceMappingURL=TrackSubscriber.js.map

package/dist/module/components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useImperativeHandle","useEffect","useMemo","CallingState","hasScreenShare","hasVideo","DebounceType","BehaviorSubject","combineLatest","distinctUntilChanged","distinctUntilKeyChanged","map","takeWhile","TrackSubscriber","props","ref","call","participantSessionId","trackType","isVisible","dimensions$","undefined","requestTrackWithDimensions","debounceType","dimension","width","height","state","updateParticipantTracks","dynascaleManager","applyTrackSubscriptions","isPublishingTrack$","participants$","pipe","ps","find","p","sessionId","isJoinedState$","callingState$","callingState","JOINED","subscription","subscribe","isPublishing","isJoined","FAST","IMMEDIATE","unsubscribe","onLayoutUpdate","event","Math","trunc","nativeEvent","layout","next","displayName"],"sourceRoot":"../../../../../../src","sources":["components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/components/Participant/ParticipantView/{VideoRenderer.js → VideoRenderer/index.js}

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { RTCView } from '@stream-io/react-native-webrtc';
-import { CallingState, hasPausedTrack, hasScreenShare, hasVideo, VisibilityState } from '@stream-io/video-client';
+import { hasPausedTrack, hasScreenShare, hasVideo, VisibilityState } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
-import { ParticipantVideoFallback as DefaultParticipantVideoFallback } from './ParticipantVideoFallback';
-import { useTheme } from '../../../contexts/ThemeContext';
-import { useTrackDimensions } from '../../../hooks/useTrackDimensions';
-import { useScreenshotIosContext } from '../../../contexts/internal/ScreenshotIosContext';
+import { ParticipantVideoFallback as DefaultParticipantVideoFallback } from '../ParticipantVideoFallback';
+import { useTheme } from '../../../../contexts/ThemeContext';
+import { useTrackDimensions } from '../../../../hooks/useTrackDimensions';
+import { useScreenshotIosContext } from '../../../../contexts/internal/ScreenshotIosContext';
+import TrackSubscriber from './TrackSubscriber';
 const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
   videoTrack: VisibilityState.UNKNOWN,
   screenShareTrack: VisibilityState.UNKNOWN
@@ -36,16 +37,13 @@ export const VideoRenderer = ({
   } = useTheme();
   const call = useCall();
   const {
-    useCallCallingState,
     useCameraState,
     useIncomingVideoSettings
   } = useCallStateHooks();
+  const trackSubscriberRef = useRef(null);
   const {
     isParticipantVideoEnabled
   } = useIncomingVideoSettings();
-  const callingState = useCallCallingState();
-  const pendingVideoLayoutRef = useRef(undefined);
-  const subscribedVideoLayoutRef = useRef(undefined);
   const {
     direction
   } = useCameraState();
@@ -65,7 +63,6 @@ export const VideoRenderer = ({
   } = participant;
   const isScreenSharing = trackType === 'screenShareTrack';
   const isPublishingVideoTrack = isScreenSharing ? hasScreenShare(participant) : hasVideo(participant);
-  const hasJoinedCall = callingState === CallingState.JOINED;
   const videoStreamToRender = isScreenSharing ? screenShareStream : videoStream;
   const canShowVideo = !!videoStreamToRender && isVisible && isPublishingVideoTrack && !hasPausedTrack(participant, trackType) && isParticipantVideoEnabled(participant.sessionId);
   useEffect(() => {
@@ -124,91 +121,21 @@ export const VideoRenderer = ({
           }
         }));
       }
-      if (subscribedVideoLayoutRef.current) {
-        // when video is enabled again, we want to use the last subscribed dimension to resubscribe
-        pendingVideoLayoutRef.current = subscribedVideoLayoutRef.current;
-        subscribedVideoLayoutRef.current = undefined;
-      }
     }
   }, [sessionId, viewportVisibilityState, isVisible, call, trackType, isLocalParticipant]);
-  useEffect(() => {
-    if (!hasJoinedCall && subscribedVideoLayoutRef.current) {
-      // when call is joined again, we want to use the last subscribed dimension to resubscribe
-      pendingVideoLayoutRef.current = subscribedVideoLayoutRef.current;
-      subscribedVideoLayoutRef.current = undefined;
-    }
-  }, [hasJoinedCall]);
-
-  /**
-   * This effect updates the subscription either
-   * 1. when video tracks are published and was unpublished before
-   * 2. when the view's visibility changes
-   * 3. when call was rejoined
-   */
-  useEffect(() => {
-    if (!call || isLocalParticipant) {
-      return;
-    }
-    // NOTE: We only want to update the subscription if the pendingVideoLayoutRef is set
-    const updateIsNeeded = pendingVideoLayoutRef.current;
-    if (!updateIsNeeded || !isPublishingVideoTrack || !hasJoinedCall) {
-      return;
-    }
-
-    // NOTE: When the view is not visible, we want to subscribe to audio only.
-    // We unsubscribe their video by setting the dimension to undefined
-    const dimension = isVisible ? pendingVideoLayoutRef.current : undefined;
-    call.state.updateParticipantTracks(trackType, {
-      [sessionId]: {
-        dimension
-      }
-    });
-    call.dynascaleManager.applyTrackSubscriptions();
-    if (dimension) {
-      subscribedVideoLayoutRef.current = pendingVideoLayoutRef.current;
-      pendingVideoLayoutRef.current = undefined;
-    }
-  }, [call, isPublishingVideoTrack, trackType, isVisible, sessionId, hasJoinedCall, isLocalParticipant]);
-  useEffect(() => {
-    return () => {
-      subscribedVideoLayoutRef.current = undefined;
-      pendingVideoLayoutRef.current = undefined;
-    };
-  }, [trackType, sessionId]);
   const onLayout = event => {
-    if (!call || isLocalParticipant) {
-      return;
-    }
-    const dimension = {
-      width: Math.trunc(event.nativeEvent.layout.width),
-      height: Math.trunc(event.nativeEvent.layout.height)
-    };
-
-    // NOTE: If the participant hasn't published a video track yet,
-    // or the view is not viewable, we store the dimensions and handle it
-    // when the track is published or the video is enabled.
-    if (!isPublishingVideoTrack || !isVisible || !hasJoinedCall) {
-      pendingVideoLayoutRef.current = dimension;
-      return;
-    }
-
-    // NOTE: We don't want to update the subscription if the dimension hasn't changed
-    if (subscribedVideoLayoutRef.current?.width === dimension.width && subscribedVideoLayoutRef.current?.height === dimension.height) {
-      return;
-    }
-    call.state.updateParticipantTracks(trackType, {
-      [sessionId]: {
-        dimension
-      }
-    });
-    call.dynascaleManager.applyTrackSubscriptions();
-    subscribedVideoLayoutRef.current = dimension;
-    pendingVideoLayoutRef.current = undefined;
+    trackSubscriberRef.current?.onLayoutUpdate(event);
   };
   return /*#__PURE__*/React.createElement(View, {
     onLayout: onLayout,
     style: [styles.container, videoRenderer.container]
-  }, canShowVideo && videoStreamToRender && (objectFit || isVideoDimensionsValid) ? /*#__PURE__*/React.createElement(RTCView, {
+  }, call && !isLocalParticipant && /*#__PURE__*/React.createElement(TrackSubscriber, {
+    ref: trackSubscriberRef,
+    call: call,
+    participantSessionId: sessionId,
+    trackType: trackType,
+    isVisible: isVisible
+  }), canShowVideo && videoStreamToRender && (objectFit || isVideoDimensionsValid) ? /*#__PURE__*/React.createElement(RTCView, {
     style: [styles.videoStream, videoRenderer.videoStream],
     streamURL: videoStreamToRender.toURL(),
     mirror: mirror,
@@ -227,4 +154,4 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject
   }
 });
-//# sourceMappingURL=VideoRenderer.js.map
+//# sourceMappingURL=index.js.map

package/dist/module/components/Participant/ParticipantView/VideoRenderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","Platform","StyleSheet","View","RTCView","hasPausedTrack","hasScreenShare","hasVideo","VisibilityState","useCall","useCallStateHooks","ParticipantVideoFallback","DefaultParticipantVideoFallback","useTheme","useTrackDimensions","useScreenshotIosContext","TrackSubscriber","DEFAULT_VIEWPORT_VISIBILITY_STATE","videoTrack","UNKNOWN","screenShareTrack","VideoRenderer","trackType","participant","isVisible","objectFit","videoZOrder","theme","videoRenderer","call","useCameraState","useIncomingVideoSettings","trackSubscriberRef","isParticipantVideoEnabled","direction","viewRef","register","registerIosScreenshot","deregister","deregisterIosScreenshot","videoDimensions","isVideoDimensionsValid","width","height","isLocalParticipant","sessionId","viewportVisibilityState","videoStream","screenShareStream","isScreenSharing","isPublishingVideoTrack","videoStreamToRender","canShowVideo","OS","mirror","VISIBLE","state","updateParticipant","p","INVISIBLE","onLayout","event","current","onLayoutUpdate","createElement","style","styles","container","ref","participantSessionId","streamURL","toURL","zOrder","create","absoluteFillObject"],"sourceRoot":"../../../../../../src","sources":["components/Participant/ParticipantView/VideoRenderer/index.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/version.js

@@ -1,2 +1,2 @@
-export const version = '1.22.1-alpha.1';
+export const version = '1.22.1';
 //# sourceMappingURL=version.js.map

package/dist/module/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["version"],"sourceRoot":"../../src","sources":["version.ts"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,gBAAgB","ignoreList":[]}
+{"version":3,"names":["version"],"sourceRoot":"../../src","sources":["version.ts"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,QAAQ","ignoreList":[]}

package/dist/typescript/components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.d.ts

@@ -0,0 +1,25 @@
+import { LayoutChangeEvent } from 'react-native';
+import { Call, type VideoTrackType } from '@stream-io/video-client';
+export type TrackSubscriberHandle = {
+    onLayoutUpdate: (event: LayoutChangeEvent) => void;
+};
+type TrackSubscriberProps = {
+    participantSessionId: string;
+    call: Call;
+    trackType: VideoTrackType;
+    isVisible: boolean;
+};
+/**
+ * This component is used to subscribe to the video + audio track of the participant in the following cases:
+ * 1. When the participant starts publishing the video track
+ * 2. When the participant changes the video track dimensions
+ * 3. When the participant becomes visible
+ * 4. On joined callingState, this handles reconnection
+
+ * This component is used to unsubscribe to video track and subscribe only to the audio track of the participant (by passing undefined dimensions) in the following cases:
+ * 1. When the participant stops publishing the video track
+ * 2. When the participant becomes invisible
+*/
+declare const TrackSubscriber: import("react").ForwardRefExoticComponent<TrackSubscriberProps & import("react").RefAttributes<TrackSubscriberHandle>>;
+export default TrackSubscriber;
+//# sourceMappingURL=TrackSubscriber.d.ts.map

package/dist/typescript/components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackSubscriber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EACL,IAAI,EAKJ,KAAK,cAAc,EAEpB,MAAM,yBAAyB,CAAC;AASjC,MAAM,MAAM,qBAAqB,GAAG;IAClC,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;EAUE;AACF,QAAA,MAAM,eAAe,wHA+EpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/dist/typescript/components/Participant/ParticipantView/{VideoRenderer.d.ts → VideoRenderer/index.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ParticipantViewProps } from './ParticipantView';
+import type { ParticipantViewProps } from '../ParticipantView';
 /**
  * Props for the VideoRenderer component.
  */
@@ -10,4 +10,4 @@ export type VideoRendererProps = Pick<ParticipantViewProps, 'ParticipantVideoFal
  * It internally used `RTCView` to render video stream.
  */
 export declare const VideoRenderer: ({ trackType, participant, isVisible, ParticipantVideoFallback, objectFit, videoZOrder, }: VideoRendererProps) => React.JSX.Element;
-//# sourceMappingURL=VideoRenderer.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/components/Participant/ParticipantView/VideoRenderer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Participant/ParticipantView/VideoRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAuB/D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,EAClB,0BAA0B,GAC1B,WAAW,GACX,aAAa,GACb,WAAW,GACX,WAAW,GACX,aAAa,CAChB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,0FAO3B,kBAAkB,sBA6KpB,CAAC"}

package/dist/typescript/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "1.22.1-alpha.1";
+export declare const version = "1.22.1";
 //# sourceMappingURL=version.d.ts.map

package/dist/typescript/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,mBAAmB,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}

package/ios/StreamInCallManager.swift

@@ -19,7 +19,7 @@ enum DefaultAudioDevice {
 @objc(StreamInCallManager)
 class StreamInCallManager: RCTEventEmitter {
     
-    private let audioSessionQueue = DispatchQueue(label: "io.getstream.rn.audioSessionQueue", qos: .userInitiated)
+    private let audioSessionQueue = DispatchQueue(label: "io.getstream.rn.audioSessionQueue")
     
     private var audioManagerActivated = false
     private var callAudioRole: CallAudioRole = .communicator
@@ -142,7 +142,6 @@ class StreamInCallManager: RCTEventEmitter {
         
         if currentCategory != intendedCategory.rawValue || currentMode != intendedMode.rawValue || currentOptions != intendedOptions || !currentIsActive {
             session.lockForConfiguration()
-            defer { session.unlockForConfiguration() }
             do {
                 try session.setCategory(intendedCategory, mode: intendedMode, options: intendedOptions)
                 try session.setActive(true)
@@ -157,6 +156,7 @@ class StreamInCallManager: RCTEventEmitter {
                     log("configureAudioSession: Error setting mode: \(error.localizedDescription)")
                 }
             }
+            session.unlockForConfiguration()
         } else {
             log("configureAudioSession: no change needed")
         }