diff --git a/packages/html/package.json b/packages/html/package.json index eab1cca4..fc085aba 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -93,7 +93,7 @@ }, "scripts": { "build": "tsdown", - "build:cdn": "tsdown --config tsdown.cdn.config.ts && node scripts/cdn-copy-css.js", + "build:cdn": "tsdown --config tsdown.cdn.config.ts", "build:watch": "tsdown --watch ./src --no-clean", "dev": "pnpm run build:watch", "test": "vitest run", diff --git a/packages/html/scripts/cdn-copy-css.js b/packages/html/scripts/cdn-copy-css.js deleted file mode 100644 index e09fe035..00000000 --- a/packages/html/scripts/cdn-copy-css.js +++ /dev/null @@ -1,29 +0,0 @@ -import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'; -import { dirname, resolve } from 'node:path'; -import { fileURLToPath } from 'node:url'; -import { transform } from 'lightningcss'; - -const root = resolve(dirname(fileURLToPath(import.meta.url)), '..'); -const htmlDist = resolve(root, 'dist/default/define'); -const outDir = resolve(root, 'cdn'); - -const cssFiles = [ - { src: 'video/skin.css', dest: 'video.css' }, - { src: 'video/minimal-skin.css', dest: 'video-minimal.css' }, - { src: 'audio/skin.css', dest: 'audio.css' }, - { src: 'audio/minimal-skin.css', dest: 'audio-minimal.css' }, - { src: 'background/skin.css', dest: 'background.css' }, -]; - -for (const { src, dest } of cssFiles) { - const srcPath = resolve(htmlDist, src); - const destPath = resolve(outDir, dest); - const raw = readFileSync(srcPath); - - const { code } = transform({ filename: srcPath, code: raw, minify: true }); - - mkdirSync(dirname(destPath), { recursive: true }); - writeFileSync(destPath, code); - - console.log(` ${dest} (${raw.length} → ${code.length})`); -} diff --git a/packages/html/src/define/background/skin.ts b/packages/html/src/define/background/skin.ts index 13fa23c5..9c2a4ebf 100644 --- a/packages/html/src/define/background/skin.ts +++ b/packages/html/src/define/background/skin.ts @@ -1,6 +1,17 @@ import { ReactiveElement } from '@videojs/element'; import { namedNodeMapToObject } from '@videojs/utils/dom'; import { safeDefine } from '../safe-define'; +import styles from './skin.css?inline'; + +const STYLES_ID = '__media-background-styles'; + +function ensureBackgroundStyles(): void { + if (document.getElementById(STYLES_ID)) return; + const style = document.createElement('style'); + style.id = STYLES_ID; + style.textContent = styles; + document.head.appendChild(style); +} function getTemplateHTML(_attrs: Record) { return /*html*/ ` @@ -20,6 +31,8 @@ export class BackgroundVideoSkinElement extends ReactiveElement { constructor() { super(); + ensureBackgroundStyles(); + if (!this.shadowRoot) { this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions); this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes)); diff --git a/packages/sandbox/templates/cdn/main.ts b/packages/sandbox/templates/cdn/main.ts index 6e4ca7bf..d96ba8a4 100644 --- a/packages/sandbox/templates/cdn/main.ts +++ b/packages/sandbox/templates/cdn/main.ts @@ -33,7 +33,6 @@ async function loadCdnPreset(preset: Preset, skin: Skin) { else await import('@videojs/html/cdn/audio'); break; case 'background-video': - await import('@videojs/html/background/skin.css'); await import('@videojs/html/cdn/background'); break; } diff --git a/packages/sandbox/templates/html-background-video/main.ts b/packages/sandbox/templates/html-background-video/main.ts index 11d1063c..22664998 100644 --- a/packages/sandbox/templates/html-background-video/main.ts +++ b/packages/sandbox/templates/html-background-video/main.ts @@ -1,5 +1,4 @@ import '@app/styles.css'; -import '@videojs/html/background/skin.css'; import '@videojs/html/background/player'; import '@videojs/html/background/skin'; import '@videojs/html/background/video'; diff --git a/site/src/components/home/Demo/baseCode.ts b/site/src/components/home/Demo/baseCode.ts index af1aea11..92a5f2f8 100644 --- a/site/src/components/home/Demo/baseCode.ts +++ b/site/src/components/home/Demo/baseCode.ts @@ -8,7 +8,6 @@ export function generateHTMLCode(skin: Skin): string { const cdnFile = skin === 'default' ? 'video' : 'video-minimal'; return ` - <${skinTag}> diff --git a/site/src/components/installation/HTMLUsageCodeBlock.tsx b/site/src/components/installation/HTMLUsageCodeBlock.tsx index 420780ec..51829352 100644 --- a/site/src/components/installation/HTMLUsageCodeBlock.tsx +++ b/site/src/components/installation/HTMLUsageCodeBlock.tsx @@ -121,15 +121,13 @@ function generateJS(useCase: UseCase, skin: Skin, renderer: Renderer): string { const mediaImport = mediaSubpath ? `\nimport '@videojs/html/media/${mediaSubpath}';` : ''; return `import '@videojs/html/background/player'; import '@videojs/html/background/skin'; -import '@videojs/html/background/skin.css'; import '@videojs/html/background/video';${mediaImport}`; } const { group, skinFile } = getSkinImportParts(skin); const mediaSubpath = getMediaImportSubpath(renderer); const mediaImport = mediaSubpath ? `\nimport '@videojs/html/media/${mediaSubpath}';` : ''; return `import '@videojs/html/${group}/player'; -import '@videojs/html/${group}/${skinFile}'; -import '@videojs/html/${group}/${skinFile}.css';${mediaImport}`; +import '@videojs/html/${group}/${skinFile}';${mediaImport}`; } export default function HTMLUsageCodeBlock() { diff --git a/site/src/content/docs/concepts/overview.mdx b/site/src/content/docs/concepts/overview.mdx index 0ff30095..e00d893f 100644 --- a/site/src/content/docs/concepts/overview.mdx +++ b/site/src/content/docs/concepts/overview.mdx @@ -172,7 +172,6 @@ function Hero() { import '@videojs/html/background/player'; import '@videojs/html/background/video'; import '@videojs/html/background/skin'; - import '@videojs/html/background/skin.css'; diff --git a/site/src/content/docs/concepts/presets.mdx b/site/src/content/docs/concepts/presets.mdx index dfce25b7..db631d6c 100644 --- a/site/src/content/docs/concepts/presets.mdx +++ b/site/src/content/docs/concepts/presets.mdx @@ -35,7 +35,6 @@ function Hero() { import '@videojs/html/background/player'; import '@videojs/html/background/video'; import '@videojs/html/background/skin'; - import '@videojs/html/background/skin.css'; diff --git a/site/src/utils/installation/__tests__/cdn-code.test.ts b/site/src/utils/installation/__tests__/cdn-code.test.ts index f8538937..7df9eb9e 100644 --- a/site/src/utils/installation/__tests__/cdn-code.test.ts +++ b/site/src/utils/installation/__tests__/cdn-code.test.ts @@ -4,23 +4,20 @@ import { generateCdnCode } from '../cdn-code'; describe('generateCdnCode', () => { it('generates video preset CDN tags for html5-video', () => { expect(generateCdnCode('default-video', 'video', 'html5-video')).toEqual( - ` -` + `` ); }); it('includes hls media bundle when renderer is hls', () => { expect(generateCdnCode('default-video', 'minimal-video', 'hls')).toEqual( ` - -` +` ); }); it('generates background preset CDN tags', () => { expect(generateCdnCode('background-video', 'video', 'background-video')).toEqual( - ` -` + `` ); }); }); diff --git a/site/src/utils/installation/cdn-code.ts b/site/src/utils/installation/cdn-code.ts index 218a51ae..4b7aabaa 100644 --- a/site/src/utils/installation/cdn-code.ts +++ b/site/src/utils/installation/cdn-code.ts @@ -27,6 +27,5 @@ export function generateCdnCode(useCase: UseCase, skin: Skin, renderer: Renderer scriptLines.push(``); } - return `${scriptLines.join('\n')} -`; + return scriptLines.join('\n'); }