@livekit/react-native 2.6.4 → 2.7.0

package/README.md

@@ -89,6 +89,7 @@ In your [AppDelegate.m](https://github.com/livekit/client-sdk-react-native/blob/
 
 ```objc
 #import "LivekitReactNative.h"
+#import "WebRTCModuleOptions.h"
 
 @implementation AppDelegate
 
@@ -97,6 +98,12 @@ In your [AppDelegate.m](https://github.com/livekit/client-sdk-react-native/blob/
   // Place this above any other RN related initialization
   [LivekitReactNative setup];
 
+  // Uncomment the following lines if you want to use the camera in the background
+  // Requires voip background mode and iOS 18+.
+
+  // WebRTCModuleOptions *options = [WebRTCModuleOptions sharedInstance];
+  // options.enableMultitaskingCameraAccess = YES;
+
   //...
 }
 ```

package/android/src/main/java/com/livekit/reactnative/audio/processing/AudioRecordSamplesDispatcher.kt

@@ -21,13 +21,14 @@ import android.os.SystemClock
 import org.webrtc.AudioTrackSink
 import org.webrtc.audio.JavaAudioDeviceModule
 import java.nio.ByteBuffer
+import java.util.Collections
 
 /**
  * Dispatches recorded audio samples from the local microphone.
  */
 class AudioRecordSamplesDispatcher : JavaAudioDeviceModule.SamplesReadyCallback {
 
-    private val sinks = mutableSetOf<AudioTrackSink>()
+    private val sinks = Collections.synchronizedSet(mutableSetOf<AudioTrackSink>())
 
     @Synchronized
     fun registerSink(sink: AudioTrackSink) {

package/android/src/main/java/com/livekit/reactnative/audio/processing/AudioSinkManager.kt

@@ -5,13 +5,14 @@ import com.livekit.reactnative.LiveKitReactNative
 import com.oney.WebRTCModule.WebRTCModule
 import org.webrtc.AudioTrack
 import org.webrtc.AudioTrackSink
+import java.util.Collections
 import java.util.UUID
 
 private const val LOCAL_PC_ID = -1
 
 class AudioSinkManager(val reactContext: ReactContext) {
 
-    private val sinks = mutableMapOf<String, AudioTrackSink>()
+    private val sinks = Collections.synchronizedMap(mutableMapOf<String, AudioTrackSink>())
 
     /**
      * Registers a sink to this manager.
@@ -35,7 +36,12 @@ class AudioSinkManager(val reactContext: ReactContext) {
      * Unregisters a sink from this manager. Does not detach the sink from tracks.
      */
     fun unregisterSink(sink: AudioTrackSink) {
-        sinks.filterNot { entry -> entry.value == sink }
+        synchronized(sinks) {
+            val keysToRemove = sinks.filterValues { it == sink }.keys
+            for(key in keysToRemove) {
+                sinks.remove(key)
+            }
+        }
     }
 
     fun getSink(reactTag: String) = sinks[reactTag]

package/lib/commonjs/components/VideoTrack.js

@@ -29,13 +29,14 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @returns A React component that renders the given video track.
  * @public
  */
-const VideoTrack = ({
+const VideoTrack = exports.VideoTrack = /*#__PURE__*/(0, _react.forwardRef)(({
   style = {},
   trackRef,
   objectFit = 'cover',
   zOrder,
-  mirror
-}) => {
+  mirror,
+  iosPIP
+}, ref) => {
   const [elementInfo] = (0, _react.useState)(() => {
     var _trackRef$publication;
     let info = new VideoTrackElementInfo();
@@ -73,6 +74,32 @@ const VideoTrack = ({
       return () => {};
     }
   }, [videoTrack, elementInfo]);
+  let videoView;
+  if (!iosPIP || _reactNative.Platform.OS !== 'ios') {
+    videoView = /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCView, {
+      style: styles.videoTrack,
+      streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
+      objectFit: objectFit,
+      zOrder: zOrder,
+      mirror: mirror
+      // @ts-ignore
+      ,
+      ref: ref
+    });
+  } else {
+    videoView = /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCPIPView, {
+      style: styles.videoTrack,
+      streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
+      objectFit: objectFit,
+      zOrder: zOrder,
+      mirror: mirror
+      // TODO: fix this up in react-native-webrtc side.
+      // @ts-expect-error
+      ,
+      iosPIP: iosPIP,
+      ref: ref
+    });
+  }
   return /*#__PURE__*/React.createElement(_reactNative.View, {
     style: {
       ...style,
@@ -84,15 +111,8 @@ const VideoTrack = ({
     style: styles.videoTrack,
     disabled: !shouldObserveVisibility,
     propKey: videoTrack
-  }, /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCView, {
-    style: styles.videoTrack,
-    streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
-    objectFit: objectFit,
-    zOrder: zOrder,
-    mirror: mirror
-  })));
-};
-exports.VideoTrack = VideoTrack;
+  }, videoView));
+});
 const styles = _reactNative.StyleSheet.create({
   container: {},
   videoTrack: {

package/lib/commonjs/components/VideoTrack.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","React","_reactNative","_livekitClient","_reactNativeWebrtc","_ViewPortDetector","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_defineProperty","_toPropertyKey","value","enumerable","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","VideoTrack","style","trackRef","objectFit","zOrder","mirror","elementInfo","useState","_trackRef$publication","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","useCallback","event","onLayout","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","useMemo","RemoteVideoTrack","isAdaptiveStream","mediaStream","setMediaStream","useEffect","LocalVideoTrack","onRestarted","on","TrackEvent","Restarted","off","observeElementInfo","stopObservingElementInfo","createElement","View","styles","container","onChange","disabled","propKey","RTCView","streamURL","toURL","exports","StyleSheet","create","flex","width","constructor","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoTrack.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport { RTCView } from '@livekit/react-native-webrtc';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\n/**\n * Props for the VideoTrack component.\n * @public\n */\nexport type VideoTrackProps = {\n  /**\n   * The track reference to display. This should be a TrackReference object\n   * or undefined if no track is available.\n   */\n  trackRef: TrackReference | undefined;\n  /**\n   * Custom React Native styles for the video container.\n   */\n  style?: ViewStyle;\n  /**\n   * Specifies how the video content should be resized to fit its container.\n   * 'cover' (default): The video will fill the entire container, potentially cropping the video.\n   * 'contain': The entire video will be visible within the container, potentially leaving empty space.\n   */\n  objectFit?: 'cover' | 'contain' | undefined;\n  /**\n   * Indicates whether the video should be mirrored during rendering.\n   * This is commonly used for front-facing cameras.\n   */\n  mirror?: boolean;\n  /**\n   * Specifies the depth-stacking order of this video view in the stacking space of all video views.\n   * A larger zOrder value generally causes the view to cover those with lower values.\n   *\n   * The support for zOrder is platform-dependent and/or\n   * implementation-specific. Thus, specifying a value for zOrder is to be\n   * thought of as giving a hint rather than as imposing a requirement. For\n   * example, video renderers such as RTCView are commonly implemented using\n   * OpenGL and OpenGL views may have different numbers of layers in their\n   * stacking space. Android has three: a layer bellow the window (aka\n   * default), a layer bellow the window again but above the previous layer\n   * (aka media overlay), and above the window. Consequently, it is advisable\n   * to limit the number of utilized layers in the stacking space to the\n   * minimum sufficient for the desired display. For example, a video call\n   * application usually needs a maximum of two zOrder values: 0 for the\n   * remote video(s) which appear in the background, and 1 for the local\n   * video(s) which appear above the remote video(s).\n   */\n  zOrder?: number;\n};\n\n/**\n * VideoTrack component for displaying video tracks in a React Native application.\n * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.\n *\n * @param props - See VideoTrackProps for details.\n * @returns A React component that renders the given video track.\n * @public\n */\nexport const VideoTrack = ({\n  style = {},\n  trackRef,\n  objectFit = 'cover',\n  zOrder,\n  mirror,\n}: VideoTrackProps) => {\n  const [elementInfo] = useState(() => {\n    let info = new VideoTrackElementInfo();\n    info.id = trackRef?.publication?.trackSid;\n    return info;\n  });\n\n  const layoutOnChange = useCallback(\n    (event: LayoutChangeEvent) => elementInfo.onLayout(event),\n    [elementInfo]\n  );\n  const visibilityOnChange = useCallback(\n    (isVisible: boolean) => elementInfo.onVisibility(isVisible),\n    [elementInfo]\n  );\n\n  const videoTrack = trackRef?.publication.track;\n\n  const shouldObserveVisibility = useMemo(() => {\n    return (\n      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n    );\n  }, [videoTrack]);\n\n  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n  useEffect(() => {\n    setMediaStream(videoTrack?.mediaStream);\n    if (videoTrack instanceof LocalVideoTrack) {\n      const onRestarted = (track: Track | null) => {\n        setMediaStream(track?.mediaStream);\n      };\n      videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n      return () => {\n        videoTrack.off(TrackEvent.Restarted, onRestarted);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack]);\n\n  useEffect(() => {\n    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {\n      videoTrack?.observeElementInfo(elementInfo);\n      return () => {\n        videoTrack?.stopObservingElementInfo(elementInfo);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack, elementInfo]);\n\n  return (\n    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n      <ViewPortDetector\n        onChange={visibilityOnChange}\n        style={styles.videoTrack}\n        disabled={!shouldObserveVisibility}\n        propKey={videoTrack}\n      >\n        <RTCView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n        />\n      </ViewPortDetector>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoTrack: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoTrackElementInfo implements ElementInfo {\n  element: object = {};\n  something?: any;\n  id?: string;\n  _width = 0;\n  _height = 0;\n  _observing = false;\n  visible: boolean = true;\n  visibilityChangedAt: number | undefined;\n  pictureInPicture = false;\n  handleResize?: (() => void) | undefined;\n  handleVisibilityChanged?: (() => void) | undefined;\n  width = () => this._width;\n  height = () => this._height;\n\n  observe(): void {\n    this._observing = true;\n  }\n\n  stopObserving(): void {\n    this._observing = false;\n  }\n\n  onLayout(event: LayoutChangeEvent) {\n    let { width, height } = event.nativeEvent.layout;\n    this._width = width;\n    this._height = height;\n\n    if (this._observing) {\n      this.handleResize?.();\n    }\n  }\n\n  onVisibility(isVisible: boolean) {\n    if (this.visible !== isVisible) {\n      this.visible = isVisible;\n      this.visibilityChangedAt = Date.now();\n      if (this._observing) {\n        this.handleVisibilityChanged?.();\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA+B,IAAAC,KAAA,GAAAH,MAAA;AAE/B,IAAAI,YAAA,GAAAF,OAAA;AAMA,IAAAG,cAAA,GAAAH,OAAA;AAMA,IAAAI,kBAAA,GAAAJ,OAAA;AAGA,IAAAK,iBAAA,GAAAC,sBAAA,CAAAN,OAAA;AAAkD,SAAAM,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAAA,SAAAW,gBAAApB,CAAA,EAAAK,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAgB,cAAA,CAAAhB,CAAA,MAAAL,CAAA,GAAAY,MAAA,CAAAC,cAAA,CAAAb,CAAA,EAAAK,CAAA,IAAAiB,KAAA,EAAAhB,CAAA,EAAAiB,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAzB,CAAA,CAAAK,CAAA,IAAAC,CAAA,EAAAN,CAAA;AAAA,SAAAqB,eAAAf,CAAA,QAAAY,CAAA,GAAAQ,YAAA,CAAApB,CAAA,uCAAAY,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAQ,aAAApB,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAN,CAAA,GAAAM,CAAA,CAAAqB,MAAA,CAAAC,WAAA,kBAAA5B,CAAA,QAAAkB,CAAA,GAAAlB,CAAA,CAAAiB,IAAA,CAAAX,CAAA,EAAAD,CAAA,uCAAAa,CAAA,SAAAA,CAAA,YAAAW,SAAA,yEAAAxB,CAAA,GAAAyB,MAAA,GAAAC,MAAA,EAAAzB,CAAA;AAGlD;AACA;AACA;AACA;;AA2CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM0B,UAAU,GAAGA,CAAC;EACzBC,KAAK,GAAG,CAAC,CAAC;EACVC,QAAQ;EACRC,SAAS,GAAG,OAAO;EACnBC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAM,CAACC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAM;IAAA,IAAAC,qBAAA;IACnC,IAAIC,IAAI,GAAG,IAAIC,qBAAqB,CAAC,CAAC;IACtCD,IAAI,CAACE,EAAE,GAAGT,QAAQ,aAARA,QAAQ,gBAAAM,qBAAA,GAARN,QAAQ,CAAEU,WAAW,cAAAJ,qBAAA,uBAArBA,qBAAA,CAAuBK,QAAQ;IACzC,OAAOJ,IAAI;EACb,CAAC,CAAC;EAEF,MAAMK,cAAc,GAAG,IAAAC,kBAAW,EAC/BC,KAAwB,IAAKV,WAAW,CAACW,QAAQ,CAACD,KAAK,CAAC,EACzD,CAACV,WAAW,CACd,CAAC;EACD,MAAMY,kBAAkB,GAAG,IAAAH,kBAAW,EACnCI,SAAkB,IAAKb,WAAW,CAACc,YAAY,CAACD,SAAS,CAAC,EAC3D,CAACb,WAAW,CACd,CAAC;EAED,MAAMe,UAAU,GAAGnB,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEU,WAAW,CAACU,KAAK;EAE9C,MAAMC,uBAAuB,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC5C,OACEH,UAAU,YAAYI,+BAAgB,IAAIJ,UAAU,CAACK,gBAAgB;EAEzE,CAAC,EAAE,CAACL,UAAU,CAAC,CAAC;EAEhB,MAAM,CAACM,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAArB,eAAQ,EAACc,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEM,WAAW,CAAC;EACvE,IAAAE,gBAAS,EAAC,MAAM;IACdD,cAAc,CAACP,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEM,WAAW,CAAC;IACvC,IAAIN,UAAU,YAAYS,8BAAe,EAAE;MACzC,MAAMC,WAAW,GAAIT,KAAmB,IAAK;QAC3CM,cAAc,CAACN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK,WAAW,CAAC;MACpC,CAAC;MACDN,UAAU,CAACW,EAAE,CAACC,yBAAU,CAACC,SAAS,EAAEH,WAAW,CAAC;MAEhD,OAAO,MAAM;QACXV,UAAU,CAACc,GAAG,CAACF,yBAAU,CAACC,SAAS,EAAEH,WAAW,CAAC;MACnD,CAAC;IACH,CAAC,MAAM;MACL,OAAO,MAAM,CAAC,CAAC;IACjB;EACF,CAAC,EAAE,CAACV,UAAU,CAAC,CAAC;EAEhB,IAAAQ,gBAAS,EAAC,MAAM;IACd,IAAIR,UAAU,YAAYI,+BAAgB,IAAIJ,UAAU,CAACK,gBAAgB,EAAE;MACzEL,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEe,kBAAkB,CAAC9B,WAAW,CAAC;MAC3C,OAAO,MAAM;QACXe,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEgB,wBAAwB,CAAC/B,WAAW,CAAC;MACnD,CAAC;IACH,CAAC,MAAM;MACL,OAAO,MAAM,CAAC,CAAC;IACjB;EACF,CAAC,EAAE,CAACe,UAAU,EAAEf,WAAW,CAAC,CAAC;EAE7B,oBACE5C,KAAA,CAAA4E,aAAA,CAAC3E,YAAA,CAAA4E,IAAI;IAACtC,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAE,GAAGuC,MAAM,CAACC;IAAU,CAAE;IAACxB,QAAQ,EAAEH;EAAe,gBACvEpD,KAAA,CAAA4E,aAAA,CAACxE,iBAAA,CAAAI,OAAgB;IACfwE,QAAQ,EAAExB,kBAAmB;IAC7BjB,KAAK,EAAEuC,MAAM,CAACnB,UAAW;IACzBsB,QAAQ,EAAE,CAACpB,uBAAwB;IACnCqB,OAAO,EAAEvB;EAAW,gBAEpB3D,KAAA,CAAA4E,aAAA,CAACzE,kBAAA,CAAAgF,OAAO;IACN5C,KAAK,EAAEuC,MAAM,CAACnB,UAAW;IACzByB,SAAS,EAAE,CAAAnB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEoB,KAAK,CAAC,CAAC,KAAI,EAAG;IACtC5C,SAAS,EAAEA,SAAU;IACrBC,MAAM,EAAEA,MAAO;IACfC,MAAM,EAAEA;EAAO,CAChB,CACe,CACd,CAAC;AAEX,CAAC;AAAC2C,OAAA,CAAAhD,UAAA,GAAAA,UAAA;AAEF,MAAMwC,MAAM,GAAGS,uBAAU,CAACC,MAAM,CAAC;EAC/BT,SAAS,EAAE,CAAC,CAAC;EACbpB,UAAU,EAAE;IACV8B,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,MAAM1C,qBAAqB,CAAwB;EAAA2C,YAAA;IAAAjE,eAAA,kBAC/B,CAAC,CAAC;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA,iBAGX,CAAC;IAAAA,eAAA,kBACA,CAAC;IAAAA,eAAA,qBACE,KAAK;IAAAA,eAAA,kBACC,IAAI;IAAAA,eAAA;IAAAA,eAAA,2BAEJ,KAAK;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA,gBAGhB,MAAM,IAAI,CAACkE,MAAM;IAAAlE,eAAA,iBAChB,MAAM,IAAI,CAACmE,OAAO;EAAA;EAE3BC,OAAOA,CAAA,EAAS;IACd,IAAI,CAACC,UAAU,GAAG,IAAI;EACxB;EAEAC,aAAaA,CAAA,EAAS;IACpB,IAAI,CAACD,UAAU,GAAG,KAAK;EACzB;EAEAxC,QAAQA,CAACD,KAAwB,EAAE;IACjC,IAAI;MAAEoC,KAAK;MAAEO;IAAO,CAAC,GAAG3C,KAAK,CAAC4C,WAAW,CAACC,MAAM;IAChD,IAAI,CAACP,MAAM,GAAGF,KAAK;IACnB,IAAI,CAACG,OAAO,GAAGI,MAAM;IAErB,IAAI,IAAI,CAACF,UAAU,EAAE;MAAA,IAAAK,kBAAA;MACnB,CAAAA,kBAAA,OAAI,CAACC,YAAY,cAAAD,kBAAA,eAAjBA,kBAAA,CAAA7E,IAAA,KAAoB,CAAC;IACvB;EACF;EAEAmC,YAAYA,CAACD,SAAkB,EAAE;IAC/B,IAAI,IAAI,CAAC6C,OAAO,KAAK7C,SAAS,EAAE;MAC9B,IAAI,CAAC6C,OAAO,GAAG7C,SAAS;MACxB,IAAI,CAAC8C,mBAAmB,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC;MACrC,IAAI,IAAI,CAACV,UAAU,EAAE;QAAA,IAAAW,qBAAA;QACnB,CAAAA,qBAAA,OAAI,CAACC,uBAAuB,cAAAD,qBAAA,eAA5BA,qBAAA,CAAAnF,IAAA,KAA+B,CAAC;MAClC;IACF;EACF;AACF","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","React","_reactNative","_livekitClient","_reactNativeWebrtc","_ViewPortDetector","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_defineProperty","_toPropertyKey","value","enumerable","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","VideoTrack","exports","forwardRef","style","trackRef","objectFit","zOrder","mirror","iosPIP","ref","elementInfo","useState","_trackRef$publication","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","useCallback","event","onLayout","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","useMemo","RemoteVideoTrack","isAdaptiveStream","mediaStream","setMediaStream","useEffect","LocalVideoTrack","onRestarted","on","TrackEvent","Restarted","off","observeElementInfo","stopObservingElementInfo","videoView","Platform","OS","createElement","RTCView","styles","streamURL","toURL","RTCPIPView","View","container","onChange","disabled","propKey","StyleSheet","create","flex","width","constructor","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoTrack.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  Platform,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport {\n  RTCView,\n  RTCPIPView,\n  type RTCIOSPIPOptions,\n} from '@livekit/react-native-webrtc';\nimport {\n  Component,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\n/**\n * Props for the VideoTrack component.\n * @public\n */\nexport type VideoTrackProps = {\n  /**\n   * The track reference to display. This should be a TrackReference object\n   * or undefined if no track is available.\n   */\n  trackRef: TrackReference | undefined;\n  /**\n   * Custom React Native styles for the video container.\n   */\n  style?: ViewStyle;\n  /**\n   * Specifies how the video content should be resized to fit its container.\n   * 'cover' (default): The video will fill the entire container, potentially cropping the video.\n   * 'contain': The entire video will be visible within the container, potentially leaving empty space.\n   */\n  objectFit?: 'cover' | 'contain' | undefined;\n  /**\n   * Indicates whether the video should be mirrored during rendering.\n   * This is commonly used for front-facing cameras.\n   */\n  mirror?: boolean;\n  /**\n   * Specifies the depth-stacking order of this video view in the stacking space of all video views.\n   * A larger zOrder value generally causes the view to cover those with lower values.\n   *\n   * The support for zOrder is platform-dependent and/or\n   * implementation-specific. Thus, specifying a value for zOrder is to be\n   * thought of as giving a hint rather than as imposing a requirement. For\n   * example, video renderers such as RTCView are commonly implemented using\n   * OpenGL and OpenGL views may have different numbers of layers in their\n   * stacking space. Android has three: a layer bellow the window (aka\n   * default), a layer bellow the window again but above the previous layer\n   * (aka media overlay), and above the window. Consequently, it is advisable\n   * to limit the number of utilized layers in the stacking space to the\n   * minimum sufficient for the desired display. For example, a video call\n   * application usually needs a maximum of two zOrder values: 0 for the\n   * remote video(s) which appear in the background, and 1 for the local\n   * video(s) which appear above the remote video(s).\n   */\n  zOrder?: number;\n\n  /**\n   * Picture in picture options for this view. Disabled if not supplied.\n   *\n   * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability.\n   *\n   * If `iosPIP.enabled` is true, startIOSPIP and stopIOSPIP can be used to manually\n   * trigger the PIP mode. `iosPIP.startAutomatically` can be used to automatically\n   * enter PIP when backgrounding the app.\n   *\n   * @example\n   * ```tsx\n   * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';\n   *\n   * // Obtain a ref to the view\n   * const videoRef = useRef<Component>(null);\n   * const videoView = (\n   *   <VideoTrack\n   *      ref={videoRef}\n   *      iosPIP={{\n   *        enabled: true,\n   *        startAutomatically: true,\n   *        preferredSize: {\n   *          width: 800,\n   *          height: 800,\n   *        },\n   *      }}\n   *      ...\n   *   />\n   * );\n   *\n   * // Start/stop manually\n   * startIOSPIP(videoRef);\n   * stopIOSPIP(videoRef);\n   * ```\n   *\n   */\n  iosPIP?: RTCIOSPIPOptions & {\n    preferredSize: {\n      width: number;\n      height: number;\n    };\n    fallbackView?: ReactNode;\n  };\n};\n\n/**\n * VideoTrack component for displaying video tracks in a React Native application.\n * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.\n *\n * @param props - See VideoTrackProps for details.\n * @returns A React component that renders the given video track.\n * @public\n */\nexport const VideoTrack = forwardRef<Component, VideoTrackProps>(\n  (\n    {\n      style = {},\n      trackRef,\n      objectFit = 'cover',\n      zOrder,\n      mirror,\n      iosPIP,\n    }: VideoTrackProps,\n    ref\n  ) => {\n    const [elementInfo] = useState(() => {\n      let info = new VideoTrackElementInfo();\n      info.id = trackRef?.publication?.trackSid;\n      return info;\n    });\n\n    const layoutOnChange = useCallback(\n      (event: LayoutChangeEvent) => elementInfo.onLayout(event),\n      [elementInfo]\n    );\n    const visibilityOnChange = useCallback(\n      (isVisible: boolean) => elementInfo.onVisibility(isVisible),\n      [elementInfo]\n    );\n\n    const videoTrack = trackRef?.publication.track;\n\n    const shouldObserveVisibility = useMemo(() => {\n      return (\n        videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n      );\n    }, [videoTrack]);\n\n    const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n    useEffect(() => {\n      setMediaStream(videoTrack?.mediaStream);\n      if (videoTrack instanceof LocalVideoTrack) {\n        const onRestarted = (track: Track | null) => {\n          setMediaStream(track?.mediaStream);\n        };\n        videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n        return () => {\n          videoTrack.off(TrackEvent.Restarted, onRestarted);\n        };\n      } else {\n        return () => {};\n      }\n    }, [videoTrack]);\n\n    useEffect(() => {\n      if (\n        videoTrack instanceof RemoteVideoTrack &&\n        videoTrack.isAdaptiveStream\n      ) {\n        videoTrack?.observeElementInfo(elementInfo);\n        return () => {\n          videoTrack?.stopObservingElementInfo(elementInfo);\n        };\n      } else {\n        return () => {};\n      }\n    }, [videoTrack, elementInfo]);\n\n    let videoView;\n    if (!iosPIP || Platform.OS !== 'ios') {\n      videoView = (\n        <RTCView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n          // @ts-ignore\n          ref={ref}\n        />\n      );\n    } else {\n      videoView = (\n        <RTCPIPView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n          // TODO: fix this up in react-native-webrtc side.\n          // @ts-expect-error\n          iosPIP={iosPIP}\n          ref={ref}\n        />\n      );\n    }\n    return (\n      <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n        <ViewPortDetector\n          onChange={visibilityOnChange}\n          style={styles.videoTrack}\n          disabled={!shouldObserveVisibility}\n          propKey={videoTrack}\n        >\n          {videoView}\n        </ViewPortDetector>\n      </View>\n    );\n  }\n);\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoTrack: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoTrackElementInfo implements ElementInfo {\n  element: object = {};\n  something?: any;\n  id?: string;\n  _width = 0;\n  _height = 0;\n  _observing = false;\n  visible: boolean = true;\n  visibilityChangedAt: number | undefined;\n  pictureInPicture = false;\n  handleResize?: (() => void) | undefined;\n  handleVisibilityChanged?: (() => void) | undefined;\n  width = () => this._width;\n  height = () => this._height;\n\n  observe(): void {\n    this._observing = true;\n  }\n\n  stopObserving(): void {\n    this._observing = false;\n  }\n\n  onLayout(event: LayoutChangeEvent) {\n    let { width, height } = event.nativeEvent.layout;\n    this._width = width;\n    this._height = height;\n\n    if (this._observing) {\n      this.handleResize?.();\n    }\n  }\n\n  onVisibility(isVisible: boolean) {\n    if (this.visible !== isVisible) {\n      this.visible = isVisible;\n      this.visibilityChangedAt = Date.now();\n      if (this._observing) {\n        this.handleVisibilityChanged?.();\n      }\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/hooks/useMultibandTrackVolume.js

@@ -27,7 +27,7 @@ const multibandDefaults = {
  * @param trackOrTrackReference
  * @returns A number array containing the volume for each frequency band.
  */
-function useMultibandTrackVolume(trackOrTrackReference, options = {}) {
+function useMultibandTrackVolume(trackOrTrackReference, options) {
   var _trackOrTrackReferenc;
   const track = trackOrTrackReference instanceof _livekitClient.Track ? trackOrTrackReference : trackOrTrackReference === null || trackOrTrackReference === void 0 || (_trackOrTrackReferenc = trackOrTrackReference.publication) === null || _trackOrTrackReferenc === void 0 ? void 0 : _trackOrTrackReferenc.track;
   const opts = (0, _react.useMemo)(() => {
@@ -35,30 +35,35 @@ function useMultibandTrackVolume(trackOrTrackReference, options = {}) {
       ...multibandDefaults,
       ...options
     };
-  }, [options]);
+
+    // disabled due to use of JSON.stringify, dependencies are reference equality
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(options)]);
   const mediaStreamTrack = track === null || track === void 0 ? void 0 : track.mediaStreamTrack;
+  const hasMediaStreamTrack = mediaStreamTrack != null;
+  const peerConnectionId = (mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack.peerConnectionId) ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack.id;
   let [magnitudes, setMagnitudes] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
     let listener = Object();
     let reactTag = null;
-    if (mediaStreamTrack) {
-      reactTag = _LKNativeModule.default.createMultibandVolumeProcessor(opts, mediaStreamTrack._peerConnectionId ?? -1, mediaStreamTrack.id);
+    if (hasMediaStreamTrack) {
+      reactTag = _LKNativeModule.default.createMultibandVolumeProcessor(opts, peerConnectionId, mediaStreamTrackId);
       (0, _EventEmitter.addListener)(listener, 'LK_MULTIBAND_PROCESSED', event => {
         if (event.magnitudes && reactTag && event.id === reactTag) {
-          console.log('event received: ', event.magnitudes[0]);
           setMagnitudes(event.magnitudes);
         }
       });
     }
     return () => {
-      if (mediaStreamTrack) {
+      if (hasMediaStreamTrack) {
         (0, _EventEmitter.removeListener)(listener);
         if (reactTag) {
-          _LKNativeModule.default.deleteMultibandVolumeProcessor(reactTag, mediaStreamTrack._peerConnectionId ?? -1, mediaStreamTrack.id);
+          _LKNativeModule.default.deleteMultibandVolumeProcessor(reactTag, peerConnectionId, mediaStreamTrackId);
         }
       }
     };
-  }, [mediaStreamTrack, opts]);
+  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId, opts]);
   return magnitudes;
 }
 //# sourceMappingURL=useMultibandTrackVolume.js.map

package/lib/commonjs/hooks/useMultibandTrackVolume.js.map

@@ -1 +1 @@
-{"version":3,"names":["_livekitClient","require","_react","_EventEmitter","_LKNativeModule","_interopRequireDefault","e","__esModule","default","multibandDefaults","bands","minFrequency","maxFrequency","updateInterval","useMultibandTrackVolume","trackOrTrackReference","options","_trackOrTrackReferenc","track","Track","publication","opts","useMemo","mediaStreamTrack","magnitudes","setMagnitudes","useState","useEffect","listener","Object","reactTag","LiveKitModule","createMultibandVolumeProcessor","_peerConnectionId","id","addListener","event","console","log","removeListener","deleteMultibandVolumeProcessor"],"sources":["useMultibandTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useMemo, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * Interface for configuring options for the useMultibandTrackVolume hook.\n * @alpha\n */\nexport interface MultiBandTrackVolumeOptions {\n  /**\n   * the number of bands to split the audio into\n   */\n  bands?: number;\n  /**\n   * cut off frequency on the lower end\n   */\n  minFrequency?: number;\n  /**\n   * cut off frequency on the higher end\n   */\n  maxFrequency?: number;\n  /**\n   * update should run every x ms\n   */\n  updateInterval?: number;\n}\n\nconst multibandDefaults = {\n  bands: 5,\n  minFrequency: 1000,\n  maxFrequency: 8000,\n  updateInterval: 40,\n} as const satisfies MultiBandTrackVolumeOptions;\n\n/**\n * A hook for tracking the volume of an audio track across multiple frequency bands.\n *\n * @param trackOrTrackReference\n * @returns A number array containing the volume for each frequency band.\n */\nexport function useMultibandTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder,\n  options: MultiBandTrackVolumeOptions = {}\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n  const opts = useMemo(() => {\n    return { ...multibandDefaults, ...options };\n  }, [options]);\n  const mediaStreamTrack = track?.mediaStreamTrack;\n\n  let [magnitudes, setMagnitudes] = useState<number[]>([]);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (mediaStreamTrack) {\n      reactTag = LiveKitModule.createMultibandVolumeProcessor(\n        opts,\n        mediaStreamTrack._peerConnectionId ?? -1,\n        mediaStreamTrack.id\n      );\n      addListener(listener, 'LK_MULTIBAND_PROCESSED', (event: any) => {\n        if (event.magnitudes && reactTag && event.id === reactTag) {\n          console.log('event received: ', event.magnitudes[0]);\n          setMagnitudes(event.magnitudes);\n        }\n      });\n    }\n    return () => {\n      if (mediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteMultibandVolumeProcessor(\n            reactTag,\n            mediaStreamTrack._peerConnectionId ?? -1,\n            mediaStreamTrack.id\n          );\n        }\n      }\n    };\n  }, [mediaStreamTrack, opts]);\n\n  return magnitudes;\n}\n"],"mappings":";;;;;;AACA,IAAAA,cAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA8C,SAAAI,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9C;AACA;AACA;AACA;;AAoBA,MAAMG,iBAAiB,GAAG;EACxBC,KAAK,EAAE,CAAC;EACRC,YAAY,EAAE,IAAI;EAClBC,YAAY,EAAE,IAAI;EAClBC,cAAc,EAAE;AAClB,CAAgD;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,uBAAuBA,CACrCC,qBAG+B,EAC/BC,OAAoC,GAAG,CAAC,CAAC,EACzC;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTH,qBAAqB,YAAYI,oBAAK,GAClCJ,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAE,qBAAA,GAArBF,qBAAqB,CAAEK,WAAW,cAAAH,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EACP,MAAMG,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB,OAAO;MAAE,GAAGb,iBAAiB;MAAE,GAAGO;IAAQ,CAAC;EAC7C,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EACb,MAAMO,gBAAgB,GAAGL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK,gBAAgB;EAEhD,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAW,EAAE,CAAC;EACxD,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIC,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIP,gBAAgB,EAAE;MACpBO,QAAQ,GAAGC,uBAAa,CAACC,8BAA8B,CACrDX,IAAI,EACJE,gBAAgB,CAACU,iBAAiB,IAAI,CAAC,CAAC,EACxCV,gBAAgB,CAACW,EACnB,CAAC;MACD,IAAAC,yBAAW,EAACP,QAAQ,EAAE,wBAAwB,EAAGQ,KAAU,IAAK;QAC9D,IAAIA,KAAK,CAACZ,UAAU,IAAIM,QAAQ,IAAIM,KAAK,CAACF,EAAE,KAAKJ,QAAQ,EAAE;UACzDO,OAAO,CAACC,GAAG,CAAC,kBAAkB,EAAEF,KAAK,CAACZ,UAAU,CAAC,CAAC,CAAC,CAAC;UACpDC,aAAa,CAACW,KAAK,CAACZ,UAAU,CAAC;QACjC;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAID,gBAAgB,EAAE;QACpB,IAAAgB,4BAAc,EAACX,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZC,uBAAa,CAACS,8BAA8B,CAC1CV,QAAQ,EACRP,gBAAgB,CAACU,iBAAiB,IAAI,CAAC,CAAC,EACxCV,gBAAgB,CAACW,EACnB,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACX,gBAAgB,EAAEF,IAAI,CAAC,CAAC;EAE5B,OAAOG,UAAU;AACnB","ignoreList":[]}
+{"version":3,"names":["_livekitClient","require","_react","_EventEmitter","_LKNativeModule","_interopRequireDefault","e","__esModule","default","multibandDefaults","bands","minFrequency","maxFrequency","updateInterval","useMultibandTrackVolume","trackOrTrackReference","options","_trackOrTrackReferenc","track","Track","publication","opts","useMemo","JSON","stringify","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","mediaStreamTrackId","id","magnitudes","setMagnitudes","useState","useEffect","listener","Object","reactTag","LiveKitModule","createMultibandVolumeProcessor","addListener","event","removeListener","deleteMultibandVolumeProcessor"],"sources":["useMultibandTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useMemo, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * Interface for configuring options for the useMultibandTrackVolume hook.\n * @alpha\n */\nexport interface MultiBandTrackVolumeOptions {\n  /**\n   * the number of bands to split the audio into\n   */\n  bands?: number;\n  /**\n   * cut off frequency on the lower end\n   */\n  minFrequency?: number;\n  /**\n   * cut off frequency on the higher end\n   */\n  maxFrequency?: number;\n  /**\n   * update should run every x ms\n   */\n  updateInterval?: number;\n}\n\nconst multibandDefaults = {\n  bands: 5,\n  minFrequency: 1000,\n  maxFrequency: 8000,\n  updateInterval: 40,\n} as const satisfies MultiBandTrackVolumeOptions;\n\n/**\n * A hook for tracking the volume of an audio track across multiple frequency bands.\n *\n * @param trackOrTrackReference\n * @returns A number array containing the volume for each frequency band.\n */\nexport function useMultibandTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder,\n  options?: MultiBandTrackVolumeOptions\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n  const opts = useMemo(() => {\n    return { ...multibandDefaults, ...options };\n\n    // disabled due to use of JSON.stringify, dependencies are reference equality\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(options)]);\n  const mediaStreamTrack = track?.mediaStreamTrack;\n  const hasMediaStreamTrack = mediaStreamTrack != null;\n  const peerConnectionId = mediaStreamTrack?.peerConnectionId ?? -1;\n  const mediaStreamTrackId = mediaStreamTrack?.id;\n\n  let [magnitudes, setMagnitudes] = useState<number[]>([]);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (hasMediaStreamTrack) {\n      reactTag = LiveKitModule.createMultibandVolumeProcessor(\n        opts,\n        peerConnectionId,\n        mediaStreamTrackId\n      );\n      addListener(listener, 'LK_MULTIBAND_PROCESSED', (event: any) => {\n        if (event.magnitudes && reactTag && event.id === reactTag) {\n          setMagnitudes(event.magnitudes);\n        }\n      });\n    }\n    return () => {\n      if (hasMediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteMultibandVolumeProcessor(\n            reactTag,\n            peerConnectionId,\n            mediaStreamTrackId\n          );\n        }\n      }\n    };\n  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId, opts]);\n\n  return magnitudes;\n}\n"],"mappings":";;;;;;AACA,IAAAA,cAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA8C,SAAAI,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9C;AACA;AACA;AACA;;AAoBA,MAAMG,iBAAiB,GAAG;EACxBC,KAAK,EAAE,CAAC;EACRC,YAAY,EAAE,IAAI;EAClBC,YAAY,EAAE,IAAI;EAClBC,cAAc,EAAE;AAClB,CAAgD;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,uBAAuBA,CACrCC,qBAG+B,EAC/BC,OAAqC,EACrC;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTH,qBAAqB,YAAYI,oBAAK,GAClCJ,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAE,qBAAA,GAArBF,qBAAqB,CAAEK,WAAW,cAAAH,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EACP,MAAMG,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB,OAAO;MAAE,GAAGb,iBAAiB;MAAE,GAAGO;IAAQ,CAAC;;IAE3C;IACA;EACF,CAAC,EAAE,CAACO,IAAI,CAACC,SAAS,CAACR,OAAO,CAAC,CAAC,CAAC;EAC7B,MAAMS,gBAAgB,GAAGP,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEO,gBAAgB;EAChD,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAG,CAAAF,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEE,gBAAgB,KAAI,CAAC,CAAC;EACjE,MAAMC,kBAAkB,GAAGH,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEI,EAAE;EAE/C,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAW,EAAE,CAAC;EACxD,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIC,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIV,mBAAmB,EAAE;MACvBU,QAAQ,GAAGC,uBAAa,CAACC,8BAA8B,CACrDjB,IAAI,EACJM,gBAAgB,EAChBC,kBACF,CAAC;MACD,IAAAW,yBAAW,EAACL,QAAQ,EAAE,wBAAwB,EAAGM,KAAU,IAAK;QAC9D,IAAIA,KAAK,CAACV,UAAU,IAAIM,QAAQ,IAAII,KAAK,CAACX,EAAE,KAAKO,QAAQ,EAAE;UACzDL,aAAa,CAACS,KAAK,CAACV,UAAU,CAAC;QACjC;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAIJ,mBAAmB,EAAE;QACvB,IAAAe,4BAAc,EAACP,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZC,uBAAa,CAACK,8BAA8B,CAC1CN,QAAQ,EACRT,gBAAgB,EAChBC,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACF,mBAAmB,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEP,IAAI,CAAC,CAAC;EAErE,OAAOS,UAAU;AACnB","ignoreList":[]}

package/lib/commonjs/hooks/useTrackVolume.js

@@ -19,12 +19,15 @@ function useTrackVolume(trackOrTrackReference) {
   var _trackOrTrackReferenc;
   const track = trackOrTrackReference instanceof _livekitClient.Track ? trackOrTrackReference : trackOrTrackReference === null || trackOrTrackReference === void 0 || (_trackOrTrackReferenc = trackOrTrackReference.publication) === null || _trackOrTrackReferenc === void 0 ? void 0 : _trackOrTrackReferenc.track;
   const mediaStreamTrack = track === null || track === void 0 ? void 0 : track.mediaStreamTrack;
+  const hasMediaStreamTrack = mediaStreamTrack != null;
+  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack.id;
   let [volume, setVolume] = (0, _react.useState)(0.0);
   (0, _react.useEffect)(() => {
     let listener = Object();
     let reactTag = null;
-    if (mediaStreamTrack) {
-      reactTag = _LKNativeModule.default.createVolumeProcessor(mediaStreamTrack._peerConnectionId ?? -1, mediaStreamTrack.id);
+    if (hasMediaStreamTrack) {
+      reactTag = _LKNativeModule.default.createVolumeProcessor(peerConnectionId, mediaStreamTrackId);
       (0, _EventEmitter.addListener)(listener, 'LK_VOLUME_PROCESSED', event => {
         if (event.volume && reactTag && event.id === reactTag) {
           setVolume(event.volume);
@@ -32,14 +35,14 @@ function useTrackVolume(trackOrTrackReference) {
       });
     }
     return () => {
-      if (mediaStreamTrack) {
+      if (hasMediaStreamTrack) {
         (0, _EventEmitter.removeListener)(listener);
         if (reactTag) {
-          _LKNativeModule.default.deleteVolumeProcessor(reactTag, mediaStreamTrack._peerConnectionId ?? -1, mediaStreamTrack.id);
+          _LKNativeModule.default.deleteVolumeProcessor(reactTag, peerConnectionId, mediaStreamTrackId);
         }
       }
     };
-  }, [mediaStreamTrack]);
+  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);
   return volume;
 }
 //# sourceMappingURL=useTrackVolume.js.map

package/lib/commonjs/hooks/useTrackVolume.js.map

@@ -1 +1 @@
-{"version":3,"names":["_livekitClient","require","_react","_EventEmitter","_LKNativeModule","_interopRequireDefault","e","__esModule","default","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","Track","publication","mediaStreamTrack","volume","setVolume","useState","useEffect","listener","Object","reactTag","LiveKitModule","createVolumeProcessor","_peerConnectionId","id","addListener","event","removeListener","deleteVolumeProcessor"],"sources":["useTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * A hook for tracking the volume of an audio track.\n *\n * @param trackOrTrackReference\n * @returns A number between 0-1 representing the volume.\n */\nexport function useTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n\n  const mediaStreamTrack = track?.mediaStreamTrack;\n\n  let [volume, setVolume] = useState(0.0);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (mediaStreamTrack) {\n      reactTag = LiveKitModule.createVolumeProcessor(\n        mediaStreamTrack._peerConnectionId ?? -1,\n        mediaStreamTrack.id\n      );\n      addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {\n        if (event.volume && reactTag && event.id === reactTag) {\n          setVolume(event.volume);\n        }\n      });\n    }\n    return () => {\n      if (mediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteVolumeProcessor(\n            reactTag,\n            mediaStreamTrack._peerConnectionId ?? -1,\n            mediaStreamTrack.id\n          );\n        }\n      }\n    };\n  }, [mediaStreamTrack]);\n\n  return volume;\n}\n"],"mappings":";;;;;;AACA,IAAAA,cAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA8C,SAAAI,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9C;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,cAAcA,CAC5BC,qBAG+B,EAC/B;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTF,qBAAqB,YAAYG,oBAAK,GAClCH,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAC,qBAAA,GAArBD,qBAAqB,CAAEI,WAAW,cAAAH,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EAEP,MAAMG,gBAAgB,GAAGH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,gBAAgB;EAEhD,IAAI,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAC,GAAG,CAAC;EACvC,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIC,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIP,gBAAgB,EAAE;MACpBO,QAAQ,GAAGC,uBAAa,CAACC,qBAAqB,CAC5CT,gBAAgB,CAACU,iBAAiB,IAAI,CAAC,CAAC,EACxCV,gBAAgB,CAACW,EACnB,CAAC;MACD,IAAAC,yBAAW,EAACP,QAAQ,EAAE,qBAAqB,EAAGQ,KAAU,IAAK;QAC3D,IAAIA,KAAK,CAACZ,MAAM,IAAIM,QAAQ,IAAIM,KAAK,CAACF,EAAE,KAAKJ,QAAQ,EAAE;UACrDL,SAAS,CAACW,KAAK,CAACZ,MAAM,CAAC;QACzB;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAID,gBAAgB,EAAE;QACpB,IAAAc,4BAAc,EAACT,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZC,uBAAa,CAACO,qBAAqB,CACjCR,QAAQ,EACRP,gBAAgB,CAACU,iBAAiB,IAAI,CAAC,CAAC,EACxCV,gBAAgB,CAACW,EACnB,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACX,gBAAgB,CAAC,CAAC;EAEtB,OAAOC,MAAM;AACf","ignoreList":[]}
+{"version":3,"names":["_livekitClient","require","_react","_EventEmitter","_LKNativeModule","_interopRequireDefault","e","__esModule","default","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","Track","publication","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","mediaStreamTrackId","id","volume","setVolume","useState","useEffect","listener","Object","reactTag","LiveKitModule","createVolumeProcessor","addListener","event","removeListener","deleteVolumeProcessor"],"sources":["useTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * A hook for tracking the volume of an audio track.\n *\n * @param trackOrTrackReference\n * @returns A number between 0-1 representing the volume.\n */\nexport function useTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n\n  const mediaStreamTrack = track?.mediaStreamTrack;\n  const hasMediaStreamTrack = mediaStreamTrack != null;\n  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;\n  const mediaStreamTrackId = mediaStreamTrack.id;\n\n  let [volume, setVolume] = useState(0.0);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (hasMediaStreamTrack) {\n      reactTag = LiveKitModule.createVolumeProcessor(\n        peerConnectionId,\n        mediaStreamTrackId\n      );\n      addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {\n        if (event.volume && reactTag && event.id === reactTag) {\n          setVolume(event.volume);\n        }\n      });\n    }\n    return () => {\n      if (hasMediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteVolumeProcessor(\n            reactTag,\n            peerConnectionId,\n            mediaStreamTrackId\n          );\n        }\n      }\n    };\n  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);\n\n  return volume;\n}\n"],"mappings":";;;;;;AACA,IAAAA,cAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA8C,SAAAI,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9C;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,cAAcA,CAC5BC,qBAG+B,EAC/B;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTF,qBAAqB,YAAYG,oBAAK,GAClCH,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAC,qBAAA,GAArBD,qBAAqB,CAAEI,WAAW,cAAAH,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EAEP,MAAMG,gBAAgB,GAAGH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,gBAAgB;EAChD,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAGF,gBAAgB,CAACE,gBAAgB,IAAI,CAAC,CAAC;EAChE,MAAMC,kBAAkB,GAAGH,gBAAgB,CAACI,EAAE;EAE9C,IAAI,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAC,GAAG,CAAC;EACvC,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIC,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIV,mBAAmB,EAAE;MACvBU,QAAQ,GAAGC,uBAAa,CAACC,qBAAqB,CAC5CX,gBAAgB,EAChBC,kBACF,CAAC;MACD,IAAAW,yBAAW,EAACL,QAAQ,EAAE,qBAAqB,EAAGM,KAAU,IAAK;QAC3D,IAAIA,KAAK,CAACV,MAAM,IAAIM,QAAQ,IAAII,KAAK,CAACX,EAAE,KAAKO,QAAQ,EAAE;UACrDL,SAAS,CAACS,KAAK,CAACV,MAAM,CAAC;QACzB;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAIJ,mBAAmB,EAAE;QACvB,IAAAe,4BAAc,EAACP,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZC,uBAAa,CAACK,qBAAqB,CACjCN,QAAQ,EACRT,gBAAgB,EAChBC,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACF,mBAAmB,EAAEC,gBAAgB,EAAEC,kBAAkB,CAAC,CAAC;EAE/D,OAAOE,MAAM;AACf","ignoreList":[]}

package/lib/module/components/VideoTrack.js

@@ -2,10 +2,10 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { LocalVideoTrack, TrackEvent } from 'livekit-client';
-import { RTCView } from '@livekit/react-native-webrtc';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { RTCView, RTCPIPView } from '@livekit/react-native-webrtc';
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 
@@ -22,13 +22,14 @@ import ViewPortDetector from './ViewPortDetector';
  * @returns A React component that renders the given video track.
  * @public
  */
-export const VideoTrack = ({
+export const VideoTrack = /*#__PURE__*/forwardRef(({
   style = {},
   trackRef,
   objectFit = 'cover',
   zOrder,
-  mirror
-}) => {
+  mirror,
+  iosPIP
+}, ref) => {
   const [elementInfo] = useState(() => {
     var _trackRef$publication;
     let info = new VideoTrackElementInfo();
@@ -66,6 +67,32 @@ export const VideoTrack = ({
       return () => {};
     }
   }, [videoTrack, elementInfo]);
+  let videoView;
+  if (!iosPIP || Platform.OS !== 'ios') {
+    videoView = /*#__PURE__*/React.createElement(RTCView, {
+      style: styles.videoTrack,
+      streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
+      objectFit: objectFit,
+      zOrder: zOrder,
+      mirror: mirror
+      // @ts-ignore
+      ,
+      ref: ref
+    });
+  } else {
+    videoView = /*#__PURE__*/React.createElement(RTCPIPView, {
+      style: styles.videoTrack,
+      streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
+      objectFit: objectFit,
+      zOrder: zOrder,
+      mirror: mirror
+      // TODO: fix this up in react-native-webrtc side.
+      // @ts-expect-error
+      ,
+      iosPIP: iosPIP,
+      ref: ref
+    });
+  }
   return /*#__PURE__*/React.createElement(View, {
     style: {
       ...style,
@@ -77,14 +104,8 @@ export const VideoTrack = ({
     style: styles.videoTrack,
     disabled: !shouldObserveVisibility,
     propKey: videoTrack
-  }, /*#__PURE__*/React.createElement(RTCView, {
-    style: styles.videoTrack,
-    streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
-    objectFit: objectFit,
-    zOrder: zOrder,
-    mirror: mirror
-  })));
-};
+  }, videoView));
+});
 const styles = StyleSheet.create({
   container: {},
   videoTrack: {

package/lib/module/components/VideoTrack.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","LocalVideoTrack","TrackEvent","RTCView","useCallback","useEffect","useMemo","useState","RemoteVideoTrack","ViewPortDetector","VideoTrack","style","trackRef","objectFit","zOrder","mirror","elementInfo","_trackRef$publication","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","event","onLayout","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","isAdaptiveStream","mediaStream","setMediaStream","onRestarted","on","Restarted","off","observeElementInfo","stopObservingElementInfo","createElement","styles","container","onChange","disabled","propKey","streamURL","toURL","create","flex","width","constructor","_defineProperty","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","call","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoTrack.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport { RTCView } from '@livekit/react-native-webrtc';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\n/**\n * Props for the VideoTrack component.\n * @public\n */\nexport type VideoTrackProps = {\n  /**\n   * The track reference to display. This should be a TrackReference object\n   * or undefined if no track is available.\n   */\n  trackRef: TrackReference | undefined;\n  /**\n   * Custom React Native styles for the video container.\n   */\n  style?: ViewStyle;\n  /**\n   * Specifies how the video content should be resized to fit its container.\n   * 'cover' (default): The video will fill the entire container, potentially cropping the video.\n   * 'contain': The entire video will be visible within the container, potentially leaving empty space.\n   */\n  objectFit?: 'cover' | 'contain' | undefined;\n  /**\n   * Indicates whether the video should be mirrored during rendering.\n   * This is commonly used for front-facing cameras.\n   */\n  mirror?: boolean;\n  /**\n   * Specifies the depth-stacking order of this video view in the stacking space of all video views.\n   * A larger zOrder value generally causes the view to cover those with lower values.\n   *\n   * The support for zOrder is platform-dependent and/or\n   * implementation-specific. Thus, specifying a value for zOrder is to be\n   * thought of as giving a hint rather than as imposing a requirement. For\n   * example, video renderers such as RTCView are commonly implemented using\n   * OpenGL and OpenGL views may have different numbers of layers in their\n   * stacking space. Android has three: a layer bellow the window (aka\n   * default), a layer bellow the window again but above the previous layer\n   * (aka media overlay), and above the window. Consequently, it is advisable\n   * to limit the number of utilized layers in the stacking space to the\n   * minimum sufficient for the desired display. For example, a video call\n   * application usually needs a maximum of two zOrder values: 0 for the\n   * remote video(s) which appear in the background, and 1 for the local\n   * video(s) which appear above the remote video(s).\n   */\n  zOrder?: number;\n};\n\n/**\n * VideoTrack component for displaying video tracks in a React Native application.\n * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.\n *\n * @param props - See VideoTrackProps for details.\n * @returns A React component that renders the given video track.\n * @public\n */\nexport const VideoTrack = ({\n  style = {},\n  trackRef,\n  objectFit = 'cover',\n  zOrder,\n  mirror,\n}: VideoTrackProps) => {\n  const [elementInfo] = useState(() => {\n    let info = new VideoTrackElementInfo();\n    info.id = trackRef?.publication?.trackSid;\n    return info;\n  });\n\n  const layoutOnChange = useCallback(\n    (event: LayoutChangeEvent) => elementInfo.onLayout(event),\n    [elementInfo]\n  );\n  const visibilityOnChange = useCallback(\n    (isVisible: boolean) => elementInfo.onVisibility(isVisible),\n    [elementInfo]\n  );\n\n  const videoTrack = trackRef?.publication.track;\n\n  const shouldObserveVisibility = useMemo(() => {\n    return (\n      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n    );\n  }, [videoTrack]);\n\n  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n  useEffect(() => {\n    setMediaStream(videoTrack?.mediaStream);\n    if (videoTrack instanceof LocalVideoTrack) {\n      const onRestarted = (track: Track | null) => {\n        setMediaStream(track?.mediaStream);\n      };\n      videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n      return () => {\n        videoTrack.off(TrackEvent.Restarted, onRestarted);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack]);\n\n  useEffect(() => {\n    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {\n      videoTrack?.observeElementInfo(elementInfo);\n      return () => {\n        videoTrack?.stopObservingElementInfo(elementInfo);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack, elementInfo]);\n\n  return (\n    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n      <ViewPortDetector\n        onChange={visibilityOnChange}\n        style={styles.videoTrack}\n        disabled={!shouldObserveVisibility}\n        propKey={videoTrack}\n      >\n        <RTCView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n        />\n      </ViewPortDetector>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoTrack: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoTrackElementInfo implements ElementInfo {\n  element: object = {};\n  something?: any;\n  id?: string;\n  _width = 0;\n  _height = 0;\n  _observing = false;\n  visible: boolean = true;\n  visibilityChangedAt: number | undefined;\n  pictureInPicture = false;\n  handleResize?: (() => void) | undefined;\n  handleVisibilityChanged?: (() => void) | undefined;\n  width = () => this._width;\n  height = () => this._height;\n\n  observe(): void {\n    this._observing = true;\n  }\n\n  stopObserving(): void {\n    this._observing = false;\n  }\n\n  onLayout(event: LayoutChangeEvent) {\n    let { width, height } = event.nativeEvent.layout;\n    this._width = width;\n    this._height = height;\n\n    if (this._observing) {\n      this.handleResize?.();\n    }\n  }\n\n  onVisibility(isVisible: boolean) {\n    if (this.visible !== isVisible) {\n      this.visible = isVisible;\n      this.visibilityChangedAt = Date.now();\n      if (this._observing) {\n        this.handleVisibilityChanged?.();\n      }\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Platform","StyleSheet","View","LocalVideoTrack","TrackEvent","RTCView","RTCPIPView","forwardRef","useCallback","useEffect","useMemo","useState","RemoteVideoTrack","ViewPortDetector","VideoTrack","style","trackRef","objectFit","zOrder","mirror","iosPIP","ref","elementInfo","_trackRef$publication","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","event","onLayout","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","isAdaptiveStream","mediaStream","setMediaStream","onRestarted","on","Restarted","off","observeElementInfo","stopObservingElementInfo","videoView","OS","createElement","styles","streamURL","toURL","container","onChange","disabled","propKey","create","flex","width","constructor","_defineProperty","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","call","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoTrack.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  Platform,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport {\n  RTCView,\n  RTCPIPView,\n  type RTCIOSPIPOptions,\n} from '@livekit/react-native-webrtc';\nimport {\n  Component,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\n/**\n * Props for the VideoTrack component.\n * @public\n */\nexport type VideoTrackProps = {\n  /**\n   * The track reference to display. This should be a TrackReference object\n   * or undefined if no track is available.\n   */\n  trackRef: TrackReference | undefined;\n  /**\n   * Custom React Native styles for the video container.\n   */\n  style?: ViewStyle;\n  /**\n   * Specifies how the video content should be resized to fit its container.\n   * 'cover' (default): The video will fill the entire container, potentially cropping the video.\n   * 'contain': The entire video will be visible within the container, potentially leaving empty space.\n   */\n  objectFit?: 'cover' | 'contain' | undefined;\n  /**\n   * Indicates whether the video should be mirrored during rendering.\n   * This is commonly used for front-facing cameras.\n   */\n  mirror?: boolean;\n  /**\n   * Specifies the depth-stacking order of this video view in the stacking space of all video views.\n   * A larger zOrder value generally causes the view to cover those with lower values.\n   *\n   * The support for zOrder is platform-dependent and/or\n   * implementation-specific. Thus, specifying a value for zOrder is to be\n   * thought of as giving a hint rather than as imposing a requirement. For\n   * example, video renderers such as RTCView are commonly implemented using\n   * OpenGL and OpenGL views may have different numbers of layers in their\n   * stacking space. Android has three: a layer bellow the window (aka\n   * default), a layer bellow the window again but above the previous layer\n   * (aka media overlay), and above the window. Consequently, it is advisable\n   * to limit the number of utilized layers in the stacking space to the\n   * minimum sufficient for the desired display. For example, a video call\n   * application usually needs a maximum of two zOrder values: 0 for the\n   * remote video(s) which appear in the background, and 1 for the local\n   * video(s) which appear above the remote video(s).\n   */\n  zOrder?: number;\n\n  /**\n   * Picture in picture options for this view. Disabled if not supplied.\n   *\n   * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability.\n   *\n   * If `iosPIP.enabled` is true, startIOSPIP and stopIOSPIP can be used to manually\n   * trigger the PIP mode. `iosPIP.startAutomatically` can be used to automatically\n   * enter PIP when backgrounding the app.\n   *\n   * @example\n   * ```tsx\n   * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';\n   *\n   * // Obtain a ref to the view\n   * const videoRef = useRef<Component>(null);\n   * const videoView = (\n   *   <VideoTrack\n   *      ref={videoRef}\n   *      iosPIP={{\n   *        enabled: true,\n   *        startAutomatically: true,\n   *        preferredSize: {\n   *          width: 800,\n   *          height: 800,\n   *        },\n   *      }}\n   *      ...\n   *   />\n   * );\n   *\n   * // Start/stop manually\n   * startIOSPIP(videoRef);\n   * stopIOSPIP(videoRef);\n   * ```\n   *\n   */\n  iosPIP?: RTCIOSPIPOptions & {\n    preferredSize: {\n      width: number;\n      height: number;\n    };\n    fallbackView?: ReactNode;\n  };\n};\n\n/**\n * VideoTrack component for displaying video tracks in a React Native application.\n * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.\n *\n * @param props - See VideoTrackProps for details.\n * @returns A React component that renders the given video track.\n * @public\n */\nexport const VideoTrack = forwardRef<Component, VideoTrackProps>(\n  (\n    {\n      style = {},\n      trackRef,\n      objectFit = 'cover',\n      zOrder,\n      mirror,\n      iosPIP,\n    }: VideoTrackProps,\n    ref\n  ) => {\n    const [elementInfo] = useState(() => {\n      let info = new VideoTrackElementInfo();\n      info.id = trackRef?.publication?.trackSid;\n      return info;\n    });\n\n    const layoutOnChange = useCallback(\n      (event: LayoutChangeEvent) => elementInfo.onLayout(event),\n      [elementInfo]\n    );\n    const visibilityOnChange = useCallback(\n      (isVisible: boolean) => elementInfo.onVisibility(isVisible),\n      [elementInfo]\n    );\n\n    const videoTrack = trackRef?.publication.track;\n\n    const shouldObserveVisibility = useMemo(() => {\n      return (\n        videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n      );\n    }, [videoTrack]);\n\n    const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n    useEffect(() => {\n      setMediaStream(videoTrack?.mediaStream);\n      if (videoTrack instanceof LocalVideoTrack) {\n        const onRestarted = (track: Track | null) => {\n          setMediaStream(track?.mediaStream);\n        };\n        videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n        return () => {\n          videoTrack.off(TrackEvent.Restarted, onRestarted);\n        };\n      } else {\n        return () => {};\n      }\n    }, [videoTrack]);\n\n    useEffect(() => {\n      if (\n        videoTrack instanceof RemoteVideoTrack &&\n        videoTrack.isAdaptiveStream\n      ) {\n        videoTrack?.observeElementInfo(elementInfo);\n        return () => {\n          videoTrack?.stopObservingElementInfo(elementInfo);\n        };\n      } else {\n        return () => {};\n      }\n    }, [videoTrack, elementInfo]);\n\n    let videoView;\n    if (!iosPIP || Platform.OS !== 'ios') {\n      videoView = (\n        <RTCView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n          // @ts-ignore\n          ref={ref}\n        />\n      );\n    } else {\n      videoView = (\n        <RTCPIPView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n          // TODO: fix this up in react-native-webrtc side.\n          // @ts-expect-error\n          iosPIP={iosPIP}\n          ref={ref}\n        />\n      );\n    }\n    return (\n      <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n        <ViewPortDetector\n          onChange={visibilityOnChange}\n          style={styles.videoTrack}\n          disabled={!shouldObserveVisibility}\n          propKey={videoTrack}\n        >\n          {videoView}\n        </ViewPortDetector>\n      </View>\n    );\n  }\n);\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoTrack: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoTrackElementInfo implements ElementInfo {\n  element: object = {};\n  something?: any;\n  id?: string;\n  _width = 0;\n  _height = 0;\n  _observing = false;\n  visible: boolean = true;\n  visibilityChangedAt: number | undefined;\n  pictureInPicture = false;\n  handleResize?: (() => void) | undefined;\n  handleVisibilityChanged?: (() => void) | undefined;\n  width = () => this._width;\n  height = () => this._height;\n\n  observe(): void {\n    this._observing = true;\n  }\n\n  stopObserving(): void {\n    this._observing = false;\n  }\n\n  onLayout(event: LayoutChangeEvent) {\n    let { width, height } = event.nativeEvent.layout;\n    this._width = width;\n    this._height = height;\n\n    if (this._observing) {\n      this.handleResize?.();\n    }\n  }\n\n  onVisibility(isVisible: boolean) {\n    if (this.visible !== isVisible) {\n      this.visible = isVisible;\n      this.visibilityChangedAt = Date.now();\n      if (this._observing) {\n        this.handleVisibilityChanged?.();\n      }\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/module/hooks/useMultibandTrackVolume.js

@@ -21,7 +21,7 @@ const multibandDefaults = {
  * @param trackOrTrackReference
  * @returns A number array containing the volume for each frequency band.
  */
-export function useMultibandTrackVolume(trackOrTrackReference, options = {}) {
+export function useMultibandTrackVolume(trackOrTrackReference, options) {
   var _trackOrTrackReferenc;
   const track = trackOrTrackReference instanceof Track ? trackOrTrackReference : trackOrTrackReference === null || trackOrTrackReference === void 0 || (_trackOrTrackReferenc = trackOrTrackReference.publication) === null || _trackOrTrackReferenc === void 0 ? void 0 : _trackOrTrackReferenc.track;
   const opts = useMemo(() => {
@@ -29,30 +29,35 @@ export function useMultibandTrackVolume(trackOrTrackReference, options = {}) {
       ...multibandDefaults,
       ...options
     };
-  }, [options]);
+
+    // disabled due to use of JSON.stringify, dependencies are reference equality
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(options)]);
   const mediaStreamTrack = track === null || track === void 0 ? void 0 : track.mediaStreamTrack;
+  const hasMediaStreamTrack = mediaStreamTrack != null;
+  const peerConnectionId = (mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack.peerConnectionId) ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack.id;
   let [magnitudes, setMagnitudes] = useState([]);
   useEffect(() => {
     let listener = Object();
     let reactTag = null;
-    if (mediaStreamTrack) {
-      reactTag = LiveKitModule.createMultibandVolumeProcessor(opts, mediaStreamTrack._peerConnectionId ?? -1, mediaStreamTrack.id);
+    if (hasMediaStreamTrack) {
+      reactTag = LiveKitModule.createMultibandVolumeProcessor(opts, peerConnectionId, mediaStreamTrackId);
       addListener(listener, 'LK_MULTIBAND_PROCESSED', event => {
         if (event.magnitudes && reactTag && event.id === reactTag) {
-          console.log('event received: ', event.magnitudes[0]);
           setMagnitudes(event.magnitudes);
         }
       });
     }
     return () => {
-      if (mediaStreamTrack) {
+      if (hasMediaStreamTrack) {
         removeListener(listener);
         if (reactTag) {
-          LiveKitModule.deleteMultibandVolumeProcessor(reactTag, mediaStreamTrack._peerConnectionId ?? -1, mediaStreamTrack.id);
+          LiveKitModule.deleteMultibandVolumeProcessor(reactTag, peerConnectionId, mediaStreamTrackId);
         }
       }
     };
-  }, [mediaStreamTrack, opts]);
+  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId, opts]);
   return magnitudes;
 }
 //# sourceMappingURL=useMultibandTrackVolume.js.map

package/lib/module/hooks/useMultibandTrackVolume.js.map

@@ -1 +1 @@
-{"version":3,"names":["Track","useEffect","useMemo","useState","addListener","removeListener","LiveKitModule","multibandDefaults","bands","minFrequency","maxFrequency","updateInterval","useMultibandTrackVolume","trackOrTrackReference","options","_trackOrTrackReferenc","track","publication","opts","mediaStreamTrack","magnitudes","setMagnitudes","listener","Object","reactTag","createMultibandVolumeProcessor","_peerConnectionId","id","event","console","log","deleteMultibandVolumeProcessor"],"sources":["useMultibandTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useMemo, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * Interface for configuring options for the useMultibandTrackVolume hook.\n * @alpha\n */\nexport interface MultiBandTrackVolumeOptions {\n  /**\n   * the number of bands to split the audio into\n   */\n  bands?: number;\n  /**\n   * cut off frequency on the lower end\n   */\n  minFrequency?: number;\n  /**\n   * cut off frequency on the higher end\n   */\n  maxFrequency?: number;\n  /**\n   * update should run every x ms\n   */\n  updateInterval?: number;\n}\n\nconst multibandDefaults = {\n  bands: 5,\n  minFrequency: 1000,\n  maxFrequency: 8000,\n  updateInterval: 40,\n} as const satisfies MultiBandTrackVolumeOptions;\n\n/**\n * A hook for tracking the volume of an audio track across multiple frequency bands.\n *\n * @param trackOrTrackReference\n * @returns A number array containing the volume for each frequency band.\n */\nexport function useMultibandTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder,\n  options: MultiBandTrackVolumeOptions = {}\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n  const opts = useMemo(() => {\n    return { ...multibandDefaults, ...options };\n  }, [options]);\n  const mediaStreamTrack = track?.mediaStreamTrack;\n\n  let [magnitudes, setMagnitudes] = useState<number[]>([]);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (mediaStreamTrack) {\n      reactTag = LiveKitModule.createMultibandVolumeProcessor(\n        opts,\n        mediaStreamTrack._peerConnectionId ?? -1,\n        mediaStreamTrack.id\n      );\n      addListener(listener, 'LK_MULTIBAND_PROCESSED', (event: any) => {\n        if (event.magnitudes && reactTag && event.id === reactTag) {\n          console.log('event received: ', event.magnitudes[0]);\n          setMagnitudes(event.magnitudes);\n        }\n      });\n    }\n    return () => {\n      if (mediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteMultibandVolumeProcessor(\n            reactTag,\n            mediaStreamTrack._peerConnectionId ?? -1,\n            mediaStreamTrack.id\n          );\n        }\n      }\n    };\n  }, [mediaStreamTrack, opts]);\n\n  return magnitudes;\n}\n"],"mappings":"AACA,SACEA,KAAK,QAGA,gBAAgB;AACvB,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,WAAW,EAAEC,cAAc,QAAQ,wBAAwB;AACpE,OAAOC,aAAa,MAAM,mBAAmB;;AAE7C;AACA;AACA;AACA;;AAoBA,MAAMC,iBAAiB,GAAG;EACxBC,KAAK,EAAE,CAAC;EACRC,YAAY,EAAE,IAAI;EAClBC,YAAY,EAAE,IAAI;EAClBC,cAAc,EAAE;AAClB,CAAgD;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,uBAAuBA,CACrCC,qBAG+B,EAC/BC,OAAoC,GAAG,CAAC,CAAC,EACzC;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTH,qBAAqB,YAAYb,KAAK,GAClCa,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAE,qBAAA,GAArBF,qBAAqB,CAAEI,WAAW,cAAAF,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EACP,MAAME,IAAI,GAAGhB,OAAO,CAAC,MAAM;IACzB,OAAO;MAAE,GAAGK,iBAAiB;MAAE,GAAGO;IAAQ,CAAC;EAC7C,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EACb,MAAMK,gBAAgB,GAAGH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,gBAAgB;EAEhD,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGlB,QAAQ,CAAW,EAAE,CAAC;EACxDF,SAAS,CAAC,MAAM;IACd,IAAIqB,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIL,gBAAgB,EAAE;MACpBK,QAAQ,GAAGlB,aAAa,CAACmB,8BAA8B,CACrDP,IAAI,EACJC,gBAAgB,CAACO,iBAAiB,IAAI,CAAC,CAAC,EACxCP,gBAAgB,CAACQ,EACnB,CAAC;MACDvB,WAAW,CAACkB,QAAQ,EAAE,wBAAwB,EAAGM,KAAU,IAAK;QAC9D,IAAIA,KAAK,CAACR,UAAU,IAAII,QAAQ,IAAII,KAAK,CAACD,EAAE,KAAKH,QAAQ,EAAE;UACzDK,OAAO,CAACC,GAAG,CAAC,kBAAkB,EAAEF,KAAK,CAACR,UAAU,CAAC,CAAC,CAAC,CAAC;UACpDC,aAAa,CAACO,KAAK,CAACR,UAAU,CAAC;QACjC;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAID,gBAAgB,EAAE;QACpBd,cAAc,CAACiB,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZlB,aAAa,CAACyB,8BAA8B,CAC1CP,QAAQ,EACRL,gBAAgB,CAACO,iBAAiB,IAAI,CAAC,CAAC,EACxCP,gBAAgB,CAACQ,EACnB,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACR,gBAAgB,EAAED,IAAI,CAAC,CAAC;EAE5B,OAAOE,UAAU;AACnB","ignoreList":[]}
+{"version":3,"names":["Track","useEffect","useMemo","useState","addListener","removeListener","LiveKitModule","multibandDefaults","bands","minFrequency","maxFrequency","updateInterval","useMultibandTrackVolume","trackOrTrackReference","options","_trackOrTrackReferenc","track","publication","opts","JSON","stringify","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","mediaStreamTrackId","id","magnitudes","setMagnitudes","listener","Object","reactTag","createMultibandVolumeProcessor","event","deleteMultibandVolumeProcessor"],"sources":["useMultibandTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useMemo, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * Interface for configuring options for the useMultibandTrackVolume hook.\n * @alpha\n */\nexport interface MultiBandTrackVolumeOptions {\n  /**\n   * the number of bands to split the audio into\n   */\n  bands?: number;\n  /**\n   * cut off frequency on the lower end\n   */\n  minFrequency?: number;\n  /**\n   * cut off frequency on the higher end\n   */\n  maxFrequency?: number;\n  /**\n   * update should run every x ms\n   */\n  updateInterval?: number;\n}\n\nconst multibandDefaults = {\n  bands: 5,\n  minFrequency: 1000,\n  maxFrequency: 8000,\n  updateInterval: 40,\n} as const satisfies MultiBandTrackVolumeOptions;\n\n/**\n * A hook for tracking the volume of an audio track across multiple frequency bands.\n *\n * @param trackOrTrackReference\n * @returns A number array containing the volume for each frequency band.\n */\nexport function useMultibandTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder,\n  options?: MultiBandTrackVolumeOptions\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n  const opts = useMemo(() => {\n    return { ...multibandDefaults, ...options };\n\n    // disabled due to use of JSON.stringify, dependencies are reference equality\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(options)]);\n  const mediaStreamTrack = track?.mediaStreamTrack;\n  const hasMediaStreamTrack = mediaStreamTrack != null;\n  const peerConnectionId = mediaStreamTrack?.peerConnectionId ?? -1;\n  const mediaStreamTrackId = mediaStreamTrack?.id;\n\n  let [magnitudes, setMagnitudes] = useState<number[]>([]);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (hasMediaStreamTrack) {\n      reactTag = LiveKitModule.createMultibandVolumeProcessor(\n        opts,\n        peerConnectionId,\n        mediaStreamTrackId\n      );\n      addListener(listener, 'LK_MULTIBAND_PROCESSED', (event: any) => {\n        if (event.magnitudes && reactTag && event.id === reactTag) {\n          setMagnitudes(event.magnitudes);\n        }\n      });\n    }\n    return () => {\n      if (hasMediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteMultibandVolumeProcessor(\n            reactTag,\n            peerConnectionId,\n            mediaStreamTrackId\n          );\n        }\n      }\n    };\n  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId, opts]);\n\n  return magnitudes;\n}\n"],"mappings":"AACA,SACEA,KAAK,QAGA,gBAAgB;AACvB,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,WAAW,EAAEC,cAAc,QAAQ,wBAAwB;AACpE,OAAOC,aAAa,MAAM,mBAAmB;;AAE7C;AACA;AACA;AACA;;AAoBA,MAAMC,iBAAiB,GAAG;EACxBC,KAAK,EAAE,CAAC;EACRC,YAAY,EAAE,IAAI;EAClBC,YAAY,EAAE,IAAI;EAClBC,cAAc,EAAE;AAClB,CAAgD;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,uBAAuBA,CACrCC,qBAG+B,EAC/BC,OAAqC,EACrC;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTH,qBAAqB,YAAYb,KAAK,GAClCa,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAE,qBAAA,GAArBF,qBAAqB,CAAEI,WAAW,cAAAF,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EACP,MAAME,IAAI,GAAGhB,OAAO,CAAC,MAAM;IACzB,OAAO;MAAE,GAAGK,iBAAiB;MAAE,GAAGO;IAAQ,CAAC;;IAE3C;IACA;EACF,CAAC,EAAE,CAACK,IAAI,CAACC,SAAS,CAACN,OAAO,CAAC,CAAC,CAAC;EAC7B,MAAMO,gBAAgB,GAAGL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK,gBAAgB;EAChD,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAG,CAAAF,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEE,gBAAgB,KAAI,CAAC,CAAC;EACjE,MAAMC,kBAAkB,GAAGH,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEI,EAAE;EAE/C,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGxB,QAAQ,CAAW,EAAE,CAAC;EACxDF,SAAS,CAAC,MAAM;IACd,IAAI2B,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIR,mBAAmB,EAAE;MACvBQ,QAAQ,GAAGxB,aAAa,CAACyB,8BAA8B,CACrDb,IAAI,EACJK,gBAAgB,EAChBC,kBACF,CAAC;MACDpB,WAAW,CAACwB,QAAQ,EAAE,wBAAwB,EAAGI,KAAU,IAAK;QAC9D,IAAIA,KAAK,CAACN,UAAU,IAAII,QAAQ,IAAIE,KAAK,CAACP,EAAE,KAAKK,QAAQ,EAAE;UACzDH,aAAa,CAACK,KAAK,CAACN,UAAU,CAAC;QACjC;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAIJ,mBAAmB,EAAE;QACvBjB,cAAc,CAACuB,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZxB,aAAa,CAAC2B,8BAA8B,CAC1CH,QAAQ,EACRP,gBAAgB,EAChBC,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACF,mBAAmB,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEN,IAAI,CAAC,CAAC;EAErE,OAAOQ,UAAU;AACnB","ignoreList":[]}

package/lib/module/hooks/useTrackVolume.js

@@ -13,12 +13,15 @@ export function useTrackVolume(trackOrTrackReference) {
   var _trackOrTrackReferenc;
   const track = trackOrTrackReference instanceof Track ? trackOrTrackReference : trackOrTrackReference === null || trackOrTrackReference === void 0 || (_trackOrTrackReferenc = trackOrTrackReference.publication) === null || _trackOrTrackReferenc === void 0 ? void 0 : _trackOrTrackReferenc.track;
   const mediaStreamTrack = track === null || track === void 0 ? void 0 : track.mediaStreamTrack;
+  const hasMediaStreamTrack = mediaStreamTrack != null;
+  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack.id;
   let [volume, setVolume] = useState(0.0);
   useEffect(() => {
     let listener = Object();
     let reactTag = null;
-    if (mediaStreamTrack) {
-      reactTag = LiveKitModule.createVolumeProcessor(mediaStreamTrack._peerConnectionId ?? -1, mediaStreamTrack.id);
+    if (hasMediaStreamTrack) {
+      reactTag = LiveKitModule.createVolumeProcessor(peerConnectionId, mediaStreamTrackId);
       addListener(listener, 'LK_VOLUME_PROCESSED', event => {
         if (event.volume && reactTag && event.id === reactTag) {
           setVolume(event.volume);
@@ -26,14 +29,14 @@ export function useTrackVolume(trackOrTrackReference) {
       });
     }
     return () => {
-      if (mediaStreamTrack) {
+      if (hasMediaStreamTrack) {
         removeListener(listener);
         if (reactTag) {
-          LiveKitModule.deleteVolumeProcessor(reactTag, mediaStreamTrack._peerConnectionId ?? -1, mediaStreamTrack.id);
+          LiveKitModule.deleteVolumeProcessor(reactTag, peerConnectionId, mediaStreamTrackId);
         }
       }
     };
-  }, [mediaStreamTrack]);
+  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);
   return volume;
 }
 //# sourceMappingURL=useTrackVolume.js.map

package/lib/module/hooks/useTrackVolume.js.map

@@ -1 +1 @@
-{"version":3,"names":["Track","useEffect","useState","addListener","removeListener","LiveKitModule","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","publication","mediaStreamTrack","volume","setVolume","listener","Object","reactTag","createVolumeProcessor","_peerConnectionId","id","event","deleteVolumeProcessor"],"sources":["useTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * A hook for tracking the volume of an audio track.\n *\n * @param trackOrTrackReference\n * @returns A number between 0-1 representing the volume.\n */\nexport function useTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n\n  const mediaStreamTrack = track?.mediaStreamTrack;\n\n  let [volume, setVolume] = useState(0.0);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (mediaStreamTrack) {\n      reactTag = LiveKitModule.createVolumeProcessor(\n        mediaStreamTrack._peerConnectionId ?? -1,\n        mediaStreamTrack.id\n      );\n      addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {\n        if (event.volume && reactTag && event.id === reactTag) {\n          setVolume(event.volume);\n        }\n      });\n    }\n    return () => {\n      if (mediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteVolumeProcessor(\n            reactTag,\n            mediaStreamTrack._peerConnectionId ?? -1,\n            mediaStreamTrack.id\n          );\n        }\n      }\n    };\n  }, [mediaStreamTrack]);\n\n  return volume;\n}\n"],"mappings":"AACA,SACEA,KAAK,QAGA,gBAAgB;AACvB,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,WAAW,EAAEC,cAAc,QAAQ,wBAAwB;AACpE,OAAOC,aAAa,MAAM,mBAAmB;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAC5BC,qBAG+B,EAC/B;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTF,qBAAqB,YAAYP,KAAK,GAClCO,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAC,qBAAA,GAArBD,qBAAqB,CAAEG,WAAW,cAAAF,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EAEP,MAAME,gBAAgB,GAAGF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,gBAAgB;EAEhD,IAAI,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGX,QAAQ,CAAC,GAAG,CAAC;EACvCD,SAAS,CAAC,MAAM;IACd,IAAIa,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIL,gBAAgB,EAAE;MACpBK,QAAQ,GAAGX,aAAa,CAACY,qBAAqB,CAC5CN,gBAAgB,CAACO,iBAAiB,IAAI,CAAC,CAAC,EACxCP,gBAAgB,CAACQ,EACnB,CAAC;MACDhB,WAAW,CAACW,QAAQ,EAAE,qBAAqB,EAAGM,KAAU,IAAK;QAC3D,IAAIA,KAAK,CAACR,MAAM,IAAII,QAAQ,IAAII,KAAK,CAACD,EAAE,KAAKH,QAAQ,EAAE;UACrDH,SAAS,CAACO,KAAK,CAACR,MAAM,CAAC;QACzB;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAID,gBAAgB,EAAE;QACpBP,cAAc,CAACU,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZX,aAAa,CAACgB,qBAAqB,CACjCL,QAAQ,EACRL,gBAAgB,CAACO,iBAAiB,IAAI,CAAC,CAAC,EACxCP,gBAAgB,CAACQ,EACnB,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACR,gBAAgB,CAAC,CAAC;EAEtB,OAAOC,MAAM;AACf","ignoreList":[]}
+{"version":3,"names":["Track","useEffect","useState","addListener","removeListener","LiveKitModule","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","publication","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","mediaStreamTrackId","id","volume","setVolume","listener","Object","reactTag","createVolumeProcessor","event","deleteVolumeProcessor"],"sources":["useTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * A hook for tracking the volume of an audio track.\n *\n * @param trackOrTrackReference\n * @returns A number between 0-1 representing the volume.\n */\nexport function useTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n\n  const mediaStreamTrack = track?.mediaStreamTrack;\n  const hasMediaStreamTrack = mediaStreamTrack != null;\n  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;\n  const mediaStreamTrackId = mediaStreamTrack.id;\n\n  let [volume, setVolume] = useState(0.0);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (hasMediaStreamTrack) {\n      reactTag = LiveKitModule.createVolumeProcessor(\n        peerConnectionId,\n        mediaStreamTrackId\n      );\n      addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {\n        if (event.volume && reactTag && event.id === reactTag) {\n          setVolume(event.volume);\n        }\n      });\n    }\n    return () => {\n      if (hasMediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteVolumeProcessor(\n            reactTag,\n            peerConnectionId,\n            mediaStreamTrackId\n          );\n        }\n      }\n    };\n  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);\n\n  return volume;\n}\n"],"mappings":"AACA,SACEA,KAAK,QAGA,gBAAgB;AACvB,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,WAAW,EAAEC,cAAc,QAAQ,wBAAwB;AACpE,OAAOC,aAAa,MAAM,mBAAmB;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAC5BC,qBAG+B,EAC/B;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTF,qBAAqB,YAAYP,KAAK,GAClCO,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAC,qBAAA,GAArBD,qBAAqB,CAAEG,WAAW,cAAAF,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EAEP,MAAME,gBAAgB,GAAGF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,gBAAgB;EAChD,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAGF,gBAAgB,CAACE,gBAAgB,IAAI,CAAC,CAAC;EAChE,MAAMC,kBAAkB,GAAGH,gBAAgB,CAACI,EAAE;EAE9C,IAAI,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGf,QAAQ,CAAC,GAAG,CAAC;EACvCD,SAAS,CAAC,MAAM;IACd,IAAIiB,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIR,mBAAmB,EAAE;MACvBQ,QAAQ,GAAGf,aAAa,CAACgB,qBAAqB,CAC5CR,gBAAgB,EAChBC,kBACF,CAAC;MACDX,WAAW,CAACe,QAAQ,EAAE,qBAAqB,EAAGI,KAAU,IAAK;QAC3D,IAAIA,KAAK,CAACN,MAAM,IAAII,QAAQ,IAAIE,KAAK,CAACP,EAAE,KAAKK,QAAQ,EAAE;UACrDH,SAAS,CAACK,KAAK,CAACN,MAAM,CAAC;QACzB;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAIJ,mBAAmB,EAAE;QACvBR,cAAc,CAACc,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZf,aAAa,CAACkB,qBAAqB,CACjCH,QAAQ,EACRP,gBAAgB,EAChBC,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACF,mBAAmB,EAAEC,gBAAgB,EAAEC,kBAAkB,CAAC,CAAC;EAE/D,OAAOE,MAAM;AACf","ignoreList":[]}

package/lib/typescript/lib/commonjs/components/VideoTrack.d.ts

@@ -1,20 +1,2 @@
 export const __esModule: boolean;
-/**
- * Props for the VideoTrack component.
- * @public
- */
-/**
- * VideoTrack component for displaying video tracks in a React Native application.
- * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.
- *
- * @param props - See VideoTrackProps for details.
- * @returns A React component that renders the given video track.
- * @public
- */
-export function VideoTrack({ style, trackRef, objectFit, zOrder, mirror }: {
-    style?: {} | undefined;
-    trackRef: any;
-    objectFit?: string | undefined;
-    zOrder: any;
-    mirror: any;
-}): any;
+export const VideoTrack: any;

package/lib/typescript/lib/commonjs/hooks/useMultibandTrackVolume.d.ts

@@ -5,4 +5,4 @@ export const __esModule: boolean;
  * @param trackOrTrackReference
  * @returns A number array containing the volume for each frequency band.
  */
-export function useMultibandTrackVolume(trackOrTrackReference: any, options?: {}): any;
+export function useMultibandTrackVolume(trackOrTrackReference: any, options: any): any;

package/lib/typescript/lib/module/components/VideoTrack.d.ts

@@ -1,9 +1,14 @@
-export function VideoTrack({ style, trackRef, objectFit, zOrder, mirror }: {
-    style?: {} | undefined;
-    trackRef: any;
-    objectFit?: string | undefined;
-    zOrder: any;
-    mirror: any;
-}): React.CElement<import("react-native").ViewProps, View>;
-import { View } from 'react-native';
+/**
+ * Props for the VideoTrack component.
+ * @public
+ */
+/**
+ * VideoTrack component for displaying video tracks in a React Native application.
+ * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.
+ *
+ * @param props - See VideoTrackProps for details.
+ * @returns A React component that renders the given video track.
+ * @public
+ */
+export const VideoTrack: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import * as React from 'react';

package/lib/typescript/lib/module/hooks/useMultibandTrackVolume.d.ts

@@ -4,4 +4,4 @@
  * @param trackOrTrackReference
  * @returns A number array containing the volume for each frequency band.
  */
-export function useMultibandTrackVolume(trackOrTrackReference: any, options?: {}): never[];
+export function useMultibandTrackVolume(trackOrTrackReference: any, options: any): never[];

package/lib/typescript/src/components/VideoTrack.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { type ViewStyle } from 'react-native';
+import { type RTCIOSPIPOptions } from '@livekit/react-native-webrtc';
+import { type ReactNode } from 'react';
 import type { TrackReference } from '@livekit/components-react';
 /**
  * Props for the VideoTrack component.
@@ -45,6 +47,49 @@ export type VideoTrackProps = {
      * video(s) which appear above the remote video(s).
      */
     zOrder?: number;
+    /**
+     * Picture in picture options for this view. Disabled if not supplied.
+     *
+     * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability.
+     *
+     * If `iosPIP.enabled` is true, startIOSPIP and stopIOSPIP can be used to manually
+     * trigger the PIP mode. `iosPIP.startAutomatically` can be used to automatically
+     * enter PIP when backgrounding the app.
+     *
+     * @example
+     * ```tsx
+     * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';
+     *
+     * // Obtain a ref to the view
+     * const videoRef = useRef<Component>(null);
+     * const videoView = (
+     *   <VideoTrack
+     *      ref={videoRef}
+     *      iosPIP={{
+     *        enabled: true,
+     *        startAutomatically: true,
+     *        preferredSize: {
+     *          width: 800,
+     *          height: 800,
+     *        },
+     *      }}
+     *      ...
+     *   />
+     * );
+     *
+     * // Start/stop manually
+     * startIOSPIP(videoRef);
+     * stopIOSPIP(videoRef);
+     * ```
+     *
+     */
+    iosPIP?: RTCIOSPIPOptions & {
+        preferredSize: {
+            width: number;
+            height: number;
+        };
+        fallbackView?: ReactNode;
+    };
 };
 /**
  * VideoTrack component for displaying video tracks in a React Native application.
@@ -54,4 +99,4 @@ export type VideoTrackProps = {
  * @returns A React component that renders the given video track.
  * @public
  */
-export declare const VideoTrack: ({ style, trackRef, objectFit, zOrder, mirror, }: VideoTrackProps) => React.JSX.Element;
+export declare const VideoTrack: React.ForwardRefExoticComponent<VideoTrackProps & React.RefAttributes<React.Component<{}, {}, any>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/react-native",
-  "version": "2.6.4",
+  "version": "2.7.0",
   "description": "LiveKit for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -72,7 +72,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^7.0.4",
     "jest": "^29.6.3",
-    "livekit-client": "^2.9.0",
+    "livekit-client": "^2.9.8",
     "pod-install": "^0.2.2",
     "prettier": "2.8.8",
     "react": "18.2.0",

package/src/components/VideoTrack.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import {
   type LayoutChangeEvent,
+  Platform,
   StyleSheet,
   View,
   type ViewStyle,
@@ -12,8 +13,20 @@ import {
   Track,
   TrackEvent,
 } from 'livekit-client';
-import { RTCView } from '@livekit/react-native-webrtc';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  RTCView,
+  RTCPIPView,
+  type RTCIOSPIPOptions,
+} from '@livekit/react-native-webrtc';
+import {
+  Component,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 import type { TrackReference } from '@livekit/components-react';
@@ -62,6 +75,50 @@ export type VideoTrackProps = {
    * video(s) which appear above the remote video(s).
    */
   zOrder?: number;
+
+  /**
+   * Picture in picture options for this view. Disabled if not supplied.
+   *
+   * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability.
+   *
+   * If `iosPIP.enabled` is true, startIOSPIP and stopIOSPIP can be used to manually
+   * trigger the PIP mode. `iosPIP.startAutomatically` can be used to automatically
+   * enter PIP when backgrounding the app.
+   *
+   * @example
+   * ```tsx
+   * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';
+   *
+   * // Obtain a ref to the view
+   * const videoRef = useRef<Component>(null);
+   * const videoView = (
+   *   <VideoTrack
+   *      ref={videoRef}
+   *      iosPIP={{
+   *        enabled: true,
+   *        startAutomatically: true,
+   *        preferredSize: {
+   *          width: 800,
+   *          height: 800,
+   *        },
+   *      }}
+   *      ...
+   *   />
+   * );
+   *
+   * // Start/stop manually
+   * startIOSPIP(videoRef);
+   * stopIOSPIP(videoRef);
+   * ```
+   *
+   */
+  iosPIP?: RTCIOSPIPOptions & {
+    preferredSize: {
+      width: number;
+      height: number;
+    };
+    fallbackView?: ReactNode;
+  };
 };
 
 /**
@@ -72,83 +129,114 @@ export type VideoTrackProps = {
  * @returns A React component that renders the given video track.
  * @public
  */
-export const VideoTrack = ({
-  style = {},
-  trackRef,
-  objectFit = 'cover',
-  zOrder,
-  mirror,
-}: VideoTrackProps) => {
-  const [elementInfo] = useState(() => {
-    let info = new VideoTrackElementInfo();
-    info.id = trackRef?.publication?.trackSid;
-    return info;
-  });
-
-  const layoutOnChange = useCallback(
-    (event: LayoutChangeEvent) => elementInfo.onLayout(event),
-    [elementInfo]
-  );
-  const visibilityOnChange = useCallback(
-    (isVisible: boolean) => elementInfo.onVisibility(isVisible),
-    [elementInfo]
-  );
-
-  const videoTrack = trackRef?.publication.track;
-
-  const shouldObserveVisibility = useMemo(() => {
-    return (
-      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream
+export const VideoTrack = forwardRef<Component, VideoTrackProps>(
+  (
+    {
+      style = {},
+      trackRef,
+      objectFit = 'cover',
+      zOrder,
+      mirror,
+      iosPIP,
+    }: VideoTrackProps,
+    ref
+  ) => {
+    const [elementInfo] = useState(() => {
+      let info = new VideoTrackElementInfo();
+      info.id = trackRef?.publication?.trackSid;
+      return info;
+    });
+
+    const layoutOnChange = useCallback(
+      (event: LayoutChangeEvent) => elementInfo.onLayout(event),
+      [elementInfo]
     );
-  }, [videoTrack]);
-
-  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);
-  useEffect(() => {
-    setMediaStream(videoTrack?.mediaStream);
-    if (videoTrack instanceof LocalVideoTrack) {
-      const onRestarted = (track: Track | null) => {
-        setMediaStream(track?.mediaStream);
-      };
-      videoTrack.on(TrackEvent.Restarted, onRestarted);
-
-      return () => {
-        videoTrack.off(TrackEvent.Restarted, onRestarted);
-      };
-    } else {
-      return () => {};
-    }
-  }, [videoTrack]);
-
-  useEffect(() => {
-    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {
-      videoTrack?.observeElementInfo(elementInfo);
-      return () => {
-        videoTrack?.stopObservingElementInfo(elementInfo);
-      };
-    } else {
-      return () => {};
-    }
-  }, [videoTrack, elementInfo]);
-
-  return (
-    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>
-      <ViewPortDetector
-        onChange={visibilityOnChange}
-        style={styles.videoTrack}
-        disabled={!shouldObserveVisibility}
-        propKey={videoTrack}
-      >
+    const visibilityOnChange = useCallback(
+      (isVisible: boolean) => elementInfo.onVisibility(isVisible),
+      [elementInfo]
+    );
+
+    const videoTrack = trackRef?.publication.track;
+
+    const shouldObserveVisibility = useMemo(() => {
+      return (
+        videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream
+      );
+    }, [videoTrack]);
+
+    const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);
+    useEffect(() => {
+      setMediaStream(videoTrack?.mediaStream);
+      if (videoTrack instanceof LocalVideoTrack) {
+        const onRestarted = (track: Track | null) => {
+          setMediaStream(track?.mediaStream);
+        };
+        videoTrack.on(TrackEvent.Restarted, onRestarted);
+
+        return () => {
+          videoTrack.off(TrackEvent.Restarted, onRestarted);
+        };
+      } else {
+        return () => {};
+      }
+    }, [videoTrack]);
+
+    useEffect(() => {
+      if (
+        videoTrack instanceof RemoteVideoTrack &&
+        videoTrack.isAdaptiveStream
+      ) {
+        videoTrack?.observeElementInfo(elementInfo);
+        return () => {
+          videoTrack?.stopObservingElementInfo(elementInfo);
+        };
+      } else {
+        return () => {};
+      }
+    }, [videoTrack, elementInfo]);
+
+    let videoView;
+    if (!iosPIP || Platform.OS !== 'ios') {
+      videoView = (
         <RTCView
           style={styles.videoTrack}
           streamURL={mediaStream?.toURL() ?? ''}
           objectFit={objectFit}
           zOrder={zOrder}
           mirror={mirror}
+          // @ts-ignore
+          ref={ref}
         />
-      </ViewPortDetector>
-    </View>
-  );
-};
+      );
+    } else {
+      videoView = (
+        <RTCPIPView
+          style={styles.videoTrack}
+          streamURL={mediaStream?.toURL() ?? ''}
+          objectFit={objectFit}
+          zOrder={zOrder}
+          mirror={mirror}
+          // TODO: fix this up in react-native-webrtc side.
+          // @ts-expect-error
+          iosPIP={iosPIP}
+          ref={ref}
+        />
+      );
+    }
+    return (
+      <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>
+        <ViewPortDetector
+          onChange={visibilityOnChange}
+          style={styles.videoTrack}
+          disabled={!shouldObserveVisibility}
+          propKey={videoTrack}
+        >
+          {videoView}
+        </ViewPortDetector>
+      </View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   container: {},

package/src/hooks/useMultibandTrackVolume.ts

@@ -49,7 +49,7 @@ export function useMultibandTrackVolume(
     | LocalAudioTrack
     | RemoteAudioTrack
     | TrackReferenceOrPlaceholder,
-  options: MultiBandTrackVolumeOptions = {}
+  options?: MultiBandTrackVolumeOptions
 ) {
   const track =
     trackOrTrackReference instanceof Track
@@ -59,39 +59,44 @@ export function useMultibandTrackVolume(
         );
   const opts = useMemo(() => {
     return { ...multibandDefaults, ...options };
-  }, [options]);
+
+    // disabled due to use of JSON.stringify, dependencies are reference equality
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(options)]);
   const mediaStreamTrack = track?.mediaStreamTrack;
+  const hasMediaStreamTrack = mediaStreamTrack != null;
+  const peerConnectionId = mediaStreamTrack?.peerConnectionId ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack?.id;
 
   let [magnitudes, setMagnitudes] = useState<number[]>([]);
   useEffect(() => {
     let listener = Object();
     let reactTag: string | null = null;
-    if (mediaStreamTrack) {
+    if (hasMediaStreamTrack) {
       reactTag = LiveKitModule.createMultibandVolumeProcessor(
         opts,
-        mediaStreamTrack._peerConnectionId ?? -1,
-        mediaStreamTrack.id
+        peerConnectionId,
+        mediaStreamTrackId
       );
       addListener(listener, 'LK_MULTIBAND_PROCESSED', (event: any) => {
         if (event.magnitudes && reactTag && event.id === reactTag) {
-          console.log('event received: ', event.magnitudes[0]);
           setMagnitudes(event.magnitudes);
         }
       });
     }
     return () => {
-      if (mediaStreamTrack) {
+      if (hasMediaStreamTrack) {
         removeListener(listener);
         if (reactTag) {
           LiveKitModule.deleteMultibandVolumeProcessor(
             reactTag,
-            mediaStreamTrack._peerConnectionId ?? -1,
-            mediaStreamTrack.id
+            peerConnectionId,
+            mediaStreamTrackId
           );
         }
       }
     };
-  }, [mediaStreamTrack, opts]);
+  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId, opts]);
 
   return magnitudes;
 }

package/src/hooks/useTrackVolume.ts

@@ -28,15 +28,18 @@ export function useTrackVolume(
         );
 
   const mediaStreamTrack = track?.mediaStreamTrack;
+  const hasMediaStreamTrack = mediaStreamTrack != null;
+  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack.id;
 
   let [volume, setVolume] = useState(0.0);
   useEffect(() => {
     let listener = Object();
     let reactTag: string | null = null;
-    if (mediaStreamTrack) {
+    if (hasMediaStreamTrack) {
       reactTag = LiveKitModule.createVolumeProcessor(
-        mediaStreamTrack._peerConnectionId ?? -1,
-        mediaStreamTrack.id
+        peerConnectionId,
+        mediaStreamTrackId
       );
       addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {
         if (event.volume && reactTag && event.id === reactTag) {
@@ -45,18 +48,18 @@ export function useTrackVolume(
       });
     }
     return () => {
-      if (mediaStreamTrack) {
+      if (hasMediaStreamTrack) {
         removeListener(listener);
         if (reactTag) {
           LiveKitModule.deleteVolumeProcessor(
             reactTag,
-            mediaStreamTrack._peerConnectionId ?? -1,
-            mediaStreamTrack.id
+            peerConnectionId,
+            mediaStreamTrackId
           );
         }
       }
     };
-  }, [mediaStreamTrack]);
+  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);
 
   return volume;
 }