site: add default Mux sources to home and installation snippets (#815)

site/src/components/home/Demo/Base.tsx

@@ -1,5 +1,6 @@
 import { useStore } from '@nanostores/react';
 import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
+import { VJS10_DEMO_VIDEO } from '@/consts';
 import type { Skin } from '@/stores/homePageDemos';
 import { framework, skin } from '@/stores/homePageDemos';
 import ClientCode from '../../Code/ClientCode';
@@ -16,7 +17,7 @@ function generateHTMLCode(skin: Skin): string {
 
 <video-player>
   <${skinTag}>
-    <video src="..."></video>
+    <video src="${VJS10_DEMO_VIDEO.mp4}"></video>
   </${skinTag}>
 </video-player>`;
 }
@@ -35,8 +36,8 @@ export function VideoPlayer() {
   return (
     <Player.Provider>
       <${skinComponent}>
-        <Video src="..." playsInline />
-        <Poster src="..." />
+        <Video src="${VJS10_DEMO_VIDEO.mp4}" playsInline />
+        <Poster src="${VJS10_DEMO_VIDEO.poster}" />
       </${skinComponent}>
     </Player.Provider>
   );

site/src/components/installation/HTMLUsageCodeBlock.tsx

@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react';
 import ClientCode from '@/components/Code/ClientCode';
 import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
+import { VJS10_DEMO_VIDEO } from '@/consts';
 import type { Renderer, Skin, UseCase } from '@/stores/installation';
 import { installMethod, renderer, skin, sourceUrl, useCase } from '@/stores/installation';
 
@@ -50,10 +51,22 @@ function getSkinTag(useCase: UseCase, skin: Skin): string {
 
 function getRendererElement(renderer: Renderer, url: string): string {
   const tag = getRendererTag(renderer);
-  const src = url.trim() || '...';
+  const src = url.trim() || getDefaultSourceUrl(renderer);
   return `<${tag} slot="media" src="${src}"></${tag}>`;
 }
 
+function getDefaultSourceUrl(renderer: Renderer): string {
+  switch (renderer) {
+    case 'hls':
+      return VJS10_DEMO_VIDEO.hls;
+    case 'background-video':
+    case 'html5-audio':
+    case 'html5-video':
+    default:
+      return VJS10_DEMO_VIDEO.mp4;
+  }
+}
+
 function generateHTMLCode(useCase: UseCase, skin: Skin, renderer: Renderer, url: string): string {
   const providerTag = getProviderTag(useCase);
   const skinTag = getSkinTag(useCase, skin);

site/src/components/installation/ReactUsageCodeBlock.tsx

@@ -1,10 +1,17 @@
 import { useStore } from '@nanostores/react';
 import ClientCode from '@/components/Code/ClientCode';
 import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
+import { VJS10_DEMO_VIDEO } from '@/consts';
+import type { Renderer } from '@/stores/installation';
 import { renderer, sourceUrl } from '@/stores/installation';
 
-function generateUsageCode(url: string): string {
-  const playerProp = url.trim() ? `src="${url.trim()}"` : 'src="https://example.com/video.mp4"';
+function getDefaultSourceUrl(renderer: Renderer): string {
+  return renderer === 'hls' ? VJS10_DEMO_VIDEO.hls : VJS10_DEMO_VIDEO.mp4;
+}
+
+function generateUsageCode(url: string, renderer: Renderer): string {
+  const source = url.trim() || getDefaultSourceUrl(renderer);
+  const playerProp = `src="${source}"`;
 
   return `import { MyPlayer } from '../components/player';
 
@@ -19,7 +26,7 @@ export const HomePage = () => {
 }
 
 export default function ReactUsageCodeBlock() {
-  useStore(renderer);
+  const $renderer = useStore(renderer);
   const $sourceUrl = useStore(sourceUrl);
 
   return (
@@ -30,7 +37,7 @@ export default function ReactUsageCodeBlock() {
         </Tab>
       </TabsList>
       <TabsPanel value="react" initial>
-        <ClientCode code={generateUsageCode($sourceUrl)} lang="tsx" />
+        <ClientCode code={generateUsageCode($sourceUrl, $renderer)} lang="tsx" />
       </TabsPanel>
     </TabsRoot>
   );