From e2efb6e1a751c098c29afd8bbae3d8ff235b26bd Mon Sep 17 00:00:00 2001
From: Rahim <rahim.alwer@gmail.com>
Date: Thu, 3 Sep 2026 16:23:17 -0700
Subject: [PATCH] docs(site): simplify media reference installs

---
 .../docs/api-reference/MediaImports.astro       |  2 +-
 .../docs/api-reference/ModuleImports.astro      | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/site/src/components/docs/api-reference/MediaImports.astro b/site/src/components/docs/api-reference/MediaImports.astro
index 33d773522f..65f352ef4d 100644
--- a/site/src/components/docs/api-reference/MediaImports.astro
+++ b/site/src/components/docs/api-reference/MediaImports.astro
@@ -13,4 +13,4 @@ interface Props {
 const { media, package: pkg, react } = Astro.props;
 ---
 
-<ModuleImports name={media} package={pkg} react={react} subpath="media" />
+<ModuleImports name={media} package={pkg} packageOnlyInstall={true} react={react} subpath="media" />
diff --git a/site/src/components/docs/api-reference/ModuleImports.astro b/site/src/components/docs/api-reference/ModuleImports.astro
index 593983c1b0..0cfd593f72 100644
--- a/site/src/components/docs/api-reference/ModuleImports.astro
+++ b/site/src/components/docs/api-reference/ModuleImports.astro
@@ -13,22 +13,29 @@ interface Props {
   name: string;
   /** Package that ships the module's adapter or extension, installed beside the framework package. */
   package?: string;
+  /** Whether the install command should include only the module package. */
+  packageOnlyInstall?: boolean;
   /** Named export from the React module. */
   react: string;
   /** Public module family shared by the React, HTML, and CDN imports. */
   subpath: 'extensions' | 'media';
 }
 
-const { name, package: pkg, react, subpath } = Astro.props;
+const { name, package: pkg, packageOnlyInstall = false, react, subpath } = Astro.props;
 
 const cdnCode = `<script type="module" src="${VJS10_CDN_BASE}/${subpath}/${name}.js"></script>`;
 
 const imports: Array<{ code: string; framework: 'react' | 'html'; lang: BundledLanguage }> = [
   ...(pkg
-    ? [
-        { code: `pnpm add @videojs/react ${pkg}`, framework: 'react' as const, lang: 'bash' as const },
-        { code: `pnpm add @videojs/html ${pkg}`, framework: 'html' as const, lang: 'bash' as const },
-      ]
+    ? packageOnlyInstall
+      ? [
+          { code: `pnpm add ${pkg}`, framework: 'react' as const, lang: 'bash' as const },
+          { code: `pnpm add ${pkg}`, framework: 'html' as const, lang: 'bash' as const },
+        ]
+      : [
+          { code: `pnpm add @videojs/react ${pkg}`, framework: 'react' as const, lang: 'bash' as const },
+          { code: `pnpm add @videojs/html ${pkg}`, framework: 'html' as const, lang: 'bash' as const },
+        ]
     : []),
   {
     code: `import { ${react} } from '@videojs/react/${subpath}/${name}';`,