mosaic-audio - npm Package Compare versions

Comparing version 0.13.0 to 0.15.0

index.js

@@ -32,3 +32,27 @@ 'use strict';
   sourceDuration: '',
+  propTypes: {
+    source: _react2.default.PropTypes.string.isRequired,
+    playerId: _react2.default.PropTypes.string,
+    playerClass: _react2.default.PropTypes.string,
+    playClass: _react2.default.PropTypes.string,
+    pauseClass: _react2.default.PropTypes.string,
+    timelineClass: _react2.default.PropTypes.string,
+    playheadClass: _react2.default.PropTypes.string,
+    durationClass: _react2.default.PropTypes.string,
+    margin: _react2.default.PropTypes.bool
+  },
 
+  getDefaultProps: function getDefaultProps() {
+    return {
+      playerId: 'mosaic-',
+      playerClass: 'mosaic-player',
+      playClass: 'mosaic-play-button',
+      pauseClass: 'mosaic-pause-button',
+      timelineClass: 'mosaic-timeline',
+      playheadClass: 'mosaic-playhead',
+      durationClass: 'mosaic-duration',
+      margin: true
+    };
+  },
+
   componentDidMount: function componentDidMount() {
@@ -48,3 +72,4 @@ var that = _reactDom2.default.findDOMNode(this);
   clickPercent: function clickPercent(e) {
-    return (e.pageX - this.timeline.offsetLeft) / this.timelineWidth;
+    var positionOffset = this.timeline.offsetParent.offsetLeft + this.timeline.offsetLeft;
+    return (e.pageX - positionOffset) / this.timelineWidth;
   },
@@ -108,3 +133,4 @@
   moveplayhead: function moveplayhead(e) {
-    var newMargLeft = e.pageX - this.timeline.offsetLeft;
+    var positionOffset = this.timeline.offsetParent.offsetLeft + this.timeline.offsetLeft;
+    var newMargLeft = e.pageX - positionOffset;
 
@@ -111,0 +137,0 @@ if (this.props.margin === 'true') {

mosaic.js

 'use strict';
 
-import React from 'react';
+import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
@@ -9,17 +9,41 @@ import _u from './u';
   scrubberClicked : false,
-  duration : '',
-  audioNode : '',
-  playButton : '',
-  playHead : '',
-  timeline : '',
-  timelineWidth : '',
-  sourceDuration : '',
+  duration        : '',
+  audioNode       : '',
+  playButton      : '',
+  playHead        : '',
+  timeline        : '',
+  timelineWidth   : '',
+  sourceDuration  : '',
+  propTypes: {
+    source        : React.PropTypes.string.isRequired,
+    playerId      : React.PropTypes.string,
+    playerClass   : React.PropTypes.string,
+    playClass     : React.PropTypes.string,
+    pauseClass    : React.PropTypes.string,
+    timelineClass : React.PropTypes.string,
+    playheadClass : React.PropTypes.string,
+    durationClass : React.PropTypes.string,
+    margin        : React.PropTypes.bool
+  },
 
+  getDefaultProps : function() {
+    return {
+      playerId      : 'mosaic-',
+      playerClass   : 'mosaic-player',
+      playClass     : 'mosaic-play-button',
+      pauseClass    : 'mosaic-pause-button',
+      timelineClass : 'mosaic-timeline',
+      playheadClass : 'mosaic-playhead',
+      durationClass : 'mosaic-duration',
+      margin        : true
+    }
+  },
+
   componentDidMount : function() {
-    const that = ReactDOM.findDOMNode(this);
-    this.audioNode = that.children[0];
-    this.duration = that.children[1].children[2].children[0];
-    this.playButton = that.children[1].children[0];
-    this.playHead = that.children[1].children[1].children[0];
-    this.timeline = that.children[1].children[1];
+    const that         = ReactDOM.findDOMNode(this);
+    this.audioNode     = that.children[0];
+    this.duration      = that.children[1].children[2].children[0];
+    this.playButton    = that.children[1].children[0];
+    this.playHead      = that.children[1].children[1].children[0];
+    this.timeline      = that.children[1].children[1];
     this.timelineWidth = this.timeline.offsetWidth - this.playHead.offsetWidth;
@@ -32,3 +56,4 @@
   clickPercent : function(e) {
-    return (e.pageX - this.timeline.offsetLeft) / this.timelineWidth;
+    let positionOffset = this.timeline.offsetParent.offsetLeft + this.timeline.offsetLeft;
+    return (e.pageX - positionOffset) / this.timelineWidth;
   },
@@ -92,3 +117,4 @@
   moveplayhead : function(e) {
-    let newMargLeft = e.pageX - this.timeline.offsetLeft;
+    let positionOffset = this.timeline.offsetParent.offsetLeft + this.timeline.offsetLeft;
+    let newMargLeft = e.pageX - positionOffset;
 
@@ -120,3 +146,2 @@ if (this.props.margin === 'true') {
     };
-
   },
@@ -123,0 +148,0 @@

package.json

 {
   "name": "mosaic-audio",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "A React audio wrapper for the HTML media element.",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

15948

increased by8.96%

Lines of code

325

increased by7.26%

Worsened metrics

Number of package files

8

decreased by-11.11%

No dependency changes