react-native-yt-player
Version:
Youtube Player for React Native
2 lines • 8.82 kB
JavaScript
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectSpread2=_interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _styles=_interopRequireDefault(require("./styles"));var _Controls=_interopRequireDefault(require("./Controls"));var _YTWebView=_interopRequireDefault(require("./YTWebView"));var _types=require("./types");var _Utils=require("./Utils");var _reactNativeOrientation=_interopRequireDefault(require("react-native-orientation"));var _jsxFileName="/Users/youssouf/Documents/work/react-native-youtube-player/src/mobile/Player.tsx";var Value=_reactNativeReanimated.default.Value,timing=_reactNativeReanimated.default.timing;var IsAndroid=_reactNative.Platform.OS==="android";var Player=function(_PureComponent){(0,_inherits2.default)(Player,_PureComponent);function Player(props){var _this;(0,_classCallCheck2.default)(this,Player);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Player).call(this,props));_this._width=new Value(_Utils.VideoSize.inline.width);_this._isUserUsingIconToFullScreen=false;_this.onDurationReady=function(duration){_this.setState({duration:duration});_this.props.onDurationReady(duration);_this.props.onStart();};_this.onPlaying=function(currentTime){_this.setState({currentTime:currentTime});_this.props.onPlaying(currentTime);};_this.onReady=function(){_this.setState({ready:true});_this.props.onReady();};_this.onError=function(){_this.props.onError();};_this.onEnd=function(){var _this$props=_this.props,onEnd=_this$props.onEnd,loop=_this$props.loop;onEnd();if(loop){_this.seekTo(0);_this.playVideo();}};_this.onStateChange=function(state){_this.props.onStateChange(state);};_this.onPlaybackRateChange=function(){};_this.onPlaybackQualityChange=function(){};_this.playVideo=function(){_this.setState({play:true});_this.player._playVideo();};_this.seekTo=function _callee(s){return _regenerator.default.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_this.setState({currentTime:s});_this.player._seekTo(s);case 2:case"end":return _context.stop();}}});};_this.pauseVideo=function(){_this.setState({play:false});_this.player._pauseVideo();};_this.toggleFS=function(){_this._isUserUsingIconToFullScreen=true;setTimeout(function(){_this._isUserUsingIconToFullScreen=false;},2000);var rotateToFullScreen=true;_this.setState({fullScreen:!_this.state.fullScreen},function(){if(_this.state.fullScreen){_this.goToFullScreen();if(rotateToFullScreen)_reactNativeOrientation.default.lockToLandscapeRight();}else{_this.goToInlineScreen();if(rotateToFullScreen)_reactNativeOrientation.default.lockToPortrait();setTimeout(function(){if(true)_reactNativeOrientation.default.unlockAllOrientations();},2000);}});};_this.onRotated=function(orientation){if(_this._isUserUsingIconToFullScreen)return;_reactNativeOrientation.default.unlockAllOrientations();var rotateToFullScreen=true;if(rotateToFullScreen){if(orientation==="LANDSCAPE"||orientation==="PORTRAITUPSIDEDOWN"){if(_this.state.fullScreen)return;_this.setState({fullScreen:true},function(){_this.goToFullScreen();_reactNativeOrientation.default.unlockAllOrientations();});return;}else{if(!_this.state.fullScreen)return;_this.setState({fullScreen:false},function(){_this.goToInlineScreen();});return;}}else{_this.goToInlineScreen();}};_this.onBackButtonClick=function(){if(_this.state.fullScreen){_this.toggleFS();return true;}return false;};_this.goToFullScreen=function(){_this.props.onFullScreen(true);timing(_this._width,{toValue:_Utils.VideoSize.fullScreen.width+2,duration:200,easing:_reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.ease)}).start(function(){return _reactNative.StatusBar.setHidden(true);});};_this.goToInlineScreen=function(){_this.props.onFullScreen(false);timing(_this._width,{toValue:_Utils.VideoSize.inline.width,duration:200,easing:_reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.ease)}).start(function(){return _reactNative.StatusBar.setHidden(false);});};_this.onLayout=function(_ref){var _ref$nativeEvent$layo=_ref.nativeEvent.layout,x=_ref$nativeEvent$layo.x,y=_ref$nativeEvent$layo.y;_this.setState({layoutReady:true,layout:{top:y,left:x}});};_this.state={ready:false,layoutReady:!IsAndroid,fullScreen:false,play:_this.props.autoPlay,duration:0,currentTime:0,layout:{top:0,left:0}};return _this;}(0,_createClass2.default)(Player,[{key:"componentDidMount",value:function componentDidMount(){_reactNativeOrientation.default.addOrientationListener(this.onRotated);_reactNative.BackHandler.addEventListener("hardwareBackPress",this.onBackButtonClick);}},{key:"componentWillUnmount",value:function componentWillUnmount(){_reactNativeOrientation.default.removeOrientationListener(this.onRotated);_reactNative.BackHandler.removeEventListener("hardwareBackPress",this.onBackButtonClick);}},{key:"render",value:function render(){var _this2=this;var fullScreen=this.state.fullScreen;var _fullScreenInterpolat=(0,_Utils.fullScreenInterpolate)(this._width,this.state.layout),height=_fullScreenInterpolat.height,top=_fullScreenInterpolat.top,left=_fullScreenInterpolat.left;var VideoStyle=fullScreen?(0,_objectSpread2.default)({},_styles.default.fullScreen):(0,_objectSpread2.default)({},_styles.default.inline);var AbsoluteStyle=IsAndroid?(0,_objectSpread2.default)({},this.state.layout):{};var playVideo=this.playVideo,pauseVideo=this.pauseVideo,seekTo=this.seekTo,toggleFS=this.toggleFS;var _this$props2=this.props,videoId=_this$props2.videoId,autoPlay=_this$props2.autoPlay,topBar=_this$props2.topBar,showFullScreenButton=_this$props2.showFullScreenButton;var style=(0,_objectSpread2.default)({},VideoStyle,AbsoluteStyle,{width:this._width,height:height,top:top,left:left});if(IsAndroid)return _react.default.createElement(_react.default.Fragment,{__source:{fileName:_jsxFileName,lineNumber:218}},_react.default.createElement(_reactNative.View,{style:_styles.default.wrapper,onLayout:this.onLayout,__source:{fileName:_jsxFileName,lineNumber:219}}),this.state.layoutReady&&_react.default.createElement(_reactNativeReanimated.default.View,{style:style,removeClippedSubviews:true,__source:{fileName:_jsxFileName,lineNumber:221}},_react.default.createElement(_YTWebView.default,{videoId:videoId,autoPlay:autoPlay,ref:function ref(player){return _this2.player=player;},onDurationReady:this.onDurationReady,onReady:this.onReady,onError:this.onError,onPlaying:this.onPlaying,onEnd:this.onEnd,__source:{fileName:_jsxFileName,lineNumber:222}}),_react.default.createElement(_Controls.default,(0,_extends2.default)({},(0,_objectSpread2.default)({playVideo:playVideo,seekTo:seekTo,pauseVideo:pauseVideo,toggleFS:toggleFS,topBar:topBar,showFullScreenButton:showFullScreenButton},this.state),{__source:{fileName:_jsxFileName,lineNumber:232}}))));else return _react.default.createElement(_reactNative.View,{style:_styles.default.wrapper,onLayout:this.onLayout,__source:{fileName:_jsxFileName,lineNumber:249}},_react.default.createElement(_reactNativeReanimated.default.View,{style:style,__source:{fileName:_jsxFileName,lineNumber:250}},_react.default.createElement(_YTWebView.default,{videoId:videoId,autoPlay:autoPlay,ref:function ref(player){return _this2.player=player;},onDurationReady:this.onDurationReady,onReady:this.onReady,onError:this.onError,onPlaying:this.onPlaying,onEnd:this.onEnd,__source:{fileName:_jsxFileName,lineNumber:251}}),_react.default.createElement(_Controls.default,(0,_extends2.default)({},(0,_objectSpread2.default)({playVideo:playVideo,seekTo:seekTo,pauseVideo:pauseVideo,toggleFS:toggleFS,topBar:topBar,showFullScreenButton:showFullScreenButton},this.state),{__source:{fileName:_jsxFileName,lineNumber:261}}))));}}]);return Player;}(_react.PureComponent);exports.default=Player;Player.defaultProps=_types.PlayerDefaultProps;
//# sourceMappingURL=Player.js.map