@livekit/react-native 2.7.6 → 2.8.0

package/README.md

@@ -423,9 +423,9 @@ Apache License 2.0
 <br/><table>
 <thead><tr><th colspan="2">LiveKit Ecosystem</th></tr></thead>
 <tbody>
-<tr><td>LiveKit SDKs</td><td><a href="https://github.com/livekit/client-sdk-js">Browser</a> · <a href="https://github.com/livekit/client-sdk-swift">iOS/macOS/visionOS</a> · <a href="https://github.com/livekit/client-sdk-android">Android</a> · <a href="https://github.com/livekit/client-sdk-flutter">Flutter</a> · <b>React Native</b> · <a href="https://github.com/livekit/rust-sdks">Rust</a> · <a href="https://github.com/livekit/node-sdks">Node.js</a> · <a href="https://github.com/livekit/python-sdks">Python</a> · <a href="https://github.com/livekit/client-sdk-unity">Unity</a> · <a href="https://github.com/livekit/client-sdk-unity-web">Unity (WebGL)</a></td></tr><tr></tr>
+<tr><td>LiveKit SDKs</td><td><a href="https://github.com/livekit/client-sdk-js">Browser</a> · <a href="https://github.com/livekit/client-sdk-swift">iOS/macOS/visionOS</a> · <a href="https://github.com/livekit/client-sdk-android">Android</a> · <a href="https://github.com/livekit/client-sdk-flutter">Flutter</a> · <b>React Native</b> · <a href="https://github.com/livekit/rust-sdks">Rust</a> · <a href="https://github.com/livekit/node-sdks">Node.js</a> · <a href="https://github.com/livekit/python-sdks">Python</a> · <a href="https://github.com/livekit/client-sdk-unity">Unity</a> · <a href="https://github.com/livekit/client-sdk-unity-web">Unity (WebGL)</a> · <a href="https://github.com/livekit/client-sdk-esp32">ESP32</a></td></tr><tr></tr>
 <tr><td>Server APIs</td><td><a href="https://github.com/livekit/node-sdks">Node.js</a> · <a href="https://github.com/livekit/server-sdk-go">Golang</a> · <a href="https://github.com/livekit/server-sdk-ruby">Ruby</a> · <a href="https://github.com/livekit/server-sdk-kotlin">Java/Kotlin</a> · <a href="https://github.com/livekit/python-sdks">Python</a> · <a href="https://github.com/livekit/rust-sdks">Rust</a> · <a href="https://github.com/agence104/livekit-server-sdk-php">PHP (community)</a> · <a href="https://github.com/pabloFuente/livekit-server-sdk-dotnet">.NET (community)</a></td></tr><tr></tr>
-<tr><td>UI Components</td><td><a href="https://github.com/livekit/components-js">React</a> · <a href="https://github.com/livekit/components-android">Android Compose</a> · <a href="https://github.com/livekit/components-swift">SwiftUI</a></td></tr><tr></tr>
+<tr><td>UI Components</td><td><a href="https://github.com/livekit/components-js">React</a> · <a href="https://github.com/livekit/components-android">Android Compose</a> · <a href="https://github.com/livekit/components-swift">SwiftUI</a> · <a href="https://github.com/livekit/components-flutter">Flutter</a></td></tr><tr></tr>
 <tr><td>Agents Frameworks</td><td><a href="https://github.com/livekit/agents">Python</a> · <a href="https://github.com/livekit/agents-js">Node.js</a> · <a href="https://github.com/livekit/agent-playground">Playground</a></td></tr><tr></tr>
 <tr><td>Services</td><td><a href="https://github.com/livekit/livekit">LiveKit server</a> · <a href="https://github.com/livekit/egress">Egress</a> · <a href="https://github.com/livekit/ingress">Ingress</a> · <a href="https://github.com/livekit/sip">SIP</a></td></tr><tr></tr>
 <tr><td>Resources</td><td><a href="https://docs.livekit.io">Docs</a> · <a href="https://github.com/livekit-examples">Example apps</a> · <a href="https://livekit.io/cloud">Cloud</a> · <a href="https://docs.livekit.io/home/self-hosting/deployment">Self-hosting</a> · <a href="https://github.com/livekit/livekit-cli">CLI</a></td></tr>

package/android/src/main/java/com/livekit/reactnative/LivekitReactNativeModule.kt

@@ -18,6 +18,9 @@ import com.oney.WebRTCModule.WebRTCModuleOptions
 import org.webrtc.audio.WebRtcAudioTrackHelper
 import kotlin.time.Duration.Companion.milliseconds
 
+// NOTE: As of 0.80 react-native new architecture requires all
+// @ReactMethod(isBlockingSynchronousMethod = true)
+// annotated methods to be non-void.
 
 class LivekitReactNativeModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
 
@@ -142,9 +145,10 @@ class LivekitReactNativeModule(reactContext: ReactApplicationContext) : ReactCon
     }
 
     @ReactMethod(isBlockingSynchronousMethod = true)
-    fun deleteVolumeProcessor(reactTag: String, pcId: Int, trackId: String) {
+    fun deleteVolumeProcessor(reactTag: String, pcId: Int, trackId: String): Boolean {
         audioSinkManager.detachSinkFromTrack(reactTag, pcId, trackId)
         audioSinkManager.unregisterSink(reactTag)
+        return true
     }
 
     @ReactMethod(isBlockingSynchronousMethod = true)
@@ -171,7 +175,7 @@ class LivekitReactNativeModule(reactContext: ReactApplicationContext) : ReactCon
     }
 
     @ReactMethod(isBlockingSynchronousMethod = true)
-    fun deleteMultibandVolumeProcessor(reactTag: String, pcId: Int, trackId: String) {
+    fun deleteMultibandVolumeProcessor(reactTag: String, pcId: Int, trackId: String): Boolean {
         val volumeProcessor =
             audioSinkManager.getSink(reactTag) ?: throw IllegalArgumentException("Can't find volume processor for $reactTag")
         audioSinkManager.detachSinkFromTrack(volumeProcessor, pcId, trackId)
@@ -182,7 +186,10 @@ class LivekitReactNativeModule(reactContext: ReactApplicationContext) : ReactCon
             multibandVolumeProcessor.release()
         } else {
             Log.w(name, "deleteMultibandVolumeProcessor called, but non-MultibandVolumeProcessor found?!")
+            return false
         }
+
+        return true
     }
 
     @ReactMethod

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","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":[]}
+{"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  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\ntype RTCViewInstance = InstanceType<typeof RTCView>;\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<RTCViewInstance, 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/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","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":[]}
+{"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  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\ntype RTCViewInstance = InstanceType<typeof RTCView>;\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<RTCViewInstance, 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/typescript/src/components/VideoTrack.d.ts

@@ -103,4 +103,4 @@ export type VideoTrackProps = {
  * @returns A React component that renders the given video track.
  * @public
  */
-export declare const VideoTrack: React.ForwardRefExoticComponent<VideoTrackProps & React.RefAttributes<React.Component<{}, {}, any>>>;
+export declare const VideoTrack: React.ForwardRefExoticComponent<VideoTrackProps & React.RefAttributes<React.Component<import("@livekit/react-native-webrtc").RTCVideoViewProps, {}, any> & Readonly<import("react-native").NativeMethods>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/react-native",
-  "version": "2.7.6",
+  "version": "2.8.0",
   "description": "LiveKit for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -57,7 +57,7 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@commitlint/config-conventional": "^16.2.1",
-    "@livekit/react-native-webrtc": "^125.0.10",
+    "@livekit/react-native-webrtc": "^125.0.12",
     "@react-native/babel-preset": "0.74.84",
     "@react-native/eslint-config": "0.74.84",
     "@react-native/metro-config": "0.74.84",
@@ -84,7 +84,7 @@
     "typescript": "5.0.4"
   },
   "peerDependencies": {
-    "@livekit/react-native-webrtc": "^125.0.10",
+    "@livekit/react-native-webrtc": "^125.0.12",
     "livekit-client": "^2.9.0",
     "react": "*",
     "react-native": "*"

package/src/components/VideoTrack.tsx

@@ -19,7 +19,6 @@ import {
   type RTCIOSPIPOptions,
 } from '@livekit/react-native-webrtc';
 import {
-  Component,
   forwardRef,
   useCallback,
   useEffect,
@@ -125,6 +124,8 @@ export type VideoTrackProps = {
   };
 };
 
+type RTCViewInstance = InstanceType<typeof RTCView>;
+
 /**
  * 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.
@@ -133,7 +134,7 @@ export type VideoTrackProps = {
  * @returns A React component that renders the given video track.
  * @public
  */
-export const VideoTrack = forwardRef<Component, VideoTrackProps>(
+export const VideoTrack = forwardRef<RTCViewInstance, VideoTrackProps>(
   (
     {
       style = {},