add autoMin

packages/artplayer/src/events/index.js

@@ -3,6 +3,7 @@ import hoverInit from './hoverInit';
 import mousemoveInit from './mousemoveInit';
 import resizeInit from './resizeInit';
 import gestureInit from './gestureInit';
+import viewInit from './viewInit';
 
 export default class Events {
     constructor(art) {
@@ -18,13 +19,14 @@ export default class Events {
                 mousemoveInit(art, this);
                 resizeInit(art, this);
                 gestureInit(art, this);
+                viewInit(art, this);
             });
         }
     }
 
     proxy(target, name, callback, option = {}) {
         if (Array.isArray(name)) {
-            return name.map(item => this.proxy(target, item, callback, option));
+            return name.map((item) => this.proxy(target, item, callback, option));
         }
 
         target.addEventListener(name, callback, option);
@@ -67,6 +69,6 @@ export default class Events {
     }
 
     destroy() {
-        this.destroyEvents.forEach(event => event());
+        this.destroyEvents.forEach((event) => event());
     }
 }

packages/artplayer/src/events/viewInit.js

@@ -0,0 +1,23 @@
+import { debounce, isInViewport } from '../utils';
+
+export default function viewInit(art, events) {
+    const {
+        player,
+        option: { autoMin },
+        template: { $container },
+    } = art;
+
+    const scrollFn = debounce(() => {
+        art.emit('view', isInViewport($container));
+    }, 200);
+
+    events.proxy(window, 'scroll', () => {
+        scrollFn();
+    });
+
+    art.on('view', (state) => {
+        if (autoMin) {
+            player.min = !state;
+        }
+    });
+}

packages/artplayer/src/index.js

@@ -111,6 +111,7 @@ class Artplayer extends Emitter {
             muted: false,
             autoplay: false,
             autoSize: false,
+            autoMin: false,
             loop: false,
             flip: false,
             playbackRate: false,

packages/artplayer/src/player/minMix.js

@@ -1,9 +1,10 @@
-import { append, setStyle, addClass, removeClass, hasClass, def } from '../utils';
+import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport } from '../utils';
 
 export default function minMix(art, player) {
     const {
         i18n,
         option,
+        storage,
         events: { proxy },
         template: { $player, $minClose, $minTitle, $minHeader },
     } = art;
@@ -26,8 +27,12 @@ export default function minMix(art, player) {
     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`);
+            const top = lastPlayerTop + event.pageY - lastPageY;
+            const left = lastPlayerLeft + event.pageX - lastPageX;
+            setStyle($player, 'top', `${top}px`);
+            setStyle($player, 'left', `${left}px`);
+            storage.set('top', top);
+            storage.set('left', left);
         }
     });
 
@@ -53,13 +58,29 @@ export default function minMix(art, player) {
                 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`);
+                const top = storage.get('top');
+                const left = storage.get('left');
+                if (top && left) {
+                    setStyle($player, 'top', `${top}px`);
+                    setStyle($player, 'left', `${left}px`);
+                    if (!isInViewport($minHeader)) {
+                        storage.del('top');
+                        storage.del('left');
+                        player.min = true;
+                    }
+                } else {
+                    const $body = document.body;
+                    const top = $body.clientHeight - player.height - 50;
+                    const left = $body.clientWidth - player.width - 50;
+                    storage.set('top', top);
+                    storage.set('left', left);
+                    setStyle($player, 'top', `${top}px`);
+                    setStyle($player, 'left', `${left}px`);
+                }
                 player.aspectRatio = false;
                 player.playbackRate = false;
                 art.emit('minChange', true);
-            } else if (player.min) {
+            } else {
                 $player.style.cssText = cacheStyle;
                 removeClass($player, 'art-min');
                 setStyle($player, 'top', null);

packages/artplayer/src/scheme/index.js

@@ -19,6 +19,7 @@ export default {
     muted: 'boolean',
     autoplay: 'boolean',
     autoSize: 'boolean',
+    autoMin: 'boolean',
     loop: 'boolean',
     flip: 'boolean',
     playbackRate: 'boolean',

packages/artplayer/src/storage.js

@@ -5,7 +5,7 @@ export default class Storage {
 
     get(key) {
         const storage = JSON.parse(localStorage.getItem(this.name)) || {};
-        return key ? storage[key] : {};
+        return key ? storage[key] : storage;
     }
 
     set(key, value) {

packages/artplayer/src/utils/dom.js

@@ -64,3 +64,12 @@ export function tooltip(target, msg, pos = 'up') {
     target.setAttribute('aria-label', msg);
     target.setAttribute('data-balloon-pos', pos);
 }
+
+export function isInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+    const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
+    const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
+    return vertInView && horInView;
+}