组件添加add方法

packages/artplayer/src/control/quality.js

@@ -0,0 +1,37 @@
+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 - $control.clientWidth / 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.innerHTML = name;
+                    playIndex = index;
+                }
+            });
+        },
+    });
+}