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;
+  }
+}