feat(skins): add html port of minimal skin (#140)

packages/html/src/icons/index.ts

@@ -1,4 +1,6 @@
+export * as MediaFullscreenEnterAltIcon from './media-fullscreen-enter-alt-icon';
 export * as MediaFullscreenEnterIcon from './media-fullscreen-enter-icon';
+export * as MediaFullscreenExitAltIcon from './media-fullscreen-exit-alt-icon';
 export * as MediaFullscreenExitIcon from './media-fullscreen-exit-icon';
 export * as MediaPauseIcon from './media-pause-icon';
 export * as MediaPlayIcon from './media-play-icon';

packages/html/src/icons/media-fullscreen-enter-alt-icon.ts

@@ -0,0 +1,21 @@
+import { SVG_ICONS } from '@videojs/icons';
+
+import { MediaChromeIcon } from './media-chrome-icon';
+
+export function getTemplateHTML() {
+  return /* html */ `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-fullscreen-enter-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.fullscreenEnterAlt}
+  `;
+}
+
+export class MediaFullscreenEnterAltIcon extends MediaChromeIcon {
+  static getTemplateHTML: () => string = getTemplateHTML;
+}
+
+customElements.define('media-fullscreen-enter-alt-icon', MediaFullscreenEnterAltIcon);

packages/html/src/icons/media-fullscreen-exit-alt-icon.ts

@@ -0,0 +1,21 @@
+import { SVG_ICONS } from '@videojs/icons';
+
+import { MediaChromeIcon } from './media-chrome-icon';
+
+export function getTemplateHTML() {
+  return /* html */ `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-fullscreen-exit-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.fullscreenExitAlt}
+  `;
+}
+
+export class MediaFullscreenExitAltIcon extends MediaChromeIcon {
+  static getTemplateHTML: () => string = getTemplateHTML;
+}
+
+customElements.define('media-fullscreen-exit-alt-icon', MediaFullscreenExitAltIcon);