react-jplayer
Advanced tools
Comparing version 3.2.0 to 3.3.0
@@ -13,3 +13,3 @@ 'use strict'; | ||
var _keyControlContainer = require('../../keyControl/keyControlContainer'); | ||
var _keyControlContainer = require('../keyControl/keyControlContainer'); | ||
@@ -16,0 +16,0 @@ var _keyControlContainer2 = _interopRequireDefault(_keyControlContainer); |
@@ -31,45 +31,8 @@ 'use strict'; | ||
var mapStateToProps = function mapStateToProps(_ref) { | ||
var jPlayers = _ref.jPlayers; | ||
return _extends({}, jPlayers); | ||
}; | ||
var mapStateToProps = function mapStateToProps(_ref2, _ref) { | ||
var jPlayers = _ref2.jPlayers; | ||
var getActions = function getActions(dispatch, id) { | ||
return { | ||
setOption: function setOption(key, value) { | ||
return dispatch((0, _actions.setOption)(id, key, value)); | ||
}, | ||
setMedia: function setMedia(media) { | ||
return dispatch((0, _actions.setMedia)(id, media)); | ||
}, | ||
clearMedia: function clearMedia() { | ||
return dispatch((0, _actions.clearMedia)(id)); | ||
}, | ||
play: function play(time) { | ||
return dispatch((0, _actions.play)(id, time)); | ||
}, | ||
pause: function pause(time) { | ||
return dispatch((0, _actions.pause)(id, time)); | ||
}, | ||
setPlayHead: function setPlayHead(percent) { | ||
return dispatch((0, _actions.setPlayHead)(id, percent)); | ||
}, | ||
setVolume: function setVolume(volume) { | ||
return dispatch((0, _actions.setVolume)(id, volume)); | ||
}, | ||
setMute: function setMute(mute) { | ||
return dispatch((0, _actions.setMute)(id, mute)); | ||
}, | ||
focus: function focus() { | ||
return dispatch((0, _actions.focus)(id)); | ||
} | ||
}; | ||
}; | ||
var id = _ref.id, | ||
props = _objectWithoutProperties(_ref, ['id']); | ||
var mergeProps = function mergeProps(jPlayers, _ref3, _ref2) { | ||
var dispatch = _ref3.dispatch; | ||
var id = _ref2.id, | ||
props = _objectWithoutProperties(_ref2, ['id']); | ||
var newJPlayers = {}; | ||
@@ -94,15 +57,19 @@ | ||
newJPlayers[jPlayerKey] = _extends({}, getActions(dispatch, jPlayerKey), { | ||
newJPlayers[jPlayerKey] = { | ||
options: options, | ||
status: status | ||
}); | ||
}; | ||
}); | ||
var jPlayer = newJPlayers[id], | ||
otherPlayers = _objectWithoutProperties(newJPlayers, [id]); | ||
otherJPlayers = _objectWithoutProperties(newJPlayers, [id]); | ||
var returnedJPlayers = _extends({}, props, jPlayer); | ||
var returnedJPlayers = _extends({}, props, jPlayer, { | ||
id: id | ||
}); | ||
if (Object.keys(otherPlayers).length) { | ||
returnedJPlayers.jPlayers = otherPlayers; | ||
if (Object.keys(otherJPlayers).some(function (otherJPlayer) { | ||
return otherJPlayer; | ||
})) { | ||
returnedJPlayers.jPlayers = otherJPlayers; | ||
} | ||
@@ -113,4 +80,16 @@ | ||
var mapDispatchToProps = { | ||
setOption: _actions.setOption, | ||
setMedia: _actions.setMedia, | ||
clearMedia: _actions.clearMedia, | ||
play: _actions.play, | ||
pause: _actions.pause, | ||
setPlayHead: _actions.setPlayHead, | ||
setVolume: _actions.setVolume, | ||
setMute: _actions.setMute, | ||
focus: _actions.focus | ||
}; | ||
var Connect = function Connect(jPlayer) { | ||
var ConnectedPlayer = (0, _reactRedux.connect)(mapStateToProps, null, mergeProps)(jPlayer); | ||
var ConnectedPlayer = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(jPlayer); | ||
@@ -124,3 +103,3 @@ // IE9 doesn't support fn.name | ||
function ConnectedJPlayer() { | ||
var _ref4; | ||
var _ref3; | ||
@@ -135,3 +114,3 @@ var _temp, _this, _ret; | ||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref4 = ConnectedJPlayer.__proto__ || Object.getPrototypeOf(ConnectedJPlayer)).call.apply(_ref4, [this].concat(args))), _this), _this.getChildContext = function () { | ||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref3 = ConnectedJPlayer.__proto__ || Object.getPrototypeOf(ConnectedJPlayer)).call.apply(_ref3, [this].concat(args))), _this), _this.getChildContext = function () { | ||
return { | ||
@@ -138,0 +117,0 @@ id: playerName |
@@ -40,6 +40,2 @@ 'use strict'; | ||
var _seekBarContainer = require('./components/seekBar/seekBarContainer'); | ||
var _seekBarContainer2 = _interopRequireDefault(_seekBarContainer); | ||
var _playBarContainer = require('./components/playBar/playBarContainer'); | ||
@@ -77,15 +73,19 @@ | ||
var _playbackRateBarContainer = require('./components/playbackRateBar/playbackRateBarContainer'); | ||
var _seekBarContainer = require('./components/bars/seekBar/seekBarContainer'); | ||
var _seekBarContainer2 = _interopRequireDefault(_seekBarContainer); | ||
var _playbackRateBarContainer = require('./components/bars/playbackRateBar/playbackRateBarContainer'); | ||
var _playbackRateBarContainer2 = _interopRequireDefault(_playbackRateBarContainer); | ||
var _playbackRateBarValueContainer = require('./components/playbackRateBarValue/playbackRateBarValueContainer'); | ||
var _playbackRateBarValueContainer = require('./components/bars/playbackRateBarValue/playbackRateBarValueContainer'); | ||
var _playbackRateBarValueContainer2 = _interopRequireDefault(_playbackRateBarValueContainer); | ||
var _volumeBarContainer = require('./components/volumeBar/volumeBarContainer'); | ||
var _volumeBarContainer = require('./components/bars/volumeBar/volumeBarContainer'); | ||
var _volumeBarContainer2 = _interopRequireDefault(_volumeBarContainer); | ||
var _volumeBarValueContainer = require('./components/volumeBarValue/volumeBarValueContainer'); | ||
var _volumeBarValueContainer = require('./components/bars/volumeBarValue/volumeBarValueContainer'); | ||
@@ -92,0 +92,0 @@ var _volumeBarValueContainer2 = _interopRequireDefault(_volumeBarValueContainer); |
{ | ||
"name": "react-jplayer", | ||
"version": "3.2.0", | ||
"version": "3.3.0", | ||
"description": "Html5 audio and video player library for React", | ||
@@ -5,0 +5,0 @@ "author": "Martin Dawson <u1356770@unimail.hud.ac.uk>", |
@@ -95,3 +95,3 @@ [![Build Status](https://travis-ci.org/MartinDawson/react-jPlayer.svg?branch=master)](https://travis-ci.org/MartinDawson/react-jPlayer) | ||
/* All jPlayer options must be defined statically on the jPlayer component. | ||
/* All jPlayer options must be defined statically on the jPlayer component on an object called 'options'. | ||
These options will be deep merged with the default jPlayer options so you actually don't | ||
@@ -98,0 +98,0 @@ even need to specify any apart from the media.sources if you just want the default options. */ |
import React from 'react'; | ||
import KeyControl from '../../keyControl/keyControlContainer'; | ||
import KeyControl from '../keyControl/keyControlContainer'; | ||
@@ -5,0 +5,0 @@ const JPlayer = ({ keyEnabled, setJPlayer, children, ...attributes }) => ( |
@@ -6,3 +6,3 @@ import React from 'react'; | ||
import JPlayer from './jPlayer'; | ||
import KeyControl from '../../keyControl/keyControlContainer'; | ||
import KeyControl from '../keyControl/keyControlContainer'; | ||
@@ -9,0 +9,0 @@ const setup = () => { |
@@ -8,19 +8,3 @@ import React from 'react'; | ||
const mapStateToProps = ({ jPlayers }) => ({ | ||
...jPlayers, | ||
}); | ||
const getActions = (dispatch, id) => ({ | ||
setOption: (key, value) => dispatch(setOption(id, key, value)), | ||
setMedia: media => dispatch(setMedia(id, media)), | ||
clearMedia: () => dispatch(clearMedia(id)), | ||
play: time => dispatch(play(id, time)), | ||
pause: time => dispatch(pause(id, time)), | ||
setPlayHead: percent => dispatch(setPlayHead(id, percent)), | ||
setVolume: volume => dispatch(setVolume(id, volume)), | ||
setMute: mute => dispatch(setMute(id, mute)), | ||
focus: () => dispatch(focus(id)), | ||
}); | ||
const mergeProps = (jPlayers, { dispatch }, { id, ...props }) => { | ||
const mapStateToProps = ({ jPlayers }, { id, ...props }) => { | ||
const newJPlayers = {}; | ||
@@ -46,3 +30,2 @@ | ||
newJPlayers[jPlayerKey] = { | ||
...getActions(dispatch, jPlayerKey), | ||
options, | ||
@@ -53,3 +36,3 @@ status, | ||
const { [id]: jPlayer, ...otherPlayers } = newJPlayers; | ||
const { [id]: jPlayer, ...otherJPlayers } = newJPlayers; | ||
@@ -59,6 +42,7 @@ const returnedJPlayers = { | ||
...jPlayer, | ||
id, | ||
}; | ||
if (Object.keys(otherPlayers).length) { | ||
returnedJPlayers.jPlayers = otherPlayers; | ||
if (Object.keys(otherJPlayers).some(otherJPlayer => otherJPlayer)) { | ||
returnedJPlayers.jPlayers = otherJPlayers; | ||
} | ||
@@ -69,4 +53,16 @@ | ||
const mapDispatchToProps = { | ||
setOption, | ||
setMedia, | ||
clearMedia, | ||
play, | ||
pause, | ||
setPlayHead, | ||
setVolume, | ||
setMute, | ||
focus, | ||
}; | ||
const Connect = (jPlayer) => { | ||
const ConnectedPlayer = connect(mapStateToProps, null, mergeProps)(jPlayer); | ||
const ConnectedPlayer = connect(mapStateToProps, mapDispatchToProps)(jPlayer); | ||
@@ -73,0 +69,0 @@ // IE9 doesn't support fn.name |
@@ -11,4 +11,3 @@ import React from 'react'; | ||
const mapStateToProps = __get__('mapStateToProps'); | ||
const mergeProps = __get__('mergeProps'); | ||
const getActions = __get__('getActions'); | ||
const mapDispatchToProps = __get__('mapDispatchToProps'); | ||
const id = 'jPlayer-1'; | ||
@@ -23,13 +22,2 @@ const jPlayerTwoId = 'jPlayer-2'; | ||
delete jPlayerActions.default; | ||
const getMappedActionsData = (jPlayer = getDefaultJPlayers(1, true).jPlayers[id]) => [ | ||
{ action: 'setOption', args: ['muted', jPlayer.muted] }, | ||
{ action: 'setMedia', args: [jPlayer.media] }, | ||
{ action: 'clearMedia', args: [] }, | ||
{ action: 'play', args: [33] }, | ||
{ action: 'pause', args: [77] }, | ||
{ action: 'setPlayHead', args: [jPlayer.playHeadPercent] }, | ||
{ action: 'setVolume', args: [jPlayer.volume] }, | ||
{ action: 'setMute', args: [jPlayer.muted] }, | ||
{ action: 'focus', args: [] }, | ||
]; | ||
@@ -44,13 +32,6 @@ describe('JPlayerConnect', () => { | ||
it('maps state', () => { | ||
const state = getDefaultJPlayers(2, true); | ||
const expected = mapStateToProps(state); | ||
expect(expected).toEqual(state.jPlayers); | ||
}); | ||
it('merges props with custom props', () => { | ||
it('maps props with custom props', () => { | ||
const customProp = 'test'; | ||
const jPlayers = getDefaultJPlayers().jPlayers; | ||
const expected = mergeProps(jPlayers, { dispatch }, { id, customProp }); | ||
const expected = mapStateToProps({ jPlayers }, { id, customProp }); | ||
@@ -65,3 +46,3 @@ expect(expected).toContain({ | ||
const jPlayers = getDefaultJPlayers().jPlayers; | ||
const expected = mergeProps(jPlayers, { dispatch }, { id, options }); | ||
const expected = mapStateToProps({ jPlayers }, { id, options }); | ||
@@ -73,6 +54,5 @@ expect(expected).toNotContain({ | ||
it('merges current player', () => { | ||
it('maps current player', () => { | ||
const jPlayers = getDefaultJPlayers(1, true).jPlayers; | ||
const expected = mergeProps(jPlayers, { dispatch }, { id }); | ||
const mergedActions = getActions(); | ||
const expected = mapStateToProps({ jPlayers }, { id }); | ||
const status = {}; | ||
@@ -98,12 +78,11 @@ const options = {}; | ||
expect(expected).toEqual({ | ||
...mergedActions, | ||
options, | ||
status, | ||
id, | ||
}); | ||
}); | ||
it('merges other players', () => { | ||
it('maps other players', () => { | ||
const jPlayers = getDefaultJPlayers(3, true).jPlayers; | ||
const expected = mergeProps(jPlayers, { dispatch }, { id: jPlayerTwoId }); | ||
const mergedActions = getActions(); | ||
const expected = mapStateToProps({ jPlayers }, { id: jPlayerTwoId }); | ||
const otherJPlayers = {}; | ||
@@ -131,3 +110,2 @@ | ||
otherJPlayers[jPlayerKey] = { | ||
...mergedActions, | ||
options, | ||
@@ -141,34 +119,6 @@ status, | ||
it('all actions are mapped', () => { | ||
const jPlayers = getDefaultJPlayers().jPlayers; | ||
const mergedProps = mergeProps(jPlayers, { dispatch }, { id }); | ||
expect(mergedProps).toIncludeKeys(Object.keys(jPlayerActions)); | ||
}); | ||
getMappedActionsData().forEach(({ action, args }) => { | ||
const mergedProps = mergeProps(getDefaultJPlayers(3, true).jPlayers, { dispatch }, { id }); | ||
let expectedArgs; | ||
it(`dispatches current jPlayer mapped ${action} action when called`, () => { | ||
expectedArgs = [...args]; | ||
mergedProps[action](...args); | ||
expectedArgs.unshift(id); | ||
expect(dispatch).toHaveBeenCalledWith(actions[action](...expectedArgs)); | ||
it('mapDispatchToProps handles all actions', () => { | ||
expect(mapDispatchToProps).toEqual({ | ||
...jPlayerActions, | ||
}); | ||
it(`dispatches other jPlayers mapped ${action} action when called`, () => { | ||
Object.keys(mergedProps.jPlayers).forEach((key) => { | ||
const jPlayer = mergedProps.jPlayers[key]; | ||
expectedArgs = [...args]; | ||
jPlayer[action](...args); | ||
expectedArgs.unshift(key); | ||
expect(dispatch).toHaveBeenCalledWith(actions[action](...expectedArgs)); | ||
}); | ||
}); | ||
}); | ||
@@ -175,0 +125,0 @@ |
@@ -11,3 +11,2 @@ /* eslint-disable max-len */ | ||
import JPlayer from './components/jPlayer/jPlayerContainer'; | ||
import SeekBar from './components/seekBar/seekBarContainer'; | ||
import PlayBar from './components/playBar/playBarContainer'; | ||
@@ -21,6 +20,7 @@ import BufferBar from './components/bufferBar/bufferBarContainer'; | ||
import Repeat from './components/repeat/repeatContainer'; | ||
import PlaybackRateBar from './components/playbackRateBar/playbackRateBarContainer'; | ||
import PlaybackRateBarValue from './components/playbackRateBarValue/playbackRateBarValueContainer'; | ||
import VolumeBar from './components/volumeBar/volumeBarContainer'; | ||
import VolumeBarValue from './components/volumeBarValue/volumeBarValueContainer'; | ||
import SeekBar from './components/bars/seekBar/seekBarContainer'; | ||
import PlaybackRateBar from './components/bars/playbackRateBar/playbackRateBarContainer'; | ||
import PlaybackRateBarValue from './components/bars/playbackRateBarValue/playbackRateBarValueContainer'; | ||
import VolumeBar from './components/bars/volumeBar/volumeBarContainer'; | ||
import VolumeBarValue from './components/bars/volumeBarValue/volumeBarValueContainer'; | ||
import Download from './components/download/downloadContainer'; | ||
@@ -27,0 +27,0 @@ import Duration from './components/duration/durationContainer'; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
577592
12179