feat: remove example themes (#961)

point to example JS urls to https://github.com/muxinc/player.style

docs/src/pages/docs/en/examples/[...example].astro

@@ -95,62 +95,47 @@ export function getStaticPaths({ paginate }: GetStaticPathsOptions) {
         sourcePath: 'examples/vanilla/control-elements/media-playback-rate-menu.html',
       }
     },
-    {
-      params: { example: 'tailwind-audio-theme' },
-      props: {
-        title: 'Tailwind Audio Theme',
-        group: 'Themes',
-        sourcePath: 'examples/vanilla/themes/tailwind-audio-theme/index.html',
-      }
-    },
-    {
-      params: { example: 'minimal-theme' },
-      props: {
-        title: 'Minimal Theme',
-        group: 'Themes',
-        sourcePath: 'examples/vanilla/themes/minimal-theme.html',
-      }
-    },
-    {
-      params: { example: 'microvideo-theme' },
-      props: {
-        title: 'Microvideo Theme',
-        group: 'Themes',
-        sourcePath: 'examples/vanilla/themes/microvideo-theme.html',
-      }
-    },
-    {
-      params: { example: 'demuxed-2022-theme' },
-      props: {
-        title: 'Demuxed 2022 Theme',
-        group: 'Themes',
-        sourcePath: 'examples/vanilla/themes/demuxed-2022-theme.html',
-      }
-    },
-    {
-      params: { example: 'youtube-theme' },
-      props: {
-        title: 'Youtube Theme',
-        group: 'Themes',
-        sourcePath: 'examples/vanilla/themes/youtube-theme.html',
-      }
-    },
-    {
-      params: { example: 'netflix-theme' },
-      props: {
-        title: 'Netflix Theme',
-        group: 'Themes',
-        sourcePath: 'examples/vanilla/themes/netflix-theme.html',
-      }
-    },
-    {
-      params: { example: 'spotify-theme' },
-      props: {
-        title: 'Spotify Theme',
-        group: 'Themes',
-        sourcePath: 'examples/vanilla/themes/spotify-theme.html',
-      }
-    },
+    // Remove themes from examples. todo: fix `media-chrome` dependency.
+    // {
+    //   params: { example: 'tailwind-audio-theme' },
+    //   props: {
+    //     title: 'Tailwind Audio Theme',
+    //     group: 'Themes',
+    //     sourcePath: 'examples/vanilla/themes/tailwind-audio-theme.html',
+    //   }
+    // },
+    // {
+    //   params: { example: 'minimal-theme' },
+    //   props: {
+    //     title: 'Minimal Theme',
+    //     group: 'Themes',
+    //     sourcePath: 'examples/vanilla/themes/minimal-theme.html',
+    //   }
+    // },
+    // {
+    //   params: { example: 'microvideo-theme' },
+    //   props: {
+    //     title: 'Microvideo Theme',
+    //     group: 'Themes',
+    //     sourcePath: 'examples/vanilla/themes/microvideo-theme.html',
+    //   }
+    // },
+    // {
+    //   params: { example: 'demuxed-2022-theme' },
+    //   props: {
+    //     title: 'Demuxed 2022 Theme',
+    //     group: 'Themes',
+    //     sourcePath: 'examples/vanilla/themes/demuxed-2022-theme.html',
+    //   }
+    // },
+    // {
+    //   params: { example: 'youtube-theme' },
+    //   props: {
+    //     title: 'Youtube Theme',
+    //     group: 'Themes',
+    //     sourcePath: 'examples/vanilla/themes/youtube-theme.html',
+    //   }
+    // },
   ]
 }
 

docs/src/pages/docs/en/migration/from-3.x-to-4.0.md

@@ -28,6 +28,8 @@ Here's a high level overview:
 **Menu components moved to separate import**
 - The menu components that were included by default in v3 are now moved to a separate import. This gives you more granular control and can save some extra weight in the final JS bundle if you don't need these components. You can import them from `media-chrome/menu`.
 
+**Example themes are removed from the package**
+- The example themes are removed from the package (dist/themes/\*), but not to worry, most themes will live on in https://player.style!
 
 ### Example of HTML changes
 

examples/vanilla/index.html

@@ -42,15 +42,11 @@ <h2>Media element examples</h2>
 
     <h2>Example themes</h2>
     <ul>
-      <li><a href="themes/tailwind-audio-theme/">Tailwind Audio Theme</a></li>
+      <li><a href="themes/tailwind-audio-theme.html">Tailwind Audio Theme</a></li>
       <li><a href="themes/minimal-theme.html">Minimal Theme</a></li>
       <li><a href="themes/microvideo-theme.html">Microvideo Theme</a></li>
       <li><a href="themes/youtube-theme.html">Youtube Theme</a></li>
-      <li><a href="themes/netflix-theme.html">Netflix Theme</a></li>
-      <li><a href="themes/spotify-theme.html">Spotify Theme</a></li>
-      <li><a href="themes/responsive-theme.html">Responsive Theme</a></li>
       <li><a href="themes/winamp-theme.html">Winamp Theme</a></li>
-      <li><a href="themes/demuxed-2021-theme.html">Demuxed 2021 Theme</a></li>
       <li><a href="themes/demuxed-2022-theme.html">Demuxed 2022 Theme</a></li>
     </ul>
 

examples/vanilla/themes/demuxed-2022-theme.html

@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width" />
     <title>Media Chrome Demuxed 2022 Theme Example</title>
     <script type="module" src="../../../dist/index.js"></script>
-    <script type="module" src="../../../dist/themes/demuxed-2022.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@player.style/demuxed-2022/+esm"></script>
     <script 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/castable-video@1/+esm"></script>
     <link rel="stylesheet" href="https://use.typekit.net/dbt1sbf.css">

examples/vanilla/themes/microvideo-theme.html

@@ -5,7 +5,7 @@
     <title>Media Chrome - Microvideo Theme</title>
 
     <script type="module" src="../../../dist/index.js"></script>
-    <script type="module" src="../../../dist/themes/microvideo.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@player.style/microvideo/+esm"></script>
 
     <style>
       body {

examples/vanilla/themes/minimal-theme.html

@@ -9,7 +9,7 @@
     />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-video"></script>
     <script type="module" src="../../../dist/index.js"></script>
-    <script type="module" src="../../../dist/themes/minimal.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@player.style/minimal/+esm"></script>
 
     <style>
       html {