Refactor Artplayer class to update qualityMix.js and component.js

packages/artplayer/src/utils/component.js

@@ -1,15 +1,4 @@
-import {
-    remove,
-    append,
-    tooltip,
-    hasClass,
-    addClass,
-    getStyle,
-    setStyles,
-    removeClass,
-    inverseClass,
-    createElement,
-} from './dom';
+import { remove, append, tooltip, hasClass, addClass, setStyles, removeClass, createElement } from './dom';
 import { errorHandle } from './error';
 import validator from 'option-validator';
 import { ComponentOption } from '../scheme';
@@ -88,7 +77,7 @@ export default class Component {
         }
 
         if (option.selector && ['left', 'right'].includes(option.position)) {
-            this.addSelector(option, $ref, events);
+            this.selector(option, $ref, events);
         }
 
         this[name] = $ref;
@@ -101,59 +90,6 @@ export default class Component {
         return $ref;
     }
 
-    addSelector(option, $ref, events) {
-        const { hover, proxy } = this.art.events;
-
-        addClass($ref, 'art-control-selector');
-        const $value = createElement('div');
-        addClass($value, 'art-selector-value');
-        append($value, option.html);
-        $ref.innerText = '';
-        append($ref, $value);
-
-        const list = option.selector
-            .map(
-                (item, index) =>
-                    `<div 
-                        class="art-selector-item ${item.default ? 'art-current' : ''}"
-                        data-index="${index}"
-                        data-value="${item.value}"
-                    >
-                        ${item.html}
-                    </div>`,
-            )
-            .join('');
-        const $list = createElement('div');
-        addClass($list, 'art-selector-list');
-        append($list, list);
-        append($ref, $list);
-
-        const setLeft = () => {
-            const refWidth = getStyle($ref, 'width');
-            const listWidth = getStyle($list, 'width');
-            const left = refWidth / 2 - listWidth / 2;
-            $list.style.left = `${left}px`;
-        };
-
-        hover($ref, setLeft);
-
-        const destroyEvent = proxy($list, 'click', async (event) => {
-            const path = event.composedPath() || [];
-            const $item = path.find((item) => hasClass(item, 'art-selector-item'));
-            if (!$item) return;
-            inverseClass($item, 'art-current');
-            const index = Number($item.dataset.index);
-            const find = option.selector[index] || {};
-            $value.innerText = $item.innerText;
-            if (option.onSelect) {
-                $value.innerHTML = await option.onSelect.call(this.art, find, $item, event);
-            }
-            setLeft();
-        });
-
-        events.push(destroyEvent);
-    }
-
     remove(name) {
         const item = this.cache.get(name);
         errorHandle(item, `Can't find [${name}] from the [${this.name}]`);