update setting

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');
-        addClass($icon, 'art-setting-item-left-icon');
-        append($icon, icons.arrowLeft);
-        append($left, $icon);
+        const $iconLeft = document.createElement('div');
+        addClass($iconLeft, 'art-setting-item-left-icon');
+        append($iconLeft, icons.arrowLeft);
+        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');
-        addClass($icon, 'art-setting-item-left-icon');
-        const hasChildren = item.selector && item.selector.length;
+        const $iconLeft = document.createElement('div');
+        addClass($iconLeft, 'art-setting-item-left-icon');
+        append($iconLeft, hasChildren ? item.icon || icons.config : icons.check);
+        append($left, $iconLeft);
+        append($left, item.html);
 
         if (hasChildren) {
-            append($icon, item.icon || icons.config);
-            append($right, icons.arrowRight);
-        } else {
-            append($icon, icons.check);
-        }
+            const $desc = document.createElement('div');
+            addClass($desc, 'art-setting-item-right-desc');
+            append($right, $desc);
 
-        append($left, $icon);
-        append($left, item.html);
+            const $iconRight = document.createElement('div');
+            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;
+                    }
                 }
             }