update setting

docs/uncompiled/artplayer.js

@@ -118,7 +118,7 @@
     }
   }
 
-  var css_248z = ".art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{height:5px;width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:65px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:70}.art-video-player.art-loading-show .art-loading{display:flex}.art-video-player .art-bottom{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;bottom:0;display:flex;flex-direction:column;height:100px;justify-content:space-between;left:0;opacity:0;padding:50px 10px 0;pointer-events:none;position:absolute;right:0;transition:all .2s ease-in-out;visibility:hidden;z-index:60}.art-video-player .art-bottom .art-progress{pointer-events:auto;position:relative;z-index:0}.art-video-player .art-bottom .art-progress .art-control-progress{align-items:center;cursor:pointer;display:flex;flex-direction:row;height:4px;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{align-items:center;background:hsla(0,0%,100%,.2);display:flex;height:50%;position:relative;width:100%}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{background:hsla(0,0%,100%,.4);bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:10}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:20}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{bottom:0;height:100%;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:30}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{bLine truncated
+  var css_248z = ".art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{height:5px;width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:65px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:70}.art-video-player.art-loading-show .art-loading{display:flex}.art-video-player .art-bottom{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;bottom:0;display:flex;flex-direction:column;height:100px;justify-content:space-between;left:0;opacity:0;padding:50px 10px 0;pointer-events:none;position:absolute;right:0;transition:all .2s ease-in-out;visibility:hidden;z-index:60}.art-video-player .art-bottom .art-progress{pointer-events:auto;position:relative;z-index:0}.art-video-player .art-bottom .art-progress .art-control-progress{align-items:center;cursor:pointer;display:flex;flex-direction:row;height:4px;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{align-items:center;background:hsla(0,0%,100%,.2);display:flex;height:50%;position:relative;width:100%}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{background:hsla(0,0%,100%,.4);bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:10}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:20}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{bottom:0;height:100%;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:30}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{bLine truncated
   styleInject(css_248z);
 
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1287,42 +1287,27 @@
   }
 
   function playbackRateMix(art) {
-    var _art$template = art.template,
+    var $video = art.template.$video,
-        $video = _art$template.$video,
-        $player = _art$template.$player,
         i18n = art.i18n,
         notice = art.notice;
     def(art, 'playbackRate', {
       get: function get() {
-        return $player.dataset.playbackRate || 1.0;
+        return $video.playbackRate;
       },
       set: function set(rate) {
         if (rate) {
-          if (rate === $player.dataset.playbackRate) return;
+          if (rate === $video.playbackRate) return;
           var rateList = [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
           errorHandle(rateList.includes(rate), "'playbackRate' only accept ".concat(rateList.toString(), " as parameters"));
           $video.playbackRate = rate;
-          $player.dataset.playbackRate = rate;
           notice.show = "".concat(i18n.get('Rate'), ": ").concat(rate === 1.0 ? i18n.get('Normal') : "".concat(rate, "x"));
           art.emit('playbackRate', rate);
-        } else if (art.playbackRate) {
+        } else {
           art.playbackRate = 1;
-          delete $player.dataset.playbackRate;
           art.emit('playbackRate');
         }
       }
     });
-    def(art, 'playbackRateReset', {
-      set: function set(value) {
-        if (value) {
-          var playbackRate = $player.dataset.playbackRate;
-
-          if (playbackRate) {
-            art.playbackRate = Number(playbackRate);
-          }
-        }
-      }
-    });
   }
 
   function aspectRatioMix(art) {
@@ -1376,7 +1361,7 @@
     });
     def(art, 'aspectRatioReset', {
       set: function set(value) {
-        if (value && art.aspectRatio) {
+        if (value) {
           var aspectRatio = art.aspectRatio;
           art.aspectRatio = aspectRatio;
         }
@@ -1928,14 +1913,6 @@
         art.emit('flip', flip);
       }
     });
-    def(art, 'flipReset', {
-      set: function set(value) {
-        if (value && art.flip) {
-          var flip = art.flip;
-          art.flip = flip;
-        }
-      }
-    });
   }
 
   function miniMix(art) {
@@ -4530,10 +4507,10 @@
         addClass($item, 'art-setting-item');
         addClass($item, 'art-setting-item-back');
         var $left = append($item, '<div class="art-setting-item-left"></div>');
-        var $icon = document.createElement('div');
+        var $iconLeft = document.createElement('div');
-        addClass($icon, 'art-setting-item-left-icon');
+        addClass($iconLeft, 'art-setting-item-left-icon');
-        append($icon, icons.arrowLeft);
+        append($iconLeft, icons.arrowLeft);
-        append($left, $icon);
+        append($left, $iconLeft);
         append($left, item._parentItem.html);
         proxy($item, 'click', function () {
           _this2.init(item._parentList);
@@ -4548,6 +4525,7 @@
         var _this$art2 = this.art,
             icons = _this$art2.icons,
             proxy = _this$art2.events.proxy;
+        var hasChildren = item.selector && item.selector.length;
         var $item = document.createElement('div');
         addClass($item, 'art-setting-item');
 
@@ -4561,19 +4539,22 @@
 
         var $left = append($item, '<div class="art-setting-item-left"></div>');
         var $right = append($item, '<div class="art-setting-item-right"></div>');
-        var $icon = document.createElement('div');
+        var $iconLeft = document.createElement('div');
-        addClass($icon, 'art-setting-item-left-icon');
+        addClass($iconLeft, 'art-setting-item-left-icon');
-        var hasChildren = item.selector && item.selector.length;
+        append($iconLeft, hasChildren ? item.icon || icons.config : icons.check);
+        append($left, $iconLeft);
+        append($left, item.html);
 
         if (hasChildren) {
-          append($icon, item.icon || icons.config);
+          var $desc = document.createElement('div');
-          append($right, icons.arrowRight);
+          addClass($desc, 'art-setting-item-right-desc');
-        } else {
+          append($right, $desc);
-          append($icon, icons.check);
+          var $iconRight = document.createElement('div');
+          addClass($iconRight, 'art-setting-item-right-icon');
+          append($iconRight, icons.arrowRight);
+          append($right, $iconRight);
         }
 
-        append($left, $icon);
-        append($left, item.html);
         proxy($item, 'click', function (event) {
           if (hasChildren) {
             _this3.init(item.selector, item.width);
@@ -4615,7 +4596,9 @@
           }
 
           for (var index = 0; index < option.length; index++) {
-            append(_$panel, this.creatItem(option[index]));
+            var $item = this.creatItem(option[index]);
+            option[index].$item = $item;
+            append(_$panel, $item);
           }
 
           _$panel.dataset.width = width || this.width;

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@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@7.17.2@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/defineProperty.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/attrMix.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/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/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/subtitleOffsetMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.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/vLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@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@7.17.2@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/defineProperty.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/attrMix.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/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/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/subtitleOffsetMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.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/vLine truncated

packages/artplayer/src/player/aspectRatioMix.js

@@ -48,7 +48,7 @@ export default function aspectRatioMix(art) {
 
     def(art, 'aspectRatioReset', {
         set(value) {
-            if (value && art.aspectRatio) {
+            if (value) {
                 const { aspectRatio } = art;
                 art.aspectRatio = aspectRatio;
             }

packages/artplayer/src/player/flipMix.js

@@ -29,13 +29,4 @@ export default function flipMix(art) {
             art.emit('flip', flip);
         },
     });
-
-    def(art, 'flipReset', {
-        set(value) {
-            if (value && art.flip) {
-                const { flip } = art;
-                art.flip = flip;
-            }
-        },
-    });
 }

packages/artplayer/src/player/playbackRateMix.js

@@ -2,40 +2,27 @@ import { errorHandle, def } from '../utils';
 
 export default function playbackRateMix(art) {
     const {
-        template: { $video, $player },
+        template: { $video },
         i18n,
         notice,
     } = art;
 
     def(art, 'playbackRate', {
         get() {
-            return $player.dataset.playbackRate || 1.0;
+            return $video.playbackRate;
         },
         set(rate) {
             if (rate) {
-                if (rate === $player.dataset.playbackRate) return;
+                if (rate === $video.playbackRate) return;
                 const rateList = [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
                 errorHandle(rateList.includes(rate), `'playbackRate' only accept ${rateList.toString()} as parameters`);
                 $video.playbackRate = rate;
-                $player.dataset.playbackRate = rate;
                 notice.show = `${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`;
                 art.emit('playbackRate', rate);
-            } else if (art.playbackRate) {
+            } else {
                 art.playbackRate = 1;
-                delete $player.dataset.playbackRate;
                 art.emit('playbackRate');
             }
         },
     });
-
-    def(art, 'playbackRateReset', {
-        set(value) {
-            if (value) {
-                const { playbackRate } = $player.dataset;
-                if (playbackRate) {
-                    art.playbackRate = Number(playbackRate);
-                }
-            }
-        },
-    });
 }

packages/artplayer/src/setting/index.js

@@ -90,10 +90,10 @@ export default class Setting extends Component {
         addClass($item, 'art-setting-item');
         addClass($item, 'art-setting-item-back');
         const $left = append($item, '<div class="art-setting-item-left"></div>');
-        const $icon = document.createElement('div');
+        const $iconLeft = document.createElement('div');
-        addClass($icon, 'art-setting-item-left-icon');
+        addClass($iconLeft, 'art-setting-item-left-icon');
-        append($icon, icons.arrowLeft);
+        append($iconLeft, icons.arrowLeft);
-        append($left, $icon);
+        append($left, $iconLeft);
         append($left, item._parentItem.html);
 
         proxy($item, 'click', () => {
@@ -109,6 +109,7 @@ export default class Setting extends Component {
             events: { proxy },
         } = this.art;
 
+        const hasChildren = item.selector && item.selector.length;
         const $item = document.createElement('div');
         addClass($item, 'art-setting-item');
 
@@ -123,19 +124,22 @@ export default class Setting extends Component {
         const $left = append($item, '<div class="art-setting-item-left"></div>');
         const $right = append($item, '<div class="art-setting-item-right"></div>');
 
-        const $icon = document.createElement('div');
+        const $iconLeft = document.createElement('div');
-        addClass($icon, 'art-setting-item-left-icon');
+        addClass($iconLeft, 'art-setting-item-left-icon');
-        const hasChildren = item.selector && item.selector.length;
+        append($iconLeft, hasChildren ? item.icon || icons.config : icons.check);
+        append($left, $iconLeft);
+        append($left, item.html);
 
         if (hasChildren) {
-            append($icon, item.icon || icons.config);
+            const $desc = document.createElement('div');
-            append($right, icons.arrowRight);
+            addClass($desc, 'art-setting-item-right-desc');
-        } else {
+            append($right, $desc);
-            append($icon, icons.check);
-        }
 
-        append($left, $icon);
+            const $iconRight = document.createElement('div');
-        append($left, item.html);
+            addClass($iconRight, 'art-setting-item-right-icon');
+            append($iconRight, icons.arrowRight);
+            append($right, $iconRight);
+        }
 
         proxy($item, 'click', (event) => {
             if (hasChildren) {
@@ -174,7 +178,9 @@ export default class Setting extends Component {
             }
 
             for (let index = 0; index < option.length; index++) {
-                append($panel, this.creatItem(option[index]));
+                const $item = this.creatItem(option[index]);
+                option[index].$item = $item;
+                append($panel, $item);
             }
 
             $panel.dataset.width = width || this.width;

packages/artplayer/src/style/setting.scss

@@ -71,6 +71,19 @@
                 .art-setting-item-right {
                     display: flex;
                     align-items: center;
+
+                    .art-setting-item-right-desc {
+                        font-size: 12px;
+                        color: rgba(255, 255, 255, 0.5);
+                    }
+
+                    .art-setting-item-right-icon {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        height: 24px;
+                        width: 24px;
+                    }
                 }
             }