refactor(packages): move media host observed attributes to subclasses (#1326)

packages/core/src/dom/media/custom-media-element/index.ts

@@ -90,18 +90,14 @@ interface MediaHost extends EventTarget {
   [key: string]: any;
 }
 
-type MediaHostConstructor = Constructor<MediaHost> & {
-  observedAttributes?: string[];
-};
-
-type CustomMediaConstructor<T extends MediaHostConstructor> = Constructor<HTMLElement & InstanceType<T>> & {
+type CustomMediaConstructor<T extends Constructor<MediaHost>> = Constructor<HTMLElement & InstanceType<T>> & {
   properties: Record<string, { type: any; attribute?: string }>;
   getTemplateHTML: (attrs: Record<string, string>) => string;
   shadowRootOptions: ShadowRootInit;
   readonly observedAttributes: string[];
 };
 
-export function CustomMediaElement<T extends MediaHostConstructor>(
+export function CustomMediaElement<T extends Constructor<MediaHost>>(
   tag: string,
   MediaHost: T
 ): CustomMediaConstructor<T> {
@@ -134,7 +130,6 @@ export function CustomMediaElement<T extends MediaHostConstructor>(
       return [
         // biome-ignore lint/complexity/noThisInStatic: intentional use of this
         ...getAttrsFromProps(this.properties),
-        ...(MediaHost.observedAttributes ?? []),
       ];
     }
 
@@ -142,8 +137,6 @@ export function CustomMediaElement<T extends MediaHostConstructor>(
       if (isDefined) return;
       isDefined = true;
 
-      const Attributes = getAttrsFromProps(ctor.properties);
-
       for (let proto = MediaHost.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
         for (const prop of Object.getOwnPropertyNames(proto)) {
           if (prop in CustomMedia.prototype || excludedProperties.includes(prop)) continue;
@@ -167,9 +160,7 @@ export function CustomMediaElement<T extends MediaHostConstructor>(
 
             if (descriptor.set) {
               const attr = kebabCase(prop);
-              // If explicitly observed by the media host, or it's a native attribute,
-              // route through attributeChangedCallback.
-              if (MediaHost.observedAttributes?.includes(attr) || Attributes.includes(attr)) {
+              if (ctor.observedAttributes.includes(attr)) {
                 mediaHostAttrToProp.set(attr, prop);
 
                 config.set = function (this: CustomMedia, val: any) {

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

@@ -2,4 +2,9 @@ import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element
 import { HlsMedia } from '@videojs/core/dom/media/hls';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
 
-export class HlsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsMedia)) {}
+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'];
+  }
+}

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

@@ -2,4 +2,9 @@ import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element
 import { MuxAudioMedia } from '@videojs/core/dom/media/mux';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
 
-export class MuxAudio extends MediaAttachMixin(CustomMediaElement('audio', MuxAudioMedia)) {}
+export class MuxAudio extends MediaAttachMixin(CustomMediaElement('audio', MuxAudioMedia)) {
+  static get observedAttributes() {
+    // biome-ignore lint/complexity/noThisInStatic: intentional use of super
+    return [...super.observedAttributes, 'type', 'prefer-playback', 'debug'];
+  }
+}

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

@@ -2,4 +2,9 @@ import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element
 import { MuxVideoMedia } from '@videojs/core/dom/media/mux';
 import { MediaAttachMixin } from '../../store/media-attach-mixin';
 
-export class MuxVideo extends MediaAttachMixin(CustomMediaElement('video', MuxVideoMedia)) {}
+export class MuxVideo extends MediaAttachMixin(CustomMediaElement('video', MuxVideoMedia)) {
+  static get observedAttributes() {
+    // biome-ignore lint/complexity/noThisInStatic: intentional use of super
+    return [...super.observedAttributes, 'type', 'prefer-playback', 'debug'];
+  }
+}