react-native-yt-player/lib/module/mobile/Player.js

Youtube Player for React Native

import _extends from"@babel/runtime/helpers/extends";import _objectSpread from"@babel/runtime/helpers/objectSpread";import _regeneratorRuntime from"@babel/runtime/regenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/youssouf/Documents/work/react-native-youtube-player/src/mobile/Player.tsx";import React,{PureComponent}from"react";import Animated,{Easing}from"react-native-reanimated";var Value=Animated.Value,timing=Animated.timing;import{View,StatusBar,Platform,BackHandler}from"react-native";import styles from"./styles";import PlayerControls from"./Controls";import PlayerView from"./YTWebView";import{PlayerDefaultProps}from"./types";import{fullScreenInterpolate,VideoSize}from"./Utils";import Orientation from"react-native-orientation";var IsAndroid=Platform.OS==="android";var Player=function(_PureComponent){_inherits(Player,_PureComponent);function Player(props){var _this;_classCallCheck(this,Player);_this=_possibleConstructorReturn(this,_getPrototypeOf(Player).call(this,props));_this._width=new Value(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 _regeneratorRuntime.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)Orientation.lockToLandscapeRight();}else{_this.goToInlineScreen();if(rotateToFullScreen)Orientation.lockToPortrait();setTimeout(function(){if(true)Orientation.unlockAllOrientations();},2000);}});};_this.onRotated=function(orientation){if(_this._isUserUsingIconToFullScreen)return;Orientation.unlockAllOrientations();var rotateToFullScreen=true;if(rotateToFullScreen){if(orientation==="LANDSCAPE"||orientation==="PORTRAITUPSIDEDOWN"){if(_this.state.fullScreen)return;_this.setState({fullScreen:true},function(){_this.goToFullScreen();Orientation.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:VideoSize.fullScreen.width+2,duration:200,easing:Easing.inOut(Easing.ease)}).start(function(){return StatusBar.setHidden(true);});};_this.goToInlineScreen=function(){_this.props.onFullScreen(false);timing(_this._width,{toValue:VideoSize.inline.width,duration:200,easing:Easing.inOut(Easing.ease)}).start(function(){return 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;}_createClass(Player,[{key:"componentDidMount",value:function componentDidMount(){Orientation.addOrientationListener(this.onRotated);BackHandler.addEventListener("hardwareBackPress",this.onBackButtonClick);}},{key:"componentWillUnmount",value:function componentWillUnmount(){Orientation.removeOrientationListener(this.onRotated);BackHandler.removeEventListener("hardwareBackPress",this.onBackButtonClick);}},{key:"render",value:function render(){var _this2=this;var fullScreen=this.state.fullScreen;var _fullScreenInterpolat=fullScreenInterpolate(this._width,this.state.layout),height=_fullScreenInterpolat.height,top=_fullScreenInterpolat.top,left=_fullScreenInterpolat.left;var VideoStyle=fullScreen?_objectSpread({},styles.fullScreen):_objectSpread({},styles.inline);var AbsoluteStyle=IsAndroid?_objectSpread({},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=_objectSpread({},VideoStyle,AbsoluteStyle,{width:this._width,height:height,top:top,left:left});if(IsAndroid)return React.createElement(React.Fragment,{__source:{fileName:_jsxFileName,lineNumber:218}},React.createElement(View,{style:styles.wrapper,onLayout:this.onLayout,__source:{fileName:_jsxFileName,lineNumber:219}}),this.state.layoutReady&&React.createElement(Animated.View,{style:style,removeClippedSubviews:true,__source:{fileName:_jsxFileName,lineNumber:221}},React.createElement(PlayerView,{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.createElement(PlayerControls,_extends({},_objectSpread({playVideo:playVideo,seekTo:seekTo,pauseVideo:pauseVideo,toggleFS:toggleFS,topBar:topBar,showFullScreenButton:showFullScreenButton},this.state),{__source:{fileName:_jsxFileName,lineNumber:232}}))));else return React.createElement(View,{style:styles.wrapper,onLayout:this.onLayout,__source:{fileName:_jsxFileName,lineNumber:249}},React.createElement(Animated.View,{style:style,__source:{fileName:_jsxFileName,lineNumber:250}},React.createElement(PlayerView,{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.createElement(PlayerControls,_extends({},_objectSpread({playVideo:playVideo,seekTo:seekTo,pauseVideo:pauseVideo,toggleFS:toggleFS,topBar:topBar,showFullScreenButton:showFullScreenButton},this.state),{__source:{fileName:_jsxFileName,lineNumber:261}}))));}}]);return Player;}(PureComponent);Player.defaultProps=PlayerDefaultProps;export{Player as default};
//# sourceMappingURL=Player.js.map