mosaic-audio - npm Package Compare versions

Comparing version 0.15.7 to 0.15.8

index.js

@@ -26,7 +26,9 @@ 'use strict';
     durationClass: _react2.default.PropTypes.string,
+    hover: _react2.default.PropTypes.bool,
+    hoverClass: _react2.default.PropTypes.string,
     margin: _react2.default.PropTypes.bool,
-    playerId: _react2.default.PropTypes.string,
-    playerClass: _react2.default.PropTypes.string,
     playClass: _react2.default.PropTypes.string,
     playheadClass: _react2.default.PropTypes.string,
+    playerClass: _react2.default.PropTypes.string,
+    playerId: _react2.default.PropTypes.string,
     pauseClass: _react2.default.PropTypes.string,
@@ -40,18 +42,20 @@ source: _react2.default.PropTypes.string.isRequired,
   scrubberClicked: false,
+  duration: '',
   audioNode: '',
-  duration: '',
   playButton: '',
   playHead: '',
-  sourceDuration: '',
   timeline: '',
   timelineWidth: '',
+  sourceDuration: '',
 
   getDefaultProps: function getDefaultProps() {
     return {
-      margin: true,
       durationClass: 'mosaic-duration',
-      playerId: 'mosaic-',
-      playerClass: 'mosaic-player',
+      hover: false,
+      hoverClass: 'mosaic-hover',
+      margin: false,
       playClass: 'mosaic-play-button',
       playheadClass: 'mosaic-playhead',
+      playerClass: 'mosaic-player',
+      playerId: 'mosaic-',
       pauseClass: 'mosaic-pause-button',
@@ -66,5 +70,6 @@ timelineClass: 'mosaic-timeline',
     this.audioNode = that.children[0];
-    this.duration = that.children[1].children[1].children[1];
+    this.duration = that.children[1].children[1].children[2];
+    this.hover = that.children[1].children[1].children[0];
     this.playButton = that.children[1].children[0];
-    this.playHead = that.children[1].children[1].children[0];
+    this.playHead = that.children[1].children[1].children[1];
     this.timeline = that.children[1].children[1];
@@ -75,4 +80,22 @@ this.timelineWidth = this.timeline.offsetWidth - this.playHead.offsetWidth;
     this.audioNode.addEventListener('timeupdate', this.handlePlayhead, false);
+    this.timeline.addEventListener('mouseover', this.handleHover, false);
   },
 
+  addHover: function addHover(e) {
+    var positionOffset = _u2.default.handleOffsetParent(this.timeline);
+    var newMargLeft = e.pageX - positionOffset;
+
+    if (newMargLeft >= 0 && newMargLeft <= this.timelineWidth) {
+      this.hover.style.width = newMargLeft + 'px';
+    };
+
+    if (newMargLeft < 0) {
+      this.hover.style.width = '0px';
+    };
+
+    if (newMargLeft > this.timelineWidth) {
+      this.hover.style.width = this.timelineWidth + 'px';
+    };
+  },
+
   clickPercent: function clickPercent(e) {
@@ -110,6 +133,13 @@ var positionOffset = _u2.default.handleOffsetParent(this.timeline);
 
+  handleHover: function handleHover() {
+    if (this.props.hover) {
+      this.timeline.addEventListener('mousemove', this.addHover, false);
+      this.timeline.addEventListener('mouseout', this.removeHover, false);
+    };
+  },
+
   handlePlayhead: function handlePlayhead() {
     var playPercent = this.timelineWidth * (this.audioNode.currentTime / this.audioNode.duration);
 
-    if (this.props.margin === true) {
+    if (this.props.margin) {
       this.playHead.style.marginLeft = playPercent + 'px';
@@ -140,7 +170,7 @@ } else {
   moveplayhead: function moveplayhead(e) {
-    var positionOffset = this.timeline.offsetParent.offsetLeft + this.timeline.offsetLeft;
+    var positionOffset = _u2.default.handleOffsetParent(this.timeline);
     var newMargLeft = e.pageX - positionOffset;
     var n = void 0;
 
-    if (this.props.margin === true) {
+    if (this.props.margin) {
       n = this.playHead.style.paddingLeft;
@@ -164,2 +194,6 @@ } else {
 
+  removeHover: function removeHover() {
+    this.hover.style.width = '0px';
+  },
+
   render: function render() {
@@ -181,2 +215,3 @@ return _react2.default.createElement(
           { className: this.props.timelineClass, onMouseDown: this.mouseDown },
+          _react2.default.createElement('div', { className: this.props.hoverClass }),
           _react2.default.createElement('div', { className: this.props.playheadClass, onMouseDown: this.mouseDown }),
@@ -183,0 +218,0 @@ _react2.default.createElement(

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

11513

increased by10.66%

Lines of code

230

increased by14.43%

No dependency changes