From c6a34343f4acfc4242dd0f871bbd3f802b21fa90 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <adamjaggard@gmail.com>
Date: Tue, 1 Aug 2023 16:55:10 +0100
Subject: [PATCH] chore: Prepare default theme from Mux Player for export
 (#668)

The goal of this PR is to package the existing default theme such that
it can be exported as it's own module. This can then be easily swapped
out in the future with a new theme.

Theme source files now reside in `src/themes` (themes based in this repo
and re-exported from media chrome). Build artefacts for themes are in
`dist/themes`.

---------

Co-authored-by: Gary Katsevman <git@gkatsev.com>
Co-authored-by: Christian Pillsbury <cpillsbury@mux.com>
---
 examples/svelte-kit/src/routes/+page.svelte   |  1 +
 .../src/routes/mux-player-theme/+page.svelte  | 44 ++++++++++++++++++
 .../public/mux-player-theme.html              |  2 +-
 .../src/mux-player-microvideo-theme.ts        |  1 +
 packages/mux-player/.gitignore                |  2 +
 packages/mux-player/package.json              | 27 +++++++++--
 packages/mux-player/scripts/build-themes.mjs  | 46 +++++++++++++++++++
 packages/mux-player/src/index.ts              |  6 ++-
 packages/mux-player/src/template.ts           | 10 +---
 .../classic/classic.html}                     |  2 +-
 .../mux-player/src/themes/classic/index.ts    | 17 +++++++
 .../themes/microvideo/index.ts}               |  0
 .../themes/minimal/index.ts}                  |  0
 13 files changed, 141 insertions(+), 17 deletions(-)
 create mode 100644 examples/svelte-kit/src/routes/mux-player-theme/+page.svelte
 create mode 100644 examples/vanilla-ts-esm/src/mux-player-microvideo-theme.ts
 create mode 100644 packages/mux-player/.gitignore
 create mode 100644 packages/mux-player/scripts/build-themes.mjs
 rename packages/mux-player/src/{media-theme-mux.html => themes/classic/classic.html} (99%)
 create mode 100644 packages/mux-player/src/themes/classic/index.ts
 rename packages/mux-player/{themes/microvideo.js => src/themes/microvideo/index.ts} (100%)
 rename packages/mux-player/{themes/minimal.js => src/themes/minimal/index.ts} (100%)

diff --git a/examples/svelte-kit/src/routes/+page.svelte b/examples/svelte-kit/src/routes/+page.svelte
index b72f8cce4..194d38e8f 100644
--- a/examples/svelte-kit/src/routes/+page.svelte
+++ b/examples/svelte-kit/src/routes/+page.svelte
@@ -11,5 +11,6 @@
 		<li><a data-sveltekit-prefetch href="./mux-video" class="video">&lt;mux-video&gt;</a></li>
 		<li><a data-sveltekit-prefetch href="./mux-audio" class="audio">&lt;mux-audio&gt;</a></li>
 		<li><a data-sveltekit-prefetch href="./mux-player" class="player">&lt;mux-player&gt;</a></li>
+		<li><a data-sveltekit-prefetch href="./mux-player-theme" class="player">&lt;mux-player&gt; (theme)</a></li>
 	</ul>
 </nav>
diff --git a/examples/svelte-kit/src/routes/mux-player-theme/+page.svelte b/examples/svelte-kit/src/routes/mux-player-theme/+page.svelte
new file mode 100644
index 000000000..c628ea602
--- /dev/null
+++ b/examples/svelte-kit/src/routes/mux-player-theme/+page.svelte
@@ -0,0 +1,44 @@
+<script context="module" lang="ts">
+	export const prerender = true;
+</script>
+
+<script lang="ts">
+	// this prevents the custom elements from being redefined when the REPL is updated and reloads, which throws an error
+	// this means that any changes to the custom element won't be picked up without saving and refreshing the REPL
+	// const oldRegister = customElements.define;
+	// customElements.define = function(name, constructor, options) {
+	// 	if (!customElements.get(name)) {
+	// 		oldRegister(name, constructor, options);
+	// 	}
+	// }
+	// import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	onMount(async () => {
+		await import('@mux/mux-player');
+		await import("@mux/mux-player/themes/microvideo");
+	});
+</script>
+
+<svelte:head>
+	<style>
+		mux-player {
+			display: block;
+			width: 100%;
+			margin: 1rem 0 2rem;
+			background-color: #000;
+			line-height: 0;
+		}
+
+		mux-player:not([audio]) {
+			aspect-ratio: 16 / 9;
+		}
+	</style>
+</svelte:head>
+
+<mux-player
+	stream-type="on-demand"
+	playback-id="23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I"
+	theme="microvideo"
+></mux-player>
+
+<a data-sveltekit-prefetch href="/">Browse Elements</a>
diff --git a/examples/vanilla-ts-esm/public/mux-player-theme.html b/examples/vanilla-ts-esm/public/mux-player-theme.html
index b8b623dc0..3aaf40350 100644
--- a/examples/vanilla-ts-esm/public/mux-player-theme.html
+++ b/examples/vanilla-ts-esm/public/mux-player-theme.html
@@ -9,7 +9,7 @@
       defer
       src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"
     ></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome/dist/themes/microvideo.js/+esm"></script>
+    <script type="module" src="./dist/mux-player-microvideo-theme.js"></script>
     <script type="module" src="./dist/mux-player.js"></script>
     <style>
       mux-player {
diff --git a/examples/vanilla-ts-esm/src/mux-player-microvideo-theme.ts b/examples/vanilla-ts-esm/src/mux-player-microvideo-theme.ts
new file mode 100644
index 000000000..8b1b9bf5a
--- /dev/null
+++ b/examples/vanilla-ts-esm/src/mux-player-microvideo-theme.ts
@@ -0,0 +1 @@
+export * as MicroVideoTheme from "@mux/mux-player/themes/microvideo";
diff --git a/packages/mux-player/.gitignore b/packages/mux-player/.gitignore
new file mode 100644
index 000000000..e27da5408
--- /dev/null
+++ b/packages/mux-player/.gitignore
@@ -0,0 +1,2 @@
+themes/
+!src/themes/
\ No newline at end of file
diff --git a/packages/mux-player/package.json b/packages/mux-player/package.json
index 4dc066a17..c6ffe9aaf 100644
--- a/packages/mux-player/package.json
+++ b/packages/mux-player/package.json
@@ -28,8 +28,24 @@
       "types@<4.3.5": "./dist/types-ts3.4/index.d.ts",
       "types": "./dist/types/index.d.ts"
     },
-    "./themes/microvideo": "./themes/microvideo.js",
-    "./themes/minimal": "./themes/minimal.js"
+    "./themes/microvideo": {
+      "import": "./dist/themes/microvideo/index.mjs",
+      "require": "./dist/themes/microvideo/index.cjs.js",
+      "browser": "./dist/themes/microvideo/index.mjs",
+      "default": "./dist/themes/microvideo/index.cjs.js"
+    },
+    "./themes/minimal": {
+      "import": "./dist/themes/minimal/index.mjs",
+      "require": "./dist/themes/minimal/index.cjs.js",
+      "browser": "./dist/themes/minimal/index.mjs",
+      "default": "./dist/themes/minimal/index.cjs.js"
+    },
+    "./themes/classic": {
+      "import": "./dist/themes/classic/index.mjs",
+      "require": "./dist/themes/classic/index.cjs.js",
+      "browser": "./dist/themes/classic/index.mjs",
+      "default": "./dist/themes/classic/index.cjs.js"
+    }
   },
   "types": "./dist/types/index.d.ts",
   "repository": {
@@ -50,15 +66,17 @@
     "dev:esm-module": "yarn build:esm-module --watch=forever",
     "dev:cjs": "yarn build:cjs --watch=forever",
     "dev:types": "yarn build:types -w",
-    "dev": "npm-run-all --parallel dev:types dev:esm dev:cjs dev:esm-module dev:iife",
+    "dev:themes": "yarn node ./scripts/build-themes.mjs --dev",
+    "dev": "npm-run-all --parallel dev:types dev:esm dev:cjs dev:esm-module dev:iife dev:themes",
     "build:esm": "esbuilder src/index.ts --format=esm --out-extension:.js=.mjs",
     "build:esm-module": "esbuilder src/index.ts --format=esm-module --outfile=dist/mux-player.mjs",
     "build:iife": "esbuilder src/index.ts --format=iife --outfile=dist/mux-player.js",
     "build:cjs": "esbuilder src/index.ts --format=cjs --out-extension:.js=.cjs.js",
+    "build:themes": "yarn node ./scripts/build-themes.mjs",
     "copypolyfills": "shx mkdir -p src/polyfills && shx cp ../../shared/polyfills/index.ts ./src/polyfills/index.ts",
     "build:types": "tsc",
     "postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4",
-    "build": "npm-run-all --parallel 'build:esm --minify' 'build:iife --minify' 'build:cjs --minify' 'build:esm-module --minify'",
+    "build": "npm-run-all --parallel 'build:esm --minify' 'build:iife --minify' 'build:cjs --minify' 'build:esm-module --minify' 'build:themes'",
     "create-release-notes": "create-release-notes ./CHANGELOG.md",
     "publish-release": "../../scripts/publish.sh"
   },
@@ -78,6 +96,7 @@
     "@web/test-runner": "^0.13.26",
     "@web/test-runner-playwright": "^0.9.0",
     "downlevel-dts": "^0.11.0",
+    "esbuild": "^0.15.7",
     "eslint": "^8.24.0",
     "npm-run-all": "^4.1.5",
     "replace": "^1.2.1",
diff --git a/packages/mux-player/scripts/build-themes.mjs b/packages/mux-player/scripts/build-themes.mjs
new file mode 100644
index 000000000..fff77325c
--- /dev/null
+++ b/packages/mux-player/scripts/build-themes.mjs
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+import { build } from 'esbuild';
+
+const themes = ['classic', 'microvideo', 'minimal'];
+const devMode = process.argv.includes('--dev');
+
+const shared = {
+  bundle: true,
+  target: 'es2019',
+  loader: {
+    '.html': 'text',
+    '.css': 'text',
+    '.svg': 'text',
+  },
+  watch: devMode,
+};
+
+// entryPoints doesn't support glob patterns so we iterate over known themes
+themes.forEach((theme) => {
+  //@ts-ignore
+  build({
+    ...shared,
+    entryPoints: [`./src/themes/${theme}/index.ts`],
+    format: 'esm',
+    outExtension: { '.js': '.mjs' },
+    outdir: `./dist/themes/${theme}`,
+  });
+
+  //@ts-ignore
+  build({
+    ...shared,
+    entryPoints: [`./src/themes/${theme}/index.ts`],
+    format: 'cjs',
+    outExtension: { '.js': '.cjs.js' },
+    outdir: `./dist/themes/${theme}`,
+  });
+
+  //@ts-ignore
+  build({
+    ...shared,
+    entryPoints: [`./src/themes/${theme}/index.ts`],
+    format: 'iife',
+    globalName: `mediaTheme${theme[0].toUpperCase() + theme.slice(1)}`,
+    outdir: `./dist/themes/${theme}`,
+  });
+});
diff --git a/packages/mux-player/src/index.ts b/packages/mux-player/src/index.ts
index da5071ea5..266b9d17d 100644
--- a/packages/mux-player/src/index.ts
+++ b/packages/mux-player/src/index.ts
@@ -29,6 +29,7 @@ import { getErrorLogs } from './errors';
 import { toNumberOrUndefined, i18n, parseJwt, containsComposedNode, camelCase, kebabCase } from './utils';
 import * as logger from './logger';
 import type { MuxTemplateProps, ErrorEvent } from './types';
+import './themes/classic';
 
 export { MediaError };
 export type Tokens = {
@@ -147,7 +148,8 @@ function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
 }
 
 function getThemeTemplate(el: MuxPlayerElement) {
-  let themeName = el.getAttribute(PlayerAttributes.THEME);
+  let themeName = el.theme;
+
   if (themeName) {
     // @ts-ignore
     const templateElement = el.getRootNode()?.getElementById?.(themeName);
@@ -712,7 +714,7 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
    * Gets the theme.
    */
   get theme() {
-    return this.getAttribute(PlayerAttributes.THEME) ?? '';
+    return this.getAttribute(PlayerAttributes.THEME) ?? 'classic';
   }
 
   /**
diff --git a/packages/mux-player/src/template.ts b/packages/mux-player/src/template.ts
index 4d402c177..2a532d974 100644
--- a/packages/mux-player/src/template.ts
+++ b/packages/mux-player/src/template.ts
@@ -1,21 +1,13 @@
-import { document } from './polyfills';
 import 'media-chrome/dist/media-theme-element.js';
 // @ts-ignore
 import cssStr from './styles.css';
-// @ts-ignore
-import muxTheme from './media-theme-mux.html';
 import './dialog';
 import { getSrcFromPlaybackId, getStreamTypeFromAttr } from './helpers';
 import { html } from './html';
 import { i18n, stylePropsToString } from './utils';
-
 import type { MuxTemplateProps } from './types';
 import { StreamTypes } from '@mux/playback-core';
 
-const muxTemplate = document.createElement('template');
-if ('innerHTML' in muxTemplate) muxTemplate.innerHTML = muxTheme;
-
-// prettier-ignore
 export const template = (props: MuxTemplateProps) => html`
   <style>
     ${cssStr}
@@ -37,7 +29,7 @@ const getHotKeys = (props: MuxTemplateProps) => {
 
 export const content = (props: MuxTemplateProps) => html`
   <media-theme
-    template="${props.themeTemplate ?? muxTemplate.content.children[0]}"
+    template="${props.themeTemplate || false}"
     defaultstreamtype="${props.defaultStreamType ?? false}"
     hotkeys="${getHotKeys(props) || false}"
     nohotkeys="${props.noHotKeys || !props.hasSrc || props.isDialogOpen || false}"
diff --git a/packages/mux-player/src/media-theme-mux.html b/packages/mux-player/src/themes/classic/classic.html
similarity index 99%
rename from packages/mux-player/src/media-theme-mux.html
rename to packages/mux-player/src/themes/classic/classic.html
index c9df9bcee..eefea99dd 100644
--- a/packages/mux-player/src/media-theme-mux.html
+++ b/packages/mux-player/src/themes/classic/classic.html
@@ -1,5 +1,5 @@
 <!-- prettier-ignore -->
-<template id="media-theme-mux">
+<template id="media-theme-classic">
   <style>
     :host {
       --_primary-color: var(--media-primary-color, white);
diff --git a/packages/mux-player/src/themes/classic/index.ts b/packages/mux-player/src/themes/classic/index.ts
new file mode 100644
index 000000000..083a4b27b
--- /dev/null
+++ b/packages/mux-player/src/themes/classic/index.ts
@@ -0,0 +1,17 @@
+// @ts-ignore
+import theme from './classic.html';
+import { document, globalThis } from '../../polyfills';
+import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';
+
+const template = document.createElement('template');
+if ('innerHTML' in template) template.innerHTML = theme;
+
+class MediaThemeClassic extends MediaThemeElement {
+  static template = template.content?.children?.[0];
+}
+
+if (!globalThis.customElements.get('media-theme-classic')) {
+  globalThis.customElements.define('media-theme-classic', MediaThemeClassic);
+}
+
+export default MediaThemeClassic;
diff --git a/packages/mux-player/themes/microvideo.js b/packages/mux-player/src/themes/microvideo/index.ts
similarity index 100%
rename from packages/mux-player/themes/microvideo.js
rename to packages/mux-player/src/themes/microvideo/index.ts
diff --git a/packages/mux-player/themes/minimal.js b/packages/mux-player/src/themes/minimal/index.ts
similarity index 100%
rename from packages/mux-player/themes/minimal.js
rename to packages/mux-player/src/themes/minimal/index.ts