fix(player): render captions when using embeds

closes #1047

Author: mihar-22

packages/vidstack/src/core/tracks/text/render/libass-text-renderer.ts

@@ -1,4 +1,5 @@
 import { DOMEvent, EventsTarget, isString, listenEvent } from 'maverick.js/std';
+
 import { TextTrackSymbol } from '../symbols';
 import type { TextTrack } from '../text-track';
 import type { TextRenderer } from './text-renderer';
@@ -15,14 +16,17 @@ export class LibASSTextRenderer implements TextRenderer {
     public config?: LibASSConfig,
   ) {}
 
-  canRender(track: TextTrack): boolean {
+  canRender(track: TextTrack, video: HTMLVideoElement | null): boolean {
     return (
+      !!video &&
       !!track.src &&
       ((isString(track.type) && this._typeRE.test(track.type)) || this._typeRE.test(track.src))
     );
   }
 
-  attach(video: HTMLVideoElement) {
+  attach(video: HTMLVideoElement | null) {
+    if (!video) return;
+
     this.loader().then(async (mod) => {
       this._instance = new mod.default({
         ...this.config,

packages/vidstack/src/core/tracks/text/render/native-text-renderer.ts

@@ -10,13 +10,13 @@ export class NativeTextRenderer implements TextRenderer {
   private _track: VdsTextTrack | null = null;
   private _tracks = new Set<VdsTextTrack>();
 
-  canRender() {
-    return true;
+  canRender(_, video: HTMLVideoElement | null) {
+    return !!video;
   }
 
-  attach(video: HTMLVideoElement) {
+  attach(video: HTMLVideoElement | null) {
     this._video = video;
-    video.textTracks.onchange = this._onChange.bind(this);
+    if (video) video.textTracks.onchange = this._onChange.bind(this);
   }
 
   addTrack(track: VdsTextTrack): void {

packages/vidstack/src/core/tracks/text/render/text-renderer.ts

@@ -77,17 +77,12 @@ export class TextRenderers {
   }
 
   private _update() {
-    if (!this._video) {
-      this._detach();
-      return;
-    }
-
     const currentTrack = this._textTracks.selected;
 
     // We identify text tracks that were embedded in HLS playlists and loaded natively (e.g., iOS
     // Safari) because we can't toggle mode to hidden and still get cue updates for some reason.
     // See `native-hls-text-tracks.ts` for discovery.
-    if (this._nativeDisplay || currentTrack?.[TextTrackSymbol._nativeHLS]) {
+    if (this._video && (this._nativeDisplay || currentTrack?.[TextTrackSymbol._nativeHLS])) {
       this._customRenderer?.changeTrack(null);
       this._nativeRenderer?.setDisplay(true);
       this._nativeRenderer?.changeTrack(currentTrack);
@@ -104,7 +99,7 @@ export class TextRenderers {
 
     const customRenderer = this._renderers
       .sort((a, b) => a.priority - b.priority)
-      .find((loader) => loader.canRender(currentTrack));
+      .find((renderer) => renderer.canRender(currentTrack, this._video));
 
     if (this._customRenderer !== customRenderer) {
       this._customRenderer?.detach();
@@ -125,8 +120,8 @@ export class TextRenderers {
 
 export interface TextRenderer {
   readonly priority: number;
-  canRender(track: TextTrack): boolean;
-  attach(video: HTMLVideoElement);
+  canRender(track: TextTrack, video: HTMLVideoElement | null): boolean;
+  attach(video: HTMLVideoElement | null);
   detach(): void;
   changeTrack(track: TextTrack | null): void;
 }