Socket
Socket
Sign inDemoInstall

react-jplayer

Package Overview
Dependencies
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-jplayer - npm Package Compare versions

Comparing version 3.3.1 to 3.3.2

2

lib/components/bars/seekBar/seekBar.js

@@ -47,5 +47,5 @@ 'use strict';

onTouchStart: _react2.default.PropTypes.func,
children: _react2.default.PropTypes.node.isRequired
children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.element), _react2.default.PropTypes.element]).isRequired
};
exports.default = SeekBar;
{
"name": "react-jplayer",
"version": "3.3.1",
"version": "3.3.2",
"description": "Html5 audio and video player library for React",

@@ -5,0 +5,0 @@ "author": "Martin Dawson <u1356770@unimail.hud.ac.uk>",

@@ -12,3 +12,3 @@ [![Build Status](https://travis-ci.org/MartinDawson/react-jPlayer.svg?branch=master)](https://travis-ci.org/MartinDawson/react-jPlayer)

jPlayer does not support playlists yet. This will be comming in an upcoming npm package called react-jPlaylist.
jPlayer does not support playlists yet. This will be coming in an upcoming npm package called react-jPlaylist.

@@ -27,67 +27,51 @@ <!-- toc -->

+ [`getInitialStates([jPlayers])`](#getinitialstatesjplayers)
- [Arguments](#arguments)
- [Returns](#returns)
+ [`reducer`](#reducer)
+ [`connect(jPlayer)`](#connectjplayer)
- [Arguments](#arguments-1)
- [Returns](#returns-1)
- [Static Properties](#static-properties)
- [Renders](#renders)
* [Actions](#actions)
- [Returns](#returns-2)
+ [`setOption(id, key, value)`](#setoptionid-key-value)
- [Arguments](#arguments-2)
+ [`setMedia(id, media)`](#setmediaid-media)
- [Arguments](#arguments-3)
+ [`clearMedia(id)`](#clearmediaid)
- [Arguments](#arguments-4)
+ [`play(id, [time])`](#playid-time)
- [Arguments](#arguments-5)
+ [`pause(id, [time])`](#pauseid-time)
- [Arguments](#arguments-6)
+ [`setPlayHead(id, percent)`](#setplayheadid-percent)
- [Arguments](#arguments-7)
+ [`setVolume(id, volume)`](#setvolumeid-volume)
- [Arguments](#arguments-8)
+ [`setMute(id, mute)`](#setmuteid-mute)
- [Arguments](#arguments-9)
+ [`focus(id)`](#focusid)
- [Arguments](#arguments-10)
* [Props](#props)
+ [Options](#options)
- [`preload (string)`](#preload-string)
- [`minPlaybackRate (number)`](#minplaybackrate-number)
- [`maxPlaybackRate (number)`](#maxplaybackrate-number)
- [`playbackRate (number)`](#playbackrate-number)
- [`defaultPlaybackRate (number)`](#defaultplaybackrate-number)
- [`bufferColour (string)`](#buffercolour-string)
- [`volume (number)`](#volume-number)
- [`barDrag (bool)`](#bardrag-bool)
- [`guiFadeHoldTime (number)`](#guifadeholdtime-number)
- [`media (object)`](#media-object)
- [`keyBindings: (object)`](#keybindings-object)
- [`showRemainingDuration: (bool)`](#showremainingduration-bool)
- [`muted: (bool)`](#muted-bool)
- [`loop: (bool)`](#loop-bool)
- [`autoplay: (bool)`](#autoplay-bool)
- [`smoothPlayBar: (bool)`](#smoothplaybar-bool)
- [`fullScreen: (bool)`](#fullscreen-bool)
- [`verticalPlaybackRate: (bool)`](#verticalplaybackrate-bool)
- [`verticalVolume: (bool)`](#verticalvolume-bool)
- [`keyEnabled: (bool)`](#keyenabled-bool)
- [`timeFormats: (object)`](#timeformats-object)
- [`preload` (string)](#preload-string)
- [`minPlaybackRate` (number)](#minplaybackrate-number)
- [`maxPlaybackRate` (number)](#maxplaybackrate-number)
- [`playbackRate` (number)](#playbackrate-number)
- [`defaultPlaybackRate` (number)](#defaultplaybackrate-number)
- [`bufferColour` (string)](#buffercolour-string)
- [`volume` (number)](#volume-number)
- [`barDrag` (bool)](#bardrag-bool)
- [`guiFadeHoldTime` (number)](#guifadeholdtime-number)
- [`media` (object)](#media-object)
- [`keyBindings` (object)](#keybindings-object)
- [`showRemainingDuration` (bool)](#showremainingduration-bool)
- [`muted` (bool)](#muted-bool)
- [`loop` (bool)](#loop-bool)
- [`autoplay` (bool)](#autoplay-bool)
- [`smoothPlayBar` (bool)](#smoothplaybar-bool)
- [`fullScreen` (bool)](#fullscreen-bool)
- [`verticalPlaybackRate` (bool)](#verticalplaybackrate-bool)
- [`verticalVolume` (bool)](#verticalvolume-bool)
- [`keyEnabled` (bool)](#keyenabled-bool)
- [`timeFormats` (object)](#timeformats-object)
+ [Status](#status)
- [`mediaSettings: (object)`](#mediasettings-object)
- [`paused: (bool)`](#paused-bool)
- [`seeking: (bool)`](#seeking-bool)
- [`src: (string)`](#src-string)
- [`currentTimeText: (string)`](#currenttimetext-string)
- [`durationText: (string)`](#durationtext-string)
- [`seekPercent: (number)`](#seekpercent-number)
- [`currentPercentRelative: (number)`](#currentpercentrelative-number)
- [`currentPercentAbsolute: (number)`](#currentpercentabsolute-number)
- [`currentTime: (number)`](#currenttime-number)
- [`duration: (number)`](#duration-number)
- [`bufferedTimeRanges: (array)`](#bufferedtimeranges-array)
- [`focused: (bool)`](#focused-bool)
- [`mediaSettings` (object)](#mediasettings-object)
- [`paused` (bool)](#paused-bool)
- [`seeking` (bool)](#seeking-bool)
- [`src` (string)](#src-string)
- [`currentTimeText` (string)](#currenttimetext-string)
- [`durationText` (string)](#durationtext-string)
- [`seekPercent` (number)](#seekpercent-number)
- [`currentPercentRelative` (number)](#currentpercentrelative-number)
- [`currentPercentAbsolute` (number)](#currentpercentabsolute-number)
- [`currentTime` (number)](#currenttime-number)
- [`duration` (number)](#duration-number)
- [`bufferedTimeRanges` (array)`](#bufferedtimeranges-array)
- [`focused` (bool)](#focused-bool)
* [Components](#components)

@@ -101,5 +85,3 @@ + [`JPlayer`](#jplayer)

+ [`Video`](#video)
- [props](#props)
+ [`Audio`](#audio)
- [props](#props-1)
+ [`Title`](#title)

@@ -273,8 +255,9 @@ + [`FullScreen`](#fullscreen)

##### Arguments
1. `jPlayer(s)` (Array or Function): Accepts either an array of jPlayers or a single jPlayer.
**Arguments**
1. `jPlayer(s)` (array or function): Accepts either an array of jPlayers or a single jPlayer.
##### Returns
(Object): The initial state for the jPlayer(s) that needs to be passed to the Redux store.
**Returns**
(object): The initial state for the jPlayer(s) that needs to be passed to the Redux store.
#### `reducer`

@@ -286,23 +269,25 @@ A required object. The jPlayer reducer that will be called whenever a jPlayer function is called or dispatched. Must be passed to your store.

##### Arguments
1. `jPlayer`: (Function)
**Arguments**
1. `jPlayer` (function): Your jPlayer with which to connect to the store.
##### Returns
**Returns**
(function): A function that wraps your jPlayer. This means that you can use Redux original connect to wrap this connect with as well if you wanted to pass aditional Redux data from the store to your jPlayer.
##### Static Properties
**Static Properties**
1. `id`: The id of the jPlayer, this is whatever name you called your jPlayer function. This is passed down as a context so that react-jPlayer can internally know which jPlayer is the current one.
2. `jPlayer`: The original function that you passed in. E.g. if you wanted to read the original jPlayer's options that you specified.
##### Renders
**Renders**
The connected jPlayer. Any additional props that you passed in are passed through to your jPlayer so you can use them as usual.
### Actions
##### Returns
(Object): All actions return an object that are meant to be passed to redux's `dispatch()`.
**Returns**
(object): All actions return an object that are meant to be passed to redux's `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.
##### Arguments
**Arguments**
1. `id` (string): Id of the jPlayer to apply this to.

@@ -315,3 +300,3 @@ 2. `key` (string): The name of the option that you want to set. Specifying nested keys is not supported.

##### Arguments
**Arguments**
1. `id` (string): Id of the jPlayer to apply this to.

@@ -323,3 +308,3 @@ 2. `media` (object): The new media you want to set.

##### Arguments
**Arguments**
1. `id` (string): Id of the jPlayer to apply this to.

@@ -330,3 +315,3 @@

##### Arguments
**Arguments**
1. `id` (string): Id of the jPlayer to apply this to.

@@ -338,3 +323,3 @@ 2. `time` (number): The time that the jPlayer should start playing from, defaults to the current time.

##### Arguments
**Arguments**
1. `id` (string): Id of the jPlayer to apply this to.

@@ -346,3 +331,3 @@ 2. `time` (number): The time that the jPlayer should pause from, defaults to the current time.

##### Arguments
**Arguments**
1. `id` (string): Id of the jPlayer to apply this to.

@@ -354,3 +339,3 @@ 2. `percent` (number): The percent that the play bar should be moved to.

##### Arguments
**Arguments**
1. `id` (string): Id of the jPlayer to apply this to.

@@ -362,3 +347,3 @@ 2. `volume` (number): Value given should be between 0 - 1. The volume will be capped at either 0 or 1 if the value given is outside this range.

##### Arguments
**Arguments**
1. `id` (string): Id of the jPlayer to apply this to.

@@ -370,3 +355,3 @@ 2. `mute` (bool)

##### Arguments
**Arguments**
1. `id` (string): Id of the jPlayer to apply this to.

@@ -380,6 +365,6 @@

##### [`preload (string)`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#attr-preload)
##### [`preload` (string)](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#attr-preload)
Default: "metadata"
##### `minPlaybackRate (number)`
##### `minPlaybackRate` (number)
Default: 0.5

@@ -389,3 +374,3 @@

##### `maxPlaybackRate (number)`
##### `maxPlaybackRate` (number)
Default: 4

@@ -395,9 +380,9 @@

##### [`playbackRate (number)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate)
##### [`playbackRate` (number)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate)
Default: 1.0
##### [`defaultPlaybackRate (number)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate)
##### [`defaultPlaybackRate` (number)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate)
Default: 1.0
##### `bufferColour (string)`
##### `bufferColour` (string)
Default: "#ddd"

@@ -407,6 +392,6 @@

##### [`volume (number)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume)
##### [`volume` (number)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume)
Default: 0.8
##### `barDrag (bool)`
##### `barDrag` (bool)
Default: true

@@ -416,3 +401,3 @@

##### `guiFadeHoldTime (number)`
##### `guiFadeHoldTime` (number)
Default: 3000

@@ -422,3 +407,3 @@

##### `media (object)`
##### `media` (object)
Default:

@@ -446,3 +431,3 @@ ```

##### `keyBindings: (object)`
##### `keyBindings` (object)
Default:

@@ -486,3 +471,3 @@ ```

##### `showRemainingDuration: (bool)`
##### `showRemainingDuration` (bool)
Default: false

@@ -492,12 +477,12 @@

##### [`muted: (bool)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted)
##### [`muted` (bool)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted)
Default: false
##### [`loop: (bool)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop)
##### [`loop` (bool)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop)
Default: false
##### [`autoplay: (bool)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay)
##### [`autoplay` (bool)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay)
Default: false
##### `smoothPlayBar: (bool)`
##### `smoothPlayBar` (bool)
Default: false

@@ -509,3 +494,3 @@

##### `fullScreen: (bool)`
##### `fullScreen` (bool)
Default: false

@@ -517,3 +502,3 @@

##### `verticalPlaybackRate: (bool)`
##### `verticalPlaybackRate` (bool)
Default: false

@@ -523,3 +508,3 @@

##### `verticalVolume: (bool)`
##### `verticalVolume` (bool)
Default: false

@@ -529,3 +514,3 @@

##### `keyEnabled: (bool)`
##### `keyEnabled` (bool)
Default: true

@@ -535,3 +520,3 @@

##### `timeFormats: (object)`
##### `timeFormats` (object)
Defines the display format of the currentTime and duration times.

@@ -576,3 +561,3 @@

##### `mediaSettings: (object)`
##### `mediaSettings` (object)
Default:

@@ -586,17 +571,16 @@ ```

```
&ensp;&ensp;`video` (bool): renders the audio or video and is automatically determined by the media you specify.
&ensp;&ensp;`video: (bool)` renders the audio or video and is automatically determined by the media you specify.
&ensp;&ensp;`foundSupported` (bool): true if any valid media can be played.
&ensp;&ensp;`foundSupported: (bool)` true if any valid media can be played.
&ensp;&ensp;`formats` (array: objects)
&ensp;&ensp;`formats: (array: objects)`
&ensp;&ensp;&ensp;&ensp;`supplied: (string)` the type of media you supplied in the `media.sources` options, e.g. `mp3`.
&ensp;&ensp;&ensp;&ensp;`supplied` (string): the type of media you supplied in the `media.sources` options, e.g. `mp3`.
&ensp;&ensp;&ensp;&ensp;`supported: (bool)` true if the media can be played, the same as `foundSupported` but for each media type.
&ensp;&ensp;&ensp;&ensp;`supported` (bool): true if the media can be played, the same as `foundSupported` but for each media type.
##### [`paused: (bool)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused)
##### [`paused` (bool)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused)
Default: true
##### `seeking: (bool)`
##### `seeking` (bool)
Default: false

@@ -606,3 +590,3 @@

##### `src: (string)`
##### `src` (string)
Default: ''

@@ -612,3 +596,3 @@

##### `currentTimeText: (string)`
##### `currentTimeText` (string)
Default: '0:00'

@@ -618,3 +602,3 @@

##### `durationText: (string)`
##### `durationText` (string)
Default: ''

@@ -624,3 +608,3 @@

##### `seekPercent: (number)`
##### `seekPercent` (number)
Default: 0

@@ -630,3 +614,3 @@

##### `currentPercentRelative: (number)`
##### `currentPercentRelative` (number)
Default: 0

@@ -636,3 +620,3 @@

##### `currentPercentAbsolute: (number)`
##### `currentPercentAbsolute` (number)
Default: 0

@@ -642,14 +626,14 @@

##### [`currentTime: (number)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime)
##### [`currentTime` (number)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime)
Default: 0
##### [`duration: (number)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration)
##### [`duration` (number)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration)
Default: 0
##### `bufferedTimeRanges: (array)`
##### `bufferedTimeRanges` (array)`
Default: []
&ensp;&ensp;`start: (string)` the start time, in seconds of where the media is buffering.
&ensp;&ensp;`start` (string): the start time, in seconds of where the media is buffering.
&ensp;&ensp;`end: (string)` the end time, in seconds of where the media is buffering.
&ensp;&ensp;`end` (string): the end time, in seconds of where the media is buffering.

@@ -660,3 +644,3 @@ The start and end of where the buffering has occured. If the user seeks to different parts of the media, then the browser will automatically start downloading from that position and skip the media in between if it hasn't already been downloaded. The properties in this array represent that and are used internally by the [`BufferBar`](https://github.com/MartinDawson/react-jPlayer#bufferbar-) component.

##### `focused: (bool)`
##### `focused` (bool)
Default: false

@@ -670,23 +654,52 @@

### Components
All components accept custom props that will be applied as attributes to the component if the names don't conflict with existing properties.
If the names do conflict then the custom props will overwrite any existing props that are used on that component internally, including event handlers. The exception to this is the property `className` for the `JPlayer` component.
E.g. `<Mute aria-haspopup />` will render <div className="jp-mute" aria-haspopup></div>
Specifying `className` for the `JPlayer` component will merge the classes instead of overwriting. The reason for this is that jPlayer internally calculates multiple classes to apply on this component based on the status of the jPlayer, so we don't want to overwrite these.
E.g. `<JPlayer className="jp-sleek" />` will render <div className="jp-jplayer jp-sleek"></div>
#### `JPlayer`
**props**
1. Required: `children` (element or array: elements)`
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.
#### `GUI`
**props**
1. Required: `children` (element or array: elements)`
Should wrap all of the components that the user interacts with. Handles the fading in and out when in full screen mode.
#### `SeekBar`
**props**
1. Required: `children` (element or array: elements)`
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.
#### `PlayBar`
**props**
1. `children` (node)
Shows how much of the media has been played so far.
#### `BufferBar`
**props**
1. `children` (node)
Shows how much of the media has been downloaded so far. This also takes in to consideration the user seeking to multiple points on the media and skipping parts of the media.
#### `Poster`
**props**
1. `children` (node)
The poster to be displayed for the media. Uses `media.poster` as the src for the image.
#### `Video`
##### props
**props**
1. `events` (object): Any of the [React Media Events](https://facebook.github.io/react/docs/events.html#media-events) that you want to listen to.
2. `children` (node)

@@ -696,4 +709,5 @@ If the first media source that you have supplied to `media.sources` is an [video format](https://en.wikipedia.org/wiki/Video_file_format) and it is a valid url that can be played then react-jPlayer will use this component and set the `src` to what you supplied.

#### `Audio`
##### props
**props**
1. `events` (object): Any of the [React Media Events](https://facebook.github.io/react/docs/events.html#media-events) that you want to listen to.
2. `children` (node)

@@ -703,29 +717,63 @@ If the first media source that you have supplied to `media.sources` is an [audio format](https://en.wikipedia.org/wiki/Audio_file_format) and it is a valid url that can be played then react-jPlayer will use this component and set the `src` to what you supplied.

#### `Title`
Renders the media title as `media.artist` - `media.title`.
**props**
1. `children` (string or number)
Default: `media.artist` - `media.title`
#### `FullScreen`
**props**
1. Required: `children` (node)
Handles clicks on this component toggling the full screen of the jPlayer.
#### `Mute`
**props**
1. Required: `children` (node)
Handles clicks on this component toggling the mute of the jPlayer.
#### `Play`
**props**
1. Required: `children` (node)
Handles clicks on this component setting the jPlayer to be paused or playing.
#### `Repeat`
**props**
1. Required: `children` (node)
Handles clicks on this component toggling the looping of the jPlayer.
#### `PlaybackRateBar`
**props**
1. `children` (node)
Default: `PlaybackRateBarValue`
Handles clicks, dragging or touches on this component setting the playback rate of the media.
#### `PlaybackRateBarValue`
**props**
1. `children` (node)
This is used by the `PlaybackRateBar` by default so the majority of applications won't need to use this. Represents the playback rate as the width or height of the component depending on the property `verticalPlaybackRate`.
#### `VolumeBar`
**props**
1. `children` (node)
Default: `VolumeBarValue`
Handles clicks, dragging or touches on this component setting the volume of the media.
#### `VolumeBarValue`
**props**
1. `children` (node)
This is used by the `VolumeBar` by default so the majority of applications won't need to use this. Represents the volume as the width or height of the component depending on the property `verticalVolume`.
#### `Download`
**props**
1. Required: `children` (node)
Handles clicks on this component downloading the media if the `media.free` option is true.

@@ -737,8 +785,29 @@

#### `Duration`
**props**
1. `children` (node)
Default: [durationText](https://github.com/MartinDawson/react-jPlayer#durationtext-string)
Renders the `durationText` of the jPlayer. Renders nothing if the duration hasn't been set yet (i.e IOS until the user manually plays the media).
#### `CurrentTime`
**props**
1. `children` (node)
Default: [durationText](https://github.com/MartinDawson/react-jPlayer#currenttimetext-string)
Renders the `currentTimeText` of the jPlayer.
#### `BrowserUnsupported`
**props**
1. `children` (node)
Default:
```
<div>
<h4>Browser Unsupported</h4>
Your browser does not support this media file.
To play the media you will need to update your browser to a more recent version.
</div>
```
Renders html that tells the user to update their browser if jPlayer doesn't support the specified media file.

@@ -745,0 +814,0 @@

@@ -28,5 +28,8 @@ import React from 'react';

onTouchStart: React.PropTypes.func,
children: React.PropTypes.node.isRequired,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element,
]).isRequired,
};
export default SeekBar;

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

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

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc