feat: add subtitles handling + captions core (#692)

packages/html/src/define/ui/captions-button.ts

@@ -0,0 +1,9 @@
+import { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';
+
+customElements.define(CaptionsButtonElement.tagName, CaptionsButtonElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [CaptionsButtonElement.tagName]: CaptionsButtonElement;
+  }
+}

packages/html/src/index.ts

@@ -15,6 +15,7 @@ export * from './store/provider-mixin';
 export * from './store/types';
 // UI Components
 export { BufferingIndicatorElement } from './ui/buffering-indicator/buffering-indicator-element';
+export { CaptionsButtonElement } from './ui/captions-button/captions-button-element';
 export { ControlsElement } from './ui/controls/controls-element';
 export { ControlsGroupElement } from './ui/controls/controls-group-element';
 export { FullscreenButtonElement } from './ui/fullscreen-button/fullscreen-button-element';

packages/html/src/media/hls-video/index.ts

@@ -13,7 +13,7 @@ export class HlsVideo extends HlsCustomMedia {
     // are appended after the custom element is created, we need to
     // attach the native element to the Media API after the native element
     // is appended to the DOM. This is currently not supported.
-    this.attach(this.nativeEl);
+    this.attach(this.target);
   }
 
   attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {

packages/html/src/ui/captions-button/captions-button-element.ts

@@ -0,0 +1,18 @@
+import { CaptionsButtonCore, CaptionsButtonDataAttrs, type MediaTextTrackState } from '@videojs/core';
+import { selectTextTrack } from '@videojs/core/dom';
+
+import { playerContext } from '../../player/context';
+import { PlayerController } from '../../player/player-controller';
+import { MediaButtonElement } from '../media-button-element';
+
+export class CaptionsButtonElement extends MediaButtonElement<CaptionsButtonCore> {
+  static readonly tagName = 'media-captions-button';
+
+  protected readonly core = new CaptionsButtonCore();
+  protected readonly stateAttrMap = CaptionsButtonDataAttrs;
+  protected readonly mediaState = new PlayerController(this, playerContext, selectTextTrack);
+
+  protected activate(state: MediaTextTrackState): void {
+    this.core.toggle(state);
+  }
+}