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"

site/src/content/docs/how-to/installation.mdx

@@ -20,12 +20,12 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs.tsx';
 Video.js v10 is currently in _beta_. The API may evolve with [feedback&#x1F64F;](https://github.com/videojs/v10/issues). See the [Changelog](https://github.com/videojs/v10/blob/main/CHANGELOG.md)\[todo\] for recent updates and the <DocsLink slug="concepts/v10-roadmap">Roadmap</DocsLink> for more details on what's coming.
 </Aside>
 
-Video.js is **audio and video player components** &mdash; intentionally built to achieve minimal bundle sizes while providing framework-specific customization and a great viewer experience.
+Video.js is **audio and video player components** &mdash; intentionally built to achieve **minimal bundle sizes** while providing **framework-specific customization** and a **great viewer experience**.
 Answer the questions below to get started quickly with your first embed code.
 
 ## Choose your JS framework
 
-Video.js aims to provide idiomatic development experiences in your favorite JS and CSS frameworks. More to come ([vote](https://github.com/videojs/v10/discussions/categories/ideas))\[todo\].
+Video.js aims to provide idiomatic development experiences in your favorite JS and CSS frameworks. More to come ([Vote on what's next](https://github.com/videojs/v10/discussions/categories/ideas))\[todo\].
 
 <ContentWidth margins="lg">
   <JSPicker />
@@ -41,25 +41,35 @@ The defaults work well for general website playback. More use case player preset
 </ContentWidth>
 
 
-## Choose your source type
+## Choose your media source type
 
-Video.js supports your favorite file types and hosting services. Whichever you choose can be easily changed later. ([missing something?](https://github.com/videojs/v10/discussions/categories/ideas))
+Video.js supports a wide range of file types and hosting services. It's easy to switch between them. ([missing something?](https://github.com/videojs/v10/discussions/categories/ideas))
 
 <ContentWidth margins="lg">
   <RendererPicker client:idle />
 </ContentWidth>
 
-## Install your player
+## Install Video.js
 
 <FrameworkCase frameworks={["html"]}>
   <TabsRoot client:idle>
     <TabsList client:idle label="Installation">
-      <Tab client:idle value="npm" initial>npm</Tab>
+      <Tab client:idle value="cdn" initial>cdn</Tab>
+      <Tab client:idle value="npm">npm</Tab>
       <Tab client:idle value="pnpm">pnpm</Tab>
       <Tab client:idle value="yarn">yarn</Tab>
       <Tab client:idle value="bun">bun</Tab>
-      <Tab client:idle value="cdn">cdn</Tab>
     </TabsList>
+    <TabsPanel client:idle value="cdn">
+      ```html
+      <script>
+      // don't need this, will be included in frosted
+      // import 'https://cdn.jsdelivr.net/npm/videojs/html/presets/website.js';
+      import 'https://cdn.jsdelivr.net/npm/videojs/html/presets/website/skins/frosted.js';
+      </script>
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs/html/presets/website/skins/frosted.css" />
+      ```
+    </TabsPanel>
     <TabsPanel client:idle value="npm" initial>
       ```bash
       npm install @videojs/html
@@ -80,16 +90,6 @@ Video.js supports your favorite file types and hosting services. Whichever you c
       bun add @videojs/html
       ```
     </TabsPanel>
-    <TabsPanel client:idle value="cdn">
-      ```html
-      <script>
-      // don't need this, will be included in frosted
-      // import 'https://cdn.jsdelivr.net/npm/videojs/html/presets/website.js';
-      import 'https://cdn.jsdelivr.net/npm/videojs/html/presets/website/skins/frosted.js';
-      </script>
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs/html/presets/website/skins/frosted.css" />
-      ```
-    </TabsPanel>
   </TabsRoot>
   
 </FrameworkCase>
@@ -124,7 +124,6 @@ Video.js supports your favorite file types and hosting services. Whichever you c
   </TabsRoot>
 </FrameworkCase>
 
-
 <FrameworkCase frameworks={["html"]}>
 ## Use your player
 <ContentWidth>
@@ -134,6 +133,7 @@ Video.js supports your favorite file types and hosting services. Whichever you c
 
 <FrameworkCase frameworks={["react"]}>
 ## Create your player
+Add it to your components folder in a new file.
 <ContentWidth>
   <ReactCreateCodeBlock client:idle />
 </ContentWidth>
@@ -145,3 +145,5 @@ Video.js supports your favorite file types and hosting services. Whichever you c
 </FrameworkCase>
 
 That's it! You now have a fully functional Video.js player. Go forth and play.
+
+Something not quite right? You can [submit an issue](https://github.com/videojs/v10/issues) and ask for help, or explore [other support options](/html5-video-support).

site/src/stores/installation.ts

@@ -14,12 +14,12 @@ export type Renderer =
   | 'wistia'
   | 'youtube';
 
-export type Skin = 'frosted' | 'minimal';
+export type Skin = 'default-video' | 'default-audio' | 'minimal';
 
 export type UseCase = 'default-video' | 'default-audio' | 'background-video';
 
 export const renderer = atom<Renderer>('html5-video');
-export const skin = atom<Skin>('frosted');
+export const skin = atom<Skin>('default-video');
 export const useCase = atom<UseCase>('default-video');
 
 /** Mux playback ID from successful upload (used by code generation) */