react-jplayer - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

lib/components/media/mediaContainer.js

@@ -101,3 +101,2 @@ 'use strict';
         playHeadPercent: _propTypes2.default.number.isRequired,
-        paused: _propTypes2.default.bool.isRequired,
         setOption: _propTypes2.default.func.isRequired,
@@ -121,2 +120,3 @@ pause: _propTypes2.default.func.isRequired,
         /* eslint-disable react/no-unused-prop-types */
+        paused: _propTypes2.default.bool.isRequired,
         newTime: _propTypes2.default.number,
@@ -360,8 +360,6 @@ loop: _propTypes2.default.bool.isRequired,
 
-      if (nextProps.paused !== this.props.paused) {
-        if (nextProps.paused) {
-          this.currentMedia.pause();
-        } else {
-          this.currentMedia.play();
-        }
+      if (nextProps.paused) {
+        this.currentMedia.pause();
+      } else {
+        this.currentMedia.play();
       }
@@ -368,0 +366,0 @@ }

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.BrowserUnsupported = exports.CurrentTime = exports.Duration = exports.Download = exports.VolumeBarValue = exports.VolumeBar = exports.PlaybackRateBarValue = exports.PlaybackRateBar = exports.Repeat = exports.Play = exports.Mute = exports.FullScreen = exports.Title = exports.Audio = exports.Video = exports.Poster = exports.BufferBar = exports.PlayBar = exports.SeekBar = exports.Gui = exports.JPlayer = exports.connect = exports.actions = exports.reducer = exports.initialState = exports.constants = undefined;
+exports.BrowserUnsupported = exports.CurrentTime = exports.Duration = exports.Download = exports.VolumeBarValue = exports.VolumeBar = exports.PlaybackRateBarValue = exports.PlaybackRateBar = exports.Repeat = exports.Play = exports.Mute = exports.FullScreen = exports.Title = exports.Audio = exports.Video = exports.Poster = exports.BufferBar = exports.PlayBar = exports.SeekBar = exports.Gui = exports.connect = exports.actions = exports.reducer = exports.initialState = exports.constants = undefined;
 
@@ -119,2 +119,3 @@ var _initialState = require('./initialState/initialState');
 
+exports.default = _jPlayerContainer2.default;
 exports.constants = constants;
@@ -125,3 +126,2 @@ exports.initialState = _initialState2.default;
 exports.connect = _connect2.default;
-exports.JPlayer = _jPlayerContainer2.default;
 exports.Gui = _guiContainer2.default;
@@ -128,0 +128,0 @@ exports.SeekBar = _seekBarContainer2.default;

package.json

 {
   "name": "react-jplayer",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Html5 audio and video player library for React",
@@ -29,3 +29,3 @@ "author": "Martin Dawson <[e-mail]>",
   "license": "MIT",
-  "main": "./src/index.js",
+  "main": "./lib/index.js",
   "files": [
@@ -32,0 +32,0 @@ "dist",

README.md

@@ -8,15 +8,13 @@ [![Build Status](https://travis-ci.org/MartinDawson/react-jPlayer.svg?branch=master)](https://travis-ci.org/MartinDawson/react-jPlayer)
 # react-jPlayer
-A Html5 audio/video player that has been inspired by the [jQuery](http://jquery.com/) plugin [jPlayer](http://jplayer.org/) but without the jQuery dependency and much, much better.
+A Html5 audio/video player that has been inspired by the [jQuery](http://jquery.com/) plugin [jPlayer](http://jplayer.org/) but without the jQuery dependency.
 
-react-jPlayer depends on [Redux](https://github.com/reactjs/redux). Redux is a tiny 2KB and is well worth it to keep the react-jPlayer components componentized.
+For playlist functionaility, see [react-jPlaylist](https://github.com/MartinDawson/react-jPlaylist).
 
-jPlayer does not support playlists yet. This will be coming in an upcoming npm package called react-jPlaylist.
-
 <!-- toc -->
 
   * [Live Demo](#live-demo)
+  * [Examples](#examples)
   * [Installation](#installation)
     + [NPM](#npm)
     + [UMD](#umd)
-  * [Examples](#examples)
   * [Features](#features)
@@ -26,5 +24,4 @@ * [To Note](#to-note)
   * [TL:DR](#tldr)
-  * [Most Basic Setup](#most-basic-setup)
 - [Documentation](#documentation)
-    + [`getInitialStates([jPlayers])` : Required](#getinitialstatesjplayers--required)
+    + [`initialState([jPlayers])` : Required](#initialstatejplayers--required)
     + [`reducer` : Required](#reducer--required)
@@ -113,2 +110,5 @@ + [`connect(jPlayer, options)` : Required](#connectjplayer-options--required)
 
+### Examples
+https://github.com/MartinDawson/react-jPlayerExamples
+
 ### Installation
@@ -119,16 +119,14 @@ #### NPM
 #### UMD
-Available from the `/dist/` folder.
-For example, if you copied the `/dist/` folder to a `/packages/jPlayer/` folder at the root of your project then the src tags would look like this:
+The recommended way to use this package is through npm and webpack. However if you insist on including the .js and .css files manually then it is available from the `/dist/` folder.
+For example, if you copied the `/dist/` folder to the root of your project then the src tags would look like this:
 
-`<script src="./packages/jPlayer/dist/js/jPlayer.js"></script>`
+```
+<link rel="stylesheet" type="text/css" href="./dist/css/controls/iconControls.css">
+<link rel="stylesheet" type="text/css" href="./dist/css/sleek.css">
 
-`<script src="./packages/jPlayer/dist/css/jPlayer.css"></script>`
+<script src="./dist/js/jPlayer.js"></script>
+```
 
-`<script src="./packages/jPlayer/dist/css/sleek.css"></script>`
-
 Module is exported to a global variable called `ReactJPlayer`.
 
-### Examples
-https://github.com/MartinDawson/react-jPlayerExamples
-
 ### Features
@@ -165,95 +163,8 @@ * Cross compatible with many legacy different Html5 browsers
 
-### Most Basic Setup
-The examples in the project contain legacy browser, mobile fixes and helpers such as the run-time events and props showing.
-If you just want the most basic setup to get an understanding of jPlayer, you can follow the code below.
-
-jPlayer.css must be included somewhere for jPlayer to work properly.
-If you want the jPlayer to look good you will need to include the examples .less or .css files from src or dist.
-
-```
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { createStore, combineReducers } from 'redux';
-import { getInitialStates, reducer, connect, JPlayer, Gui, SeekBar,
-  Audio, FullScreen, Mute, Play, PlayBar,
-  VolumeBar, Duration, CurrentTime, BrowserUnsupported,
- } from 'react-jplayer';
-
-/* Our stateless jPlayer component. This function holds everything to do with the jPlayer components. 
-If you wanted a video player instead, you could just replace `<Audio />` with `<Video />`
-and provide a video src instead of an audio src as the first element in the options.media.sources. */
-
-const AudioPlayer = () => (
-  <JPlayer className="jp-sleek">
-    <Audio />
-    <Gui>
-      <div className="jp-controls jp-icon-controls">
-        <Play><i className="fa">{/* Icon set in css*/}</i></Play>
-        <div className="jp-progress">
-          <SeekBar>
-            <PlayBar />
-            <CurrentTime />
-            <Duration />
-          </SeekBar>
-        </div>
-        <div className="jp-volume-container">
-          <Mute>
-            <i className="fa">{/* Icon set in css*/}</i>
-          </Mute>
-          <div className="jp-volume-slider">
-            <div className="jp-volume-bar-container">
-              <VolumeBar />
-            </div>
-          </div>
-        </div>
-        <FullScreen><i className="fa fa-expand" /></FullScreen>
-      </div>
-      <BrowserUnsupported />
-    </Gui>
-  </JPlayer>
-);
-
-/* These options will be deep merged with the default jPlayer options so you actually don't 
-even need to specify any apart from the 'media.sources' and 'id' if you just want the default options. */
-
-const options = {
-  id: 'AudioPlayer',
-  verticalVolume: true,
-  media: {
-    sources: {
-      m4a: 'http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a',
-    },
-  },
-};
-
-/* react-jPlayer provides it's own connect function which will return a connected jPlayer. */
-
-const ConnectedAudioPlayer = connect(AudioPlayer, options);
-
-/* We now need to connect our jPlayer to the store now so each of the components inside
-react-jPlayer can talk to each other. This also gives you a `jPlayers` object with the `AudioPlayer` in your redux state. */
-
-const store = createStore(combineReducers(reducer), getInitialStates(ConnectedAudioPlayer));
-
-const App = () => (
-  <ConnectedAudioPlayer />
-);
-
-/* Pass the store to the provider. See Redux for more information. */
-
-ReactDOM.render((
-  <Provider store={store}>
-    <App />
-  </Provider>
-), document.getElementById('app'));
-
-```
-
 ## Documentation
-#### `getInitialStates([jPlayers])` : Required
-Deep merges the static options that you specified on your jPlayer with react-jPlayer's defaults. The result of this must be passed to your stores initial state.
+#### `initialState([jPlayers])` : Required
+Deep merges the options that you passed into the [`connect`](https://github.com/MartinDawson/react-jPlayer#connectjplayer-options--required) function with react-jPlayer's default options. The result of this must be passed to your stores initial state.
 
 **Arguments**
-1. `jPlayer(s)` (array or function): Accepts either an array of jPlayers or a single jPlayer. 
+1. `jPlayers(s)` (array or single react element): Accepts either an array of jPlayers or a single jPlayer. 
 
@@ -265,3 +176,3 @@ **Returns**
 #### `reducer` : Required
-The jPlayer reducer that will be called whenever a jPlayer function is called or dispatched. Must be passed to your store.
+The jPlayer reducer that will be called whenever a jPlayer function is dispatched. Must be passed to your store with the key named 'jPlayer'.
 
@@ -273,3 +184,3 @@ #### `connect(jPlayer, options)` : Required
 1. `jPlayer` (function): Your jPlayer with which to connect to the store.
-2. `options` (object): The options that you want the jPlayer to be initialized with.
+2. `options` (object): The [jPlayer options](https://github.com/MartinDawson/react-jPlayer#options) that you want the jPlayer to be initialized with.
 
@@ -282,3 +193,3 @@ **Returns**
 1. `jPlayer`: The original jPlayer component that you passed in.
-2. `options`: The options that you passed into the `connect()`.
+2. `options`: The jPlayer options that you passed into the `connect()`.
 
@@ -290,9 +201,7 @@ **Renders**
 ### Props
-jPlayer automatically passes the following in to your jPlayer component:
+jPlayer automatically passes the following properties in to your jPlayer component:
 
-- `[id]` (string): The current jPlayer's id that you supplied through the options.
-- [`[...actions]`](https://github.com/MartinDawson/react-jPlayer#actions) (func): The actions that you can call to modify jPlayer properties at runtime.
-- [`options`](https://github.com/MartinDawson/react-jPlayer#options) (object): Options that the jPlayer is using.
-- [`status`](https://github.com/MartinDawson/react-jPlayer#status) (object): Status properties of the jPlayer. Treat these as immutable.
-- [`jPlayers`](https://github.com/MartinDawson/react-jPlayer#jplayers) (object): The other jPlayers can be accessed here. Only available if you actually have multiple jPlayers. The names of the jPlayers are what you specified for each one in [`options.id`](https://github.com/MartinDawson/react-jPlayer#id-string--required).
+- `id` (string): The current jPlaylist's id that you supplied through [`options.id`](https://github.com/MartinDawson/react-jPlayer#id-string--required).
+- [`[...actions]`](https://github.com/MartinDawson/react-jPlayer#actions) (func): The actions that you can call to modify jPlaylist's properties at runtime.
+- `jPlayers` (object): All of the jPlayers options get passed in here. The names of the jPlayers are what you specified for each one in [`options.id`].
 
@@ -326,8 +235,4 @@ #### Actions
 
-**Returns**
-
-(object): All actions return an action creator that is meant to be passed to redux's `dispatch()` unless you are accessing the action from the jPlayer components props in which case you can call it directly as it has already been bound to `dispatch()`.
-
 ##### `setOption(id, key, value)`
-Sets any jPlayer option. Some of the options can be set using the below actions as well as this method, it doesn't matter which one you use as they both do the same thing internally.
+Sets any jPlayer [option](https://github.com/MartinDawson/react-jPlayer#options).
 
@@ -394,6 +299,4 @@ **Arguments**
 #### Options
-You specify these values on a functions static property that must be called `options` as shown in the [example](https://github.com/MartinDawson/react-jPlayer#most-basic-setup). Properties in this object are used to initialize the jPlayer. They are deep merged with the default values.
+These properties are used to initialize the jPlayer. They are deep merged with the default jPlayer options.
 
-Some properties in this object will be updated internally, so do not rely on these options staying the same throughout the jPlayer's lifetime.
-
 ##### `id` (string) : Required
@@ -400,0 +303,0 @@ The unique id of the jPlayer.

src/components/media/mediaContainer.jsx

@@ -64,3 +64,2 @@ import React from 'react';
       playHeadPercent: PropTypes.number.isRequired,
-      paused: PropTypes.bool.isRequired,
       setOption: PropTypes.func.isRequired,
@@ -86,2 +85,3 @@ pause: PropTypes.func.isRequired,
       /* eslint-disable react/no-unused-prop-types */
+      paused: PropTypes.bool.isRequired,
       newTime: PropTypes.number,
@@ -243,8 +243,6 @@ loop: PropTypes.bool.isRequired,
 
-    if (nextProps.paused !== this.props.paused) {
-      if (nextProps.paused) {
-        this.currentMedia.pause();
-      } else {
-        this.currentMedia.play();
-      }
+    if (nextProps.paused) {
+      this.currentMedia.pause();
+    } else {
+      this.currentMedia.play();
     }
@@ -251,0 +249,0 @@ }

src/index.js

@@ -30,5 +30,7 @@ /* eslint-disable max-len */
 
-export { constants, initialState, reducer, actions, connect, JPlayer, Gui, SeekBar, PlayBar,
+export default JPlayer;
+
+export { constants, initialState, reducer, actions, connect, Gui, SeekBar, PlayBar,
   BufferBar, Poster, Video, Audio, Title, FullScreen,
   Mute, Play, Repeat, PlaybackRateBar, PlaybackRateBarValue,
   VolumeBar, VolumeBarValue, Download, Duration, CurrentTime, BrowserUnsupported };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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 risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

180

increased by1.12%

Number of low quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

4

decreased by-90.48%

Worsened metrics

Total package byte prevSize

567937

decreased by-13.17%

Lines of code

12009

decreased by-12.34%

Number of lines in readme file

734

decreased by-11.67%

No dependency changes