react-jplayer - npm Package Compare versions

Comparing version 3.3.2 to 3.3.3

lib/components/media/mediaContainer.js

@@ -170,13 +170,5 @@ 'use strict';
 
-    _this.updateMediaStatus = function () {
-      var seekPercent = 0;
+    _this.setDurationText = function () {
       var durationText = '';
 
-      var currentTimeText = (0, _index.convertTime)(_this.currentMedia.currentTime, _this.props.timeFormats);
-      var currentPercentAbsolute = (0, _index.toPercentage)(_this.currentMedia.currentTime, _this.currentMedia.duration);
-
-      if (_this.currentMedia.seekable.length > 0) {
-        seekPercent = (0, _index.toPercentage)(_this.getSeekableEnd(), _this.currentMedia.duration);
-      }
-
       if (_this.props.showRemainingDuration) {
@@ -191,3 +183,22 @@ var timeRemaining = _this.currentMedia.duration - _this.currentMedia.currentTime;
       _this.props.setOption(_this.props.id, 'durationText', durationText);
+    };
+
+    _this.setCurrentTimeText = function () {
+      var currentTimeText = (0, _index.convertTime)(_this.currentMedia.currentTime, _this.props.timeFormats);
+
       _this.props.setOption(_this.props.id, 'currentTimeText', currentTimeText);
+    };
+
+    _this.updateMediaStatus = function () {
+      var seekPercent = 0;
+
+      var currentPercentAbsolute = (0, _index.toPercentage)(_this.currentMedia.currentTime, _this.currentMedia.duration);
+
+      if (_this.currentMedia.seekable.length > 0) {
+        seekPercent = (0, _index.toPercentage)(_this.getSeekableEnd(), _this.currentMedia.duration);
+      }
+
+      _this.setDurationText();
+      _this.setCurrentTimeText();
+
       _this.props.setOption(_this.props.id, 'seekPercent', seekPercent);
@@ -325,2 +336,12 @@ _this.props.setOption(_this.props.id, 'currentPercentRelative', _this.getCurrentPercentRelative());
   }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.showRemainingDuration !== this.props.showRemainingDuration) {
+        this.setDurationText();
+      }
+      if (prevProps.timeFormats !== this.props.timeFormats) {
+        this.setCurrentTimeText();
+      }
+    }
+  }, {
     key: 'render',
@@ -327,0 +348,0 @@ value: function render() {

package.json

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

README.md

@@ -277,5 +277,32 @@ [![Build Status](https://travis-ci.org/MartinDawson/react-jPlayer.svg?branch=master)](https://travis-ci.org/MartinDawson/react-jPlayer)
 **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
+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':
+
+```
+import React from 'react';
+import { connect } from 'react-redux';
+import { actions } from 'react-jplayer';
+
+/* jPlayers is automatically injected into the state if you set followed the setup correctly.
+You can also access your other state properties like usual. */
+
+const mapStateToProps = state => ({
+  showRemainingDuration: state.jPlayers.AudioPlayer.showRemainingDuration,
+});
+
+const SomeRandomFunc = ({ showRemainingDuration, dispatch }) =>
+  <div onClick={() => dispatch(actions.setOption('AudioPlayer', 'showRemainingDuration', !showRemainingDuration))}>
+    Toggle Duration
+  </div>;
+
+export default connect(mapStateToProps)(SomeRandomFunc);
+
+```
+
 **Returns**
@@ -282,0 +309,0 @@

src/components/media/mediaContainer.jsx

@@ -225,2 +225,10 @@ import React from 'react';
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.showRemainingDuration !== this.props.showRemainingDuration) {
+      this.setDurationText();
+    }
+    if (prevProps.timeFormats !== this.props.timeFormats) {
+      this.setCurrentTimeText();
+    }
+  }
   getCurrentPercentRelative = () => {
@@ -239,14 +247,5 @@ let currentPercentRelative = 0;
   getSeekableEnd = () => this.currentMedia.seekable.end(this.currentMedia.seekable.length - 1)
-  updateMediaStatus = () => {
-    let seekPercent = 0;
+  setDurationText = () => {
     let durationText = '';
 
-    const currentTimeText = convertTime(this.currentMedia.currentTime, this.props.timeFormats);
-    const currentPercentAbsolute = toPercentage(this.currentMedia.currentTime,
-      this.currentMedia.duration);
-
-    if (this.currentMedia.seekable.length > 0) {
-      seekPercent = toPercentage(this.getSeekableEnd(), this.currentMedia.duration);
-    }
-
     if (this.props.showRemainingDuration) {
@@ -262,3 +261,21 @@ const timeRemaining = this.currentMedia.duration - this.currentMedia.currentTime;
     this.props.setOption(this.props.id, 'durationText', durationText);
+  }
+  setCurrentTimeText = () => {
+    const currentTimeText = convertTime(this.currentMedia.currentTime, this.props.timeFormats);
+
     this.props.setOption(this.props.id, 'currentTimeText', currentTimeText);
+  }
+  updateMediaStatus = () => {
+    let seekPercent = 0;
+
+    const currentPercentAbsolute = toPercentage(this.currentMedia.currentTime,
+      this.currentMedia.duration);
+
+    if (this.currentMedia.seekable.length > 0) {
+      seekPercent = toPercentage(this.getSeekableEnd(), this.currentMedia.duration);
+    }
+
+    this.setDurationText();
+    this.setCurrentTimeText();
+
     this.props.setOption(this.props.id, 'seekPercent', seekPercent);
@@ -265,0 +282,0 @@ this.props.setOption(this.props.id, 'currentPercentRelative', this.getCurrentPercentRelative());

src/components/media/mediaContainer.spec.jsx

 import React from 'react';
 import expect, { createSpy, spyOn } from 'expect';
 import { mount } from 'enzyme';
+import merge from 'lodash.merge';
 
@@ -176,8 +177,10 @@ import { getJPlayers } from '../../util/common.spec';
 
+    spyOn(instance, 'setDurationText');
+    spyOn(instance, 'setCurrentTimeText');
+
     instance.currentMedia.playbackRate = 0.35;
-
     instance.updateMediaStatus();
 
-    expect(props.setOption).toHaveBeenCalledWith(id, 'durationText', '04:10');
-    expect(props.setOption).toHaveBeenCalledWith(id, 'currentTimeText', '01:30');
+    expect(instance.setDurationText).toHaveBeenCalled();
+    expect(instance.setCurrentTimeText).toHaveBeenCalled();
     expect(props.setOption).toHaveBeenCalledWith(id, 'seekPercent', 8.4);
@@ -202,12 +205,21 @@ expect(props.setOption).toHaveBeenCalledWith(id, 'currentPercentRelative', 428.57142857142856);
 
-  it('updateMediaStatus sets durationText correctly when showRemainingDuration', () => {
-    const { props, instance } = setup({ showRemainingDuration: true });
+  it('sets currentTimeText when timeFormats has changed', () => {
+    const { wrapper, props } = setup();
 
-    instance.updateMediaStatus();
+    wrapper.setProps({ timeFormats: merge({}, defaultOptions.timeFormats, { sepMin: '.' }) });
 
+    expect(props.setOption).toHaveBeenCalledWith(id, 'currentTimeText', '01.30');
+  });
+
+  it('sets durationText correctly when showRemainingDuration is true and has changed', () => {
+    const { wrapper, props } = setup();
+
+    wrapper.setProps({ showRemainingDuration: true });
+
     expect(props.setOption).toHaveBeenCalledWith(id, 'durationText', '-02:40');
   });
 
-  it('updateMediaStatus sets durationText to 00:00 if time remaining is 0', () => {
-    const { props, instance } = setup({ showRemainingDuration: true });
+  it('sets durationText correctly if time remaining is 0 and ' +
+    'showRemainingDuration has changed', () => {
+    const { wrapper, props, instance } = setup();
 
@@ -217,3 +229,3 @@ Object.defineProperty(instance.currentMedia, 'duration', { value: 90 });
 
-    instance.updateMediaStatus();
+    wrapper.setProps({ showRemainingDuration: true });
 
@@ -223,2 +235,10 @@ expect(props.setOption).toHaveBeenCalledWith(id, 'durationText', '00:00');
 
+  it('sets durationText correctly when showRemainingDuration is false and has changed', () => {
+    const { wrapper, props } = setup({ showRemainingDuration: true });
+
+    wrapper.setProps({ showRemainingDuration: false });
+
+    expect(props.setOption).toHaveBeenCalledWith(id, 'durationText', '04:10');
+  });
+
   it('getSeekableEnd gets the end of the seekable time', () => {
@@ -225,0 +245,0 @@ const { instance } = setup();

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

586841

increased by0.6%

Lines of code

12242

increased by0.49%

Number of lines in readme file

829

increased by3.37%

No dependency changes