@u-wave/react-youtube
Advanced tools
Comparing version 0.4.1 to 0.4.2
@@ -5,186 +5,36 @@ import React from 'react'; | ||
var eventNames = { | ||
ready: 'onReady', | ||
stateChange: 'onStateChange', | ||
playbackQualityChange: 'onPlaybackQualityChange', | ||
playbackRateChange: 'onPlaybackRateChange', | ||
error: 'onError', | ||
apiChange: 'onApiChange' | ||
}; | ||
function _inheritsLoose(subClass, superClass) { | ||
subClass.prototype = Object.create(superClass.prototype); | ||
subClass.prototype.constructor = subClass; | ||
subClass.__proto__ = superClass; | ||
} | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
return typeof obj; | ||
} : function (obj) { | ||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
var _sPO = Object.setPrototypeOf || function _sPO(o, p) { | ||
o.__proto__ = p; | ||
return o; | ||
}; | ||
var asyncGenerator = function () { | ||
function AwaitValue(value) { | ||
this.value = value; | ||
} | ||
function AsyncGenerator(gen) { | ||
var front, back; | ||
function send(key, arg) { | ||
return new Promise(function (resolve, reject) { | ||
var request = { | ||
key: key, | ||
arg: arg, | ||
resolve: resolve, | ||
reject: reject, | ||
next: null | ||
}; | ||
if (back) { | ||
back = back.next = request; | ||
} else { | ||
front = back = request; | ||
resume(key, arg); | ||
} | ||
}); | ||
} | ||
function resume(key, arg) { | ||
try { | ||
var result = gen[key](arg); | ||
var value = result.value; | ||
if (value instanceof AwaitValue) { | ||
Promise.resolve(value.value).then(function (arg) { | ||
resume("next", arg); | ||
}, function (arg) { | ||
resume("throw", arg); | ||
}); | ||
} else { | ||
settle(result.done ? "return" : "normal", result.value); | ||
} | ||
} catch (err) { | ||
settle("throw", err); | ||
} | ||
} | ||
function settle(type, value) { | ||
switch (type) { | ||
case "return": | ||
front.resolve({ | ||
value: value, | ||
done: true | ||
}); | ||
break; | ||
case "throw": | ||
front.reject(value); | ||
break; | ||
default: | ||
front.resolve({ | ||
value: value, | ||
done: false | ||
}); | ||
break; | ||
} | ||
front = front.next; | ||
if (front) { | ||
resume(front.key, front.arg); | ||
} else { | ||
back = null; | ||
} | ||
} | ||
this._invoke = send; | ||
if (typeof gen.return !== "function") { | ||
this.return = undefined; | ||
} | ||
} | ||
if (typeof Symbol === "function" && Symbol.asyncIterator) { | ||
AsyncGenerator.prototype[Symbol.asyncIterator] = function () { | ||
return this; | ||
}; | ||
} | ||
AsyncGenerator.prototype.next = function (arg) { | ||
return this._invoke("next", arg); | ||
}; | ||
AsyncGenerator.prototype.throw = function (arg) { | ||
return this._invoke("throw", arg); | ||
}; | ||
AsyncGenerator.prototype.return = function (arg) { | ||
return this._invoke("return", arg); | ||
}; | ||
return { | ||
wrap: function (fn) { | ||
return function () { | ||
return new AsyncGenerator(fn.apply(this, arguments)); | ||
}; | ||
}, | ||
await: function (value) { | ||
return new AwaitValue(value); | ||
} | ||
}; | ||
}(); | ||
var classCallCheck = function (instance, Constructor) { | ||
if (!(instance instanceof Constructor)) { | ||
throw new TypeError("Cannot call a class as a function"); | ||
} | ||
var _construct = typeof Reflect === "object" && Reflect.construct || function _construct(Parent, args, Class) { | ||
var Constructor, | ||
a = [null]; | ||
a.push.apply(a, args); | ||
Constructor = Parent.bind.apply(Parent, a); | ||
return _sPO(new Constructor(), Class.prototype); | ||
}; | ||
var inherits = function (subClass, superClass) { | ||
if (typeof superClass !== "function" && superClass !== null) { | ||
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); | ||
function _assertThisInitialized(self) { | ||
if (self === void 0) { | ||
throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
} | ||
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; | ||
}; | ||
return self; | ||
} | ||
var possibleConstructorReturn = function (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; | ||
var eventNames = { | ||
ready: 'onReady', | ||
stateChange: 'onStateChange', | ||
playbackQualityChange: 'onPlaybackQualityChange', | ||
playbackRateChange: 'onPlaybackRateChange', | ||
error: 'onError', | ||
apiChange: 'onApiChange' | ||
}; | ||
@@ -195,3 +45,3 @@ | ||
return new Promise(function (resolve, reject) { | ||
if (_typeof(window.YT) === 'object' && typeof window.YT.ready === 'function') { | ||
if (typeof window.YT === 'object' && typeof window.YT.ready === 'function') { | ||
// A YouTube SDK is already loaded, so reuse that | ||
@@ -207,6 +57,7 @@ window.YT.ready(function () { | ||
reject(err); | ||
} else { | ||
window.YT.ready(function () { | ||
resolve(window.YT); | ||
}); | ||
} | ||
window.YT.ready(function () { | ||
resolve(window.YT); | ||
}); | ||
}); | ||
@@ -221,67 +72,28 @@ }); | ||
} | ||
return sdk; | ||
} | ||
var YouTube = function (_React$Component) { | ||
inherits(YouTube, _React$Component); | ||
var YouTube = | ||
/*#__PURE__*/ | ||
function (_React$Component) { | ||
_inheritsLoose(YouTube, _React$Component); | ||
function YouTube() { | ||
var _temp, _this, _ret; | ||
function YouTube(props) { | ||
var _this; | ||
classCallCheck(this, YouTube); | ||
_this = _React$Component.call(this, props) || this; | ||
_this.onPlayerReady = _this.onPlayerReady.bind(_assertThisInitialized(_this)); | ||
_this.onPlayerStateChange = _this.onPlayerStateChange.bind(_assertThisInitialized(_this)); | ||
_this.refContainer = _this.refContainer.bind(_assertThisInitialized(_this)); | ||
return _this; | ||
} | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
var _proto = YouTube.prototype; | ||
return _ret = (_temp = (_this = possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.onPlayerReady = function (event) { | ||
if (typeof _this.props.volume !== 'undefined') { | ||
event.target.setVolume(_this.props.volume * 100); | ||
} | ||
if (typeof _this.props.muted !== 'undefined') { | ||
if (_this.props.muted) { | ||
event.target.mute(); | ||
} else { | ||
event.target.unMute(); | ||
} | ||
} | ||
if (typeof _this.props.suggestedQuality !== 'undefined') { | ||
event.target.setPlaybackQuality(_this.props.suggestedQuality); | ||
} | ||
if (typeof _this.props.playbackRate !== 'undefined') { | ||
event.target.setPlaybackRate(_this.props.playbackRate); | ||
} | ||
_this.resolvePlayer(event.target); | ||
}, _this.onPlayerStateChange = function (event) { | ||
var State = YT.PlayerState; // eslint-disable-line no-undef | ||
switch (event.data) { | ||
case State.CUED: | ||
_this.props.onCued(event); | ||
break; | ||
case State.BUFFERING: | ||
_this.props.onBuffering(event); | ||
break; | ||
case State.PAUSED: | ||
_this.props.onPause(event); | ||
break; | ||
case State.PLAYING: | ||
_this.props.onPlaying(event); | ||
break; | ||
case State.ENDED: | ||
_this.props.onEnd(event); | ||
break; | ||
default: | ||
// Nothing | ||
} | ||
}, _this.refContainer = function (container) { | ||
_this.container = container; | ||
}, _temp), possibleConstructorReturn(_this, _ret); | ||
} | ||
YouTube.prototype.componentDidMount = function componentDidMount() { | ||
_proto.componentDidMount = function componentDidMount() { | ||
this.createPlayer(); | ||
}; | ||
YouTube.prototype.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
_proto.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
var _this2 = this; | ||
@@ -292,7 +104,6 @@ | ||
}); | ||
this.updateProps(changes); | ||
}; | ||
YouTube.prototype.componentWillUnmount = function componentWillUnmount() { | ||
_proto.componentWillUnmount = function componentWillUnmount() { | ||
if (this.playerInstance) { | ||
@@ -303,6 +114,60 @@ this.playerInstance.destroy(); | ||
_proto.onPlayerReady = function onPlayerReady(event) { | ||
if (typeof this.props.volume !== 'undefined') { | ||
event.target.setVolume(this.props.volume * 100); | ||
} | ||
if (typeof this.props.muted !== 'undefined') { | ||
if (this.props.muted) { | ||
event.target.mute(); | ||
} else { | ||
event.target.unMute(); | ||
} | ||
} | ||
if (typeof this.props.suggestedQuality !== 'undefined') { | ||
event.target.setPlaybackQuality(this.props.suggestedQuality); | ||
} | ||
if (typeof this.props.playbackRate !== 'undefined') { | ||
event.target.setPlaybackRate(this.props.playbackRate); | ||
} | ||
this.resolvePlayer(event.target); | ||
}; | ||
_proto.onPlayerStateChange = function onPlayerStateChange(event) { | ||
var State = YT.PlayerState; // eslint-disable-line no-undef | ||
switch (event.data) { | ||
case State.CUED: | ||
this.props.onCued(event); | ||
break; | ||
case State.BUFFERING: | ||
this.props.onBuffering(event); | ||
break; | ||
case State.PAUSED: | ||
this.props.onPause(event); | ||
break; | ||
case State.PLAYING: | ||
this.props.onPlaying(event); | ||
break; | ||
case State.ENDED: | ||
this.props.onEnd(event); | ||
break; | ||
default: // Nothing | ||
} | ||
}; | ||
/** | ||
* @private | ||
*/ | ||
YouTube.prototype.getPlayerParameters = function getPlayerParameters() { | ||
_proto.getPlayerParameters = function getPlayerParameters() { | ||
return { | ||
@@ -324,3 +189,2 @@ autoplay: this.props.autoplay, | ||
}; | ||
/** | ||
@@ -331,3 +195,3 @@ * @private | ||
YouTube.prototype.getInitialOptions = function getInitialOptions() { | ||
_proto.getInitialOptions = function getInitialOptions() { | ||
return { | ||
@@ -344,3 +208,2 @@ videoId: this.props.video, | ||
}; | ||
/** | ||
@@ -351,3 +214,3 @@ * @private | ||
YouTube.prototype.updateProps = function updateProps(propNames) { | ||
_proto.updateProps = function updateProps(propNames) { | ||
var _this3 = this; | ||
@@ -358,2 +221,3 @@ | ||
var value = _this3.props[name]; | ||
switch (name) { | ||
@@ -366,9 +230,13 @@ case 'muted': | ||
} | ||
break; | ||
case 'suggestedQuality': | ||
player.setPlaybackQuality(value); | ||
break; | ||
case 'volume': | ||
player.setVolume(value * 100); | ||
break; | ||
case 'paused': | ||
@@ -380,3 +248,5 @@ if (value && player.getPlayerState() !== 2) { | ||
} | ||
break; | ||
case 'id': | ||
@@ -387,3 +257,5 @@ case 'className': | ||
player.getIframe()[name] = value; // eslint-disable-line no-param-reassign | ||
break; | ||
case 'video': | ||
@@ -399,5 +271,7 @@ if (!value) { | ||
} | ||
break; | ||
default: | ||
// Nothing | ||
default: // Nothing | ||
} | ||
@@ -407,3 +281,2 @@ }); | ||
}; | ||
/** | ||
@@ -414,3 +287,3 @@ * @private | ||
YouTube.prototype.createPlayer = function createPlayer() { | ||
_proto.createPlayer = function createPlayer() { | ||
var _this4 = this; | ||
@@ -421,8 +294,6 @@ | ||
_this4.resolvePlayer = resolve; | ||
var player = new YT.Player(_this4.container, _this4.getInitialOptions()); // Store the instance directly so we can destroy it sync in | ||
// `componentWilLUnmount`. | ||
var player = new YT.Player(_this4.container, _this4.getInitialOptions()); | ||
// Store the instance directly so we can destroy it sync in | ||
// `componentWilLUnmount`. | ||
_this4.playerInstance = player; | ||
Object.keys(eventNames).forEach(function (ytName) { | ||
@@ -443,3 +314,2 @@ var reactName = eventNames[ytName]; | ||
}; | ||
/** | ||
@@ -450,4 +320,8 @@ * @private | ||
YouTube.prototype.render = function render() { | ||
return React.createElement('div', { | ||
_proto.refContainer = function refContainer(container) { | ||
this.container = container; | ||
}; | ||
_proto.render = function render() { | ||
return React.createElement("div", { | ||
id: this.props.id, | ||
@@ -462,2 +336,198 @@ className: this.props.className, | ||
if (process.env.NODE_ENV !== 'production') { | ||
YouTube.propTypes = { | ||
/** | ||
* An 11-character string representing a YouTube video ID.. | ||
*/ | ||
video: PropTypes.string, | ||
/** | ||
* DOM ID for the player element. | ||
*/ | ||
id: PropTypes.string, | ||
/** | ||
* CSS className for the player element. | ||
*/ | ||
className: PropTypes.string, | ||
/** | ||
* Width of the player element. | ||
*/ | ||
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
/** | ||
* Height of the player element. | ||
*/ | ||
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
/** | ||
* Pause the video. | ||
*/ | ||
paused: PropTypes.bool, | ||
// eslint-disable-line react/no-unused-prop-types | ||
// Player parameters | ||
/** | ||
* Whether the video should start playing automatically. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#autoplay | ||
*/ | ||
autoplay: PropTypes.bool, | ||
/** | ||
* Whether to show captions below the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#cc_load_policy | ||
*/ | ||
showCaptions: PropTypes.bool, | ||
/** | ||
* Whether to show video controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#controls | ||
*/ | ||
controls: PropTypes.bool, | ||
/** | ||
* Ignore keyboard controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#disablekb | ||
*/ | ||
disableKeyboard: PropTypes.bool, | ||
/** | ||
* Whether to display the fullscreen button. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#fs | ||
*/ | ||
allowFullscreen: PropTypes.bool, | ||
/** | ||
* The player's interface language. The parameter value is an ISO 639-1 | ||
* two-letter language code or a fully specified locale. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#hl | ||
*/ | ||
lang: PropTypes.string, | ||
/** | ||
* Whether to show annotations on top of the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#iv_load_policy | ||
*/ | ||
annotations: PropTypes.bool, | ||
/** | ||
* Time in seconds at which to start playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#start | ||
*/ | ||
startSeconds: PropTypes.number, | ||
/** | ||
* Time in seconds at which to stop playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#end | ||
*/ | ||
endSeconds: PropTypes.number, | ||
/** | ||
* Remove most YouTube logos from the player. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#modestbranding | ||
*/ | ||
modestBranding: PropTypes.bool, | ||
/** | ||
* Whether to play the video inline on iOS, instead of fullscreen. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#playsinline | ||
*/ | ||
playsInline: PropTypes.bool, | ||
/** | ||
* Whether to show related videos after the video is over. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#rel | ||
*/ | ||
showRelatedVideos: PropTypes.bool, | ||
/** | ||
* Whether to show video information (uploader, title, etc) before the video | ||
* starts. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#showinfo | ||
*/ | ||
showInfo: PropTypes.bool, | ||
/** | ||
* The playback volume, **as a number between 0 and 1**. | ||
*/ | ||
volume: PropTypes.number, | ||
/** | ||
* Whether the video's sound should be muted. | ||
*/ | ||
muted: PropTypes.bool, | ||
/** | ||
* The suggested playback quality. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#Playback_quality | ||
*/ | ||
suggestedQuality: PropTypes.string, | ||
/** | ||
* Playback speed. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate | ||
*/ | ||
playbackRate: PropTypes.number, | ||
// Events | ||
/* eslint-disable react/no-unused-prop-types */ | ||
/** | ||
* Sent when the YouTube player API has loaded. | ||
*/ | ||
onReady: PropTypes.func, | ||
/** | ||
* Sent when the player triggers an error. | ||
*/ | ||
onError: PropTypes.func, | ||
/** | ||
* Sent when the video is cued and ready to play. | ||
*/ | ||
onCued: PropTypes.func, | ||
/** | ||
* Sent when the video is buffering. | ||
*/ | ||
onBuffering: PropTypes.func, | ||
/** | ||
* Sent when playback has been started or resumed. | ||
*/ | ||
onPlaying: PropTypes.func, | ||
/** | ||
* Sent when playback has been paused. | ||
*/ | ||
onPause: PropTypes.func, | ||
/** | ||
* Sent when playback has stopped. | ||
*/ | ||
onEnd: PropTypes.func, | ||
onStateChange: PropTypes.func, | ||
onPlaybackRateChange: PropTypes.func, | ||
onPlaybackQualityChange: PropTypes.func | ||
/* eslint-enable react/no-unused-prop-types */ | ||
}; | ||
} | ||
YouTube.defaultProps = { | ||
@@ -480,173 +550,3 @@ autoplay: false, | ||
}; | ||
YouTube.propTypes = process.env.NODE_ENV !== "production" ? { | ||
/** | ||
* An 11-character string representing a YouTube video ID.. | ||
*/ | ||
video: PropTypes.string, | ||
/** | ||
* DOM ID for the player element. | ||
*/ | ||
id: PropTypes.string, | ||
/** | ||
* CSS className for the player element. | ||
*/ | ||
className: PropTypes.string, | ||
/** | ||
* Width of the player element. | ||
*/ | ||
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
/** | ||
* Height of the player element. | ||
*/ | ||
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
/** | ||
* Pause the video. | ||
*/ | ||
paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
// Player parameters | ||
/** | ||
* Whether the video should start playing automatically. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#autoplay | ||
*/ | ||
autoplay: PropTypes.bool, | ||
/** | ||
* Whether to show captions below the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#cc_load_policy | ||
*/ | ||
showCaptions: PropTypes.bool, | ||
/** | ||
* Whether to show video controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#controls | ||
*/ | ||
controls: PropTypes.bool, | ||
/** | ||
* Ignore keyboard controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#disablekb | ||
*/ | ||
disableKeyboard: PropTypes.bool, | ||
/** | ||
* Whether to display the fullscreen button. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#fs | ||
*/ | ||
allowFullscreen: PropTypes.bool, | ||
/** | ||
* The player's interface language. The parameter value is an ISO 639-1 | ||
* two-letter language code or a fully specified locale. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#hl | ||
*/ | ||
lang: PropTypes.string, | ||
/** | ||
* Whether to show annotations on top of the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#iv_load_policy | ||
*/ | ||
annotations: PropTypes.bool, | ||
/** | ||
* Time in seconds at which to start playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#start | ||
*/ | ||
startSeconds: PropTypes.number, | ||
/** | ||
* Time in seconds at which to stop playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#end | ||
*/ | ||
endSeconds: PropTypes.number, | ||
/** | ||
* Remove most YouTube logos from the player. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#modestbranding | ||
*/ | ||
modestBranding: PropTypes.bool, | ||
/** | ||
* Whether to play the video inline on iOS, instead of fullscreen. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#playsinline | ||
*/ | ||
playsInline: PropTypes.bool, | ||
/** | ||
* Whether to show related videos after the video is over. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#rel | ||
*/ | ||
showRelatedVideos: PropTypes.bool, | ||
/** | ||
* Whether to show video information (uploader, title, etc) before the video | ||
* starts. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#showinfo | ||
*/ | ||
showInfo: PropTypes.bool, | ||
/** | ||
* The playback volume, **as a number between 0 and 1**. | ||
*/ | ||
volume: PropTypes.number, | ||
/** | ||
* Whether the video's sound should be muted. | ||
*/ | ||
muted: PropTypes.bool, | ||
/** | ||
* The suggested playback quality. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#Playback_quality | ||
*/ | ||
suggestedQuality: PropTypes.string, | ||
/** | ||
* Playback speed. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate | ||
*/ | ||
playbackRate: PropTypes.number, | ||
// Events | ||
/* eslint-disable react/no-unused-prop-types */ | ||
/** | ||
* Sent when the YouTube player API has loaded. | ||
*/ | ||
onReady: PropTypes.func, | ||
/** | ||
* Sent when the player triggers an error. | ||
*/ | ||
onError: PropTypes.func, | ||
/** | ||
* Sent when the video is cued and ready to play. | ||
*/ | ||
onCued: PropTypes.func, | ||
/** | ||
* Sent when the video is buffering. | ||
*/ | ||
onBuffering: PropTypes.func, | ||
/** | ||
* Sent when playback has been started or resumed. | ||
*/ | ||
onPlaying: PropTypes.func, | ||
/** | ||
* Sent when playback has been paused. | ||
*/ | ||
onPause: PropTypes.func, | ||
/** | ||
* Sent when playback has stopped. | ||
*/ | ||
onEnd: PropTypes.func, | ||
onStateChange: PropTypes.func, | ||
onPlaybackRateChange: PropTypes.func, | ||
onPlaybackQualityChange: PropTypes.func | ||
/* eslint-enable react/no-unused-prop-types */ | ||
} : {}; | ||
export default YouTube; |
@@ -11,186 +11,36 @@ 'use strict'; | ||
var eventNames = { | ||
ready: 'onReady', | ||
stateChange: 'onStateChange', | ||
playbackQualityChange: 'onPlaybackQualityChange', | ||
playbackRateChange: 'onPlaybackRateChange', | ||
error: 'onError', | ||
apiChange: 'onApiChange' | ||
}; | ||
function _inheritsLoose(subClass, superClass) { | ||
subClass.prototype = Object.create(superClass.prototype); | ||
subClass.prototype.constructor = subClass; | ||
subClass.__proto__ = superClass; | ||
} | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
return typeof obj; | ||
} : function (obj) { | ||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
var _sPO = Object.setPrototypeOf || function _sPO(o, p) { | ||
o.__proto__ = p; | ||
return o; | ||
}; | ||
var asyncGenerator = function () { | ||
function AwaitValue(value) { | ||
this.value = value; | ||
} | ||
function AsyncGenerator(gen) { | ||
var front, back; | ||
function send(key, arg) { | ||
return new Promise(function (resolve, reject) { | ||
var request = { | ||
key: key, | ||
arg: arg, | ||
resolve: resolve, | ||
reject: reject, | ||
next: null | ||
}; | ||
if (back) { | ||
back = back.next = request; | ||
} else { | ||
front = back = request; | ||
resume(key, arg); | ||
} | ||
}); | ||
} | ||
function resume(key, arg) { | ||
try { | ||
var result = gen[key](arg); | ||
var value = result.value; | ||
if (value instanceof AwaitValue) { | ||
Promise.resolve(value.value).then(function (arg) { | ||
resume("next", arg); | ||
}, function (arg) { | ||
resume("throw", arg); | ||
}); | ||
} else { | ||
settle(result.done ? "return" : "normal", result.value); | ||
} | ||
} catch (err) { | ||
settle("throw", err); | ||
} | ||
} | ||
function settle(type, value) { | ||
switch (type) { | ||
case "return": | ||
front.resolve({ | ||
value: value, | ||
done: true | ||
}); | ||
break; | ||
case "throw": | ||
front.reject(value); | ||
break; | ||
default: | ||
front.resolve({ | ||
value: value, | ||
done: false | ||
}); | ||
break; | ||
} | ||
front = front.next; | ||
if (front) { | ||
resume(front.key, front.arg); | ||
} else { | ||
back = null; | ||
} | ||
} | ||
this._invoke = send; | ||
if (typeof gen.return !== "function") { | ||
this.return = undefined; | ||
} | ||
} | ||
if (typeof Symbol === "function" && Symbol.asyncIterator) { | ||
AsyncGenerator.prototype[Symbol.asyncIterator] = function () { | ||
return this; | ||
}; | ||
} | ||
AsyncGenerator.prototype.next = function (arg) { | ||
return this._invoke("next", arg); | ||
}; | ||
AsyncGenerator.prototype.throw = function (arg) { | ||
return this._invoke("throw", arg); | ||
}; | ||
AsyncGenerator.prototype.return = function (arg) { | ||
return this._invoke("return", arg); | ||
}; | ||
return { | ||
wrap: function (fn) { | ||
return function () { | ||
return new AsyncGenerator(fn.apply(this, arguments)); | ||
}; | ||
}, | ||
await: function (value) { | ||
return new AwaitValue(value); | ||
} | ||
}; | ||
}(); | ||
var classCallCheck = function (instance, Constructor) { | ||
if (!(instance instanceof Constructor)) { | ||
throw new TypeError("Cannot call a class as a function"); | ||
} | ||
var _construct = typeof Reflect === "object" && Reflect.construct || function _construct(Parent, args, Class) { | ||
var Constructor, | ||
a = [null]; | ||
a.push.apply(a, args); | ||
Constructor = Parent.bind.apply(Parent, a); | ||
return _sPO(new Constructor(), Class.prototype); | ||
}; | ||
var inherits = function (subClass, superClass) { | ||
if (typeof superClass !== "function" && superClass !== null) { | ||
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); | ||
function _assertThisInitialized(self) { | ||
if (self === void 0) { | ||
throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
} | ||
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; | ||
}; | ||
return self; | ||
} | ||
var possibleConstructorReturn = function (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; | ||
var eventNames = { | ||
ready: 'onReady', | ||
stateChange: 'onStateChange', | ||
playbackQualityChange: 'onPlaybackQualityChange', | ||
playbackRateChange: 'onPlaybackRateChange', | ||
error: 'onError', | ||
apiChange: 'onApiChange' | ||
}; | ||
@@ -201,3 +51,3 @@ | ||
return new Promise(function (resolve, reject) { | ||
if (_typeof(window.YT) === 'object' && typeof window.YT.ready === 'function') { | ||
if (typeof window.YT === 'object' && typeof window.YT.ready === 'function') { | ||
// A YouTube SDK is already loaded, so reuse that | ||
@@ -213,6 +63,7 @@ window.YT.ready(function () { | ||
reject(err); | ||
} else { | ||
window.YT.ready(function () { | ||
resolve(window.YT); | ||
}); | ||
} | ||
window.YT.ready(function () { | ||
resolve(window.YT); | ||
}); | ||
}); | ||
@@ -227,67 +78,28 @@ }); | ||
} | ||
return sdk; | ||
} | ||
var YouTube = function (_React$Component) { | ||
inherits(YouTube, _React$Component); | ||
var YouTube = | ||
/*#__PURE__*/ | ||
function (_React$Component) { | ||
_inheritsLoose(YouTube, _React$Component); | ||
function YouTube() { | ||
var _temp, _this, _ret; | ||
function YouTube(props) { | ||
var _this; | ||
classCallCheck(this, YouTube); | ||
_this = _React$Component.call(this, props) || this; | ||
_this.onPlayerReady = _this.onPlayerReady.bind(_assertThisInitialized(_this)); | ||
_this.onPlayerStateChange = _this.onPlayerStateChange.bind(_assertThisInitialized(_this)); | ||
_this.refContainer = _this.refContainer.bind(_assertThisInitialized(_this)); | ||
return _this; | ||
} | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
var _proto = YouTube.prototype; | ||
return _ret = (_temp = (_this = possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.onPlayerReady = function (event) { | ||
if (typeof _this.props.volume !== 'undefined') { | ||
event.target.setVolume(_this.props.volume * 100); | ||
} | ||
if (typeof _this.props.muted !== 'undefined') { | ||
if (_this.props.muted) { | ||
event.target.mute(); | ||
} else { | ||
event.target.unMute(); | ||
} | ||
} | ||
if (typeof _this.props.suggestedQuality !== 'undefined') { | ||
event.target.setPlaybackQuality(_this.props.suggestedQuality); | ||
} | ||
if (typeof _this.props.playbackRate !== 'undefined') { | ||
event.target.setPlaybackRate(_this.props.playbackRate); | ||
} | ||
_this.resolvePlayer(event.target); | ||
}, _this.onPlayerStateChange = function (event) { | ||
var State = YT.PlayerState; // eslint-disable-line no-undef | ||
switch (event.data) { | ||
case State.CUED: | ||
_this.props.onCued(event); | ||
break; | ||
case State.BUFFERING: | ||
_this.props.onBuffering(event); | ||
break; | ||
case State.PAUSED: | ||
_this.props.onPause(event); | ||
break; | ||
case State.PLAYING: | ||
_this.props.onPlaying(event); | ||
break; | ||
case State.ENDED: | ||
_this.props.onEnd(event); | ||
break; | ||
default: | ||
// Nothing | ||
} | ||
}, _this.refContainer = function (container) { | ||
_this.container = container; | ||
}, _temp), possibleConstructorReturn(_this, _ret); | ||
} | ||
YouTube.prototype.componentDidMount = function componentDidMount() { | ||
_proto.componentDidMount = function componentDidMount() { | ||
this.createPlayer(); | ||
}; | ||
YouTube.prototype.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
_proto.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
var _this2 = this; | ||
@@ -298,7 +110,6 @@ | ||
}); | ||
this.updateProps(changes); | ||
}; | ||
YouTube.prototype.componentWillUnmount = function componentWillUnmount() { | ||
_proto.componentWillUnmount = function componentWillUnmount() { | ||
if (this.playerInstance) { | ||
@@ -309,6 +120,60 @@ this.playerInstance.destroy(); | ||
_proto.onPlayerReady = function onPlayerReady(event) { | ||
if (typeof this.props.volume !== 'undefined') { | ||
event.target.setVolume(this.props.volume * 100); | ||
} | ||
if (typeof this.props.muted !== 'undefined') { | ||
if (this.props.muted) { | ||
event.target.mute(); | ||
} else { | ||
event.target.unMute(); | ||
} | ||
} | ||
if (typeof this.props.suggestedQuality !== 'undefined') { | ||
event.target.setPlaybackQuality(this.props.suggestedQuality); | ||
} | ||
if (typeof this.props.playbackRate !== 'undefined') { | ||
event.target.setPlaybackRate(this.props.playbackRate); | ||
} | ||
this.resolvePlayer(event.target); | ||
}; | ||
_proto.onPlayerStateChange = function onPlayerStateChange(event) { | ||
var State = YT.PlayerState; // eslint-disable-line no-undef | ||
switch (event.data) { | ||
case State.CUED: | ||
this.props.onCued(event); | ||
break; | ||
case State.BUFFERING: | ||
this.props.onBuffering(event); | ||
break; | ||
case State.PAUSED: | ||
this.props.onPause(event); | ||
break; | ||
case State.PLAYING: | ||
this.props.onPlaying(event); | ||
break; | ||
case State.ENDED: | ||
this.props.onEnd(event); | ||
break; | ||
default: // Nothing | ||
} | ||
}; | ||
/** | ||
* @private | ||
*/ | ||
YouTube.prototype.getPlayerParameters = function getPlayerParameters() { | ||
_proto.getPlayerParameters = function getPlayerParameters() { | ||
return { | ||
@@ -330,3 +195,2 @@ autoplay: this.props.autoplay, | ||
}; | ||
/** | ||
@@ -337,3 +201,3 @@ * @private | ||
YouTube.prototype.getInitialOptions = function getInitialOptions() { | ||
_proto.getInitialOptions = function getInitialOptions() { | ||
return { | ||
@@ -350,3 +214,2 @@ videoId: this.props.video, | ||
}; | ||
/** | ||
@@ -357,3 +220,3 @@ * @private | ||
YouTube.prototype.updateProps = function updateProps(propNames) { | ||
_proto.updateProps = function updateProps(propNames) { | ||
var _this3 = this; | ||
@@ -364,2 +227,3 @@ | ||
var value = _this3.props[name]; | ||
switch (name) { | ||
@@ -372,9 +236,13 @@ case 'muted': | ||
} | ||
break; | ||
case 'suggestedQuality': | ||
player.setPlaybackQuality(value); | ||
break; | ||
case 'volume': | ||
player.setVolume(value * 100); | ||
break; | ||
case 'paused': | ||
@@ -386,3 +254,5 @@ if (value && player.getPlayerState() !== 2) { | ||
} | ||
break; | ||
case 'id': | ||
@@ -393,3 +263,5 @@ case 'className': | ||
player.getIframe()[name] = value; // eslint-disable-line no-param-reassign | ||
break; | ||
case 'video': | ||
@@ -405,5 +277,7 @@ if (!value) { | ||
} | ||
break; | ||
default: | ||
// Nothing | ||
default: // Nothing | ||
} | ||
@@ -413,3 +287,2 @@ }); | ||
}; | ||
/** | ||
@@ -420,3 +293,3 @@ * @private | ||
YouTube.prototype.createPlayer = function createPlayer() { | ||
_proto.createPlayer = function createPlayer() { | ||
var _this4 = this; | ||
@@ -427,8 +300,6 @@ | ||
_this4.resolvePlayer = resolve; | ||
var player = new YT.Player(_this4.container, _this4.getInitialOptions()); // Store the instance directly so we can destroy it sync in | ||
// `componentWilLUnmount`. | ||
var player = new YT.Player(_this4.container, _this4.getInitialOptions()); | ||
// Store the instance directly so we can destroy it sync in | ||
// `componentWilLUnmount`. | ||
_this4.playerInstance = player; | ||
Object.keys(eventNames).forEach(function (ytName) { | ||
@@ -449,3 +320,2 @@ var reactName = eventNames[ytName]; | ||
}; | ||
/** | ||
@@ -456,4 +326,8 @@ * @private | ||
YouTube.prototype.render = function render() { | ||
return React.createElement('div', { | ||
_proto.refContainer = function refContainer(container) { | ||
this.container = container; | ||
}; | ||
_proto.render = function render() { | ||
return React.createElement("div", { | ||
id: this.props.id, | ||
@@ -468,2 +342,198 @@ className: this.props.className, | ||
if (process.env.NODE_ENV !== 'production') { | ||
YouTube.propTypes = { | ||
/** | ||
* An 11-character string representing a YouTube video ID.. | ||
*/ | ||
video: PropTypes.string, | ||
/** | ||
* DOM ID for the player element. | ||
*/ | ||
id: PropTypes.string, | ||
/** | ||
* CSS className for the player element. | ||
*/ | ||
className: PropTypes.string, | ||
/** | ||
* Width of the player element. | ||
*/ | ||
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
/** | ||
* Height of the player element. | ||
*/ | ||
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
/** | ||
* Pause the video. | ||
*/ | ||
paused: PropTypes.bool, | ||
// eslint-disable-line react/no-unused-prop-types | ||
// Player parameters | ||
/** | ||
* Whether the video should start playing automatically. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#autoplay | ||
*/ | ||
autoplay: PropTypes.bool, | ||
/** | ||
* Whether to show captions below the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#cc_load_policy | ||
*/ | ||
showCaptions: PropTypes.bool, | ||
/** | ||
* Whether to show video controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#controls | ||
*/ | ||
controls: PropTypes.bool, | ||
/** | ||
* Ignore keyboard controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#disablekb | ||
*/ | ||
disableKeyboard: PropTypes.bool, | ||
/** | ||
* Whether to display the fullscreen button. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#fs | ||
*/ | ||
allowFullscreen: PropTypes.bool, | ||
/** | ||
* The player's interface language. The parameter value is an ISO 639-1 | ||
* two-letter language code or a fully specified locale. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#hl | ||
*/ | ||
lang: PropTypes.string, | ||
/** | ||
* Whether to show annotations on top of the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#iv_load_policy | ||
*/ | ||
annotations: PropTypes.bool, | ||
/** | ||
* Time in seconds at which to start playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#start | ||
*/ | ||
startSeconds: PropTypes.number, | ||
/** | ||
* Time in seconds at which to stop playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#end | ||
*/ | ||
endSeconds: PropTypes.number, | ||
/** | ||
* Remove most YouTube logos from the player. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#modestbranding | ||
*/ | ||
modestBranding: PropTypes.bool, | ||
/** | ||
* Whether to play the video inline on iOS, instead of fullscreen. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#playsinline | ||
*/ | ||
playsInline: PropTypes.bool, | ||
/** | ||
* Whether to show related videos after the video is over. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#rel | ||
*/ | ||
showRelatedVideos: PropTypes.bool, | ||
/** | ||
* Whether to show video information (uploader, title, etc) before the video | ||
* starts. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#showinfo | ||
*/ | ||
showInfo: PropTypes.bool, | ||
/** | ||
* The playback volume, **as a number between 0 and 1**. | ||
*/ | ||
volume: PropTypes.number, | ||
/** | ||
* Whether the video's sound should be muted. | ||
*/ | ||
muted: PropTypes.bool, | ||
/** | ||
* The suggested playback quality. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#Playback_quality | ||
*/ | ||
suggestedQuality: PropTypes.string, | ||
/** | ||
* Playback speed. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate | ||
*/ | ||
playbackRate: PropTypes.number, | ||
// Events | ||
/* eslint-disable react/no-unused-prop-types */ | ||
/** | ||
* Sent when the YouTube player API has loaded. | ||
*/ | ||
onReady: PropTypes.func, | ||
/** | ||
* Sent when the player triggers an error. | ||
*/ | ||
onError: PropTypes.func, | ||
/** | ||
* Sent when the video is cued and ready to play. | ||
*/ | ||
onCued: PropTypes.func, | ||
/** | ||
* Sent when the video is buffering. | ||
*/ | ||
onBuffering: PropTypes.func, | ||
/** | ||
* Sent when playback has been started or resumed. | ||
*/ | ||
onPlaying: PropTypes.func, | ||
/** | ||
* Sent when playback has been paused. | ||
*/ | ||
onPause: PropTypes.func, | ||
/** | ||
* Sent when playback has stopped. | ||
*/ | ||
onEnd: PropTypes.func, | ||
onStateChange: PropTypes.func, | ||
onPlaybackRateChange: PropTypes.func, | ||
onPlaybackQualityChange: PropTypes.func | ||
/* eslint-enable react/no-unused-prop-types */ | ||
}; | ||
} | ||
YouTube.defaultProps = { | ||
@@ -486,173 +556,3 @@ autoplay: false, | ||
}; | ||
YouTube.propTypes = process.env.NODE_ENV !== "production" ? { | ||
/** | ||
* An 11-character string representing a YouTube video ID.. | ||
*/ | ||
video: PropTypes.string, | ||
/** | ||
* DOM ID for the player element. | ||
*/ | ||
id: PropTypes.string, | ||
/** | ||
* CSS className for the player element. | ||
*/ | ||
className: PropTypes.string, | ||
/** | ||
* Width of the player element. | ||
*/ | ||
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
/** | ||
* Height of the player element. | ||
*/ | ||
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
/** | ||
* Pause the video. | ||
*/ | ||
paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
// Player parameters | ||
/** | ||
* Whether the video should start playing automatically. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#autoplay | ||
*/ | ||
autoplay: PropTypes.bool, | ||
/** | ||
* Whether to show captions below the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#cc_load_policy | ||
*/ | ||
showCaptions: PropTypes.bool, | ||
/** | ||
* Whether to show video controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#controls | ||
*/ | ||
controls: PropTypes.bool, | ||
/** | ||
* Ignore keyboard controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#disablekb | ||
*/ | ||
disableKeyboard: PropTypes.bool, | ||
/** | ||
* Whether to display the fullscreen button. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#fs | ||
*/ | ||
allowFullscreen: PropTypes.bool, | ||
/** | ||
* The player's interface language. The parameter value is an ISO 639-1 | ||
* two-letter language code or a fully specified locale. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#hl | ||
*/ | ||
lang: PropTypes.string, | ||
/** | ||
* Whether to show annotations on top of the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#iv_load_policy | ||
*/ | ||
annotations: PropTypes.bool, | ||
/** | ||
* Time in seconds at which to start playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#start | ||
*/ | ||
startSeconds: PropTypes.number, | ||
/** | ||
* Time in seconds at which to stop playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#end | ||
*/ | ||
endSeconds: PropTypes.number, | ||
/** | ||
* Remove most YouTube logos from the player. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#modestbranding | ||
*/ | ||
modestBranding: PropTypes.bool, | ||
/** | ||
* Whether to play the video inline on iOS, instead of fullscreen. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#playsinline | ||
*/ | ||
playsInline: PropTypes.bool, | ||
/** | ||
* Whether to show related videos after the video is over. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#rel | ||
*/ | ||
showRelatedVideos: PropTypes.bool, | ||
/** | ||
* Whether to show video information (uploader, title, etc) before the video | ||
* starts. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#showinfo | ||
*/ | ||
showInfo: PropTypes.bool, | ||
/** | ||
* The playback volume, **as a number between 0 and 1**. | ||
*/ | ||
volume: PropTypes.number, | ||
/** | ||
* Whether the video's sound should be muted. | ||
*/ | ||
muted: PropTypes.bool, | ||
/** | ||
* The suggested playback quality. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#Playback_quality | ||
*/ | ||
suggestedQuality: PropTypes.string, | ||
/** | ||
* Playback speed. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate | ||
*/ | ||
playbackRate: PropTypes.number, | ||
// Events | ||
/* eslint-disable react/no-unused-prop-types */ | ||
/** | ||
* Sent when the YouTube player API has loaded. | ||
*/ | ||
onReady: PropTypes.func, | ||
/** | ||
* Sent when the player triggers an error. | ||
*/ | ||
onError: PropTypes.func, | ||
/** | ||
* Sent when the video is cued and ready to play. | ||
*/ | ||
onCued: PropTypes.func, | ||
/** | ||
* Sent when the video is buffering. | ||
*/ | ||
onBuffering: PropTypes.func, | ||
/** | ||
* Sent when playback has been started or resumed. | ||
*/ | ||
onPlaying: PropTypes.func, | ||
/** | ||
* Sent when playback has been paused. | ||
*/ | ||
onPause: PropTypes.func, | ||
/** | ||
* Sent when playback has stopped. | ||
*/ | ||
onEnd: PropTypes.func, | ||
onStateChange: PropTypes.func, | ||
onPlaybackRateChange: PropTypes.func, | ||
onPlaybackQualityChange: PropTypes.func | ||
/* eslint-enable react/no-unused-prop-types */ | ||
} : {}; | ||
exports['default'] = YouTube; |
{ | ||
"name": "@u-wave/react-youtube", | ||
"version": "0.4.1", | ||
"version": "0.4.2", | ||
"description": "YouTube player component for React.", | ||
@@ -11,3 +11,3 @@ "main": "lib/rollup.js", | ||
"lint": "eslint --cache --fix .", | ||
"test": "npm run lint && cross-env BABEL_ENV=test mocha", | ||
"test": "npm run lint && cross-env NODE_ENV=test mocha", | ||
"docs": "node tools/generate-docs.js > generated-docs.md", | ||
@@ -38,34 +38,31 @@ "example": "npm install && cd example && npm install" | ||
"peerDependencies": { | ||
"react": "^0.14.0 || ^15.0.0 || ^16.0.0" | ||
"react": "^0.14.0 || >= 15.0.0" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^6.26.0", | ||
"babel-eslint": "^7.2.0", | ||
"babel-plugin-external-helpers": "^6.22.0", | ||
"babel-plugin-transform-class-properties": "^6.23.0", | ||
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", | ||
"babel-plugin-transform-react-remove-prop-types": "^0.4.8", | ||
"babel-preset-env": "^1.6.0", | ||
"babel-preset-react": "^6.23.0", | ||
"babel-register": "^6.26.0", | ||
"cross-env": "^5.0.5", | ||
"@babel/core": "^7.0.0-beta.31", | ||
"@babel/plugin-transform-modules-commonjs": "^7.0.0-beta.31", | ||
"@babel/preset-env": "^7.0.0-beta.31", | ||
"@babel/preset-react": "^7.0.0-beta.31", | ||
"@babel/register": "^7.0.0-beta.31", | ||
"babel-eslint": "^8.0.2", | ||
"cross-env": "^5.1.1", | ||
"doctrine": "^2.0.0", | ||
"eslint": "^4.7.2", | ||
"eslint-config-airbnb": "^15.1.0", | ||
"eslint-plugin-import": "^2.7.0", | ||
"eslint-plugin-jsx-a11y": "^5.1.1", | ||
"eslint": "^4.10.0", | ||
"eslint-config-airbnb": "^16.1.0", | ||
"eslint-plugin-import": "^2.8.0", | ||
"eslint-plugin-jsx-a11y": "^6.0.2", | ||
"eslint-plugin-react": "^7.4.0", | ||
"expect": "^1.20.2", | ||
"global": "^4.3.1", | ||
"mocha": "^3.5.3", | ||
"mocha": "^4.0.1", | ||
"proxyquire": "^1.7.11", | ||
"react": "^16.0.0", | ||
"react-docgen": "^2.18.0", | ||
"react-dom": "^16.0.0", | ||
"react-test-renderer": "^16.0.0", | ||
"react": "^16.1.0", | ||
"react-docgen": "^2.20.0", | ||
"react-dom": "^16.1.0", | ||
"react-test-renderer": "^16.1.0", | ||
"regenerator-runtime": "^0.11.0", | ||
"rollup": "^0.50.0", | ||
"rollup-plugin-babel": "^3.0.2", | ||
"rollup": "^0.51.2", | ||
"rollup-plugin-babel": "^4.0.0-beta.0", | ||
"through2": "^2.0.3" | ||
} | ||
} |
@@ -5,9 +5,7 @@ import babel from 'rollup-plugin-babel'; | ||
process.env.BABEL_ENV = 'rollup'; | ||
export default { | ||
entry: './src/index.js', | ||
targets: [ | ||
{ format: 'cjs', dest: meta.main, exports: 'named' }, | ||
{ format: 'es', dest: meta.module }, | ||
input: './src/index.js', | ||
output: [ | ||
{ format: 'cjs', file: meta.main, exports: 'named' }, | ||
{ format: 'es', file: meta.module }, | ||
], | ||
@@ -14,0 +12,0 @@ |
408
src/index.js
@@ -7,197 +7,10 @@ import React from 'react'; | ||
class YouTube extends React.Component { | ||
static propTypes = { | ||
/** | ||
* An 11-character string representing a YouTube video ID.. | ||
*/ | ||
video: PropTypes.string, | ||
/** | ||
* DOM ID for the player element. | ||
*/ | ||
id: PropTypes.string, | ||
/** | ||
* CSS className for the player element. | ||
*/ | ||
className: PropTypes.string, | ||
/** | ||
* Width of the player element. | ||
*/ | ||
width: PropTypes.oneOfType([ | ||
PropTypes.number, | ||
PropTypes.string, | ||
]), | ||
/** | ||
* Height of the player element. | ||
*/ | ||
height: PropTypes.oneOfType([ | ||
PropTypes.number, | ||
PropTypes.string, | ||
]), | ||
constructor(props) { | ||
super(props); | ||
/** | ||
* Pause the video. | ||
*/ | ||
paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
this.onPlayerReady = this.onPlayerReady.bind(this); | ||
this.onPlayerStateChange = this.onPlayerStateChange.bind(this); | ||
this.refContainer = this.refContainer.bind(this); | ||
} | ||
// Player parameters | ||
/** | ||
* Whether the video should start playing automatically. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#autoplay | ||
*/ | ||
autoplay: PropTypes.bool, | ||
/** | ||
* Whether to show captions below the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#cc_load_policy | ||
*/ | ||
showCaptions: PropTypes.bool, | ||
/** | ||
* Whether to show video controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#controls | ||
*/ | ||
controls: PropTypes.bool, | ||
/** | ||
* Ignore keyboard controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#disablekb | ||
*/ | ||
disableKeyboard: PropTypes.bool, | ||
/** | ||
* Whether to display the fullscreen button. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#fs | ||
*/ | ||
allowFullscreen: PropTypes.bool, | ||
/** | ||
* The player's interface language. The parameter value is an ISO 639-1 | ||
* two-letter language code or a fully specified locale. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#hl | ||
*/ | ||
lang: PropTypes.string, | ||
/** | ||
* Whether to show annotations on top of the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#iv_load_policy | ||
*/ | ||
annotations: PropTypes.bool, | ||
/** | ||
* Time in seconds at which to start playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#start | ||
*/ | ||
startSeconds: PropTypes.number, | ||
/** | ||
* Time in seconds at which to stop playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#end | ||
*/ | ||
endSeconds: PropTypes.number, | ||
/** | ||
* Remove most YouTube logos from the player. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#modestbranding | ||
*/ | ||
modestBranding: PropTypes.bool, | ||
/** | ||
* Whether to play the video inline on iOS, instead of fullscreen. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#playsinline | ||
*/ | ||
playsInline: PropTypes.bool, | ||
/** | ||
* Whether to show related videos after the video is over. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#rel | ||
*/ | ||
showRelatedVideos: PropTypes.bool, | ||
/** | ||
* Whether to show video information (uploader, title, etc) before the video | ||
* starts. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#showinfo | ||
*/ | ||
showInfo: PropTypes.bool, | ||
/** | ||
* The playback volume, **as a number between 0 and 1**. | ||
*/ | ||
volume: PropTypes.number, | ||
/** | ||
* Whether the video's sound should be muted. | ||
*/ | ||
muted: PropTypes.bool, | ||
/** | ||
* The suggested playback quality. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#Playback_quality | ||
*/ | ||
suggestedQuality: PropTypes.string, | ||
/** | ||
* Playback speed. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate | ||
*/ | ||
playbackRate: PropTypes.number, | ||
// Events | ||
/* eslint-disable react/no-unused-prop-types */ | ||
/** | ||
* Sent when the YouTube player API has loaded. | ||
*/ | ||
onReady: PropTypes.func, | ||
/** | ||
* Sent when the player triggers an error. | ||
*/ | ||
onError: PropTypes.func, | ||
/** | ||
* Sent when the video is cued and ready to play. | ||
*/ | ||
onCued: PropTypes.func, | ||
/** | ||
* Sent when the video is buffering. | ||
*/ | ||
onBuffering: PropTypes.func, | ||
/** | ||
* Sent when playback has been started or resumed. | ||
*/ | ||
onPlaying: PropTypes.func, | ||
/** | ||
* Sent when playback has been paused. | ||
*/ | ||
onPause: PropTypes.func, | ||
/** | ||
* Sent when playback has stopped. | ||
*/ | ||
onEnd: PropTypes.func, | ||
onStateChange: PropTypes.func, | ||
onPlaybackRateChange: PropTypes.func, | ||
onPlaybackQualityChange: PropTypes.func, | ||
/* eslint-enable react/no-unused-prop-types */ | ||
}; | ||
static defaultProps = { | ||
autoplay: false, | ||
showCaptions: false, | ||
controls: true, | ||
disableKeyboard: false, | ||
allowFullscreen: true, | ||
annotations: true, | ||
modestBranding: false, | ||
playsInline: false, | ||
showRelatedVideos: true, | ||
showInfo: true, | ||
onCued: () => {}, | ||
onBuffering: () => {}, | ||
onPlaying: () => {}, | ||
onPause: () => {}, | ||
onEnd: () => {}, | ||
}; | ||
componentDidMount() { | ||
@@ -208,4 +21,3 @@ this.createPlayer(); | ||
componentDidUpdate(prevProps) { | ||
const changes = Object.keys(this.props).filter( | ||
name => this.props[name] !== prevProps[name]); | ||
const changes = Object.keys(this.props).filter(name => this.props[name] !== prevProps[name]); | ||
@@ -221,3 +33,3 @@ this.updateProps(changes); | ||
onPlayerReady = (event) => { | ||
onPlayerReady(event) { | ||
if (typeof this.props.volume !== 'undefined') { | ||
@@ -243,3 +55,3 @@ event.target.setVolume(this.props.volume * 100); | ||
onPlayerStateChange = (event) => { | ||
onPlayerStateChange(event) { | ||
const State = YT.PlayerState; // eslint-disable-line no-undef | ||
@@ -377,4 +189,3 @@ switch (event.data) { | ||
}); | ||
}), | ||
); | ||
})); | ||
@@ -389,3 +200,3 @@ if (typeof this.props.volume === 'number') { | ||
*/ | ||
refContainer = (container) => { | ||
refContainer(container) { | ||
this.container = container; | ||
@@ -405,2 +216,199 @@ } | ||
if (process.env.NODE_ENV !== 'production') { | ||
YouTube.propTypes = { | ||
/** | ||
* An 11-character string representing a YouTube video ID.. | ||
*/ | ||
video: PropTypes.string, | ||
/** | ||
* DOM ID for the player element. | ||
*/ | ||
id: PropTypes.string, | ||
/** | ||
* CSS className for the player element. | ||
*/ | ||
className: PropTypes.string, | ||
/** | ||
* Width of the player element. | ||
*/ | ||
width: PropTypes.oneOfType([ | ||
PropTypes.number, | ||
PropTypes.string, | ||
]), | ||
/** | ||
* Height of the player element. | ||
*/ | ||
height: PropTypes.oneOfType([ | ||
PropTypes.number, | ||
PropTypes.string, | ||
]), | ||
/** | ||
* Pause the video. | ||
*/ | ||
paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
// Player parameters | ||
/** | ||
* Whether the video should start playing automatically. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#autoplay | ||
*/ | ||
autoplay: PropTypes.bool, | ||
/** | ||
* Whether to show captions below the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#cc_load_policy | ||
*/ | ||
showCaptions: PropTypes.bool, | ||
/** | ||
* Whether to show video controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#controls | ||
*/ | ||
controls: PropTypes.bool, | ||
/** | ||
* Ignore keyboard controls. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#disablekb | ||
*/ | ||
disableKeyboard: PropTypes.bool, | ||
/** | ||
* Whether to display the fullscreen button. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#fs | ||
*/ | ||
allowFullscreen: PropTypes.bool, | ||
/** | ||
* The player's interface language. The parameter value is an ISO 639-1 | ||
* two-letter language code or a fully specified locale. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#hl | ||
*/ | ||
lang: PropTypes.string, | ||
/** | ||
* Whether to show annotations on top of the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#iv_load_policy | ||
*/ | ||
annotations: PropTypes.bool, | ||
/** | ||
* Time in seconds at which to start playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#start | ||
*/ | ||
startSeconds: PropTypes.number, | ||
/** | ||
* Time in seconds at which to stop playing the video. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#end | ||
*/ | ||
endSeconds: PropTypes.number, | ||
/** | ||
* Remove most YouTube logos from the player. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#modestbranding | ||
*/ | ||
modestBranding: PropTypes.bool, | ||
/** | ||
* Whether to play the video inline on iOS, instead of fullscreen. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#playsinline | ||
*/ | ||
playsInline: PropTypes.bool, | ||
/** | ||
* Whether to show related videos after the video is over. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#rel | ||
*/ | ||
showRelatedVideos: PropTypes.bool, | ||
/** | ||
* Whether to show video information (uploader, title, etc) before the video | ||
* starts. | ||
* | ||
* https://developers.google.com/youtube/player_parameters#showinfo | ||
*/ | ||
showInfo: PropTypes.bool, | ||
/** | ||
* The playback volume, **as a number between 0 and 1**. | ||
*/ | ||
volume: PropTypes.number, | ||
/** | ||
* Whether the video's sound should be muted. | ||
*/ | ||
muted: PropTypes.bool, | ||
/** | ||
* The suggested playback quality. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#Playback_quality | ||
*/ | ||
suggestedQuality: PropTypes.string, | ||
/** | ||
* Playback speed. | ||
* | ||
* https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate | ||
*/ | ||
playbackRate: PropTypes.number, | ||
// Events | ||
/* eslint-disable react/no-unused-prop-types */ | ||
/** | ||
* Sent when the YouTube player API has loaded. | ||
*/ | ||
onReady: PropTypes.func, | ||
/** | ||
* Sent when the player triggers an error. | ||
*/ | ||
onError: PropTypes.func, | ||
/** | ||
* Sent when the video is cued and ready to play. | ||
*/ | ||
onCued: PropTypes.func, | ||
/** | ||
* Sent when the video is buffering. | ||
*/ | ||
onBuffering: PropTypes.func, | ||
/** | ||
* Sent when playback has been started or resumed. | ||
*/ | ||
onPlaying: PropTypes.func, | ||
/** | ||
* Sent when playback has been paused. | ||
*/ | ||
onPause: PropTypes.func, | ||
/** | ||
* Sent when playback has stopped. | ||
*/ | ||
onEnd: PropTypes.func, | ||
onStateChange: PropTypes.func, | ||
onPlaybackRateChange: PropTypes.func, | ||
onPlaybackQualityChange: PropTypes.func, | ||
/* eslint-enable react/no-unused-prop-types */ | ||
}; | ||
} | ||
YouTube.defaultProps = { | ||
autoplay: false, | ||
showCaptions: false, | ||
controls: true, | ||
disableKeyboard: false, | ||
allowFullscreen: true, | ||
annotations: true, | ||
modestBranding: false, | ||
playsInline: false, | ||
showRelatedVideos: true, | ||
showInfo: true, | ||
onCued: () => {}, | ||
onBuffering: () => {}, | ||
onPlaying: () => {}, | ||
onPause: () => {}, | ||
onEnd: () => {}, | ||
}; | ||
export default YouTube; |
@@ -17,6 +17,7 @@ /* global window */ | ||
reject(err); | ||
} else { | ||
window.YT.ready(() => { | ||
resolve(window.YT); | ||
}); | ||
} | ||
window.YT.ready(() => { | ||
resolve(window.YT); | ||
}); | ||
}); | ||
@@ -23,0 +24,0 @@ }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
25
56825
20
1591