fix(html): discover media elements and attach store target via DOM (#481)

packages/html/src/player/context.ts

@@ -1,12 +1,9 @@
 import { type Context, createContext } from '@lit/context';
-import type { AnyPlayerStore, Media, PlayerStore } from '@videojs/core/dom';
+import type { AnyPlayerStore, PlayerStore } from '@videojs/core/dom';
 
 export const PLAYER_CONTEXT_KEY = Symbol('@videojs/player');
 
-export interface PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> {
-  store: Store;
-  media: Media | null;
-}
+export type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;
 
 export type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<
   typeof PLAYER_CONTEXT_KEY,

packages/html/src/player/create-player.ts

@@ -83,14 +83,13 @@ export function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): Cr
     return createStore<PlayerTarget>()(slice);
   }
 
-  const ctx = playerContext;
-  const PlayerMixin = createPlayerMixin<PlayerStore>(ctx, create);
+  const PlayerMixin = createPlayerMixin<PlayerStore>(playerContext, create);
   const PlayerElement = PlayerMixin(MediaElement);
-  const ProviderMixin = createProviderMixin<PlayerStore>(ctx, create);
-  const ContainerMixin = createContainerMixin<PlayerStore>(ctx);
+  const ProviderMixin = createProviderMixin<PlayerStore>(playerContext, create);
+  const ContainerMixin = createContainerMixin<PlayerStore>(playerContext);
 
   return {
-    context: ctx,
+    context: playerContext,
     create,
     PlayerController,
     PlayerElement,

packages/html/src/player/player-controller.ts

@@ -4,7 +4,7 @@ import type { PlayerStore } from '@videojs/core/dom';
 import type { InferStoreState, Selector } from '@videojs/store';
 import { StoreController } from '@videojs/store/lit';
 
-import type { PlayerContext, PlayerContextValue } from './context';
+import type { PlayerContext } from './context';
 
 export type PlayerControllerHost = ReactiveControllerHost & HTMLElement;
 
@@ -62,31 +62,28 @@ export class PlayerController<Store extends PlayerStore, Result = Store> impleme
   }
 
   get value(): Result | undefined {
-    const ctx = this.#consumer.value;
-    if (!ctx) return undefined;
+    const store = this.#consumer.value;
+    if (!store) return undefined;
 
     // Without selector: return store directly
-    if (!this.#selector) return ctx.store as unknown as Result;
+    if (!this.#selector) return store as unknown as Result;
 
     // With selector: use StoreController
     return this.#store?.value;
   }
 
   hostConnected(): void {
-    const ctx = this.#consumer.value;
-    if (ctx) this.#connect(ctx);
+    const store = this.#consumer.value;
+    if (store) this.#connect(store);
   }
 
   hostDisconnected(): void {
     this.#store = null;
   }
 
-  #connect(ctx: PlayerContextValue<Store> | undefined): void {
-    if (!ctx) return;
-
-    // Create StoreController with the store directly
+  #connect(store: Store): void {
     if (!this.#store && this.#selector) {
-      this.#store = new StoreController(this.#host, ctx.store, this.#selector);
+      this.#store = new StoreController(this.#host, store, this.#selector);
     }
   }
 }

packages/html/src/player/player-mixin.ts

@@ -25,6 +25,6 @@ export function createPlayerMixin<Store extends PlayerStore>(
   const ContainerMixin = createContainerMixin<Store>(context);
 
   return <Class extends MediaElementConstructor>(BaseClass: Class) => {
-    return ContainerMixin(ProviderMixin(BaseClass)) as unknown as Result<Class, Store>;
+    return ProviderMixin(ContainerMixin(BaseClass)) as unknown as Result<Class, Store>;
   };
 }