@livekit/react-native 2.0.1 → 2.1.0-0

package/README.md

@@ -14,6 +14,10 @@
 Use this SDK to add real-time video, audio and data features to your React Native app. By connecting to a self- or cloud-hosted <a href="https://livekit.io/">LiveKit</a> server, you can quickly build applications like interactive live streaming or video calls with just a few lines of code.
 <!--END_DESCRIPTION-->
 
+> [!NOTE]
+> This is v2 of the React-Native SDK. When migrating from v1.x to v2.x you might encounter a small set of breaking changes.
+> Read the [migration guide](https://docs.livekit.io/guides/migrate-from-v1/) for a detailed overview of what has changed.
+
 ## Installation
 
 ### NPM

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

@@ -4,8 +4,8 @@ import android.app.Application
 import android.content.Context
 import android.os.Build
 import com.livekit.reactnative.audio.AudioType
-import com.livekit.reactnative.video.SimulcastVideoEncoderFactoryWrapper
-import com.livekit.reactnative.video.WrappedVideoDecoderFactoryProxy
+import com.livekit.reactnative.video.CustomVideoEncoderFactory
+import com.livekit.reactnative.video.CustomVideoDecoderFactory
 import com.oney.WebRTCModule.WebRTCModuleOptions
 import org.webrtc.audio.JavaAudioDeviceModule
 
@@ -21,8 +21,8 @@ object LiveKitReactNative {
     @JvmOverloads
     fun setup(context: Context, audioType: AudioType = AudioType.CommunicationAudioType()) {
         val options = WebRTCModuleOptions.getInstance()
-        options.videoEncoderFactory = SimulcastVideoEncoderFactoryWrapper(null, true, true)
-        options.videoDecoderFactory = WrappedVideoDecoderFactoryProxy()
+        options.videoEncoderFactory = CustomVideoEncoderFactory(null, true, true)
+        options.videoDecoderFactory = CustomVideoDecoderFactory()
 
         val useHardwareAudioProcessing = Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q
 

package/android/src/main/java/com/livekit/reactnative/video/CustomVideoDecoderFactory.kt

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2023-2024 LiveKit, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.livekit.reactnative.video
+
+import com.oney.WebRTCModule.webrtcutils.SoftwareVideoDecoderFactoryProxy
+import org.webrtc.EglBase
+import org.webrtc.SoftwareVideoDecoderFactory
+import org.webrtc.VideoCodecInfo
+import org.webrtc.VideoDecoder
+import org.webrtc.VideoDecoderFactory
+import org.webrtc.WrappedVideoDecoderFactory
+
+open class CustomVideoDecoderFactory(
+    private var forceSWCodec: Boolean = false,
+    private var forceSWCodecs: List<String> = listOf("VP9"),
+) : VideoDecoderFactory {
+    private val softwareVideoDecoderFactory = SoftwareVideoDecoderFactoryProxy()
+    private val wrappedVideoDecoderFactory = WrappedVideoDecoderFactoryProxy()
+
+    /**
+     * Set to true to force software codecs.
+     */
+    fun setForceSWCodec(forceSWCodec: Boolean) {
+        this.forceSWCodec = forceSWCodec
+    }
+
+    /**
+     * Set a list of codecs for which to use software codecs.
+     */
+    fun setForceSWCodecList(forceSWCodecs: List<String>) {
+        this.forceSWCodecs = forceSWCodecs
+    }
+
+    override fun createDecoder(videoCodecInfo: VideoCodecInfo): VideoDecoder? {
+        if (forceSWCodec) {
+            return softwareVideoDecoderFactory.createDecoder(videoCodecInfo)
+        }
+        if (forceSWCodecs.isNotEmpty()) {
+            if (forceSWCodecs.contains(videoCodecInfo.name)) {
+                return softwareVideoDecoderFactory.createDecoder(videoCodecInfo)
+            }
+        }
+        return wrappedVideoDecoderFactory.createDecoder(videoCodecInfo)
+    }
+
+    override fun getSupportedCodecs(): Array<VideoCodecInfo> {
+        return if (forceSWCodec && forceSWCodecs.isEmpty()) {
+            softwareVideoDecoderFactory.supportedCodecs
+        } else {
+            wrappedVideoDecoderFactory.supportedCodecs
+        }
+    }
+}

package/android/src/main/java/com/livekit/reactnative/video/CustomVideoEncoderFactory.kt

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2023-2024 LiveKit, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.livekit.reactnative.video
+
+import com.oney.WebRTCModule.webrtcutils.SoftwareVideoEncoderFactoryProxy
+import org.webrtc.EglBase
+import org.webrtc.SoftwareVideoEncoderFactory
+import org.webrtc.VideoCodecInfo
+import org.webrtc.VideoEncoder
+import org.webrtc.VideoEncoderFactory
+
+open class CustomVideoEncoderFactory(
+    sharedContext: EglBase.Context?,
+    enableIntelVp8Encoder: Boolean,
+    enableH264HighProfile: Boolean,
+    private var forceSWCodec: Boolean = false,
+    private var forceSWCodecs: List<String> = listOf("VP9"),
+) : VideoEncoderFactory {
+    private val softwareVideoEncoderFactory = SoftwareVideoEncoderFactoryProxy()
+    private val simulcastVideoEncoderFactoryWrapper: SimulcastVideoEncoderFactoryWrapper
+
+    init {
+        simulcastVideoEncoderFactoryWrapper =
+            SimulcastVideoEncoderFactoryWrapper(sharedContext, enableIntelVp8Encoder, enableH264HighProfile)
+    }
+
+    /**
+     * Set to true to force software codecs.
+     */
+    fun setForceSWCodec(forceSWCodec: Boolean) {
+        this.forceSWCodec = forceSWCodec
+    }
+
+    /**
+     * Set a list of codecs for which to use software codecs.
+     */
+    fun setForceSWCodecList(forceSWCodecs: List<String>) {
+        this.forceSWCodecs = forceSWCodecs
+    }
+
+    override fun createEncoder(videoCodecInfo: VideoCodecInfo): VideoEncoder? {
+        if (forceSWCodec) {
+            return softwareVideoEncoderFactory.createEncoder(videoCodecInfo)
+        }
+        if (forceSWCodecs.isNotEmpty()) {
+            if (forceSWCodecs.contains(videoCodecInfo.name)) {
+                return softwareVideoEncoderFactory.createEncoder(videoCodecInfo)
+            }
+        }
+        return simulcastVideoEncoderFactoryWrapper.createEncoder(videoCodecInfo)
+    }
+
+    override fun getSupportedCodecs(): Array<VideoCodecInfo> {
+        return if (forceSWCodec && forceSWCodecs.isEmpty()) {
+            softwareVideoEncoderFactory.supportedCodecs
+        } else {
+            simulcastVideoEncoderFactoryWrapper.supportedCodecs
+        }
+    }
+}

package/lib/commonjs/components/LiveKitRoom.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LiveKitRoom = LiveKitRoom;
+
+var _componentsReact = require("@livekit/components-react");
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * The `LiveKitRoom` component provides the room context to all its child components.
+ * It is generally the starting point of your LiveKit app and the root of the LiveKit component tree.
+ * It provides the room state as a React context to all child components, so you don't have to pass it yourself.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom
+ *  token='<livekit-token>'
+ *  serverUrl='<url-to-livekit-server>'
+ *  connect={true}
+ * >
+ *     ...
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+function LiveKitRoom(props) {
+  const {
+    room
+  } = (0, _componentsReact.useLiveKitRoom)(props);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, room && /*#__PURE__*/React.createElement(_componentsReact.RoomContext.Provider, {
+    value: room
+  }, /*#__PURE__*/React.createElement(_componentsReact.LKFeatureContext.Provider, {
+    value: props.featureFlags
+  }, props.children)));
+}
+//# sourceMappingURL=LiveKitRoom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["LiveKitRoom.tsx"],"names":["LiveKitRoom","props","room","featureFlags","children"],"mappings":";;;;;;;AAAA;;AAcA;;;;;;AAyEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,WAAT,CAAqBC,KAArB,EAAuE;AAC5E,QAAM;AAAEC,IAAAA;AAAF,MAAW,qCAAeD,KAAf,CAAjB;AACA,sBACE,0CACGC,IAAI,iBACH,oBAAC,4BAAD,CAAa,QAAb;AAAsB,IAAA,KAAK,EAAEA;AAA7B,kBACE,oBAAC,iCAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAED,KAAK,CAACE;AAAxC,KACGF,KAAK,CAACG,QADT,CADF,CAFJ,CADF;AAWD","sourcesContent":["import {\n  FeatureFlags,\n  LKFeatureContext,\n  RoomContext,\n  useLiveKitRoom,\n} from '@livekit/components-react';\nimport type {\n  AudioCaptureOptions,\n  RoomConnectOptions,\n  RoomOptions,\n  ScreenShareCaptureOptions,\n  VideoCaptureOptions,\n} from 'livekit-client';\nimport type { MediaDeviceFailure, Room } from 'livekit-client';\nimport * as React from 'react';\n\n/** @public */\nexport interface LiveKitRoomProps {\n  /**\n   * URL to the LiveKit server.\n   * For example: `wss://<domain>.livekit.cloud`\n   * To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string url can the connection be established.\n   */\n  serverUrl: string | undefined;\n  /**\n   * A user specific access token for a client to authenticate to the room.\n   * This token is necessary to establish a connection to the room.\n   * To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string token can the connection be established.\n   *\n   * @see https://docs.livekit.io/cloud/project-management/keys-and-tokens/#generating-access-tokens\n   */\n  token: string | undefined;\n  /**\n   * Publish audio immediately after connecting to your LiveKit room.\n   * @defaultValue `false`\n   * @see https://docs.livekit.io/client-sdk-js/interfaces/AudioCaptureOptions.html\n   */\n  audio?: AudioCaptureOptions | boolean;\n  /**\n   * Publish video immediately after connecting to your LiveKit room.\n   * @defaultValue `false`\n   * @see https://docs.livekit.io/client-sdk-js/interfaces/VideoCaptureOptions.html\n   */\n  video?: VideoCaptureOptions | boolean;\n  /**\n   * Publish screen share immediately after connecting to your LiveKit room.\n   * @defaultValue `false`\n   * @see https://docs.livekit.io/client-sdk-js/interfaces/ScreenShareCaptureOptions.html\n   */\n  screen?: ScreenShareCaptureOptions | boolean;\n  /**\n   * If set to true a connection to LiveKit room is initiated.\n   * @defaultValue `false`\n   */\n  connect?: boolean;\n  /**\n   * Options for when creating a new room.\n   * When you pass your own room instance to this component, these options have no effect.\n   * Instead, set the options directly in the room instance.\n   *\n   * @see https://docs.livekit.io/client-sdk-js/interfaces/RoomOptions.html\n   */\n  options?: RoomOptions;\n  /**\n   * Define options how to connect to the LiveKit server.\n   *\n   * @see https://docs.livekit.io/client-sdk-js/interfaces/RoomConnectOptions.html\n   */\n  connectOptions?: RoomConnectOptions;\n  onConnected?: () => void;\n  onDisconnected?: () => void;\n  onError?: (error: Error) => void;\n  onMediaDeviceFailure?: (failure?: MediaDeviceFailure) => void;\n  onEncryptionError?: (error: Error) => void;\n  /**\n   * Optional room instance.\n   * By passing your own room instance you overwrite the `options` parameter,\n   * make sure to set the options directly on the room instance itself.\n   */\n  room?: Room;\n\n  simulateParticipants?: number | undefined;\n\n  /** @experimental */\n  featureFlags?: FeatureFlags | undefined;\n}\n\n/**\n * The `LiveKitRoom` component provides the room context to all its child components.\n * It is generally the starting point of your LiveKit app and the root of the LiveKit component tree.\n * It provides the room state as a React context to all child components, so you don't have to pass it yourself.\n *\n * @example\n * ```tsx\n * <LiveKitRoom\n *  token='<livekit-token>'\n *  serverUrl='<url-to-livekit-server>'\n *  connect={true}\n * >\n *     ...\n * </LiveKitRoom>\n * ```\n * @public\n */\nexport function LiveKitRoom(props: React.PropsWithChildren<LiveKitRoomProps>) {\n  const { room } = useLiveKitRoom(props);\n  return (\n    <>\n      {room && (\n        <RoomContext.Provider value={room}>\n          <LKFeatureContext.Provider value={props.featureFlags}>\n            {props.children}\n          </LKFeatureContext.Provider>\n        </RoomContext.Provider>\n      )}\n    </>\n  );\n}\n"]}

package/lib/commonjs/components/VideoTrack.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoTrack = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _livekitClient = require("livekit-client");
+
+var _reactNativeWebrtc = require("@livekit/react-native-webrtc");
+
+var _ViewPortDetector = _interopRequireDefault(require("./ViewPortDetector"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const VideoTrack = _ref => {
+  var _mediaStream$toURL;
+
+  let {
+    style = {},
+    trackRef,
+    objectFit = 'cover',
+    zOrder,
+    mirror
+  } = _ref;
+  const [elementInfo] = (0, React.useState)(() => {
+    var _trackRef$publication;
+
+    let info = new VideoTrackElementInfo();
+    info.id = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$publication = trackRef.publication) === null || _trackRef$publication === void 0 ? void 0 : _trackRef$publication.trackSid;
+    return info;
+  });
+  const layoutOnChange = (0, React.useCallback)(event => elementInfo.onLayout(event), [elementInfo]);
+  const visibilityOnChange = (0, React.useCallback)(isVisible => elementInfo.onVisibility(isVisible), [elementInfo]);
+  const videoTrack = trackRef === null || trackRef === void 0 ? void 0 : trackRef.publication.track;
+  const shouldObserveVisibility = (0, React.useMemo)(() => {
+    return videoTrack instanceof _livekitClient.RemoteVideoTrack && videoTrack.isAdaptiveStream;
+  }, [videoTrack]);
+  const [mediaStream, setMediaStream] = (0, React.useState)(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
+  (0, React.useEffect)(() => {
+    setMediaStream(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
+
+    if (videoTrack instanceof _livekitClient.LocalVideoTrack) {
+      const onRestarted = track => {
+        setMediaStream(track === null || track === void 0 ? void 0 : track.mediaStream);
+      };
+
+      videoTrack.on(_livekitClient.TrackEvent.Restarted, onRestarted);
+      return () => {
+        videoTrack.off(_livekitClient.TrackEvent.Restarted, onRestarted);
+      };
+    } else {
+      return () => {};
+    }
+  }, [videoTrack]);
+  (0, React.useEffect)(() => {
+    if (videoTrack instanceof _livekitClient.RemoteVideoTrack && videoTrack.isAdaptiveStream) {
+      videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.observeElementInfo(elementInfo);
+      return () => {
+        videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.stopObservingElementInfo(elementInfo);
+      };
+    } else {
+      return () => {};
+    }
+  }, [videoTrack, elementInfo]);
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: { ...style,
+      ...styles.container
+    },
+    onLayout: layoutOnChange
+  }, /*#__PURE__*/React.createElement(_ViewPortDetector.default, {
+    onChange: visibilityOnChange,
+    style: styles.videoTrack,
+    disabled: !shouldObserveVisibility,
+    propKey: videoTrack
+  }, /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCView, {
+    style: styles.videoTrack,
+    streamURL: (_mediaStream$toURL = mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) !== null && _mediaStream$toURL !== void 0 ? _mediaStream$toURL : '',
+    objectFit: objectFit,
+    zOrder: zOrder,
+    mirror: mirror
+  })));
+};
+
+exports.VideoTrack = VideoTrack;
+
+const styles = _reactNative.StyleSheet.create({
+  container: {},
+  videoTrack: {
+    flex: 1,
+    width: '100%'
+  }
+});
+
+class VideoTrackElementInfo {
+  constructor() {
+    _defineProperty(this, "element", {});
+
+    _defineProperty(this, "something", void 0);
+
+    _defineProperty(this, "id", void 0);
+
+    _defineProperty(this, "_width", 0);
+
+    _defineProperty(this, "_height", 0);
+
+    _defineProperty(this, "_observing", false);
+
+    _defineProperty(this, "visible", true);
+
+    _defineProperty(this, "visibilityChangedAt", void 0);
+
+    _defineProperty(this, "pictureInPicture", false);
+
+    _defineProperty(this, "handleResize", void 0);
+
+    _defineProperty(this, "handleVisibilityChanged", void 0);
+
+    _defineProperty(this, "width", () => this._width);
+
+    _defineProperty(this, "height", () => this._height);
+  }
+
+  observe() {
+    this._observing = true;
+  }
+
+  stopObserving() {
+    this._observing = false;
+  }
+
+  onLayout(event) {
+    let {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    this._width = width;
+    this._height = height;
+
+    if (this._observing) {
+      var _this$handleResize;
+
+      (_this$handleResize = this.handleResize) === null || _this$handleResize === void 0 ? void 0 : _this$handleResize.call(this);
+    }
+  }
+
+  onVisibility(isVisible) {
+    if (this.visible !== isVisible) {
+      this.visible = isVisible;
+      this.visibilityChangedAt = Date.now();
+
+      if (this._observing) {
+        var _this$handleVisibilit;
+
+        (_this$handleVisibilit = this.handleVisibilityChanged) === null || _this$handleVisibilit === void 0 ? void 0 : _this$handleVisibilit.call(this);
+      }
+    }
+  }
+
+}
+//# sourceMappingURL=VideoTrack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["VideoTrack.tsx"],"names":["VideoTrack","style","trackRef","objectFit","zOrder","mirror","elementInfo","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","event","onLayout","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","RemoteVideoTrack","isAdaptiveStream","mediaStream","setMediaStream","LocalVideoTrack","onRestarted","on","TrackEvent","Restarted","off","observeElementInfo","stopObservingElementInfo","styles","container","toURL","StyleSheet","create","flex","width","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","handleResize","visible","visibilityChangedAt","Date","now","handleVisibilityChanged"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAMA;;AAGA;;;;;;;;;;AAWO,MAAMA,UAAU,GAAG,QAMH;AAAA;;AAAA,MANI;AACzBC,IAAAA,KAAK,GAAG,EADiB;AAEzBC,IAAAA,QAFyB;AAGzBC,IAAAA,SAAS,GAAG,OAHa;AAIzBC,IAAAA,MAJyB;AAKzBC,IAAAA;AALyB,GAMJ;AACrB,QAAM,CAACC,WAAD,IAAgB,oBAAS,MAAM;AAAA;;AACnC,QAAIC,IAAI,GAAG,IAAIC,qBAAJ,EAAX;AACAD,IAAAA,IAAI,CAACE,EAAL,GAAUP,QAAV,aAAUA,QAAV,gDAAUA,QAAQ,CAAEQ,WAApB,0DAAU,sBAAuBC,QAAjC;AACA,WAAOJ,IAAP;AACD,GAJqB,CAAtB;AAMA,QAAMK,cAAc,GAAG,uBACpBC,KAAD,IAA8BP,WAAW,CAACQ,QAAZ,CAAqBD,KAArB,CADT,EAErB,CAACP,WAAD,CAFqB,CAAvB;AAIA,QAAMS,kBAAkB,GAAG,uBACxBC,SAAD,IAAwBV,WAAW,CAACW,YAAZ,CAAyBD,SAAzB,CADC,EAEzB,CAACV,WAAD,CAFyB,CAA3B;AAKA,QAAMY,UAAU,GAAGhB,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEQ,WAAV,CAAsBS,KAAzC;AAEA,QAAMC,uBAAuB,GAAG,mBAAQ,MAAM;AAC5C,WACEF,UAAU,YAAYG,+BAAtB,IAA0CH,UAAU,CAACI,gBADvD;AAGD,GAJ+B,EAI7B,CAACJ,UAAD,CAJ6B,CAAhC;AAMA,QAAM,CAACK,WAAD,EAAcC,cAAd,IAAgC,oBAASN,UAAT,aAASA,UAAT,uBAASA,UAAU,CAAEK,WAArB,CAAtC;AACA,uBAAU,MAAM;AACdC,IAAAA,cAAc,CAACN,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAEK,WAAb,CAAd;;AACA,QAAIL,UAAU,YAAYO,8BAA1B,EAA2C;AACzC,YAAMC,WAAW,GAAIP,KAAD,IAAyB;AAC3CK,QAAAA,cAAc,CAACL,KAAD,aAACA,KAAD,uBAACA,KAAK,CAAEI,WAAR,CAAd;AACD,OAFD;;AAGAL,MAAAA,UAAU,CAACS,EAAX,CAAcC,0BAAWC,SAAzB,EAAoCH,WAApC;AAEA,aAAO,MAAM;AACXR,QAAAA,UAAU,CAACY,GAAX,CAAeF,0BAAWC,SAA1B,EAAqCH,WAArC;AACD,OAFD;AAGD,KATD,MASO;AACL,aAAO,MAAM,CAAE,CAAf;AACD;AACF,GAdD,EAcG,CAACR,UAAD,CAdH;AAgBA,uBAAU,MAAM;AACd,QAAIA,UAAU,YAAYG,+BAAtB,IAA0CH,UAAU,CAACI,gBAAzD,EAA2E;AACzEJ,MAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEa,kBAAZ,CAA+BzB,WAA/B;AACA,aAAO,MAAM;AACXY,QAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEc,wBAAZ,CAAqC1B,WAArC;AACD,OAFD;AAGD,KALD,MAKO;AACL,aAAO,MAAM,CAAE,CAAf;AACD;AACF,GATD,EASG,CAACY,UAAD,EAAaZ,WAAb,CATH;AAWA,sBACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,EAAE,GAAGL,KAAL;AAAY,SAAGgC,MAAM,CAACC;AAAtB,KAAb;AAAgD,IAAA,QAAQ,EAAEtB;AAA1D,kBACE,oBAAC,yBAAD;AACE,IAAA,QAAQ,EAAEG,kBADZ;AAEE,IAAA,KAAK,EAAEkB,MAAM,CAACf,UAFhB;AAGE,IAAA,QAAQ,EAAE,CAACE,uBAHb;AAIE,IAAA,OAAO,EAAEF;AAJX,kBAME,oBAAC,0BAAD;AACE,IAAA,KAAK,EAAEe,MAAM,CAACf,UADhB;AAEE,IAAA,SAAS,wBAAEK,WAAF,aAAEA,WAAF,uBAAEA,WAAW,CAAEY,KAAb,EAAF,mEAA0B,EAFrC;AAGE,IAAA,SAAS,EAAEhC,SAHb;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,MAAM,EAAEC;AALV,IANF,CADF,CADF;AAkBD,CA5EM;;;;AA8EP,MAAM4B,MAAM,GAAGG,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE,EADoB;AAE/BhB,EAAAA,UAAU,EAAE;AACVoB,IAAAA,IAAI,EAAE,CADI;AAEVC,IAAAA,KAAK,EAAE;AAFG;AAFmB,CAAlB,CAAf;;AAQA,MAAM/B,qBAAN,CAAmD;AAAA;AAAA,qCAC/B,EAD+B;;AAAA;;AAAA;;AAAA,oCAIxC,CAJwC;;AAAA,qCAKvC,CALuC;;AAAA,wCAMpC,KANoC;;AAAA,qCAO9B,IAP8B;;AAAA;;AAAA,8CAS9B,KAT8B;;AAAA;;AAAA;;AAAA,mCAYzC,MAAM,KAAKgC,MAZ8B;;AAAA,oCAaxC,MAAM,KAAKC,OAb6B;AAAA;;AAejDC,EAAAA,OAAO,GAAS;AACd,SAAKC,UAAL,GAAkB,IAAlB;AACD;;AACDC,EAAAA,aAAa,GAAS;AACpB,SAAKD,UAAL,GAAkB,KAAlB;AACD;;AAED7B,EAAAA,QAAQ,CAACD,KAAD,EAA2B;AACjC,QAAI;AAAE0B,MAAAA,KAAF;AAASM,MAAAA;AAAT,QAAoBhC,KAAK,CAACiC,WAAN,CAAkBC,MAA1C;AACA,SAAKP,MAAL,GAAcD,KAAd;AACA,SAAKE,OAAL,GAAeI,MAAf;;AAEA,QAAI,KAAKF,UAAT,EAAqB;AAAA;;AACnB,iCAAKK,YAAL;AACD;AACF;;AACD/B,EAAAA,YAAY,CAACD,SAAD,EAAqB;AAC/B,QAAI,KAAKiC,OAAL,KAAiBjC,SAArB,EAAgC;AAC9B,WAAKiC,OAAL,GAAejC,SAAf;AACA,WAAKkC,mBAAL,GAA2BC,IAAI,CAACC,GAAL,EAA3B;;AACA,UAAI,KAAKT,UAAT,EAAqB;AAAA;;AACnB,sCAAKU,uBAAL;AACD;AACF;AACF;;AAvCgD","sourcesContent":["import * as React from 'react';\n\nimport { LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';\nimport {\n  ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport { RTCView } from '@livekit/react-native-webrtc';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\nexport type VideoTrackProps = {\n  trackRef: TrackReference | undefined;\n  style?: ViewStyle;\n  objectFit?: 'cover' | 'contain' | undefined;\n  mirror?: boolean;\n  zOrder?: number;\n};\n\nexport const VideoTrack = ({\n  style = {},\n  trackRef,\n  objectFit = 'cover',\n  zOrder,\n  mirror,\n}: VideoTrackProps) => {\n  const [elementInfo] = useState(() => {\n    let info = new VideoTrackElementInfo();\n    info.id = trackRef?.publication?.trackSid;\n    return info;\n  });\n\n  const layoutOnChange = useCallback(\n    (event: LayoutChangeEvent) => elementInfo.onLayout(event),\n    [elementInfo]\n  );\n  const visibilityOnChange = useCallback(\n    (isVisible: boolean) => elementInfo.onVisibility(isVisible),\n    [elementInfo]\n  );\n\n  const videoTrack = trackRef?.publication.track;\n\n  const shouldObserveVisibility = useMemo(() => {\n    return (\n      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n    );\n  }, [videoTrack]);\n\n  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n  useEffect(() => {\n    setMediaStream(videoTrack?.mediaStream);\n    if (videoTrack instanceof LocalVideoTrack) {\n      const onRestarted = (track: Track | null) => {\n        setMediaStream(track?.mediaStream);\n      };\n      videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n      return () => {\n        videoTrack.off(TrackEvent.Restarted, onRestarted);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack]);\n\n  useEffect(() => {\n    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {\n      videoTrack?.observeElementInfo(elementInfo);\n      return () => {\n        videoTrack?.stopObservingElementInfo(elementInfo);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack, elementInfo]);\n\n  return (\n    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n      <ViewPortDetector\n        onChange={visibilityOnChange}\n        style={styles.videoTrack}\n        disabled={!shouldObserveVisibility}\n        propKey={videoTrack}\n      >\n        <RTCView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n        />\n      </ViewPortDetector>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoTrack: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoTrackElementInfo implements ElementInfo {\n  element: object = {};\n  something?: any;\n  id?: string;\n  _width = 0;\n  _height = 0;\n  _observing = false;\n  visible: boolean = true;\n  visibilityChangedAt: number | undefined;\n  pictureInPicture = false;\n  handleResize?: (() => void) | undefined;\n  handleVisibilityChanged?: (() => void) | undefined;\n  width = () => this._width;\n  height = () => this._height;\n\n  observe(): void {\n    this._observing = true;\n  }\n  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  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"]}

package/lib/commonjs/components/VideoView.js

@@ -23,6 +23,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+/**
+ * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
+ */
 const VideoView = _ref => {
   var _mediaStream$toURL;
 
@@ -39,6 +42,11 @@ const VideoView = _ref => {
     info.something = videoTrack;
     return info;
   });
+  const layoutOnChange = (0, React.useCallback)(event => elementInfo.onLayout(event), [elementInfo]);
+  const visibilityOnChange = (0, React.useCallback)(isVisible => elementInfo.onVisibility(isVisible), [elementInfo]);
+  const shouldObserveVisibility = (0, React.useMemo)(() => {
+    return videoTrack instanceof _livekitClient.RemoteVideoTrack && videoTrack.isAdaptiveStream;
+  }, [videoTrack]);
   const [mediaStream, setMediaStream] = (0, React.useState)(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
   (0, React.useEffect)(() => {
     setMediaStream(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
@@ -70,18 +78,14 @@ const VideoView = _ref => {
     style: { ...style,
       ...styles.container
     },
-    onLayout: event => {
-      elementInfo.onLayout(event);
-    }
+    onLayout: layoutOnChange
   }, /*#__PURE__*/React.createElement(_ViewPortDetector.default, {
-    onChange: isVisible => elementInfo.onVisibility(isVisible),
-    style: styles.videoView
-  }, /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCView // eslint-disable-next-line react-native/no-inline-styles
-  , {
-    style: {
-      flex: 1,
-      width: '100%'
-    },
+    onChange: visibilityOnChange,
+    style: styles.videoView,
+    disabled: !shouldObserveVisibility,
+    propKey: videoTrack
+  }, /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCView, {
+    style: styles.videoView,
     streamURL: (_mediaStream$toURL = mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) !== null && _mediaStream$toURL !== void 0 ? _mediaStream$toURL : '',
     objectFit: objectFit,
     zOrder: zOrder,

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

@@ -1 +1 @@
-{"version":3,"sources":["VideoView.tsx"],"names":["VideoView","style","videoTrack","objectFit","zOrder","mirror","elementInfo","info","VideoViewElementInfo","id","sid","something","mediaStream","setMediaStream","LocalVideoTrack","onRestarted","track","on","TrackEvent","Restarted","off","RemoteVideoTrack","isAdaptiveStream","observeElementInfo","stopObservingElementInfo","styles","container","event","onLayout","isVisible","onVisibility","videoView","flex","width","toURL","StyleSheet","create","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","handleResize","visible","visibilityChangedAt","Date","now","handleVisibilityChanged"],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';\nimport {\n  ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n  VideoTrack,\n} from 'livekit-client';\nimport { RTCView } from '@livekit/react-native-webrtc';\nimport { useEffect, useState } from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\n\nexport type Props = {\n  videoTrack?: VideoTrack | undefined;\n  style?: ViewStyle;\n  objectFit?: 'cover' | 'contain' | undefined;\n  mirror?: boolean;\n  zOrder?: number;\n};\n\nexport const VideoView = ({\n  style = {},\n  videoTrack,\n  objectFit = 'cover',\n  zOrder,\n  mirror,\n}: Props) => {\n  const [elementInfo] = useState(() => {\n    let info = new VideoViewElementInfo();\n    info.id = videoTrack?.sid;\n    info.something = videoTrack;\n    return info;\n  });\n\n  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n  useEffect(() => {\n    setMediaStream(videoTrack?.mediaStream);\n    if (videoTrack instanceof LocalVideoTrack) {\n      const onRestarted = (track: Track | null) => {\n        setMediaStream(track?.mediaStream);\n      };\n      videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n      return () => {\n        videoTrack.off(TrackEvent.Restarted, onRestarted);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack]);\n\n  useEffect(() => {\n    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {\n      videoTrack?.observeElementInfo(elementInfo);\n      return () => {\n        videoTrack?.stopObservingElementInfo(elementInfo);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack, elementInfo]);\n\n  return (\n    <View\n      style={{ ...style, ...styles.container }}\n      onLayout={(event) => {\n        elementInfo.onLayout(event);\n      }}\n    >\n      <ViewPortDetector\n        onChange={(isVisible: boolean) => elementInfo.onVisibility(isVisible)}\n        style={styles.videoView}\n      >\n        <RTCView\n          // eslint-disable-next-line react-native/no-inline-styles\n          style={{\n            flex: 1,\n            width: '100%',\n          }}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n        />\n      </ViewPortDetector>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoView: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoViewElementInfo 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  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  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"]}
+{"version":3,"sources":["VideoView.tsx"],"names":["VideoView","style","videoTrack","objectFit","zOrder","mirror","elementInfo","info","VideoViewElementInfo","id","sid","something","layoutOnChange","event","onLayout","visibilityOnChange","isVisible","onVisibility","shouldObserveVisibility","RemoteVideoTrack","isAdaptiveStream","mediaStream","setMediaStream","LocalVideoTrack","onRestarted","track","on","TrackEvent","Restarted","off","observeElementInfo","stopObservingElementInfo","styles","container","videoView","toURL","StyleSheet","create","flex","width","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","handleResize","visible","visibilityChangedAt","Date","now","handleVisibilityChanged"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAOA;;AAGA;;;;;;;;;;AAaA;AACA;AACA;AACO,MAAMA,SAAS,GAAG,QAMZ;AAAA;;AAAA,MANa;AACxBC,IAAAA,KAAK,GAAG,EADgB;AAExBC,IAAAA,UAFwB;AAGxBC,IAAAA,SAAS,GAAG,OAHY;AAIxBC,IAAAA,MAJwB;AAKxBC,IAAAA;AALwB,GAMb;AACX,QAAM,CAACC,WAAD,IAAgB,oBAAS,MAAM;AACnC,QAAIC,IAAI,GAAG,IAAIC,oBAAJ,EAAX;AACAD,IAAAA,IAAI,CAACE,EAAL,GAAUP,UAAV,aAAUA,UAAV,uBAAUA,UAAU,CAAEQ,GAAtB;AACAH,IAAAA,IAAI,CAACI,SAAL,GAAiBT,UAAjB;AACA,WAAOK,IAAP;AACD,GALqB,CAAtB;AAOA,QAAMK,cAAc,GAAG,uBACpBC,KAAD,IAA8BP,WAAW,CAACQ,QAAZ,CAAqBD,KAArB,CADT,EAErB,CAACP,WAAD,CAFqB,CAAvB;AAIA,QAAMS,kBAAkB,GAAG,uBACxBC,SAAD,IAAwBV,WAAW,CAACW,YAAZ,CAAyBD,SAAzB,CADC,EAEzB,CAACV,WAAD,CAFyB,CAA3B;AAIA,QAAMY,uBAAuB,GAAG,mBAAQ,MAAM;AAC5C,WACEhB,UAAU,YAAYiB,+BAAtB,IAA0CjB,UAAU,CAACkB,gBADvD;AAGD,GAJ+B,EAI7B,CAAClB,UAAD,CAJ6B,CAAhC;AAMA,QAAM,CAACmB,WAAD,EAAcC,cAAd,IAAgC,oBAASpB,UAAT,aAASA,UAAT,uBAASA,UAAU,CAAEmB,WAArB,CAAtC;AACA,uBAAU,MAAM;AACdC,IAAAA,cAAc,CAACpB,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAEmB,WAAb,CAAd;;AACA,QAAInB,UAAU,YAAYqB,8BAA1B,EAA2C;AACzC,YAAMC,WAAW,GAAIC,KAAD,IAAyB;AAC3CH,QAAAA,cAAc,CAACG,KAAD,aAACA,KAAD,uBAACA,KAAK,CAAEJ,WAAR,CAAd;AACD,OAFD;;AAGAnB,MAAAA,UAAU,CAACwB,EAAX,CAAcC,0BAAWC,SAAzB,EAAoCJ,WAApC;AAEA,aAAO,MAAM;AACXtB,QAAAA,UAAU,CAAC2B,GAAX,CAAeF,0BAAWC,SAA1B,EAAqCJ,WAArC;AACD,OAFD;AAGD,KATD,MASO;AACL,aAAO,MAAM,CAAE,CAAf;AACD;AACF,GAdD,EAcG,CAACtB,UAAD,CAdH;AAgBA,uBAAU,MAAM;AACd,QAAIA,UAAU,YAAYiB,+BAAtB,IAA0CjB,UAAU,CAACkB,gBAAzD,EAA2E;AACzElB,MAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAE4B,kBAAZ,CAA+BxB,WAA/B;AACA,aAAO,MAAM;AACXJ,QAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAE6B,wBAAZ,CAAqCzB,WAArC;AACD,OAFD;AAGD,KALD,MAKO;AACL,aAAO,MAAM,CAAE,CAAf;AACD;AACF,GATD,EASG,CAACJ,UAAD,EAAaI,WAAb,CATH;AAWA,sBACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,EAAE,GAAGL,KAAL;AAAY,SAAG+B,MAAM,CAACC;AAAtB,KAAb;AAAgD,IAAA,QAAQ,EAAErB;AAA1D,kBACE,oBAAC,yBAAD;AACE,IAAA,QAAQ,EAAEG,kBADZ;AAEE,IAAA,KAAK,EAAEiB,MAAM,CAACE,SAFhB;AAGE,IAAA,QAAQ,EAAE,CAAChB,uBAHb;AAIE,IAAA,OAAO,EAAEhB;AAJX,kBAME,oBAAC,0BAAD;AACE,IAAA,KAAK,EAAE8B,MAAM,CAACE,SADhB;AAEE,IAAA,SAAS,wBAAEb,WAAF,aAAEA,WAAF,uBAAEA,WAAW,CAAEc,KAAb,EAAF,mEAA0B,EAFrC;AAGE,IAAA,SAAS,EAAEhC,SAHb;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,MAAM,EAAEC;AALV,IANF,CADF,CADF;AAkBD,CA1EM;;;;AA4EP,MAAM2B,MAAM,GAAGI,wBAAWC,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE,EADoB;AAE/BC,EAAAA,SAAS,EAAE;AACTI,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,KAAK,EAAE;AAFE;AAFoB,CAAlB,CAAf;;AAQA,MAAM/B,oBAAN,CAAkD;AAAA;AAAA,qCAC9B,EAD8B;;AAAA;;AAAA;;AAAA,oCAIvC,CAJuC;;AAAA,qCAKtC,CALsC;;AAAA,wCAMnC,KANmC;;AAAA,qCAO7B,IAP6B;;AAAA;;AAAA,8CAS7B,KAT6B;;AAAA;;AAAA;;AAAA,mCAYxC,MAAM,KAAKgC,MAZ6B;;AAAA,oCAavC,MAAM,KAAKC,OAb4B;AAAA;;AAehDC,EAAAA,OAAO,GAAS;AACd,SAAKC,UAAL,GAAkB,IAAlB;AACD;;AACDC,EAAAA,aAAa,GAAS;AACpB,SAAKD,UAAL,GAAkB,KAAlB;AACD;;AAED7B,EAAAA,QAAQ,CAACD,KAAD,EAA2B;AACjC,QAAI;AAAE0B,MAAAA,KAAF;AAASM,MAAAA;AAAT,QAAoBhC,KAAK,CAACiC,WAAN,CAAkBC,MAA1C;AACA,SAAKP,MAAL,GAAcD,KAAd;AACA,SAAKE,OAAL,GAAeI,MAAf;;AAEA,QAAI,KAAKF,UAAT,EAAqB;AAAA;;AACnB,iCAAKK,YAAL;AACD;AACF;;AACD/B,EAAAA,YAAY,CAACD,SAAD,EAAqB;AAC/B,QAAI,KAAKiC,OAAL,KAAiBjC,SAArB,EAAgC;AAC9B,WAAKiC,OAAL,GAAejC,SAAf;AACA,WAAKkC,mBAAL,GAA2BC,IAAI,CAACC,GAAL,EAA3B;;AACA,UAAI,KAAKT,UAAT,EAAqB;AAAA;;AACnB,sCAAKU,uBAAL;AACD;AACF;AACF;;AAvC+C","sourcesContent":["import * as React from 'react';\n\nimport { LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';\nimport {\n  ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n  VideoTrack,\n} from 'livekit-client';\nimport { RTCView } from '@livekit/react-native-webrtc';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\n\n/**\n * @deprecated use `VideoTrack` and `VideoTrackProps` instead.\n */\nexport type Props = {\n  videoTrack?: VideoTrack | undefined;\n  style?: ViewStyle;\n  objectFit?: 'cover' | 'contain' | undefined;\n  mirror?: boolean;\n  zOrder?: number;\n};\n\n/**\n * @deprecated use `VideoTrack` and `VideoTrackProps` instead.\n */\nexport const VideoView = ({\n  style = {},\n  videoTrack,\n  objectFit = 'cover',\n  zOrder,\n  mirror,\n}: Props) => {\n  const [elementInfo] = useState(() => {\n    let info = new VideoViewElementInfo();\n    info.id = videoTrack?.sid;\n    info.something = videoTrack;\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  const shouldObserveVisibility = useMemo(() => {\n    return (\n      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n    );\n  }, [videoTrack]);\n\n  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n  useEffect(() => {\n    setMediaStream(videoTrack?.mediaStream);\n    if (videoTrack instanceof LocalVideoTrack) {\n      const onRestarted = (track: Track | null) => {\n        setMediaStream(track?.mediaStream);\n      };\n      videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n      return () => {\n        videoTrack.off(TrackEvent.Restarted, onRestarted);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack]);\n\n  useEffect(() => {\n    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {\n      videoTrack?.observeElementInfo(elementInfo);\n      return () => {\n        videoTrack?.stopObservingElementInfo(elementInfo);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack, elementInfo]);\n\n  return (\n    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n      <ViewPortDetector\n        onChange={visibilityOnChange}\n        style={styles.videoView}\n        disabled={!shouldObserveVisibility}\n        propKey={videoTrack}\n      >\n        <RTCView\n          style={styles.videoView}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n        />\n      </ViewPortDetector>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoView: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoViewElementInfo 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  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  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"]}