fix(site): reset installation guide to implemented features (#707)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

site/src/components/installation/ReactCreateCodeBlock.tsx

@@ -2,25 +2,25 @@ import { useStore } from '@nanostores/react';
 import ClientCode from '@/components/Code/ClientCode';
 import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
 import type { Renderer, Skin, UseCase } from '@/stores/installation';
-import { muxPlaybackId, renderer, skin, useCase } from '@/stores/installation';
+import { renderer, skin, useCase } from '@/stores/installation';
 
 function getRendererComponent(renderer: Renderer): string {
   const map: Record<Renderer, string> = {
     'background-video': 'BackgroundVideo',
-    cloudflare: 'CloudflareVideo',
-    dash: 'DashVideo',
+    // cloudflare: 'CloudflareVideo',
+    // dash: 'DashVideo',
     hls: 'HlsVideo',
     'html5-audio': 'Audio',
     'html5-video': 'Video',
-    jwplayer: 'JwplayerVideo',
-    'mux-audio': 'MuxAudio',
-    'mux-background-video': 'MuxBackgroundVideo',
-    'mux-video': 'MuxVideo',
-    // shaka: 'ShakaVideo', this one probably adds more confusion than help at this level
-    spotify: 'SpotifyAudio',
-    vimeo: 'VimeoVideo',
-    wistia: 'WistiaVideo',
-    youtube: 'YoutubeVideo',
+    // jwplayer: 'JwplayerVideo',
+    // mux-audio: 'MuxAudio',
+    // mux-background-video: 'MuxBackgroundVideo',
+    // mux-video: 'MuxVideo',
+    // shaka: 'ShakaVideo',
+    // spotify: 'SpotifyAudio',
+    // vimeo: 'VimeoVideo',
+    // wistia: 'WistiaVideo',
+    // youtube: 'YoutubeVideo',
   };
   return map[renderer];
 }
@@ -43,9 +43,9 @@ function getSkinImportParts(skin: Skin): { group: string; skinFile: string } {
 
 function getUseCaseFeatures(useCase: UseCase): string {
   const map: Record<UseCase, string> = {
-    'default-video': 'video',
-    'default-audio': 'audio',
-    'background-video': 'background',
+    'default-video': 'videoFeatures',
+    'default-audio': 'audioFeatures',
+    'background-video': 'backgroundFeatures',
   };
   return map[useCase];
 }
@@ -56,22 +56,22 @@ function isPresetRenderer(renderer: Renderer): boolean {
 
 function getRendererMediaSubpath(renderer: Renderer): string {
   const map: Partial<Record<Renderer, string>> = {
-    cloudflare: 'cloudflare-video',
-    dash: 'dash-video',
+    // cloudflare: 'cloudflare-video',
+    // dash: 'dash-video',
     hls: 'hls-video',
-    jwplayer: 'jwplayer-video',
-    'mux-audio': 'mux-audio',
-    'mux-background-video': 'mux-background-video',
-    'mux-video': 'mux-video',
-    spotify: 'spotify-audio',
-    vimeo: 'vimeo-video',
-    wistia: 'wistia-video',
-    youtube: 'youtube-video',
+    // jwplayer: 'jwplayer-video',
+    // 'mux-audio': 'mux-audio',
+    // 'mux-background-video': 'mux-background-video',
+    // 'mux-video': 'mux-video',
+    // spotify: 'spotify-audio',
+    // vimeo: 'vimeo-video',
+    // wistia: 'wistia-video',
+    // youtube: 'youtube-video',
   };
   return map[renderer] ?? renderer;
 }
 
-function generateReactCode(useCase: UseCase, skin: Skin, renderer: Renderer, playbackId: string | null): string {
+function generateReactCode(useCase: UseCase, skin: Skin, renderer: Renderer): string {
   const rendererComponent = getRendererComponent(renderer);
   const featureType = getUseCaseFeatures(useCase);
 
@@ -97,27 +97,21 @@ function generateReactCode(useCase: UseCase, skin: Skin, renderer: Renderer, pla
     mediaImport = `import { ${rendererComponent} } from '@videojs/react/media/${getRendererMediaSubpath(renderer)}';`;
   }
 
-  // Determine props based on renderer + playbackId
-  const isMuxWithPlaybackId =
-    (renderer === 'mux-video' || renderer === 'mux-audio' || renderer === 'mux-background-video') && playbackId;
-  const propsInterface = isMuxWithPlaybackId
-    ? 'interface MyPlayerProps {\n  playbackId: string;\n}'
-    : 'interface MyPlayerProps {\n  src: string;\n}';
-  const destructuredProp = isMuxWithPlaybackId ? 'playbackId' : 'src';
-  const rendererJsx = isMuxWithPlaybackId
-    ? `<${rendererComponent} playbackId={playbackId} />`
-    : `<${rendererComponent} src={src} />`;
+  // Determine props — mux variants use src with stream.mux.com URL
+  const propsInterface = 'interface MyPlayerProps {\n  src: string;\n}';
+  const destructuredProp = 'src';
+  const rendererJsx = `<${rendererComponent} src={src} />`;
 
   const imports = [
     `import '${skinCssImport}';`,
-    `import { createPlayer, features } from '@videojs/react';`,
+    `import { createPlayer, ${featureType} } from '@videojs/react';`,
     presetImport,
     ...(mediaImport ? [mediaImport] : []),
   ].join('\n');
 
   return `${imports}
 
-const Player = createPlayer({ features: features.${featureType} });
+const Player = createPlayer({ features: ${featureType} });
 
 ${propsInterface}
 
@@ -136,7 +130,6 @@ export default function ReactCreateCodeBlock() {
   const $useCase = useStore(useCase);
   const $skin = useStore(skin);
   const $renderer = useStore(renderer);
-  const $muxPlaybackId = useStore(muxPlaybackId);
 
   return (
     <TabsRoot maxWidth={false}>
@@ -146,7 +139,7 @@ export default function ReactCreateCodeBlock() {
         </Tab>
       </TabsList>
       <TabsPanel value="react" initial>
-        <ClientCode code={generateReactCode($useCase, $skin, $renderer, $muxPlaybackId)} lang="tsx" />
+        <ClientCode code={generateReactCode($useCase, $skin, $renderer)} lang="tsx" />
       </TabsPanel>
     </TabsRoot>
   );