voicebot-react-native-expo/rn/lib/module/components/VideoView.js

This is a voicebot-react-native package of Kipps AI voice bot for React Native Expo

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';
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.
 */

/**
 * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
 */
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;
    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);
    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);
      };
    } else {
      return () => {};
    }
  }, [videoTrack]);
  useEffect(() => {
    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {
      videoTrack === null || videoTrack === void 0 || videoTrack.observeElementInfo(elementInfo);
      return () => {
        videoTrack === null || videoTrack === void 0 || videoTrack.stopObservingElementInfo(elementInfo);
      };
    } else {
      return () => {};
    }
  }, [videoTrack, elementInfo]);
  return /*#__PURE__*/React.createElement(View, {
    style: {
      ...style,
      ...styles.container
    },
    onLayout: layoutOnChange
  }, /*#__PURE__*/React.createElement(ViewPortDetector, {
    onChange: visibilityOnChange,
    style: styles.videoView,
    disabled: !shouldObserveVisibility,
    propKey: videoTrack
  }, /*#__PURE__*/React.createElement(RTCView, {
    style: styles.videoView,
    streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
    objectFit: objectFit,
    zOrder: zOrder,
    mirror: mirror
  })));
};
const styles = StyleSheet.create({
  container: {},
  videoView: {
    flex: 1,
    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,
      height
    } = event.nativeEvent.layout;
    this._width = width;
    this._height = height;
    if (this._observing) {
      var _this$handleResize;
      (_this$handleResize = this.handleResize) === null || _this$handleResize === void 0 || _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 || _this$handleVisibilit.call(this);
      }
    }
  }
}
//# sourceMappingURL=VideoView.js.map