react-jplayer - npm Package Compare versions

Comparing version 3.3.3 to 3.3.4

lib/connect/connect.js

@@ -93,5 +93,2 @@ 'use strict';
 
-  // IE9 doesn't support fn.name
-  var playerName = jPlayer.name === undefined ? jPlayer.toString().match(/^function\s*([^\s(]+)/)[1] : jPlayer.name;
-
   return function (_React$Component) {
@@ -113,3 +110,3 @@ _inherits(ConnectedJPlayer, _React$Component);
         return {
-          id: playerName
+          id: jPlayer.options.id
         };
@@ -122,10 +119,5 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
       value: function render() {
-        return _react2.default.createElement(ConnectedPlayer, _extends({ id: playerName }, this.props));
+        return _react2.default.createElement(ConnectedPlayer, _extends({ id: jPlayer.options.id }, this.props));
       }
     }], [{
-      key: 'id',
-      get: function get() {
-        return playerName;
-      }
-    }, {
       key: 'jPlayer',
@@ -132,0 +124,0 @@ get: function get() {

lib/initialState/getInitialStates.js

@@ -26,3 +26,3 @@ 'use strict';
   newConnectedJPlayers.forEach(function (connectedJPlayer) {
-    jPlayerStates[connectedJPlayer.id] = (0, _lodash2.default)({}, _extends({}, _constants.internalStatus, _constants.defaultStatus, _constants.defaultOptions), connectedJPlayer.jPlayer.options);
+    jPlayerStates[connectedJPlayer.jPlayer.options.id] = (0, _lodash2.default)({}, _extends({}, _constants.internalStatus, _constants.defaultStatus, _constants.defaultOptions), connectedJPlayer.jPlayer.options);
   });
@@ -29,0 +29,0 @@

package.json

 {
   "name": "react-jplayer",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "Html5 audio and video player library for React",
-  "author": "Martin Dawson <[e-mail]>",
+  "author": "Martin Dawson <[e-mail]>",
   "repository": {
@@ -7,0 +7,0 @@ "type": "git",

README.md

@@ -20,21 +20,22 @@ [![Build Status](https://travis-ci.org/MartinDawson/react-jPlayer.svg?branch=master)](https://travis-ci.org/MartinDawson/react-jPlayer)
   * [Examples](#examples)
-  * [Most Basic Setup](#most-basic-setup)
   * [Features](#features)
   * [To Note](#to-note)
-- [Supported browsers](#supported-browsers)
+  * [Supported browsers](#supported-browsers)
+  * [TL:DR](#tldr)
+  * [Most Basic Setup](#most-basic-setup)
 - [Documentation](#documentation)
-    + [`getInitialStates([jPlayers])`](#getinitialstatesjplayers)
-    + [`reducer`](#reducer)
-    + [`connect(jPlayer)`](#connectjplayer)
-  * [Actions](#actions)
-    + [`setOption(id, key, value)`](#setoptionid-key-value)
-    + [`setMedia(id, media)`](#setmediaid-media)
-    + [`clearMedia(id)`](#clearmediaid)
-    + [`play(id, [time])`](#playid-time)
-    + [`pause(id, [time])`](#pauseid-time)
-    + [`setPlayHead(id, percent)`](#setplayheadid-percent)
-    + [`setVolume(id, volume)`](#setvolumeid-volume)
-    + [`setMute(id, mute)`](#setmuteid-mute)
-    + [`focus(id)`](#focusid)
+    + [`getInitialStates([jPlayers])` : Required](#getinitialstatesjplayers--required)
+    + [`reducer` : Required](#reducer--required)
+    + [`connect(jPlayer)` : Required](#connectjplayer--required)
   * [Props](#props)
+    + [Actions](#actions)
+      - [`setOption(id, key, value)`](#setoptionid-key-value)
+      - [`setMedia(id, media)`](#setmediaid-media)
+      - [`clearMedia(id)`](#clearmediaid)
+      - [`play(id, [time])`](#playid-time)
+      - [`pause(id, [time])`](#pauseid-time)
+      - [`setPlayHead(id, percent)`](#setplayheadid-percent)
+      - [`setVolume(id, volume)`](#setvolumeid-volume)
+      - [`setMute(id, mute)`](#setmuteid-mute)
+      - [`focus(id)`](#focusid)
     + [Options](#options)
@@ -74,4 +75,6 @@ - [`preload` (string)](#preload-string)
       - [`duration` (number)](#duration-number)
-      - [`bufferedTimeRanges` (array)`](#bufferedtimeranges-array)
+      - [`bufferedTimeRanges` (array)](#bufferedtimeranges-array)
       - [`focused` (bool)](#focused-bool)
+    + [jPlayers](#jplayers)
+      - [`[nameOfYourjPlayer]` (object)](#nameofyourjplayer-object)
   * [Components](#components)
@@ -137,2 +140,34 @@ + [`JPlayer`](#jplayer)
 
+### Features
+* Cross compatible with many legacy different Html5 browsers
+* Fully customizable, modular and componentized
+* Supports a large range of [Html5 Audio/Video formats](https://github.com/MartinDawson/react-jPlayer#user-content-supported-media-formats)
+* Comes with a fully reponsive css skin for your players
+* No jQuery dependency that is in the standard [jPlayer](http://jplayer.org/)
+* Fast and performant
+
+### To Note
+* No flash player support because flash is dead. I also haven't been able to find a browser that React supports that also didn't support Html5 video/audio players either which makes flash useless.
+* Dependency on [Redux](https://github.com/reactjs/redux)
+
+### Supported browsers
+* Chrome v15+
+* FireFox v15+
+* Edge 13+
+* Internet Explorer 9+
+* Opera v16+
+* Yandex
+* Windows Safari 5.1
+* IOS Safari 5.1+
+* Chrome for Android v36+
+* Android browser 4+
+* IEMobile 11¹
+
+¹partially tested without audio/video because browserstack emulators don't support it.
+
+### TL:DR
+- All of the jPlayer properties that you need are passed into your jPlayer component.
+- Audio/Video events can be subscribed to by passing functions to the `events` props for the [Audio](https://github.com/MartinDawson/react-jPlayer#audio) or [Video](https://github.com/MartinDawson/react-jPlayer#video) component. E.g: ` <audio events={{ play: () => console.log("playing media") }} />`.
+- The id of the jPlayer is the same as the name you declared the jPlayer component as.
+
 ### Most Basic Setup
@@ -224,32 +259,6 @@ The examples in the project contain legacy browser, mobile fixes and helpers such as the run-time events and props showing.
 ```
-### Features
-* Cross compatible with many legacy different Html5 browsers
-* Fully customizable, modular and componentized
-* Supports a large range of [Html5 Audio/Video formats](https://github.com/MartinDawson/react-jPlayer#user-content-supported-media-formats)
-* Comes with a fully reponsive css skin for your players
-* No jQuery dependency that is in the standard [jPlayer](http://jplayer.org/)
-* Fast and performant
 
-### To Note
-* No flash player support because flash is dead. I also haven't been able to find a browser that React supports that also didn't support Html5 video/audio players either which makes flash useless.
-* Dependency on [Redux](https://github.com/reactjs/redux)
-
-## Supported browsers
-* Chrome v15+
-* FireFox v15+
-* Edge 13+
-* Internet Explorer 9+
-* Opera v16+
-* Yandex
-* Windows Safari 5.1
-* IOS Safari 5.1+
-* Chrome for Android v36+
-* Android browser 4+
-* IEMobile 11¹
-
-¹partially tested without audio/video because browserstack emulators don't support it.
-
 ## Documentation
-#### `getInitialStates([jPlayers])`
-A required function that 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.
+#### `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.
 
@@ -263,7 +272,7 @@ **Arguments**
 
-#### `reducer`
-A required object. The jPlayer reducer that will be called whenever a jPlayer function is called or dispatched. Must be passed to your store.
+#### `reducer` : Required
+The jPlayer reducer that will be called whenever a jPlayer function is called or dispatched. Must be passed to your store.
 
-#### `connect(jPlayer)`
-Required to connect your jPlayer to the jPlayer store by wrapping Redux's original connect.
+#### `connect(jPlayer)` : Required
+Connects your jPlayer to the jPlayer store by wrapping Redux's original connect.
 
@@ -285,7 +294,16 @@ **Arguments**
 
-### Actions
+### Props
+jPlayer automatically passes the following in to your jPlayer component:
+
+- `[id]` (string): The current jPlayer's id. This is the same as the name you declared the jPlayer component as.
+- [`[...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.
+
+#### Actions
 All of the actions automatically get passed into your jPlayers for ease of use so you can just call them directly.
 
-If you need to call these actions from another part of your codebase that isn't a jPlayer then it will be easiest to use Redux's `connect()` and call dispatch on the imported action.
-For example, if you wanted to toggle the showRemainingDuration from somewhere else in the application on a jPlayer called 'AudioPlayer':
+If you need to call these actions from another part of your codebase that isn't a jPlayer then it will be best to use Redux's `connect()` on your component and call dispatch on the imported action.
+For example, if you wanted to toggle the `showRemainingDuration` from somewhere else in the application on a jPlayer called `'AudioPlayer'`:
 
@@ -315,6 +333,6 @@ ```
 
-(object): All actions return an object that are meant to be passed to redux's `dispatch()`.
+(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. A few of the other actions are just helpers for modifying the options and could also be modified by this function. You should still use the other actions to modify the option if you can as most do extra logic and error handling. 
+##### `setOption(id, key, value)`
+Sets any jPlayer option. For some properties such as `muted` you can either use this method or `setMute()`. They both do the same thing.
 
@@ -326,3 +344,3 @@ **Arguments**
 
-#### `setMedia(id, media)`
+##### `setMedia(id, media)`
 Sets the media.
@@ -334,3 +352,3 @@
 
-#### `clearMedia(id)`
+##### `clearMedia(id)`
 Clear the media and reset all status values. This will be rarely used, if you are setting new media you **don't** need to use this function beforehand as `setMedia` already internally clears existing values before setting a new media.
@@ -341,3 +359,3 @@
 
-#### `play(id, [time])`
+##### `play(id, [time])`
 Play the media.
@@ -349,3 +367,3 @@
 
-#### `pause(id, [time])`
+##### `pause(id, [time])`
 Pauses the media.
@@ -357,3 +375,3 @@
 
-#### `setPlayHead(id, percent)`
+##### `setPlayHead(id, percent)`
 Moves the play-head to the value specified. This only moves the play-head. Whether the media plays from that point depends on its current state, i.e. If it was playing, play continues from the new play-head. If it was paused, the media is cued to the new play-head position.
@@ -365,3 +383,3 @@
 
-#### `setVolume(id, volume)`
+##### `setVolume(id, volume)`
 Sets the volume.
@@ -373,3 +391,3 @@
 
-#### `setMute(id, mute)`
+##### `setMute(id, mute)`
 Mutes or un-mutes.
@@ -381,3 +399,3 @@
 
-#### `focus(id)`
+##### `focus(id)`
 This method is called internally for each of the other actions if that jPlayer has keyEnabled set to true. You can also manually focus on the jPlayer if it has keyEnabled set to true by calling this method.
@@ -388,3 +406,2 @@
 
-### Props
 #### Options
@@ -640,3 +657,3 @@ 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.
 
-##### `bufferedTimeRanges` (array)`
+##### `bufferedTimeRanges` (array)
 Default: []
@@ -655,7 +672,14 @@
 
-This property determines which jPlayer should take precendance when the user is using key presses to affect the media.
-This is only ever true if the current jPlayer has [`keyEnabled`](https://github.com/MartinDawson/react-jPlayer#keyenabled-bool) set to true.
+This property determines which jPlayer should take precendance when the user is using key presses to affect the media and is only ever true if the current jPlayer has [`keyEnabled`](https://github.com/MartinDawson/react-jPlayer#keyenabled-bool) set to true.
+This is set internally for each action that the user takes on the jPlayer, i.e. each time a jPlayer [action](https://github.com/MartinDawson/react-jPlayer#actions) is called. You can also manually focus on the jPlayer if it has keyEnabled set to true by calling [`focus()`](https://github.com/MartinDawson/react-jPlayer#focusid).
 
-This method is set internally for each action that the user takes on the jPlayer, i.e. each time a jPlayer action is called. You can also manually focus on the jPlayer if it has keyEnabled set to true by calling [`focus`](https://github.com/MartinDawson/react-jPlayer#focusid).
+#### jPlayers
+The other jPlayers get passed into each of your jPlayer components so you can modify or read the properties on these easily as well.
 
+[0...N]
+##### `[nameOfYourjPlayer]` (object)
+
+&ensp;&ensp;[`options`](https://github.com/MartinDawson/react-jPlayer#options)
+&ensp;&ensp;[`status`](https://github.com/MartinDawson/react-jPlayer#status)
+
 ### Components
@@ -674,9 +698,9 @@ All components accept custom props that will be applied as attributes to the component if the names don't conflict with existing properties.
 **props**
-1. Required: `children` (element or array: elements)`
+1. `children` (element or array: elements)` : Required
 
-A required component that needs to be the root of any other jPlayer components. Handles the states that are applied to the jPlayer DOM element.
+This component needs to be at the root of any other jPlayer components. Handles the states that are applied to the jPlayer DOM element.
 
 #### `GUI`
 **props**
-1. Required: `children` (element or array: elements)`
+1. `children` (element or array: elements)` : Required
 
@@ -687,3 +711,3 @@ Should wrap all of the components that the user interacts with. Handles the fading in and out when in full screen mode.
 **props**
-1. Required: `children` (element or array: elements)`
+1. `children` (element or array: elements)` : Required
 
@@ -732,3 +756,3 @@ Should wrap the `PlayBar` and `BufferBar`. Handles the user being able to seek to a new time when the user clicks, drags or touches on the progress bar.
 **props**
-1. Required: `children` (node)
+1. `children` (node) : Required
 
@@ -739,3 +763,3 @@ Handles clicks on this component toggling the full screen of the jPlayer.
 **props**
-1. Required: `children` (node)
+1.`children` (node) : Required
 
@@ -746,3 +770,3 @@ Handles clicks on this component toggling the mute of the jPlayer.
 **props**
-1. Required: `children` (node)
+1. `children` (node) : Required
 
@@ -753,3 +777,3 @@ Handles clicks on this component setting the jPlayer to be paused or playing.
 **props**
-1. Required: `children` (node)
+1. `children` (node) : Required
 
@@ -788,3 +812,3 @@ Handles clicks on this component toggling the looping of the jPlayer.
 **props**
-1. Required: `children` (node)
+1. `children` (node) : Required
 
@@ -791,0 +815,0 @@ Handles clicks on this component downloading the media if the `media.free` option is true.

src/connect/connect.jsx

@@ -64,10 +64,3 @@ import React from 'react';
 
-  // IE9 doesn't support fn.name
-  const playerName = jPlayer.name === undefined ?
-    jPlayer.toString().match(/^function\s*([^\s(]+)/)[1] : jPlayer.name;
-
   return class ConnectedJPlayer extends React.Component {
-    static get id() {
-      return playerName;
-    }
     static get jPlayer() {
@@ -82,6 +75,6 @@ return jPlayer;
     getChildContext = () => ({
-      id: playerName,
+      id: jPlayer.options.id,
     });
     render() {
-      return <ConnectedPlayer id={playerName} {...this.props} />;
+      return <ConnectedPlayer id={jPlayer.options.id} {...this.props} />;
     }
@@ -88,0 +81,0 @@ };

src/connect/connect.spec.jsx

@@ -14,5 +14,5 @@ import React from 'react';
 const jPlayerTwoId = 'jPlayer-2';
-const mockPlayerName = 'MockPlayer';
 const mockPlayerOptions = {
   muted: true,
+  id,
 };
@@ -123,20 +123,6 @@ const dispatch = createSpy();
 
-    expect(wrapper.prop('id')).toBe(mockPlayerName);
+    expect(wrapper.prop('id')).toBe(MockPlayer.options.id);
     expect(wrapper.prop('test')).toBe('test');
   });
 
-  it('sets id if function name is undefined', () => {
-    Object.defineProperty(MockPlayer, 'name', { value: undefined });
-    const Component = connect(MockPlayer);
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.prop('id')).toBe(mockPlayerName);
-  });
-
-  it('component returns id', () => {
-    const Component = connect(MockPlayer);
-
-    expect(Component.id).toBe(mockPlayerName);
-  });
-
   it('component returns original jPlayer', () => {
@@ -143,0 +129,0 @@ const Component = connect(MockPlayer);

src/initialState/getInitialStates.js

@@ -14,3 +14,3 @@ import merge from 'lodash.merge';
   newConnectedJPlayers.forEach((connectedJPlayer) => {
-    jPlayerStates[connectedJPlayer.id] = merge({}, {
+    jPlayerStates[connectedJPlayer.jPlayer.options.id] = merge({}, {
       ...internalStatus,
@@ -17,0 +17,0 @@ ...defaultStatus,

src/initialState/getInitialStates.spec.jsx

@@ -16,5 +16,2 @@ import React from 'react';
     }
-    static get id() {
-      return JPlayer.name;
-    }
     render() {
@@ -28,2 +25,3 @@ return <JPlayer />;
   muted: true,
+  id: 'MockJPlayer',
 };
@@ -33,2 +31,3 @@
   autoplay: true,
+  id: 'MockJPlayerTwo',
 };
@@ -35,0 +34,0 @@

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

Improved metrics

Total package byte prevSize

587633

increased by0.13%

Number of lines in readme file

853

increased by2.9%

Worsened metrics

Lines of code

12211

decreased by-0.25%

No dependency changes