feat(core): add vimeo media host and html/react components (#1667)

apps/sandbox/app/shell/app.tsx

@@ -18,6 +18,7 @@ import { Preview } from './preview';
 function getPagePath(platform: Platform, preset: Preset): string {
   if (platform === 'cdn') return '/cdn/';
   if (preset === 'background-video') return `/${platform}-background-video/`;
+  if (preset === 'vimeo-video') return `/${platform}-vimeo-video/`;
   return `/${platform}-${preset}/`;
 }
 
@@ -113,9 +114,9 @@ export function App() {
     }
   }, [preset, source, setSource]);
 
-  // CDN and background video do not have a Tailwind skin variant.
+  // CDN, background video, and vimeo video do not have a Tailwind skin variant.
   useEffect(() => {
-    if ((platform === 'cdn' || preset === 'background-video') && styling === 'tailwind') {
+    if ((platform === 'cdn' || preset === 'background-video' || preset === 'vimeo-video') && styling === 'tailwind') {
       setStyling('css');
     }
   }, [platform, preset, styling]);
@@ -151,6 +152,7 @@ export function App() {
         isSimpleHls={preset.startsWith('simple-hls-')}
         isMuxVideo={preset === 'mux-video'}
         isMuxAudio={preset === 'mux-audio'}
+        isVimeoVideo={preset === 'vimeo-video'}
         platforms={PLATFORMS}
         stylings={STYLINGS}
         presets={PRESETS}

apps/sandbox/app/shell/navbar.tsx

@@ -28,6 +28,7 @@ type NavbarProps = {
   isSimpleHls: boolean;
   isMuxVideo: boolean;
   isMuxAudio: boolean;
+  isVimeoVideo: boolean;
   platforms: readonly Platform[];
   stylings: readonly Styling[];
   presets: readonly Preset[];
@@ -53,6 +54,7 @@ const PRESET_LABELS: Record<Preset, string> = {
   'dash-video': 'DASH Video',
   audio: 'Audio',
   'background-video': 'Background Video',
+  'vimeo-video': 'Vimeo Video',
 };
 
 export function Navbar({
@@ -79,6 +81,7 @@ export function Navbar({
   isSimpleHls,
   isMuxVideo,
   isMuxAudio,
+  isVimeoVideo,
   platforms,
   stylings,
   presets,
@@ -107,7 +110,7 @@ export function Navbar({
           options={stylings.map((s) => ({
             value: s,
             label: s === 'css' ? 'CSS' : 'Tailwind',
-            disabled: s === 'tailwind' && (isBackgroundVideo || platform === 'cdn'),
+            disabled: s === 'tailwind' && (isBackgroundVideo || isVimeoVideo || platform === 'cdn'),
           }))}
         />
 
@@ -137,7 +140,7 @@ export function Navbar({
               return true;
             })
             .map((id) => ({ value: id, label: sources[id].label }))}
-          disabled={isBackgroundVideo}
+          disabled={isBackgroundVideo || isVimeoVideo}
         />
       </div>