Update version to 5.2.1 in package.json and Artplayer class

packages/artplayer-plugin-hls-control/package.json

@@ -1,6 +1,6 @@
 {
     "license": "MIT",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "name": "artplayer-plugin-hls-control",
     "types": "types/artplayer-plugin-hls-control.d.ts",
     "description": "Iframe plugin for ArtPlayer",

packages/artplayer-plugin-hls-control/src/index.js

@@ -15,7 +15,7 @@ function uniqBy(array, property) {
 export default function artplayerPluginHlsControl(option = {}) {
     return (art) => {
         const { $video } = art.template;
-        const { errorHandle } = art.constructor.utils;
+        const { errorHandle, query } = art.constructor.utils;
 
         function updateQuality(hls) {
             if (!hls.levels.length) return;
@@ -48,6 +48,7 @@ export default function artplayerPluginHlsControl(option = {}) {
                 hls.currentLevel = item.value;
                 art.loading.show = true;
                 art.notice.show = `${title}: ${item.html}`;
+                art.emit('artplayerPluginHlsControl:quality', item);
                 return item.html;
             };
 
@@ -59,6 +60,12 @@ export default function artplayerPluginHlsControl(option = {}) {
                     style: { padding: '0 10px' },
                     selector: selector,
                     onSelect: onSelect,
+                    mounted: ($control) => {
+                        const $value = query('.art-selector-value', $control);
+                        art.on('artplayerPluginHlsControl:quality', (item) => {
+                            $value.innerHTML = item.html;
+                        });
+                    },
                 });
             }
 
@@ -71,6 +78,11 @@ export default function artplayerPluginHlsControl(option = {}) {
                     width: 200,
                     selector: selector,
                     onSelect: onSelect,
+                    mounted: (_, setting) => {
+                        art.on('artplayerPluginHlsControl:quality', (item) => {
+                            setting.tooltip = item.html;
+                        });
+                    },
                 });
             }
         }
@@ -100,6 +112,7 @@ export default function artplayerPluginHlsControl(option = {}) {
                 hls.audioTrack = item.value;
                 art.loading.show = true;
                 art.notice.show = `${title}: ${item.html}`;
+                art.emit('artplayerPluginHlsControl:audio', item);
                 return item.html;
             };
 
@@ -111,6 +124,12 @@ export default function artplayerPluginHlsControl(option = {}) {
                     style: { padding: '0 10px' },
                     selector: selector,
                     onSelect: onSelect,
+                    mounted: ($control) => {
+                        const $value = query('.art-selector-value', $control);
+                        art.on('artplayerPluginHlsControl:audio', (item) => {
+                            $value.innerHTML = item.html;
+                        });
+                    },
                 });
             }
 
@@ -123,6 +142,11 @@ export default function artplayerPluginHlsControl(option = {}) {
                     width: 200,
                     selector: selector,
                     onSelect: onSelect,
+                    mounted: (_, setting) => {
+                        art.on('artplayerPluginHlsControl:audio', (item) => {
+                            setting.tooltip = item.html;
+                        });
+                    },
                 });
             }
         }

packages/artplayer/package.json

@@ -1,7 +1,7 @@
 {
     "license": "MIT",
     "name": "artplayer",
-    "version": "5.2.0",
+    "version": "5.2.1",
     "main": "dist/artplayer.js",
     "legacy": "dist/artplayer.legacy.js",
     "types": "types/artplayer.d.ts",

packages/artplayer/src/player/qualityMix.js

@@ -12,7 +12,7 @@ export default function qualityMix(art) {
                 style: {
                     marginRight: '10px',
                 },
-                html: qualityDefault ? qualityDefault.html : '',
+                html: qualityDefault?.html || '',
                 selector: quality,
                 async onSelect(item) {
                     await art.switchQuality(item.url);

packages/artplayer/src/setting/index.js

@@ -482,6 +482,10 @@ export default class Setting extends Component {
         } else {
             append($panel, $item);
         }
+
+        if (item.mounted) {
+            item.mounted.call(this.art, item.$item, item);
+        }
     }
 
     render(option = this.option) {
@@ -491,8 +495,10 @@ export default class Setting extends Component {
             inverseClass($panel, 'art-current');
         } else {
             const $panel = createElement('div');
-            addClass($panel, 'art-setting-panel');
             this.cache.set(option, $panel);
+            addClass($panel, 'art-setting-panel');
+            append(this.$parent, $panel);
+            inverseClass($panel, 'art-current');
 
             if (option[0]?.$parent) {
                 this.creatHeader(option[0]);
@@ -501,16 +507,6 @@ export default class Setting extends Component {
             for (let index = 0; index < option.length; index++) {
                 this.creatItem(option[index]);
             }
-
-            append(this.$parent, $panel);
-            inverseClass($panel, 'art-current');
-
-            for (let index = 0; index < option.length; index++) {
-                const item = option[index];
-                if (item.mounted) {
-                    item.mounted.call(this.art, item.$item, item);
-                }
-            }
         }
         this.resize();
     }