fix: optimize drag boundary issue

.eslintrc.js

@@ -14,12 +14,9 @@ module.exports = {
     browser: true,
     commonjs: true,
     jest: true,
+    node: true,
   },
   globals: {
-    __dirname: true,
-    process: true,
-    jest: true,
-    expect: true,
     MediaMetadata: true
   },
   rules: {
@@ -36,7 +33,6 @@ module.exports = {
     'no-sequences': 'error',
     'no-shadow-restricted-names': 'error',
     'no-unneeded-ternary': 'error',
-    //   "no-unused-expressions": "error",
     'no-unused-vars': ['error', { args: 'none' }],
     'no-use-before-define': ['error', 'nofunc'],
     'no-var': 'error',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-jinke-music-player",
-  "version": "4.13.0",
+  "version": "4.13.1",
   "description": "Maybe the best beautiful HTML5 responsive player component for react",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -84,7 +84,7 @@
     "rc-slider": "^9.2.4",
     "rc-switch": "^1.9.0",
     "react-drag-listview": "^0.1.6",
-    "react-draggable": "^4.2.0",
+    "react-draggable": "^4.4.2",
     "react-icons": "^2.2.5"
   },
   "bundlesize": [

src/index.js

@@ -1,5 +1,5 @@
 /**
- * @version 4.12.0
+ * @version 4.13.1
  * @name react-jinke-music-player
  * @description Maybe the best beautiful HTML5 responsive player component for react :)
  * @author Jinke.Li <[email protected]>
@@ -68,6 +68,7 @@ import "rc-switch/assets/index.css";
 const IS_MOBILE = isMobile();
 
 export default class ReactJkMusicPlayer extends PureComponent {
+  isDrag = false;
   initPlayId = ""; //初始播放id
   state = {
     audioLists: [],
@@ -87,7 +88,6 @@ export default class ReactJkMusicPlayer extends PureComponent {
     soundValue: 100,
     moveX: 0,
     moveY: 0,
-    isMove: false,
     loading: false,
     audioListsPanelVisible: false,
     playModelNameVisible: false,
@@ -179,7 +179,6 @@ export default class ReactJkMusicPlayer extends PureComponent {
       mini: "mini",
     };
     this.targetId = "music-player-controller";
-    this.openPanelPeriphery = 1; //移动差值 在 这之间 认为是点击打开panel
 
     //播放模式配置
     this._PLAY_MODE_ = Object.values(PLAY_MODE);
@@ -462,9 +461,9 @@ export default class ReactJkMusicPlayer extends PureComponent {
           <Draggable
             bounds={bounds}
             position={{ x: moveX, y: moveY }}
-            onDrag={this.controllerMouseMove}
-            onStop={this.controllerMouseUp}
-            onStart={this.controllerMouseMove}
+            onDrag={this.onControllerDrag}
+            onStop={this.onControllerDragStop}
+            onStart={this.onControllerDragStart}
           >
             {AudioController}
           </Draggable>
@@ -908,15 +907,13 @@ export default class ReactJkMusicPlayer extends PureComponent {
         this.props.onAudioDownload(baseAudioInfo, transformedDownloadAudioInfo);
     }
   };
-  controllerMouseMove = (e, { deltaX, deltaY }) => {
-    const isMove =
-      Math.abs(deltaX) >= this.openPanelPeriphery ||
-      Math.abs(deltaY) >= this.openPanelPeriphery;
-    this.setState({
-      isMove,
-    });
+  onControllerDrag = () => {
+    this.isDrag = true;
   };
-  controllerMouseUp = (e, { x, y }) => {
+  onControllerDragStart = () => {
+    this.isDrag = false;
+  };
+  onControllerDragStop = (e, { x, y }) => {
     if (
       this.props.showDestroy &&
       this.destroyBtn &&
@@ -925,16 +922,16 @@ export default class ReactJkMusicPlayer extends PureComponent {
       this.onDestroyPlayer();
       return;
     }
-    if (!this.state.isMove) {
+    if (!this.isDrag) {
       if (this.state.isNeedMobileHack) {
         this.loadAndPlayAudio();
         this.setState({ isNeedMobileHack: false });
       }
       this.openPanel();
     }
     this.setState({ moveX: x, moveY: y });
-    return false;
   };
+
   onHandleProgress = (value) => {
     this.audio.currentTime = value;
   };

yarn.lock

@@ -9873,6 +9873,14 @@ react-draggable@^4.2.0:
     classnames "^2.2.5"
     prop-types "^15.6.0"
 
+react-draggable@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.2.tgz#f3cefecee25f467f865144cda0d066e5f05f94a0"
+  integrity sha512-zLQs4R4bnBCGnCVTZiD8hPsHtkiJxgMpGDlRESM+EHQo8ysXhKJ2GKdJ8UxxLJdRVceX1j19jy+hQS2wHislPQ==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-hot-loader@^4.12.20:
   version "4.12.20"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.20.tgz#c2c42362a7578e5c30357a5ff7afa680aa0bef8a"