feat(packages)!: support media components as markup (#1883)

apps/sandbox/templates/html-mux-audio/main.ts

@@ -1,7 +1,9 @@
 import '@app/styles.css';
 import { bindSandboxHtmlLocaleChange, prepareSandboxHtmlLocale, wrapSandboxHtmlI18n } from '@app/shared/html/i18n';
 import '@videojs/html/audio/player';
+import '@videojs/html/media/google-cast';
 import '@videojs/html/media/mux-audio';
+import '@videojs/html/media/mux-data';
 import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadAudioSkinTag } from '@app/shared/html/skins';
 import {
@@ -32,6 +34,9 @@ async function render() {
       <audio-player>
         <${tag}>
           <mux-audio src="${SOURCES[state.source].url}" ${mediaAttrs} crossorigin="anonymous"></mux-audio>
+          <!-- Mux Data and Cast are opt-in media components; no env key is needed for Mux-hosted sources. -->
+          <mux-data player-software-name="mux-audio"></mux-data>
+          <google-cast></google-cast>
         </${tag}>
       </audio-player>
     </div>

apps/sandbox/templates/html-mux-video/main.ts

@@ -1,6 +1,8 @@
 import '@app/styles.css';
 import { bindSandboxHtmlLocaleChange, prepareSandboxHtmlLocale, wrapSandboxHtmlI18n } from '@app/shared/html/i18n';
 import '@videojs/html/video/player';
+import '@videojs/html/media/google-cast';
+import '@videojs/html/media/mux-data';
 import '@videojs/html/media/mux-video';
 import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadVideoSkinTag } from '@app/shared/html/skins';
@@ -36,6 +38,9 @@ async function render() {
       <${tag} class="aspect-video max-w-4xl mx-auto"${placeholder ? ` placeholdersrc="${placeholder}"` : ''}>
         <!-- The storyboard track is derived automatically from the Mux src. -->
         <mux-video src="${SOURCES[state.source].url}" ${mediaAttrs} playsinline crossorigin="anonymous"></mux-video>
+        <!-- Mux Data and Cast are opt-in media components; no env key is needed for Mux-hosted sources. -->
+        <mux-data player-software-name="mux-video"></mux-data>
+        <google-cast></google-cast>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
       </${tag}>
     </${playerTag}>

apps/sandbox/templates/react-mux-audio/main.tsx

@@ -10,7 +10,9 @@ import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { SOURCES } from '@app/shared/sources';
 import type { Styling } from '@app/types';
+import { GoogleCast } from '@videojs/react/media/google-cast';
 import { MuxAudio } from '@videojs/react/media/mux-audio';
+import { MuxData } from '@videojs/react/media/mux-data';
 import { useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 
@@ -39,6 +41,9 @@ function App() {
             preload={preload}
             crossOrigin="anonymous"
           />
+          {/* Mux Data and Cast are opt-in media components; no env key is needed for Mux-hosted sources. */}
+          <MuxData playerSoftwareName="mux-audio" />
+          <GoogleCast />
         </AudioSkinComponent>
       </AudioProvider>
     </SandboxI18nProvider>

apps/sandbox/templates/react-mux-video/main.tsx

@@ -12,6 +12,8 @@ import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { isLiveSource, SOURCES } from '@app/shared/sources';
 import type { Styling } from '@app/types';
+import { GoogleCast } from '@videojs/react/media/google-cast';
+import { MuxData } from '@videojs/react/media/mux-data';
 import { MuxVideo } from '@videojs/react/media/mux-video';
 import { useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -54,6 +56,9 @@ function App() {
             playsInline
             crossOrigin="anonymous"
           />
+          {/* Mux Data and Cast are opt-in media components; no env key is needed for Mux-hosted sources. */}
+          <MuxData playerSoftwareName="mux-video" />
+          <GoogleCast />
         </VideoSkinComponent>
       </Provider>
     </SandboxI18nProvider>