zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-15 18:34:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-03-04 09:34:10 -06:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 410fc01350
commit f623e676f2
8 changed files with 43 additions and 2066 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/HomePageDemo/Base.tsx
+24 -23
View File
@@ -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' : 'video-minimal-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 `// npm install @videojs/react-preview
import { VideoProvider, ${skinComponent}, Video } from '@videojs/react-preview';
import '@videojs/react-preview/skins/${skinImport}.css';
return `import { createPlayer, Poster } from '@videojs/react';
import { ${skinComponent}, Video, videoFeatures } from '@videojs/react/video';
import '@videojs/react/video/${skinCss}.css';
export const VideoPlayer = () => {
const Player = createPlayer({ features: [...videoFeatures] });
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 }) {
@@ -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>
);
}
site/src/components/HomePageDemo/Eject.tsx
+5 -12
View File
@@ -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 }) {
site/src/components/home/HeroVideo.tsx
+11 -12
View File
@@ -1,24 +1,23 @@
import { useStore } from '@nanostores/react';
import { FrostedSkin, HlsVideo, MinimalSkin, VideoProvider } from '@videojs/react-preview';
import { createPlayer, Poster } from '@videojs/react';
import { MinimalVideoSkin, Video, VideoSkin, videoFeatures } 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: [...videoFeatures] });
export default function HeroVideo({ className, poster }: { className?: string; poster: string }) {
const $skin = useStore(skin);
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>
);
}