调整switcher结构

packages/artplayer/src/plugins/index.js

@@ -4,7 +4,6 @@ import localVideo from './localVideo';
 import localSubtitle from './localSubtitle';
 import miniProgressBar from './miniProgressBar';
 import networkMonitor from './networkMonitor';
-import switcher from './switcher';
 
 export default class Plugins {
     constructor(art) {
@@ -33,8 +32,6 @@ export default class Plugins {
             this.add(networkMonitor);
         }
 
-        this.add(switcher);
-
         art.option.plugins.forEach((plugin) => {
             this.add(plugin);
         });

packages/artplayer/src/plugins/switcher.js

@@ -1,66 +0,0 @@
-import { queryAll, query, inverseClass, getStyle, addClass } from '../utils';
-
-export default function switcher(art) {
-    const {
-        controls,
-        option,
-        events: { hover },
-    } = art;
-
-    function add(item) {
-        const list = item.list
-            .map((child) => `<div class="art-switcher-item" data-switcher-name="${child.name}">${child.text}</div>`)
-            .join('');
-        const html = `<div class="art-switcher-list">${list}</div><div class="art-switcher-current"></div>`;
-
-        let $list;
-        let $childs;
-        let $current;
-
-        controls.add({
-            name: item.name,
-            position: 'right',
-            index: item.index,
-            html,
-            mounted($switcher) {
-                addClass($switcher, 'art-control-switcher');
-                $list = query('.art-switcher-list', $switcher);
-                $childs = queryAll('.art-switcher-item', $switcher);
-                $current = query('.art-switcher-current', $switcher);
-                const active = item.list.find((child) => child.name === item.default) || item.list[0];
-                if (active) {
-                    $current.innerText = active.text;
-                    const $active = $childs.find(($child) => $child.dataset.switcherName === active.name);
-                    if ($active) {
-                        inverseClass($active, 'art-current');
-                    }
-                }
-
-                hover($switcher, () => {
-                    $list.style.left = `-${getStyle($list, 'width') / 2 - getStyle($switcher, 'width') / 2}px`;
-                });
-            },
-            click(_, event) {
-                const name = event.target.dataset.switcherName;
-                if (name) {
-                    const active = item.list.find((child) => child.name === name);
-                    if (active) {
-                        const $active = $childs.find(($child) => $child.dataset.switcherName === active.name);
-                        $current.innerText = active.text;
-                        inverseClass($active, 'art-current');
-                        if (item.click) {
-                            item.click.call(art, name, event);
-                        }
-                    }
-                }
-            },
-        });
-    }
-
-    option.switcher.forEach(add);
-
-    return {
-        name: 'switcher',
-        add,
-    };
-}

packages/artplayer/src/utils/component.js

@@ -1,4 +1,4 @@
-import { hasClass, addClass, removeClass, append, setStyles, tooltip } from './dom';
+import { hasClass, addClass, removeClass, append, setStyles, tooltip, getStyle } from './dom';
 import { has, def } from './property';
 import { errorHandle } from './error';
 
@@ -36,64 +36,76 @@ export default class Component {
         errorHandle(!has(this, name), `Cannot add an existing name [${name}] to the [${this.name}]`);
 
         this.id += 1;
-        const $ref = document.createElement('div');
-        $ref.classList.value = `art-${this.name} art-${this.name}-${name}`;
+        const result = {};
+
+        result.$ref = document.createElement('div');
+        addClass(result.$ref, `art-${this.name}`);
+        addClass(result.$ref, `art-${this.name}-${name}`);
 
-        const $value = document.createElement('div');
         if (option.html) {
-            append($value, option.html);
-            append($ref, $value);
+            append(result.$ref, option.html);
         }
 
-        if (option.switcher) {
-            //
+        if (option.position !== 'top') {
+            // if (!(result.$ref.firstElementChild && result.$ref.firstElementChild.tagName === 'I')) {
+            //     addClass(result.$ref, 'art-control-onlyText');
+            // }
+
+            if (option.switcher) {
+                const { hover } = this.art.events;
+
+                addClass(result.$ref, 'art-control-switcher');
+                result.$value = document.createElement('div');
+                result.$value.classList.value = `art-switcher-value`;
+                append(result.$value, option.html);
+                result.$ref.innerHTML = '';
+                append(result.$ref, result.$value);
+
+                const $list = option.switcher.map((item) => `<div class="art-switcher-item">${item}</div>`).join('');
+                result.$switcher = document.createElement('div');
+                addClass(result.$switcher, 'art-switcher-list');
+                append(result.$switcher, $list);
+                append(result.$ref, result.$switcher);
+
+                hover(result.$ref, () => {
+                    result.$switcher.style.left = `-${
+                        getStyle(result.$switcher, 'width') / 2 - getStyle(result.$ref, 'width') / 2
+                    }px`;
+                });
+            }
         }
 
         if (option.style) {
-            setStyles($ref, option.style);
+            setStyles(result.$ref, option.style);
         }
 
         if (option.tooltip) {
-            tooltip($ref, option.tooltip);
+            tooltip(result.$ref, option.tooltip);
         }
 
         const childs = Array.from(this.$parent.children);
-        $ref.dataset.index = option.index || this.id;
-        const nextChild = childs.find((item) => Number(item.dataset.index) >= Number($ref.dataset.index));
+        result.$ref.dataset.index = option.index || this.id;
+        const nextChild = childs.find((item) => Number(item.dataset.index) >= Number(result.$ref.dataset.index));
         if (nextChild) {
-            nextChild.insertAdjacentElement('beforebegin', $ref);
+            nextChild.insertAdjacentElement('beforebegin', result.$ref);
         } else {
-            append(this.$parent, $ref);
+            append(this.$parent, result.$ref);
         }
 
-        const result = {
-            $ref,
-            $value,
-            get value() {
-                return $value.innerHTML;
-            },
-            set value(html) {
-                $value.innerHTML = html;
-            },
-        };
-
         def(this, name, {
             get: () => result,
         });
 
         if (option.click) {
-            this.art.events.proxy($ref, 'click', (event) => {
+            this.art.events.proxy(result.$ref, 'click', (event) => {
+                result.event = event;
                 event.preventDefault();
-                option.click.call(this.art, event);
+                option.click.call(this.art, result);
             });
         }
 
         if (option.mounted) {
-            option.mounted.call(this.art, $ref);
-        }
-
-        if (option.position !== 'top' && !($ref.firstElementChild && $ref.firstElementChild.tagName === 'I')) {
-            addClass($ref, 'art-control-onlyText');
+            option.mounted.call(this.art, result.$ref);
         }
     }
 }