feat(html): reorganize import paths by use case (#480)

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

@@ -0,0 +1,18 @@
+import { features } from '@videojs/core/dom';
+import { createPlayer } from '../../player/create-player';
+
+const { PlayerElement } = createPlayer({
+  features: features.audio,
+});
+
+export class AudioPlayerElement extends PlayerElement {
+  static readonly tagName = 'audio-player';
+}
+
+customElements.define(AudioPlayerElement.tagName, AudioPlayerElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [AudioPlayerElement.tagName]: AudioPlayerElement;
+  }
+}

packages/html/src/define/audio/skin.ts

@@ -0,0 +1 @@
+// TODO: Implement AudioSkinElement and then register it here

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

@@ -0,0 +1,18 @@
+import { features } from '@videojs/core/dom';
+import { createPlayer } from '../../player/create-player';
+
+const { PlayerElement } = createPlayer({
+  features: features.background,
+});
+
+export class BackgroundVideoPlayerElement extends PlayerElement {
+  static readonly tagName = 'background-video-player';
+}
+
+customElements.define(BackgroundVideoPlayerElement.tagName, BackgroundVideoPlayerElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;
+  }
+}

packages/html/src/define/background/skin.ts

@@ -0,0 +1 @@
+// TODO: Implement BackgroundVideoSkinElement and then register it here

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

@@ -1,17 +0,0 @@
-import { features } from '@videojs/core/dom';
-import { MediaElement } from '@/ui/media-element';
-import { createPlayer } from '../../player/create-player';
-
-const { PlayerMixin } = createPlayer({
-  features: features.video,
-});
-
-export class VideoPlayer extends PlayerMixin(MediaElement) {}
-
-customElements.define('video-player', VideoPlayer);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'video-player': VideoPlayer;
-  }
-}

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

@@ -0,0 +1,18 @@
+import { features } from '@videojs/core/dom';
+import { createPlayer } from '../../player/create-player';
+
+const { PlayerElement } = createPlayer({
+  features: features.video,
+});
+
+export class VideoPlayerElement extends PlayerElement {
+  static readonly tagName = 'video-player';
+}
+
+customElements.define(VideoPlayerElement.tagName, VideoPlayerElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [VideoPlayerElement.tagName]: VideoPlayerElement;
+  }
+}

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

@@ -62,6 +62,12 @@ describe('createPlayer', () => {
     assertType<string[]>(store.events);
   });
 
+  it('resolves background features to generic PlayerStore', () => {
+    const result = createPlayer({ features: features.background });
+
+    assertType<CreatePlayerResult<PlayerStore<[]>>>(result);
+  });
+
   it('resolves extended audio features to generic PlayerStore', () => {
     interface AnalyticsState {
       events: string[];

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

@@ -31,4 +31,28 @@ describe('createPlayer', () => {
     expect(typeof PlayerElement).toBe('function');
     expect(PlayerElement.prototype).toBeDefined();
   });
+
+  it('creates audio player with expected exports', () => {
+    const result = createPlayer({ features: features.audio });
+
+    expect(result.context).toBeDefined();
+    expect(result.create).toBeInstanceOf(Function);
+    expect(result.PlayerController).toBeDefined();
+    expect(result.PlayerElement).toBeDefined();
+    expect(result.PlayerMixin).toBeInstanceOf(Function);
+    expect(result.ProviderMixin).toBeInstanceOf(Function);
+    expect(result.ContainerMixin).toBeInstanceOf(Function);
+  });
+
+  it('creates background player with expected exports', () => {
+    const result = createPlayer({ features: features.background });
+
+    expect(result.context).toBeDefined();
+    expect(result.create).toBeInstanceOf(Function);
+    expect(result.PlayerController).toBeDefined();
+    expect(result.PlayerElement).toBeDefined();
+    expect(result.PlayerMixin).toBeInstanceOf(Function);
+    expect(result.ProviderMixin).toBeInstanceOf(Function);
+    expect(result.ContainerMixin).toBeInstanceOf(Function);
+  });
 });