add auto pip mode

packages/artplayer/src/index.js

@@ -121,6 +121,9 @@ class Artplayer extends Emitter {
             mutex: true,
             fullscreen: false,
             fullscreenWeb: false,
+            miniProgressBar: true,
+            localPreview: true,
+            autoPip: true,
             layers: [],
             contextmenu: [],
             quality: [],

packages/artplayer/src/player/pipMix.js

@@ -2,7 +2,6 @@ import { append, setStyle } from '../utils';
 
 function nativePip(art, player) {
     const {
-        notice,
         template: { $video },
         events: { proxy },
     } = art;
@@ -16,12 +15,10 @@ function nativePip(art, player) {
         set(value) {
             if (value) {
                 $video.requestPictureInPicture().catch(error => {
-                    notice.show(error, true, 3000);
                     throw error;
                 });
             } else {
                 document.exitPictureInPicture().catch(error => {
-                    notice.show(error, true, 3000);
                     throw error;
                 });
             }

packages/artplayer/src/plugins/autoPip.js

@@ -0,0 +1,14 @@
+import { debounce } from '../utils';
+
+export default function autoPip(art) {
+    const { events, player, template } = art;
+    const scrollDebounce = debounce(() => {
+        const { top, height } = template.$player.getBoundingClientRect();
+        if (top + height <= 0 && !player.pip && player.playing) {
+            player.pip = true;
+        } else if (player.pip) {
+            player.pip = false;
+        }
+    }, 300);
+    events.proxy(window, 'scroll', scrollDebounce);
+}

packages/artplayer/src/plugins/index.js

@@ -2,21 +2,31 @@ import { errorHandle, hasOwnProperty } from '../utils';
 import subtitle from './subtitle';
 import localPreview from './localPreview';
 import miniProgressBar from './miniProgressBar';
+import autoPip from './autoPip';
 
 export default class Plugins {
     constructor(art) {
         this.art = art;
         this.id = 0;
 
-        if (art.option.subtitle.url) {
+        const { option } = art;
+
+        if (option.subtitle.url) {
             this.add(subtitle);
         }
 
-        if (!art.option.isLive) {
+        if (!option.isLive && option.miniProgressBar) {
             this.add(miniProgressBar);
         }
 
-        this.add(localPreview);
+        if (option.localPreview) {
+            this.add(localPreview);
+        }
+
+        if (option.pip && option.autoPip) {
+            this.add(autoPip);
+        }
+
         art.option.plugins.forEach(plugin => {
             this.add(plugin);
         });

packages/artplayer/src/scheme/index.js

@@ -30,6 +30,8 @@ export default {
     mutex: 'boolean',
     fullscreen: 'boolean',
     fullscreenWeb: 'boolean',
+    miniProgressBar: 'boolean',
+    localPreview: 'boolean',
     plugins: ['function'],
     whitelist: ['string|function|regexp'],
     layers: [