react-native-media-controls - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/MediaControls.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/MediaControls.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _reactNativeSlider=require('react-native-slider');var _reactNativeSlider2=_interopRequireDefault(_reactNativeSlider);var _MediaControlsStyles=require('./MediaControlsStyles');var _MediaControlsStyles2=_interopRequireDefault(_MediaControlsStyles);var _Utils=require('./Utils');var _Utils2=_interopRequireDefault(_Utils);var _Constants=require('./Constants');var _Constants2=_interopRequireDefault(_Constants);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var MediaControls=function(_Component){_inherits(MediaControls,_Component);function MediaControls(){var _ref;var _temp,_this,_ret;_classCallCheck(this,MediaControls);for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return _ret=(_temp=(_this=_possibleConstructorReturn(this,(_ref=MediaControls.__proto__||Object.getPrototypeOf(MediaControls)).call.apply(_ref,[this].concat(args))),_this),_this.state={opacity:new _reactNative.Animated.Value(1),isVisible:true},_this.onReplay=function(){_this.fadeOutControls(5000);_this.props.onReplay();},_this.onPause=function(){var _this$props=_this.props,playerState=_this$props.playerState,onPaused=_this$props.onPaused;var PLAYING=_Constants2.default.PLAYING,PAUSED=_Constants2.default.PAUSED;switch(playerState){case PLAYING:{_this.cancelAnimation();break;}case PAUSED:{_this.fadeOutControls(5000);break;}default:break;}var newPlayerState=playerState===PLAYING?PAUSED:PLAYING;return onPaused(newPlayerState);},_this.setLoadingView=function(){return _react2.default.createElement(_reactNative.ActivityIndicator,{size:'large',color:'#FFF',__source:{fileName:_jsxFileName,lineNumber:82}});},_this.setPlayerControls=function(playerState){var icon=_this.getPlayerStateIcon(playerState);var pressAction=playerState===_Constants2.default.ENDED?_this.onReplay:_this.onPause;return _react2.default.createElement(_reactNative.TouchableOpacity,{style:[_MediaControlsStyles2.default.playButton,{backgroundColor:_this.props.mainColor}],onPress:pressAction,__source:{fileName:_jsxFileName,lineNumber:89}},_react2.default.createElement(_reactNative.Image,{source:icon,style:_MediaControlsStyles2.default.playIcon,__source:{fileName:_jsxFileName,lineNumber:93}}));},_this.getPlayerStateIcon=function(playerState){switch(playerState){case _Constants2.default.PAUSED:return require('./assets/ic_play.png');case _Constants2.default.PLAYING:return require('./assets/ic_pause.png');case _Constants2.default.ENDED:return require('./assets/ic_replay.png');default:return null;}},_this.cancelAnimation=function(){_this.state.opacity.stopAnimation(function(){_this.setState({isVisible:true});});},_this.toggleControls=function(){_this.state.opacity.stopAnimation(function(value){_this.setState({isVisible:!!value});return value?_this.fadeOutControls():_this.fadeInControls();});},_this.fadeOutControls=function(){var delay=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;_reactNative.Animated.timing(_this.state.opacity,{toValue:0,duration:300,delay:delay}).start(function(result){if(result.finished)_this.setState({isVisible:false});});},_this.fadeInControls=function(){var loop=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;_this.setState({isVisible:true});_reactNative.Animated.timing(_this.state.opacity,{toValue:1,duration:300,delay:0}).start(function(){if(loop){_this.fadeOutControls(5000);}});},_this.dragging=function(){if(_this.props.playerState===_Constants2.default.PAUSED)return;_this.onPause();},_this.seekVideo=function(value){_this.props.onSeek(value);_this.onPause();},_temp),_possibleConstructorReturn(_this,_ret);}_createClass(MediaControls,[{key:'componentDidMount',value:function componentDidMount(){this.fadeOutControls(5000);}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){if(nextProps.playerState===_Constants2.default.ENDED){this.fadeInControls(false);}}},{key:'renderControls',value:function renderControls(){var _props=this.props,duration=_props.duration,isLoading=_props.isLoading,mainColor=_props.mainColor,onFullScreen=_props.onFullScreen,playerState=_props.playerState,progress=_props.progress,toolbar=_props.toolbar;if(!this.state.isVisible)return null;var fullScreenImage=require('./assets/ic_fullscreen.png');return _react2.default.createElement(_reactNative.View,{style:_MediaControlsStyles2.default.container,__source:{fileName:_jsxFileName,lineNumber:181}},_react2.default.createElement(_reactNative.View,{style:[_MediaControlsStyles2.default.controlsRow,_MediaControlsStyles2.default.toolbarRow],__source:{fileName:_jsxFileName,lineNumber:182}},toolbar),_react2.default.createElement(_reactNative.View,{style:[_MediaControlsStyles2.default.controlsRow],__source:{fileName:_jsxFileName,lineNumber:183}},isLoading?this.setLoadingView():this.setPlayerControls(playerState)),_react2.default.createElement(_reactNative.View,{style:[_MediaControlsStyles2.default.controlsRow,_MediaControlsStyles2.default.progressContainer],__source:{fileName:_jsxFileName,lineNumber:188}},_react2.default.createElement(_reactNative.View,{style:_MediaControlsStyles2.default.progressColumnContainer,__source:{fileName:_jsxFileName,lineNumber:189}},_react2.default.createElement(_reactNative.View,{style:[_MediaControlsStyles2.default.timerLabelsContainer],__source:{fileName:_jsxFileName,lineNumber:190}},_react2.default.createElement(_reactNative.Text,{style:_MediaControlsStyles2.default.timerLabel,__source:{fileName:_jsxFileName,lineNumber:191}},(0,_Utils2.default)(progress)),_react2.default.createElement(_reactNative.Text,{style:_MediaControlsStyles2.default.timerLabel,__source:{fileName:_jsxFileName,lineNumber:194}},(0,_Utils2.default)(duration))),_react2.default.createElement(_reactNativeSlider2.default,{style:_MediaControlsStyles2.default.progressSlider,onValueChange:this.dragging,onSlidingComplete:this.seekVideo,maximumValue:Math.floor(duration),value:Math.floor(progress),trackStyle:_MediaControlsStyles2.default.track,thumbStyle:[_MediaControlsStyles2.default.thumb,{borderColor:mainColor}],minimumTrackTintColor:mainColor,__source:{fileName:_jsxFileName,lineNumber:198}})),_react2.default.createElement(_reactNative.TouchableOpacity,{style:_MediaControlsStyles2.default.fullScreenContainer,onPress:onFullScreen,__source:{fileName:_jsxFileName,lineNumber:209}},_react2.default.createElement(_reactNative.Image,{source:fullScreenImage,__source:{fileName:_jsxFileName,lineNumber:213}}))));}},{key:'render',value:function render(){return _react2.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.toggleControls,__source:{fileName:_jsxFileName,lineNumber:222}},_react2.default.createElement(_reactNative.Animated.View,{style:[_MediaControlsStyles2.default.container,{opacity:this.state.opacity}],__source:{fileName:_jsxFileName,lineNumber:223}},this.renderControls()));}}]);return MediaControls;}(_react.Component);MediaControls.defaultProps={mainColor:'rgba(12, 83, 175, 0.9)'};exports.default=MediaControls;
+Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/MediaControls.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _reactNativeSlider=require('react-native-slider');var _reactNativeSlider2=_interopRequireDefault(_reactNativeSlider);var _MediaControlsStyles=require('./MediaControlsStyles');var _MediaControlsStyles2=_interopRequireDefault(_MediaControlsStyles);var _Utils=require('./Utils');var _Constants=require('./Constants');var _Constants2=_interopRequireDefault(_Constants);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var MediaControls=function(_Component){_inherits(MediaControls,_Component);function MediaControls(){var _ref;var _temp,_this,_ret;_classCallCheck(this,MediaControls);for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return _ret=(_temp=(_this=_possibleConstructorReturn(this,(_ref=MediaControls.__proto__||Object.getPrototypeOf(MediaControls)).call.apply(_ref,[this].concat(args))),_this),_this.state={opacity:new _reactNative.Animated.Value(1),isVisible:true},_this.onReplay=function(){_this.fadeOutControls(5000);_this.props.onReplay();},_this.onPause=function(){var _this$props=_this.props,playerState=_this$props.playerState,onPaused=_this$props.onPaused;var PLAYING=_Constants2.default.PLAYING,PAUSED=_Constants2.default.PAUSED;switch(playerState){case PLAYING:{_this.cancelAnimation();break;}case PAUSED:{_this.fadeOutControls(5000);break;}default:break;}var newPlayerState=playerState===PLAYING?PAUSED:PLAYING;return onPaused(newPlayerState);},_this.setLoadingView=function(){return _react2.default.createElement(_reactNative.ActivityIndicator,{size:'large',color:'#FFF',__source:{fileName:_jsxFileName,lineNumber:88}});},_this.setPlayerControls=function(playerState){var icon=_this.getPlayerStateIcon(playerState);var pressAction=playerState===_Constants2.default.ENDED?_this.onReplay:_this.onPause;return _react2.default.createElement(_reactNative.TouchableOpacity,{style:[_MediaControlsStyles2.default.playButton,{backgroundColor:_this.props.mainColor}],onPress:pressAction,__source:{fileName:_jsxFileName,lineNumber:95}},_react2.default.createElement(_reactNative.Image,{source:icon,style:_MediaControlsStyles2.default.playIcon,__source:{fileName:_jsxFileName,lineNumber:99}}));},_this.getPlayerStateIcon=function(playerState){switch(playerState){case _Constants2.default.PAUSED:return require('./assets/ic_play.png');case _Constants2.default.PLAYING:return require('./assets/ic_pause.png');case _Constants2.default.ENDED:return require('./assets/ic_replay.png');default:return null;}},_this.cancelAnimation=function(){_this.state.opacity.stopAnimation(function(){_this.setState({isVisible:true});});},_this.toggleControls=function(){_this.state.opacity.stopAnimation(function(value){_this.setState({isVisible:!!value});return value?_this.fadeOutControls():_this.fadeInControls();});},_this.fadeOutControls=function(){var delay=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;_reactNative.Animated.timing(_this.state.opacity,{toValue:0,duration:300,delay:delay}).start(function(result){if(result.finished)_this.setState({isVisible:false});});},_this.fadeInControls=function(){var loop=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;_this.setState({isVisible:true});_reactNative.Animated.timing(_this.state.opacity,{toValue:1,duration:300,delay:0}).start(function(){if(loop){_this.fadeOutControls(5000);}});},_this.dragging=function(value){var _this$props2=_this.props,onSeeking=_this$props2.onSeeking,playerState=_this$props2.playerState;onSeeking(value);if(playerState===_Constants2.default.PAUSED)return;_this.onPause();},_this.seekVideo=function(value){_this.props.onSeek(value);_this.onPause();},_temp),_possibleConstructorReturn(_this,_ret);}_createClass(MediaControls,[{key:'componentDidMount',value:function componentDidMount(){this.fadeOutControls(5000);}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){if(nextProps.playerState===_Constants2.default.ENDED){this.fadeInControls(false);}}},{key:'renderControls',value:function renderControls(){var _props=this.props,duration=_props.duration,isLoading=_props.isLoading,mainColor=_props.mainColor,onFullScreen=_props.onFullScreen,playerState=_props.playerState,progress=_props.progress,toolbar=_props.toolbar;if(!this.state.isVisible)return null;var fullScreenImage=require('./assets/ic_fullscreen.png');return _react2.default.createElement(_reactNative.View,{style:_MediaControlsStyles2.default.container,__source:{fileName:_jsxFileName,lineNumber:191}},_react2.default.createElement(_reactNative.View,{style:[_MediaControlsStyles2.default.controlsRow,_MediaControlsStyles2.default.toolbarRow],__source:{fileName:_jsxFileName,lineNumber:192}},toolbar),_react2.default.createElement(_reactNative.View,{style:[_MediaControlsStyles2.default.controlsRow],__source:{fileName:_jsxFileName,lineNumber:193}},isLoading?this.setLoadingView():this.setPlayerControls(playerState)),_react2.default.createElement(_reactNative.View,{style:[_MediaControlsStyles2.default.controlsRow,_MediaControlsStyles2.default.progressContainer],__source:{fileName:_jsxFileName,lineNumber:198}},_react2.default.createElement(_reactNative.View,{style:_MediaControlsStyles2.default.progressColumnContainer,__source:{fileName:_jsxFileName,lineNumber:199}},_react2.default.createElement(_reactNative.View,{style:[_MediaControlsStyles2.default.timerLabelsContainer],__source:{fileName:_jsxFileName,lineNumber:200}},_react2.default.createElement(_reactNative.Text,{style:_MediaControlsStyles2.default.timerLabel,__source:{fileName:_jsxFileName,lineNumber:201}},(0,_Utils.humanizeVideoDuration)(progress)),_react2.default.createElement(_reactNative.Text,{style:_MediaControlsStyles2.default.timerLabel,__source:{fileName:_jsxFileName,lineNumber:204}},(0,_Utils.humanizeVideoDuration)(duration))),_react2.default.createElement(_reactNativeSlider2.default,{style:_MediaControlsStyles2.default.progressSlider,onValueChange:this.dragging,onSlidingComplete:this.seekVideo,maximumValue:Math.floor(duration),value:Math.floor(progress),trackStyle:_MediaControlsStyles2.default.track,thumbStyle:[_MediaControlsStyles2.default.thumb,{borderColor:mainColor}],minimumTrackTintColor:mainColor,__source:{fileName:_jsxFileName,lineNumber:208}})),_react2.default.createElement(_reactNative.TouchableOpacity,{style:_MediaControlsStyles2.default.fullScreenContainer,onPress:onFullScreen,__source:{fileName:_jsxFileName,lineNumber:219}},_react2.default.createElement(_reactNative.Image,{source:fullScreenImage,__source:{fileName:_jsxFileName,lineNumber:223}}))));}},{key:'render',value:function render(){return _react2.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.toggleControls,__source:{fileName:_jsxFileName,lineNumber:232}},_react2.default.createElement(_reactNative.Animated.View,{style:[_MediaControlsStyles2.default.container,{opacity:this.state.opacity}],__source:{fileName:_jsxFileName,lineNumber:233}},this.renderControls()));}}]);return MediaControls;}(_react.Component);MediaControls.defaultProps={isFullScreen:false,isLoading:false,mainColor:'rgba(12, 83, 175, 0.9)',onFullScreen:_Utils.noop,onReplay:_Utils.noop,onSeeking:_Utils.noop};exports.default=MediaControls;

lib/Utils.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:true});var _slicedToArray=function(){function sliceIterator(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[typeof Symbol==="function"?Symbol.iterator:"@@iterator"](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"])_i["return"]();}finally{if(_d)throw _e;}}return _arr;}return function(arr,i){if(Array.isArray(arr)){return arr;}else if((typeof Symbol==="function"?Symbol.iterator:"@@iterator")in Object(arr)){return sliceIterator(arr,i);}else{throw new TypeError("Invalid attempt to destructure non-iterable instance");}};}();var humanizeVideoDuration=function humanizeVideoDuration(seconds){var _ref=seconds>=3600?[11,8]:[14,5],_ref2=_slicedToArray(_ref,2),begin=_ref2[0],end=_ref2[1];var date=new Date(null);date.setSeconds(seconds);return date.toISOString().substr(begin,end);};exports.default=humanizeVideoDuration;
+Object.defineProperty(exports,"__esModule",{value:true});var _slicedToArray=function(){function sliceIterator(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[typeof Symbol==="function"?Symbol.iterator:"@@iterator"](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"])_i["return"]();}finally{if(_d)throw _e;}}return _arr;}return function(arr,i){if(Array.isArray(arr)){return arr;}else if((typeof Symbol==="function"?Symbol.iterator:"@@iterator")in Object(arr)){return sliceIterator(arr,i);}else{throw new TypeError("Invalid attempt to destructure non-iterable instance");}};}();var humanizeVideoDuration=exports.humanizeVideoDuration=function humanizeVideoDuration(seconds){var _ref=seconds>=3600?[11,8]:[14,5],_ref2=_slicedToArray(_ref,2),begin=_ref2[0],end=_ref2[1];var date=new Date(null);date.setSeconds(seconds);return date.toISOString().substr(begin,end);};var noop=exports.noop=function noop(){};

package.json

 {
   "name": "react-native-media-controls",
   "description": "A sweet UI to control your video and audio components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": {
@@ -6,0 +6,0 @@ "name": "Charlie L",

README.md

@@ -59,3 +59,4 @@ # react-native-media-controls
 | onReplay     | function | Yes      |                        | Triggered when the replay button is pressed                          |
-| onSeek       | function | No       |                        | Triggered when the user is interacting with the slider               |
+| onSeek       | function | No       |                        | Triggered when the user released the slider                          |
+| onSeeking    | function | Yes      |                        | Triggered when the user is interacting with the slider               |
 
@@ -62,0 +63,0 @@ ## Constants

src/MediaControls.js

@@ -16,3 +16,3 @@ // @flow
 import styles from './MediaControlsStyles';
-import humanizeVideoDuration from './Utils';
+import { humanizeVideoDuration, noop } from './Utils';
 import PLAYER_STATES, { type PlayerState } from './Constants';
@@ -31,2 +31,3 @@
   onSeek: Function,
+  onSeeking: Function,
 };
@@ -41,3 +42,8 @@
   static defaultProps = {
+    isFullScreen: false,
+    isLoading: false,
     mainColor: 'rgba(12, 83, 175, 0.9)',
+    onFullScreen: noop,
+    onReplay: noop,
+    onSeeking: noop,
   };
@@ -157,4 +163,8 @@
 
-  dragging = () => {
-    if (this.props.playerState === PLAYER_STATES.PAUSED) return;
+  dragging = (value: number) => {
+    const { onSeeking, playerState } = this.props;
+
+    onSeeking(value);
+    if (playerState === PLAYER_STATES.PAUSED) return;
+
     this.onPause();
@@ -161,0 +171,0 @@ };

src/Utils.js

 // @flow
 
-const humanizeVideoDuration = (seconds: number) => {
+export const humanizeVideoDuration = (seconds: number) => {
   const [begin, end] = seconds >= 3600 ? [11, 8] : [14, 5];
@@ -12,2 +12,2 @@ // $FlowFixMe
 
-export default humanizeVideoDuration;
+export const noop = () => {};

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

176132

increased by0.32%

Lines of code

334

increased by2.45%

Number of lines in readme file

71

increased by1.43%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes