diff --git a/packages/core/src/dom/media/custom-media-element/index.ts b/packages/core/src/dom/media/custom-media-element/index.ts index e321ca82..865c5521 100644 --- a/packages/core/src/dom/media/custom-media-element/index.ts +++ b/packages/core/src/dom/media/custom-media-element/index.ts @@ -90,18 +90,14 @@ interface MediaHost extends EventTarget { [key: string]: any; } -type MediaHostConstructor = Constructor & { - observedAttributes?: string[]; -}; - -type CustomMediaConstructor = Constructor> & { +type CustomMediaConstructor> = Constructor> & { properties: Record; getTemplateHTML: (attrs: Record) => string; shadowRootOptions: ShadowRootInit; readonly observedAttributes: string[]; }; -export function CustomMediaElement( +export function CustomMediaElement>( tag: string, MediaHost: T ): CustomMediaConstructor { @@ -134,7 +130,6 @@ export function CustomMediaElement( return [ // biome-ignore lint/complexity/noThisInStatic: intentional use of this ...getAttrsFromProps(this.properties), - ...(MediaHost.observedAttributes ?? []), ]; } @@ -142,8 +137,6 @@ export function CustomMediaElement( 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( 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) { diff --git a/packages/html/src/media/hls-video/index.ts b/packages/html/src/media/hls-video/index.ts index 3ae74393..d38e5c90 100644 --- a/packages/html/src/media/hls-video/index.ts +++ b/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']; + } +} diff --git a/packages/html/src/media/mux-audio/index.ts b/packages/html/src/media/mux-audio/index.ts index 17785383..eabc86e2 100644 --- a/packages/html/src/media/mux-audio/index.ts +++ b/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']; + } +} diff --git a/packages/html/src/media/mux-video/index.ts b/packages/html/src/media/mux-video/index.ts index 0c35fa03..a6c9e325 100644 --- a/packages/html/src/media/mux-video/index.ts +++ b/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']; + } +}