添加迷你播放模式

packages/artplayer/src/player/exclusiveInit.js

@@ -1,5 +1,5 @@
 export default function exclusiveInit(art, player) {
-    const props = ['pip', 'fullscreen', 'fullscreenWeb', 'fullscreenRotate'];
+    const props = ['min', 'pip', 'fullscreen', 'fullscreenWeb', 'fullscreenRotate'];
     props.forEach((name) => {
         const event = `${name}Change`;
         art.on(event, (state) => {

packages/artplayer/src/player/index.js

@@ -24,6 +24,7 @@ import autoSizeMix from './autoSizeMix';
 import rectMix from './rectMix';
 import flipMix from './flipMix';
 import lightMix from './lightMix';
+import minMix from './minMix';
 import { proxyPropertys } from '../utils';
 
 export default class Player {
@@ -54,6 +55,7 @@ export default class Player {
         rectMix(art, this);
         flipMix(art, this);
         lightMix(art, this);
+        minMix(art, this);
         proxyPropertys(art, this);
     }
 }

packages/artplayer/src/player/minMix.js

@@ -0,0 +1,74 @@
+import { append, setStyle, addClass, removeClass, hasClass, def } from '../utils';
+
+export default function minMix(art, player) {
+    const {
+        i18n,
+        option,
+        events: { proxy },
+        template: { $player, $minClose, $minTitle, $minHeader },
+    } = art;
+
+    let cacheStyle = '';
+    let isDroging = false;
+    let lastPageX = 0;
+    let lastPageY = 0;
+    let lastPlayerLeft = 0;
+    let lastPlayerTop = 0;
+
+    proxy($minHeader, 'mousedown', (event) => {
+        isDroging = true;
+        lastPageX = event.pageX;
+        lastPageY = event.pageY;
+        lastPlayerLeft = player.left;
+        lastPlayerTop = player.top;
+    });
+
+    proxy(document, 'mousemove', (event) => {
+        if (isDroging) {
+            addClass($player, 'art-is-dragging');
+            setStyle($player, 'left', `${lastPlayerLeft + event.pageX - lastPageX}px`);
+            setStyle($player, 'top', `${lastPlayerTop + event.pageY - lastPageY}px`);
+        }
+    });
+
+    proxy(document, 'mouseup', () => {
+        isDroging = false;
+        removeClass($player, 'art-is-dragging');
+    });
+
+    proxy($minClose, 'click', () => {
+        player.min = false;
+        isDroging = false;
+        removeClass($player, 'art-is-dragging');
+    });
+
+    append($minTitle, option.title || i18n.get('Mini player'));
+
+    def(player, 'min', {
+        get() {
+            return hasClass($player, 'art-min');
+        },
+        set(value) {
+            if (value) {
+                player.autoSize = false;
+                cacheStyle = $player.style.cssText;
+                addClass($player, 'art-min');
+                const $body = document.body;
+                setStyle($player, 'top', `${$body.clientHeight - player.height - 50}px`);
+                setStyle($player, 'left', `${$body.clientWidth - player.width - 50}px`);
+                player.aspectRatio = false;
+                player.playbackRate = false;
+                art.emit('minChange', true);
+            } else if (player.min) {
+                $player.style.cssText = cacheStyle;
+                removeClass($player, 'art-min');
+                setStyle($player, 'top', null);
+                setStyle($player, 'left', null);
+                player.aspectRatio = false;
+                player.playbackRate = false;
+                player.autoSize = option.autoSize;
+                art.emit('minChange', false);
+            }
+        },
+    });
+}

packages/artplayer/src/player/pipMix.js

@@ -59,7 +59,11 @@ function webkitPip(art, player) {
 }
 
 export default function pipMix(art, player) {
-    const { $video } = art.template;
+    const {
+        i18n,
+        notice,
+        template: { $video },
+    } = art;
     if (document.pictureInPictureEnabled) {
         nativePip(art, player);
     } else if ($video.webkitSupportsPresentationMode) {
@@ -69,6 +73,9 @@ export default function pipMix(art, player) {
             get() {
                 return false;
             },
+            set() {
+                notice.show = i18n.get('PIP not supported');
+            },
         });
     }