feat(html): add PlayerElement to createPlayer (#376)

packages/html/src/store/container-mixin.ts

@@ -1,22 +1,18 @@
 import { ContextConsumer } from '@lit/context';
-import type { ReactiveElement } from '@lit/reactive-element';
 import type { MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';
 import { listen, querySlot } from '@videojs/utils/dom';
 import { Disposer } from '@videojs/utils/events';
 import { noop } from '@videojs/utils/function';
-import type { Constructor } from '@videojs/utils/types';
-
+import type { MediaElementConstructor } from '@/ui/media-element';
 import type { PlayerContext } from '../player/context';
-import type { PlayerConsumer } from './types';
+import type { PlayerConsumer, PlayerConsumerConstructor } from './types';
 
-type Base = Constructor<ReactiveElement>;
-
-type Result<Class extends Base, Store extends PlayerStore> = Class & Constructor<PlayerConsumer<Store>>;
-
-export type ContainerMixin<Store extends PlayerStore> = <Class extends Base>(BaseClass: Class) => Result<Class, Store>;
+export type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(
+  BaseClass: Class
+) => Class & PlayerConsumerConstructor<Store>;
 
 export function createContainerMixin<Store extends PlayerStore>(context: PlayerContext<Store>): ContainerMixin<Store> {
-  return <Class extends Base>(BaseClass: Class) => {
+  return <Class extends MediaElementConstructor>(BaseClass: Class) => {
     class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {
       #detach = noop;
       #disposer = new Disposer();

packages/html/src/store/provider-mixin.ts

@@ -1,23 +1,19 @@
 import { ContextProvider } from '@lit/context';
-import type { ReactiveElement } from '@lit/reactive-element';
 import type { Media, PlayerStore } from '@videojs/core/dom';
 import { isNull } from '@videojs/utils/predicate';
-import type { Constructor } from '@videojs/utils/types';
-
+import type { MediaElementConstructor } from '@/ui/media-element';
 import type { PlayerContext } from '../player/context';
-import type { PlayerProvider } from './types';
+import type { PlayerProvider, PlayerProviderConstructor } from './types';
 
-type Base = Constructor<ReactiveElement>;
-
-type Result<Class extends Base, Store extends PlayerStore> = Class & Constructor<PlayerProvider<Store>>;
-
-export type ProviderMixin<Store extends PlayerStore> = <Class extends Base>(BaseClass: Class) => Result<Class, Store>;
+export type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(
+  BaseClass: Class
+) => Class & PlayerProviderConstructor<Store>;
 
 export function createProviderMixin<Store extends PlayerStore>(
   context: PlayerContext<Store>,
   factory: () => Store
 ): ProviderMixin<Store> {
-  return <Class extends Base>(BaseClass: Class) => {
+  return <Class extends MediaElementConstructor>(BaseClass: Class) => {
     class PlayerProviderElement extends BaseClass implements PlayerProvider<Store> {
       #store: Store | null = null;
       #media: Media | null = null;

packages/html/src/store/types.ts

@@ -1,10 +1,32 @@
 import type { Media, PlayerStore } from '@videojs/core/dom';
+import type { Constructor } from '@videojs/utils/types';
+import type { MediaElement } from '@/ui/media-element';
 
-export interface PlayerProvider<Store extends PlayerStore> {
+// ----------------------------------------
+// PlayerElement
+// ----------------------------------------
+
+export interface PlayerElement<Store extends PlayerStore> extends MediaElement, PlayerProvider<Store> {}
+
+export interface PlayerElementConstructor<Store extends PlayerStore> extends Constructor<PlayerElement<Store>> {}
+
+// ----------------------------------------
+// PlayerProvider
+// ----------------------------------------
+
+export interface PlayerProvider<Store extends PlayerStore> extends MediaElement {
   readonly store: Store;
   media: Media | null;
 }
 
-export interface PlayerConsumer<Store extends PlayerStore> {
+export interface PlayerProviderConstructor<Store extends PlayerStore> extends Constructor<PlayerProvider<Store>> {}
+
+// ----------------------------------------
+// PlayerConsumer
+// ----------------------------------------
+
+export interface PlayerConsumer<Store extends PlayerStore> extends MediaElement {
   readonly store: Store | null;
 }
+
+export interface PlayerConsumerConstructor<Store extends PlayerStore> extends Constructor<PlayerConsumer<Store>> {}