Refactor Setting class to update range values and append items

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, query } = art.constructor.utils;
+        const { errorHandle, query, queryAll, inverseClass } = art.constructor.utils;
 
         function updateQuality(hls) {
             if (!hls.levels.length) return;
@@ -61,9 +61,12 @@ export default function artplayerPluginHlsControl(option = {}) {
                     selector: selector,
                     onSelect: onSelect,
                     mounted: ($control) => {
-                        const $value = query('.art-selector-value', $control);
                         art.on('artplayerPluginHlsControl:quality', (item) => {
+                            const $value = query('.art-selector-value', $control);
+                            const $items = queryAll('.art-selector-item', $control);
                             $value.innerHTML = item.html;
+                            const $item = $items.find((element) => Number(element.dataset.value) === item.value);
+                            inverseClass($item, 'art-current');
                         });
                     },
                 });
@@ -81,6 +84,14 @@ export default function artplayerPluginHlsControl(option = {}) {
                     mounted: (_, setting) => {
                         art.on('artplayerPluginHlsControl:quality', (item) => {
                             setting.tooltip = item.html;
+
+                            const element = setting.selector.find(
+                                (element) => Number(element.$item?.dataset?.value) === item.value,
+                            );
+
+                            if (element?.$item) {
+                                inverseClass(element.$item, 'art-current');
+                            }
                         });
                     },
                 });
@@ -125,9 +136,12 @@ export default function artplayerPluginHlsControl(option = {}) {
                     selector: selector,
                     onSelect: onSelect,
                     mounted: ($control) => {
-                        const $value = query('.art-selector-value', $control);
                         art.on('artplayerPluginHlsControl:audio', (item) => {
+                            const $value = query('.art-selector-value', $control);
+                            const $items = queryAll('.art-selector-item', $control);
                             $value.innerHTML = item.html;
+                            const $item = $items.find((element) => Number(element.dataset.value) === item.value);
+                            inverseClass($item, 'art-current');
                         });
                     },
                 });
@@ -145,6 +159,12 @@ export default function artplayerPluginHlsControl(option = {}) {
                     mounted: (_, setting) => {
                         art.on('artplayerPluginHlsControl:audio', (item) => {
                             setting.tooltip = item.html;
+                            const element = setting.selector.find(
+                                (element) => Number(element.$item?.dataset?.value) === item.value,
+                            );
+                            if (element?.$item) {
+                                inverseClass(element.$item, 'art-current');
+                            }
                         });
                     },
                 });

packages/artplayer/src/setting/index.js

@@ -443,8 +443,8 @@ export default class Setting extends Component {
                         } else {
                             inverseClass($item, 'art-current');
 
-                            for (let index = 0; index < item.$parent.selector.length; index++) {
-                                const element = item.$parent.selector[index];
+                            for (let index = 0; index < item.$option.length; index++) {
+                                const element = item.$option[index];
                                 element.default = element === item;
                             }
 

packages/artplayer/src/utils/component.js

@@ -114,9 +114,13 @@ export default class Component {
         const list = option.selector
             .map(
                 (item, index) =>
-                    `<div class="art-selector-item ${item.default ? 'art-current' : ''}" data-index="${index}">${
-                        item.html
-                    }</div>`,
+                    `<div 
+                        class="art-selector-item ${item.default ? 'art-current' : ''}"
+                        data-index="${index}"
+                        data-value="${item.value}"
+                    >
+                        ${item.html}
+                    </div>`,
             )
             .join('');
         const $list = createElement('div');