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

react-player

Package Overview
Dependencies
Maintainers
1
Versions
162
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-player - npm Package Compare versions

Comparing version 0.22.0 to 0.23.0

lib/players/SoundCloudLegacy.js
webpack.browser.babel.js
webpack.production.babel.js

16

bower.json

@@ -27,14 +27,12 @@ {

"ignore": [
"**/.*",
"node_modules",
"test",
"src",
"lib",
"server.js",
"index.html",
"webpack.config.*.js"
"*",
"!dist/*",
"!package.json",
"!CHANGELOG.md",
"!README.md",
"!LICENSE"
],
"dependencies": {
"react": "^0.14.7"
"react": "*"
}
}

8

CHANGELOG.md

@@ -7,2 +7,10 @@ # Change Log

#### [v0.23.0](https://github.com/CookPete/react-player/compare/v0.22.0...v0.23.0)
> 8 September 2017
* Soundcloud: use Widget API instead of HTTP API [`#199`](https://github.com/CookPete/react-player/pull/199)
* Fixed broken TypeScript type definitions [`#230`](https://github.com/CookPete/react-player/pull/230)
* Refactor development setup [`81df2a8`](https://github.com/CookPete/react-player/commit/81df2a8c929e4a7d4c10d5c6606964d6d7bf5f1e)
#### [v0.22.0](https://github.com/CookPete/react-player/compare/v0.21.0...v0.22.0)

@@ -9,0 +17,0 @@ > 3 September 2017

55

index.d.ts
import * as React from 'react';
export interface SourceProps {
src: string;
type: string;
}
export interface TrackProps {
kind: string;
src: string;
srcLang: string;
default?: boolean;
}
export interface ReactPlayerProps {
url?: string|array;
url?: string|string[]|SourceProps[];
playing?: boolean;

@@ -19,33 +31,32 @@ loop?: boolean;

soundcloudConfig?: {
clientId: string,
showArtwork: boolean
options: Object;
};
youtubeConfig?: {
playerVars: Object,
preload: boolean
playerVars: Object;
preload: boolean;
};
facebookConfig?: {
appId: string
appId: string;
};
dailymotionConfig?: {
params: Object,
preload: boolean
}),
params: Object;
preload: boolean;
};
vimeoConfig?: {
iframeParams: Object,
preload: boolean
iframeParams: Object;
preload: boolean;
};
vidmeConfig?: {
format: string
}),
format: string;
};
fileConfig?: {
attributes: Object,
tracks: array,
forceAudio: boolean,
forceHLS: boolean,
forceDASH: boolean
}),
attributes: Object;
tracks: TrackProps[];
forceAudio: boolean;
forceHLS: boolean;
forceDASH: boolean;
};
wistiaConfig?: {
options: Object
}),
options: Object;
};
onReady?(): void;

@@ -63,4 +74,4 @@ onStart?(): void;

export default class ReactPlayer extends React.Component<ReactPlayerProps, any>{
export default class ReactPlayer extends React.Component<ReactPlayerProps, any> {
seekTo(fraction: number): void;
}

194

lib/players/SoundCloud.js

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

@@ -16,12 +18,8 @@

var _fetchJsonp = require('fetch-jsonp');
var _Base2 = require('./Base');
var _fetchJsonp2 = _interopRequireDefault(_fetchJsonp);
var _Base3 = _interopRequireDefault(_Base2);
var _FilePlayer2 = require('./FilePlayer');
var _utils = require('../utils');
var _FilePlayer3 = _interopRequireDefault(_FilePlayer2);
var _props3 = require('../props');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

@@ -35,10 +33,18 @@

var RESOLVE_URL = '//api.soundcloud.com/resolve.json';
var SDK_URL = 'https://w.soundcloud.com/player/api.js';
var SDK_GLOBAL = 'SC';
var MATCH_URL = /^https?:\/\/(soundcloud.com|snd.sc)\/([a-z0-9-_]+\/[a-z0-9-_]+)$/;
var DEFAULT_OPTIONS = {
visual: true, // Undocumented, but makes player fill container and look better
buying: false,
liking: false,
download: false,
sharing: false,
show_comments: false,
show_playcount: false
};
var songData = {}; // Cache song data requests
var SoundCloud = function (_Base) {
_inherits(SoundCloud, _Base);
var SoundCloud = function (_FilePlayer) {
_inherits(SoundCloud, _FilePlayer);
function SoundCloud() {

@@ -55,6 +61,4 @@ var _ref;

return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SoundCloud.__proto__ || Object.getPrototypeOf(SoundCloud)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
image: null
}, _this.clientId = _this.props.soundcloudConfig.clientId || _props3.defaultProps.soundcloudConfig.clientId, _this.ref = function (player) {
_this.player = player;
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SoundCloud.__proto__ || Object.getPrototypeOf(SoundCloud)).call.apply(_ref, [this].concat(args))), _this), _this.player = null, _this.duration = null, _this.fractionPlayed = null, _this.fractionLoaded = null, _this.ref = function (iframe) {
_this.iframe = iframe;
}, _temp), _possibleConstructorReturn(_this, _ret);

@@ -64,76 +68,112 @@ }

_createClass(SoundCloud, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return _get(SoundCloud.prototype.__proto__ || Object.getPrototypeOf(SoundCloud.prototype), 'shouldComponentUpdate', this).call(this, nextProps, nextState) || this.state.image !== nextState.image;
}
}, {
key: 'getSongData',
value: function getSongData(url) {
key: 'load',
value: function load(url) {
var _this2 = this;
if (songData[url]) {
return Promise.resolve(songData[url]);
}
return (0, _fetchJsonp2['default'])(RESOLVE_URL + '?url=' + url + '&client_id=' + this.clientId).then(function (response) {
if (response.ok) {
songData[url] = response.json();
return songData[url];
} else {
_this2.props.onError(new Error('SoundCloud track could not be resolved'));
(0, _utils.getSDK)(SDK_URL, SDK_GLOBAL).then(function (SC) {
var _SC$Widget$Events = SC.Widget.Events,
PLAY = _SC$Widget$Events.PLAY,
PLAY_PROGRESS = _SC$Widget$Events.PLAY_PROGRESS,
PAUSE = _SC$Widget$Events.PAUSE,
FINISH = _SC$Widget$Events.FINISH,
ERROR = _SC$Widget$Events.ERROR;
if (!_this2.isReady) {
_this2.player = SC.Widget(_this2.iframe);
}
_this2.player.load(url, _extends({}, DEFAULT_OPTIONS, _this2.props.soundcloudConfig.options, {
callback: function callback() {
_this2.player.getDuration(function (duration) {
_this2.duration = duration / 1000;
_this2.onReady();
});
_this2.player.bind(PLAY, _this2.onPlay);
_this2.player.bind(PLAY_PROGRESS, function (e) {
_this2.fractionPlayed = e.relativePosition;
_this2.fractionLoaded = e.loadedProgress;
});
_this2.player.bind(PAUSE, function () {
return _this2.props.onPause();
});
_this2.player.bind(FINISH, function () {
return _this2.props.onEnded();
});
_this2.player.bind(ERROR, function (e) {
return _this2.props.onError(e);
});
}
}));
});
}
}, {
key: 'load',
value: function load(url) {
var _this3 = this;
key: 'call',
value: function call(method) {
var _player;
var _props = this.props,
soundcloudConfig = _props.soundcloudConfig,
onError = _props.onError;
if (!this.isReady || !this.player || !this.player[method]) return;
this.stop();
this.getSongData(url).then(function (data) {
if (!_this3.mounted) return;
if (!data.streamable) {
onError(new Error('SoundCloud track is not streamable'));
return;
}
var image = data.artwork_url || data.user.avatar_url;
if (image && soundcloudConfig.showArtwork) {
_this3.setState({ image: image.replace('-large', '-t500x500') });
}
_this3.player.src = data.stream_url + '?client_id=' + _this3.clientId;
}, onError);
for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
return (_player = this.player)[method].apply(_player, args);
}
}, {
key: 'play',
value: function play() {
this.call('play');
}
}, {
key: 'pause',
value: function pause() {
this.call('pause');
}
}, {
key: 'stop',
value: function stop() {
this.pause();
this.call('seekTo', 0);
}
}, {
key: 'seekTo',
value: function seekTo(amount) {
var seconds = _get(SoundCloud.prototype.__proto__ || Object.getPrototypeOf(SoundCloud.prototype), 'seekTo', this).call(this, amount);
this.call('seekTo', seconds * 1000);
}
}, {
key: 'setVolume',
value: function setVolume(fraction) {
this.call('setVolume', fraction * 100);
}
}, {
key: 'setPlaybackRate',
value: function setPlaybackRate() {}
}, {
key: 'getDuration',
value: function getDuration() {
return this.duration;
}
}, {
key: 'getFractionLoaded',
value: function getFractionLoaded() {
return this.fractionLoaded;
}
}, {
key: 'getFractionPlayed',
value: function getFractionPlayed() {
return this.fractionPlayed;
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props,
url = _props2.url,
loop = _props2.loop,
controls = _props2.controls;
var style = {
display: url ? 'block' : 'none',
height: '100%',
backgroundImage: this.state.image ? 'url(' + this.state.image + ')' : null,
backgroundSize: 'cover',
backgroundPosition: 'center'
width: '100%',
height: '100%'
};
return _react2['default'].createElement(
'div',
{ style: style },
_react2['default'].createElement('audio', {
ref: this.ref,
type: 'audio/mpeg',
preload: 'auto',
style: {
width: '100%',
height: '100%'
},
controls: controls,
loop: loop
})
);
return _react2['default'].createElement('iframe', {
ref: this.ref,
src: 'https://w.soundcloud.com/player/?url=' + encodeURIComponent(this.props.url),
style: style,
frameBorder: 0
});
}

@@ -148,5 +188,5 @@ }], [{

return SoundCloud;
}(_FilePlayer3['default']);
}(_Base3['default']);
SoundCloud.displayName = 'SoundCloud';
exports['default'] = SoundCloud;

10

lib/props.js

@@ -38,4 +38,5 @@ 'use strict';

soundcloudConfig: shape({
clientId: string,
showArtwork: bool
options: object,
legacy: bool,
clientId: string
}),

@@ -95,4 +96,5 @@ youtubeConfig: shape({

soundcloudConfig: {
clientId: 'e8b6f84fbcad14c301ca1355cae1dea2',
showArtwork: true
options: {},
legacy: false,
clientId: 'e8b6f84fbcad14c301ca1355cae1dea2'
},

@@ -99,0 +101,0 @@ youtubeConfig: {

13

lib/ReactPlayer.js

@@ -29,2 +29,6 @@ 'use strict';

var _SoundCloudLegacy = require('./players/SoundCloudLegacy');
var _SoundCloudLegacy2 = _interopRequireDefault(_SoundCloudLegacy);
var _Vimeo = require('./players/Vimeo');

@@ -172,3 +176,4 @@

vimeoConfig = _props.vimeoConfig,
dailymotionConfig = _props.dailymotionConfig;
dailymotionConfig = _props.dailymotionConfig,
soundcloudConfig = _props.soundcloudConfig;

@@ -179,3 +184,7 @@ var players = [];

} else if (_SoundCloud2['default'].canPlay(url)) {
players.push(_SoundCloud2['default']);
if (soundcloudConfig.legacy) {
players.push(_SoundCloudLegacy2['default']);
} else {
players.push(_SoundCloud2['default']);
}
} else if (_Vimeo2['default'].canPlay(url)) {

@@ -182,0 +191,0 @@ players.push(_Vimeo2['default']);

40

package.json
{
"name": "react-player",
"version": "0.22.0",
"version": "0.23.0",
"description": "A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo and Wistia",

@@ -9,9 +9,8 @@ "main": "lib/ReactPlayer.js",

"clean": "rimraf lib demo",
"build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"build:browser": "cross-env NODE_ENV=production webpack --config webpack.config.browser.js",
"build:demo": "npm run clean && npm run build:webpack && cp index.html demo",
"build:demo": "cross-env NODE_ENV=production webpack --config webpack.production.babel.js",
"build:browser": "cross-env NODE_ENV=production webpack --config webpack.browser.babel.js",
"build:compile": "cross-env NODE_ENV=production babel src -d lib --ignore src/demo",
"start": "node server.js",
"start": "webpack-dev-server",
"lint": "standard --verbose | snazzy",
"test": "karma start test/karma.config.js",
"test": "babel-node ./node_modules/karma/bin/karma start test/karma.config.js",
"preversion": "npm run lint",

@@ -51,3 +50,3 @@ "version": "npm run update-changelog && npm run build:browser && git add CHANGELOG.md dist",

"auto-changelog": "^0.3.1",
"babel-cli": "^6.16.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.16.0",

@@ -61,3 +60,2 @@ "babel-eslint": "^7.0.0",

"babel-preset-react": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.16.0",

@@ -69,5 +67,4 @@ "chai": "^4.0.2",

"exports-loader": "^0.6.3",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^3.0.0",
"json-loader": "^0.5.4",
"html-webpack-plugin": "^2.30.1",
"karma": "^1.3.0",

@@ -84,5 +81,5 @@ "karma-chai": "^0.1.0",

"node-sass": "^4.1.1",
"normalize.css": "^7.0.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-hot-loader": "3.0.0-beta.7",
"rimraf": "^2.5.4",

@@ -95,4 +92,3 @@ "sass-loader": "^6.0.1",

"webpack": "^3.3.0",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2",
"webpack-dev-server": "^2.7.1",
"whatwg-fetch": "^2.0.1"

@@ -106,2 +102,20 @@ },

},
"babel": {
"presets": [
"es2015",
"stage-0",
"react"
],
"plugins": [
"react-hot-loader/babel"
],
"env": {
"production": {
"plugins": [
"transform-es3-member-expression-literals",
"transform-es3-property-literals"
]
}
}
},
"standard": {

@@ -108,0 +122,0 @@ "parser": "babel-eslint",

4

README.md

@@ -114,3 +114,3 @@ ReactPlayer

---- | -----------
`soundcloudConfig` | Configuration object for the SoundCloud player.<br />Set `clientId` to your own SoundCloud app [client ID](https://soundcloud.com/you/apps).<br />Set `showArtwork` to `false` to not load any artwork to display.
`soundcloudConfig` | Configuration object for the SoundCloud player.<br />Set `options` to override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params).<br />Set `legacy` to `true` to use the legacy player.<br />Set `clientId` to your own SoundCloud app [client ID](https://soundcloud.com/you/apps) if using the legacy player.
`vimeoConfig` | Configuration object for the Vimeo player.<br />Set `iframeParams` to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters).<br />Set `preload` for [preloading](#preloading).

@@ -179,3 +179,3 @@ `youtubeConfig` | Configuration object for the YouTube player.<br />Set `playerVars` to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5).<br />Set `preload` for [preloading](#preloading).

* Facebook videos use the [Facebook Embedded Video Player API](https://developers.facebook.com/docs/plugins/embedded-video-player/api)
* Soundcloud tracks are [resolved](https://developers.soundcloud.com/docs/api/reference#resolve) and played in an [`<audio>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) element using the track’s `stream_url`
* SoundCloud tracks use the [SoundCloud Widget API](https://developers.soundcloud.com/docs/api/html5-widget)
* Streamable videos are [resolved](https://streamable.com/documentation#retrieve-video) and played in a [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) element using the track’s `mp4` path

@@ -182,0 +182,0 @@ * Vidme videos are [resolved](https://docs.vid.me/#api-Video-DetailByURL) and played in a [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) element using the track’s `complete_url` path

.babelrc
.travis.yml

Sorry, the diff of this file is not supported yet

dist/ReactPlayer.js

Sorry, the diff of this file is too big to display

dist/ReactPlayer.js.map

Sorry, the diff of this file is not supported yet

index.html

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc