update component.d.ts

packages/artplayer/src/setting/index.js

@@ -39,7 +39,7 @@ export default class Setting extends Component {
             art.on('blur', () => {
                 if (this.show) {
                     this.show = false;
-                    this.init(this.option);
+                    this.render(this.option);
                 }
             });
 
@@ -50,7 +50,7 @@ export default class Setting extends Component {
                     !includeFromEvent(event, this.$parent)
                 ) {
                     this.show = false;
-                    this.init(this.option);
+                    this.render(this.option);
                 }
             });
         }
@@ -89,23 +89,24 @@ export default class Setting extends Component {
         return result;
     }
 
-    update(settings = []) {
-        const { option, events } = this.art;
-        if (!option.setting) return;
-
+    remove() {
         for (let index = 0; index < this.events.length; index++) {
             const destroyEvent = this.events[index];
-            events.remove(destroyEvent);
+            this.art.events.remove(destroyEvent);
             destroyEvent();
         }
-
-        this.events = [];
-        this.show = false;
-        this.cache = new Map();
         this.$parent.innerHTML = '';
+    }
+
+    update(settings = []) {
+        const { option } = this.art;
+        if (!option.setting) return;
+        this.remove();
+        this.events = [];
+        this.cache = new Map();
         const mergeSettings = [...this.defaultSettings, ...settings];
         this.option = Setting.makeRecursion(mergeSettings);
-        this.init(this.option);
+        this.render(this.option);
         return this.option;
     }
 
@@ -126,7 +127,7 @@ export default class Setting extends Component {
         append($icon, icons.arrowLeft);
         append($left, $icon);
         append($left, item.$parentItem.html);
-        const event = proxy($item, 'click', () => this.init(item.$parentList));
+        const event = proxy($item, 'click', () => this.render(item.$parentList));
         this.events.push(event);
         return $item;
     }
@@ -318,7 +319,7 @@ export default class Setting extends Component {
                 {
                     const event = proxy($item, 'click', async (event) => {
                         if (item.selector && item.selector.length) {
-                            this.init(item.selector, item.width);
+                            this.render(item.selector, item.width);
                         } else {
                             inverseClass($item, 'art-current');
 
@@ -328,7 +329,7 @@ export default class Setting extends Component {
                             }
 
                             if (item.$parentList) {
-                                this.init(item.$parentList);
+                                this.render(item.$parentList);
                             }
 
                             if (item.$parentItem && item.$parentItem.onSelect) {
@@ -376,7 +377,7 @@ export default class Setting extends Component {
         }
     }
 
-    init(option, width) {
+    render(option, width) {
         const { constructor } = this.art;
 
         if (this.cache.has(option)) {

packages/artplayer/src/utils/component.js

@@ -48,11 +48,10 @@ export default class Component {
         const option = typeof getOption === 'function' ? getOption(this.art) : getOption;
         option.html = option.html || '';
         validator(option, ComponentOption);
-
         if (!this.$parent || !this.name || option.disable) return;
         const name = option.name || `${this.name}${this.id}`;
         const item = this.cache.get(name);
-        errorHandle(!item, `Can't add an existing name [${name}] to the [${this.name}]`);
+        errorHandle(!item, `Can't add an existing [${name}] to the [${this.name}]`);
 
         this.id += 1;
         const $ref = createElement('div');
@@ -157,7 +156,7 @@ export default class Component {
 
     remove(name) {
         const item = this.cache.get(name);
-        errorHandle(item, `Can't find name [${name}] to the [${this.name}]`);
+        errorHandle(item, `Can't find [${name}] from the [${this.name}]`);
 
         for (let index = 0; index < item.events.length; index++) {
             const destroyEvent = item.events[index];
@@ -169,9 +168,9 @@ export default class Component {
         delete this[name];
     }
 
-    update(option = {}) {
+    update(option) {
         const item = this.cache.get(option.name);
         if (item) this.remove(option.name);
-        this.add(option);
+        return this.add(option);
     }
 }

packages/artplayer/types/component.d.ts

@@ -41,12 +41,22 @@ export type Component = {
     /**
      * Toggle the component parent
      */
-    set toggle(state: boolean);
+    toggle(): void;
 
     /**
      * Dynamic add a component
      */
     add(option: ComponentOption): HTMLElement;
+
+    /**
+     * Dynamic remove a component
+     */
+    remove(): void;
+
+    /**
+     * Dynamic update a component
+     */
+    update(option: ComponentOption): HTMLElement;
 };
 
 export type ComponentOption = {