refactor(html): separate provider and container concerns in createPlayer (#635)

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

@@ -11,11 +11,8 @@ import { combine, createStore } from '@videojs/store';
 
 import { type ContainerMixin, createContainerMixin } from '../store/container-mixin';
 import { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';
-import type { PlayerElementConstructor } from '../store/types';
-import { MediaElement } from '../ui/media-element';
 import { type PlayerContext, playerContext } from './context';
 import { PlayerController } from './player-controller';
-import { createPlayerMixin, type PlayerMixin } from './player-mixin';
 
 export interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {
   features: Features;
@@ -31,12 +28,6 @@ export interface CreatePlayerResult<Store extends PlayerStore> {
   /** Player controller bound to this player's context. */
   PlayerController: PlayerController.Constructor<Store>;
 
-  /** Pre-composed player element ready for customElements.define(). */
-  PlayerElement: PlayerElementConstructor<Store>;
-
-  /** Mixin for a complete player element (provider + container). */
-  PlayerMixin: PlayerMixin<Store>;
-
   /** Mixin that provides player context to descendants. */
   ProviderMixin: ProviderMixin<Store>;
 
@@ -52,15 +43,13 @@ export interface CreatePlayerResult<Store extends PlayerStore> {
  * import { features } from '@videojs/core/dom';
  * import { createPlayer, MediaElement } from '@videojs/html';
  *
- * const { PlayerElement, PlayerController, context } = createPlayer({
+ * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({
  *   features: features.video,
  * });
  *
- * // Simple: register pre-composed PlayerElement
- * customElements.define('video-player', PlayerElement);
- *
- * // Custom: extend with PlayerMixin
- * class MyPlayer extends PlayerMixin(MediaElement) {}
+ * // Provider element: owns the store, provides context to descendants
+ * class VideoPlayer extends ProviderMixin(MediaElement) {}
+ * customElements.define('video-player', VideoPlayer);
  *
  * // Control element with selector
  * class PlayButton extends MediaElement {
@@ -98,8 +87,6 @@ export function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): Cr
     return createStore<PlayerTarget>()(slice);
   }
 
-  const PlayerMixin = createPlayerMixin<PlayerStore>(playerContext, create);
-  const PlayerElement = PlayerMixin(MediaElement);
   const ProviderMixin = createProviderMixin<PlayerStore>(playerContext, create);
   const ContainerMixin = createContainerMixin<PlayerStore>(playerContext);
 
@@ -107,8 +94,6 @@ export function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): Cr
     context: playerContext,
     create,
     PlayerController,
-    PlayerElement,
-    PlayerMixin,
     ProviderMixin,
     ContainerMixin,
   };