refactor(packages): simplify createPlayer type signatures (#477)

packages/html/src/define/player/video.ts

@@ -3,7 +3,7 @@ import { MediaElement } from '@/ui/media-element';
 import { createPlayer } from '../../player/create-player';
 
 const { PlayerMixin } = createPlayer({
-  features: [...features.video],
+  features: features.video,
 });
 
 export class VideoPlayer extends PlayerMixin(MediaElement) {}

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

@@ -1,4 +1,12 @@
-import type { AnyPlayerFeature, PlayerStore, PlayerTarget } from '@videojs/core/dom';
+import type {
+  AnyPlayerFeature,
+  AudioFeatures,
+  AudioPlayerStore,
+  PlayerStore,
+  PlayerTarget,
+  VideoFeatures,
+  VideoPlayerStore,
+} from '@videojs/core/dom';
 import { combine, createStore } from '@videojs/store';
 
 import { type ContainerMixin, createContainerMixin } from '../store/container-mixin';
@@ -45,7 +53,7 @@ export interface CreatePlayerResult<Store extends PlayerStore> {
  * import { createPlayer, MediaElement } from '@videojs/html';
  *
  * const { PlayerElement, PlayerController, context } = createPlayer({
- *   features: [...features.video],
+ *   features: features.video,
  * });
  *
  * // Simple: register pre-composed PlayerElement
@@ -60,23 +68,26 @@ export interface CreatePlayerResult<Store extends PlayerStore> {
  * }
  * ```
  */
+export function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;
+
+export function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;
+
 export function createPlayer<const Features extends AnyPlayerFeature[]>(
   config: CreatePlayerConfig<Features>
-): CreatePlayerResult<PlayerStore<Features>> {
-  type Store = PlayerStore<Features>;
+): CreatePlayerResult<PlayerStore<Features>>;
 
-  const slice = combine<PlayerTarget, Features>(...config.features);
+export function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<PlayerStore> {
+  const slice = combine<PlayerTarget, AnyPlayerFeature[]>(...config.features);
 
-  function create(): Store {
+  function create(): PlayerStore {
     return createStore<PlayerTarget>()(slice);
   }
 
-  const ctx = playerContext as PlayerContext<Store>;
-
-  const PlayerMixin = createPlayerMixin<Store>(ctx, create);
+  const ctx = playerContext;
+  const PlayerMixin = createPlayerMixin<PlayerStore>(ctx, create);
   const PlayerElement = PlayerMixin(MediaElement);
-  const ProviderMixin = createProviderMixin<Store>(ctx, create);
-  const ContainerMixin = createContainerMixin<Store>(ctx);
+  const ProviderMixin = createProviderMixin<PlayerStore>(ctx, create);
+  const ContainerMixin = createContainerMixin<PlayerStore>(ctx);
 
   return {
     context: ctx,

packages/html/src/player/tests/create-player.test-d.ts

@@ -0,0 +1,84 @@
+import type { AudioPlayerStore, PlayerStore, PlayerTarget, VideoPlayerStore } from '@videojs/core/dom';
+import { definePlayerFeature, features } from '@videojs/core/dom';
+import type { Slice } from '@videojs/store';
+import { assertType, describe, it } from 'vitest';
+
+import { type CreatePlayerResult, createPlayer } from '../create-player';
+
+describe('createPlayer', () => {
+  it('resolves video features to VideoPlayerStore', () => {
+    const result = createPlayer({ features: features.video });
+
+    assertType<CreatePlayerResult<VideoPlayerStore>>(result);
+  });
+
+  it('resolves audio features to AudioPlayerStore', () => {
+    const result = createPlayer({ features: features.audio });
+
+    assertType<CreatePlayerResult<AudioPlayerStore>>(result);
+  });
+
+  it('resolves spread video features to VideoPlayerStore', () => {
+    const result = createPlayer({ features: [...features.video] });
+
+    assertType<CreatePlayerResult<VideoPlayerStore>>(result);
+  });
+
+  it('resolves custom features to generic PlayerStore', () => {
+    interface CustomState {
+      custom: boolean;
+    }
+
+    const customFeature = definePlayerFeature({
+      state: (): CustomState => ({ custom: true }),
+    });
+
+    const result = createPlayer({ features: [customFeature] });
+
+    assertType<CreatePlayerResult<PlayerStore<[Slice<PlayerTarget, CustomState>]>>>(result);
+  });
+
+  it('resolves extended video features to generic PlayerStore', () => {
+    interface AnalyticsState {
+      events: string[];
+    }
+
+    const analyticsFeature = definePlayerFeature({
+      state: (): AnalyticsState => ({ events: [] }),
+    });
+
+    const result = createPlayer({
+      features: [...features.video, analyticsFeature],
+    });
+
+    // Extended features fall through to the generic overload
+    assertType<CreatePlayerResult<PlayerStore<[...typeof features.video, typeof analyticsFeature]>>>(result);
+
+    // The store has both video and analytics state
+    const store = result.create();
+
+    assertType<boolean>(store.paused);
+    assertType<number>(store.volume);
+    assertType<string[]>(store.events);
+  });
+
+  it('resolves extended audio features to generic PlayerStore', () => {
+    interface AnalyticsState {
+      events: string[];
+    }
+
+    const analyticsFeature = definePlayerFeature({
+      state: (): AnalyticsState => ({ events: [] }),
+    });
+
+    const result = createPlayer({
+      features: [...features.audio, analyticsFeature],
+    });
+
+    const store = result.create();
+
+    assertType<boolean>(store.paused);
+    assertType<number>(store.volume);
+    assertType<string[]>(store.events);
+  });
+});

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

@@ -5,7 +5,7 @@ import { createPlayer } from '../create-player';
 
 describe('createPlayer', () => {
   it('returns expected exports', () => {
-    const result = createPlayer({ features: [...features.video] });
+    const result = createPlayer({ features: features.video });
 
     expect(result.context).toBeDefined();
     expect(result.create).toBeInstanceOf(Function);
@@ -17,7 +17,7 @@ describe('createPlayer', () => {
   });
 
   it('create() returns a store instance', () => {
-    const { create } = createPlayer({ features: [...features.video] });
+    const { create } = createPlayer({ features: features.video });
     const store = create();
 
     expect(store.attach).toBeInstanceOf(Function);
@@ -26,7 +26,7 @@ describe('createPlayer', () => {
   });
 
   it('PlayerElement is a valid custom element class', () => {
-    const { PlayerElement } = createPlayer({ features: [...features.video] });
+    const { PlayerElement } = createPlayer({ features: features.video });
 
     expect(typeof PlayerElement).toBe('function');
     expect(PlayerElement.prototype).toBeDefined();