Skip to content

Commit

Permalink
0.3.3 release
Browse files Browse the repository at this point in the history
  • Loading branch information
@souporserious
souporserious committed Mar 15, 2016
1 parent f5d9b21 commit 5926c84
Show file tree
Hide file tree
Showing 10 changed files with 86 additions and 43 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
## CHANGELOG
### 0.3.3
Fixed seekbar not updating while scrubbing

Fixed range inputs showing full progress on initial load

Now checks if `onChange` is used in Seekbar and Volume components

Patched Youtube not getting proper duration when loading a new video

Reset duration when loading a new Youtube video

### 0.3.2
Allow better styling of `SeekBar` and `Volume` controls by passing background-size. Specifically for styling back fill color in Chrome

Expand Down
22 changes: 12 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,30 @@ React media container component to help build video & audio players.

`bower install react-media-player --save`

## Example Usage
## Example using Babel Stage 0

```js

import { Media, controls, utils } from 'react-media-player'
import React, { Component, PropTypes } from 'react'
import { Media, controls } from 'react-media-player'
const { PlayPause, CurrentTime, Progress, SeekBar, Duration, MuteUnmute, Volume, Fullscreen } = controls

class MediaPlayer extends React.Component {
class MediaPlayer extends Component {
static contextTypes = {
playPause: PropTypes.func
playPause: PropTypes.func,
isLoading: PropTypes.bool
}

render() {
const { Player } = this.props
const { isLoading, playPause, currentTime, duration } = this.context
const { isLoading, playPause } = this.context

return (
<div>
<div onClick={() => playPause()}>
<div className="media">
<div className="media-player" onClick={() => playPause()}>
{Player}
</div>
<nav className="media__controls">
<nav className="media-controls">
<PlayPause />
<CurrentTime />
<Progress />
Expand All @@ -46,12 +48,12 @@ class MediaPlayer extends React.Component {

class App extends React.Component {
state = {
currSrc: 'http://www.youtube.com/embed/h3YVKTxTOgU'
currentSource: 'http://www.youtube.com/embed/h3YVKTxTOgU'
}

render() {
return (
<Media src={this.state.currSrc}>
<Media src={this.state.currentSource}>
{Player => <MediaPlayer Player={Player} />}
</Media>
)
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-media-player",
"version": "0.3.2",
"version": "0.3.3",
"homepage": "https://github.com/souporserious/react-media-player",
"authors": [
"Travis Arnold <ftntravis@gmail.com>"
Expand Down
45 changes: 30 additions & 15 deletions dist/react-media-player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ return /******/ (function(modules) { // webpackBootstrap
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Media)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
currentTime: 0,
progress: 0,
duration: 0,
duration: 0.1,
volume: 1,
isLoading: true,
isPlaying: false,
Expand All @@ -160,6 +160,7 @@ return /******/ (function(modules) { // webpackBootstrap
_this._player.stop();
}, _this._handleSeekTo = function (currentTime) {
_this._player.seekTo(currentTime);
_this.setState({ currentTime: currentTime });
}, _this._handleMute = function (isMuted) {
if (isMuted) {
_this._lastVolume = _this.state.volume;
Expand Down Expand Up @@ -225,7 +226,7 @@ return /******/ (function(modules) { // webpackBootstrap
duration: 0,
isPlaying: false,

// TODO: figure out how to keep these settings
// TODO: figure out how to keep these settings when changing vendors
// getting error because element isn't available when trying to set them
// this occurs on componentDidUpdate
volume: 1,
Expand Down Expand Up @@ -529,6 +530,7 @@ return /******/ (function(modules) { // webpackBootstrap
var isPlaying = data === 1;

if (isPlaying) {
_this3.props.onDuration(_this3._player.getDuration());
_this3._timeUpdateId = requestAnimationFrame(_this3._handleTimeUpdate);
} else {
cancelAnimationFrame(_this3._timeUpdateId);
Expand All @@ -543,6 +545,11 @@ return /******/ (function(modules) { // webpackBootstrap
_this3._progressId = requestAnimationFrame(_this3._handleProgress);
}

// reset duration if a new video was loaded
if (data === 5) {
_this3.props.onDuration(0.1);
}

_this3.props.onPlaying(isPlaying);
}
};
Expand Down Expand Up @@ -1350,24 +1357,27 @@ return /******/ (function(modules) { // webpackBootstrap
args[_key] = arguments[_key];
}

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;
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SeekBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._isPlayingOnMouseDown = false, _this._onChangeUsed = false, _this._handleMouseDown = function () {
_this._isPlayingOnMouseDown = _this.context.isPlaying;
_this.context.pause();
}, _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);
if (!_this._onChangeUsed) {
_this.context.seekTo(+value);
}

// only play if media was playing prior to mouseDown
if (_this._playingOnMouseDown) {
if (_this._isPlayingOnMouseDown) {
_this.context.play();
}
}, _this._handleChange = function (_ref2) {
var value = _ref2.target.value;

_this.context.seekTo(+value);
_this._onChangeUsed = true;
}, _temp), _possibleConstructorReturn(_this, _ret);
}

Expand All @@ -1388,9 +1398,7 @@ return /******/ (function(modules) { // webpackBootstrap
onMouseDown: this._handleMouseDown,
onMouseUp: this._handleMouseUp,
onChange: this._handleChange,
style: {
backgroundSize: currentTime * 100 / duration + '% 100%'
}
style: { backgroundSize: currentTime * 100 / duration + '% 100%' }
});
}
}]);
Expand Down Expand Up @@ -1573,10 +1581,19 @@ 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._handleSetVolume = function (_ref) {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._onChangeUsed = false, _this._handleMouseUp = function (_ref) {
var value = _ref.target.value;

// set volume on mouseUp as well because of this bug in <= IE11
// https://github.com/facebook/react/issues/554
if (!_this._onChangeUsed) {
_this.context.setVolume((+value).toFixed(4));
}
}, _this._handleChange = function (_ref2) {
var value = _ref2.target.value;

_this.context.setVolume((+value).toFixed(4));
_this._onChangeUsed = true;
}, _temp), _possibleConstructorReturn(_this, _ret);
}

Expand All @@ -1593,11 +1610,9 @@ return /******/ (function(modules) { // webpackBootstrap
min: 0,
max: 1,
value: volume,
onMouseUp: this._handleSetVolume,
onChange: this._handleSetVolume,
style: {
backgroundSize: volume * 100 / 1 + '% 100%'
}
onMouseUp: this._handleMouseUp,
onChange: this._handleChange,
style: { backgroundSize: volume * 100 / 1 + '% 100%' }
});
}
}]);
Expand Down
2 changes: 1 addition & 1 deletion dist/react-media-player.min.js
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions lib/Media.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ var Media = function (_Component) {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Media)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
currentTime: 0,
progress: 0,
duration: 0,
duration: 0.1,
volume: 1,
isLoading: true,
isPlaying: false,
Expand All @@ -73,6 +73,7 @@ var Media = function (_Component) {
_this._player.stop();
}, _this._handleSeekTo = function (currentTime) {
_this._player.seekTo(currentTime);
_this.setState({ currentTime: currentTime });
}, _this._handleMute = function (isMuted) {
if (isMuted) {
_this._lastVolume = _this.state.volume;
Expand Down Expand Up @@ -138,7 +139,7 @@ var Media = function (_Component) {
duration: 0,
isPlaying: false,

// TODO: figure out how to keep these settings
// TODO: figure out how to keep these settings when changing vendors
// getting error because element isn't available when trying to set them
// this occurs on componentDidUpdate
volume: 1,
Expand Down
15 changes: 8 additions & 7 deletions lib/controls/SeekBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,24 +32,27 @@ var SeekBar = function (_Component) {
args[_key] = arguments[_key];
}

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;
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SeekBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._isPlayingOnMouseDown = false, _this._onChangeUsed = false, _this._handleMouseDown = function () {
_this._isPlayingOnMouseDown = _this.context.isPlaying;
_this.context.pause();
}, _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);
if (!_this._onChangeUsed) {
_this.context.seekTo(+value);
}

// only play if media was playing prior to mouseDown
if (_this._playingOnMouseDown) {
if (_this._isPlayingOnMouseDown) {
_this.context.play();
}
}, _this._handleChange = function (_ref2) {
var value = _ref2.target.value;

_this.context.seekTo(+value);
_this._onChangeUsed = true;
}, _temp), _possibleConstructorReturn(_this, _ret);
}

Expand All @@ -70,9 +73,7 @@ var SeekBar = function (_Component) {
onMouseDown: this._handleMouseDown,
onMouseUp: this._handleMouseUp,
onChange: this._handleChange,
style: {
backgroundSize: currentTime * 100 / duration + '% 100%'
}
style: { backgroundSize: currentTime * 100 / duration + '% 100%' }
});
}
}]);
Expand Down
19 changes: 13 additions & 6 deletions lib/controls/Volume.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,19 @@ 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._handleSetVolume = function (_ref) {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._onChangeUsed = false, _this._handleMouseUp = function (_ref) {
var value = _ref.target.value;

// set volume on mouseUp as well because of this bug in <= IE11
// https://github.com/facebook/react/issues/554
if (!_this._onChangeUsed) {
_this.context.setVolume((+value).toFixed(4));
}
}, _this._handleChange = function (_ref2) {
var value = _ref2.target.value;

_this.context.setVolume((+value).toFixed(4));
_this._onChangeUsed = true;
}, _temp), _possibleConstructorReturn(_this, _ret);
}

Expand All @@ -52,11 +61,9 @@ var Volume = function (_Component) {
min: 0,
max: 1,
value: volume,
onMouseUp: this._handleSetVolume,
onChange: this._handleSetVolume,
style: {
backgroundSize: volume * 100 / 1 + '% 100%'
}
onMouseUp: this._handleMouseUp,
onChange: this._handleChange,
style: { backgroundSize: volume * 100 / 1 + '% 100%' }
});
}
}]);
Expand Down
6 changes: 6 additions & 0 deletions lib/vendors/Youtube.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ var Youtube = function (_Component) {
var isPlaying = data === 1;

if (isPlaying) {
_this3.props.onDuration(_this3._player.getDuration());
_this3._timeUpdateId = requestAnimationFrame(_this3._handleTimeUpdate);
} else {
cancelAnimationFrame(_this3._timeUpdateId);
Expand All @@ -147,6 +148,11 @@ var Youtube = function (_Component) {
_this3._progressId = requestAnimationFrame(_this3._handleProgress);
}

// reset duration if a new video was loaded
if (data === 5) {
_this3.props.onDuration(0.1);
}

_this3.props.onPlaying(isPlaying);
}
};
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-media-player",
"version": "0.3.2",
"version": "0.3.3",
"description": "React media player.",
"main": "lib/react-media-player.js",
"scripts": {
Expand Down

0 comments on commit 5926c84

Please sign in to comment.