Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-vimeo

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-vimeo - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

7

CHANGELOG.md

@@ -0,1 +1,8 @@

# March 07, 2018, 2018, v2.0.0
Breaking Changes:
* [1ffe820](../../commit/1ffe820) fix: update to React 16
* [e5b2842](../../commit/e5b2842) fix: use prop-types package to make work with React 16
# September 27, 2016 v0.2.2

@@ -2,0 +9,0 @@

49

docs/README.md

@@ -6,6 +6,7 @@ # API

autoplay?: Boolean = false,
videoId: String,
className?: String = 'vimeo',
loading?: ReactElement = <Spinner />,
playButton?: ReactElement = <PlayButton />,
playerOptions?: Object = { autoplay: 1 },
playButton?: ReactElement = <PlayButton />,
videoId: String,

@@ -27,20 +28,22 @@ onCueChange?(data?: Object) => Void,

## autoplay?: Boolean = false
### autoplay?: Boolean = false
If true, video will automatically play
## videoId: String
The Vimeo video ID. This property is required
## className?: String
### className?: String
`className` applied to wrapping div
## playerOptions?: Object
Object of player options as specified in Vimeo Player docs: https://developer.vimeo.com/player/embedding#universal-parameters. Will get appended to iframe URL
### loading?: ReactElement
Provide a custom element loading element.
## playButton?: ReactElement
### playButton?: ReactElement
Provide a custom play button element. This element will be cloned and a
`onClick` prop is added to manage starting the video
## onCueChange?(data: Object) => Void
### playerOptions?: Object
Object of player options as specified in Vimeo Player docs: https://developer.vimeo.com/player/embedding#universal-parameters. Will get appended to iframe URL
### videoId: String
The Vimeo video ID. This property is required
### onCueChange?(data: Object) => Void
Called when the active cue for the current text track changes.

@@ -50,40 +53,40 @@ It also fires when the active text track changes.

## onEnded?(data: Object) => Void
### onEnded?(data: Object) => Void
Called when video reaches the end
## onError?(data: Object) => Void
### onError?(data: Object) => Void
Called in the event that there is an error.
If no error handler provided, the error will be thrown.
## onLoaded?(data: Object) => Void
### onLoaded?(data: Object) => Void
Called when a new video is loaded in the player.
## onPause?(data: Object) => Void
### onPause?(data: Object) => Void
Called when video is paused
## onPlay?(data: Object) => Void
### onPlay?(data: Object) => Void
Called when video is played
## onProgress?(data: Object) => Void
### onProgress?(data: Object) => Void
Called as the video is loaded.
Reports back the amount of the video that has been buffered.
## onReady?(data: Object) => Void
### onReady?(data: Object) => Void
Called when video has loaded and is ready to play.
Other event functions will not be called before this one other than onError
## onSeeked?(data: Object) => Void
### onSeeked?(data: Object) => Void
Called when the player seeks to a specific time.
`onTimeUpdate` will also be called at the same time.
## onTextTrackChanged?(data: Object) => Void
### onTextTrackChanged?(data: Object) => Void
Triggered when the active text track (captions/subtitles) changes.
The values will be null if text tracks are turned off.
## onTimeUpdate?(data: Object) => Void
### onTimeUpdate?(data: Object) => Void
Called as the current time of the video updates. It generally fires every 250ms, but it may vary depending on the browser.
## onVolumeChange?(data: Object) => Void
### onVolumeChange?(data: Object) => Void
Triggered when the volume in the player changes.
Some devices do not support setting the volume of the video independently from the system volume,
so this event will never fire on those devices.

69

lib/Play-Button.js

@@ -7,2 +7,8 @@ 'use strict';

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 _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');

@@ -14,28 +20,47 @@

exports.default = _react2.default.createClass({
displayName: 'PlayButton',
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
propTypes: {
onClick: _react2.default.PropTypes.func
},
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; }
render: function render() {
return _react2.default.createElement(
'button',
{
className: 'vimeo-play-button',
onClick: this.props.onClick,
type: 'button' },
_react2.default.createElement(
'svg',
{
version: '1.1',
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg' },
_react2.default.createElement('path', { d: 'M79.674,53.719c2.59-2.046,2.59-5.392,0-7.437L22.566,1.053C19.977-0.993,18,0.035,18,3.335v93.331c0,3.3,1.977,4.326,4.566,2.281L79.674,53.719z' })
)
);
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; } /* eslint-disable max-len */
var _class = function (_React$Component) {
_inherits(_class, _React$Component);
function _class() {
_classCallCheck(this, _class);
return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
}
}); /* eslint-disable max-len */
_createClass(_class, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'button',
{
className: 'vimeo-play-button',
onClick: this.props.onClick,
type: 'button' },
_react2.default.createElement(
'svg',
{
version: '1.1',
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg' },
_react2.default.createElement('path', { d: 'M79.674,53.719c2.59-2.046,2.59-5.392,0-7.437L22.566,1.053C19.977-0.993,18,0.035,18,3.335v93.331c0,3.3,1.977,4.326,4.566,2.281L79.674,53.719z' })
)
);
}
}]);
return _class;
}(_react2.default.Component);
_class.displayName = 'PlayButton';
_class.propTypes = {
onClick: _propTypes2.default.func
};
exports.default = _class;
module.exports = exports['default'];

62

lib/Spinner.js

@@ -7,2 +7,4 @@ 'use strict';

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');

@@ -14,2 +16,9 @@

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; } /* eslint-disable max-len */
/*

@@ -19,25 +28,38 @@ * React component for Vimeo Loading Spinner created and rendered.

*/
exports.default = _react2.default.createClass({
displayName: 'Spinner',
var _class = function (_React$Component) {
_inherits(_class, _React$Component);
render: function render() {
return _react2.default.createElement(
'div',
{ className: 'vimeo-loading' },
_react2.default.createElement(
'svg',
{
height: '32',
viewBox: '0 0 32 32',
width: '32',
xmlns: 'http://www.w3.org/2000/svg' },
_react2.default.createElement('path', {
d: 'M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4',
opacity: '.25' }),
_react2.default.createElement('path', { d: 'M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z' })
)
);
function _class() {
_classCallCheck(this, _class);
return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
}
}); /* eslint-disable max-len */
_createClass(_class, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ className: 'vimeo-loading' },
_react2.default.createElement(
'svg',
{
height: '32',
viewBox: '0 0 32 32',
width: '32',
xmlns: 'http://www.w3.org/2000/svg' },
_react2.default.createElement('path', {
d: 'M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4',
opacity: '.25' }),
_react2.default.createElement('path', { d: 'M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z' })
)
);
}
}]);
return _class;
}(_react2.default.Component);
_class.displayName = 'Spinner';
exports.default = _class;
module.exports = exports['default'];

1040

lib/umd/ReactVimeo.js
/*
* React-Vimeo - React component to load video from Vimeo
* @version v1.0.0
* @version v2.0.0
* @link https://github.com/freecodecamp/react-vimeo

@@ -63,3 +63,3 @@ * @license MIT

/* 0 */
/***/ function(module, exports, __webpack_require__) {
/***/ (function(module, exports, __webpack_require__) {

@@ -72,2 +72,8 @@ 'use strict';

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 _propTypes = __webpack_require__(3);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = __webpack_require__(1);

@@ -77,7 +83,7 @@

var _keymirror = __webpack_require__(7);
var _keymirror = __webpack_require__(10);
var _keymirror2 = _interopRequireDefault(_keymirror);
var _jsonp = __webpack_require__(6);
var _jsonp = __webpack_require__(9);

@@ -90,7 +96,7 @@ var _jsonp2 = _interopRequireDefault(_jsonp);

var _PlayButton = __webpack_require__(3);
var _PlayButton = __webpack_require__(4);
var _PlayButton2 = _interopRequireDefault(_PlayButton);
var _Spinner = __webpack_require__(4);
var _Spinner = __webpack_require__(5);

@@ -101,2 +107,8 @@ var _Spinner2 = _interopRequireDefault(_Spinner);

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 debug = (0, _debug2.default)('vimeo:player');

@@ -136,254 +148,264 @@ var noop = function noop() {};

exports.default = _react2.default.createClass({
displayName: 'Vimeo',
var _class = function (_React$Component) {
_inherits(_class, _React$Component);
propTypes: {
autoplay: _react.PropTypes.bool,
className: _react.PropTypes.string,
loading: _react.PropTypes.element,
playButton: _react.PropTypes.node,
playerOptions: _react.PropTypes.object,
videoId: _react.PropTypes.string.isRequired,
function _class() {
var _ref;
// event callbacks
onCueChange: _react.PropTypes.func,
onEnded: _react.PropTypes.func,
onError: _react.PropTypes.func,
onLoaded: _react.PropTypes.func,
onPause: _react.PropTypes.func,
onPlay: _react.PropTypes.func,
onProgress: _react.PropTypes.func,
onReady: _react.PropTypes.func,
onSeeked: _react.PropTypes.func,
onTextTrackChanged: _react.PropTypes.func,
onTimeUpdate: _react.PropTypes.func,
onVolumeChange: _react.PropTypes.func
},
var _temp, _this, _ret;
getDefaultProps: function getDefaultProps() {
var defaults = Object.keys(playerEvents).concat(['ready']).reduce(function (defaults, event) {
defaults['on' + capitalize(event)] = noop;
return defaults;
}, {});
_classCallCheck(this, _class);
defaults.className = 'vimeo';
defaults.playerOptions = { autoplay: 1 };
defaults.autoplay = false;
return defaults;
},
getInitialState: function getInitialState() {
return {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
imageLoaded: false,
playerOrigin: '*',
showingVideo: this.props.autoplay,
showingVideo: _this.props.autoplay,
thumb: null
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (nextProps.videoId !== this.props.videoId) {
this.setState({
thumb: null,
imageLoaded: false,
showingVideo: false
});
}
},
componentDidMount: function componentDidMount() {
this.fetchVimeoData();
},
componentDidUpdate: function componentDidUpdate() {
this.fetchVimeoData();
},
componentWillUnmount: function componentWillUnmount() {
var _context;
}, _this.addMessageListener = function () {
var _context;
var removeEventListener = typeof window !== 'undefined' ? (_context = window).removeEventListener.bind(_context) : noop;
var addEventListener = typeof window !== 'undefined' ? (_context = window).addEventListener.bind(_context) : noop;
removeEventListener('message', this.onMessage);
},
addMessageListener: function addMessageListener() {
var _context2;
addEventListener('message', _this.onMessage);
}, _this.onError = function (err) {
if (_this.props.onError) {
_this.props.onError(err);
}
throw err;
}, _this.onMessage = function (_ref2) {
var origin = _ref2.origin,
data = _ref2.data;
var onReady = _this.props.onReady;
var playerOrigin = _this.state.playerOrigin;
var addEventListener = typeof window !== 'undefined' ? (_context2 = window).addEventListener.bind(_context2) : noop;
addEventListener('message', this.onMessage);
},
onError: function onError(err) {
if (this.props.onError) {
this.props.onError(err);
}
throw err;
},
onMessage: function onMessage(_ref) {
var origin = _ref.origin,
data = _ref.data;
var onReady = this.props.onReady;
var playerOrigin = this.state.playerOrigin;
if (playerOrigin === '*') {
_this.setState({
playerOrigin: origin
});
}
// Handle messages from the vimeo player only
if (!/^https?:\/\/player.vimeo.com/.test(origin)) {
return false;
}
if (playerOrigin === '*') {
this.setState({
playerOrigin: origin
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (err) {
debug('error parsing message', err);
data = { event: '' };
}
}
if (data.event === 'ready') {
debug('player ready');
_this.onReady(_this._player, playerOrigin === '*' ? origin : playerOrigin);
return onReady(data);
}
if (!data.event) {
// we get messages when the first event callbacks are added to the frame
return;
}
debug('firing event: ', data.event);
getFuncForEvent(data.event, _this.props)(data);
}, _this.onReady = function (player, playerOrigin) {
Object.keys(playerEvents).forEach(function (event) {
var err = post('addEventListener', event.toLowerCase(), player, playerOrigin);
if (err) {
_this.onError(err);
}
});
}
}, _this.playVideo = function (e) {
e.preventDefault();
_this.setState({ showingVideo: true });
}, _this.getIframeUrl = function () {
var videoId = _this.props.videoId;
// Handle messages from the vimeo player only
if (!/^https?:\/\/player.vimeo.com/.test(origin)) {
return false;
}
var query = _this.getIframeUrlQuery();
return '//player.vimeo.com/video/' + videoId + '?' + query;
}, _this.getIframeUrlQuery = function () {
var str = [];
Object.keys(_this.props.playerOptions).forEach(function (key) {
str.push(key + '=' + _this.props.playerOptions[key]);
});
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (err) {
debug('error parsing message', err);
data = { event: '' };
return str.join('&');
}, _this.fetchVimeoData = function () {
if (_this.state.imageLoaded) {
return;
}
}
var id = _this.props.videoId;
if (data.event === 'ready') {
var player = this.refs.player;
(0, _jsonp2.default)('//vimeo.com/api/v2/video/' + id + '.json', {
prefix: 'vimeo'
}, function (err, res) {
if (err) {
debug('jsonp err: ', err.message);
_this.onError(err);
}
debug('jsonp response', res);
_this.setState({
thumb: res[0].thumbnail_large,
imageLoaded: true
});
});
}, _this.renderImage = function () {
if (_this.state.showingVideo || !_this.state.imageLoaded) {
return;
}
debug('player ready');
this.onReady(player, playerOrigin === '*' ? origin : playerOrigin);
return onReady(data);
}
if (!data.event) {
// we get messages when the first event callbacks are added to the frame
return;
}
debug('firing event: ', data.event);
getFuncForEvent(data.event, this.props)(data);
},
onReady: function onReady(player, playerOrigin) {
var _this = this;
var style = {
backgroundImage: 'url(' + _this.state.thumb + ')',
display: !_this.state.showingVideo ? 'block' : 'none',
height: '100%',
width: '100%'
};
Object.keys(playerEvents).forEach(function (event) {
var err = post('addEventListener', event.toLowerCase(), player, playerOrigin);
if (err) {
_this.onError(err);
var playButton = _this.props.playButton ? (0, _react.cloneElement)(_this.props.playButton, { onClick: _this.playVideo }) : _react2.default.createElement(_PlayButton2.default, { onClick: _this.playVideo });
return _react2.default.createElement(
'div',
{
className: 'vimeo-image',
style: style },
playButton
);
}, _this.renderIframe = function () {
if (!_this.state.showingVideo) {
return;
}
});
},
playVideo: function playVideo(e) {
e.preventDefault();
this.setState({ showingVideo: true });
},
getIframeUrl: function getIframeUrl() {
var videoId = this.props.videoId;
var query = this.getIframeUrlQuery();
return '//player.vimeo.com/video/' + videoId + '?' + query;
},
getIframeUrlQuery: function getIframeUrlQuery() {
var _this2 = this;
_this.addMessageListener();
var str = [];
Object.keys(this.props.playerOptions).forEach(function (key) {
str.push(key + '=' + _this2.props.playerOptions[key]);
});
var embedVideoStyle = {
display: _this.state.showingVideo ? 'block' : 'none',
height: '100%',
width: '100%'
};
return str.join('&');
},
fetchVimeoData: function fetchVimeoData() {
var _this3 = this;
return _react2.default.createElement(
'div',
{
className: 'vimeo-embed',
style: embedVideoStyle },
_react2.default.createElement('iframe', {
frameBorder: '0',
ref: function ref(el) {
_this._player = el;
},
src: _this.getIframeUrl() })
);
}, _this.renderLoading = function (imageLoaded, loadingElement) {
if (imageLoaded) {
return;
}
if (loadingElement) {
return loadingElement;
}
return _react2.default.createElement(_Spinner2.default, null);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
if (this.state.imageLoaded) {
return;
_createClass(_class, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (nextProps.videoId !== this.props.videoId) {
this.setState({
thumb: null,
imageLoaded: false,
showingVideo: false
});
}
}
var id = this.props.videoId;
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.fetchVimeoData();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.fetchVimeoData();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var _context2;
(0, _jsonp2.default)('//vimeo.com/api/v2/video/' + id + '.json', {
prefix: 'vimeo'
}, function (err, res) {
if (err) {
debug('jsonp err: ', err.message);
_this3.onError(err);
}
debug('jsonp response', res);
_this3.setState({
thumb: res[0].thumbnail_large,
imageLoaded: true
});
});
},
renderImage: function renderImage() {
if (this.state.showingVideo || !this.state.imageLoaded) {
return;
var removeEventListener = typeof window !== 'undefined' ? (_context2 = window).removeEventListener.bind(_context2) : noop;
removeEventListener('message', this.onMessage);
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ className: this.props.className },
this.renderLoading(this.state.imageLoaded, this.props.loading),
this.renderImage(),
this.renderIframe()
);
}
}]);
var style = {
backgroundImage: 'url(' + this.state.thumb + ')',
display: !this.state.showingVideo ? 'block' : 'none',
height: '100%',
width: '100%'
};
return _class;
}(_react2.default.Component);
var playButton = this.props.playButton ? (0, _react.cloneElement)(this.props.playButton, { onClick: this.playVideo }) : _react2.default.createElement(_PlayButton2.default, { onClick: this.playVideo });
_class.displayName = 'Vimeo';
_class.propTypes = {
autoplay: _propTypes2.default.bool,
className: _propTypes2.default.string,
loading: _propTypes2.default.element,
playButton: _propTypes2.default.node,
playerOptions: _propTypes2.default.object,
videoId: _propTypes2.default.string.isRequired,
return _react2.default.createElement(
'div',
{
className: 'vimeo-image',
style: style },
playButton
);
},
renderIframe: function renderIframe() {
if (!this.state.showingVideo) {
return;
}
// event callbacks
onCueChange: _propTypes2.default.func,
onEnded: _propTypes2.default.func,
onError: _propTypes2.default.func,
onLoaded: _propTypes2.default.func,
onPause: _propTypes2.default.func,
onPlay: _propTypes2.default.func,
onProgress: _propTypes2.default.func,
onReady: _propTypes2.default.func,
onSeeked: _propTypes2.default.func,
onTextTrackChanged: _propTypes2.default.func,
onTimeUpdate: _propTypes2.default.func,
onVolumeChange: _propTypes2.default.func
};
this.addMessageListener();
_class.defaultProps = function () {
var defaults = Object.keys(playerEvents).concat(['ready']).reduce(function (defaults, event) {
defaults['on' + capitalize(event)] = noop;
return defaults;
}, {});
var embedVideoStyle = {
display: this.state.showingVideo ? 'block' : 'none',
height: '100%',
width: '100%'
};
defaults.className = 'vimeo';
defaults.playerOptions = { autoplay: 1 };
defaults.autoplay = false;
return defaults;
}();
return _react2.default.createElement(
'div',
{
className: 'vimeo-embed',
style: embedVideoStyle },
_react2.default.createElement('iframe', {
frameBorder: '0',
ref: 'player',
src: this.getIframeUrl() })
);
},
renderLoading: function renderLoading(imageLoaded, loadingElement) {
if (imageLoaded) {
return;
}
if (loadingElement) {
return loadingElement;
}
return _react2.default.createElement(_Spinner2.default, null);
},
render: function render() {
return _react2.default.createElement(
'div',
{ className: this.props.className },
this.renderLoading(this.state.imageLoaded, this.props.loading),
this.renderImage(),
this.renderIframe()
);
}
});
exports.default = _class;
module.exports = exports['default'];
/***/ },
/***/ }),
/* 1 */
/***/ function(module, exports) {
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/***/ }),
/* 2 */
/***/ function(module, exports, __webpack_require__) {
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {
/**
/* WEBPACK VAR INJECTION */(function(process) {/**
* This is the web browser implementation of `debug()`.

@@ -394,3 +416,3 @@ *

exports = module.exports = __webpack_require__(5);
exports = module.exports = __webpack_require__(6);
exports.log = log;

@@ -428,10 +450,19 @@ exports.formatArgs = formatArgs;

function useColors() {
// NB: In an Electron preload script, document will be defined but not fully
// initialized. Since we know we're in Chrome, we'll just detect this case
// explicitly
if (typeof window !== 'undefined' && window.process && window.process.type === 'renderer') {
return true;
}
// is webkit? http://stackoverflow.com/a/16459606/376773
// document is undefined in react-native: https://github.com/facebook/react-native/pull/1632
return (typeof document !== 'undefined' && 'WebkitAppearance' in document.documentElement.style) ||
return (typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance) ||
// is firebug? http://stackoverflow.com/a/398120/376773
(window.console && (console.firebug || (console.exception && console.table))) ||
(typeof window !== 'undefined' && window.console && (window.console.firebug || (window.console.exception && window.console.table))) ||
// is firefox >= v31?
// https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages
(navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31);
(typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31) ||
// double check webkit in userAgent just in case we are in a worker
(typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/));
}

@@ -458,4 +489,3 @@

function formatArgs() {
var args = arguments;
function formatArgs(args) {
var useColors = this.useColors;

@@ -470,6 +500,6 @@

if (!useColors) return args;
if (!useColors) return;
var c = 'color: ' + this.color;
args = [args[0], c, 'color: inherit'].concat(Array.prototype.slice.call(args, 1));
args.splice(1, 0, c, 'color: inherit')

@@ -481,3 +511,3 @@ // the final "%c" is somewhat tricky, because there could be other

var lastC = 0;
args[0].replace(/%[a-z%]/g, function(match) {
args[0].replace(/%[a-zA-Z%]/g, function(match) {
if ('%%' === match) return;

@@ -493,3 +523,2 @@ index++;

args.splice(lastC, 0, c);
return args;
}

@@ -539,9 +568,11 @@

try {
return exports.storage.debug;
r = exports.storage.debug;
} catch(e) {}
// If debug isn't set in LS, and we're in Electron, try to load $DEBUG
if (typeof process !== 'undefined' && 'env' in process) {
return process.env.DEBUG;
if (!r && typeof process !== 'undefined' && 'env' in process) {
r = process.env.DEBUG;
}
return r;
}

@@ -566,3 +597,3 @@

function localstorage(){
function localstorage() {
try {

@@ -573,8 +604,42 @@ return window.localStorage;

/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(9)))
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(12)))
/***/ },
/***/ }),
/* 3 */
/***/ function(module, exports, __webpack_require__) {
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
if (false) {
var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
Symbol.for &&
Symbol.for('react.element')) ||
0xeac7;
var isValidElement = function(object) {
return typeof object === 'object' &&
object !== null &&
object.$$typeof === REACT_ELEMENT_TYPE;
};
// By explicitly using `prop-types` you are opting into new development behavior.
// http://fb.me/prop-types-in-prod
var throwOnDirectAccess = true;
module.exports = require('./factoryWithTypeCheckers')(isValidElement, throwOnDirectAccess);
} else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = __webpack_require__(13)();
}
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';

@@ -586,2 +651,8 @@

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 _propTypes = __webpack_require__(3);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = __webpack_require__(1);

@@ -593,33 +664,52 @@

exports.default = _react2.default.createClass({
displayName: 'PlayButton',
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
propTypes: {
onClick: _react2.default.PropTypes.func
},
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; }
render: function render() {
return _react2.default.createElement(
'button',
{
className: 'vimeo-play-button',
onClick: this.props.onClick,
type: 'button' },
_react2.default.createElement(
'svg',
{
version: '1.1',
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg' },
_react2.default.createElement('path', { d: 'M79.674,53.719c2.59-2.046,2.59-5.392,0-7.437L22.566,1.053C19.977-0.993,18,0.035,18,3.335v93.331c0,3.3,1.977,4.326,4.566,2.281L79.674,53.719z' })
)
);
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; } /* eslint-disable max-len */
var _class = function (_React$Component) {
_inherits(_class, _React$Component);
function _class() {
_classCallCheck(this, _class);
return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
}
}); /* eslint-disable max-len */
_createClass(_class, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'button',
{
className: 'vimeo-play-button',
onClick: this.props.onClick,
type: 'button' },
_react2.default.createElement(
'svg',
{
version: '1.1',
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg' },
_react2.default.createElement('path', { d: 'M79.674,53.719c2.59-2.046,2.59-5.392,0-7.437L22.566,1.053C19.977-0.993,18,0.035,18,3.335v93.331c0,3.3,1.977,4.326,4.566,2.281L79.674,53.719z' })
)
);
}
}]);
return _class;
}(_react2.default.Component);
_class.displayName = 'PlayButton';
_class.propTypes = {
onClick: _propTypes2.default.func
};
exports.default = _class;
module.exports = exports['default'];
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {

@@ -632,2 +722,4 @@ 'use strict';

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 = __webpack_require__(1);

@@ -639,2 +731,9 @@

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; } /* eslint-disable max-len */
/*

@@ -644,30 +743,43 @@ * React component for Vimeo Loading Spinner created and rendered.

*/
exports.default = _react2.default.createClass({
displayName: 'Spinner',
var _class = function (_React$Component) {
_inherits(_class, _React$Component);
render: function render() {
return _react2.default.createElement(
'div',
{ className: 'vimeo-loading' },
_react2.default.createElement(
'svg',
{
height: '32',
viewBox: '0 0 32 32',
width: '32',
xmlns: 'http://www.w3.org/2000/svg' },
_react2.default.createElement('path', {
d: 'M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4',
opacity: '.25' }),
_react2.default.createElement('path', { d: 'M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z' })
)
);
function _class() {
_classCallCheck(this, _class);
return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
}
}); /* eslint-disable max-len */
_createClass(_class, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ className: 'vimeo-loading' },
_react2.default.createElement(
'svg',
{
height: '32',
viewBox: '0 0 32 32',
width: '32',
xmlns: 'http://www.w3.org/2000/svg' },
_react2.default.createElement('path', {
d: 'M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4',
opacity: '.25' }),
_react2.default.createElement('path', { d: 'M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z' })
)
);
}
}]);
return _class;
}(_react2.default.Component);
_class.displayName = 'Spinner';
exports.default = _class;
module.exports = exports['default'];
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

@@ -682,3 +794,3 @@

exports = module.exports = debug.debug = debug;
exports = module.exports = createDebug.debug = createDebug['default'] = createDebug;
exports.coerce = coerce;

@@ -688,3 +800,3 @@ exports.disable = disable;

exports.enabled = enabled;
exports.humanize = __webpack_require__(8);
exports.humanize = __webpack_require__(11);

@@ -701,3 +813,3 @@ /**

*
* Valid key names are a single, lowercased letter, i.e. "n".
* Valid key names are a single, lower or upper-case letter, i.e. "n" and "N".
*/

@@ -708,8 +820,2 @@

/**
* Previously assigned color.
*/
var prevColor = 0;
/**
* Previous log timestamp.

@@ -722,3 +828,3 @@ */

* Select a color.
*
* @param {String} namespace
* @return {Number}

@@ -728,4 +834,11 @@ * @api private

function selectColor() {
return exports.colors[prevColor++ % exports.colors.length];
function selectColor(namespace) {
var hash = 0, i;
for (i in namespace) {
hash = ((hash << 5) - hash) + namespace.charCodeAt(i);
hash |= 0; // Convert to 32bit integer
}
return exports.colors[Math.abs(hash) % exports.colors.length];
}

@@ -741,14 +854,10 @@

function debug(namespace) {
function createDebug(namespace) {
// define the `disabled` version
function disabled() {
}
disabled.enabled = false;
function debug() {
// disabled?
if (!debug.enabled) return;
// define the `enabled` version
function enabled() {
var self = debug;
var self = enabled;
// set `diff` timestamp

@@ -762,6 +871,3 @@ var curr = +new Date();

// add the `color` if not set
if (null == self.useColors) self.useColors = exports.useColors();
if (null == self.color && self.useColors) self.color = selectColor();
// turn the `arguments` into a proper Array
var args = new Array(arguments.length);

@@ -775,4 +881,4 @@ for (var i = 0; i < args.length; i++) {

if ('string' !== typeof args[0]) {
// anything else let's inspect with %o
args = ['%o'].concat(args);
// anything else let's inspect with %O
args.unshift('%O');
}

@@ -782,3 +888,3 @@

var index = 0;
args[0] = args[0].replace(/%([a-z%])/g, function(match, format) {
args[0] = args[0].replace(/%([a-zA-Z%])/g, function(match, format) {
// if we encounter an escaped % then don't increase the array index

@@ -799,15 +905,20 @@ if (match === '%%') return match;

// apply env-specific formatting
args = exports.formatArgs.apply(self, args);
// apply env-specific formatting (colors, etc.)
exports.formatArgs.call(self, args);
var logFn = enabled.log || exports.log || console.log.bind(console);
var logFn = debug.log || exports.log || console.log.bind(console);
logFn.apply(self, args);
}
enabled.enabled = true;
var fn = exports.enabled(namespace) ? enabled : disabled;
debug.namespace = namespace;
debug.enabled = exports.enabled(namespace);
debug.useColors = exports.useColors();
debug.color = selectColor(namespace);
fn.namespace = namespace;
// env-specific initialization logic for debug instances
if ('function' === typeof exports.init) {
exports.init(debug);
}
return fn;
return debug;
}

@@ -826,3 +937,6 @@

var split = (namespaces || '').split(/[\s,]+/);
exports.names = [];
exports.skips = [];
var split = (typeof namespaces === 'string' ? namespaces : '').split(/[\s,]+/);
var len = split.length;

@@ -832,3 +946,3 @@

if (!split[i]) continue; // ignore empty strings
namespaces = split[i].replace(/[\\^$+?.()|[\]{}]/g, '\\$&').replace(/\*/g, '.*?');
namespaces = split[i].replace(/\*/g, '.*?');
if (namespaces[0] === '-') {

@@ -889,7 +1003,106 @@ exports.skips.push(new RegExp('^' + namespaces.substr(1) + '$'));

/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
/***/ }),
/* 7 */
/***/ (function(module, exports) {
"use strict";
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
function makeEmptyFunction(arg) {
return function () {
return arg;
};
}
/**
* This function accepts and discards inputs; it has no side effects. This is
* primarily useful idiomatically for overridable function endpoints which
* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
*/
var emptyFunction = function emptyFunction() {};
emptyFunction.thatReturns = makeEmptyFunction;
emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
emptyFunction.thatReturnsNull = makeEmptyFunction(null);
emptyFunction.thatReturnsThis = function () {
return this;
};
emptyFunction.thatReturnsArgument = function (arg) {
return arg;
};
module.exports = emptyFunction;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
'use strict';
/**
* Use invariant() to assert state which your program assumes to be true.
*
* Provide sprintf-style format (only %s is supported) and arguments
* to provide information about what broke and what you were
* expecting.
*
* The invariant message will be stripped in production, but the invariant
* will remain to ensure logic does not differ in production.
*/
var validateFormat = function validateFormat(format) {};
if (false) {
validateFormat = function validateFormat(format) {
if (format === undefined) {
throw new Error('invariant requires an error message argument');
}
};
}
function invariant(condition, format, a, b, c, d, e, f) {
validateFormat(format);
if (!condition) {
var error;
if (format === undefined) {
error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
} else {
var args = [a, b, c, d, e, f];
var argIndex = 0;
error = new Error(format.replace(/%s/g, function () {
return args[argIndex++];
}));
error.name = 'Invariant Violation';
}
error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
}
}
module.exports = invariant;
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Module dependencies

@@ -993,5 +1206,5 @@ */

/***/ },
/* 7 */
/***/ function(module, exports) {
/***/ }),
/* 10 */
/***/ (function(module, exports) {

@@ -1053,5 +1266,5 @@ /**

/***/ },
/* 8 */
/***/ function(module, exports) {
/***/ }),
/* 11 */
/***/ (function(module, exports) {

@@ -1062,7 +1275,7 @@ /**

var s = 1000
var m = s * 60
var h = m * 60
var d = h * 24
var y = d * 365.25
var s = 1000;
var m = s * 60;
var h = m * 60;
var d = h * 24;
var y = d * 365.25;

@@ -1077,3 +1290,3 @@ /**

* @param {String|Number} val
* @param {Object} options
* @param {Object} [options]
* @throws {Error} throw an error if val is not a non-empty string or a number

@@ -1084,14 +1297,15 @@ * @return {String|Number}

module.exports = function (val, options) {
options = options || {}
var type = typeof val
module.exports = function(val, options) {
options = options || {};
var type = typeof val;
if (type === 'string' && val.length > 0) {
return parse(val)
return parse(val);
} else if (type === 'number' && isNaN(val) === false) {
return options.long ?
fmtLong(val) :
fmtShort(val)
return options.long ? fmtLong(val) : fmtShort(val);
}
throw new Error('val is not a non-empty string or a valid number. val=' + JSON.stringify(val))
}
throw new Error(
'val is not a non-empty string or a valid number. val=' +
JSON.stringify(val)
);
};

@@ -1107,12 +1321,14 @@ /**

function parse(str) {
str = String(str)
if (str.length > 10000) {
return
str = String(str);
if (str.length > 100) {
return;
}
var match = /^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(str)
var match = /^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(
str
);
if (!match) {
return
return;
}
var n = parseFloat(match[1])
var type = (match[2] || 'ms').toLowerCase()
var n = parseFloat(match[1]);
var type = (match[2] || 'ms').toLowerCase();
switch (type) {

@@ -1124,7 +1340,7 @@ case 'years':

case 'y':
return n * y
return n * y;
case 'days':
case 'day':
case 'd':
return n * d
return n * d;
case 'hours':

@@ -1135,3 +1351,3 @@ case 'hour':

case 'h':
return n * h
return n * h;
case 'minutes':

@@ -1142,3 +1358,3 @@ case 'minute':

case 'm':
return n * m
return n * m;
case 'seconds':

@@ -1149,3 +1365,3 @@ case 'second':

case 's':
return n * s
return n * s;
case 'milliseconds':

@@ -1156,5 +1372,5 @@ case 'millisecond':

case 'ms':
return n
return n;
default:
return undefined
return undefined;
}

@@ -1173,14 +1389,14 @@ }

if (ms >= d) {
return Math.round(ms / d) + 'd'
return Math.round(ms / d) + 'd';
}
if (ms >= h) {
return Math.round(ms / h) + 'h'
return Math.round(ms / h) + 'h';
}
if (ms >= m) {
return Math.round(ms / m) + 'm'
return Math.round(ms / m) + 'm';
}
if (ms >= s) {
return Math.round(ms / s) + 's'
return Math.round(ms / s) + 's';
}
return ms + 'ms'
return ms + 'ms';
}

@@ -1201,3 +1417,3 @@

plural(ms, s, 'second') ||
ms + ' ms'
ms + ' ms';
}

@@ -1211,14 +1427,14 @@

if (ms < n) {
return
return;
}
if (ms < n * 1.5) {
return Math.floor(ms / n) + ' ' + name
return Math.floor(ms / n) + ' ' + name;
}
return Math.ceil(ms / n) + ' ' + name + 's'
return Math.ceil(ms / n) + ' ' + name + 's';
}
/***/ },
/* 9 */
/***/ function(module, exports) {
/***/ }),
/* 12 */
/***/ (function(module, exports) {

@@ -1395,3 +1611,7 @@ // shim for using process in browser

process.emit = noop;
process.prependListener = noop;
process.prependOnceListener = noop;
process.listeners = function (name) { return [] }
process.binding = function (name) {

@@ -1408,5 +1628,87 @@ throw new Error('process.binding is not supported');

/***/ }
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
var emptyFunction = __webpack_require__(7);
var invariant = __webpack_require__(8);
var ReactPropTypesSecret = __webpack_require__(14);
module.exports = function() {
function shim(props, propName, componentName, location, propFullName, secret) {
if (secret === ReactPropTypesSecret) {
// It is still safe when called from React.
return;
}
invariant(
false,
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
'Use PropTypes.checkPropTypes() to call them. ' +
'Read more at http://fb.me/use-check-prop-types'
);
};
shim.isRequired = shim;
function getShim() {
return shim;
};
// Important!
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
var ReactPropTypes = {
array: shim,
bool: shim,
func: shim,
number: shim,
object: shim,
string: shim,
symbol: shim,
any: shim,
arrayOf: getShim,
element: shim,
instanceOf: getShim,
node: shim,
objectOf: getShim,
oneOf: getShim,
oneOfType: getShim,
shape: getShim,
exact: getShim
};
ReactPropTypes.checkPropTypes = emptyFunction;
ReactPropTypes.PropTypes = ReactPropTypes;
return ReactPropTypes;
};
/***/ }),
/* 14 */
/***/ (function(module, exports) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
module.exports = ReactPropTypesSecret;
/***/ })
/******/ ])
});
;

4

lib/umd/ReactVimeo.min.js
/*
* React-Vimeo - React component to load video from Vimeo
* @version v1.0.0
* @version v2.0.0
* @link https://github.com/freecodecamp/react-vimeo

@@ -8,2 +8,2 @@ * @license MIT

*/
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactVimeo=t(require("react")):e.ReactVimeo=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.substring(1)}function a(e,t){return t["on"+o(e)]||function(){}}function s(e,t,n,r){try{n.contentWindow.postMessage({method:e,value:t},r)}catch(e){return e}return null}Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),u=r(i),c=n(7),l=r(c),f=n(6),d=r(f),p=n(2),m=r(p),h=n(3),y=r(h),g=n(4),v=r(g),w=(0,m.default)("vimeo:player"),b=function(){},T=(0,l.default)({cueChange:null,ended:null,loaded:null,pause:null,play:null,progress:null,seeked:null,textTrackChange:null,timeUpdate:null,volumeChange:null});t.default=u.default.createClass({displayName:"Vimeo",propTypes:{autoplay:i.PropTypes.bool,className:i.PropTypes.string,loading:i.PropTypes.element,playButton:i.PropTypes.node,playerOptions:i.PropTypes.object,videoId:i.PropTypes.string.isRequired,onCueChange:i.PropTypes.func,onEnded:i.PropTypes.func,onError:i.PropTypes.func,onLoaded:i.PropTypes.func,onPause:i.PropTypes.func,onPlay:i.PropTypes.func,onProgress:i.PropTypes.func,onReady:i.PropTypes.func,onSeeked:i.PropTypes.func,onTextTrackChanged:i.PropTypes.func,onTimeUpdate:i.PropTypes.func,onVolumeChange:i.PropTypes.func},getDefaultProps:function(){var e=Object.keys(T).concat(["ready"]).reduce(function(e,t){return e["on"+o(t)]=b,e},{});return e.className="vimeo",e.playerOptions={autoplay:1},e.autoplay=!1,e},getInitialState:function(){return{imageLoaded:!1,playerOrigin:"*",showingVideo:this.props.autoplay,thumb:null}},componentWillReceiveProps:function(e){e.videoId!==this.props.videoId&&this.setState({thumb:null,imageLoaded:!1,showingVideo:!1})},componentDidMount:function(){this.fetchVimeoData()},componentDidUpdate:function(){this.fetchVimeoData()},componentWillUnmount:function(){var e,t="undefined"!=typeof window?(e=window).removeEventListener.bind(e):b;t("message",this.onMessage)},addMessageListener:function(){var e,t="undefined"!=typeof window?(e=window).addEventListener.bind(e):b;t("message",this.onMessage)},onError:function(e){throw this.props.onError&&this.props.onError(e),e},onMessage:function(e){var t=e.origin,n=e.data,r=this.props.onReady,o=this.state.playerOrigin;if("*"===o&&this.setState({playerOrigin:t}),!/^https?:\/\/player.vimeo.com/.test(t))return!1;if("string"==typeof n)try{n=JSON.parse(n)}catch(e){w("error parsing message",e),n={event:""}}if("ready"===n.event){var s=this.refs.player;return w("player ready"),this.onReady(s,"*"===o?t:o),r(n)}n.event&&(w("firing event: ",n.event),a(n.event,this.props)(n))},onReady:function(e,t){var n=this;Object.keys(T).forEach(function(r){var o=s("addEventListener",r.toLowerCase(),e,t);o&&n.onError(o)})},playVideo:function(e){e.preventDefault(),this.setState({showingVideo:!0})},getIframeUrl:function(){var e=this.props.videoId,t=this.getIframeUrlQuery();return"//player.vimeo.com/video/"+e+"?"+t},getIframeUrlQuery:function(){var e=this,t=[];return Object.keys(this.props.playerOptions).forEach(function(n){t.push(n+"="+e.props.playerOptions[n])}),t.join("&")},fetchVimeoData:function(){var e=this;if(!this.state.imageLoaded){var t=this.props.videoId;(0,d.default)("//vimeo.com/api/v2/video/"+t+".json",{prefix:"vimeo"},function(t,n){t&&(w("jsonp err: ",t.message),e.onError(t)),w("jsonp response",n),e.setState({thumb:n[0].thumbnail_large,imageLoaded:!0})})}},renderImage:function(){if(!this.state.showingVideo&&this.state.imageLoaded){var e={backgroundImage:"url("+this.state.thumb+")",display:this.state.showingVideo?"none":"block",height:"100%",width:"100%"},t=this.props.playButton?(0,i.cloneElement)(this.props.playButton,{onClick:this.playVideo}):u.default.createElement(y.default,{onClick:this.playVideo});return u.default.createElement("div",{className:"vimeo-image",style:e},t)}},renderIframe:function(){if(this.state.showingVideo){this.addMessageListener();var e={display:this.state.showingVideo?"block":"none",height:"100%",width:"100%"};return u.default.createElement("div",{className:"vimeo-embed",style:e},u.default.createElement("iframe",{frameBorder:"0",ref:"player",src:this.getIframeUrl()}))}},renderLoading:function(e,t){if(!e)return t?t:u.default.createElement(v.default,null)},render:function(){return u.default.createElement("div",{className:this.props.className},this.renderLoading(this.state.imageLoaded,this.props.loading),this.renderImage(),this.renderIframe())}}),e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){(function(r){function o(){return"undefined"!=typeof document&&"WebkitAppearance"in document.documentElement.style||window.console&&(console.firebug||console.exception&&console.table)||navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31}function a(){var e=arguments,n=this.useColors;if(e[0]=(n?"%c":"")+this.namespace+(n?" %c":" ")+e[0]+(n?"%c ":" ")+"+"+t.humanize(this.diff),!n)return e;var r="color: "+this.color;e=[e[0],r,"color: inherit"].concat(Array.prototype.slice.call(e,1));var o=0,a=0;return e[0].replace(/%[a-z%]/g,function(e){"%%"!==e&&(o++,"%c"===e&&(a=o))}),e.splice(a,0,r),e}function s(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function i(e){try{null==e?t.storage.removeItem("debug"):t.storage.debug=e}catch(e){}}function u(){try{return t.storage.debug}catch(e){}if("undefined"!=typeof r&&"env"in r)return r.env.DEBUG}function c(){try{return window.localStorage}catch(e){}}t=e.exports=n(5),t.log=s,t.formatArgs=a,t.save=i,t.load=u,t.useColors=o,t.storage="undefined"!=typeof chrome&&"undefined"!=typeof chrome.storage?chrome.storage.local:c(),t.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],t.formatters.j=function(e){try{return JSON.stringify(e)}catch(e){return"[UnexpectedJSONParseError]: "+e.message}},t.enable(u())}).call(t,n(9))},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),a=r(o);t.default=a.default.createClass({displayName:"PlayButton",propTypes:{onClick:a.default.PropTypes.func},render:function(){return a.default.createElement("button",{className:"vimeo-play-button",onClick:this.props.onClick,type:"button"},a.default.createElement("svg",{version:"1.1",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},a.default.createElement("path",{d:"M79.674,53.719c2.59-2.046,2.59-5.392,0-7.437L22.566,1.053C19.977-0.993,18,0.035,18,3.335v93.331c0,3.3,1.977,4.326,4.566,2.281L79.674,53.719z"})))}}),e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),a=r(o);t.default=a.default.createClass({displayName:"Spinner",render:function(){return a.default.createElement("div",{className:"vimeo-loading"},a.default.createElement("svg",{height:"32",viewBox:"0 0 32 32",width:"32",xmlns:"http://www.w3.org/2000/svg"},a.default.createElement("path",{d:"M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4",opacity:".25"}),a.default.createElement("path",{d:"M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"})))}}),e.exports=t.default},function(e,t,n){function r(){return t.colors[l++%t.colors.length]}function o(e){function n(){}function o(){var e=o,n=+new Date,a=n-(c||n);e.diff=a,e.prev=c,e.curr=n,c=n,null==e.useColors&&(e.useColors=t.useColors()),null==e.color&&e.useColors&&(e.color=r());for(var s=new Array(arguments.length),i=0;i<s.length;i++)s[i]=arguments[i];s[0]=t.coerce(s[0]),"string"!=typeof s[0]&&(s=["%o"].concat(s));var u=0;s[0]=s[0].replace(/%([a-z%])/g,function(n,r){if("%%"===n)return n;u++;var o=t.formatters[r];if("function"==typeof o){var a=s[u];n=o.call(e,a),s.splice(u,1),u--}return n}),s=t.formatArgs.apply(e,s);var l=o.log||t.log||console.log.bind(console);l.apply(e,s)}n.enabled=!1,o.enabled=!0;var a=t.enabled(e)?o:n;return a.namespace=e,a}function a(e){t.save(e);for(var n=(e||"").split(/[\s,]+/),r=n.length,o=0;o<r;o++)n[o]&&(e=n[o].replace(/[\\^$+?.()|[\]{}]/g,"\\$&").replace(/\*/g,".*?"),"-"===e[0]?t.skips.push(new RegExp("^"+e.substr(1)+"$")):t.names.push(new RegExp("^"+e+"$")))}function s(){t.enable("")}function i(e){var n,r;for(n=0,r=t.skips.length;n<r;n++)if(t.skips[n].test(e))return!1;for(n=0,r=t.names.length;n<r;n++)if(t.names[n].test(e))return!0;return!1}function u(e){return e instanceof Error?e.stack||e.message:e}t=e.exports=o.debug=o,t.coerce=u,t.disable=s,t.enable=a,t.enabled=i,t.humanize=n(8),t.names=[],t.skips=[],t.formatters={};var c,l=0},function(e,t,n){function r(){}function o(e,t,n){function o(){u.parentNode&&u.parentNode.removeChild(u),window[f]=r,c&&clearTimeout(c)}function i(){window[f]&&o()}"function"==typeof t&&(n=t,t={}),t||(t={});var u,c,l=t.prefix||"__jp",f=t.name||l+s++,d=t.param||"callback",p=null!=t.timeout?t.timeout:6e4,m=encodeURIComponent,h=document.getElementsByTagName("script")[0]||document.head;return p&&(c=setTimeout(function(){o(),n&&n(new Error("Timeout"))},p)),window[f]=function(e){a("jsonp got",e),o(),n&&n(null,e)},e+=(~e.indexOf("?")?"&":"?")+d+"="+m(f),e=e.replace("?&","?"),a('jsonp req "%s"',e),u=document.createElement("script"),u.src=e,h.parentNode.insertBefore(u,h),i}var a=n(2)("jsonp");e.exports=o;var s=0},function(e,t){"use strict";var n=function(e){var t,n={};if(!(e instanceof Object)||Array.isArray(e))throw new Error("keyMirror(...): Argument must be an object.");for(t in e)e.hasOwnProperty(t)&&(n[t]=t);return n};e.exports=n},function(e,t){function n(e){if(e=String(e),!(e.length>1e4)){var t=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(t){var n=parseFloat(t[1]),r=(t[2]||"ms").toLowerCase();switch(r){case"years":case"year":case"yrs":case"yr":case"y":return n*l;case"days":case"day":case"d":return n*c;case"hours":case"hour":case"hrs":case"hr":case"h":return n*u;case"minutes":case"minute":case"mins":case"min":case"m":return n*i;case"seconds":case"second":case"secs":case"sec":case"s":return n*s;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return n;default:return}}}}function r(e){return e>=c?Math.round(e/c)+"d":e>=u?Math.round(e/u)+"h":e>=i?Math.round(e/i)+"m":e>=s?Math.round(e/s)+"s":e+"ms"}function o(e){return a(e,c,"day")||a(e,u,"hour")||a(e,i,"minute")||a(e,s,"second")||e+" ms"}function a(e,t,n){if(!(e<t))return e<1.5*t?Math.floor(e/t)+" "+n:Math.ceil(e/t)+" "+n+"s"}var s=1e3,i=60*s,u=60*i,c=24*u,l=365.25*c;e.exports=function(e,t){t=t||{};var a=typeof e;if("string"===a&&e.length>0)return n(e);if("number"===a&&isNaN(e)===!1)return t.long?o(e):r(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))}},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(l===setTimeout)return setTimeout(e,0);if((l===n||!l)&&setTimeout)return l=setTimeout,setTimeout(e,0);try{return l(e,0)}catch(t){try{return l.call(null,e,0)}catch(t){return l.call(this,e,0)}}}function a(e){if(f===clearTimeout)return clearTimeout(e);if((f===r||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function s(){h&&p&&(h=!1,p.length?m=p.concat(m):y=-1,m.length&&i())}function i(){if(!h){var e=o(s);h=!0;for(var t=m.length;t;){for(p=m,m=[];++y<t;)p&&p[y].run();y=-1,t=m.length}p=null,h=!1,a(e)}}function u(e,t){this.fun=e,this.array=t}function c(){}var l,f,d=e.exports={};!function(){try{l="function"==typeof setTimeout?setTimeout:n}catch(e){l=n}try{f="function"==typeof clearTimeout?clearTimeout:r}catch(e){f=r}}();var p,m=[],h=!1,y=-1;d.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];m.push(new u(e,t)),1!==m.length||h||o(i)},u.prototype.run=function(){this.fun.apply(null,this.array)},d.title="browser",d.browser=!0,d.env={},d.argv=[],d.version="",d.versions={},d.on=c,d.addListener=c,d.once=c,d.off=c,d.removeListener=c,d.removeAllListeners=c,d.emit=c,d.binding=function(e){throw new Error("process.binding is not supported")},d.cwd=function(){return"/"},d.chdir=function(e){throw new Error("process.chdir is not supported")},d.umask=function(){return 0}}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactVimeo=t(require("react")):e.ReactVimeo=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.substring(1)}function s(e,t){return t["on"+u(e)]||function(){}}function c(e,t,n,r){try{n.contentWindow.postMessage({method:e,value:t},r)}catch(e){return e}return null}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=n(3),p=r(f),d=n(1),m=r(d),h=n(10),y=r(h),g=n(9),v=r(g),b=n(2),w=r(b),E=n(4),O=r(E),_=n(5),x=r(_),T=(0,w.default)("vimeo:player"),j=function(){},k=(0,y.default)({cueChange:null,ended:null,loaded:null,pause:null,play:null,progress:null,seeked:null,textTrackChange:null,timeUpdate:null,volumeChange:null}),C=function(e){function t(){var e,n,r,i;o(this,t);for(var u=arguments.length,l=Array(u),f=0;f<u;f++)l[f]=arguments[f];return n=r=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(l))),r.state={imageLoaded:!1,playerOrigin:"*",showingVideo:r.props.autoplay,thumb:null},r.addMessageListener=function(){var e,t="undefined"!=typeof window?(e=window).addEventListener.bind(e):j;t("message",r.onMessage)},r.onError=function(e){throw r.props.onError&&r.props.onError(e),e},r.onMessage=function(e){var t=e.origin,n=e.data,o=r.props.onReady,a=r.state.playerOrigin;if("*"===a&&r.setState({playerOrigin:t}),!/^https?:\/\/player.vimeo.com/.test(t))return!1;if("string"==typeof n)try{n=JSON.parse(n)}catch(e){T("error parsing message",e),n={event:""}}return"ready"===n.event?(T("player ready"),r.onReady(r._player,"*"===a?t:a),o(n)):void(n.event&&(T("firing event: ",n.event),s(n.event,r.props)(n)))},r.onReady=function(e,t){Object.keys(k).forEach(function(n){var o=c("addEventListener",n.toLowerCase(),e,t);o&&r.onError(o)})},r.playVideo=function(e){e.preventDefault(),r.setState({showingVideo:!0})},r.getIframeUrl=function(){var e=r.props.videoId,t=r.getIframeUrlQuery();return"//player.vimeo.com/video/"+e+"?"+t},r.getIframeUrlQuery=function(){var e=[];return Object.keys(r.props.playerOptions).forEach(function(t){e.push(t+"="+r.props.playerOptions[t])}),e.join("&")},r.fetchVimeoData=function(){if(!r.state.imageLoaded){var e=r.props.videoId;(0,v.default)("//vimeo.com/api/v2/video/"+e+".json",{prefix:"vimeo"},function(e,t){e&&(T("jsonp err: ",e.message),r.onError(e)),T("jsonp response",t),r.setState({thumb:t[0].thumbnail_large,imageLoaded:!0})})}},r.renderImage=function(){if(!r.state.showingVideo&&r.state.imageLoaded){var e={backgroundImage:"url("+r.state.thumb+")",display:r.state.showingVideo?"none":"block",height:"100%",width:"100%"},t=r.props.playButton?(0,d.cloneElement)(r.props.playButton,{onClick:r.playVideo}):m.default.createElement(O.default,{onClick:r.playVideo});return m.default.createElement("div",{className:"vimeo-image",style:e},t)}},r.renderIframe=function(){if(r.state.showingVideo){r.addMessageListener();var e={display:r.state.showingVideo?"block":"none",height:"100%",width:"100%"};return m.default.createElement("div",{className:"vimeo-embed",style:e},m.default.createElement("iframe",{frameBorder:"0",ref:function(e){r._player=e},src:r.getIframeUrl()}))}},r.renderLoading=function(e,t){if(!e)return t?t:m.default.createElement(x.default,null)},i=n,a(r,i)}return i(t,e),l(t,[{key:"componentWillReceiveProps",value:function(e){e.videoId!==this.props.videoId&&this.setState({thumb:null,imageLoaded:!1,showingVideo:!1})}},{key:"componentDidMount",value:function(){this.fetchVimeoData()}},{key:"componentDidUpdate",value:function(){this.fetchVimeoData()}},{key:"componentWillUnmount",value:function(){var e,t="undefined"!=typeof window?(e=window).removeEventListener.bind(e):j;t("message",this.onMessage)}},{key:"render",value:function(){return m.default.createElement("div",{className:this.props.className},this.renderLoading(this.state.imageLoaded,this.props.loading),this.renderImage(),this.renderIframe())}}]),t}(m.default.Component);C.displayName="Vimeo",C.propTypes={autoplay:p.default.bool,className:p.default.string,loading:p.default.element,playButton:p.default.node,playerOptions:p.default.object,videoId:p.default.string.isRequired,onCueChange:p.default.func,onEnded:p.default.func,onError:p.default.func,onLoaded:p.default.func,onPause:p.default.func,onPlay:p.default.func,onProgress:p.default.func,onReady:p.default.func,onSeeked:p.default.func,onTextTrackChanged:p.default.func,onTimeUpdate:p.default.func,onVolumeChange:p.default.func},C.defaultProps=function(){var e=Object.keys(k).concat(["ready"]).reduce(function(e,t){return e["on"+u(t)]=j,e},{});return e.className="vimeo",e.playerOptions={autoplay:1},e.autoplay=!1,e}(),t.default=C,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){(function(r){function o(){return!("undefined"==typeof window||!window.process||"renderer"!==window.process.type)||("undefined"!=typeof document&&document.documentElement&&document.documentElement.style&&document.documentElement.style.WebkitAppearance||"undefined"!=typeof window&&window.console&&(window.console.firebug||window.console.exception&&window.console.table)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/))}function a(e){var n=this.useColors;if(e[0]=(n?"%c":"")+this.namespace+(n?" %c":" ")+e[0]+(n?"%c ":" ")+"+"+t.humanize(this.diff),n){var r="color: "+this.color;e.splice(1,0,r,"color: inherit");var o=0,a=0;e[0].replace(/%[a-zA-Z%]/g,function(e){"%%"!==e&&(o++,"%c"===e&&(a=o))}),e.splice(a,0,r)}}function i(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function u(e){try{null==e?t.storage.removeItem("debug"):t.storage.debug=e}catch(e){}}function s(){var e;try{e=t.storage.debug}catch(e){}return!e&&"undefined"!=typeof r&&"env"in r&&(e=r.env.DEBUG),e}function c(){try{return window.localStorage}catch(e){}}t=e.exports=n(6),t.log=i,t.formatArgs=a,t.save=u,t.load=s,t.useColors=o,t.storage="undefined"!=typeof chrome&&"undefined"!=typeof chrome.storage?chrome.storage.local:c(),t.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],t.formatters.j=function(e){try{return JSON.stringify(e)}catch(e){return"[UnexpectedJSONParseError]: "+e.message}},t.enable(s())}).call(t,n(12))},function(e,t,n){e.exports=n(13)()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(3),c=r(s),l=n(1),f=r(l),p=function(e){function t(){return o(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),u(t,[{key:"render",value:function(){return f.default.createElement("button",{className:"vimeo-play-button",onClick:this.props.onClick,type:"button"},f.default.createElement("svg",{version:"1.1",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},f.default.createElement("path",{d:"M79.674,53.719c2.59-2.046,2.59-5.392,0-7.437L22.566,1.053C19.977-0.993,18,0.035,18,3.335v93.331c0,3.3,1.977,4.326,4.566,2.281L79.674,53.719z"})))}}]),t}(f.default.Component);p.displayName="PlayButton",p.propTypes={onClick:c.default.func},t.default=p,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(1),c=r(s),l=function(e){function t(){return o(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),u(t,[{key:"render",value:function(){return c.default.createElement("div",{className:"vimeo-loading"},c.default.createElement("svg",{height:"32",viewBox:"0 0 32 32",width:"32",xmlns:"http://www.w3.org/2000/svg"},c.default.createElement("path",{d:"M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4",opacity:".25"}),c.default.createElement("path",{d:"M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"})))}}]),t}(c.default.Component);l.displayName="Spinner",t.default=l,e.exports=t.default},function(e,t,n){function r(e){var n,r=0;for(n in e)r=(r<<5)-r+e.charCodeAt(n),r|=0;return t.colors[Math.abs(r)%t.colors.length]}function o(e){function n(){if(n.enabled){var e=n,r=+new Date,o=r-(c||r);e.diff=o,e.prev=c,e.curr=r,c=r;for(var a=new Array(arguments.length),i=0;i<a.length;i++)a[i]=arguments[i];a[0]=t.coerce(a[0]),"string"!=typeof a[0]&&a.unshift("%O");var u=0;a[0]=a[0].replace(/%([a-zA-Z%])/g,function(n,r){if("%%"===n)return n;u++;var o=t.formatters[r];if("function"==typeof o){var i=a[u];n=o.call(e,i),a.splice(u,1),u--}return n}),t.formatArgs.call(e,a);var s=n.log||t.log||console.log.bind(console);s.apply(e,a)}}return n.namespace=e,n.enabled=t.enabled(e),n.useColors=t.useColors(),n.color=r(e),"function"==typeof t.init&&t.init(n),n}function a(e){t.save(e),t.names=[],t.skips=[];for(var n=("string"==typeof e?e:"").split(/[\s,]+/),r=n.length,o=0;o<r;o++)n[o]&&(e=n[o].replace(/\*/g,".*?"),"-"===e[0]?t.skips.push(new RegExp("^"+e.substr(1)+"$")):t.names.push(new RegExp("^"+e+"$")))}function i(){t.enable("")}function u(e){var n,r;for(n=0,r=t.skips.length;n<r;n++)if(t.skips[n].test(e))return!1;for(n=0,r=t.names.length;n<r;n++)if(t.names[n].test(e))return!0;return!1}function s(e){return e instanceof Error?e.stack||e.message:e}t=e.exports=o.debug=o.default=o,t.coerce=s,t.disable=i,t.enable=a,t.enabled=u,t.humanize=n(11),t.names=[],t.skips=[],t.formatters={};var c},function(e,t){"use strict";function n(e){return function(){return e}}var r=function(){};r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r,a,i,u,s){if(o(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,u,s],f=0;c=new Error(t.replace(/%s/g,function(){return l[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(e){};e.exports=r},function(e,t,n){function r(){}function o(e,t,n){function o(){s.parentNode&&s.parentNode.removeChild(s),window[f]=r,c&&clearTimeout(c)}function u(){window[f]&&o()}"function"==typeof t&&(n=t,t={}),t||(t={});var s,c,l=t.prefix||"__jp",f=t.name||l+i++,p=t.param||"callback",d=null!=t.timeout?t.timeout:6e4,m=encodeURIComponent,h=document.getElementsByTagName("script")[0]||document.head;return d&&(c=setTimeout(function(){o(),n&&n(new Error("Timeout"))},d)),window[f]=function(e){a("jsonp got",e),o(),n&&n(null,e)},e+=(~e.indexOf("?")?"&":"?")+p+"="+m(f),e=e.replace("?&","?"),a('jsonp req "%s"',e),s=document.createElement("script"),s.src=e,h.parentNode.insertBefore(s,h),u}var a=n(2)("jsonp");e.exports=o;var i=0},function(e,t){"use strict";var n=function(e){var t,n={};if(!(e instanceof Object)||Array.isArray(e))throw new Error("keyMirror(...): Argument must be an object.");for(t in e)e.hasOwnProperty(t)&&(n[t]=t);return n};e.exports=n},function(e,t){function n(e){if(e=String(e),!(e.length>100)){var t=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(t){var n=parseFloat(t[1]),r=(t[2]||"ms").toLowerCase();switch(r){case"years":case"year":case"yrs":case"yr":case"y":return n*l;case"days":case"day":case"d":return n*c;case"hours":case"hour":case"hrs":case"hr":case"h":return n*s;case"minutes":case"minute":case"mins":case"min":case"m":return n*u;case"seconds":case"second":case"secs":case"sec":case"s":return n*i;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return n;default:return}}}}function r(e){return e>=c?Math.round(e/c)+"d":e>=s?Math.round(e/s)+"h":e>=u?Math.round(e/u)+"m":e>=i?Math.round(e/i)+"s":e+"ms"}function o(e){return a(e,c,"day")||a(e,s,"hour")||a(e,u,"minute")||a(e,i,"second")||e+" ms"}function a(e,t,n){if(!(e<t))return e<1.5*t?Math.floor(e/t)+" "+n:Math.ceil(e/t)+" "+n+"s"}var i=1e3,u=60*i,s=60*u,c=24*s,l=365.25*c;e.exports=function(e,t){t=t||{};var a=typeof e;if("string"===a&&e.length>0)return n(e);if("number"===a&&isNaN(e)===!1)return t.long?o(e):r(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))}},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(l===setTimeout)return setTimeout(e,0);if((l===n||!l)&&setTimeout)return l=setTimeout,setTimeout(e,0);try{return l(e,0)}catch(t){try{return l.call(null,e,0)}catch(t){return l.call(this,e,0)}}}function a(e){if(f===clearTimeout)return clearTimeout(e);if((f===r||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function i(){h&&d&&(h=!1,d.length?m=d.concat(m):y=-1,m.length&&u())}function u(){if(!h){var e=o(i);h=!0;for(var t=m.length;t;){for(d=m,m=[];++y<t;)d&&d[y].run();y=-1,t=m.length}d=null,h=!1,a(e)}}function s(e,t){this.fun=e,this.array=t}function c(){}var l,f,p=e.exports={};!function(){try{l="function"==typeof setTimeout?setTimeout:n}catch(e){l=n}try{f="function"==typeof clearTimeout?clearTimeout:r}catch(e){f=r}}();var d,m=[],h=!1,y=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];m.push(new s(e,t)),1!==m.length||h||o(u)},s.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=c,p.addListener=c,p.once=c,p.off=c,p.removeListener=c,p.removeAllListeners=c,p.emit=c,p.prependListener=c,p.prependOnceListener=c,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t,n){"use strict";var r=n(7),o=n(8),a=n(14);e.exports=function(){function e(e,t,n,r,i,u){u!==a&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n}])});

431

lib/Vimeo.js

@@ -7,2 +7,8 @@ 'use strict';

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 _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');

@@ -34,2 +40,8 @@

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 debug = (0, _debug2.default)('vimeo:player');

@@ -69,240 +81,251 @@ var noop = function noop() {};

exports.default = _react2.default.createClass({
displayName: 'Vimeo',
var _class = function (_React$Component) {
_inherits(_class, _React$Component);
propTypes: {
autoplay: _react.PropTypes.bool,
className: _react.PropTypes.string,
loading: _react.PropTypes.element,
playButton: _react.PropTypes.node,
playerOptions: _react.PropTypes.object,
videoId: _react.PropTypes.string.isRequired,
function _class() {
var _ref;
// event callbacks
onCueChange: _react.PropTypes.func,
onEnded: _react.PropTypes.func,
onError: _react.PropTypes.func,
onLoaded: _react.PropTypes.func,
onPause: _react.PropTypes.func,
onPlay: _react.PropTypes.func,
onProgress: _react.PropTypes.func,
onReady: _react.PropTypes.func,
onSeeked: _react.PropTypes.func,
onTextTrackChanged: _react.PropTypes.func,
onTimeUpdate: _react.PropTypes.func,
onVolumeChange: _react.PropTypes.func
},
var _temp, _this, _ret;
getDefaultProps: function getDefaultProps() {
var defaults = Object.keys(playerEvents).concat(['ready']).reduce(function (defaults, event) {
defaults['on' + capitalize(event)] = noop;
return defaults;
}, {});
_classCallCheck(this, _class);
defaults.className = 'vimeo';
defaults.playerOptions = { autoplay: 1 };
defaults.autoplay = false;
return defaults;
},
getInitialState: function getInitialState() {
return {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
imageLoaded: false,
playerOrigin: '*',
showingVideo: this.props.autoplay,
showingVideo: _this.props.autoplay,
thumb: null
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (nextProps.videoId !== this.props.videoId) {
this.setState({
thumb: null,
imageLoaded: false,
showingVideo: false
});
}
},
componentDidMount: function componentDidMount() {
this.fetchVimeoData();
},
componentDidUpdate: function componentDidUpdate() {
this.fetchVimeoData();
},
componentWillUnmount: function componentWillUnmount() {
var _context;
}, _this.addMessageListener = function () {
var _context;
var removeEventListener = typeof window !== 'undefined' ? (_context = window).removeEventListener.bind(_context) : noop;
var addEventListener = typeof window !== 'undefined' ? (_context = window).addEventListener.bind(_context) : noop;
removeEventListener('message', this.onMessage);
},
addMessageListener: function addMessageListener() {
var _context2;
addEventListener('message', _this.onMessage);
}, _this.onError = function (err) {
if (_this.props.onError) {
_this.props.onError(err);
}
throw err;
}, _this.onMessage = function (_ref2) {
var origin = _ref2.origin,
data = _ref2.data;
var onReady = _this.props.onReady;
var playerOrigin = _this.state.playerOrigin;
var addEventListener = typeof window !== 'undefined' ? (_context2 = window).addEventListener.bind(_context2) : noop;
addEventListener('message', this.onMessage);
},
onError: function onError(err) {
if (this.props.onError) {
this.props.onError(err);
}
throw err;
},
onMessage: function onMessage(_ref) {
var origin = _ref.origin,
data = _ref.data;
var onReady = this.props.onReady;
var playerOrigin = this.state.playerOrigin;
if (playerOrigin === '*') {
_this.setState({
playerOrigin: origin
});
}
// Handle messages from the vimeo player only
if (!/^https?:\/\/player.vimeo.com/.test(origin)) {
return false;
}
if (playerOrigin === '*') {
this.setState({
playerOrigin: origin
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (err) {
debug('error parsing message', err);
data = { event: '' };
}
}
if (data.event === 'ready') {
debug('player ready');
_this.onReady(_this._player, playerOrigin === '*' ? origin : playerOrigin);
return onReady(data);
}
if (!data.event) {
// we get messages when the first event callbacks are added to the frame
return;
}
debug('firing event: ', data.event);
getFuncForEvent(data.event, _this.props)(data);
}, _this.onReady = function (player, playerOrigin) {
Object.keys(playerEvents).forEach(function (event) {
var err = post('addEventListener', event.toLowerCase(), player, playerOrigin);
if (err) {
_this.onError(err);
}
});
}
}, _this.playVideo = function (e) {
e.preventDefault();
_this.setState({ showingVideo: true });
}, _this.getIframeUrl = function () {
var videoId = _this.props.videoId;
// Handle messages from the vimeo player only
if (!/^https?:\/\/player.vimeo.com/.test(origin)) {
return false;
}
var query = _this.getIframeUrlQuery();
return '//player.vimeo.com/video/' + videoId + '?' + query;
}, _this.getIframeUrlQuery = function () {
var str = [];
Object.keys(_this.props.playerOptions).forEach(function (key) {
str.push(key + '=' + _this.props.playerOptions[key]);
});
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (err) {
debug('error parsing message', err);
data = { event: '' };
return str.join('&');
}, _this.fetchVimeoData = function () {
if (_this.state.imageLoaded) {
return;
}
}
var id = _this.props.videoId;
if (data.event === 'ready') {
var player = this.refs.player;
(0, _jsonp2.default)('//vimeo.com/api/v2/video/' + id + '.json', {
prefix: 'vimeo'
}, function (err, res) {
if (err) {
debug('jsonp err: ', err.message);
_this.onError(err);
}
debug('jsonp response', res);
_this.setState({
thumb: res[0].thumbnail_large,
imageLoaded: true
});
});
}, _this.renderImage = function () {
if (_this.state.showingVideo || !_this.state.imageLoaded) {
return;
}
debug('player ready');
this.onReady(player, playerOrigin === '*' ? origin : playerOrigin);
return onReady(data);
}
if (!data.event) {
// we get messages when the first event callbacks are added to the frame
return;
}
debug('firing event: ', data.event);
getFuncForEvent(data.event, this.props)(data);
},
onReady: function onReady(player, playerOrigin) {
var _this = this;
var style = {
backgroundImage: 'url(' + _this.state.thumb + ')',
display: !_this.state.showingVideo ? 'block' : 'none',
height: '100%',
width: '100%'
};
Object.keys(playerEvents).forEach(function (event) {
var err = post('addEventListener', event.toLowerCase(), player, playerOrigin);
if (err) {
_this.onError(err);
var playButton = _this.props.playButton ? (0, _react.cloneElement)(_this.props.playButton, { onClick: _this.playVideo }) : _react2.default.createElement(_PlayButton2.default, { onClick: _this.playVideo });
return _react2.default.createElement(
'div',
{
className: 'vimeo-image',
style: style },
playButton
);
}, _this.renderIframe = function () {
if (!_this.state.showingVideo) {
return;
}
});
},
playVideo: function playVideo(e) {
e.preventDefault();
this.setState({ showingVideo: true });
},
getIframeUrl: function getIframeUrl() {
var videoId = this.props.videoId;
var query = this.getIframeUrlQuery();
return '//player.vimeo.com/video/' + videoId + '?' + query;
},
getIframeUrlQuery: function getIframeUrlQuery() {
var _this2 = this;
_this.addMessageListener();
var str = [];
Object.keys(this.props.playerOptions).forEach(function (key) {
str.push(key + '=' + _this2.props.playerOptions[key]);
});
var embedVideoStyle = {
display: _this.state.showingVideo ? 'block' : 'none',
height: '100%',
width: '100%'
};
return str.join('&');
},
fetchVimeoData: function fetchVimeoData() {
var _this3 = this;
return _react2.default.createElement(
'div',
{
className: 'vimeo-embed',
style: embedVideoStyle },
_react2.default.createElement('iframe', {
frameBorder: '0',
ref: function ref(el) {
_this._player = el;
},
src: _this.getIframeUrl() })
);
}, _this.renderLoading = function (imageLoaded, loadingElement) {
if (imageLoaded) {
return;
}
if (loadingElement) {
return loadingElement;
}
return _react2.default.createElement(_Spinner2.default, null);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
if (this.state.imageLoaded) {
return;
_createClass(_class, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (nextProps.videoId !== this.props.videoId) {
this.setState({
thumb: null,
imageLoaded: false,
showingVideo: false
});
}
}
var id = this.props.videoId;
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.fetchVimeoData();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.fetchVimeoData();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var _context2;
(0, _jsonp2.default)('//vimeo.com/api/v2/video/' + id + '.json', {
prefix: 'vimeo'
}, function (err, res) {
if (err) {
debug('jsonp err: ', err.message);
_this3.onError(err);
}
debug('jsonp response', res);
_this3.setState({
thumb: res[0].thumbnail_large,
imageLoaded: true
});
});
},
renderImage: function renderImage() {
if (this.state.showingVideo || !this.state.imageLoaded) {
return;
var removeEventListener = typeof window !== 'undefined' ? (_context2 = window).removeEventListener.bind(_context2) : noop;
removeEventListener('message', this.onMessage);
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ className: this.props.className },
this.renderLoading(this.state.imageLoaded, this.props.loading),
this.renderImage(),
this.renderIframe()
);
}
}]);
var style = {
backgroundImage: 'url(' + this.state.thumb + ')',
display: !this.state.showingVideo ? 'block' : 'none',
height: '100%',
width: '100%'
};
return _class;
}(_react2.default.Component);
var playButton = this.props.playButton ? (0, _react.cloneElement)(this.props.playButton, { onClick: this.playVideo }) : _react2.default.createElement(_PlayButton2.default, { onClick: this.playVideo });
_class.displayName = 'Vimeo';
_class.propTypes = {
autoplay: _propTypes2.default.bool,
className: _propTypes2.default.string,
loading: _propTypes2.default.element,
playButton: _propTypes2.default.node,
playerOptions: _propTypes2.default.object,
videoId: _propTypes2.default.string.isRequired,
return _react2.default.createElement(
'div',
{
className: 'vimeo-image',
style: style },
playButton
);
},
renderIframe: function renderIframe() {
if (!this.state.showingVideo) {
return;
}
// event callbacks
onCueChange: _propTypes2.default.func,
onEnded: _propTypes2.default.func,
onError: _propTypes2.default.func,
onLoaded: _propTypes2.default.func,
onPause: _propTypes2.default.func,
onPlay: _propTypes2.default.func,
onProgress: _propTypes2.default.func,
onReady: _propTypes2.default.func,
onSeeked: _propTypes2.default.func,
onTextTrackChanged: _propTypes2.default.func,
onTimeUpdate: _propTypes2.default.func,
onVolumeChange: _propTypes2.default.func
};
this.addMessageListener();
_class.defaultProps = function () {
var defaults = Object.keys(playerEvents).concat(['ready']).reduce(function (defaults, event) {
defaults['on' + capitalize(event)] = noop;
return defaults;
}, {});
var embedVideoStyle = {
display: this.state.showingVideo ? 'block' : 'none',
height: '100%',
width: '100%'
};
defaults.className = 'vimeo';
defaults.playerOptions = { autoplay: 1 };
defaults.autoplay = false;
return defaults;
}();
return _react2.default.createElement(
'div',
{
className: 'vimeo-embed',
style: embedVideoStyle },
_react2.default.createElement('iframe', {
frameBorder: '0',
ref: 'player',
src: this.getIframeUrl() })
);
},
renderLoading: function renderLoading(imageLoaded, loadingElement) {
if (imageLoaded) {
return;
}
if (loadingElement) {
return loadingElement;
}
return _react2.default.createElement(_Spinner2.default, null);
},
render: function render() {
return _react2.default.createElement(
'div',
{ className: this.props.className },
this.renderLoading(this.state.imageLoaded, this.props.loading),
this.renderImage(),
this.renderIframe()
);
}
});
exports.default = _class;
module.exports = exports['default'];

7

package.json
{
"name": "react-vimeo",
"version": "1.0.0",
"version": "2.0.0",
"description": "React component to load video from Vimeo",

@@ -59,4 +59,5 @@ "author": {

"node-libs-browser": "^1.0.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"prop-types": "^15.6.0",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"stylus": "^0.54.5",

@@ -63,0 +64,0 @@ "webpack": "^1.10.1"

13

src/Play-Button.jsx
/* eslint-disable max-len */
import PropTypes from 'prop-types';
import React from 'react';
export default React.createClass({
displayName: 'PlayButton',
export default class extends React.Component {
static displayName = 'PlayButton';
propTypes: {
onClick: React.PropTypes.func
},
static propTypes = {
onClick: PropTypes.func
};

@@ -26,2 +27,2 @@ render() {

}
});
}

6

src/Spinner.jsx

@@ -8,4 +8,4 @@ /* eslint-disable max-len */

*/
export default React.createClass({
displayName: 'Spinner',
export default class extends React.Component {
static displayName = 'Spinner';

@@ -28,2 +28,2 @@ render() {

}
});
}

90

src/Vimeo.jsx

@@ -1,2 +0,3 @@

import React, { PropTypes, cloneElement } from 'react';
import PropTypes from 'prop-types';
import React, { cloneElement } from 'react';
import keyMirror from 'keymirror';

@@ -41,6 +42,6 @@ import jsonp from 'jsonp';

export default React.createClass({
displayName: 'Vimeo',
export default class extends React.Component {
static displayName = 'Vimeo';
propTypes: {
static propTypes = {
autoplay: PropTypes.bool,

@@ -66,5 +67,5 @@ className: PropTypes.string,

onVolumeChange: PropTypes.func
},
};
getDefaultProps() {
static defaultProps = (function() {
const defaults = Object.keys(playerEvents)

@@ -81,12 +82,10 @@ .concat(['ready'])

return defaults;
},
})();
getInitialState() {
return {
imageLoaded: false,
playerOrigin: '*',
showingVideo: this.props.autoplay,
thumb: null
};
},
state = {
imageLoaded: false,
playerOrigin: '*',
showingVideo: this.props.autoplay,
thumb: null
};

@@ -101,11 +100,11 @@ componentWillReceiveProps(nextProps) {

}
},
}
componentDidMount() {
this.fetchVimeoData();
},
}
componentDidUpdate() {
this.fetchVimeoData();
},
}

@@ -118,5 +117,5 @@ componentWillUnmount() {

removeEventListener('message', this.onMessage);
},
}
addMessageListener() {
addMessageListener = () => {
const addEventListener = typeof window !== 'undefined' ?

@@ -127,5 +126,5 @@ ::window.addEventListener :

addEventListener('message', this.onMessage);
},
};
onError(err) {
onError = (err) => {
if (this.props.onError) {

@@ -135,5 +134,5 @@ this.props.onError(err);

throw err;
},
};
onMessage({ origin, data }) {
onMessage = ({ origin, data }) => {
const { onReady } = this.props;

@@ -163,6 +162,5 @@ const { playerOrigin } = this.state;

if (data.event === 'ready') {
const { player } = this.refs;
debug('player ready');
this.onReady(
player,
this._player,
playerOrigin === '*' ? origin : playerOrigin

@@ -178,5 +176,5 @@ );

getFuncForEvent(data.event, this.props)(data);
},
};
onReady(player, playerOrigin) {
onReady = (player, playerOrigin) => {
Object.keys(playerEvents).forEach(event => {

@@ -193,16 +191,16 @@ var err = post(

});
},
};
playVideo(e) {
playVideo = (e) => {
e.preventDefault();
this.setState({ showingVideo: true });
},
};
getIframeUrl() {
getIframeUrl = () => {
const { videoId } = this.props;
const query = this.getIframeUrlQuery();
return `//player.vimeo.com/video/${videoId}?${query}`;
},
};
getIframeUrlQuery() {
getIframeUrlQuery = () => {
let str = [];

@@ -214,5 +212,5 @@ Object.keys(this.props.playerOptions).forEach(key => {

return str.join('&');
},
};
fetchVimeoData() {
fetchVimeoData = () => {
if (this.state.imageLoaded) {

@@ -240,5 +238,5 @@ return;

);
},
};
renderImage() {
renderImage = () => {
if (this.state.showingVideo || !this.state.imageLoaded) {

@@ -266,5 +264,5 @@ return;

);
},
};
renderIframe() {
renderIframe = () => {
if (!this.state.showingVideo) {

@@ -288,9 +286,11 @@ return;

frameBorder='0'
ref='player'
ref={el => {
this._player = el;
}}
src={ this.getIframeUrl() } />
</div>
);
},
};
renderLoading(imageLoaded, loadingElement) {
renderLoading = (imageLoaded, loadingElement) => {
if (imageLoaded) {

@@ -305,3 +305,3 @@ return;

);
},
};

@@ -317,2 +317,2 @@ render() {

}
});
}
.npmignore
.tern-project
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc