Refactor Artplayer class to update import path for Component

packages/artplayer/src/setting/index.js

@@ -2,7 +2,7 @@ import flip from './flip';
 import aspectRatio from './aspectRatio';
 import playbackRate from './playbackRate';
 import subtitleOffset from './subtitleOffset';
-import Component from '../utils/Component';
+import Component from '../utils/component';
 import {
     def,
     has,
@@ -177,12 +177,15 @@ export default class Setting extends Component {
         errorHandle(item, `Can't find [${name}] in the [setting]`);
         const index = item.$option.indexOf(item);
         item.$option.splice(index, 1);
+
         for (let index = 0; index < item.$events.length; index++) {
-            item.$events[index]();
+            this.art.events.remove(item.$events[index]);
         }
+
         if (item.$item) {
             remove(item.$item);
         }
+
         item.$events.length = 0;
         this.render();
     }

packages/artplayer/src/subtitle.js

@@ -19,7 +19,7 @@ export default class Subtitle extends Component {
         super(art);
         this.name = 'subtitle';
         this.option = null;
-        this.eventDestroy = () => null;
+        this.destroyEvent = () => null;
         this.init(art.option.subtitle);
 
         let lastState = false;
@@ -115,12 +115,12 @@ export default class Subtitle extends Component {
             this.art.emit('subtitleLoad', this.cues, this.option);
         };
 
-        this.eventDestroy();
+        this.art.events.remove(this.destroyEvent);
         $track.onload = null;
         remove($track);
         append($video, $newTrack);
         template.$track = $newTrack;
-        this.eventDestroy = proxy(this.textTrack, 'cuechange', () => this.update());
+        this.destroyEvent = proxy(this.textTrack, 'cuechange', () => this.update());
     }
 
     async init(subtitleOption) {