@livekit/react-native 2.7.0 → 2.7.1

package/lib/commonjs/components/VideoTrack.js

@@ -44,7 +44,8 @@ const VideoTrack = exports.VideoTrack = /*#__PURE__*/(0, _react.forwardRef)(({
     return info;
   });
   const layoutOnChange = (0, _react.useCallback)(event => elementInfo.onLayout(event), [elementInfo]);
-  const visibilityOnChange = (0, _react.useCallback)(isVisible => elementInfo.onVisibility(isVisible), [elementInfo]);
+  const iosPIPEnabled = (iosPIP === null || iosPIP === void 0 ? void 0 : iosPIP.enabled) ?? false;
+  const visibilityOnChange = (0, _react.useCallback)(isVisible => elementInfo.onVisibility(isVisible || iosPIPEnabled), [elementInfo, iosPIPEnabled]);
   const videoTrack = trackRef === null || trackRef === void 0 ? void 0 : trackRef.publication.track;
   const shouldObserveVisibility = (0, _react.useMemo)(() => {
     return videoTrack instanceof _livekitClient.RemoteVideoTrack && videoTrack.isAdaptiveStream;

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","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":[]}
+{"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","iosPIPEnabled","enabled","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, the methods `startIOSPIP` and `stopIOSPIP`\n   * can be used to manually trigger the PIP mode.\n   *\n   * `iosPIP.startAutomatically` can be used to automatically\n   * enter PIP when backgrounding the app.\n   *\n   * `iosPIP.preferredSize` is used to provide a suggested aspect ratio.\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: 9,\n   *          height: 16,\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\n    const iosPIPEnabled = iosPIP?.enabled ?? false;\n    const visibilityOnChange = useCallback(\n      (isVisible: boolean) =>\n        elementInfo.onVisibility(isVisible || iosPIPEnabled),\n      [elementInfo, iosPIPEnabled]\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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA+B,IAAAC,KAAA,GAAAH,MAAA;AAE/B,IAAAI,YAAA,GAAAF,OAAA;AAOA,IAAAG,cAAA,GAAAH,OAAA;AAMA,IAAAI,kBAAA,GAAAJ,OAAA;AAeA,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;;AA2FA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM0B,UAAU,GAAAC,OAAA,CAAAD,UAAA,gBAAG,IAAAE,iBAAU,EAClC,CACE;EACEC,KAAK,GAAG,CAAC,CAAC;EACVC,QAAQ;EACRC,SAAS,GAAG,OAAO;EACnBC,MAAM;EACNC,MAAM;EACNC;AACe,CAAC,EAClBC,GAAG,KACA;EACH,MAAM,CAACC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAM;IAAA,IAAAC,qBAAA;IACnC,IAAIC,IAAI,GAAG,IAAIC,qBAAqB,CAAC,CAAC;IACtCD,IAAI,CAACE,EAAE,GAAGX,QAAQ,aAARA,QAAQ,gBAAAQ,qBAAA,GAARR,QAAQ,CAAEY,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;EAED,MAAMY,aAAa,GAAG,CAAAd,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEe,OAAO,KAAI,KAAK;EAC9C,MAAMC,kBAAkB,GAAG,IAAAL,kBAAW,EACnCM,SAAkB,IACjBf,WAAW,CAACgB,YAAY,CAACD,SAAS,IAAIH,aAAa,CAAC,EACtD,CAACZ,WAAW,EAAEY,aAAa,CAC7B,CAAC;EAED,MAAMK,UAAU,GAAGvB,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEY,WAAW,CAACY,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,IAAAvB,eAAQ,EAACgB,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,IACER,UAAU,YAAYI,+BAAgB,IACtCJ,UAAU,CAACK,gBAAgB,EAC3B;MACAL,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEe,kBAAkB,CAAChC,WAAW,CAAC;MAC3C,OAAO,MAAM;QACXiB,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEgB,wBAAwB,CAACjC,WAAW,CAAC;MACnD,CAAC;IACH,CAAC,MAAM;MACL,OAAO,MAAM,CAAC,CAAC;IACjB;EACF,CAAC,EAAE,CAACiB,UAAU,EAAEjB,WAAW,CAAC,CAAC;EAE7B,IAAIkC,SAAS;EACb,IAAI,CAACpC,MAAM,IAAIqC,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;IACpCF,SAAS,gBACPlF,KAAA,CAAAqF,aAAA,CAAClF,kBAAA,CAAAmF,OAAO;MACN7C,KAAK,EAAE8C,MAAM,CAACtB,UAAW;MACzBuB,SAAS,EAAE,CAAAjB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEkB,KAAK,CAAC,CAAC,KAAI,EAAG;MACtC9C,SAAS,EAAEA,SAAU;MACrBC,MAAM,EAAEA,MAAO;MACfC,MAAM,EAAEA;MACR;MAAA;MACAE,GAAG,EAAEA;IAAI,CACV,CACF;EACH,CAAC,MAAM;IACLmC,SAAS,gBACPlF,KAAA,CAAAqF,aAAA,CAAClF,kBAAA,CAAAuF,UAAU;MACTjD,KAAK,EAAE8C,MAAM,CAACtB,UAAW;MACzBuB,SAAS,EAAE,CAAAjB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEkB,KAAK,CAAC,CAAC,KAAI,EAAG;MACtC9C,SAAS,EAAEA,SAAU;MACrBC,MAAM,EAAEA,MAAO;MACfC,MAAM,EAAEA;MACR;MACA;MAAA;MACAC,MAAM,EAAEA,MAAO;MACfC,GAAG,EAAEA;IAAI,CACV,CACF;EACH;EACA,oBACE/C,KAAA,CAAAqF,aAAA,CAACpF,YAAA,CAAA0F,IAAI;IAAClD,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAE,GAAG8C,MAAM,CAACK;IAAU,CAAE;IAACjC,QAAQ,EAAEH;EAAe,gBACvExD,KAAA,CAAAqF,aAAA,CAACjF,iBAAA,CAAAI,OAAgB;IACfqF,QAAQ,EAAE/B,kBAAmB;IAC7BrB,KAAK,EAAE8C,MAAM,CAACtB,UAAW;IACzB6B,QAAQ,EAAE,CAAC3B,uBAAwB;IACnC4B,OAAO,EAAE9B;EAAW,GAEnBiB,SACe,CACd,CAAC;AAEX,CACF,CAAC;AAED,MAAMK,MAAM,GAAGS,uBAAU,CAACC,MAAM,CAAC;EAC/BL,SAAS,EAAE,CAAC,CAAC;EACb3B,UAAU,EAAE;IACViC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,MAAM/C,qBAAqB,CAAwB;EAAAgD,YAAA;IAAA1E,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,CAAC2E,MAAM;IAAA3E,eAAA,iBAChB,MAAM,IAAI,CAAC4E,OAAO;EAAA;EAE3BC,OAAOA,CAAA,EAAS;IACd,IAAI,CAACC,UAAU,GAAG,IAAI;EACxB;EAEAC,aAAaA,CAAA,EAAS;IACpB,IAAI,CAACD,UAAU,GAAG,KAAK;EACzB;EAEA7C,QAAQA,CAACD,KAAwB,EAAE;IACjC,IAAI;MAAEyC,KAAK;MAAEO;IAAO,CAAC,GAAGhD,KAAK,CAACiD,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,CAAAtF,IAAA,KAAoB,CAAC;IACvB;EACF;EAEAyC,YAAYA,CAACD,SAAkB,EAAE;IAC/B,IAAI,IAAI,CAACgD,OAAO,KAAKhD,SAAS,EAAE;MAC9B,IAAI,CAACgD,OAAO,GAAGhD,SAAS;MACxB,IAAI,CAACiD,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,CAAA5F,IAAA,KAA+B,CAAC;MAClC;IACF;EACF;AACF","ignoreList":[]}

package/lib/commonjs/hooks/useTrackVolume.js

@@ -20,8 +20,8 @@ function useTrackVolume(trackOrTrackReference) {
   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;
+  const peerConnectionId = (mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack._peerConnectionId) ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack.id;
   let [volume, setVolume] = (0, _react.useState)(0.0);
   (0, _react.useEffect)(() => {
     let listener = Object();

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","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":[]}
+{"version":3,"names":["_livekitClient","require","_react","_EventEmitter","_LKNativeModule","_interopRequireDefault","e","__esModule","default","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","Track","publication","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","_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';\nimport type { MediaStreamTrack } from '@livekit/react-native-webrtc';\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 as\n    | MediaStreamTrack\n    | undefined;\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;AAG9C;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,gBAEnB;EACb,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAG,CAAAF,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEG,iBAAiB,KAAI,CAAC,CAAC;EAClE,MAAMC,kBAAkB,GAAGJ,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEK,EAAE;EAE/C,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,IAAIX,mBAAmB,EAAE;MACvBW,QAAQ,GAAGC,uBAAa,CAACC,qBAAqB,CAC5CZ,gBAAgB,EAChBE,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,IAAIL,mBAAmB,EAAE;QACvB,IAAAgB,4BAAc,EAACP,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZC,uBAAa,CAACK,qBAAqB,CACjCN,QAAQ,EACRV,gBAAgB,EAChBE,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACH,mBAAmB,EAAEC,gBAAgB,EAAEE,kBAAkB,CAAC,CAAC;EAE/D,OAAOE,MAAM;AACf","ignoreList":[]}

package/lib/module/components/VideoTrack.js

@@ -37,7 +37,8 @@ export const VideoTrack = /*#__PURE__*/forwardRef(({
     return info;
   });
   const layoutOnChange = useCallback(event => elementInfo.onLayout(event), [elementInfo]);
-  const visibilityOnChange = useCallback(isVisible => elementInfo.onVisibility(isVisible), [elementInfo]);
+  const iosPIPEnabled = (iosPIP === null || iosPIP === void 0 ? void 0 : iosPIP.enabled) ?? false;
+  const visibilityOnChange = useCallback(isVisible => elementInfo.onVisibility(isVisible || iosPIPEnabled), [elementInfo, iosPIPEnabled]);
   const videoTrack = trackRef === null || trackRef === void 0 ? void 0 : trackRef.publication.track;
   const shouldObserveVisibility = useMemo(() => {
     return videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream;

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

@@ -1 +1 @@
-{"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":[]}
+{"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","iosPIPEnabled","enabled","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, the methods `startIOSPIP` and `stopIOSPIP`\n   * can be used to manually trigger the PIP mode.\n   *\n   * `iosPIP.startAutomatically` can be used to automatically\n   * enter PIP when backgrounding the app.\n   *\n   * `iosPIP.preferredSize` is used to provide a suggested aspect ratio.\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: 9,\n   *          height: 16,\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\n    const iosPIPEnabled = iosPIP?.enabled ?? false;\n    const visibilityOnChange = useCallback(\n      (isVisible: boolean) =>\n        elementInfo.onVisibility(isVisible || iosPIPEnabled),\n      [elementInfo, iosPIPEnabled]\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/useTrackVolume.js

@@ -2,7 +2,6 @@ import { Track } from 'livekit-client';
 import { useEffect, useState } from 'react';
 import { addListener, removeListener } from '../events/EventEmitter';
 import LiveKitModule from '../LKNativeModule';
-
 /**
  * A hook for tracking the volume of an audio track.
  *
@@ -14,8 +13,8 @@ export function useTrackVolume(trackOrTrackReference) {
   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;
+  const peerConnectionId = (mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack._peerConnectionId) ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack.id;
   let [volume, setVolume] = useState(0.0);
   useEffect(() => {
     let listener = Object();

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":["Track","useEffect","useState","addListener","removeListener","LiveKitModule","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","publication","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","_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';\nimport type { MediaStreamTrack } from '@livekit/react-native-webrtc';\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 as\n    | MediaStreamTrack\n    | undefined;\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;AAG7C;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,gBAEnB;EACb,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAG,CAAAF,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEG,iBAAiB,KAAI,CAAC,CAAC;EAClE,MAAMC,kBAAkB,GAAGJ,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEK,EAAE;EAE/C,IAAI,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAAC,GAAG,CAAC;EACvCD,SAAS,CAAC,MAAM;IACd,IAAIkB,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIT,mBAAmB,EAAE;MACvBS,QAAQ,GAAGhB,aAAa,CAACiB,qBAAqB,CAC5CT,gBAAgB,EAChBE,kBACF,CAAC;MACDZ,WAAW,CAACgB,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,IAAIL,mBAAmB,EAAE;QACvBR,cAAc,CAACe,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZhB,aAAa,CAACmB,qBAAqB,CACjCH,QAAQ,EACRR,gBAAgB,EAChBE,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACH,mBAAmB,EAAEC,gBAAgB,EAAEE,kBAAkB,CAAC,CAAC;EAE/D,OAAOE,MAAM;AACf","ignoreList":[]}

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

@@ -52,10 +52,14 @@ export type VideoTrackProps = {
      *
      * 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
+     * If `iosPIP.enabled` is true, the methods `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.
      *
+     * `iosPIP.preferredSize` is used to provide a suggested aspect ratio.
+     *
      * @example
      * ```tsx
      * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';
@@ -69,8 +73,8 @@ export type VideoTrackProps = {
      *        enabled: true,
      *        startAutomatically: true,
      *        preferredSize: {
-     *          width: 800,
-     *          height: 800,
+     *          width: 9,
+     *          height: 16,
      *        },
      *      }}
      *      ...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/react-native",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "LiveKit for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/VideoTrack.tsx

@@ -81,10 +81,14 @@ export type VideoTrackProps = {
    *
    * 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
+   * If `iosPIP.enabled` is true, the methods `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.
    *
+   * `iosPIP.preferredSize` is used to provide a suggested aspect ratio.
+   *
    * @example
    * ```tsx
    * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';
@@ -98,8 +102,8 @@ export type VideoTrackProps = {
    *        enabled: true,
    *        startAutomatically: true,
    *        preferredSize: {
-   *          width: 800,
-   *          height: 800,
+   *          width: 9,
+   *          height: 16,
    *        },
    *      }}
    *      ...
@@ -151,9 +155,12 @@ export const VideoTrack = forwardRef<Component, VideoTrackProps>(
       (event: LayoutChangeEvent) => elementInfo.onLayout(event),
       [elementInfo]
     );
+
+    const iosPIPEnabled = iosPIP?.enabled ?? false;
     const visibilityOnChange = useCallback(
-      (isVisible: boolean) => elementInfo.onVisibility(isVisible),
-      [elementInfo]
+      (isVisible: boolean) =>
+        elementInfo.onVisibility(isVisible || iosPIPEnabled),
+      [elementInfo, iosPIPEnabled]
     );
 
     const videoTrack = trackRef?.publication.track;

package/src/hooks/useTrackVolume.ts

@@ -7,6 +7,7 @@ import {
 import { useEffect, useState } from 'react';
 import { addListener, removeListener } from '../events/EventEmitter';
 import LiveKitModule from '../LKNativeModule';
+import type { MediaStreamTrack } from '@livekit/react-native-webrtc';
 
 /**
  * A hook for tracking the volume of an audio track.
@@ -27,10 +28,12 @@ export function useTrackVolume(
           trackOrTrackReference?.publication?.track
         );
 
-  const mediaStreamTrack = track?.mediaStreamTrack;
+  const mediaStreamTrack = track?.mediaStreamTrack as
+    | MediaStreamTrack
+    | undefined;
   const hasMediaStreamTrack = mediaStreamTrack != null;
-  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;
-  const mediaStreamTrackId = mediaStreamTrack.id;
+  const peerConnectionId = mediaStreamTrack?._peerConnectionId ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack?.id;
 
   let [volume, setVolume] = useState(0.0);
   useEffect(() => {