docs(site): add "No Skin" option to installation skin picker

Author: ronald-urbina

site/src/components/installation/SkinPicker.tsx

@@ -1,5 +1,5 @@
 import { useStore } from '@nanostores/react';
-import { Minus, Sparkles } from 'lucide-react';
+import { Code2, Minus, Sparkles } from 'lucide-react';
 import { useEffect } from 'react';
 import type { ImageRadioOption } from '@/components/ImageRadioGroup';
 import ImageRadioGroup from '@/components/ImageRadioGroup';
@@ -9,11 +9,13 @@ import type { Skin } from '@/utils/installation/types';
 const VIDEO_SKINS: ImageRadioOption<Skin>[] = [
   { value: 'video', label: 'Default', image: <Sparkles size={32} /> },
   { value: 'minimal-video', label: 'Minimal', image: <Minus size={32} /> },
+  { value: 'none', label: 'No Skin', image: <Code2 size={32} /> },
 ];
 
 const AUDIO_SKINS: ImageRadioOption<Skin>[] = [
   { value: 'audio', label: 'Default', image: <Sparkles size={32} /> },
   { value: 'minimal-audio', label: 'Minimal', image: <Minus size={32} /> },
+  { value: 'none', label: 'No Skin', image: <Code2 size={32} /> },
 ];
 
 export default function SkinPicker() {

site/src/utils/installation/cdn-code.ts

@@ -4,6 +4,7 @@ const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@videojs/html/cdn';
 
 function getCdnFileName(useCase: UseCase, skin: Skin): string {
   if (useCase === 'background-video') return 'background';
+  if (skin === 'none') return useCase === 'default-audio' ? 'audio-player' : 'video-player';
   if (skin === 'minimal-video') return 'video-minimal';
   if (skin === 'minimal-audio') return 'audio-minimal';
   return skin;

site/src/utils/installation/codegen.ts

@@ -37,7 +37,11 @@ function isVideoLikeRenderer(renderer: Renderer): boolean {
   return renderer === 'html5-video' || renderer === 'hls' || renderer === 'background-video';
 }
 
-function getSkinImportParts(skin: Skin): { group: string; skinFile: string } {
+function getGroupFromUseCase(useCase: UseCase): string {
+  return useCase === 'default-audio' ? 'audio' : 'video';
+}
+
+function getSkinImportParts(skin: Exclude<Skin, 'none'>): { group: string; skinFile: string } {
   if (skin === 'minimal-video') return { group: 'video', skinFile: 'minimal-skin' };
   if (skin === 'minimal-audio') return { group: 'audio', skinFile: 'minimal-skin' };
   return { group: skin, skinFile: 'skin' };
@@ -102,11 +106,11 @@ function getProviderTag(useCase: UseCase): string {
   return map[useCase];
 }
 
-function getSkinTag(useCase: UseCase, skin: Skin): string {
+function getSkinTag(useCase: UseCase, skin: Exclude<Skin, 'none'>): string {
   if (useCase === 'background-video') {
     return 'background-video-skin';
   }
-  const map: Record<Skin, string> = {
+  const map: Record<Exclude<Skin, 'none'>, string> = {
     video: 'video-skin',
     audio: 'audio-skin',
     'minimal-video': 'video-minimal-skin',
@@ -117,28 +121,40 @@ function getSkinTag(useCase: UseCase, skin: Skin): string {
 
 function generateHTMLMarkup(useCase: UseCase, skin: Skin, renderer: Renderer, url: string): string {
   const providerTag = getProviderTag(useCase);
-  const skinTag = getSkinTag(useCase, skin);
   const tag = getRendererTag(renderer);
   const src = resolveSourceUrl(url, renderer);
   const playsInline = isVideoLikeRenderer(renderer) ? ' playsinline' : '';
 
-  return `<!--
+  const mediaComment = `  <!--
+      Media are players without UIs, handling networking
+      and display of the media. They are easily swappable
+      to handle different sources.
+    -->`;
+
+  const providerComment = `<!--
   The PlayerProvider passes state between the UI components
   and Media, and makes fully custom UIs possible.
   It does not have layout by default (display:contents)
- -->
+ -->`;
+
+  if (skin === 'none') {
+    return `${providerComment}
+<${providerTag}>
+${mediaComment}
+  <${tag} src="${src}"${playsInline}></${tag}>
+</${providerTag}>`;
+  }
+
+  const skinTag = getSkinTag(useCase, skin);
+  return `${providerComment}
 <${providerTag}>
   <!--
     Skins contain the entire player UI and are easily swappable.
     They can each be "ejected" for full control and customization
     of UI components.
    -->
   <${skinTag}>
-    <!--
-      Media are players without UIs, handling networking
-      and display of the media. They are easily swappable
-      to handle different sources.
-    -->
+${mediaComment}
     <${tag} src="${src}"${playsInline}></${tag}>
   </${skinTag}>
 </${providerTag}>`;
@@ -152,9 +168,13 @@ function generateHTMLJSImports(useCase: UseCase, skin: Skin, renderer: Renderer)
 import '@videojs/html/background/skin';
 import '@videojs/html/background/video';${mediaImport}`;
   }
-  const { group, skinFile } = getSkinImportParts(skin);
+  const group = skin === 'none' ? getGroupFromUseCase(useCase) : getSkinImportParts(skin).group;
   const mediaSubpath = getMediaImportSubpath(renderer);
   const mediaImport = mediaSubpath ? `\nimport '@videojs/html/media/${mediaSubpath}';` : '';
+  if (skin === 'none') {
+    return `import '@videojs/html/${group}/player';${mediaImport}`;
+  }
+  const { skinFile } = getSkinImportParts(skin);
   return `import '@videojs/html/${group}/player';
 import '@videojs/html/${group}/${skinFile}';${mediaImport}`;
 }
@@ -181,8 +201,8 @@ function getRendererComponent(renderer: Renderer): string {
   return map[renderer];
 }
 
-function getSkinComponent(skin: Skin): string {
-  const map: Record<Skin, string> = {
+function getSkinComponent(skin: Exclude<Skin, 'none'>): string {
+  const map: Record<Exclude<Skin, 'none'>, string> = {
     video: 'VideoSkin',
     audio: 'AudioSkin',
     'minimal-video': 'MinimalVideoSkin',
@@ -219,31 +239,58 @@ export function generateReactCreateCode(
   const featureType = getUseCaseFeatures(useCase);
 
   const isBackgroundVideo = useCase === 'background-video';
-  const skinComponent = isBackgroundVideo ? 'BackgroundVideoSkin' : getSkinComponent(skin);
-  const { group, skinFile } = getSkinImportParts(skin);
-  const skinCssImport = isBackgroundVideo
-    ? '@videojs/react/background/skin.css'
-    : `@videojs/react/${group}/${skinFile}.css`;
+  const isNoSkin = skin === 'none';
+  const group = isBackgroundVideo
+    ? 'background'
+    : isNoSkin
+      ? getGroupFromUseCase(useCase)
+      : getSkinImportParts(skin).group;
 
-  const presetSubpath = isBackgroundVideo ? 'background' : group;
+  const rendererProps = isVideoLikeRenderer(renderer) ? 'src={src} playsInline' : 'src={src}';
+  const rendererJsx = `<${rendererComponent} ${rendererProps} />`;
 
   let presetImport: string;
   let mediaImport: string | null = null;
-
-  if (isPresetRenderer(renderer)) {
-    presetImport = `import { ${skinComponent}, ${rendererComponent} } from '@videojs/react/${presetSubpath}';`;
+  let skinCssImport: string | null = null;
+  let skinComponent: string | null = null;
+
+  if (isBackgroundVideo) {
+    skinComponent = 'BackgroundVideoSkin';
+    skinCssImport = '@videojs/react/background/skin.css';
+    presetImport = `import { ${skinComponent}, ${rendererComponent} } from '@videojs/react/background';`;
+  } else if (isNoSkin) {
+    if (isPresetRenderer(renderer)) {
+      presetImport = `import { ${rendererComponent} } from '@videojs/react/${group}';`;
+    } else {
+      presetImport = '';
+      mediaImport = `import { ${rendererComponent} } from '@videojs/react/media/${getRendererMediaSubpath(renderer)}';`;
+    }
   } else {
-    presetImport = `import { ${skinComponent} } from '@videojs/react/${presetSubpath}';`;
-    mediaImport = `import { ${rendererComponent} } from '@videojs/react/media/${getRendererMediaSubpath(renderer)}';`;
+    const { skinFile } = getSkinImportParts(skin);
+    skinComponent = getSkinComponent(skin);
+    skinCssImport = `@videojs/react/${group}/${skinFile}.css`;
+    if (isPresetRenderer(renderer)) {
+      presetImport = `import { ${skinComponent}, ${rendererComponent} } from '@videojs/react/${group}';`;
+    } else {
+      presetImport = `import { ${skinComponent} } from '@videojs/react/${group}';`;
+      mediaImport = `import { ${rendererComponent} } from '@videojs/react/media/${getRendererMediaSubpath(renderer)}';`;
+    }
   }
 
-  const rendererProps = isVideoLikeRenderer(renderer) ? 'src={src} playsInline' : 'src={src}';
-  const rendererJsx = `<${rendererComponent} ${rendererProps} />`;
+  const playerJsx = skinComponent
+    ? `    <Player.Provider>
+      <${skinComponent}>
+        ${rendererJsx}
+      </${skinComponent}>
+    </Player.Provider>`
+    : `    <Player.Provider>
+      ${rendererJsx}
+    </Player.Provider>`;
 
   const imports = [
-    `import '${skinCssImport}';`,
+    ...(skinCssImport ? [`import '${skinCssImport}';`] : []),
     `import { createPlayer, ${featureType} } from '@videojs/react';`,
-    presetImport,
+    ...(presetImport ? [presetImport] : []),
     ...(mediaImport ? [mediaImport] : []),
   ].join('\n');
 
@@ -260,11 +307,7 @@ interface MyPlayerProps {
 
 export const MyPlayer = ({ src }: MyPlayerProps) => {
   return (
-    <Player.Provider>
-      <${skinComponent}>
-        ${rendererJsx}
-      </${skinComponent}>
-    </Player.Provider>
+${playerJsx}
   );
 };`,
   };

site/src/utils/installation/types.ts

@@ -1,6 +1,6 @@
 export type Renderer = 'background-video' | 'hls' | 'html5-audio' | 'html5-video';
 
-export type Skin = 'video' | 'audio' | 'minimal-video' | 'minimal-audio';
+export type Skin = 'video' | 'audio' | 'minimal-video' | 'minimal-audio' | 'none';
 
 export type UseCase = 'default-video' | 'default-audio' | 'background-video';