简化quality

packages/artplayer/src/control/quality.js

@@ -1,37 +1,14 @@
-import { append, getStyle } from '../utils';
-
 export default function quality(option) {
-    return art => ({
-        ...option,
-        mounted: $control => {
-            const {
-                option: { quality },
-                events: { proxy, hover },
-                player,
-            } = art;
-
-            let playIndex = -1;
-            const defaultQuality = quality.find(item => item.default) || quality[0];
-            playIndex = quality.indexOf(defaultQuality);
-            const $qualityName = append($control, `<div class="art-quality-name">${defaultQuality.name}</div>`);
-            const qualityList = quality
-                .map((item, index) => `<div class="art-quality-item" data-index="${index}">${item.name}</div>`)
-                .join('');
-            const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);
-
-            hover($control, () => {
-                $qualitys.style.left = `-${getStyle($qualitys, 'width') / 2 - getStyle($control, 'width') / 2}px`;
-            });
-
-            proxy($qualitys, 'click', event => {
-                const index = Number(event.target.dataset.index);
-                const { url, name } = quality[index];
-                if (url && name && playIndex !== index) {
-                    player.switchQuality(url, name);
-                    $qualityName.innerText = name;
-                    playIndex = index;
-                }
-            });
-        },
-    });
+    return (art) => {
+        const qualityOption = art.option.quality;
+        const qualityDefault = qualityOption.find((item) => item.default) || qualityOption[0];
+        return {
+            ...option,
+            html: qualityDefault.name,
+            selector: qualityOption,
+            onSelect(item) {
+                art.player.switchQuality(item.url, item.name);
+            },
+        };
+    };
 }