zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: eject examples (#149)

Browse Source
This commit is contained in:
Darius Cepulis
2025-10-30 00:24:53 -05:00
committed by GitHub
parent ed1398efbf
commit 06a1a9e2f9
32 changed files with 4395 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/HomePageDemo/Base.tsx
+13 -25
View File
@@ -1,71 +1,59 @@
import type { Media, Skin } from '@/stores/homePageDemos';
import type { Skin } from '@/stores/homePageDemos';
import { useStore } from '@nanostores/react';
import { TabsPanel, TabsRoot } from '@/components/Tabs';
import { framework, media, skin } from '@/stores/homePageDemos';
import { framework, skin } from '@/stores/homePageDemos';
import ClientCode from '../Code/ClientCode';
function generateHTMLCode(skin: Skin, media: Media): string {
function generateHTMLCode(skin: Skin): string {
const skinTag = `${skin}-skin`;
const mediaTag = media;
const videoExtension = media === 'hls-video' ? 'm3u8' : 'mp4';
return `<video-provider>
<${skinTag}>
<${mediaTag} src="https://example.com/video.${videoExtension}"></${mediaTag}>
<video src="https://example.com/video.mp4"></video>
</${skinTag}>
</video-provider>`;
}
function generateReactCode(skin: Skin, media: Media): string {
function generateReactCode(skin: Skin): string {
const skinComponent = skin === 'frosted' ? 'FrostedSkin' : 'MinimalSkin';
const mediaComponent = media === 'video' ? 'Video' : 'HLSVideo';
const skinImport = skin === 'frosted' ? 'frosted' : 'minimal';
const videoExtension = media === 'hls-video' ? 'm3u8' : 'mp4';
return `import { VideoProvider, ${mediaComponent} } from '@videojs/react';
return `import { VideoProvider, Video } from '@videojs/react';
import { ${skinComponent} } from '@videojs/react/skins/${skinImport}';
export const VideoPlayer = () => {
return (
<VideoProvider>
<${skinComponent}>
<${mediaComponent} src="https://example.com/video.${videoExtension}" />
<Video src="https://example.com/video.mp4" />
</${skinComponent}>
</VideoProvider>
);
};`;
}
function generateCSS(_skin: Skin, _media: Media): string {
return 'Coming soon';
}
function generateJS(_skin: Skin, _media: Media): string {
return 'Coming soon';
function generateJS(_skin: Skin): string {
return `import '@videojs/html/skins/frosted';`;
}
export default function BaseDemo({ className }: { className?: string }) {
const $framework = useStore(framework);
const $skin = useStore(skin);
const $media = useStore(media);
if ($framework === 'html') {
return (
<TabsRoot
id="base-html"
aria-label="HTML implementation"
titles={{ html: 'HTML', css: 'CSS', javascript: 'JavaScript' }}
titles={{ html: 'HTML', javascript: 'JavaScript' }}
className={className}
maxWidth={false}
>
<TabsPanel tabsId="base-html" value="html">
<ClientCode code={generateHTMLCode($skin, $media)} lang="html" />
</TabsPanel>
<TabsPanel tabsId="base-html" value="css">
<ClientCode code={generateCSS($skin, $media)} lang="css" />
<ClientCode code={generateHTMLCode($skin)} lang="html" />
</TabsPanel>
<TabsPanel tabsId="base-html" value="javascript">
<ClientCode code={generateJS($skin, $media)} lang="javascript" />
<ClientCode code={generateJS($skin)} lang="javascript" />
</TabsPanel>
</TabsRoot>
);
@@ -80,7 +68,7 @@ export default function BaseDemo({ className }: { className?: string }) {
maxWidth={false}
>
<TabsPanel tabsId="base-react" value="react">
<ClientCode code={generateReactCode($skin, $media)} lang="tsx" />
<ClientCode code={generateReactCode($skin)} lang="tsx" />
</TabsPanel>
</TabsRoot>
);
site/src/components/HomePageDemo/Eject.tsx
+25 -19
View File
@@ -1,33 +1,39 @@
import type { Media, Skin } from '@/stores/homePageDemos';
import type { Skin } from '@/stores/homePageDemos';
import { useStore } from '@nanostores/react';
import { TabsPanel, TabsRoot } from '@/components/Tabs';
import { framework, media, 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 generateHTMLCode(_skin: Skin, _media: Media): string {
return 'Coming soon';
function generateReactCode(skin: Skin): string {
return generateReactComponent(skin);
}
function generateReactCode(_skin: Skin, _media: Media): string {
return 'Coming soon';
function generateReactCSS(skin: Skin): string {
return genReactCSS(skin);
}
function generateCSSModuleCode(_skin: Skin, _media: Media): string {
return 'Coming soon';
function generateHTMLCode(skin: Skin): string {
return generateHTMLMarkup(skin);
}
function generateCSS(_skin: Skin, _media: Media): string {
return 'Coming soon';
function generateCSS(skin: Skin): string {
return generateHTMLCSS(skin);
}
function generateJS(_skin: Skin, _media: Media): string {
return 'Coming soon';
function generateJS(skin: Skin): string {
return generateHTMLJS(skin);
}
export default function EjectDemo({ className }: { className?: string }) {
const $framework = useStore(framework);
const $skin = useStore(skin);
const $media = useStore(media);
if ($framework === 'html') {
return (
@@ -39,13 +45,13 @@ export default function EjectDemo({ className }: { className?: string }) {
maxWidth={false}
>
<TabsPanel tabsId="eject-html" value="html">
<ClientCode code={generateHTMLCode($skin, $media)} lang="html" />
<ClientCode code={generateHTMLCode($skin)} lang="html" />
</TabsPanel>
<TabsPanel tabsId="eject-html" value="css">
<ClientCode code={generateCSS($skin, $media)} lang="css" />
<ClientCode code={generateCSS($skin)} lang="css" />
</TabsPanel>
<TabsPanel tabsId="eject-html" value="javascript">
<ClientCode code={generateJS($skin, $media)} lang="javascript" />
<ClientCode code={generateJS($skin)} lang="javascript" />
</TabsPanel>
</TabsRoot>
);
@@ -55,15 +61,15 @@ export default function EjectDemo({ className }: { className?: string }) {
<TabsRoot
id="eject-react"
aria-label="React implementation"
titles={{ react: 'React', css: 'CSS Module' }}
titles={{ react: 'React', css: 'CSS' }}
className={className}
maxWidth={false}
>
<TabsPanel tabsId="eject-react" value="react">
<ClientCode code={generateReactCode($skin, $media)} lang="tsx" />
<ClientCode code={generateReactCode($skin)} lang="tsx" />
</TabsPanel>
<TabsPanel tabsId="eject-react" value="css">
<ClientCode code={generateCSSModuleCode($skin, $media)} lang="css" />
<ClientCode code={generateReactCSS($skin)} lang="css" />
</TabsPanel>
</TabsRoot>
);