feat: 优化字幕事件逻辑，新增字幕加载和更新事件，删除不再使用的字幕切换事件

packages/artplayer-vitepress/docs/advanced/event.md

@@ -580,9 +580,9 @@ art.on('subtitleOffset', (offset) => {
 });
 ```
 
-## `subtitleUpdate`
+## `subtitleBeforeUpdate`
 
-当字幕更新时触发
+当字幕更新前触发
 
 <div className="run-code">▶ Run Code</div>
 
@@ -595,8 +595,28 @@ var art = new Artplayer({
     },
 });
 
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
+art.on('subtitleBeforeUpdate', (cue) => {
+    console.info('subtitleBeforeUpdate', cue);
+});
+```
+
+## `subtitleAfterUpdate`
+
+当字幕更新后触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleAfterUpdate', (cue) => {
+    console.info('subtitleAfterUpdate', cue);
 });
 ```
 
@@ -615,32 +635,8 @@ var art = new Artplayer({
     },
 });
 
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});
-```
-
-## `subtitleSwitch`
-
-当字幕切换时触发
-
-<div className="run-code">▶ Run Code</div>
-
-```js{13}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
-
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
+art.on('subtitleLoad', (option, cues) => {
+    console.info('subtitleLoad', option, cues);
 });
 ```
 

packages/artplayer-vitepress/docs/en/advanced/event.md

@@ -571,9 +571,10 @@ art.on('subtitleOffset', (offset) => {
     console.info('subtitleOffset', offset);
 });
 ```
-## `subtitleUpdate`
 
-Triggered when the subtitle updates
+## `subtitleBeforeUpdate`
+
+Triggered before subtitles are updated
 
 <div className="run-code">▶ Run Code</div>
 
@@ -586,8 +587,28 @@ var art = new Artplayer({
     },
 });
 
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
+art.on('subtitleBeforeUpdate', (cue) => {
+    console.info('subtitleBeforeUpdate', cue);
+});
+```
+
+## `subtitleAfterUpdate`
+
+Triggered when the subtitles are updated
+
+<div className="run-code">▶ Run Code</div>
+
+```js{9}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleAfterUpdate', (cue) => {
+    console.info('subtitleAfterUpdate', cue);
 });
 ```
 
@@ -606,31 +627,8 @@ var art = new Artplayer({
     },
 });
 
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});
-```
-## `subtitleSwitch`
-
-Triggered when subtitles switch
-
-<div className="run-code">▶ Run Code</div>
-
-```js{13}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
-
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
+art.on('subtitleLoad', (option, cues) => {
+    console.info('subtitleLoad', option, cues);
 });
 ```
 

packages/artplayer/src/subtitle.js

@@ -18,6 +18,7 @@ export default class Subtitle extends Component {
     constructor(art) {
         super(art);
         this.name = 'subtitle';
+        this.option = null;
         this.eventDestroy = () => null;
         this.init(art.option.subtitle);
 
@@ -100,13 +101,13 @@ export default class Subtitle extends Component {
         $newTrack.src = url;
         $newTrack.label = option.subtitle.name || 'Artplayer';
         $newTrack.track.mode = 'hidden';
-        $newTrack.onload = (event) => {
-            this.art.emit('subtitleTrackLoad', $newTrack, event);
+        $newTrack.onload = () => {
+            this.art.emit('subtitleLoad', this.option, this.cues);
         };
 
         this.eventDestroy();
+        $track.onload = null;
         remove($track);
-
         append($video, $newTrack);
         template.$track = $newTrack;
         this.eventDestroy = proxy(this.textTrack, 'cuechange', () => this.update());
@@ -121,6 +122,7 @@ export default class Subtitle extends Component {
         if (!this.textTrack) return null;
         validator(subtitleOption, scheme.subtitle);
         if (!subtitleOption.url) return;
+        this.option = subtitleOption;
         this.style(subtitleOption.style);
 
         return fetch(subtitleOption.url)
@@ -128,7 +130,6 @@ export default class Subtitle extends Component {
             .then((buffer) => {
                 const decoder = new TextDecoder(subtitleOption.encoding);
                 const text = decoder.decode(buffer);
-                this.art.emit('subtitleLoad', subtitleOption.url);
                 switch (subtitleOption.type || getExt(subtitleOption.url)) {
                     case 'srt': {
                         const vtt = srtToVtt(text);
@@ -153,7 +154,6 @@ export default class Subtitle extends Component {
                 if (this.url === subUrl) return subUrl;
                 URL.revokeObjectURL(this.url);
                 this.createTrack('metadata', subUrl);
-                this.art.emit('subtitleSwitch', subUrl, subtitleOption.url);
                 return subUrl;
             })
             .catch((err) => {

packages/artplayer/types/events.d.ts

@@ -1,4 +1,5 @@
 import { AspectRatio, Flip } from './player';
+import { Subtitle } from './subtitle';
 
 export type Bar = 'loaded' | 'played' | 'hover';
 
@@ -36,12 +37,10 @@ export type Events = {
     setting: [state: boolean];
     hotkey: [event: Event];
     destroy: [];
+    subtitleOffset: [offset: number];
     subtitleBeforeUpdate: [cue: VTTCue];
     subtitleAfterUpdate: [cue: VTTCue];
-    subtitleLoad: [url: string];
-    subtitleSwitch: [url: string];
-    subtitleTrackLoad: [track: HTMLTrackElement, event: Event];
-    subtitleOffset: [offset: number];
+    subtitleLoad: [option: Subtitle, cues: TextTrackCueList];
     focus: [event: Event];
     blur: [event: Event];
     dblclick: [event: Event];