add autoMin

docs/assets/example/index.js

@@ -10,6 +10,7 @@ var art = new Artplayer({
     autoplay: false,
     pip: true,
     autoSize: true,
+    autoMin: true,
     screenshot: true,
     setting: true,
     loop: true,

docs/document/README.md

@@ -268,6 +268,24 @@ var art = new Artplayer({
 });
 ```
 
+## autoMin
+
+-   Type: `Boolean`
+-   Default: `false`
+
+When the player scrolls out of the viewport, the mini player mode is automatically enabled
+
+[Run Code](/Configuration.autoMin)
+
+```js
+var url = 'https://zhw2590582.github.io/assets-cdn';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    autoMin: true,
+});
+```
+
 ## loop
 
 -   Type: `Boolean`

docs/uncompiled/artplayer.js

@@ -350,6 +350,14 @@
     target.setAttribute('aria-label', msg);
     target.setAttribute('data-balloon-pos', pos);
   }
+  function isInViewport(el) {
+    var rect = el.getBoundingClientRect();
+    var windowHeight = window.innerHeight || document.documentElement.clientHeight;
+    var windowWidth = window.innerWidth || document.documentElement.clientWidth;
+    var vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
+    var horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
+    return vertInView && horInView;
+  }
 
   function _isNativeFunction(fn) {
     return Function.toString.call(fn).indexOf("[native code]") !== -1;
@@ -711,6 +719,7 @@
     sublings: sublings,
     inverseClass: inverseClass,
     tooltip: tooltip,
+    isInViewport: isInViewport,
     ArtPlayerError: ArtPlayerError,
     errorHandle: errorHandle,
     srtToVtt: srtToVtt,
@@ -750,6 +759,7 @@
     muted: 'boolean',
     autoplay: 'boolean',
     autoSize: 'boolean',
+    autoMin: 'boolean',
     loop: 'boolean',
     flip: 'boolean',
     playbackRate: 'boolean',
@@ -2144,6 +2154,7 @@
   function minMix(art, player) {
     var i18n = art.i18n,
         option = art.option,
+        storage = art.storage,
         proxy = art.events.proxy,
         _art$template = art.template,
         $player = _art$template.$player,
@@ -2166,8 +2177,12 @@
     proxy(document, 'mousemove', function (event) {
       if (isDroging) {
         addClass($player, 'art-is-dragging');
-        setStyle($player, 'left', "".concat(lastPlayerLeft + event.pageX - lastPageX, "px"));
+        var top = lastPlayerTop + event.pageY - lastPageY;
-        setStyle($player, 'top', "".concat(lastPlayerTop + event.pageY - lastPageY, "px"));
+        var left = lastPlayerLeft + event.pageX - lastPageX;
+        setStyle($player, 'top', "".concat(top, "px"));
+        setStyle($player, 'left', "".concat(left, "px"));
+        storage.set('top', top);
+        storage.set('left', left);
       }
     });
     proxy(document, 'mouseup', function () {
@@ -2189,13 +2204,35 @@
           player.autoSize = false;
           cacheStyle = $player.style.cssText;
           addClass($player, 'art-min');
+          var top = storage.get('top');
+          var left = storage.get('left');
+
+          if (top && left) {
+            setStyle($player, 'top', "".concat(top, "px"));
+            setStyle($player, 'left', "".concat(left, "px"));
+
+            if (!isInViewport($minHeader)) {
+              storage.del('top');
+              storage.del('left');
+              player.min = true;
+            }
+          } else {
             var $body = document.body;
-          setStyle($player, 'top', "".concat($body.clientHeight - player.height - 50, "px"));
+
-          setStyle($player, 'left', "".concat($body.clientWidth - player.width - 50, "px"));
+            var _top = $body.clientHeight - player.height - 50;
+
+            var _left = $body.clientWidth - player.width - 50;
+
+            storage.set('top', _top);
+            storage.set('left', _left);
+            setStyle($player, 'top', "".concat(_top, "px"));
+            setStyle($player, 'left', "".concat(_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);
@@ -3677,6 +3714,23 @@
     }
   }
 
+  function viewInit(art, events) {
+    var player = art.player,
+        autoMin = art.option.autoMin,
+        $container = art.template.$container;
+    var scrollFn = debounce(function () {
+      art.emit('view', isInViewport($container));
+    }, 200);
+    events.proxy(window, 'scroll', function () {
+      scrollFn();
+    });
+    art.on('view', function (state) {
+      if (autoMin) {
+        player.min = !state;
+      }
+    });
+  }
+
   var Events =
   /*#__PURE__*/
   function () {
@@ -3697,6 +3751,7 @@
           mousemoveInitInit(art, _this);
           resizeInit(art, _this);
           gestureInit(art, _this);
+          viewInit(art, _this);
         });
       }
     }
@@ -4161,7 +4216,7 @@
       key: "get",
       value: function get(key) {
         var storage = JSON.parse(localStorage.getItem(this.name)) || {};
-        return key ? storage[key] : {};
+        return key ? storage[key] : storage;
       }
     }, {
       key: "set",
@@ -4697,6 +4752,7 @@
           muted: false,
           autoplay: false,
           autoSize: false,
+          autoMin: false,
           loop: false,
           flip: false,
           playbackRate: false,

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/minMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/loop.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/gestureInLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/minMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/loop.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/gestureInLine truncated

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`);
+            const top = lastPlayerTop + event.pageY - lastPageY;
-            setStyle($player, 'top', `${lastPlayerTop + event.pageY - lastPageY}px`);
+            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 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;
-                setStyle($player, 'top', `${$body.clientHeight - player.height - 50}px`);
+                    const top = $body.clientHeight - player.height - 50;
-                setStyle($player, 'left', `${$body.clientWidth - player.width - 50}px`);
+                    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;
+}