update docs

docs/js/artplayer.js

@@ -417,6 +417,12 @@
       return item !== target;
     });
   }
+  function inverseClass(target, className) {
+    sublings(target).forEach(function (item) {
+      return item.classList.remove(className);
+    });
+    target.classList.add(className);
+  }
   function debounce(func, wait, context) {
     var timeout;
 
@@ -455,6 +461,7 @@
     tooltip: tooltip,
     sleep: sleep,
     sublings: sublings,
+    inverseClass: inverseClass,
     debounce: debounce
   });
 
@@ -1112,10 +1119,7 @@
 
         if (art.contextmenu.$playbackRate) {
           var $normal = art.contextmenu.$playbackRate.querySelector('.normal');
-          sublings($normal).forEach(function (item) {
+          inverseClass($normal, 'current');
-            return item.classList.remove('current');
-          });
-          $normal.classList.add('current');
         }
       }
     });
@@ -1179,10 +1183,7 @@
 
         if (art.contextmenu.$aspectRatio) {
           var $default = art.contextmenu.$aspectRatio.querySelector('.default');
-          sublings($default).forEach(function (item) {
+          inverseClass($default, 'current');
-            return item.classList.remove('current');
-          });
-          $default.classList.add('current');
         }
       }
     });
@@ -3914,10 +3915,7 @@
 
         if (rate) {
           player.playbackRate(Number(rate));
-          sublings(target).forEach(function (item) {
+          inverseClass(target, 'current');
-            return item.classList.remove('current');
-          });
-          target.classList.add('current');
           art.contextmenu.hide();
         }
       }
@@ -3939,10 +3937,7 @@
 
         if (ratio) {
           player.aspectRatio(ratio.split(':'));
-          sublings(target).forEach(function (item) {
+          inverseClass(target, 'current');
-            return item.classList.remove('current');
-          });
-          target.classList.add('current');
           art.contextmenu.hide();
         }
       }
@@ -4679,13 +4674,17 @@
   var ResizeObserver_2 = ResizeObserver_1.ResizeObserver;
   var ResizeObserver_3 = ResizeObserver_1.install;
 
-  function clickInit$1(art, events) {
+  function resizeInit(art, events) {
     var option = art.option,
         $player = art.refs.$player;
     var resizeObserver = new ResizeObserver_2(function () {
       sleep().then(function () {
         if (option.autoSize) {
-          art.player.autoSize();
+          if (!art.player.fullscreenState && !art.player.fullscreenWebState) {
+            art.player.autoSize();
+          } else {
+            art.player.autoSizeRemove();
+          }
         }
 
         art.player.aspectRatioReset();
@@ -4710,7 +4709,7 @@
       clickInit(art, this);
       hoverInit(art, this);
       mousemoveInitInit(art, this);
-      clickInit$1(art, this);
+      resizeInit(art, this);
     }
 
     createClass(Events, [{
@@ -4836,14 +4835,28 @@
     createClass(Layers, [{
       key: "add",
       value: function add(item, callback) {
+        var _this2 = this;
+
         if (!item.disable) {
-          var $layers = this.art.refs.$layers;
+          var _this$art = this.art,
+              $layers = _this$art.refs.$layers,
+              proxy = _this$art.events.proxy;
           id$2++;
           var $layer = document.createElement('div');
           $layer.setAttribute('class', "art-layer art-layer-".concat(item.name || id$2));
           setStyle($layer, 'z-index', item.index || id$2);
           append($layer, item.html);
           setStyles($layer, item.style || {});
+
+          if (item.click) {
+            proxy($layer, 'click', function (event) {
+              event.preventDefault();
+              item.click.call(_this2, event);
+
+              _this2.art.emit('layers:click', $layer);
+            });
+          }
+
           this.art.emit('layers:add', $layer);
           callback && callback($layer);
           insertByIndex($layers, $layer, item.index || id$2);

docs/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/scheme/validElement.js","../../packages/artplayer/src/scheme/validStringEmpty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/mountUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.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/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/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/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","Line truncated
+{"version":3,"file":"artplayer.js","sources":["../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/scheme/validElement.js","../../packages/artplayer/src/scheme/validStringEmpty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/mountUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.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/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/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/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","Line truncated

docs/js/index.js

@@ -6,6 +6,9 @@ var app = new Artplayer({
   poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
   pip: true,
   autoSize: true,
+  screenshot: true,
+  setting: true,
+  loop: true,
   theme: '#ffad00',
   contextmenu: [
       {
@@ -16,6 +19,25 @@ var app = new Artplayer({
           }
       }
   ],
+  layers: [
+    {
+      html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
+      click: function () {
+        app.destroy(true);
+        app = new Artplayer({
+            autoplay: true,
+            container: '.artplayer-app',
+            url: url + '/video/you-name.mp4'
+        })
+      },
+      style: {
+          'position': 'absolute',
+          'top': '20px',
+          'right': '20px',
+          'opacity': '.9'
+      }
+    }
+  ],
   quality: [
     {
       default: true,

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -1,4 +1,4 @@
-import { sublings } from '../utils';
+import { inverseClass } from '../utils';
 
 export default function aspectRatio(art) {
   const { option, i18n, player } = art;
@@ -17,8 +17,7 @@ export default function aspectRatio(art) {
       const { ratio } = target.dataset;
       if (ratio) {
         player.aspectRatio(ratio.split(':'));
-        sublings(target).forEach(item => item.classList.remove('current'));
+        inverseClass(target, 'current');
-        target.classList.add('current');
         art.contextmenu.hide();
       }
     }

packages/artplayer/src/contextmenu/playbackRate.js

@@ -1,4 +1,4 @@
-import { sublings } from '../utils';
+import { inverseClass } from '../utils';
 
 export default function playbackRate(art) {
   const { option, i18n, player } = art;
@@ -20,8 +20,7 @@ export default function playbackRate(art) {
       const { rate } = target.dataset;
       if (rate) {
         player.playbackRate(Number(rate));
-        sublings(target).forEach(item => item.classList.remove('current'));
+        inverseClass(target, 'current');
-        target.classList.add('current');
         art.contextmenu.hide();
       }
     }

packages/artplayer/src/events/resizeInit.js

@@ -1,12 +1,16 @@
 import { sleep } from '../utils';
 import { ResizeObserver } from 'resize-observer';
 
-export default function clickInit(art, events) {
+export default function resizeInit(art, events) {
   const { option, refs: { $player } } = art;
   const resizeObserver = new ResizeObserver(() => {
     sleep().then(() => {
       if (option.autoSize) {
-        art.player.autoSize();
+        if (!art.player.fullscreenState && !art.player.fullscreenWebState) {
+          art.player.autoSize();
+        } else {
+          art.player.autoSizeRemove();
+        }
       }
       art.player.aspectRatioReset();
       art.emit('resize');

packages/artplayer/src/layers.js

@@ -13,13 +13,20 @@ export default class Layers {
 
   add(item, callback) {
     if (!item.disable) {
-      const { refs: { $layers } } = this.art;
+      const { refs: { $layers }, events: { proxy } } = this.art;
       id++;
       const $layer = document.createElement('div');
       $layer.setAttribute('class', `art-layer art-layer-${item.name || id}`);
       setStyle($layer, 'z-index', item.index || id);
       append($layer, item.html);
       setStyles($layer, item.style || {});
+      if (item.click) {
+        proxy($layer, 'click', event => {
+          event.preventDefault();
+          item.click.call(this, event);
+          this.art.emit('layers:click', $layer);
+        });
+      }
       this.art.emit('layers:add', $layer);
       callback && callback($layer);
       insertByIndex($layers, $layer, item.index || id);

packages/artplayer/src/player/aspectRatioMix.js

@@ -1,4 +1,4 @@
-import { setStyle, sublings } from '../utils';
+import { setStyle, inverseClass } from '../utils';
 
 export default function aspectRatioMix(art, player) {
   const { refs: { $video, $player }, i18n, notice } = art;
@@ -43,8 +43,7 @@ export default function aspectRatioMix(art, player) {
       delete $player.dataset.aspectRatio;
       if (art.contextmenu.$aspectRatio) {
         const $default = art.contextmenu.$aspectRatio.querySelector('.default');
-        sublings($default).forEach(item => item.classList.remove('current'));
+        inverseClass($default, 'current');
-        $default.classList.add('current');
       }
     }
   });

packages/artplayer/src/player/playbackRateMix.js

@@ -1,4 +1,4 @@
-import { clamp, sublings } from '../utils';
+import { clamp, inverseClass } from '../utils';
 
 export default function playbackRateMix(art, player) {
   const { refs: { $video, $player }, i18n, notice } = art;
@@ -19,8 +19,7 @@ export default function playbackRateMix(art, player) {
       delete $player.dataset.playbackRate;
       if (art.contextmenu.$playbackRate) {
         const $normal = art.contextmenu.$playbackRate.querySelector('.normal');
-        sublings($normal).forEach(item => item.classList.remove('current'));
+        inverseClass($normal, 'current');
-        $normal.classList.add('current');
       }
     }
   });

packages/artplayer/src/utils/index.js

@@ -123,6 +123,11 @@ export function sublings(target) {
   return Array.from(target.parentElement.children).filter(item => item !== target);
 }
 
+export function inverseClass(target, className) {
+  sublings(target).forEach(item => item.classList.remove(className));
+  target.classList.add(className);
+}
+
 export function debounce(func, wait, context) {
   let timeout;
   function fn() {