update setting

packages/artplayer/src/control/setting.js

@@ -1,10 +1,10 @@
 import { append, tooltip } from '../utils';
 
 export default function setting(option) {
-    return art => ({
+    return (art) => ({
         ...option,
         tooltip: art.i18n.get('Show Setting'),
-        mounted: $control => {
+        mounted: ($control) => {
             const {
                 events: { proxy },
                 icons,
@@ -18,7 +18,7 @@ export default function setting(option) {
                 setting.toggle = true;
             });
 
-            art.on('setting', value => {
+            art.on('setting', (value) => {
                 tooltip($control, i18n.get(value ? 'Hide Setting' : 'Show Setting'));
             });
         },

packages/artplayer/src/setting/aspectRatio.js

@@ -27,10 +27,10 @@ export default function aspectRatio(art) {
             $desc.innerText = getI18n(art.aspectRatio);
 
             art.on('aspectRatio', (value) => {
+                $desc.innerText = getI18n(art.aspectRatio);
                 const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
                 if ($current) {
                     inverseClass($current, 'art-current');
-                    $desc.innerText = getI18n(art.aspectRatio);
                 }
             });
         },

packages/artplayer/src/setting/flip.js

@@ -29,10 +29,10 @@ export default function flip(art) {
             $desc.innerText = i18n.get(keys[art.flip]);
 
             art.on('flip', (value) => {
+                $desc.innerText = i18n.get(keys[art.flip]);
                 const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
                 if ($current) {
                     inverseClass($current, 'art-current');
-                    $desc.innerText = i18n.get(keys[art.flip]);
                 }
             });
         },

packages/artplayer/src/setting/index.js

@@ -63,8 +63,10 @@ export default class Setting extends Component {
             });
 
             art.on('blur', () => {
-                this.show = false;
-                this.init(this.option);
+                if (this.show) {
+                    this.show = false;
+                    this.init(this.option);
+                }
             });
 
             proxy($player, 'click', (event) => {
@@ -149,11 +151,13 @@ export default class Setting extends Component {
                 this.init(item.selector, item.width);
             } else {
                 inverseClass($item, 'art-current');
+
+                if (item._parentList) {
+                    this.init(item._parentList);
+                }
+
                 if (item._parentItem && item._parentItem.onSelect) {
-                    const result = item._parentItem.onSelect.call(this.art, item, $item, event);
-                    if (typeof result === 'string') {
-                        $item.innerHTML = result;
-                    }
+                    item._parentItem.onSelect.call(this.art, item, $item, event);
                 }
             }
         });

packages/artplayer/src/setting/playbackRate.js

@@ -27,12 +27,12 @@ export default function playbackRate(art) {
             $desc.innerText = getI18n(art.playbackRate);
 
             art.on('playbackRate', (value) => {
+                $desc.innerText = getI18n(art.playbackRate);
                 const $current = queryAll('.art-setting-item', $panel).find(
                     (item) => Number(item.dataset.value) === value,
                 );
                 if ($current) {
                     inverseClass($current, 'art-current');
-                    $desc.innerText = getI18n(art.playbackRate);
                 }
             });
         },

packages/artplayer/src/setting/subtitleOffset.js

@@ -27,12 +27,12 @@ export default function subtitleOffset(art) {
             $desc.innerText = getI18n(art.subtitleOffset);
 
             art.on('subtitleOffset', (value) => {
+                $desc.innerText = getI18n(art.subtitleOffset);
                 const $current = queryAll('.art-setting-item', $panel).find(
                     (item) => Number(item.dataset.value) === value,
                 );
                 if ($current) {
                     inverseClass($current, 'art-current');
-                    $desc.innerText = getI18n(art.subtitleOffset);
                 }
             });
         },