@livekit/react-native 2.0.1 → 2.0.2

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/VideoView.js

@@ -39,6 +39,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 +75,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":"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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 { useCallback, useEffect, useMemo, 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 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"]}

package/lib/commonjs/components/ViewPortDetector.js

@@ -17,11 +17,56 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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 DEFAULT_DELAY = 1000;
+
+class TimeoutHandler {
+  constructor() {
+    _defineProperty(this, "handlerRef", {
+      id: -1
+    });
+  }
+
+  get handler() {
+    return this.handlerRef.id;
+  }
+
+  set handler(n) {
+    this.handlerRef.id = n;
+  }
+
+  clear() {
+    clearTimeout(this.handlerRef.id);
+  }
+
+}
+
+function setIntervalWithTimeout(callback, intervalMs) {
+  let handleWrapper = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new TimeoutHandler();
+  let cleared = false;
+
+  const timeout = () => {
+    handleWrapper.handler = setTimeout(() => {
+      callback(() => {
+        cleared = true;
+        handleWrapper.clear();
+      });
+
+      if (!cleared) {
+        timeout();
+      }
+    }, intervalMs);
+  };
+
+  timeout();
+  return handleWrapper;
+}
 /**
  * Detects when this is in the viewport and visible.
  *
  * Will not fire visibility changes for zero width/height components.
  */
+
+
 class ViewPortDetector extends _react.Component {
   constructor(props) {
     super(props);
@@ -32,6 +77,83 @@ class ViewPortDetector extends _react.Component {
 
     _defineProperty(this, "view", null);
 
+    _defineProperty(this, "lastAppStateActive", false);
+
+    _defineProperty(this, "appStateSubscription", null);
+
+    _defineProperty(this, "hasValidTimeout", (disabled, delay) => {
+      let disabledValue = disabled !== null && disabled !== void 0 ? disabled : false;
+      let delayValue = delay !== null && delay !== void 0 ? delay : DEFAULT_DELAY;
+      return _reactNative.AppState.currentState === 'active' && !disabledValue && delayValue > 0;
+    });
+
+    _defineProperty(this, "handleAppStateChange", nextAppState => {
+      let nextAppStateActive = nextAppState === 'active';
+
+      if (this.lastAppStateActive !== nextAppStateActive) {
+        this.checkVisibility();
+      }
+
+      this.lastAppStateActive = nextAppStateActive;
+
+      if (!this.hasValidTimeout(this.props.disabled, this.props.delay)) {
+        this.stopWatching();
+      } else {
+        this.startWatching();
+      }
+    });
+
+    _defineProperty(this, "startWatching", () => {
+      if (this.interval) {
+        return;
+      }
+
+      this.interval = setIntervalWithTimeout(this.checkVisibility, this.props.delay || DEFAULT_DELAY);
+    });
+
+    _defineProperty(this, "stopWatching", () => {
+      var _this$interval;
+
+      (_this$interval = this.interval) === null || _this$interval === void 0 ? void 0 : _this$interval.clear();
+      this.interval = null;
+    });
+
+    _defineProperty(this, "checkVisibility", () => {
+      if (!this.view) {
+        return;
+      }
+
+      if (_reactNative.AppState.currentState !== 'active') {
+        this.updateVisibility(false);
+        return;
+      }
+
+      this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
+        this.checkInViewPort(width, height);
+      });
+    });
+
+    _defineProperty(this, "checkInViewPort", (width, height) => {
+      let isVisible; // Not visible if any of these are missing.
+
+      if (!width || !height) {
+        isVisible = false;
+      } else {
+        isVisible = true;
+      }
+
+      this.updateVisibility(isVisible);
+    });
+
+    _defineProperty(this, "updateVisibility", isVisible => {
+      if (this.lastValue !== isVisible) {
+        var _this$props$onChange, _this$props;
+
+        this.lastValue = isVisible;
+        (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, isVisible);
+      }
+    });
+
     this.state = {
       rectTop: 0,
       rectBottom: 0
@@ -39,58 +161,31 @@ class ViewPortDetector extends _react.Component {
   }
 
   componentDidMount() {
-    if (!this.props.disabled) {
+    this.lastAppStateActive = _reactNative.AppState.currentState === 'active';
+    this.appStateSubscription = _reactNative.AppState.addEventListener('change', this.handleAppStateChange);
+
+    if (this.hasValidTimeout(this.props.disabled, this.props.delay)) {
       this.startWatching();
     }
   }
 
   componentWillUnmount() {
+    var _this$appStateSubscri;
+
+    (_this$appStateSubscri = this.appStateSubscription) === null || _this$appStateSubscri === void 0 ? void 0 : _this$appStateSubscri.remove();
+    this.appStateSubscription = null;
     this.stopWatching();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.disabled) {
+    if (!this.hasValidTimeout(nextProps.disabled, nextProps.delay)) {
       this.stopWatching();
     } else {
-      this.lastValue = null;
-      this.startWatching();
-    }
-  }
-
-  startWatching() {
-    if (this.interval) {
-      return;
-    }
-
-    this.interval = setInterval(() => {
-      if (!this.view) {
-        return;
+      if (this.props.propKey !== nextProps.propKey) {
+        this.lastValue = null;
       }
 
-      this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
-        this.checkInViewPort(width, height);
-      });
-    }, this.props.delay || 100);
-  }
-
-  stopWatching() {
-    this.interval = clearInterval(this.interval);
-  }
-
-  checkInViewPort(width, height) {
-    let isVisible; // Not visible if any of these are missing.
-
-    if (!width || !height) {
-      isVisible = false;
-    } else {
-      isVisible = true;
-    }
-
-    if (this.lastValue !== isVisible) {
-      var _this$props$onChange, _this$props;
-
-      this.lastValue = isVisible;
-      (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, isVisible);
+      this.startWatching();
     }
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["ViewPortDetector.tsx"],"names":["ViewPortDetector","Component","constructor","props","state","rectTop","rectBottom","componentDidMount","disabled","startWatching","componentWillUnmount","stopWatching","UNSAFE_componentWillReceiveProps","nextProps","lastValue","interval","setInterval","view","measure","_x","_y","width","height","_pageX","_pageY","checkInViewPort","delay","clearInterval","isVisible","onChange","render","component","children"],"mappings":"AAAA;;;;;;;AAEA;;AACA;;;;;;;;;;AASA;AACA;AACA;AACA;AACA;AACe,MAAMA,gBAAN,SAA+BC,gBAA/B,CAEb;AAKAC,EAAAA,WAAW,CAACC,KAAD,EAAe;AACxB,UAAMA,KAAN;;AADwB,uCAJU,IAIV;;AAAA,sCAHK,IAGL;;AAAA,kCAFE,IAEF;;AAExB,SAAKC,KAAL,GAAa;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,UAAU,EAAE;AAA1B,KAAb;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB,QAAI,CAAC,KAAKJ,KAAL,CAAWK,QAAhB,EAA0B;AACxB,WAAKC,aAAL;AACD;AACF;;AAEDC,EAAAA,oBAAoB,GAAG;AACrB,SAAKC,YAAL;AACD;;AAEDC,EAAAA,gCAAgC,CAACC,SAAD,EAAmB;AACjD,QAAIA,SAAS,CAACL,QAAd,EAAwB;AACtB,WAAKG,YAAL;AACD,KAFD,MAEO;AACL,WAAKG,SAAL,GAAiB,IAAjB;AACA,WAAKL,aAAL;AACD;AACF;;AAEOA,EAAAA,aAAa,GAAG;AACtB,QAAI,KAAKM,QAAT,EAAmB;AACjB;AACD;;AACD,SAAKA,QAAL,GAAgBC,WAAW,CAAC,MAAM;AAChC,UAAI,CAAC,KAAKC,IAAV,EAAgB;AACd;AACD;;AACD,WAAKA,IAAL,CAAUC,OAAV,CAAkB,CAACC,EAAD,EAAKC,EAAL,EAASC,KAAT,EAAgBC,MAAhB,EAAwBC,MAAxB,EAAgCC,MAAhC,KAA2C;AAC3D,aAAKC,eAAL,CAAqBJ,KAArB,EAA4BC,MAA5B;AACD,OAFD;AAGD,KAP0B,EAOxB,KAAKnB,KAAL,CAAWuB,KAAX,IAAoB,GAPI,CAA3B;AAQD;;AAEOf,EAAAA,YAAY,GAAG;AACrB,SAAKI,QAAL,GAAgBY,aAAa,CAAC,KAAKZ,QAAN,CAA7B;AACD;;AAEOU,EAAAA,eAAe,CAACJ,KAAD,EAAiBC,MAAjB,EAAkC;AACvD,QAAIM,SAAJ,CADuD,CAEvD;;AACA,QAAI,CAACP,KAAD,IAAU,CAACC,MAAf,EAAuB;AACrBM,MAAAA,SAAS,GAAG,KAAZ;AACD,KAFD,MAEO;AACLA,MAAAA,SAAS,GAAG,IAAZ;AACD;;AAED,QAAI,KAAKd,SAAL,KAAmBc,SAAvB,EAAkC;AAAA;;AAChC,WAAKd,SAAL,GAAiBc,SAAjB;AACA,kDAAKzB,KAAL,EAAW0B,QAAX,gGAAsBD,SAAtB;AACD;AACF;;AAEDE,EAAAA,MAAM,GAAG;AACP,wBACE,6BAAC,iBAAD;AACE,MAAA,WAAW,EAAE,KADf;AAEE,MAAA,GAAG,EAAGC,SAAD,IAAe;AAClB,aAAKd,IAAL,GAAYc,SAAZ;AACD;AAJH,OAKM,KAAK5B,KALX,GAOG,KAAKA,KAAL,CAAW6B,QAPd,CADF;AAWD;;AA1ED","sourcesContent":["'use strict';\n\nimport React, { Component, PropsWithChildren } from 'react';\nimport { View, ViewStyle } from 'react-native';\n\nexport type Props = {\n  disabled?: boolean;\n  style?: ViewStyle;\n  onChange?: (isVisible: boolean) => void;\n  delay?: number;\n};\n\n/**\n * Detects when this is in the viewport and visible.\n *\n * Will not fire visibility changes for zero width/height components.\n */\nexport default class ViewPortDetector extends Component<\n  PropsWithChildren<Props>\n> {\n  private lastValue: boolean | null = null;\n  private interval: any | null = null;\n  private view: View | null = null;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { rectTop: 0, rectBottom: 0 };\n  }\n\n  componentDidMount() {\n    if (!this.props.disabled) {\n      this.startWatching();\n    }\n  }\n\n  componentWillUnmount() {\n    this.stopWatching();\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps: Props) {\n    if (nextProps.disabled) {\n      this.stopWatching();\n    } else {\n      this.lastValue = null;\n      this.startWatching();\n    }\n  }\n\n  private startWatching() {\n    if (this.interval) {\n      return;\n    }\n    this.interval = setInterval(() => {\n      if (!this.view) {\n        return;\n      }\n      this.view.measure((_x, _y, width, height, _pageX, _pageY) => {\n        this.checkInViewPort(width, height);\n      });\n    }, this.props.delay || 100);\n  }\n\n  private stopWatching() {\n    this.interval = clearInterval(this.interval);\n  }\n\n  private checkInViewPort(width?: number, height?: number) {\n    let isVisible: boolean;\n    // Not visible if any of these are missing.\n    if (!width || !height) {\n      isVisible = false;\n    } else {\n      isVisible = true;\n    }\n\n    if (this.lastValue !== isVisible) {\n      this.lastValue = isVisible;\n      this.props.onChange?.(isVisible);\n    }\n  }\n\n  render() {\n    return (\n      <View\n        collapsable={false}\n        ref={(component) => {\n          this.view = component;\n        }}\n        {...this.props}\n      >\n        {this.props.children}\n      </View>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["ViewPortDetector.tsx"],"names":["DEFAULT_DELAY","TimeoutHandler","id","handler","handlerRef","n","clear","clearTimeout","setIntervalWithTimeout","callback","intervalMs","handleWrapper","cleared","timeout","setTimeout","ViewPortDetector","Component","constructor","props","disabled","delay","disabledValue","delayValue","AppState","currentState","nextAppState","nextAppStateActive","lastAppStateActive","checkVisibility","hasValidTimeout","stopWatching","startWatching","interval","view","updateVisibility","measure","_x","_y","width","height","_pageX","_pageY","checkInViewPort","isVisible","lastValue","onChange","state","rectTop","rectBottom","componentDidMount","appStateSubscription","addEventListener","handleAppStateChange","componentWillUnmount","remove","UNSAFE_componentWillReceiveProps","nextProps","propKey","render","component","children"],"mappings":"AAAA;;;;;;;AAEA;;AACA;;;;;;;;;;AAQA,MAAMA,aAAa,GAAG,IAAtB;;AAUA,MAAMC,cAAN,CAAqB;AAAA;AAAA,wCACe;AAAEC,MAAAA,EAAE,EAAE,CAAC;AAAP,KADf;AAAA;;AAGR,MAAPC,OAAO,GAAQ;AACjB,WAAO,KAAKC,UAAL,CAAgBF,EAAvB;AACD;;AACU,MAAPC,OAAO,CAACE,CAAD,EAAS;AAClB,SAAKD,UAAL,CAAgBF,EAAhB,GAAqBG,CAArB;AACD;;AAEDC,EAAAA,KAAK,GAAG;AACNC,IAAAA,YAAY,CAAC,KAAKH,UAAL,CAAgBF,EAAjB,CAAZ;AACD;;AAZkB;;AAerB,SAASM,sBAAT,CACEC,QADF,EAEEC,UAFF,EAIkB;AAAA,MADhBC,aACgB,uEADA,IAAIV,cAAJ,EACA;AAChB,MAAIW,OAAO,GAAG,KAAd;;AAEA,QAAMC,OAAO,GAAG,MAAM;AACpBF,IAAAA,aAAa,CAACR,OAAd,GAAwBW,UAAU,CAAC,MAAM;AACvCL,MAAAA,QAAQ,CAAC,MAAM;AACbG,QAAAA,OAAO,GAAG,IAAV;AACAD,QAAAA,aAAa,CAACL,KAAd;AACD,OAHO,CAAR;;AAIA,UAAI,CAACM,OAAL,EAAc;AACZC,QAAAA,OAAO;AACR;AACF,KARiC,EAQ/BH,UAR+B,CAAlC;AASD,GAVD;;AAWAG,EAAAA,OAAO;AACP,SAAOF,aAAP;AACD;AAED;AACA;AACA;AACA;AACA;;;AACe,MAAMI,gBAAN,SAA+BC,gBAA/B,CAEb;AAOAC,EAAAA,WAAW,CAACC,KAAD,EAAe;AACxB,UAAMA,KAAN;;AADwB,uCANU,IAMV;;AAAA,sCALgB,IAKhB;;AAAA,kCAJE,IAIF;;AAAA,gDAHG,KAGH;;AAAA,kDAFqC,IAErC;;AAAA,6CAsBR,CAACC,QAAD,EAAqBC,KAArB,KAAiD;AACjE,UAAIC,aAAa,GAAGF,QAAH,aAAGA,QAAH,cAAGA,QAAH,GAAe,KAAhC;AACA,UAAIG,UAAU,GAAGF,KAAH,aAAGA,KAAH,cAAGA,KAAH,GAAYpB,aAA1B;AACA,aACEuB,sBAASC,YAAT,KAA0B,QAA1B,IAAsC,CAACH,aAAvC,IAAwDC,UAAU,GAAG,CADvE;AAGD,KA5ByB;;AAAA,kDAwCFG,YAAD,IAAkC;AACvD,UAAIC,kBAAkB,GAAGD,YAAY,KAAK,QAA1C;;AACA,UAAI,KAAKE,kBAAL,KAA4BD,kBAAhC,EAAoD;AAClD,aAAKE,eAAL;AACD;;AACD,WAAKD,kBAAL,GAA0BD,kBAA1B;;AAEA,UAAI,CAAC,KAAKG,eAAL,CAAqB,KAAKX,KAAL,CAAWC,QAAhC,EAA0C,KAAKD,KAAL,CAAWE,KAArD,CAAL,EAAkE;AAChE,aAAKU,YAAL;AACD,OAFD,MAEO;AACL,aAAKC,aAAL;AACD;AACF,KApDyB;;AAAA,2CAsDV,MAAM;AACpB,UAAI,KAAKC,QAAT,EAAmB;AACjB;AACD;;AACD,WAAKA,QAAL,GAAgBxB,sBAAsB,CACpC,KAAKoB,eAD+B,EAEpC,KAAKV,KAAL,CAAWE,KAAX,IAAoBpB,aAFgB,CAAtC;AAID,KA9DyB;;AAAA,0CAgEX,MAAM;AAAA;;AACnB,6BAAKgC,QAAL,kEAAe1B,KAAf;AACA,WAAK0B,QAAL,GAAgB,IAAhB;AACD,KAnEyB;;AAAA,6CAqER,MAAM;AACtB,UAAI,CAAC,KAAKC,IAAV,EAAgB;AACd;AACD;;AAED,UAAIV,sBAASC,YAAT,KAA0B,QAA9B,EAAwC;AACtC,aAAKU,gBAAL,CAAsB,KAAtB;AACA;AACD;;AAED,WAAKD,IAAL,CAAUE,OAAV,CAAkB,CAACC,EAAD,EAAKC,EAAL,EAASC,KAAT,EAAgBC,MAAhB,EAAwBC,MAAxB,EAAgCC,MAAhC,KAA2C;AAC3D,aAAKC,eAAL,CAAqBJ,KAArB,EAA4BC,MAA5B;AACD,OAFD;AAGD,KAlFyB;;AAAA,6CAmFR,CAACD,KAAD,EAAiBC,MAAjB,KAAqC;AACrD,UAAII,SAAJ,CADqD,CAErD;;AACA,UAAI,CAACL,KAAD,IAAU,CAACC,MAAf,EAAuB;AACrBI,QAAAA,SAAS,GAAG,KAAZ;AACD,OAFD,MAEO;AACLA,QAAAA,SAAS,GAAG,IAAZ;AACD;;AACD,WAAKT,gBAAL,CAAsBS,SAAtB;AACD,KA5FyB;;AAAA,8CA8FNA,SAAD,IAAwB;AACzC,UAAI,KAAKC,SAAL,KAAmBD,SAAvB,EAAkC;AAAA;;AAChC,aAAKC,SAAL,GAAiBD,SAAjB;AACA,oDAAKzB,KAAL,EAAW2B,QAAX,gGAAsBF,SAAtB;AACD;AACF,KAnGyB;;AAExB,SAAKG,KAAL,GAAa;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,UAAU,EAAE;AAA1B,KAAb;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB,SAAKtB,kBAAL,GAA0BJ,sBAASC,YAAT,KAA0B,QAApD;AACA,SAAK0B,oBAAL,GAA4B3B,sBAAS4B,gBAAT,CAC1B,QAD0B,EAE1B,KAAKC,oBAFqB,CAA5B;;AAIA,QAAI,KAAKvB,eAAL,CAAqB,KAAKX,KAAL,CAAWC,QAAhC,EAA0C,KAAKD,KAAL,CAAWE,KAArD,CAAJ,EAAiE;AAC/D,WAAKW,aAAL;AACD;AACF;;AAEDsB,EAAAA,oBAAoB,GAAG;AAAA;;AACrB,kCAAKH,oBAAL,gFAA2BI,MAA3B;AACA,SAAKJ,oBAAL,GAA4B,IAA5B;AACA,SAAKpB,YAAL;AACD;;AAUDyB,EAAAA,gCAAgC,CAACC,SAAD,EAAmB;AACjD,QAAI,CAAC,KAAK3B,eAAL,CAAqB2B,SAAS,CAACrC,QAA/B,EAAyCqC,SAAS,CAACpC,KAAnD,CAAL,EAAgE;AAC9D,WAAKU,YAAL;AACD,KAFD,MAEO;AACL,UAAI,KAAKZ,KAAL,CAAWuC,OAAX,KAAuBD,SAAS,CAACC,OAArC,EAA8C;AAC5C,aAAKb,SAAL,GAAiB,IAAjB;AACD;;AACD,WAAKb,aAAL;AACD;AACF;;AA6DD2B,EAAAA,MAAM,GAAG;AACP,wBACE,6BAAC,iBAAD;AACE,MAAA,WAAW,EAAE,KADf;AAEE,MAAA,GAAG,EAAGC,SAAD,IAAe;AAClB,aAAK1B,IAAL,GAAY0B,SAAZ;AACD;AAJH,OAKM,KAAKzC,KALX,GAOG,KAAKA,KAAL,CAAW0C,QAPd,CADF;AAWD;;AAvHD","sourcesContent":["'use strict';\n\nimport React, { Component, PropsWithChildren } from 'react';\nimport {\n  AppState,\n  AppStateStatus,\n  NativeEventSubscription,\n  View,\n  ViewStyle,\n} from 'react-native';\n\nconst DEFAULT_DELAY = 1000;\n\nexport type Props = {\n  disabled?: boolean;\n  style?: ViewStyle;\n  onChange?: (isVisible: boolean) => void;\n  delay?: number;\n  propKey?: any;\n};\n\nclass TimeoutHandler {\n  private handlerRef: { id: any } = { id: -1 };\n\n  get handler(): any {\n    return this.handlerRef.id;\n  }\n  set handler(n: any) {\n    this.handlerRef.id = n;\n  }\n\n  clear() {\n    clearTimeout(this.handlerRef.id as any);\n  }\n}\n\nfunction setIntervalWithTimeout(\n  callback: (clear: () => void) => any,\n  intervalMs: number,\n  handleWrapper = new TimeoutHandler()\n): TimeoutHandler {\n  let cleared = false;\n\n  const timeout = () => {\n    handleWrapper.handler = setTimeout(() => {\n      callback(() => {\n        cleared = true;\n        handleWrapper.clear();\n      });\n      if (!cleared) {\n        timeout();\n      }\n    }, intervalMs);\n  };\n  timeout();\n  return handleWrapper;\n}\n\n/**\n * Detects when this is in the viewport and visible.\n *\n * Will not fire visibility changes for zero width/height components.\n */\nexport default class ViewPortDetector extends Component<\n  PropsWithChildren<Props>\n> {\n  private lastValue: boolean | null = null;\n  private interval: TimeoutHandler | null = null;\n  private view: View | null = null;\n  private lastAppStateActive = false;\n  private appStateSubscription: NativeEventSubscription | null = null;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { rectTop: 0, rectBottom: 0 };\n  }\n\n  componentDidMount() {\n    this.lastAppStateActive = AppState.currentState === 'active';\n    this.appStateSubscription = AppState.addEventListener(\n      'change',\n      this.handleAppStateChange\n    );\n    if (this.hasValidTimeout(this.props.disabled, this.props.delay)) {\n      this.startWatching();\n    }\n  }\n\n  componentWillUnmount() {\n    this.appStateSubscription?.remove();\n    this.appStateSubscription = null;\n    this.stopWatching();\n  }\n\n  hasValidTimeout = (disabled?: boolean, delay?: number): boolean => {\n    let disabledValue = disabled ?? false;\n    let delayValue = delay ?? DEFAULT_DELAY;\n    return (\n      AppState.currentState === 'active' && !disabledValue && delayValue > 0\n    );\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps: Props) {\n    if (!this.hasValidTimeout(nextProps.disabled, nextProps.delay)) {\n      this.stopWatching();\n    } else {\n      if (this.props.propKey !== nextProps.propKey) {\n        this.lastValue = null;\n      }\n      this.startWatching();\n    }\n  }\n  handleAppStateChange = (nextAppState: AppStateStatus) => {\n    let nextAppStateActive = nextAppState === 'active';\n    if (this.lastAppStateActive !== nextAppStateActive) {\n      this.checkVisibility();\n    }\n    this.lastAppStateActive = nextAppStateActive;\n\n    if (!this.hasValidTimeout(this.props.disabled, this.props.delay)) {\n      this.stopWatching();\n    } else {\n      this.startWatching();\n    }\n  };\n\n  startWatching = () => {\n    if (this.interval) {\n      return;\n    }\n    this.interval = setIntervalWithTimeout(\n      this.checkVisibility,\n      this.props.delay || DEFAULT_DELAY\n    );\n  };\n\n  stopWatching = () => {\n    this.interval?.clear();\n    this.interval = null;\n  };\n\n  checkVisibility = () => {\n    if (!this.view) {\n      return;\n    }\n\n    if (AppState.currentState !== 'active') {\n      this.updateVisibility(false);\n      return;\n    }\n\n    this.view.measure((_x, _y, width, height, _pageX, _pageY) => {\n      this.checkInViewPort(width, height);\n    });\n  };\n  checkInViewPort = (width?: number, height?: number) => {\n    let isVisible: boolean;\n    // Not visible if any of these are missing.\n    if (!width || !height) {\n      isVisible = false;\n    } else {\n      isVisible = true;\n    }\n    this.updateVisibility(isVisible);\n  };\n\n  updateVisibility = (isVisible: boolean) => {\n    if (this.lastValue !== isVisible) {\n      this.lastValue = isVisible;\n      this.props.onChange?.(isVisible);\n    }\n  };\n  render() {\n    return (\n      <View\n        collapsable={false}\n        ref={(component) => {\n          this.view = component;\n        }}\n        {...this.props}\n      >\n        {this.props.children}\n      </View>\n    );\n  }\n}\n"]}

package/lib/module/components/VideoView.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { LocalVideoTrack, TrackEvent } from 'livekit-client';
 import { RTCView } from '@livekit/react-native-webrtc';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 export const VideoView = _ref => {
@@ -23,6 +23,11 @@ export const VideoView = _ref => {
     info.something = videoTrack;
     return info;
   });
+  const layoutOnChange = useCallback(event => elementInfo.onLayout(event), [elementInfo]);
+  const visibilityOnChange = useCallback(isVisible => elementInfo.onVisibility(isVisible), [elementInfo]);
+  const shouldObserveVisibility = useMemo(() => {
+    return videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream;
+  }, [videoTrack]);
   const [mediaStream, setMediaStream] = useState(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
   useEffect(() => {
     setMediaStream(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
@@ -54,18 +59,14 @@ export const VideoView = _ref => {
     style: { ...style,
       ...styles.container
     },
-    onLayout: event => {
-      elementInfo.onLayout(event);
-    }
+    onLayout: layoutOnChange
   }, /*#__PURE__*/React.createElement(ViewPortDetector, {
-    onChange: isVisible => elementInfo.onVisibility(isVisible),
-    style: styles.videoView
-  }, /*#__PURE__*/React.createElement(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(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/module/components/VideoView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VideoView.tsx"],"names":["React","StyleSheet","View","LocalVideoTrack","TrackEvent","RTCView","useEffect","useState","RemoteVideoTrack","ViewPortDetector","VideoView","style","videoTrack","objectFit","zOrder","mirror","elementInfo","info","VideoViewElementInfo","id","sid","something","mediaStream","setMediaStream","onRestarted","track","on","Restarted","off","isAdaptiveStream","observeElementInfo","stopObservingElementInfo","styles","container","event","onLayout","isVisible","onVisibility","videoView","flex","width","toURL","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":["React","StyleSheet","View","LocalVideoTrack","TrackEvent","RTCView","useCallback","useEffect","useMemo","useState","RemoteVideoTrack","ViewPortDetector","VideoView","style","videoTrack","objectFit","zOrder","mirror","elementInfo","info","VideoViewElementInfo","id","sid","something","layoutOnChange","event","onLayout","visibilityOnChange","isVisible","onVisibility","shouldObserveVisibility","isAdaptiveStream","mediaStream","setMediaStream","onRestarted","track","on","Restarted","off","observeElementInfo","stopObservingElementInfo","styles","container","videoView","toURL","create","flex","width","_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 { useCallback, useEffect, useMemo, 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 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"]}

package/lib/module/components/ViewPortDetector.js

@@ -5,13 +5,57 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 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; }
 
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { AppState, View } from 'react-native';
+const DEFAULT_DELAY = 1000;
+
+class TimeoutHandler {
+  constructor() {
+    _defineProperty(this, "handlerRef", {
+      id: -1
+    });
+  }
+
+  get handler() {
+    return this.handlerRef.id;
+  }
+
+  set handler(n) {
+    this.handlerRef.id = n;
+  }
+
+  clear() {
+    clearTimeout(this.handlerRef.id);
+  }
+
+}
+
+function setIntervalWithTimeout(callback, intervalMs) {
+  let handleWrapper = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new TimeoutHandler();
+  let cleared = false;
 
+  const timeout = () => {
+    handleWrapper.handler = setTimeout(() => {
+      callback(() => {
+        cleared = true;
+        handleWrapper.clear();
+      });
+
+      if (!cleared) {
+        timeout();
+      }
+    }, intervalMs);
+  };
+
+  timeout();
+  return handleWrapper;
+}
 /**
  * Detects when this is in the viewport and visible.
  *
  * Will not fire visibility changes for zero width/height components.
  */
+
+
 export default class ViewPortDetector extends Component {
   constructor(props) {
     super(props);
@@ -22,6 +66,83 @@ export default class ViewPortDetector extends Component {
 
     _defineProperty(this, "view", null);
 
+    _defineProperty(this, "lastAppStateActive", false);
+
+    _defineProperty(this, "appStateSubscription", null);
+
+    _defineProperty(this, "hasValidTimeout", (disabled, delay) => {
+      let disabledValue = disabled !== null && disabled !== void 0 ? disabled : false;
+      let delayValue = delay !== null && delay !== void 0 ? delay : DEFAULT_DELAY;
+      return AppState.currentState === 'active' && !disabledValue && delayValue > 0;
+    });
+
+    _defineProperty(this, "handleAppStateChange", nextAppState => {
+      let nextAppStateActive = nextAppState === 'active';
+
+      if (this.lastAppStateActive !== nextAppStateActive) {
+        this.checkVisibility();
+      }
+
+      this.lastAppStateActive = nextAppStateActive;
+
+      if (!this.hasValidTimeout(this.props.disabled, this.props.delay)) {
+        this.stopWatching();
+      } else {
+        this.startWatching();
+      }
+    });
+
+    _defineProperty(this, "startWatching", () => {
+      if (this.interval) {
+        return;
+      }
+
+      this.interval = setIntervalWithTimeout(this.checkVisibility, this.props.delay || DEFAULT_DELAY);
+    });
+
+    _defineProperty(this, "stopWatching", () => {
+      var _this$interval;
+
+      (_this$interval = this.interval) === null || _this$interval === void 0 ? void 0 : _this$interval.clear();
+      this.interval = null;
+    });
+
+    _defineProperty(this, "checkVisibility", () => {
+      if (!this.view) {
+        return;
+      }
+
+      if (AppState.currentState !== 'active') {
+        this.updateVisibility(false);
+        return;
+      }
+
+      this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
+        this.checkInViewPort(width, height);
+      });
+    });
+
+    _defineProperty(this, "checkInViewPort", (width, height) => {
+      let isVisible; // Not visible if any of these are missing.
+
+      if (!width || !height) {
+        isVisible = false;
+      } else {
+        isVisible = true;
+      }
+
+      this.updateVisibility(isVisible);
+    });
+
+    _defineProperty(this, "updateVisibility", isVisible => {
+      if (this.lastValue !== isVisible) {
+        var _this$props$onChange, _this$props;
+
+        this.lastValue = isVisible;
+        (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, isVisible);
+      }
+    });
+
     this.state = {
       rectTop: 0,
       rectBottom: 0
@@ -29,58 +150,31 @@ export default class ViewPortDetector extends Component {
   }
 
   componentDidMount() {
-    if (!this.props.disabled) {
+    this.lastAppStateActive = AppState.currentState === 'active';
+    this.appStateSubscription = AppState.addEventListener('change', this.handleAppStateChange);
+
+    if (this.hasValidTimeout(this.props.disabled, this.props.delay)) {
       this.startWatching();
     }
   }
 
   componentWillUnmount() {
+    var _this$appStateSubscri;
+
+    (_this$appStateSubscri = this.appStateSubscription) === null || _this$appStateSubscri === void 0 ? void 0 : _this$appStateSubscri.remove();
+    this.appStateSubscription = null;
     this.stopWatching();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.disabled) {
+    if (!this.hasValidTimeout(nextProps.disabled, nextProps.delay)) {
       this.stopWatching();
     } else {
-      this.lastValue = null;
-      this.startWatching();
-    }
-  }
-
-  startWatching() {
-    if (this.interval) {
-      return;
-    }
-
-    this.interval = setInterval(() => {
-      if (!this.view) {
-        return;
+      if (this.props.propKey !== nextProps.propKey) {
+        this.lastValue = null;
       }
 
-      this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
-        this.checkInViewPort(width, height);
-      });
-    }, this.props.delay || 100);
-  }
-
-  stopWatching() {
-    this.interval = clearInterval(this.interval);
-  }
-
-  checkInViewPort(width, height) {
-    let isVisible; // Not visible if any of these are missing.
-
-    if (!width || !height) {
-      isVisible = false;
-    } else {
-      isVisible = true;
-    }
-
-    if (this.lastValue !== isVisible) {
-      var _this$props$onChange, _this$props;
-
-      this.lastValue = isVisible;
-      (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, isVisible);
+      this.startWatching();
     }
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["ViewPortDetector.tsx"],"names":["React","Component","View","ViewPortDetector","constructor","props","state","rectTop","rectBottom","componentDidMount","disabled","startWatching","componentWillUnmount","stopWatching","UNSAFE_componentWillReceiveProps","nextProps","lastValue","interval","setInterval","view","measure","_x","_y","width","height","_pageX","_pageY","checkInViewPort","delay","clearInterval","isVisible","onChange","render","component","children"],"mappings":"AAAA;;;;;;AAEA,OAAOA,KAAP,IAAgBC,SAAhB,QAAoD,OAApD;AACA,SAASC,IAAT,QAAgC,cAAhC;;AASA;AACA;AACA;AACA;AACA;AACA,eAAe,MAAMC,gBAAN,SAA+BF,SAA/B,CAEb;AAKAG,EAAAA,WAAW,CAACC,KAAD,EAAe;AACxB,UAAMA,KAAN;;AADwB,uCAJU,IAIV;;AAAA,sCAHK,IAGL;;AAAA,kCAFE,IAEF;;AAExB,SAAKC,KAAL,GAAa;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,UAAU,EAAE;AAA1B,KAAb;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB,QAAI,CAAC,KAAKJ,KAAL,CAAWK,QAAhB,EAA0B;AACxB,WAAKC,aAAL;AACD;AACF;;AAEDC,EAAAA,oBAAoB,GAAG;AACrB,SAAKC,YAAL;AACD;;AAEDC,EAAAA,gCAAgC,CAACC,SAAD,EAAmB;AACjD,QAAIA,SAAS,CAACL,QAAd,EAAwB;AACtB,WAAKG,YAAL;AACD,KAFD,MAEO;AACL,WAAKG,SAAL,GAAiB,IAAjB;AACA,WAAKL,aAAL;AACD;AACF;;AAEOA,EAAAA,aAAa,GAAG;AACtB,QAAI,KAAKM,QAAT,EAAmB;AACjB;AACD;;AACD,SAAKA,QAAL,GAAgBC,WAAW,CAAC,MAAM;AAChC,UAAI,CAAC,KAAKC,IAAV,EAAgB;AACd;AACD;;AACD,WAAKA,IAAL,CAAUC,OAAV,CAAkB,CAACC,EAAD,EAAKC,EAAL,EAASC,KAAT,EAAgBC,MAAhB,EAAwBC,MAAxB,EAAgCC,MAAhC,KAA2C;AAC3D,aAAKC,eAAL,CAAqBJ,KAArB,EAA4BC,MAA5B;AACD,OAFD;AAGD,KAP0B,EAOxB,KAAKnB,KAAL,CAAWuB,KAAX,IAAoB,GAPI,CAA3B;AAQD;;AAEOf,EAAAA,YAAY,GAAG;AACrB,SAAKI,QAAL,GAAgBY,aAAa,CAAC,KAAKZ,QAAN,CAA7B;AACD;;AAEOU,EAAAA,eAAe,CAACJ,KAAD,EAAiBC,MAAjB,EAAkC;AACvD,QAAIM,SAAJ,CADuD,CAEvD;;AACA,QAAI,CAACP,KAAD,IAAU,CAACC,MAAf,EAAuB;AACrBM,MAAAA,SAAS,GAAG,KAAZ;AACD,KAFD,MAEO;AACLA,MAAAA,SAAS,GAAG,IAAZ;AACD;;AAED,QAAI,KAAKd,SAAL,KAAmBc,SAAvB,EAAkC;AAAA;;AAChC,WAAKd,SAAL,GAAiBc,SAAjB;AACA,kDAAKzB,KAAL,EAAW0B,QAAX,gGAAsBD,SAAtB;AACD;AACF;;AAEDE,EAAAA,MAAM,GAAG;AACP,wBACE,oBAAC,IAAD;AACE,MAAA,WAAW,EAAE,KADf;AAEE,MAAA,GAAG,EAAGC,SAAD,IAAe;AAClB,aAAKd,IAAL,GAAYc,SAAZ;AACD;AAJH,OAKM,KAAK5B,KALX,GAOG,KAAKA,KAAL,CAAW6B,QAPd,CADF;AAWD;;AA1ED","sourcesContent":["'use strict';\n\nimport React, { Component, PropsWithChildren } from 'react';\nimport { View, ViewStyle } from 'react-native';\n\nexport type Props = {\n  disabled?: boolean;\n  style?: ViewStyle;\n  onChange?: (isVisible: boolean) => void;\n  delay?: number;\n};\n\n/**\n * Detects when this is in the viewport and visible.\n *\n * Will not fire visibility changes for zero width/height components.\n */\nexport default class ViewPortDetector extends Component<\n  PropsWithChildren<Props>\n> {\n  private lastValue: boolean | null = null;\n  private interval: any | null = null;\n  private view: View | null = null;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { rectTop: 0, rectBottom: 0 };\n  }\n\n  componentDidMount() {\n    if (!this.props.disabled) {\n      this.startWatching();\n    }\n  }\n\n  componentWillUnmount() {\n    this.stopWatching();\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps: Props) {\n    if (nextProps.disabled) {\n      this.stopWatching();\n    } else {\n      this.lastValue = null;\n      this.startWatching();\n    }\n  }\n\n  private startWatching() {\n    if (this.interval) {\n      return;\n    }\n    this.interval = setInterval(() => {\n      if (!this.view) {\n        return;\n      }\n      this.view.measure((_x, _y, width, height, _pageX, _pageY) => {\n        this.checkInViewPort(width, height);\n      });\n    }, this.props.delay || 100);\n  }\n\n  private stopWatching() {\n    this.interval = clearInterval(this.interval);\n  }\n\n  private checkInViewPort(width?: number, height?: number) {\n    let isVisible: boolean;\n    // Not visible if any of these are missing.\n    if (!width || !height) {\n      isVisible = false;\n    } else {\n      isVisible = true;\n    }\n\n    if (this.lastValue !== isVisible) {\n      this.lastValue = isVisible;\n      this.props.onChange?.(isVisible);\n    }\n  }\n\n  render() {\n    return (\n      <View\n        collapsable={false}\n        ref={(component) => {\n          this.view = component;\n        }}\n        {...this.props}\n      >\n        {this.props.children}\n      </View>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["ViewPortDetector.tsx"],"names":["React","Component","AppState","View","DEFAULT_DELAY","TimeoutHandler","id","handler","handlerRef","n","clear","clearTimeout","setIntervalWithTimeout","callback","intervalMs","handleWrapper","cleared","timeout","setTimeout","ViewPortDetector","constructor","props","disabled","delay","disabledValue","delayValue","currentState","nextAppState","nextAppStateActive","lastAppStateActive","checkVisibility","hasValidTimeout","stopWatching","startWatching","interval","view","updateVisibility","measure","_x","_y","width","height","_pageX","_pageY","checkInViewPort","isVisible","lastValue","onChange","state","rectTop","rectBottom","componentDidMount","appStateSubscription","addEventListener","handleAppStateChange","componentWillUnmount","remove","UNSAFE_componentWillReceiveProps","nextProps","propKey","render","component","children"],"mappings":"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","sourcesContent":["'use strict';\n\nimport React, { Component, PropsWithChildren } from 'react';\nimport {\n  AppState,\n  AppStateStatus,\n  NativeEventSubscription,\n  View,\n  ViewStyle,\n} from 'react-native';\n\nconst DEFAULT_DELAY = 1000;\n\nexport type Props = {\n  disabled?: boolean;\n  style?: ViewStyle;\n  onChange?: (isVisible: boolean) => void;\n  delay?: number;\n  propKey?: any;\n};\n\nclass TimeoutHandler {\n  private handlerRef: { id: any } = { id: -1 };\n\n  get handler(): any {\n    return this.handlerRef.id;\n  }\n  set handler(n: any) {\n    this.handlerRef.id = n;\n  }\n\n  clear() {\n    clearTimeout(this.handlerRef.id as any);\n  }\n}\n\nfunction setIntervalWithTimeout(\n  callback: (clear: () => void) => any,\n  intervalMs: number,\n  handleWrapper = new TimeoutHandler()\n): TimeoutHandler {\n  let cleared = false;\n\n  const timeout = () => {\n    handleWrapper.handler = setTimeout(() => {\n      callback(() => {\n        cleared = true;\n        handleWrapper.clear();\n      });\n      if (!cleared) {\n        timeout();\n      }\n    }, intervalMs);\n  };\n  timeout();\n  return handleWrapper;\n}\n\n/**\n * Detects when this is in the viewport and visible.\n *\n * Will not fire visibility changes for zero width/height components.\n */\nexport default class ViewPortDetector extends Component<\n  PropsWithChildren<Props>\n> {\n  private lastValue: boolean | null = null;\n  private interval: TimeoutHandler | null = null;\n  private view: View | null = null;\n  private lastAppStateActive = false;\n  private appStateSubscription: NativeEventSubscription | null = null;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { rectTop: 0, rectBottom: 0 };\n  }\n\n  componentDidMount() {\n    this.lastAppStateActive = AppState.currentState === 'active';\n    this.appStateSubscription = AppState.addEventListener(\n      'change',\n      this.handleAppStateChange\n    );\n    if (this.hasValidTimeout(this.props.disabled, this.props.delay)) {\n      this.startWatching();\n    }\n  }\n\n  componentWillUnmount() {\n    this.appStateSubscription?.remove();\n    this.appStateSubscription = null;\n    this.stopWatching();\n  }\n\n  hasValidTimeout = (disabled?: boolean, delay?: number): boolean => {\n    let disabledValue = disabled ?? false;\n    let delayValue = delay ?? DEFAULT_DELAY;\n    return (\n      AppState.currentState === 'active' && !disabledValue && delayValue > 0\n    );\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps: Props) {\n    if (!this.hasValidTimeout(nextProps.disabled, nextProps.delay)) {\n      this.stopWatching();\n    } else {\n      if (this.props.propKey !== nextProps.propKey) {\n        this.lastValue = null;\n      }\n      this.startWatching();\n    }\n  }\n  handleAppStateChange = (nextAppState: AppStateStatus) => {\n    let nextAppStateActive = nextAppState === 'active';\n    if (this.lastAppStateActive !== nextAppStateActive) {\n      this.checkVisibility();\n    }\n    this.lastAppStateActive = nextAppStateActive;\n\n    if (!this.hasValidTimeout(this.props.disabled, this.props.delay)) {\n      this.stopWatching();\n    } else {\n      this.startWatching();\n    }\n  };\n\n  startWatching = () => {\n    if (this.interval) {\n      return;\n    }\n    this.interval = setIntervalWithTimeout(\n      this.checkVisibility,\n      this.props.delay || DEFAULT_DELAY\n    );\n  };\n\n  stopWatching = () => {\n    this.interval?.clear();\n    this.interval = null;\n  };\n\n  checkVisibility = () => {\n    if (!this.view) {\n      return;\n    }\n\n    if (AppState.currentState !== 'active') {\n      this.updateVisibility(false);\n      return;\n    }\n\n    this.view.measure((_x, _y, width, height, _pageX, _pageY) => {\n      this.checkInViewPort(width, height);\n    });\n  };\n  checkInViewPort = (width?: number, height?: number) => {\n    let isVisible: boolean;\n    // Not visible if any of these are missing.\n    if (!width || !height) {\n      isVisible = false;\n    } else {\n      isVisible = true;\n    }\n    this.updateVisibility(isVisible);\n  };\n\n  updateVisibility = (isVisible: boolean) => {\n    if (this.lastValue !== isVisible) {\n      this.lastValue = isVisible;\n      this.props.onChange?.(isVisible);\n    }\n  };\n  render() {\n    return (\n      <View\n        collapsable={false}\n        ref={(component) => {\n          this.view = component;\n        }}\n        {...this.props}\n      >\n        {this.props.children}\n      </View>\n    );\n  }\n}\n"]}

package/lib/typescript/components/ViewPortDetector.d.ts

@@ -1,10 +1,11 @@
 import React, { Component, PropsWithChildren } from 'react';
-import { ViewStyle } from 'react-native';
+import { AppStateStatus, ViewStyle } from 'react-native';
 export declare type Props = {
     disabled?: boolean;
     style?: ViewStyle;
     onChange?: (isVisible: boolean) => void;
     delay?: number;
+    propKey?: any;
 };
 /**
  * Detects when this is in the viewport and visible.
@@ -15,12 +16,18 @@ export default class ViewPortDetector extends Component<PropsWithChildren<Props>
     private lastValue;
     private interval;
     private view;
+    private lastAppStateActive;
+    private appStateSubscription;
     constructor(props: Props);
     componentDidMount(): void;
     componentWillUnmount(): void;
+    hasValidTimeout: (disabled?: boolean, delay?: number) => boolean;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    private startWatching;
-    private stopWatching;
-    private checkInViewPort;
+    handleAppStateChange: (nextAppState: AppStateStatus) => void;
+    startWatching: () => void;
+    stopWatching: () => void;
+    checkVisibility: () => void;
+    checkInViewPort: (width?: number, height?: number) => void;
+    updateVisibility: (isVisible: boolean) => void;
     render(): React.JSX.Element;
 }

package/package.json

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

package/src/components/VideoView.tsx

@@ -9,7 +9,7 @@ import {
   VideoTrack,
 } from 'livekit-client';
 import { RTCView } from '@livekit/react-native-webrtc';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 
@@ -35,6 +35,20 @@ export const VideoView = ({
     return info;
   });
 
+  const layoutOnChange = useCallback(
+    (event: LayoutChangeEvent) => elementInfo.onLayout(event),
+    [elementInfo]
+  );
+  const visibilityOnChange = useCallback(
+    (isVisible: boolean) => elementInfo.onVisibility(isVisible),
+    [elementInfo]
+  );
+  const shouldObserveVisibility = useMemo(() => {
+    return (
+      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream
+    );
+  }, [videoTrack]);
+
   const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);
   useEffect(() => {
     setMediaStream(videoTrack?.mediaStream);
@@ -64,22 +78,15 @@ export const VideoView = ({
   }, [videoTrack, elementInfo]);
 
   return (
-    <View
-      style={{ ...style, ...styles.container }}
-      onLayout={(event) => {
-        elementInfo.onLayout(event);
-      }}
-    >
+    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>
       <ViewPortDetector
-        onChange={(isVisible: boolean) => elementInfo.onVisibility(isVisible)}
+        onChange={visibilityOnChange}
         style={styles.videoView}
+        disabled={!shouldObserveVisibility}
+        propKey={videoTrack}
       >
         <RTCView
-          // eslint-disable-next-line react-native/no-inline-styles
-          style={{
-            flex: 1,
-            width: '100%',
-          }}
+          style={styles.videoView}
           streamURL={mediaStream?.toURL() ?? ''}
           objectFit={objectFit}
           zOrder={zOrder}

package/src/components/ViewPortDetector.tsx

@@ -1,15 +1,61 @@
 'use strict';
 
 import React, { Component, PropsWithChildren } from 'react';
-import { View, ViewStyle } from 'react-native';
+import {
+  AppState,
+  AppStateStatus,
+  NativeEventSubscription,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+const DEFAULT_DELAY = 1000;
 
 export type Props = {
   disabled?: boolean;
   style?: ViewStyle;
   onChange?: (isVisible: boolean) => void;
   delay?: number;
+  propKey?: any;
 };
 
+class TimeoutHandler {
+  private handlerRef: { id: any } = { id: -1 };
+
+  get handler(): any {
+    return this.handlerRef.id;
+  }
+  set handler(n: any) {
+    this.handlerRef.id = n;
+  }
+
+  clear() {
+    clearTimeout(this.handlerRef.id as any);
+  }
+}
+
+function setIntervalWithTimeout(
+  callback: (clear: () => void) => any,
+  intervalMs: number,
+  handleWrapper = new TimeoutHandler()
+): TimeoutHandler {
+  let cleared = false;
+
+  const timeout = () => {
+    handleWrapper.handler = setTimeout(() => {
+      callback(() => {
+        cleared = true;
+        handleWrapper.clear();
+      });
+      if (!cleared) {
+        timeout();
+      }
+    }, intervalMs);
+  };
+  timeout();
+  return handleWrapper;
+}
+
 /**
  * Detects when this is in the viewport and visible.
  *
@@ -19,8 +65,10 @@ export default class ViewPortDetector extends Component<
   PropsWithChildren<Props>
 > {
   private lastValue: boolean | null = null;
-  private interval: any | null = null;
+  private interval: TimeoutHandler | null = null;
   private view: View | null = null;
+  private lastAppStateActive = false;
+  private appStateSubscription: NativeEventSubscription | null = null;
 
   constructor(props: Props) {
     super(props);
@@ -28,43 +76,84 @@ export default class ViewPortDetector extends Component<
   }
 
   componentDidMount() {
-    if (!this.props.disabled) {
+    this.lastAppStateActive = AppState.currentState === 'active';
+    this.appStateSubscription = AppState.addEventListener(
+      'change',
+      this.handleAppStateChange
+    );
+    if (this.hasValidTimeout(this.props.disabled, this.props.delay)) {
       this.startWatching();
     }
   }
 
   componentWillUnmount() {
+    this.appStateSubscription?.remove();
+    this.appStateSubscription = null;
     this.stopWatching();
   }
 
+  hasValidTimeout = (disabled?: boolean, delay?: number): boolean => {
+    let disabledValue = disabled ?? false;
+    let delayValue = delay ?? DEFAULT_DELAY;
+    return (
+      AppState.currentState === 'active' && !disabledValue && delayValue > 0
+    );
+  };
+
   UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.disabled) {
+    if (!this.hasValidTimeout(nextProps.disabled, nextProps.delay)) {
       this.stopWatching();
     } else {
-      this.lastValue = null;
+      if (this.props.propKey !== nextProps.propKey) {
+        this.lastValue = null;
+      }
       this.startWatching();
     }
   }
+  handleAppStateChange = (nextAppState: AppStateStatus) => {
+    let nextAppStateActive = nextAppState === 'active';
+    if (this.lastAppStateActive !== nextAppStateActive) {
+      this.checkVisibility();
+    }
+    this.lastAppStateActive = nextAppStateActive;
 
-  private startWatching() {
+    if (!this.hasValidTimeout(this.props.disabled, this.props.delay)) {
+      this.stopWatching();
+    } else {
+      this.startWatching();
+    }
+  };
+
+  startWatching = () => {
     if (this.interval) {
       return;
     }
-    this.interval = setInterval(() => {
-      if (!this.view) {
-        return;
-      }
-      this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
-        this.checkInViewPort(width, height);
-      });
-    }, this.props.delay || 100);
-  }
+    this.interval = setIntervalWithTimeout(
+      this.checkVisibility,
+      this.props.delay || DEFAULT_DELAY
+    );
+  };
 
-  private stopWatching() {
-    this.interval = clearInterval(this.interval);
-  }
+  stopWatching = () => {
+    this.interval?.clear();
+    this.interval = null;
+  };
 
-  private checkInViewPort(width?: number, height?: number) {
+  checkVisibility = () => {
+    if (!this.view) {
+      return;
+    }
+
+    if (AppState.currentState !== 'active') {
+      this.updateVisibility(false);
+      return;
+    }
+
+    this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
+      this.checkInViewPort(width, height);
+    });
+  };
+  checkInViewPort = (width?: number, height?: number) => {
     let isVisible: boolean;
     // Not visible if any of these are missing.
     if (!width || !height) {
@@ -72,13 +161,15 @@ export default class ViewPortDetector extends Component<
     } else {
       isVisible = true;
     }
+    this.updateVisibility(isVisible);
+  };
 
+  updateVisibility = (isVisible: boolean) => {
     if (this.lastValue !== isVisible) {
       this.lastValue = isVisible;
       this.props.onChange?.(isVisible);
     }
-  }
-
+  };
   render() {
     return (
       <View