fix(core): disable toggle captions when there are no captions (#1598)

packages/utils/src/dom/index.ts

@@ -26,6 +26,11 @@ export { getSlottedElement, querySlot } from './slotted';
 export { applyStyles, resolveCSSLength } from './style';
 export { supportsAnchorPositioning, supportsAnimationFrame, supportsIdleCallback } from './supports';
 export { createTemplate, renderTemplate } from './template';
-export { findTrackElement, getTextTrackList } from './text-track';
+export {
+  type CaptionOrSubtitleKind,
+  findTrackElement,
+  getTextTrackList,
+  isCaptionOrSubtitleTrack,
+} from './text-track';
 export { serializeTimeRanges } from './time-ranges';
 export type { CustomElement, CustomElementCallbacks } from './types';

packages/utils/src/dom/tests/text-track.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { findTrackElement } from '../text-track';
+import { findTrackElement, isCaptionOrSubtitleTrack } from '../text-track';
 
 /**
  * jsdom does not create unique TextTrack objects per <track> element,
@@ -12,6 +12,19 @@ function mockTrackProperty(el: HTMLTrackElement): TextTrack {
   return track;
 }
 
+describe('isCaptionOrSubtitleTrack', () => {
+  it('returns true for captions and subtitles tracks', () => {
+    expect(isCaptionOrSubtitleTrack({ kind: 'captions' })).toBe(true);
+    expect(isCaptionOrSubtitleTrack({ kind: 'subtitles' })).toBe(true);
+  });
+
+  it('returns false for other text track kinds', () => {
+    expect(isCaptionOrSubtitleTrack({ kind: 'chapters' })).toBe(false);
+    expect(isCaptionOrSubtitleTrack({ kind: 'metadata' })).toBe(false);
+    expect(isCaptionOrSubtitleTrack({ kind: 'descriptions' })).toBe(false);
+  });
+});
+
 describe('findTrackElement', () => {
   it('returns the track element that owns the given TextTrack', () => {
     const video = document.createElement('video');

packages/utils/src/dom/text-track.ts

@@ -1,3 +1,10 @@
+export type CaptionOrSubtitleKind = 'captions' | 'subtitles';
+
+/** Whether a text track is a captions or subtitles track. */
+export function isCaptionOrSubtitleTrack(track: { kind: string }): track is { kind: CaptionOrSubtitleKind } {
+  return track.kind === 'captions' || track.kind === 'subtitles';
+}
+
 /** Find the `<track>` element that owns the given `TextTrack`. */
 export function findTrackElement(media: EventTarget, track: unknown): HTMLTrackElement | null {
   if (!(media instanceof HTMLElement)) return null;