移除 draggabilly

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');
             }
         },