Skip to content

feat(site): replace home page tech preview player with real player #580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
decepulis merged 3 commits into from
Mar 4, 2026
Merged

feat(site): replace home page tech preview player with real player #580

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea92478
feat(site): replace home page preview player with real @videojs/react
decepulis Feb 19, 2026
abe6599
Merge branch 'main' into feat/home-page-real-player
decepulis Mar 4, 2026
3b85cff
fix(site): use correct videoFeatures import in hero player
decepulis Mar 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion site/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export default defineConfig({
vite: {
plugins: [tailwindcss()],
optimizeDeps: {
exclude: ['@videojs/react-preview', '@videojs/react', '@videojs/html'],
exclude: ['@videojs/react', '@videojs/html'],
},
resolve: {
dedupe: ['react', 'react-dom'],
Expand Down
2 changes: 0 additions & 2 deletions site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,7 @@
"@sentry/astro": "^10.32.1",
"@tailwindcss/vite": "^4.1.17",
"@videojs/html": "workspace:*",
"@videojs/html-preview": "workspace:*",
"@videojs/react": "workspace:*",
"@videojs/react-preview": "workspace:*",
"astro": "^5.14.4",
"clsx": "^2.1.1",
"es-toolkit": "^1.32.0",
Expand Down
47 changes: 24 additions & 23 deletions site/src/components/HomePageDemo/Base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,42 @@ import { framework, skin } from '@/stores/homePageDemos';
import ClientCode from '../Code/ClientCode';

function generateHTMLCode(skin: Skin): string {
const skinTag = `${skin}-skin`;
const skinTag = skin === 'frosted' ? 'video-skin' : 'minimal-video-skin';
const skinFile = skin === 'frosted' ? 'skin' : 'minimal-skin';

return `<video-provider>
return `<script type="module">
import 'https://cdn.jsdelivr.net/npm/videojs/html/video/player.js';
import 'https://cdn.jsdelivr.net/npm/videojs/html/video/${skinFile}.js';
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs/html/video/${skinFile}.css" />

<video-player>
<${skinTag}>
<video src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"></video>
<video src="..."></video>
</${skinTag}>
</video-provider>`;
</video-player>`;
}

function generateReactCode(skin: Skin): string {
const skinComponent = skin === 'frosted' ? 'FrostedSkin' : 'MinimalSkin';
const skinImport = skin === 'frosted' ? 'frosted' : 'minimal';
const skinComponent = skin === 'frosted' ? 'VideoSkin' : 'MinimalVideoSkin';
const skinCss = skin === 'frosted' ? 'skin' : 'minimal-skin';

return `import { createPlayer, features, Poster } from '@videojs/react';
import { ${skinComponent}, Video } from '@videojs/react/video';
import '@videojs/react/video/${skinCss}.css';

return `// npm install @videojs/react-preview
import { VideoProvider, ${skinComponent}, Video } from '@videojs/react-preview';
import '@videojs/react-preview/skins/${skinImport}.css';
const Player = createPlayer({ features: [...features.video] });

export const VideoPlayer = () => {
export function VideoPlayer() {
return (
<VideoProvider>
<Player.Provider>
<${skinComponent}>
<Video src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4" />
<Video src="..." playsInline />
<Poster src="..." />
</${skinComponent}>
</VideoProvider>
</Player.Provider>
);
};`;
}

function generateJS(skin: Skin): string {
return `// npm install @videojs/html-preview
import '@videojs/html-preview/skins/${skin}';`;
}`;
}

export default function BaseDemo({ className }: { className?: string }) {
Expand All @@ -49,14 +54,10 @@ export default function BaseDemo({ className }: { className?: string }) {
<Tab value="html" initial>
HTML
</Tab>
<Tab value="javascript">JavaScript</Tab>
</TabsList>
<TabsPanel value="html" initial>
<ClientCode code={generateHTMLCode($skin)} lang="html" />
</TabsPanel>
<TabsPanel value="javascript">
<ClientCode code={generateJS($skin)} lang="javascript" />
</TabsPanel>
</TabsRoot>
);
}
Expand Down
17 changes: 5 additions & 12 deletions site/src/components/HomePageDemo/Eject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,26 @@ import { useStore } from '@nanostores/react';
import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
import type { Skin } from '@/stores/homePageDemos';
import { framework, skin } from '@/stores/homePageDemos';
import {
generateHTMLCSS,
generateHTMLJS,
generateHTMLMarkup,
generateReactComponent,
generateReactCSS as genReactCSS,
} from '@/utils/ejectCodeGenerator';
import ClientCode from '../Code/ClientCode';

function generateReactCode(skin: Skin): string {
return generateReactComponent(skin);
return `react`;
}

function generateReactCSS(skin: Skin): string {
return genReactCSS(skin);
return `css`;
}

function generateHTMLCode(skin: Skin): string {
return generateHTMLMarkup(skin);
return `html`;
}

function generateCSS(skin: Skin): string {
return generateHTMLCSS(skin);
return `css`;
}

function generateJS(skin: Skin): string {
return generateHTMLJS(skin);
return `js`;
}

export default function EjectDemo({ className }: { className?: string }) {
Expand Down
23 changes: 11 additions & 12 deletions site/src/components/home/HeroVideo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
import { useStore } from '@nanostores/react';
import { FrostedSkin, HlsVideo, MinimalSkin, VideoProvider } from '@videojs/react-preview';
import { createPlayer, features, Poster } from '@videojs/react';
import { MinimalVideoSkin, Video, VideoSkin } from '@videojs/react/video';
import { VJS8_DEMO_VIDEO } from '@/consts';
import { skin } from '@/stores/homePageDemos';
import '@videojs/react-preview/skins/frosted.css';
import '@videojs/react-preview/skins/minimal.css';
import '@videojs/react/video/skin.css';
import '@videojs/react/video/minimal-skin.css';

const Player = createPlayer({ features: [...features.video] });

export default function HeroVideo({ className, poster }: { className?: string; poster: string }) {
const $skin = useStore(skin);
Copy link
Copy Markdown
Collaborator

@sampotts sampotts Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm getting jQuery vibes with the $ 😄

const SkinComponent = $skin === 'frosted' ? FrostedSkin : MinimalSkin;
const SkinComponent = $skin === 'frosted' ? VideoSkin : MinimalVideoSkin;

return (
<VideoProvider>
<Player.Provider>
<SkinComponent className={className}>
<HlsVideo
// @ts-expect-error -- types are incorrect
src={VJS8_DEMO_VIDEO.hls}
poster={poster}
playsInline
/>
<Video src={VJS8_DEMO_VIDEO.mp4} playsInline />
<Poster src={poster} />
</SkinComponent>
</VideoProvider>
</Player.Provider>
);
}
96 changes: 2 additions & 94 deletions site/src/content/docs/how-to/customize-skins.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,8 @@
---
title: Customize skins
description: Learn how to customize Video.js v10 skins by copying and modifying them
description: Learn how to customize Video.js skins
---

import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs.tsx';
import {
generateHTMLCSS,
generateHTMLJS,
generateHTMLMarkup,
generateReactComponent,
generateReactCSS,
} from '@/utils/ejectCodeGenerator';


Video.js v10 comes with pre-built skins like Frosted and Minimal, but you can fully customize them by "ejecting" the code and making it your own.

While eventually we'll have a CLI that'll eject skins in your preferred framework and style, for now we invite you to try it out with these copy-paste-ready implementations.

## Frosted skin

<FrameworkCase frameworks={["react"]}>

<TabsRoot client:idle>
<TabsList client:idle label="Frosted React implementation">
<Tab client:idle value="component" initial>FrostedSkin.tsx</Tab>
<Tab client:idle value="css">frosted.css</Tab>
</TabsList>
<TabsPanel client:idle value="component" initial>
<ServerCode code={generateReactComponent('frosted')} lang="tsx" />
</TabsPanel>
<TabsPanel client:idle value="css">
<ServerCode code={generateReactCSS('frosted')} lang="css" />
</TabsPanel>
</TabsRoot>

</FrameworkCase>

<FrameworkCase frameworks={["html"]}>

<TabsRoot client:idle>
<TabsList client:idle label="Frosted HTML implementation">
<Tab client:idle value="markup" initial>HTML</Tab>
<Tab client:idle value="js">JS</Tab>
<Tab client:idle value="css">CSS</Tab>
</TabsList>
<TabsPanel client:idle value="markup" initial>
<ServerCode code={generateHTMLMarkup('frosted')} lang="html" />
</TabsPanel>
<TabsPanel client:idle value="js">
<ServerCode code={generateHTMLJS('frosted')} lang="typescript" />
</TabsPanel>
<TabsPanel client:idle value="css">
<ServerCode code={generateHTMLCSS('frosted')} lang="css" />
</TabsPanel>
</TabsRoot>

</FrameworkCase>

## Minimal skin

<FrameworkCase frameworks={["react"]}>

<TabsRoot client:idle>
<TabsList client:idle label="Minimal React implementation">
<Tab client:idle value="react" initial>MinimalSkin.tsx</Tab>
<Tab client:idle value="css">minimal.css</Tab>
</TabsList>
<TabsPanel client:idle value="react" initial>
<ServerCode code={generateReactComponent('minimal')} lang="tsx" />
</TabsPanel>
<TabsPanel client:idle value="css">
<ServerCode code={generateReactCSS('minimal')} lang="css" />
</TabsPanel>
</TabsRoot>

</FrameworkCase>

<FrameworkCase frameworks={["html"]}>

<TabsRoot client:idle>
<TabsList client:idle label="Minimal HTML implementation">
<Tab client:idle value="html" initial>HTML</Tab>
<Tab client:idle value="js">JS</Tab>
<Tab client:idle value="css">CSS</Tab>
</TabsList>
<TabsPanel client:idle value="html" initial>
<ServerCode code={generateHTMLMarkup('minimal')} lang="html" />
</TabsPanel>
<TabsPanel client:idle value="js">
<ServerCode code={generateHTMLJS('minimal')} lang="typescript" />
</TabsPanel>
<TabsPanel client:idle value="css">
<ServerCode code={generateHTMLCSS('minimal')} lang="css" />
</TabsPanel>
</TabsRoot>

</FrameworkCase>
🚧 Under construction 🚧
Loading