New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
react-spotify-player
Advanced tools
react-spotify-player - npm Package Compare versions
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| // Dimension prop type | ||
| var dimensionPropType = _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.string]); | ||
| // Size presets, defined by Spotify | ||
| /** | ||
| * Spotify player iframe widget | ||
| * | ||
| * @author Alexander Wallin <office@alexanderwallin.com> | ||
| * @see https://developer.spotify.com/technologies/widgets/spotify-play-button/ | ||
| */ | ||
| var sizePresets = { | ||
| large: { | ||
| width: 300, | ||
| height: 380 | ||
| }, | ||
| compact: { | ||
| width: 300, | ||
| height: 80 | ||
| } | ||
| }; | ||
| /** | ||
| * SpotifyPlayer class | ||
| */ | ||
| var SpotifyPlayer = _react2.default.createClass({ | ||
| displayName: 'SpotifyPlayer', | ||
| // ------------------------------------------------------ | ||
| // Component specs & lifecycle | ||
| // ------------------------------------------------------ | ||
| propTypes: { | ||
| // Spotify URI | ||
| uri: _react2.default.PropTypes.string.isRequired, | ||
| // Size as either a preset or as custom dimensions | ||
| size: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.oneOf(['large', 'compact']), _react2.default.PropTypes.shape({ | ||
| width: dimensionPropType, | ||
| height: dimensionPropType | ||
| })]), | ||
| // View | ||
| view: _react2.default.PropTypes.oneOf(['list', 'coverart']), | ||
| // Theme | ||
| theme: _react2.default.PropTypes.oneOf(['black', 'white']) | ||
| }, | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| size: 'large', | ||
| view: 'list', | ||
| theme: 'black' | ||
| }; | ||
| }, | ||
| // ------------------------------------------------------ | ||
| // Render | ||
| // ------------------------------------------------------ | ||
| render: function render() { | ||
| var _props = this.props; | ||
| var uri = _props.uri; | ||
| var view = _props.view; | ||
| var theme = _props.theme; | ||
| var size = this.props.size; | ||
| if (typeof size === 'string') { | ||
| size = sizePresets[size]; | ||
| } | ||
| return _react2.default.createElement('iframe', { | ||
| className: 'SpotifyPlayer', | ||
| src: 'https://embed.spotify.com/?uri=' + uri + '&view=' + view + '&theme=' + theme, | ||
| width: size.width, | ||
| height: size.height, | ||
| frameBorder: '0', | ||
| allowTransparency: 'true' | ||
| }); | ||
| } | ||
| }); | ||
| exports.default = SpotifyPlayer; |
+7
-2
| { | ||
| "name": "react-spotify-player", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "Spotify player widget in React", | ||
| "main": "dist/SpotifyPlayer.js", | ||
| "files": [ | ||
| "dist", | ||
| "src" | ||
| ], | ||
| "scripts": { | ||
@@ -11,3 +15,3 @@ "build": "babel src --out-dir dist", | ||
| "dev:examples": "watchify examples/examples.js -t babelify -o examples/examples.dist.js", | ||
| "lint": "eslint ./**/*.js" | ||
| "lint": "eslint ./src/*.jsx" | ||
| }, | ||
@@ -39,2 +43,3 @@ "repository": { | ||
| "eslint-config-airbnb": "^2.1.1", | ||
| "eslint-plugin-react": "^3.12.0", | ||
| "react": "^0.14.3", | ||
@@ -41,0 +46,0 @@ "react-dom": "^0.14.3", |
-6
| { | ||
| "presets": [ | ||
| "es2015", | ||
| "react" | ||
| ] | ||
| } |
| # editorconfig.org | ||
| root = true | ||
| [*] | ||
| indent_style = space | ||
| indent_size = 2 | ||
| end_of_line = lf | ||
| charset = utf-8 | ||
| trim_trailing_whitespace = true | ||
| insert_final_newline = true | ||
| [*.md] | ||
| trim_trailing_whitespace = true |
| { | ||
| "extends": "airbnb" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>React Spotify Player Examples: Album</title> | ||
| <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> | ||
| <style> | ||
| body { | ||
| background: #fafafa; | ||
| color: #484848; | ||
| font-family: 'Montserrat', sans-serif; | ||
| } | ||
| .wrapper { | ||
| width: 800px; | ||
| margin: 20px auto; | ||
| } | ||
| h3, p { | ||
| margin: 0; | ||
| } | ||
| .player { | ||
| margin-top: 20px; | ||
| background: #f2f2f2; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="wrapper"> | ||
| <h3>The art of staying young and unhurt</h3> | ||
| <p>by Lena Swanberg</p> | ||
| <div class="player"></div> | ||
| </div> | ||
| <script src="examples.dist.js"></script> | ||
| </body> | ||
| </html> |
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import SpotifyPlayer from '../dist/SpotifyPlayer.js'; | ||
| ReactDOM.render( | ||
| <SpotifyPlayer uri="spotify:album:1TIUsv8qmYLpBEhvmBmyBk" size={{width: 800, height: 500}} theme="white" view="view" />, | ||
| document.querySelector('.player') | ||
| ); |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Lines of code
148
87.34%Worsened metrics
- Total package byte prevSize
6684
-87.17%- Dev dependency count
11
10%- Number of package files
4
-63.64%No dependency changes