react-h5-audio-player - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

lib/index.js

@@ -200,15 +200,19 @@ 'use strict';
 
-      // When the user drags the time indicator to a new time
-      audio.addEventListener('seeked', function (e) {
-        _this2.clearListenTrack();
-        _this2.props.onSeeked && _this2.props.onSeeked(e);
-      });
+      var dragX = void 0;
       slider.addEventListener('dragstart', function (e) {
-        var crt = slider.cloneNode(true);
-        e.dataTransfer.setDragImage(crt, 0, 0);
+        if (!_this2.audio.src) {
+          return;
+        }
+        e.dataTransfer.setData('text', 'slider');
+        if (e.dataTransfer.setDragImage) {
+          var crt = slider.cloneNode(true);
+          e.dataTransfer.setDragImage(crt, 0, 0);
+        }
+        _this2.audio.pause();
+        document.addEventListener('dragover', function (event) {
+          event = event || window.event;
+          dragX = event.pageX;
+        });
+        _this2.props.onDragStart && _this2.props.onDragStart(e);
         _this2.setState({ isDragging: true });
-        _this2.props.onDragStart && _this2.props.onDragStart(e);
-        setTimeout(function () {
-          return _this2.audio.pause();
-        }, 0);
       });
@@ -224,7 +228,11 @@
       slider.addEventListener('drag', function (e) {
-        if (e.clientX) {
-          _this2.setState({ dragLeft: e.clientX - _this2.bar.getBoundingClientRect().left });
+        if (!_this2.audio.src) {
+          return;
+        }
+        if (dragX) {
+          _this2.setState({ dragLeft: dragX - _this2.bar.getBoundingClientRect().left });
           _this2.props.onDragMove && _this2.props.onDragMove(e);
         }
       });
+
       slider.addEventListener('touchmove', function (e) {
@@ -236,4 +244,7 @@ _this2.setState({ dragLeft: e.touches[0].clientX - _this2.bar.getBoundingClientRect().left });
       slider.addEventListener('dragend', function (e) {
+        if (!_this2.audio.src) {
+          return;
+        }
         var audio = _this2.audio;
-        audio.currentTime = audio.duration * _this2.state.dragLeft / _this2.bar.offsetWidth;
+        audio.currentTime = audio.duration * _this2.state.dragLeft / _this2.bar.offsetWidth || 0;
         audio.play();
@@ -325,4 +336,2 @@ _this2.setState({ isDragging: false });
 
-      var hidePlayer = this.props.hidePlayer;
-
       var currentTimeMin = Math.floor(this.state.currentTime / 60);
@@ -343,3 +352,3 @@ var currentTimeSec = Math.floor(this.state.currentTime % 60);
         'div',
-        { style: style.audioPlayerWrapper(hidePlayer), className: 'react-h5-audio-player' },
+        { style: style.audioPlayerWrapper(this.props.hidePlayer), className: 'react-h5-audio-player' },
         _react2.default.createElement(
@@ -384,3 +393,4 @@ 'audio',
               },
-              style: style.drag(this.state.dragLeft), id: 'drag'
+              style: style.drag(this.state.dragLeft),
+              id: 'drag'
             })
@@ -431,3 +441,2 @@ ),
   onPlay: _react2.default.PropTypes.func,
-  onSeeked: _react2.default.PropTypes.func,
   onDragStart: _react2.default.PropTypes.func,
@@ -438,5 +447,5 @@ onDragMove: _react2.default.PropTypes.func,
   src: _react2.default.PropTypes.string,
-  controls: _react2.default.PropTypes.bool
+  hidePlayer: _react2.default.PropTypes.bool
 };
 
 exports.default = H5AudioPlayer;

package.json

 {
   "name": "react-h5-audio-player",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A react audio player with progress bar. Mobile compatible.",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

src/index.js

@@ -172,13 +172,19 @@ import React from 'react';
 
-    // When the user drags the time indicator to a new time
-    audio.addEventListener('seeked', (e) => {
-      this.clearListenTrack();
-      this.props.onSeeked && this.props.onSeeked(e);
-    });
+    let dragX;
     slider.addEventListener('dragstart', (e) => {
-      const crt = slider.cloneNode(true);
-      e.dataTransfer.setDragImage(crt, 0, 0);
+      if (!this.audio.src) {
+        return;
+      }
+      e.dataTransfer.setData('text', 'slider');
+      if (e.dataTransfer.setDragImage) {
+        const crt = slider.cloneNode(true);
+        e.dataTransfer.setDragImage(crt, 0, 0);
+      }
+      this.audio.pause();
+      document.addEventListener('dragover', (event) => {
+        event = event || window.event;
+        dragX = event.pageX;
+      });
+      this.props.onDragStart && this.props.onDragStart(e);
       this.setState({ isDragging: true });
-      this.props.onDragStart && this.props.onDragStart(e);
-      setTimeout(() => this.audio.pause(), 0);
     });
@@ -192,7 +198,11 @@
     slider.addEventListener('drag', (e) => {
-      if (e.clientX) {
-        this.setState({ dragLeft: e.clientX - this.bar.getBoundingClientRect().left });
+      if (!this.audio.src) {
+        return;
+      }
+      if (dragX) {
+        this.setState({ dragLeft: dragX - this.bar.getBoundingClientRect().left });
         this.props.onDragMove && this.props.onDragMove(e);
       }
     });
+
     slider.addEventListener('touchmove', (e) => {
@@ -204,4 +214,7 @@ this.setState({ dragLeft: e.touches[0].clientX - this.bar.getBoundingClientRect().left });
     slider.addEventListener('dragend', (e) => {
+      if (!this.audio.src) {
+        return;
+      }
       const audio = this.audio;
-      audio.currentTime = audio.duration * this.state.dragLeft / this.bar.offsetWidth;
+      audio.currentTime = audio.duration * this.state.dragLeft / this.bar.offsetWidth || 0;
       audio.play();
@@ -268,3 +281,2 @@ this.setState({ isDragging: false });
 
-    const { hidePlayer } = this.props;
     let currentTimeMin = Math.floor(this.state.currentTime / 60);
@@ -282,3 +294,3 @@ let currentTimeSec = Math.floor(this.state.currentTime % 60);
     return (
-      <div style={style.audioPlayerWrapper(hidePlayer)} className="react-h5-audio-player">
+      <div style={style.audioPlayerWrapper(this.props.hidePlayer)} className="react-h5-audio-player">
         <audio
@@ -309,3 +321,4 @@ src={this.props.src}
               ref={(ref) => { this.slider = ref; }}
-              style={style.drag(this.state.dragLeft)} id="drag"
+              style={style.drag(this.state.dragLeft)}
+              id="drag"
             />
@@ -337,3 +350,2 @@ </div>
   onPlay: React.PropTypes.func,
-  onSeeked: React.PropTypes.func,
   onDragStart: React.PropTypes.func,
@@ -344,5 +356,5 @@ onDragMove: React.PropTypes.func,
   src: React.PropTypes.string,
-  controls: React.PropTypes.bool,
+  hidePlayer: React.PropTypes.bool,
 };
 
 export default H5AudioPlayer;

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28360

increased by11.52%

Number of package files

6

increased by20%

Lines of code

727

increased by2.83%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

96

increased byInfinity%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes