refactor(packages): move store attach lifecycle to provider (#975)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/html/src/player/context.ts

@@ -1,6 +1,10 @@
-import type { AnyPlayerStore, PlayerStore } from '@videojs/core/dom';
+import type { AnyPlayerStore, Media, MediaContainer, PlayerStore } from '@videojs/core/dom';
 import { type Context, createContext } from '@videojs/element/context';
 
+// ----------------------------------------
+// Player Context
+// ----------------------------------------
+
 export const PLAYER_CONTEXT_KEY = Symbol('@videojs/player');
 
 export type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;
@@ -16,3 +20,25 @@ export type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<
  * @public
  */
 export const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);
+
+// ----------------------------------------
+// Attach Contexts
+// ----------------------------------------
+
+export const MEDIA_ATTACH_KEY = Symbol('@videojs/media-attach');
+
+export type MediaAttachValue = (media: Media | null) => void;
+
+export type MediaAttachContext = Context<typeof MEDIA_ATTACH_KEY, MediaAttachValue>;
+
+export const mediaAttachContext = createContext<MediaAttachValue, typeof MEDIA_ATTACH_KEY>(MEDIA_ATTACH_KEY);
+
+export const CONTAINER_ATTACH_KEY = Symbol('@videojs/container-attach');
+
+export type ContainerAttachValue = (container: MediaContainer | null) => void;
+
+export type ContainerAttachContext = Context<typeof CONTAINER_ATTACH_KEY, ContainerAttachValue>;
+
+export const containerAttachContext = createContext<ContainerAttachValue, typeof CONTAINER_ATTACH_KEY>(
+  CONTAINER_ATTACH_KEY
+);

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

@@ -11,7 +11,7 @@ import { combine, createStore } from '@videojs/store';
 
 import { type ContainerMixin, createContainerMixin } from '../store/container-mixin';
 import { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';
-import { type PlayerContext, playerContext } from './context';
+import { containerAttachContext, mediaAttachContext, type PlayerContext, playerContext } from './context';
 import { PlayerController } from './player-controller';
 
 export interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {
@@ -31,7 +31,7 @@ export interface CreatePlayerResult<Store extends PlayerStore> {
   /** Mixin that provides player context to descendants. */
   ProviderMixin: ProviderMixin<Store>;
 
-  /** Mixin that consumes player context and auto-attaches media elements. */
+  /** Mixin that consumes player context and registers as the container element. */
   ContainerMixin: ContainerMixin<Store>;
 }
 
@@ -87,8 +87,17 @@ export function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): Cr
     return createStore<PlayerTarget>()(slice);
   }
 
-  const ProviderMixin = createProviderMixin<PlayerStore>(playerContext, create);
-  const ContainerMixin = createContainerMixin<PlayerStore>(playerContext);
+  const ProviderMixin = createProviderMixin<PlayerStore>({
+    playerContext,
+    mediaAttachContext,
+    containerAttachContext,
+    factory: create,
+  });
+
+  const ContainerMixin = createContainerMixin<PlayerStore>({
+    playerContext,
+    containerAttachContext,
+  });
 
   return {
     context: playerContext,