feat: 增加字幕相关属性和事件，优化字幕切换逻辑

packages/artplayer/src/player/subtitleOffsetMix.js

@@ -6,7 +6,7 @@ export default function subtitleOffsetMix(art) {
 
     let offsetCache = 0;
     let cuesCache = [];
-    art.on('subtitle:switch', () => {
+    art.on('subtitleSwitch', () => {
         cuesCache = [];
     });
 

packages/artplayer/src/subtitle.js

@@ -50,6 +50,11 @@ export default class Subtitle extends Component {
         return this.textTrack.activeCues[0];
     }
 
+    get cues() {
+        if (!this.textTrack) return [];
+        return Array.from(this.textTrack.cues);
+    }
+
     style(key, value) {
         const { $subtitle } = this.art.template;
         if (typeof key === 'object') {
@@ -62,6 +67,7 @@ export default class Subtitle extends Component {
         const { $subtitle } = this.art.template;
         $subtitle.innerHTML = '';
         if (this.activeCue) {
+            this.art.emit('subtitleBeforeUpdate', this.activeCue);
             if (this.art.option.subtitle.escape) {
                 $subtitle.innerHTML = this.activeCue.text
                     .split(/\r?\n/)
@@ -70,7 +76,7 @@ export default class Subtitle extends Component {
             } else {
                 $subtitle.innerHTML = this.activeCue.text;
             }
-            this.art.emit('subtitleUpdate', this.activeCue.text);
+            this.art.emit('subtitleAfterUpdate', this.activeCue);
         }
     }
 
@@ -94,6 +100,9 @@ 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);
+        };
 
         this.eventDestroy();
         remove($track);

packages/artplayer/types/artplayer.d.ts

@@ -152,6 +152,9 @@ declare class Artplayer extends Player {
     readonly subtitle: {
         get url(): string;
         set url(url: string);
+        get textTrack(): TextTrack;
+        get activeCue(): VTTCue;
+        get cues(): TextTrackCueList;
         style(name: string | Partial<CSSStyleDeclaration>, value?: string): void;
         switch(url: string, option?: Subtitle): Promise<string>;
     } & Component;

packages/artplayer/types/events.d.ts

@@ -36,9 +36,11 @@ export type Events = {
     setting: [state: boolean];
     hotkey: [event: Event];
     destroy: [];
-    subtitleUpdate: [text: string];
+    subtitleBeforeUpdate: [cue: VTTCue];
+    subtitleAfterUpdate: [cue: VTTCue];
     subtitleLoad: [url: string];
     subtitleSwitch: [url: string];
+    subtitleTrackLoad: [track: HTMLTrackElement, event: Event];
     focus: [event: Event];
     blur: [event: Event];
     dblclick: [event: Event];