移除 draggabilly

packages/artplayer/src/index.js

@@ -1,6 +1,5 @@
 import './style';
 import 'balloon-css/balloon.min.css';
-import Draggabilly from 'draggabilly';
 import validator from 'option-validator';
 import Emitter from './emitter';
 import * as utils from './utils';
@@ -68,10 +67,6 @@ class Artplayer extends Emitter {
         return validator.kindOf;
     }
 
-    static get Draggabilly() {
-        return Draggabilly;
-    }
-
     static get DEFAULTS() {
         return {
             container: '#artplayer',

packages/artplayer/src/player/pipMix.js

@@ -1,5 +1,4 @@
-import Draggabilly from 'draggabilly';
-import { setStyle, append } from '../utils';
+import { append, setStyle } from '../utils';
 
 function nativePip(art, player) {
     const {
@@ -69,56 +68,71 @@ function customPip(art, player) {
     const {
         option,
         i18n,
-        template: { $player, $pipClose, $pipTitle },
-        events: { destroyEvents, proxy },
+        template: { $player, $pipClose, $pipTitle, $pipHeader },
+        events: { proxy },
     } = art;
-    let cachePos = null;
-    let draggie = null;
 
+    let cacheStyle = '';
+    let isDroging = false;
+    let lastPageX = 0;
+    let lastPageY = 0;
+    let lastPlayerLeft = 0;
+    let lastPlayerTop = 0;
+    proxy($pipHeader, 'mousedown', event => {
+        isDroging = true;
+        lastPageX = event.pageX;
+        lastPageY = event.pageY;
+        lastPlayerLeft = player.left;
+        lastPlayerTop = player.top;
+    });
+
+    proxy($pipHeader, 'mousemove', event => {
+        if (isDroging) {
+            $player.classList.add('is-dragging');
+            setStyle($player, 'left', `${lastPlayerLeft + event.pageX - lastPageX}px`);
+            setStyle($player, 'top', `${lastPlayerTop + event.pageY - lastPageY}px`);
+        }
+    });
+
+    proxy(document, 'mouseup', () => {
+        isDroging = false;
+        $player.classList.remove('is-dragging');
+    });
+
+    proxy($pipClose, 'click', () => {
+        player.pip = false;
+        isDroging = false;
+        $player.classList.remove('is-dragging');
+    });
+
+    append($pipTitle, option.title || i18n.get('Mini player'));
     Object.defineProperty(player, 'pip', {
         get() {
             return $player.classList.contains('artplayer-pip');
         },
         set(value) {
             if (value) {
-                if (player.autoSize) {
-                    player.autoSize = false;
-                }
-
-                if (!draggie) {
-                    draggie = new Draggabilly($player, {
-                        handle: '.artplayer-pip-header',
-                    });
-
-                    append($pipTitle, option.title || i18n.get('Mini player'));
-
-                    proxy($pipClose, 'click', () => {
-                        player.pip = false;
-                    });
-
-                    destroyEvents.push(() => {
-                        draggie.destroy();
-                    });
-                } else if (cachePos && cachePos.x !== 0 && cachePos.y !== 0) {
-                    setStyle($player, 'left', `${cachePos.x}px`);
-                    setStyle($player, 'top', `${cachePos.y}px`);
-                }
-
+                player.autoSize = false;
+                cacheStyle = $player.style.cssText;
                 $player.classList.add('artplayer-pip');
+                const $body = document.body;
+                setStyle($player, 'top', `${$body.clientHeight - player.height - 50}px`);
+                setStyle($player, 'left', `${$body.clientWidth - player.width - 50}px`);
                 player.fullscreen = false;
                 player.fullscreenWeb = false;
                 player.aspectRatio = false;
                 player.playbackRate = false;
                 art.emit('pipEnabled');
             } else if (player.pip) {
+                $player.style.cssText = cacheStyle;
                 $player.classList.remove('artplayer-pip');
-                cachePos = draggie.position;
-                setStyle($player, 'left', null);
                 setStyle($player, 'top', null);
+                setStyle($player, 'left', null);
                 player.fullscreen = false;
                 player.fullscreenWeb = false;
                 player.aspectRatio = false;
                 player.playbackRate = false;
+                player.autoSize = true;
                 art.emit('pipExit');
             }
         },

packages/artplayer/src/style/pip.scss

@@ -14,7 +14,7 @@
         justify-content: space-between;
         opacity: 0;
         visibility: hidden;
-        transition: all .2s ease-in-out;
+        transition: all 0.2s ease-in-out;
         .artplayer-pip-title {
             flex: 1;
             padding: 0 10px;
@@ -40,10 +40,11 @@
         z-index: 9999;
         width: 400px;
         height: 225px;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 3px 6px 0 rgba(0,0,0,0.20);
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.2);
 
         .artplayer-pip-header {
             display: flex;
+            user-select: none;
         }
 
         &.artplayer-hover {