voicebot-react-native-expo
Version:
This is a voicebot-react-native package of Kipps AI voice bot for React Native Expo
148 lines (146 loc) • 6.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VideoTrack = void 0;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _reactNative = require("react-native");
var _livekitClient = require("livekit-client");
var _reactNativeWebrtc = require("@livekit/react-native-webrtc");
var _ViewPortDetector = _interopRequireDefault(require("./ViewPortDetector"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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); }
/**
* Props for the VideoTrack component.
* @public
*/
/**
* VideoTrack component for displaying video tracks in a React Native application.
* It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.
*
* @param props - See VideoTrackProps for details.
* @returns A React component that renders the given video track.
* @public
*/
const VideoTrack = ({
style = {},
trackRef,
objectFit = 'cover',
zOrder,
mirror
}) => {
const [elementInfo] = (0, _react.useState)(() => {
var _trackRef$publication;
let info = new VideoTrackElementInfo();
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 = (0, _react.useCallback)(event => elementInfo.onLayout(event), [elementInfo]);
const visibilityOnChange = (0, _react.useCallback)(isVisible => elementInfo.onVisibility(isVisible), [elementInfo]);
const videoTrack = trackRef === null || trackRef === void 0 ? void 0 : trackRef.publication.track;
const shouldObserveVisibility = (0, _react.useMemo)(() => {
return videoTrack instanceof _livekitClient.RemoteVideoTrack && videoTrack.isAdaptiveStream;
}, [videoTrack]);
const [mediaStream, setMediaStream] = (0, _react.useState)(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
(0, _react.useEffect)(() => {
setMediaStream(videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.mediaStream);
if (videoTrack instanceof _livekitClient.LocalVideoTrack) {
const onRestarted = track => {
setMediaStream(track === null || track === void 0 ? void 0 : track.mediaStream);
};
videoTrack.on(_livekitClient.TrackEvent.Restarted, onRestarted);
return () => {
videoTrack.off(_livekitClient.TrackEvent.Restarted, onRestarted);
};
} else {
return () => {};
}
}, [videoTrack]);
(0, _react.useEffect)(() => {
if (videoTrack instanceof _livekitClient.RemoteVideoTrack && videoTrack.isAdaptiveStream) {
videoTrack === null || videoTrack === void 0 || videoTrack.observeElementInfo(elementInfo);
return () => {
videoTrack === null || videoTrack === void 0 || videoTrack.stopObservingElementInfo(elementInfo);
};
} else {
return () => {};
}
}, [videoTrack, elementInfo]);
return /*#__PURE__*/React.createElement(_reactNative.View, {
style: {
...style,
...styles.container
},
onLayout: layoutOnChange
}, /*#__PURE__*/React.createElement(_ViewPortDetector.default, {
onChange: visibilityOnChange,
style: styles.videoTrack,
disabled: !shouldObserveVisibility,
propKey: videoTrack
}, /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCView, {
style: styles.videoTrack,
streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
objectFit: objectFit,
zOrder: zOrder,
mirror: mirror
})));
};
exports.VideoTrack = VideoTrack;
const styles = _reactNative.StyleSheet.create({
container: {},
videoTrack: {
flex: 1,
width: '100%'
}
});
class VideoTrackElementInfo {
constructor() {
_defineProperty(this, "element", {});
_defineProperty(this, "something", void 0);
_defineProperty(this, "id", void 0);
_defineProperty(this, "_width", 0);
_defineProperty(this, "_height", 0);
_defineProperty(this, "_observing", false);
_defineProperty(this, "visible", true);
_defineProperty(this, "visibilityChangedAt", void 0);
_defineProperty(this, "pictureInPicture", false);
_defineProperty(this, "handleResize", void 0);
_defineProperty(this, "handleVisibilityChanged", void 0);
_defineProperty(this, "width", () => this._width);
_defineProperty(this, "height", () => this._height);
}
observe() {
this._observing = true;
}
stopObserving() {
this._observing = false;
}
onLayout(event) {
let {
width,
height
} = event.nativeEvent.layout;
this._width = width;
this._height = height;
if (this._observing) {
var _this$handleResize;
(_this$handleResize = this.handleResize) === null || _this$handleResize === void 0 || _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=VideoTrack.js.map