feat(media)!: add Google Cast by default to HLS, DASH media (#1661)

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

@@ -1,5 +1,12 @@
 import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';
 import { DashMedia } from '@videojs/core/dom/media/dash';
+import { GoogleCast } from '@videojs/core/dom/media/google-cast';
+import { addComponent } from '@videojs/core/dom/media/media-host';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
 
-export class DashVideo extends MediaAttachMixin(CustomMediaElement('video', DashMedia)) {}
+export class DashVideo extends MediaAttachMixin(CustomMediaElement('video', DashMedia)) {
+  constructor() {
+    super();
+    addComponent(this.host, new GoogleCast());
+  }
+}

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

@@ -1,10 +1,12 @@
 import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';
+import { GoogleCast } from '@videojs/core/dom/media/google-cast';
 import { HlsMedia } from '@videojs/core/dom/media/hls';
+import { addComponent } from '@videojs/core/dom/media/media-host';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
 
 export class HlsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsMedia)) {
-  static get observedAttributes() {
-    // biome-ignore lint/complexity/noThisInStatic: intentional use of super
-    return [...super.observedAttributes, 'type', 'prefer-playback', 'debug'];
+  constructor() {
+    super();
+    addComponent(this.host, new GoogleCast());
   }
 }

packages/html/src/media/mux-audio/index.ts

@@ -1,18 +1,14 @@
 import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';
-import { MuxAudioMedia } from '@videojs/core/dom/media/mux';
+import { GoogleCast } from '@videojs/core/dom/media/google-cast';
+import { HlsMedia } from '@videojs/core/dom/media/hls';
+import { addComponent } from '@videojs/core/dom/media/media-host';
+import { MuxData } from '@videojs/core/dom/media/mux';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
 
-export class MuxAudio extends MediaAttachMixin(CustomMediaElement('audio', MuxAudioMedia)) {
-  static get observedAttributes() {
-    return [
-      // biome-ignore lint/complexity/noThisInStatic: intentional use of super
-      ...super.observedAttributes,
-      'type',
-      'prefer-playback',
-      'debug',
-      'cast-src',
-      'cast-receiver',
-      'cast-content-type',
-    ];
+export class MuxAudio extends MediaAttachMixin(CustomMediaElement('audio', HlsMedia)) {
+  constructor() {
+    super();
+    addComponent(this.host, new MuxData({ playerSoftwareName: 'mux-audio' }));
+    addComponent(this.host, new GoogleCast());
   }
 }

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

@@ -1,18 +1,14 @@
 import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';
-import { MuxVideoMedia } from '@videojs/core/dom/media/mux';
+import { GoogleCast } from '@videojs/core/dom/media/google-cast';
+import { HlsMedia } from '@videojs/core/dom/media/hls';
+import { addComponent } from '@videojs/core/dom/media/media-host';
+import { MuxData } from '@videojs/core/dom/media/mux';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
 
-export class MuxVideo extends MediaAttachMixin(CustomMediaElement('video', MuxVideoMedia)) {
-  static get observedAttributes() {
-    return [
-      // biome-ignore lint/complexity/noThisInStatic: intentional use of super
-      ...super.observedAttributes,
-      'type',
-      'prefer-playback',
-      'debug',
-      'cast-src',
-      'cast-receiver',
-      'cast-content-type',
-    ];
+export class MuxVideo extends MediaAttachMixin(CustomMediaElement('video', HlsMedia)) {
+  constructor() {
+    super();
+    addComponent(this.host, new MuxData({ playerSoftwareName: 'mux-video' }));
+    addComponent(this.host, new GoogleCast());
   }
 }

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

@@ -1,5 +1,12 @@
 import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';
+import { GoogleCast } from '@videojs/core/dom/media/google-cast';
+import { addComponent } from '@videojs/core/dom/media/media-host';
 import { NativeHlsMedia } from '@videojs/core/dom/media/native-hls';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
 
-export class NativeHlsVideo extends MediaAttachMixin(CustomMediaElement('video', NativeHlsMedia)) {}
+export class NativeHlsVideo extends MediaAttachMixin(CustomMediaElement('video', NativeHlsMedia)) {
+  constructor() {
+    super();
+    addComponent(this.host, new GoogleCast());
+  }
+}

packages/html/src/media/tests/mux-video.test.ts

@@ -0,0 +1,35 @@
+import { MuxData } from '@videojs/core/dom/media/mux';
+import { afterEach, describe, expect, it } from 'vitest';
+import { MuxVideo } from '../mux-video';
+
+customElements.define('test-mux-video', MuxVideo);
+
+function createMuxVideo() {
+  const el = new MuxVideo();
+  // Prevent the real Mux SDK from initializing (and beaconing) in tests.
+  el.config = { muxData: { MuxDataSdk: undefined } };
+  document.body.appendChild(el);
+  return el;
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('MuxVideo', () => {
+  it('exposes the mux data component config on element config', () => {
+    const el = createMuxVideo();
+
+    expect(el.config.muxData).toBeInstanceOf(MuxData);
+    expect((el.config.muxData as MuxData).playerSoftwareName).toBe('mux-video');
+  });
+
+  it('routes component config writes to the component', () => {
+    const el = createMuxVideo();
+
+    el.config = { muxData: { envKey: 'test-key' } };
+
+    expect(el.config.muxData?.envKey).toBe('test-key');
+    expect(el.hasAttribute('config')).toBe(false);
+  });
+});