0.3.2 release

souporserious · Mar 9, 2016 · 4bc615c · 4bc615c
1 parent 7cbc487
commit 4bc615c
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,9 @@
 ## CHANGELOG
+### 0.3.2
+Allow better styling of `SeekBar` and `Volume` controls by passing background-size. Specifically for styling back fill color in Chrome
+
+Workaround for [know bug](https://github.com/facebook/react/issues/554) with input ranges in <= IE11
+
 ### 0.3.1
 Fixes bad reference to main file in package.json
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-## React Media Player 0.3.1
+## React Media Player
 
 React media container component to help build video & audio players.
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "react-media-player",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "homepage": "https://github.com/souporserious/react-media-player",
   "authors": [
     "Travis Arnold <ftntravis@gmail.com>"

diff --git a/dist/react-media-player.js b/dist/react-media-player.js
@@ -1353,13 +1353,19 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SeekBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._playingOnMouseDown = false, _this._handleMouseDown = function () {
 	      _this._playingOnMouseDown = _this.context.isPlaying;
 	      _this.context.pause();
-	    }, _this._handleMouseUp = function () {
+	    }, _this._handleMouseUp = function (_ref) {
+	      var value = _ref.target.value;
+
+	      // seek on mouseUp as well because of this bug in <= IE11
+	      // https://github.com/facebook/react/issues/554
+	      _this.context.seekTo(+value);
+
 	      // only play if media was playing prior to mouseDown
 	      if (_this._playingOnMouseDown) {
 	        _this.context.play();
 	      }
-	    }, _this._handleChange = function (_ref) {
-	      var value = _ref.target.value;
+	    }, _this._handleChange = function (_ref2) {
+	      var value = _ref2.target.value;
 
 	      _this.context.seekTo(+value);
 	    }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -1368,16 +1374,23 @@ return /******/ (function(modules) { // webpackBootstrap
 	  _createClass(SeekBar, [{
 	    key: "render",
 	    value: function render() {
+	      var _context = this.context;
+	      var duration = _context.duration;
+	      var currentTime = _context.currentTime;
+
 	      return _react2.default.createElement("input", {
 	        id: this.props.id,
 	        className: this.props.className,
 	        type: "range",
 	        step: "any",
-	        max: this.context.duration.toFixed(4),
-	        value: this.context.currentTime,
+	        max: duration.toFixed(4),
+	        value: currentTime,
 	        onMouseDown: this._handleMouseDown,
 	        onMouseUp: this._handleMouseUp,
-	        onChange: this._handleChange
+	        onChange: this._handleChange,
+	        style: {
+	          backgroundSize: currentTime * 100 / duration + '% 100%'
+	        }
 	      });
 	    }
 	  }]);
@@ -1560,7 +1573,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      args[_key] = arguments[_key];
 	    }
 
-	    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._handleChange = function (_ref) {
+	    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._handleSetVolume = function (_ref) {
 	      var value = _ref.target.value;
 
 	      _this.context.setVolume((+value).toFixed(4));
@@ -1570,15 +1583,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	  _createClass(Volume, [{
 	    key: "render",
 	    value: function render() {
+	      var volume = this.context.volume;
+
 	      return _react2.default.createElement("input", {
 	        id: this.props.id,
 	        className: this.props.className,
 	        type: "range",
 	        step: "any",
 	        min: 0,
 	        max: 1,
-	        value: this.context.volume,
-	        onChange: this._handleChange
+	        value: volume,
+	        onMouseUp: this._handleSetVolume,
+	        onChange: this._handleSetVolume,
+	        style: {
+	          backgroundSize: volume * 100 / 1 + '% 100%'
+	        }
 	      });
 	    }
 	  }]);

diff --git a/dist/react-media-player.min.js b/dist/react-media-player.min.js
diff --git a/lib/controls/SeekBar.js b/lib/controls/SeekBar.js
@@ -35,13 +35,19 @@ var SeekBar = function (_Component) {
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SeekBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._playingOnMouseDown = false, _this._handleMouseDown = function () {
       _this._playingOnMouseDown = _this.context.isPlaying;
       _this.context.pause();
-    }, _this._handleMouseUp = function () {
+    }, _this._handleMouseUp = function (_ref) {
+      var value = _ref.target.value;
+
+      // seek on mouseUp as well because of this bug in <= IE11
+      // https://github.com/facebook/react/issues/554
+      _this.context.seekTo(+value);
+
       // only play if media was playing prior to mouseDown
       if (_this._playingOnMouseDown) {
         _this.context.play();
       }
-    }, _this._handleChange = function (_ref) {
-      var value = _ref.target.value;
+    }, _this._handleChange = function (_ref2) {
+      var value = _ref2.target.value;
 
       _this.context.seekTo(+value);
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -50,16 +56,23 @@ var SeekBar = function (_Component) {
   _createClass(SeekBar, [{
     key: "render",
     value: function render() {
+      var _context = this.context;
+      var duration = _context.duration;
+      var currentTime = _context.currentTime;
+
       return _react2.default.createElement("input", {
         id: this.props.id,
         className: this.props.className,
         type: "range",
         step: "any",
-        max: this.context.duration.toFixed(4),
-        value: this.context.currentTime,
+        max: duration.toFixed(4),
+        value: currentTime,
         onMouseDown: this._handleMouseDown,
         onMouseUp: this._handleMouseUp,
-        onChange: this._handleChange
+        onChange: this._handleChange,
+        style: {
+          backgroundSize: currentTime * 100 / duration + '% 100%'
+        }
       });
     }
   }]);

diff --git a/lib/controls/Volume.js b/lib/controls/Volume.js
@@ -32,7 +32,7 @@ var Volume = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._handleChange = function (_ref) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._handleSetVolume = function (_ref) {
       var value = _ref.target.value;
 
       _this.context.setVolume((+value).toFixed(4));
@@ -42,15 +42,21 @@ var Volume = function (_Component) {
   _createClass(Volume, [{
     key: "render",
     value: function render() {
+      var volume = this.context.volume;
+
       return _react2.default.createElement("input", {
         id: this.props.id,
         className: this.props.className,
         type: "range",
         step: "any",
         min: 0,
         max: 1,
-        value: this.context.volume,
-        onChange: this._handleChange
+        value: volume,
+        onMouseUp: this._handleSetVolume,
+        onChange: this._handleSetVolume,
+        style: {
+          backgroundSize: volume * 100 / 1 + '% 100%'
+        }
       });
     }
   }]);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-media-player",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "React media player.",
   "main": "lib/react-media-player.js",
   "scripts": {
@@ -47,7 +47,7 @@
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-motion": "^0.4.2",
-    "react-motion-ui-pack": "^0.6.0",
+    "react-motion-ui-pack": "^0.6.1",
     "sass-loader": "^1.0.2",
     "style-loader": "^0.12.3",
     "webpack": "^1.9.12",