react-player
Advanced tools
Comparing version 2.1.1 to 2.2.0-beta.0
@@ -6,3 +6,12 @@ "use strict"; | ||
}); | ||
exports.DASH_EXTENSIONS = exports.HLS_EXTENSIONS = exports.VIDEO_EXTENSIONS = exports.AUDIO_EXTENSIONS = exports.MATCH_URL_VIDYARD = exports.MATCH_URL_MIXCLOUD = exports.MATCH_URL_DAILYMOTION = exports.MATCH_URL_TWITCH_CHANNEL = exports.MATCH_URL_TWITCH_VIDEO = exports.MATCH_URL_WISTIA = exports.MATCH_URL_STREAMABLE = exports.MATCH_URL_FACEBOOK = exports.MATCH_URL_VIMEO = exports.MATCH_URL_SOUNDCLOUD = exports.MATCH_URL_YOUTUBE = void 0; | ||
exports.canPlay = exports.DASH_EXTENSIONS = exports.HLS_EXTENSIONS = exports.VIDEO_EXTENSIONS = exports.AUDIO_EXTENSIONS = exports.MATCH_URL_VIDYARD = exports.MATCH_URL_MIXCLOUD = exports.MATCH_URL_DAILYMOTION = exports.MATCH_URL_TWITCH_CHANNEL = exports.MATCH_URL_TWITCH_VIDEO = exports.MATCH_URL_WISTIA = exports.MATCH_URL_STREAMABLE = exports.MATCH_URL_FACEBOOK = exports.MATCH_URL_VIMEO = exports.MATCH_URL_SOUNDCLOUD = exports.MATCH_URL_YOUTUBE = void 0; | ||
var _utils = require("./utils"); | ||
function _createForOfIteratorHelper(o) { if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (o = _unsupportedIterableToArray(o))) { var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var it, normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
var MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//; | ||
@@ -37,2 +46,76 @@ exports.MATCH_URL_YOUTUBE = MATCH_URL_YOUTUBE; | ||
var DASH_EXTENSIONS = /\.(mpd)($|\?)/i; | ||
exports.DASH_EXTENSIONS = DASH_EXTENSIONS; | ||
exports.DASH_EXTENSIONS = DASH_EXTENSIONS; | ||
var canPlayFile = function canPlayFile(url) { | ||
if (url instanceof Array) { | ||
var _iterator = _createForOfIteratorHelper(url), | ||
_step; | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var item = _step.value; | ||
if (typeof item === 'string' && canPlayFile(item)) { | ||
return true; | ||
} | ||
if (canPlayFile(item.src)) { | ||
return true; | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
return false; | ||
} | ||
if ((0, _utils.isMediaStream)(url)) { | ||
return true; | ||
} | ||
return AUDIO_EXTENSIONS.test(url) || VIDEO_EXTENSIONS.test(url) || HLS_EXTENSIONS.test(url) || DASH_EXTENSIONS.test(url); | ||
}; | ||
var canPlay = { | ||
youtube: function youtube(url) { | ||
if (url instanceof Array) { | ||
return url.every(function (item) { | ||
return MATCH_URL_YOUTUBE.test(item); | ||
}); | ||
} | ||
return MATCH_URL_YOUTUBE.test(url); | ||
}, | ||
soundcloud: function soundcloud(url) { | ||
return MATCH_URL_SOUNDCLOUD.test(url) && !AUDIO_EXTENSIONS.test(url); | ||
}, | ||
vimeo: function vimeo(url) { | ||
return MATCH_URL_VIMEO.test(url) && !VIDEO_EXTENSIONS.test(url) && !HLS_EXTENSIONS.test(url); | ||
}, | ||
facebook: function facebook(url) { | ||
return MATCH_URL_FACEBOOK.test(url); | ||
}, | ||
streamable: function streamable(url) { | ||
return MATCH_URL_STREAMABLE.test(url); | ||
}, | ||
wistia: function wistia(url) { | ||
return MATCH_URL_WISTIA.test(url); | ||
}, | ||
twitch: function twitch(url) { | ||
return MATCH_URL_TWITCH_VIDEO.test(url) || MATCH_URL_TWITCH_CHANNEL.test(url); | ||
}, | ||
dailymotion: function dailymotion(url) { | ||
return MATCH_URL_DAILYMOTION.test(url); | ||
}, | ||
mixcloud: function mixcloud(url) { | ||
return MATCH_URL_MIXCLOUD.test(url); | ||
}, | ||
vidyard: function vidyard(url) { | ||
return MATCH_URL_VIDYARD.test(url); | ||
}, | ||
file: canPlayFile | ||
}; | ||
exports.canPlay = canPlay; |
@@ -225,2 +225,4 @@ "use strict"; | ||
_defineProperty(DailyMotion, "canPlay", _patterns.canPlay.dailymotion); | ||
_defineProperty(DailyMotion, "loopOnEnded", true); |
@@ -12,2 +12,4 @@ "use strict"; | ||
var _patterns = require("../patterns"); | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
@@ -200,2 +202,4 @@ | ||
_defineProperty(Facebook, "canPlay", _patterns.canPlay.facebook); | ||
_defineProperty(Facebook, "loopOnEnded", true); |
@@ -475,2 +475,4 @@ "use strict"; | ||
_defineProperty(FilePlayer, "displayName", 'FilePlayer'); | ||
_defineProperty(FilePlayer, "displayName", 'FilePlayer'); | ||
_defineProperty(FilePlayer, "canPlay", _patterns.canPlay.file); |
@@ -14,153 +14,111 @@ "use strict"; | ||
function _createForOfIteratorHelper(o) { if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (o = _unsupportedIterableToArray(o))) { var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var it, normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } | ||
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
var canPlayFile = function canPlayFile(url) { | ||
if (url instanceof Array) { | ||
var _iterator = _createForOfIteratorHelper(url), | ||
_step; | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var item = _step.value; | ||
if (typeof item === 'string' && canPlayFile(item)) { | ||
return true; | ||
} | ||
if (canPlayFile(item.src)) { | ||
return true; | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
return false; | ||
} | ||
if ((0, _utils.isMediaStream)(url)) { | ||
return true; | ||
} | ||
return _patterns.AUDIO_EXTENSIONS.test(url) || _patterns.VIDEO_EXTENSIONS.test(url) || _patterns.HLS_EXTENSIONS.test(url) || _patterns.DASH_EXTENSIONS.test(url); | ||
}; | ||
var _default = [{ | ||
key: 'youtube', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_YOUTUBE.test(url); | ||
}, | ||
name: 'YouTube', | ||
canPlay: _patterns.canPlay.youtube, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerYouTube' */ | ||
'./YouTube'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./YouTube')); | ||
}); | ||
}) | ||
}, { | ||
key: 'soundcloud', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_SOUNDCLOUD.test(url) && !_patterns.AUDIO_EXTENSIONS.test(url); | ||
}, | ||
name: 'SoundCloud', | ||
canPlay: _patterns.canPlay.soundcloud, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerSoundCloud' */ | ||
'./SoundCloud'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./SoundCloud')); | ||
}); | ||
}) | ||
}, { | ||
key: 'vimeo', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_VIMEO.test(url) && !_patterns.VIDEO_EXTENSIONS.test(url) && !_patterns.HLS_EXTENSIONS.test(url); | ||
}, | ||
name: 'Vimeo', | ||
canPlay: _patterns.canPlay.vimeo, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerVimeo' */ | ||
'./Vimeo'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./Vimeo')); | ||
}); | ||
}) | ||
}, { | ||
key: 'facebook', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_FACEBOOK.test(url); | ||
}, | ||
name: 'Facebook', | ||
canPlay: _patterns.canPlay.facebook, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerFacebook' */ | ||
'./Facebook'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./Facebook')); | ||
}); | ||
}) | ||
}, { | ||
key: 'streamable', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_STREAMABLE.test(url); | ||
}, | ||
name: 'Streamable', | ||
canPlay: _patterns.canPlay.streamable, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerStreamable' */ | ||
'./Streamable'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./Streamable')); | ||
}); | ||
}) | ||
}, { | ||
key: 'wistia', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_WISTIA.test(url); | ||
}, | ||
name: 'Wistia', | ||
canPlay: _patterns.canPlay.wistia, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerWistia' */ | ||
'./Wistia'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./Wistia')); | ||
}); | ||
}) | ||
}, { | ||
key: 'twitch', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_TWITCH_VIDEO.test(url) || _patterns.MATCH_URL_TWITCH_CHANNEL.test(url); | ||
}, | ||
name: 'Twitch', | ||
canPlay: _patterns.canPlay.twitch, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerTwitch' */ | ||
'./Twitch'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./Twitch')); | ||
}); | ||
}) | ||
}, { | ||
key: 'dailymotion', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_DAILYMOTION.test(url); | ||
}, | ||
name: 'DailyMotion', | ||
canPlay: _patterns.canPlay.dailymotion, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerDailyMotion' */ | ||
'./DailyMotion'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./DailyMotion')); | ||
}); | ||
}) | ||
}, { | ||
key: 'mixcloud', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_MIXCLOUD.test(url); | ||
}, | ||
name: 'Mixcloud', | ||
canPlay: _patterns.canPlay.mixcloud, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerMixcloud' */ | ||
'./Mixcloud'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./Mixcloud')); | ||
}); | ||
}) | ||
}, { | ||
key: 'vidyard', | ||
canPlay: function canPlay(url) { | ||
return _patterns.MATCH_URL_VIDYARD.test(url); | ||
}, | ||
name: 'Vidyard', | ||
canPlay: _patterns.canPlay.vidyard, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerVidyard' */ | ||
'./Vidyard'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./Vidyard')); | ||
}); | ||
}) | ||
}, { | ||
key: 'file', | ||
canPlay: canPlayFile, | ||
name: 'FilePlayer', | ||
canPlay: _patterns.canPlay.file, | ||
canEnablePIP: function canEnablePIP(url) { | ||
return canPlayFile(url) && (document.pictureInPictureEnabled || (0, _utils.supportsWebKitPresentationMode)()) && !_patterns.AUDIO_EXTENSIONS.test(url); | ||
return _patterns.canPlay.file(url) && (document.pictureInPictureEnabled || (0, _utils.supportsWebKitPresentationMode)()) && !_patterns.AUDIO_EXTENSIONS.test(url); | ||
}, | ||
lazyPlayer: (0, _react.lazy)(function () { | ||
return import( | ||
/* webpackChunkName: 'reactPlayerFilePlayer' */ | ||
'./FilePlayer'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./FilePlayer')); | ||
}); | ||
}) | ||
}]; | ||
exports["default"] = _default; |
@@ -188,2 +188,4 @@ "use strict"; | ||
_defineProperty(Mixcloud, "canPlay", _patterns.canPlay.mixcloud); | ||
_defineProperty(Mixcloud, "loopOnEnded", true); |
@@ -12,2 +12,4 @@ "use strict"; | ||
var _patterns = require("../patterns"); | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
@@ -214,2 +216,4 @@ | ||
_defineProperty(SoundCloud, "canPlay", _patterns.canPlay.soundcloud); | ||
_defineProperty(SoundCloud, "loopOnEnded", true); |
@@ -200,2 +200,4 @@ "use strict"; | ||
_defineProperty(Streamable, "displayName", 'Streamable'); | ||
_defineProperty(Streamable, "displayName", 'Streamable'); | ||
_defineProperty(Streamable, "canPlay", _patterns.canPlay.streamable); |
@@ -206,2 +206,4 @@ "use strict"; | ||
_defineProperty(Twitch, "canPlay", _patterns.canPlay.twitch); | ||
_defineProperty(Twitch, "loopOnEnded", true); |
@@ -199,2 +199,4 @@ "use strict"; | ||
_defineProperty(Vidyard, "displayName", 'Vidyard'); | ||
_defineProperty(Vidyard, "displayName", 'Vidyard'); | ||
_defineProperty(Vidyard, "canPlay", _patterns.canPlay.vidyard); |
@@ -12,2 +12,4 @@ "use strict"; | ||
var _patterns = require("../patterns"); | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
@@ -239,2 +241,4 @@ | ||
_defineProperty(Vimeo, "canPlay", _patterns.canPlay.vimeo); | ||
_defineProperty(Vimeo, "forceLoad", true); |
@@ -232,2 +232,4 @@ "use strict"; | ||
_defineProperty(Wistia, "canPlay", _patterns.canPlay.wistia); | ||
_defineProperty(Wistia, "loopOnEnded", true); |
@@ -24,2 +24,14 @@ "use strict"; | ||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -47,14 +59,2 @@ | ||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
var SDK_URL = 'https://www.youtube.com/iframe_api'; | ||
@@ -68,26 +68,2 @@ var SDK_GLOBAL = 'YT'; | ||
function parsePlaylist(url) { | ||
if (MATCH_PLAYLIST.test(url)) { | ||
var _url$match = url.match(MATCH_PLAYLIST), | ||
_url$match2 = _slicedToArray(_url$match, 2), | ||
playlistId = _url$match2[1]; | ||
return { | ||
listType: 'playlist', | ||
list: playlistId | ||
}; | ||
} else if (MATCH_USER_UPLOADS.test(url)) { | ||
var _url$match3 = url.match(MATCH_USER_UPLOADS), | ||
_url$match4 = _slicedToArray(_url$match3, 2), | ||
username = _url$match4[1]; | ||
return { | ||
listType: 'user_uploads', | ||
list: username | ||
}; | ||
} | ||
return {}; | ||
} | ||
var YouTube = /*#__PURE__*/function (_Component) { | ||
@@ -111,2 +87,33 @@ _inherits(YouTube, _Component); | ||
_defineProperty(_assertThisInitialized(_this), "parsePlaylist", function (url) { | ||
if (url instanceof Array) { | ||
return { | ||
listType: 'playlist', | ||
playlist: url.map(_this.getID).join(',') | ||
}; | ||
} | ||
if (MATCH_PLAYLIST.test(url)) { | ||
var _url$match = url.match(MATCH_PLAYLIST), | ||
_url$match2 = _slicedToArray(_url$match, 2), | ||
playlistId = _url$match2[1]; | ||
return { | ||
listType: 'playlist', | ||
list: playlistId | ||
}; | ||
} else if (MATCH_USER_UPLOADS.test(url)) { | ||
var _url$match3 = url.match(MATCH_USER_UPLOADS), | ||
_url$match4 = _slicedToArray(_url$match3, 2), | ||
username = _url$match4[1]; | ||
return { | ||
listType: 'user_uploads', | ||
list: username | ||
}; | ||
} | ||
return {}; | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "onStateChange", function (event) { | ||
@@ -180,2 +187,11 @@ var data = event.data; | ||
}, { | ||
key: "getID", | ||
value: function getID(url) { | ||
if (!url || url instanceof Array) { | ||
return null; | ||
} | ||
return url.match(_patterns.MATCH_URL_YOUTUBE)[1]; | ||
} | ||
}, { | ||
key: "load", | ||
@@ -195,7 +211,7 @@ value: function load(url, isReady) { | ||
embedOptions = config.embedOptions; | ||
var id = url && url.match(_patterns.MATCH_URL_YOUTUBE)[1]; | ||
var id = this.getID(url); | ||
if (isReady) { | ||
if (MATCH_PLAYLIST.test(url) || MATCH_USER_UPLOADS.test(url)) { | ||
this.player.loadPlaylist(parsePlaylist(url)); | ||
if (MATCH_PLAYLIST.test(url) || MATCH_USER_UPLOADS.test(url) || url instanceof Array) { | ||
this.player.loadPlaylist(this.parsePlaylist(url)); | ||
return; | ||
@@ -228,3 +244,3 @@ } | ||
playsinline: playsinline | ||
}, parsePlaylist(url), {}, playerVars), | ||
}, _this2.parsePlaylist(url), {}, playerVars), | ||
events: { | ||
@@ -325,2 +341,4 @@ onReady: function onReady() { | ||
_defineProperty(YouTube, "displayName", 'YouTube'); | ||
_defineProperty(YouTube, "displayName", 'YouTube'); | ||
_defineProperty(YouTube, "canPlay", _patterns.canPlay.youtube); |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports["default"] = void 0; | ||
exports.createReactPlayer = void 0; | ||
@@ -21,4 +21,2 @@ var _react = _interopRequireWildcard(require("react")); | ||
var _players = _interopRequireDefault(require("./players")); | ||
var _Player3 = _interopRequireDefault(require("./Player")); | ||
@@ -28,6 +26,2 @@ | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
@@ -75,4 +69,10 @@ | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
var Preview = (0, _react.lazy)(function () { | ||
return import('./Preview'); | ||
return Promise.resolve().then(function () { | ||
return _interopRequireWildcard(require('./Preview')); | ||
}); | ||
}); | ||
@@ -88,215 +88,210 @@ var IS_BROWSER = typeof window !== 'undefined' && window.document; | ||
var ReactPlayer = /*#__PURE__*/function (_Component) { | ||
_inherits(ReactPlayer, _Component); | ||
var createReactPlayer = function createReactPlayer(players, fallback) { | ||
var _class, _temp; | ||
var _super = _createSuper(ReactPlayer); | ||
return _temp = _class = /*#__PURE__*/function (_Component) { | ||
_inherits(ReactPlayer, _Component); | ||
function ReactPlayer() { | ||
var _this; | ||
var _super = _createSuper(ReactPlayer); | ||
_classCallCheck(this, ReactPlayer); | ||
function ReactPlayer() { | ||
var _this; | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
_classCallCheck(this, ReactPlayer); | ||
_this = _super.call.apply(_super, [this].concat(args)); | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
_defineProperty(_assertThisInitialized(_this), "state", { | ||
showPreview: !!_this.props.light | ||
}); | ||
_this = _super.call.apply(_super, [this].concat(args)); | ||
_defineProperty(_assertThisInitialized(_this), "references", { | ||
wrapper: function wrapper(_wrapper) { | ||
_this.wrapper = _wrapper; | ||
}, | ||
player: function player(_player) { | ||
_this.player = _player; | ||
} | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "state", { | ||
showPreview: !!_this.props.light | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "handleClickPreview", function () { | ||
_this.setState({ | ||
showPreview: false | ||
_defineProperty(_assertThisInitialized(_this), "references", { | ||
wrapper: function wrapper(_wrapper) { | ||
_this.wrapper = _wrapper; | ||
}, | ||
player: function player(_player) { | ||
_this.player = _player; | ||
} | ||
}); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "showPreview", function () { | ||
_this.setState({ | ||
showPreview: true | ||
_defineProperty(_assertThisInitialized(_this), "handleClickPreview", function () { | ||
_this.setState({ | ||
showPreview: false | ||
}); | ||
}); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "getDuration", function () { | ||
if (!_this.player) return null; | ||
return _this.player.getDuration(); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "showPreview", function () { | ||
_this.setState({ | ||
showPreview: true | ||
}); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "getCurrentTime", function () { | ||
if (!_this.player) return null; | ||
return _this.player.getCurrentTime(); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "getDuration", function () { | ||
if (!_this.player) return null; | ||
return _this.player.getDuration(); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "getSecondsLoaded", function () { | ||
if (!_this.player) return null; | ||
return _this.player.getSecondsLoaded(); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "getCurrentTime", function () { | ||
if (!_this.player) return null; | ||
return _this.player.getCurrentTime(); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "getInternalPlayer", function () { | ||
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'player'; | ||
if (!_this.player) return null; | ||
return _this.player.getInternalPlayer(key); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "getSecondsLoaded", function () { | ||
if (!_this.player) return null; | ||
return _this.player.getSecondsLoaded(); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "seekTo", function (fraction, type) { | ||
if (!_this.player) return null; | ||
_defineProperty(_assertThisInitialized(_this), "getInternalPlayer", function () { | ||
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'player'; | ||
if (!_this.player) return null; | ||
return _this.player.getInternalPlayer(key); | ||
}); | ||
_this.player.seekTo(fraction, type); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "seekTo", function (fraction, type) { | ||
if (!_this.player) return null; | ||
_defineProperty(_assertThisInitialized(_this), "handleReady", function () { | ||
_this.props.onReady(_assertThisInitialized(_this)); | ||
}); | ||
_this.player.seekTo(fraction, type); | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "getActivePlayer", (0, _memoizeOne["default"])(function (url) { | ||
for (var _i = 0, _arr = [].concat(customPlayers, _toConsumableArray(_players["default"])); _i < _arr.length; _i++) { | ||
var player = _arr[_i]; | ||
_defineProperty(_assertThisInitialized(_this), "handleReady", function () { | ||
_this.props.onReady(_assertThisInitialized(_this)); | ||
}); | ||
if (player.canPlay(url)) { | ||
return player; | ||
_defineProperty(_assertThisInitialized(_this), "getActivePlayer", (0, _memoizeOne["default"])(function (url) { | ||
for (var _i = 0, _arr = [].concat(customPlayers, _toConsumableArray(players)); _i < _arr.length; _i++) { | ||
var player = _arr[_i]; | ||
if (player.canPlay(url)) { | ||
return player; | ||
} | ||
} | ||
} // Fall back to FilePlayer if nothing else can play the URL | ||
if (fallback) { | ||
return fallback; | ||
} | ||
return _players["default"][_players["default"].length - 1]; | ||
})); | ||
return null; | ||
})); | ||
_defineProperty(_assertThisInitialized(_this), "getConfig", (0, _memoizeOne["default"])(function (url, key) { | ||
var config = _this.props.config; | ||
return _deepmerge["default"].all([_props.defaultProps.config, _props.defaultProps.config[key] || {}, config, config[key] || {}]); | ||
})); | ||
_defineProperty(_assertThisInitialized(_this), "getConfig", (0, _memoizeOne["default"])(function (url, key) { | ||
var config = _this.props.config; | ||
return _deepmerge["default"].all([_props.defaultProps.config, _props.defaultProps.config[key] || {}, config, config[key] || {}]); | ||
})); | ||
_defineProperty(_assertThisInitialized(_this), "getAttributes", (0, _memoizeOne["default"])(function (url) { | ||
return (0, _utils.omit)(_this.props, SUPPORTED_PROPS); | ||
})); | ||
_defineProperty(_assertThisInitialized(_this), "getAttributes", (0, _memoizeOne["default"])(function (url) { | ||
return (0, _utils.omit)(_this.props, SUPPORTED_PROPS); | ||
})); | ||
_defineProperty(_assertThisInitialized(_this), "renderActivePlayer", function (url) { | ||
if (!url) return null; | ||
_defineProperty(_assertThisInitialized(_this), "renderActivePlayer", function (url) { | ||
if (!url) return null; | ||
var player = _this.getActivePlayer(url); | ||
var player = _this.getActivePlayer(url); | ||
var config = _this.getConfig(url, player.key); | ||
if (!player) return null; | ||
return /*#__PURE__*/_react["default"].createElement(_Player3["default"], _extends({}, _this.props, { | ||
key: player.key, | ||
ref: _this.references.player, | ||
config: config, | ||
activePlayer: player.lazyPlayer || player, | ||
onReady: _this.handleReady | ||
})); | ||
}); | ||
var config = _this.getConfig(url, player.key); | ||
return _this; | ||
} | ||
return /*#__PURE__*/_react["default"].createElement(_Player3["default"], _extends({}, _this.props, { | ||
key: player.key, | ||
ref: _this.references.player, | ||
config: config, | ||
activePlayer: player.lazyPlayer || player, | ||
onReady: _this.handleReady | ||
})); | ||
}); | ||
_createClass(ReactPlayer, [{ | ||
key: "shouldComponentUpdate", | ||
value: function shouldComponentUpdate(nextProps, nextState) { | ||
return !(0, _reactFastCompare["default"])(this.props, nextProps) || !(0, _reactFastCompare["default"])(this.state, nextState); | ||
return _this; | ||
} | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate(prevProps) { | ||
var light = this.props.light; | ||
if (!prevProps.light && light) { | ||
this.setState({ | ||
showPreview: true | ||
}); | ||
_createClass(ReactPlayer, [{ | ||
key: "shouldComponentUpdate", | ||
value: function shouldComponentUpdate(nextProps, nextState) { | ||
return !(0, _reactFastCompare["default"])(this.props, nextProps) || !(0, _reactFastCompare["default"])(this.state, nextState); | ||
} | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate(prevProps) { | ||
var light = this.props.light; | ||
if (prevProps.light && !light) { | ||
this.setState({ | ||
showPreview: false | ||
if (!prevProps.light && light) { | ||
this.setState({ | ||
showPreview: true | ||
}); | ||
} | ||
if (prevProps.light && !light) { | ||
this.setState({ | ||
showPreview: false | ||
}); | ||
} | ||
} | ||
}, { | ||
key: "renderPreview", | ||
value: function renderPreview(url) { | ||
if (!url) return null; | ||
var _this$props = this.props, | ||
light = _this$props.light, | ||
playIcon = _this$props.playIcon; | ||
return /*#__PURE__*/_react["default"].createElement(Preview, { | ||
url: url, | ||
light: light, | ||
playIcon: playIcon, | ||
onClick: this.handleClickPreview | ||
}); | ||
} | ||
} | ||
}, { | ||
key: "renderPreview", | ||
value: function renderPreview(url) { | ||
if (!url) return null; | ||
var _this$props = this.props, | ||
light = _this$props.light, | ||
playIcon = _this$props.playIcon; | ||
return /*#__PURE__*/_react["default"].createElement(Preview, { | ||
url: url, | ||
light: light, | ||
playIcon: playIcon, | ||
onClick: this.handleClickPreview | ||
}); | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _this$props2 = this.props, | ||
url = _this$props2.url, | ||
style = _this$props2.style, | ||
width = _this$props2.width, | ||
height = _this$props2.height, | ||
Wrapper = _this$props2.wrapper; | ||
var showPreview = this.state.showPreview; | ||
var attributes = this.getAttributes(url); | ||
return /*#__PURE__*/_react["default"].createElement(Wrapper, _extends({ | ||
ref: this.references.wrapper, | ||
style: _objectSpread({}, style, { | ||
width: width, | ||
height: height | ||
}) | ||
}, attributes), /*#__PURE__*/_react["default"].createElement(UniversalSuspense, { | ||
fallback: null | ||
}, showPreview ? this.renderPreview(url) : this.renderActivePlayer(url))); | ||
} | ||
}]); | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _this$props2 = this.props, | ||
url = _this$props2.url, | ||
style = _this$props2.style, | ||
width = _this$props2.width, | ||
height = _this$props2.height, | ||
Wrapper = _this$props2.wrapper; | ||
var showPreview = this.state.showPreview; | ||
var attributes = this.getAttributes(url); | ||
return /*#__PURE__*/_react["default"].createElement(Wrapper, _extends({ | ||
ref: this.references.wrapper, | ||
style: _objectSpread({}, style, { | ||
width: width, | ||
height: height | ||
}) | ||
}, attributes), /*#__PURE__*/_react["default"].createElement(UniversalSuspense, { | ||
fallback: null | ||
}, showPreview ? this.renderPreview(url) : this.renderActivePlayer(url))); | ||
} | ||
}]); | ||
return ReactPlayer; | ||
}(_react.Component); | ||
return ReactPlayer; | ||
}(_react.Component), _defineProperty(_class, "displayName", 'ReactPlayer'), _defineProperty(_class, "propTypes", _props.propTypes), _defineProperty(_class, "defaultProps", _props.defaultProps), _defineProperty(_class, "addCustomPlayer", function (player) { | ||
customPlayers.push(player); | ||
}), _defineProperty(_class, "removeCustomPlayers", function () { | ||
customPlayers.length = 0; | ||
}), _defineProperty(_class, "canPlay", function (url) { | ||
for (var _i2 = 0, _arr2 = [].concat(customPlayers, _toConsumableArray(players)); _i2 < _arr2.length; _i2++) { | ||
var _Player = _arr2[_i2]; | ||
exports["default"] = ReactPlayer; | ||
if (_Player.canPlay(url)) { | ||
return true; | ||
} | ||
} | ||
_defineProperty(ReactPlayer, "displayName", 'ReactPlayer'); | ||
return false; | ||
}), _defineProperty(_class, "canEnablePIP", function (url) { | ||
for (var _i3 = 0, _arr3 = [].concat(customPlayers, _toConsumableArray(players)); _i3 < _arr3.length; _i3++) { | ||
var _Player2 = _arr3[_i3]; | ||
_defineProperty(ReactPlayer, "propTypes", _props.propTypes); | ||
_defineProperty(ReactPlayer, "defaultProps", _props.defaultProps); | ||
_defineProperty(ReactPlayer, "addCustomPlayer", function (player) { | ||
customPlayers.push(player); | ||
}); | ||
_defineProperty(ReactPlayer, "removeCustomPlayers", function () { | ||
customPlayers.length = 0; | ||
}); | ||
_defineProperty(ReactPlayer, "canPlay", function (url) { | ||
for (var _i2 = 0, _arr2 = [].concat(customPlayers, _toConsumableArray(_players["default"])); _i2 < _arr2.length; _i2++) { | ||
var _Player = _arr2[_i2]; | ||
if (_Player.canPlay(url)) { | ||
return true; | ||
if (_Player2.canEnablePIP && _Player2.canEnablePIP(url)) { | ||
return true; | ||
} | ||
} | ||
} | ||
return false; | ||
}); | ||
return false; | ||
}), _temp; | ||
}; | ||
_defineProperty(ReactPlayer, "canEnablePIP", function (url) { | ||
for (var _i3 = 0, _arr3 = [].concat(customPlayers, _toConsumableArray(_players["default"])); _i3 < _arr3.length; _i3++) { | ||
var _Player2 = _arr3[_i3]; | ||
if (_Player2.canEnablePIP && _Player2.canEnablePIP(url)) { | ||
return true; | ||
} | ||
} | ||
return false; | ||
}); | ||
exports.createReactPlayer = createReactPlayer; |
@@ -12,3 +12,3 @@ "use strict"; | ||
var _ReactPlayer = _interopRequireDefault(require("./ReactPlayer")); | ||
var _index = _interopRequireDefault(require("./index")); | ||
@@ -18,3 +18,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
function renderReactPlayer(container, props) { | ||
(0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(_ReactPlayer["default"], props), container); | ||
(0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], props), container); | ||
} |
@@ -42,2 +42,6 @@ "use strict"; | ||
function parseTimeParam(url, pattern) { | ||
if (url instanceof Array) { | ||
return undefined; | ||
} | ||
var match = url.match(pattern); | ||
@@ -44,0 +48,0 @@ |
{ | ||
"name": "react-player", | ||
"version": "2.1.1", | ||
"version": "2.2.0-beta.0", | ||
"description": "A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion", | ||
"main": "lib/ReactPlayer.js", | ||
"main": "lib/index.js", | ||
"typings": "index.d.ts", | ||
"scripts": { | ||
"clean": "rimraf lib demo coverage", | ||
"clean": "rimraf lib lazy demo coverage", | ||
"start": "webpack-dev-server --config webpack/config.babel.js", | ||
@@ -16,2 +16,3 @@ "lint": "standard --verbose | snazzy", | ||
"build:lib": "cross-env NODE_ENV=production babel src -d lib --ignore src/demo", | ||
"build:lazy": "cross-env NODE_ENV=production LAZY=true babel src -d lazy --ignore src/demo", | ||
"build:demo": "cross-env NODE_ENV=production webpack --config webpack/production.babel.js", | ||
@@ -22,4 +23,4 @@ "build:dist": "cross-env NODE_ENV=production webpack --config webpack/dist.babel.js", | ||
"version": "auto-changelog -p && npm run build:dist && npm run build:standalone && git add CHANGELOG.md dist", | ||
"prepublishOnly": "npm run build:lib && npm run build:dist", | ||
"postpublish": "npm run clean" | ||
"prepublishOnly": "npm run build:lib && npm run build:lazy && npm run build:dist && node scripts/pre-publish.js", | ||
"postpublish": "node scripts/post-publish.js && npm run clean" | ||
}, | ||
@@ -107,26 +108,2 @@ "repository": { | ||
}, | ||
"babel": { | ||
"presets": [ | ||
[ | ||
"@babel/preset-env", | ||
{ | ||
"exclude": [ | ||
"@babel/plugin-proposal-dynamic-import" | ||
] | ||
} | ||
], | ||
"@babel/preset-react" | ||
], | ||
"plugins": [ | ||
"react-hot-loader/babel", | ||
"@babel/plugin-proposal-class-properties" | ||
], | ||
"env": { | ||
"test": { | ||
"plugins": [ | ||
"istanbul" | ||
] | ||
} | ||
} | ||
}, | ||
"postcss": { | ||
@@ -133,0 +110,0 @@ "plugins": { |
@@ -31,18 +31,26 @@ <h1 align='center'> | ||
```bash | ||
npm install react-player --save | ||
# or | ||
yarn add react-player | ||
npm install react-player | ||
``` | ||
```js | ||
import React, { Component } from 'react' | ||
```jsx | ||
import React from 'react' | ||
import ReactPlayer from 'react-player' | ||
class App extends Component { | ||
render () { | ||
return <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing /> | ||
} | ||
} | ||
const App = () => ( | ||
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' /> | ||
) | ||
``` | ||
If your build system supports `import()` statements, use `react-player/lazy` to lazy load the appropriate player for the `url` you pass in. This will add several `reactPlayer` chunks to your bundle, but reduce your main bundle size. | ||
```jsx | ||
import React from 'react' | ||
import ReactPlayer from 'react-player/lazy' | ||
// Only loads the YouTube player | ||
const App = () => ( | ||
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' /> | ||
) | ||
``` | ||
Demo page: [`https://cookpete.com/react-player`](https://cookpete.com/react-player) | ||
@@ -274,2 +282,13 @@ | ||
Passing an array of YouTube URLs to the `url` prop will load them as an untitled playlist. | ||
```jsx | ||
<ReactPlayer | ||
url={[ | ||
'https://www.youtube.com/watch?v=oUFJJNQGwhk', | ||
'https://www.youtube.com/watch?v=jNgP6d9HraI' | ||
]} | ||
/> | ||
``` | ||
When playing file paths, an array of sources can be passed to the `url` prop to render multiple `<source>` tags. | ||
@@ -276,0 +295,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
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
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
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
1356060
68
8291
358
1
2