zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(html): add element registrations

Browse Source
This commit is contained in:
Rahim
2025-10-30 04:51:51 +00:00
parent 9e4af60361
commit eaaa03c284
54 changed files with 374 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/media/media-container.ts
+4 -9
View File
@@ -13,9 +13,9 @@ export function getTemplateHTML() {
`;
}
const CustomElementConsumer: Constructor<CustomElement> = ConsumerMixin(HTMLElement);
const CustomElementConsumer: Constructor<CustomElement & HTMLElement> = ConsumerMixin(HTMLElement);
export class MediaContainer extends CustomElementConsumer {
export class MediaContainerElement extends CustomElementConsumer {
static shadowRootOptions = { mode: 'open' as ShadowRootMode };
static getTemplateHTML: () => string = getTemplateHTML;
@@ -35,8 +35,8 @@ export class MediaContainer extends CustomElementConsumer {
super();
if (!this.shadowRoot) {
this.attachShadow((this.constructor as typeof MediaContainer).shadowRootOptions);
this.shadowRoot!.innerHTML = (this.constructor as typeof MediaContainer).getTemplateHTML();
this.attachShadow((this.constructor as typeof MediaContainerElement).shadowRootOptions);
this.shadowRoot!.innerHTML = (this.constructor as typeof MediaContainerElement).getTemplateHTML();
}
this._mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;
@@ -92,8 +92,3 @@ export class MediaContainer extends CustomElementConsumer {
});
};
}
if (!globalThis.customElements.get('media-container')) {
// @ts-expect-error ts(2345)
globalThis.customElements.define('media-container', MediaContainer);
}
packages/html/src/media/media-provider.ts
+2 -5
View File
@@ -4,15 +4,12 @@ import type { MediaStore } from '@videojs/core/store';
import { ProviderMixin } from '@open-wc/context-protocol';
import { createMediaStore } from '@videojs/core/store';
const ProviderHTMLElement: Constructor<CustomElement> = ProviderMixin(HTMLElement);
const ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);
export class MediaProvider extends ProviderHTMLElement {
export class MediaProviderElement extends ProviderHTMLElement {
contexts = {
mediaStore: (): MediaStore => {
return createMediaStore();
},
};
}
// @ts-expect-error - fix types after (Rahim)
customElements.define('media-provider', MediaProvider);
packages/html/src/media/media-skin.ts
+3 -7
View File
@@ -15,7 +15,7 @@ export function getTemplateHTML() {
`;
}
export class MediaSkin extends HTMLElement {
export class MediaSkinElement extends HTMLElement {
static shadowRootOptions = { mode: 'open' as ShadowRootMode };
static getTemplateHTML: () => string = getTemplateHTML;
@@ -23,12 +23,8 @@ export class MediaSkin extends HTMLElement {
super();
if (!this.shadowRoot) {
this.attachShadow((this.constructor as typeof MediaSkin).shadowRootOptions);
this.shadowRoot!.innerHTML = (this.constructor as typeof MediaSkin).getTemplateHTML();
this.attachShadow((this.constructor as typeof MediaSkinElement).shadowRootOptions);
this.shadowRoot!.innerHTML = (this.constructor as typeof MediaSkinElement).getTemplateHTML();
}
}
}
if (!customElements.get('media-skin')) {
customElements.define('media-skin', MediaSkin);
}