react-native-theoplayer
Version:
A THEOplayer video component for react-native.
339 lines (337 loc) • 15.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.THEOplayerView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeTheoplayer = require("react-native-theoplayer");
var _THEOplayerView = _interopRequireDefault(require("./THEOplayerView.style"));
var _TypeUtils = require("./utils/TypeUtils");
var _BaseEvent = require("./adapter/event/BaseEvent");
var _PlayerEvents = require("./adapter/event/PlayerEvents");
var _NativeTrackEvent = require("./adapter/event/native/NativeTrackEvent");
var _NativeTheoLiveEvent = require("./adapter/event/native/NativeTheoLiveEvent");
var _NativeTheoAdsEvent = require("./adapter/event/native/NativeTheoAdsEvent");
var _THEOplayerAdapter = require("./adapter/THEOplayerAdapter");
var _Dimensions = require("./utils/Dimensions");
var _Poster = require("./poster/Poster");
var _jsxRuntime = require("react/jsx-runtime");
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; }
const INVALID_HANDLE = -1;
class THEOplayerView extends _react.PureComponent {
_dimensionsHandler = undefined;
static initialState = {
error: undefined,
presentationMode: _reactNativeTheoplayer.PresentationMode.inline,
screenSize: (0, _Dimensions.getFullscreenSize)(),
posterActive: false,
poster: undefined
};
constructor(props) {
super(props);
this._root = /*#__PURE__*/_react.default.createRef();
this.state = THEOplayerView.initialState;
this._facade = new _THEOplayerAdapter.THEOplayerAdapter(this);
}
componentDidMount() {
if (_reactNative.Platform.OS !== 'ios') {
// On iOS we use the native deviceOrientation event.
this._dimensionsHandler = _reactNative.Dimensions.addEventListener('change', this._onDimensionsChanged);
}
}
componentWillUnmount() {
// Allow proper cleanup on the native player before destruction
this._facade.willUnmount();
// Notify the player will be destroyed.
const {
onPlayerDestroy
} = this.props;
if (onPlayerDestroy) {
onPlayerDestroy(this._facade);
}
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.DESTROY));
this._dimensionsHandler?.remove();
this._facade.clearEventListeners();
}
get nativeHandle() {
return (0, _reactNative.findNodeHandle)(this._root.current) || INVALID_HANDLE;
}
reset() {
this.setState(prevState => ({
...prevState,
error: undefined
}));
}
_onDimensionsChanged = () => {
this.setState({
screenSize: (0, _Dimensions.getFullscreenSize)()
});
};
_onDeviceOrientationChanged = () => {
if (_reactNative.Platform.OS === 'ios') {
// On iOS, we use the native deviceOrientation event to update the screenSize
// because of an issue on iPad with React-native's Dimensions.
this._onDimensionsChanged();
}
};
_onNativePlayerReady = event => {
// Optionally apply an initial player state
const {
version,
state
} = event.nativeEvent;
this._facade.initializeFromNativePlayer_(version, state).then(() => {
this.props.onPlayerReady?.(this._facade);
});
};
_onSourceChange = () => {
this.reset();
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.SOURCE_CHANGE));
this._updatePoster();
if (!this._facade.autoplay) {
this._showPoster();
}
};
_onLoadStart = () => {
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.LOAD_START));
};
_onLoadedData = () => {
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.LOADED_DATA));
};
_onLoadedMetadata = event => {
const nativeEvent = event.nativeEvent;
this._facade.dispatchEvent(new _PlayerEvents.DefaultLoadedMetadataEvent(nativeEvent.textTracks, nativeEvent.audioTracks, nativeEvent.videoTracks, (0, _TypeUtils.decodeNanInf)(nativeEvent.duration), nativeEvent.selectedTextTrack, nativeEvent.selectedVideoTrack, nativeEvent.selectedAudioTrack));
};
_onVolumeChange = event => {
this._facade.dispatchEvent(new _PlayerEvents.DefaultVolumeChangeEvent(event.nativeEvent.volume, event.nativeEvent.muted));
};
_onError = event => {
const {
error
} = event.nativeEvent;
this.setState({
error
});
this._facade.dispatchEvent(new _PlayerEvents.DefaultErrorEvent(event.nativeEvent.error));
};
_onProgress = event => {
this._facade.dispatchEvent(new _PlayerEvents.DefaultProgressEvent(event.nativeEvent.seekable, event.nativeEvent.buffered));
};
_onCanPlay = () => {
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.CANPLAY));
};
_onPlay = () => {
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.PLAY));
};
_onPlaying = () => {
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.PLAYING));
this._hidePoster();
};
_onPause = () => {
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.PAUSE));
};
_onSeeking = event => {
this._facade.dispatchEvent(new _PlayerEvents.DefaultSeekingEvent(event.nativeEvent.currentTime));
};
_onSeeked = event => {
this._facade.dispatchEvent(new _PlayerEvents.DefaultSeekedEvent(event.nativeEvent.currentTime));
};
_onWaiting = () => {
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.WAITING));
};
_onEnded = () => {
this._facade.dispatchEvent(new _BaseEvent.BaseEvent(_reactNativeTheoplayer.PlayerEventType.ENDED));
};
_onReadStateChange = event => {
this._facade.dispatchEvent(new _PlayerEvents.DefaultReadyStateChangeEvent(event.nativeEvent.readyState));
};
_onTimeUpdate = event => {
this._facade.dispatchEvent(new _PlayerEvents.DefaultTimeupdateEvent(event.nativeEvent.currentTime, event.nativeEvent.currentProgramDateTime));
};
_onDurationChange = event => {
this._facade.dispatchEvent(new _PlayerEvents.DefaultDurationChangeEvent((0, _TypeUtils.decodeNanInf)(event.nativeEvent.duration)));
};
_onRateChange = event => {
this._facade.dispatchEvent(new _PlayerEvents.DefaultRateChangeEvent(event.nativeEvent.playbackRate));
};
_onSegmentNotFound = event => {
const nativeEvent = event.nativeEvent;
this._facade.dispatchEvent(new _PlayerEvents.DefaultSegmentNotFoundEvent(nativeEvent.segmentStartTime, nativeEvent.error, nativeEvent.retryCount));
};
_onTextTrackListEvent = event => {
const nativeEvent = event.nativeEvent;
this._facade.dispatchEvent(new _PlayerEvents.DefaultTextTrackListEvent((0, _NativeTrackEvent.toTrackListEventType)(nativeEvent.type), nativeEvent.track));
};
_onTextTrackEvent = event => {
const nativeEvent = event.nativeEvent;
const cue = nativeEvent.cue;
if (cue) {
this.normalizeCue(cue);
}
this._facade.dispatchEvent(new _PlayerEvents.DefaultTextTrackEvent((0, _NativeTrackEvent.toTextTrackEventType)(nativeEvent.type), nativeEvent.trackUid, cue));
};
normalizeCue(cue) {
cue.startTime = (0, _TypeUtils.decodeNanInf)(cue.startTime);
cue.endTime = (0, _TypeUtils.decodeNanInf)(cue.endTime);
if ((0, _reactNativeTheoplayer.isDateRangeCue)(cue)) {
cue.startDate = new Date(cue.startDate);
if (cue.endDate) {
cue.endDate = new Date(cue.endDate);
}
if (cue.duration) {
cue.duration = (0, _TypeUtils.decodeNanInf)(cue.duration);
}
if (cue.plannedDuration) {
cue.plannedDuration = (0, _TypeUtils.decodeNanInf)(cue.plannedDuration);
}
}
}
_onMediaTrackListEvent = event => {
const nativeEvent = event.nativeEvent;
this._facade.dispatchEvent(new _PlayerEvents.DefaultMediaTrackListEvent((0, _NativeTrackEvent.toTrackListEventType)(nativeEvent.type), (0, _NativeTrackEvent.toMediaTrackType)(nativeEvent.trackType), nativeEvent.track));
};
_onMediaTrackEvent = event => {
const nativeEvent = event.nativeEvent;
this._facade.dispatchEvent(new _PlayerEvents.DefaultMediaTrackEvent((0, _NativeTrackEvent.toMediaTrackTypeEventType)(nativeEvent.type), (0, _NativeTrackEvent.toMediaTrackType)(nativeEvent.trackType), nativeEvent.trackUid, nativeEvent.qualities));
};
_onAdEvent = event => {
const nativeEvent = event.nativeEvent;
this._facade.dispatchEvent(new _PlayerEvents.DefaultAdEvent(nativeEvent.type, nativeEvent.ad));
};
_onTHEOliveEvent = event => {
this._facade.dispatchEvent((0, _NativeTheoLiveEvent.fromNativeTheoLiveEvent)(event));
};
_onTHEOadsEvent = event => {
const theoAdsEvent = (0, _NativeTheoAdsEvent.fromNativeTheoAdsEvent)(this.nativeHandle, event);
if (theoAdsEvent !== undefined) {
this._facade.dispatchEvent(theoAdsEvent);
}
};
_onCastEvent = event => {
switch (event.nativeEvent.type) {
case _reactNativeTheoplayer.CastEventType.CHROMECAST_STATE_CHANGE:
this._facade.dispatchEvent(new _PlayerEvents.DefaultChromecastChangeEvent(event.nativeEvent.state));
break;
case _reactNativeTheoplayer.CastEventType.AIRPLAY_STATE_CHANGE:
this._facade.dispatchEvent(new _PlayerEvents.DefaultAirplayStateChangeEvent(event.nativeEvent.state));
break;
case _reactNativeTheoplayer.CastEventType.CHROMECAST_ERROR:
this._facade.dispatchEvent(new _PlayerEvents.DefaultChromecastErrorEvent(event.nativeEvent.error));
break;
}
};
_onPresentationModeChange = event => {
const presentationMode = event.nativeEvent.presentationMode;
this.setState({
presentationMode
}, () => {
// Re-measure screen size after transitioning to fullscreen.
if (presentationMode === _reactNativeTheoplayer.PresentationMode.fullscreen) {
this.setState({
screenSize: (0, _Dimensions.getFullscreenSize)()
});
}
});
this._facade.dispatchEvent(new _PlayerEvents.DefaultPresentationModeChangeEvent(event.nativeEvent.presentationMode, event.nativeEvent.previousPresentationMode, event.nativeEvent.context));
};
_onDimensionChange = event => {
const width = event.nativeEvent.width;
const height = event.nativeEvent.height;
this._facade.dispatchEvent(new _PlayerEvents.DefaultResizeEvent(width, height));
this._facade.dispatchEvent(new _PlayerEvents.DefaultDimensionChangeEvent(width, height));
};
_onVideoResize = event => {
this._facade.dispatchEvent(new _PlayerEvents.DefaultVideoResizeEvent(event.nativeEvent.videoWidth, event.nativeEvent.videoHeight));
};
_updatePoster = () => {
this.setState({
poster: this._facade.source?.poster
});
};
_showPoster = () => {
this.setState({
posterActive: true
});
};
_hidePoster = () => {
this.setState({
posterActive: false
});
};
styleOverride() {
const {
presentationMode,
screenSize: fullscreenSize
} = this.state;
return presentationMode === _reactNativeTheoplayer.PresentationMode.fullscreen || _reactNative.Platform.OS === 'android' && presentationMode === _reactNativeTheoplayer.PresentationMode.pip && this._facade?.pipConfiguration?.reparentPip == true ? fullscreenSize : {};
}
render() {
const {
config,
style,
posterStyle,
children
} = this.props;
const {
posterActive,
poster
} = this.state;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [_THEOplayerView.default.base, style, this.styleOverride()],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(THEOplayerRCTView, {
ref: this._root,
style: _reactNative.StyleSheet.absoluteFill,
config: config || {},
onNativePlayerReady: this._onNativePlayerReady,
onNativeSourceChange: this._onSourceChange,
onNativeLoadStart: this._onLoadStart,
onNativeLoadedData: this._onLoadedData,
onNativeLoadedMetadata: this._onLoadedMetadata,
onNativeVolumeChange: this._onVolumeChange,
onNativeError: this._onError,
onNativeProgress: this._onProgress,
onNativeCanPlay: this._onCanPlay,
onNativePlay: this._onPlay,
onNativePlaying: this._onPlaying,
onNativePause: this._onPause,
onNativeSeeking: this._onSeeking,
onNativeSeeked: this._onSeeked,
onNativeWaiting: this._onWaiting,
onNativeEnded: this._onEnded,
onNativeReadyStateChange: this._onReadStateChange,
onNativeTimeUpdate: this._onTimeUpdate,
onNativeDurationChange: this._onDurationChange,
onNativeRateChange: this._onRateChange,
onNativeSegmentNotFound: this._onSegmentNotFound,
onNativeTextTrackListEvent: this._onTextTrackListEvent,
onNativeTextTrackEvent: this._onTextTrackEvent,
onNativeMediaTrackListEvent: this._onMediaTrackListEvent,
onNativeMediaTrackEvent: this._onMediaTrackEvent,
onNativeAdEvent: this._onAdEvent,
onNativeTHEOliveEvent: this._onTHEOliveEvent,
onNativeTHEOadsEvent: this._onTHEOadsEvent,
onNativeCastEvent: this._onCastEvent,
onNativePresentationModeChange: this._onPresentationModeChange,
onNativeDeviceOrientationChanged: this._onDeviceOrientationChanged,
onNativeDimensionChange: this._onDimensionChange,
onNativeVideoResize: this._onVideoResize
}), posterActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Poster.Poster, {
uri: poster,
style: posterStyle
}), children]
});
}
}
exports.THEOplayerView = THEOplayerView;
const LINKING_ERROR = `The package 'react-native-theoplayer' doesn't seem to be linked. Make sure: \n\n` + _reactNative.Platform.select({
ios: "- You have run 'pod install'\n",
default: ''
}) + '- You rebuilt the app after installing the package\n' + '- You are not using Expo managed workflow\n';
const ComponentName = 'THEOplayerRCTView';
const THEOplayerRCTView = _reactNative.UIManager.getViewManagerConfig(ComponentName) != null ? (0, _reactNative.requireNativeComponent)(ComponentName) : () => {
throw new Error(LINKING_ERROR);
};
//# sourceMappingURL=THEOplayerView.js.map