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

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

@@ -1,11 +1,13 @@
 import { features } from '@videojs/core/dom';
 import { createPlayer } from '../../player/create-player';
+import { MediaElement } from '../../ui/media-element';
+import '../media/container';
 
-const { PlayerElement } = createPlayer({
+const { ProviderMixin } = createPlayer({
   features: features.audio,
 });
 
-export class AudioPlayerElement extends PlayerElement {
+export class AudioPlayerElement extends ProviderMixin(MediaElement) {
   static readonly tagName = 'audio-player';
 }
 

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

@@ -1,11 +1,13 @@
 import { features } from '@videojs/core/dom';
 import { createPlayer } from '../../player/create-player';
+import { MediaElement } from '../../ui/media-element';
+import '../media/container';
 
-const { PlayerElement } = createPlayer({
+const { ProviderMixin } = createPlayer({
   features: features.background,
 });
 
-export class BackgroundVideoPlayerElement extends PlayerElement {
+export class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) {
   static readonly tagName = 'background-video-player';
 }
 

packages/html/src/define/media/container.ts

@@ -0,0 +1,17 @@
+import { playerContext } from '../../player/context';
+import { createContainerMixin } from '../../store/container-mixin';
+import { MediaElement } from '../../ui/media-element';
+
+const ContainerMixin = createContainerMixin(playerContext);
+
+export class MediaContainerElement extends ContainerMixin(MediaElement) {
+  static readonly tagName = 'media-container';
+}
+
+customElements.define(MediaContainerElement.tagName, MediaContainerElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [MediaContainerElement.tagName]: MediaContainerElement;
+  }
+}

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

@@ -1,11 +1,13 @@
 import { features } from '@videojs/core/dom';
 import { createPlayer } from '../../player/create-player';
+import { MediaElement } from '../../ui/media-element';
+import '../media/container';
 
-const { PlayerElement } = createPlayer({
+const { ProviderMixin } = createPlayer({
   features: features.video,
 });
 
-export class VideoPlayerElement extends PlayerElement {
+export class VideoPlayerElement extends ProviderMixin(MediaElement) {
   static readonly tagName = 'video-player';
 }