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

fix(site): include HLS CDN script in installation builder (#907)

Browse Source
This commit is contained in:
rahim
2026-03-11 19:27:05 -07:00
committed by GitHub
parent b676517993
commit 6a69779946
3 changed files with 62 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/installation/HTMLCdnCodeBlock.tsx
+4 -27
View File
@@ -1,35 +1,12 @@
import { useStore } from '@nanostores/react';
import ClientCode from '@/components/Code/ClientCode';
import type { Skin, UseCase } from '@/stores/installation';
import { skin, useCase } from '@/stores/installation';
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 === 'minimal-video') return 'video-minimal';
if (skin === 'minimal-audio') return 'audio-minimal';
return skin;
}
function generateCdnCode(useCase: UseCase, skin: Skin): string {
if (useCase === 'background-video') {
return `<script type="module">
import '${CDN_BASE}/background/player.js';
import '${CDN_BASE}/background/skin.js';
</script>
<link rel="stylesheet" href="${CDN_BASE}/background/skin.css" />`;
}
const name = getCdnFileName(useCase, skin);
return `<script type="module" src="${CDN_BASE}/${name}.js"></script>
<link rel="stylesheet" href="${CDN_BASE}/${name}.css" />`;
}
import { renderer, skin, useCase } from '@/stores/installation';
import { generateCdnCode } from '@/utils/installation/cdn-code';
export default function HTMLCdnCodeBlock() {
const $useCase = useStore(useCase);
const $skin = useStore(skin);
const $renderer = useStore(renderer);
return <ClientCode code={generateCdnCode($useCase, $skin)} lang="html" />;
return <ClientCode code={generateCdnCode($useCase, $skin, $renderer)} lang="html" />;
}
site/src/utils/installation/__tests__/cdn-code.test.ts
+26
View File
@@ -0,0 +1,26 @@
import { describe, expect, it } from 'vitest';
import { generateCdnCode } from '../cdn-code';
describe('generateCdnCode', () => {
it('generates video preset CDN tags for html5-video', () => {
expect(generateCdnCode('default-video', 'video', 'html5-video')).toEqual(
`<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.css" />`
);
});
it('includes hls media bundle when renderer is hls', () => {
expect(generateCdnCode('default-video', 'minimal-video', 'hls')).toEqual(
`<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video-minimal.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/media/hls-video.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video-minimal.css" />`
);
});
it('generates background preset CDN tags', () => {
expect(generateCdnCode('background-video', 'video', 'background-video')).toEqual(
`<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/background.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/background.css" />`
);
});
});
site/src/utils/installation/cdn-code.ts
+32
View File
@@ -0,0 +1,32 @@
import type { Renderer, Skin, UseCase } from '@/stores/installation';
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 === 'minimal-video') return 'video-minimal';
if (skin === 'minimal-audio') return 'audio-minimal';
return skin;
}
function getCdnMediaSubpath(renderer: Renderer): string | null {
const map: Partial<Record<Renderer, string>> = {
hls: 'hls-video',
};
return map[renderer] ?? null;
}
export function generateCdnCode(useCase: UseCase, skin: Skin, renderer: Renderer): string {
const name = getCdnFileName(useCase, skin);
const mediaSubpath = getCdnMediaSubpath(renderer);
const scriptLines = [`<script type="module" src="${CDN_BASE}/${name}.js"></script>`];
if (mediaSubpath) {
scriptLines.push(`<script type="module" src="${CDN_BASE}/media/${mediaSubpath}.js"></script>`);
}
return `${scriptLines.join('\n')}
<link rel="stylesheet" href="${CDN_BASE}/${name}.css" />`;
}