fix(docs): add audio to getting started guide and other updates

site/src/components/installation/HTMLUsageCodeBlock.tsx

@@ -15,7 +15,6 @@ function getRendererTag(renderer: Renderer): string {
     mux: 'mux-video',
     shaka: 'shaka-video',
     spotify: 'spotify-audio',
-    videojs: 'videojs-video',
     vimeo: 'vimeo-video',
     wistia: 'wistia-video',
     youtube: 'youtube-video',
@@ -25,15 +24,17 @@ function getRendererTag(renderer: Renderer): string {
 
 function getProviderTag(useCase: UseCase): string {
   const map: Record<UseCase, string> = {
-    website: 'website-player-provider',
-    'background-video': 'background-video-player-provider',
+    'default-video': 'video-player',
+    'default-audio': 'audio-player',
+    'background-video': 'background-video-player',
   };
   return map[useCase];
 }
 
 function getSkinTag(skin: Skin): string {
   const map: Record<Skin, string> = {
-    frosted: 'frosted-video-skin',
+    'default-video': 'video-skin',
+    'default-audio': 'audio-skin',
     minimal: 'minimal-video-skin',
   };
   return map[skin];
@@ -89,19 +90,27 @@ export default function HTMLUsageCodeBlock() {
   const $muxPlaybackId = useStore(muxPlaybackId);
 
   return (
-    <TabsRoot maxWidth={false}>
-      <TabsList label="HTML implementation">
-        <Tab value="html" initial>
-          HTML
-        </Tab>
-        <Tab value="javascript">JavaScript</Tab>
-      </TabsList>
-      <TabsPanel value="html" initial>
-        <ClientCode code={generateHTMLCode($useCase, $skin, $renderer, $muxPlaybackId)} lang="html" />
-      </TabsPanel>
-      <TabsPanel value="javascript">
-        <ClientCode code={generateJS($skin)} lang="javascript" />
-      </TabsPanel>
-    </TabsRoot>
+    <>
+      <TabsRoot maxWidth={false}>
+        <TabsList label="HTML implementation">
+          <Tab value="javascript" initial>
+            JavaScript
+          </Tab>
+        </TabsList>
+        <TabsPanel value="javascript" initial>
+          <ClientCode code={generateJS($skin)} lang="javascript" />
+        </TabsPanel>
+      </TabsRoot>
+      <TabsRoot maxWidth={false}>
+        <TabsList label="HTML implementation">
+          <Tab value="html" initial>
+            HTML
+          </Tab>
+        </TabsList>
+        <TabsPanel value="html" initial>
+          <ClientCode code={generateHTMLCode($useCase, $skin, $renderer, $muxPlaybackId)} lang="html" />
+        </TabsPanel>
+      </TabsRoot>
+    </>
   );
 }

site/src/components/installation/ReactCreateCodeBlock.tsx

@@ -24,14 +24,15 @@ function getRendererComponent(renderer: Renderer): string {
 
 function getSkinComponent(skin: Skin): string {
   const map: Record<Skin, string> = {
-    frosted: 'FrostedVideoSkin',
+    'default-video': 'VideoSkin',
+    'default-audio': 'AudioSkin',
     minimal: 'MinimalVideoSkin',
   };
   return map[skin];
 }
 
 function getPresetAccess(useCase: UseCase): string {
-  if (useCase === 'website') {
+  if (useCase === 'default-video') {
     return 'presets.website';
   }
   return `presets['${useCase}']`;
@@ -52,8 +53,7 @@ function generateReactCode(useCase: UseCase, skin: Skin, renderer: Renderer, pla
     ? `<${rendererComponent} playbackId={playbackId} />`
     : `<${rendererComponent} src={src} />`;
 
-  return `// [your project] ./components/player/index.tsx
-import { createPlayer, presets, ${rendererComponent} } from '@videojs/react';
+  return `import { createPlayer, presets, ${rendererComponent} } from '@videojs/react';
 import { ${skinComponent} } from '@videojs/react/presets/${useCase}';
 import '@videojs/react/presets/${useCase}/skins/${skin}.css';
 
@@ -92,7 +92,7 @@ export default function ReactCreateCodeBlock() {
     <TabsRoot maxWidth={false}>
       <TabsList label="React implementation">
         <Tab value="react" initial>
-          React
+          ./components/player/index.tsx
         </Tab>
       </TabsList>
       <TabsPanel value="react" initial>

site/src/components/installation/ReactUsageCodeBlock.tsx

@@ -8,8 +8,7 @@ function generateUsageCode(renderer: Renderer, playbackId: string | null): strin
   const isMuxWithPlaybackId = renderer === 'mux' && playbackId;
   const playerProp = isMuxWithPlaybackId ? `playbackId="${playbackId}"` : 'src="https://example.com/video.mp4"';
 
-  return `// HomePage.tsx
-import { MyPlayer } from '../components/player';
+  return `import { MyPlayer } from '../components/player';
 
 export const HomePage = () => {
   return (
@@ -29,7 +28,7 @@ export default function ReactUsageCodeBlock() {
     <TabsRoot maxWidth={false}>
       <TabsList label="React usage">
         <Tab value="react" initial>
-          React
+          ./app/page.tsx
         </Tab>
       </TabsList>
       <TabsPanel value="react" initial>

site/src/components/installation/SkinPicker.tsx

@@ -12,7 +12,8 @@ export default function SkinPicker() {
       value={$skin}
       onChange={(value) => skin.set(value as Skin)}
       options={[
-        { value: 'frosted' satisfies Skin, label: 'Frosted', image: <Sparkles size={32} /> },
+        { value: 'default-video' satisfies Skin, label: 'Default Video', image: <Sparkles size={32} /> },
+        { value: 'default-audio' satisfies Skin, label: 'Default Audio', image: <Sparkles size={32} /> },
         { value: 'minimal' satisfies Skin, label: 'Minimal', image: <Minus size={32} /> },
       ]}
       aria-label="Select skin"