@livekit/react-native 2.1.1 → 2.3.0

package/lib/module/components/VideoTrack.js

@@ -1,5 +1,6 @@
-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; }
-
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { LocalVideoTrack, TrackEvent } from 'livekit-client';
@@ -7,21 +8,17 @@ import { RTCView } from '@livekit/react-native-webrtc';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
-export const VideoTrack = _ref => {
-  var _mediaStream$toURL;
-
-  let {
-    style = {},
-    trackRef,
-    objectFit = 'cover',
-    zOrder,
-    mirror
-  } = _ref;
+export const VideoTrack = ({
+  style = {},
+  trackRef,
+  objectFit = 'cover',
+  zOrder,
+  mirror
+}) => {
   const [elementInfo] = 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;
+    info.id = trackRef === null || trackRef === void 0 || (_trackRef$publication = trackRef.publication) === null || _trackRef$publication === void 0 ? void 0 : _trackRef$publication.trackSid;
     return info;
   });
   const layoutOnChange = useCallback(event => elementInfo.onLayout(event), [elementInfo]);
@@ -33,12 +30,10 @@ export const VideoTrack = _ref => {
   const [mediaStream, setMediaStream] = useState(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
   useEffect(() => {
     setMediaStream(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
-
     if (videoTrack instanceof LocalVideoTrack) {
       const onRestarted = track => {
         setMediaStream(track === null || track === void 0 ? void 0 : track.mediaStream);
       };
-
       videoTrack.on(TrackEvent.Restarted, onRestarted);
       return () => {
         videoTrack.off(TrackEvent.Restarted, onRestarted);
@@ -49,16 +44,17 @@ export const VideoTrack = _ref => {
   }, [videoTrack]);
   useEffect(() => {
     if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {
-      videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.observeElementInfo(elementInfo);
+      videoTrack === null || videoTrack === void 0 || videoTrack.observeElementInfo(elementInfo);
       return () => {
-        videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.stopObservingElementInfo(elementInfo);
+        videoTrack === null || videoTrack === void 0 || videoTrack.stopObservingElementInfo(elementInfo);
       };
     } else {
       return () => {};
     }
   }, [videoTrack, elementInfo]);
   return /*#__PURE__*/React.createElement(View, {
-    style: { ...style,
+    style: {
+      ...style,
       ...styles.container
     },
     onLayout: layoutOnChange
@@ -69,7 +65,7 @@ export const VideoTrack = _ref => {
     propKey: videoTrack
   }, /*#__PURE__*/React.createElement(RTCView, {
     style: styles.videoTrack,
-    streamURL: (_mediaStream$toURL = mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) !== null && _mediaStream$toURL !== void 0 ? _mediaStream$toURL : '',
+    streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
     objectFit: objectFit,
     zOrder: zOrder,
     mirror: mirror
@@ -82,44 +78,28 @@ const styles = StyleSheet.create({
     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,
@@ -127,26 +107,20 @@ class VideoTrackElementInfo {
     } = 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);
+      (_this$handleResize = this.handleResize) === null || _this$handleResize === 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);
+        (_this$handleVisibilit = this.handleVisibilityChanged) === null || _this$handleVisibilit === void 0 || _this$handleVisibilit.call(this);
       }
     }
   }
-
 }
 //# sourceMappingURL=VideoTrack.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["VideoTrack.tsx"],"names":["React","StyleSheet","View","LocalVideoTrack","TrackEvent","RTCView","useCallback","useEffect","useMemo","useState","RemoteVideoTrack","ViewPortDetector","VideoTrack","style","trackRef","objectFit","zOrder","mirror","elementInfo","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","event","onLayout","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","isAdaptiveStream","mediaStream","setMediaStream","onRestarted","on","Restarted","off","observeElementInfo","stopObservingElementInfo","styles","container","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} 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"]}
+{"version":3,"names":["React","StyleSheet","View","LocalVideoTrack","TrackEvent","RTCView","useCallback","useEffect","useMemo","useState","RemoteVideoTrack","ViewPortDetector","VideoTrack","style","trackRef","objectFit","zOrder","mirror","elementInfo","_trackRef$publication","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","event","onLayout","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","isAdaptiveStream","mediaStream","setMediaStream","onRestarted","on","Restarted","off","observeElementInfo","stopObservingElementInfo","createElement","styles","container","onChange","disabled","propKey","streamURL","toURL","create","flex","width","constructor","_defineProperty","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","call","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoTrack.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport { RTCView } from '@livekit/react-native-webrtc';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\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"],"mappings":"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","ignoreList":[]}

package/lib/module/components/VideoView.js

@@ -1,5 +1,6 @@
-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; }
-
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { LocalVideoTrack, TrackEvent } from 'livekit-client';
@@ -7,6 +8,7 @@ import { RTCView } from '@livekit/react-native-webrtc';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
+
 /**
  * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
  */
@@ -14,16 +16,13 @@ import ViewPortDetector from './ViewPortDetector';
 /**
  * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
  */
-export const VideoView = _ref => {
-  var _mediaStream$toURL;
-
-  let {
-    style = {},
-    videoTrack,
-    objectFit = 'cover',
-    zOrder,
-    mirror
-  } = _ref;
+export const VideoView = ({
+  style = {},
+  videoTrack,
+  objectFit = 'cover',
+  zOrder,
+  mirror
+}) => {
   const [elementInfo] = useState(() => {
     let info = new VideoViewElementInfo();
     info.id = videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.sid;
@@ -38,12 +37,10 @@ export const VideoView = _ref => {
   const [mediaStream, setMediaStream] = useState(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
   useEffect(() => {
     setMediaStream(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
-
     if (videoTrack instanceof LocalVideoTrack) {
       const onRestarted = track => {
         setMediaStream(track === null || track === void 0 ? void 0 : track.mediaStream);
       };
-
       videoTrack.on(TrackEvent.Restarted, onRestarted);
       return () => {
         videoTrack.off(TrackEvent.Restarted, onRestarted);
@@ -54,16 +51,17 @@ export const VideoView = _ref => {
   }, [videoTrack]);
   useEffect(() => {
     if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {
-      videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.observeElementInfo(elementInfo);
+      videoTrack === null || videoTrack === void 0 || videoTrack.observeElementInfo(elementInfo);
       return () => {
-        videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.stopObservingElementInfo(elementInfo);
+        videoTrack === null || videoTrack === void 0 || videoTrack.stopObservingElementInfo(elementInfo);
       };
     } else {
       return () => {};
     }
   }, [videoTrack, elementInfo]);
   return /*#__PURE__*/React.createElement(View, {
-    style: { ...style,
+    style: {
+      ...style,
       ...styles.container
     },
     onLayout: layoutOnChange
@@ -74,7 +72,7 @@ export const VideoView = _ref => {
     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 : '',
+    streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
     objectFit: objectFit,
     zOrder: zOrder,
     mirror: mirror
@@ -87,44 +85,28 @@ const styles = StyleSheet.create({
     width: '100%'
   }
 });
-
 class VideoViewElementInfo {
   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,
@@ -132,26 +114,20 @@ class VideoViewElementInfo {
     } = 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);
+      (_this$handleResize = this.handleResize) === null || _this$handleResize === 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);
+        (_this$handleVisibilit = this.handleVisibilityChanged) === null || _this$handleVisibilit === void 0 || _this$handleVisibilit.call(this);
       }
     }
   }
-
 }
 //# sourceMappingURL=VideoView.js.map

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

@@ -1 +1 @@
-{"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":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAA4BC,UAA5B,EAAwCC,IAAxC,QAA+D,cAA/D;AACA,SAEEC,eAFF,EAIEC,UAJF,QAMO,gBANP;AAOA,SAASC,OAAT,QAAwB,8BAAxB;AACA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,OAAjC,EAA0CC,QAA1C,QAA0D,OAA1D;AACA,SAASC,gBAAT,QAAiC,gBAAjC;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AAEA;AACA;AACA;;AASA;AACA;AACA;AACA,OAAO,MAAMC,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,IAAgBT,QAAQ,CAAC,MAAM;AACnC,QAAIU,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,GAL6B,CAA9B;AAOA,QAAMK,cAAc,GAAGlB,WAAW,CAC/BmB,KAAD,IAA8BP,WAAW,CAACQ,QAAZ,CAAqBD,KAArB,CADE,EAEhC,CAACP,WAAD,CAFgC,CAAlC;AAIA,QAAMS,kBAAkB,GAAGrB,WAAW,CACnCsB,SAAD,IAAwBV,WAAW,CAACW,YAAZ,CAAyBD,SAAzB,CADY,EAEpC,CAACV,WAAD,CAFoC,CAAtC;AAIA,QAAMY,uBAAuB,GAAGtB,OAAO,CAAC,MAAM;AAC5C,WACEM,UAAU,YAAYJ,gBAAtB,IAA0CI,UAAU,CAACiB,gBADvD;AAGD,GAJsC,EAIpC,CAACjB,UAAD,CAJoC,CAAvC;AAMA,QAAM,CAACkB,WAAD,EAAcC,cAAd,IAAgCxB,QAAQ,CAACK,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAEkB,WAAb,CAA9C;AACAzB,EAAAA,SAAS,CAAC,MAAM;AACd0B,IAAAA,cAAc,CAACnB,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAEkB,WAAb,CAAd;;AACA,QAAIlB,UAAU,YAAYX,eAA1B,EAA2C;AACzC,YAAM+B,WAAW,GAAIC,KAAD,IAAyB;AAC3CF,QAAAA,cAAc,CAACE,KAAD,aAACA,KAAD,uBAACA,KAAK,CAAEH,WAAR,CAAd;AACD,OAFD;;AAGAlB,MAAAA,UAAU,CAACsB,EAAX,CAAchC,UAAU,CAACiC,SAAzB,EAAoCH,WAApC;AAEA,aAAO,MAAM;AACXpB,QAAAA,UAAU,CAACwB,GAAX,CAAelC,UAAU,CAACiC,SAA1B,EAAqCH,WAArC;AACD,OAFD;AAGD,KATD,MASO;AACL,aAAO,MAAM,CAAE,CAAf;AACD;AACF,GAdQ,EAcN,CAACpB,UAAD,CAdM,CAAT;AAgBAP,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIO,UAAU,YAAYJ,gBAAtB,IAA0CI,UAAU,CAACiB,gBAAzD,EAA2E;AACzEjB,MAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEyB,kBAAZ,CAA+BrB,WAA/B;AACA,aAAO,MAAM;AACXJ,QAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAE0B,wBAAZ,CAAqCtB,WAArC;AACD,OAFD;AAGD,KALD,MAKO;AACL,aAAO,MAAM,CAAE,CAAf;AACD;AACF,GATQ,EASN,CAACJ,UAAD,EAAaI,WAAb,CATM,CAAT;AAWA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,EAAE,GAAGL,KAAL;AAAY,SAAG4B,MAAM,CAACC;AAAtB,KAAb;AAAgD,IAAA,QAAQ,EAAElB;AAA1D,kBACE,oBAAC,gBAAD;AACE,IAAA,QAAQ,EAAEG,kBADZ;AAEE,IAAA,KAAK,EAAEc,MAAM,CAACE,SAFhB;AAGE,IAAA,QAAQ,EAAE,CAACb,uBAHb;AAIE,IAAA,OAAO,EAAEhB;AAJX,kBAME,oBAAC,OAAD;AACE,IAAA,KAAK,EAAE2B,MAAM,CAACE,SADhB;AAEE,IAAA,SAAS,wBAAEX,WAAF,aAAEA,WAAF,uBAAEA,WAAW,CAAEY,KAAb,EAAF,mEAA0B,EAFrC;AAGE,IAAA,SAAS,EAAE7B,SAHb;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,MAAM,EAAEC;AALV,IANF,CADF,CADF;AAkBD,CA1EM;AA4EP,MAAMwB,MAAM,GAAGxC,UAAU,CAAC4C,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE,EADoB;AAE/BC,EAAAA,SAAS,EAAE;AACTG,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,KAAK,EAAE;AAFE;AAFoB,CAAlB,CAAf;;AAQA,MAAM3B,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,KAAK4B,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;;AAEDzB,EAAAA,QAAQ,CAACD,KAAD,EAA2B;AACjC,QAAI;AAAEsB,MAAAA,KAAF;AAASM,MAAAA;AAAT,QAAoB5B,KAAK,CAAC6B,WAAN,CAAkBC,MAA1C;AACA,SAAKP,MAAL,GAAcD,KAAd;AACA,SAAKE,OAAL,GAAeI,MAAf;;AAEA,QAAI,KAAKF,UAAT,EAAqB;AAAA;;AACnB,iCAAKK,YAAL;AACD;AACF;;AACD3B,EAAAA,YAAY,CAACD,SAAD,EAAqB;AAC/B,QAAI,KAAK6B,OAAL,KAAiB7B,SAArB,EAAgC;AAC9B,WAAK6B,OAAL,GAAe7B,SAAf;AACA,WAAK8B,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"]}
+{"version":3,"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","createElement","styles","container","onChange","videoView","disabled","propKey","streamURL","toURL","create","flex","width","constructor","_defineProperty","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","call","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoView.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n  type 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"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ViewPortDetector.js

@@ -1,171 +1,133 @@
 'use strict';
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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; }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { Component } from 'react';
 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();
+function setIntervalWithTimeout(callback, intervalMs, handleWrapper = 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);
-
     _defineProperty(this, "lastValue", null);
-
     _defineProperty(this, "interval", null);
-
     _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;
+      let disabledValue = disabled ?? false;
+      let delayValue = 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 = this.interval) === null || _this$interval === 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.
-
+      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$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props, isVisible);
       }
     });
-
     this.state = {
       rectTop: 0,
       rectBottom: 0
     };
   }
-
   componentDidMount() {
     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$appStateSubscri = this.appStateSubscription) === null || _this$appStateSubscri === void 0 || _this$appStateSubscri.remove();
     this.appStateSubscription = null;
     this.stopWatching();
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (!this.hasValidTimeout(nextProps.disabled, nextProps.delay)) {
       this.stopWatching();
@@ -173,11 +135,9 @@ export default class ViewPortDetector extends Component {
       if (this.props.propKey !== nextProps.propKey) {
         this.lastValue = null;
       }
-
       this.startWatching();
     }
   }
-
   render() {
     return /*#__PURE__*/React.createElement(View, _extends({
       collapsable: false,
@@ -186,6 +146,5 @@ export default class ViewPortDetector extends Component {
       }
     }, this.props), this.props.children);
   }
-
 }
 //# sourceMappingURL=ViewPortDetector.js.map