From 78de97ec23c474b70edda0a594e277f7eaf1b86c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 16 Feb 2026 14:11:40 +1100 Subject: [PATCH] feat(icons): setup icons package (#536) --- .../api-reference/references/demo-patterns.md | 5 +- .claude/skills/docs/patterns/code-examples.md | 9 +- packages/icons/package.json | 46 +++++- packages/icons/scripts/build.ts | 136 ++++++++++++++++++ .../src/assets/default/fullscreen-enter.svg | 10 ++ .../src/assets/default/fullscreen-exit.svg | 10 ++ packages/icons/src/assets/default/pause.svg | 4 + packages/icons/src/assets/default/play.svg | 5 + packages/icons/src/assets/default/spinner.svg | 35 +++++ .../icons/src/assets/default/volume-high.svg | 8 ++ .../icons/src/assets/default/volume-low.svg | 5 + .../icons/src/assets/default/volume-off.svg | 5 + .../src/assets/minimal/fullscreen-enter.svg | 10 ++ .../src/assets/minimal/fullscreen-exit.svg | 10 ++ packages/icons/src/assets/minimal/pause.svg | 4 + packages/icons/src/assets/minimal/play.svg | 5 + packages/icons/src/assets/minimal/spinner.svg | 35 +++++ .../icons/src/assets/minimal/volume-high.svg | 8 ++ .../icons/src/assets/minimal/volume-low.svg | 5 + .../icons/src/assets/minimal/volume-off.svg | 5 + packages/icons/tsconfig.json | 10 ++ packages/utils/package.json | 8 ++ packages/utils/src/string/casing.ts | 7 + packages/utils/src/string/index.ts | 1 + .../utils/src/string/tests/casing.test.ts | 44 ++++++ packages/utils/src/style/cn.ts | 11 ++ packages/utils/src/style/index.ts | 1 + packages/utils/src/style/tests/cn.test.ts | 32 +++++ packages/utils/tsdown.config.ts | 2 + pnpm-lock.yaml | 28 +++- .../react/css/BasicUsage.tsx | 3 +- .../mute-button/react/css/VolumeLevels.tsx | 3 +- .../demos/pip-button/react/css/BasicUsage.tsx | 3 +- .../seek-button/react/css/BasicUsage.tsx | 3 +- tsconfig.json | 2 + 35 files changed, 504 insertions(+), 14 deletions(-) create mode 100644 packages/icons/scripts/build.ts create mode 100644 packages/icons/src/assets/default/fullscreen-enter.svg create mode 100644 packages/icons/src/assets/default/fullscreen-exit.svg create mode 100644 packages/icons/src/assets/default/pause.svg create mode 100644 packages/icons/src/assets/default/play.svg create mode 100644 packages/icons/src/assets/default/spinner.svg create mode 100755 packages/icons/src/assets/default/volume-high.svg create mode 100644 packages/icons/src/assets/default/volume-low.svg create mode 100644 packages/icons/src/assets/default/volume-off.svg create mode 100644 packages/icons/src/assets/minimal/fullscreen-enter.svg create mode 100644 packages/icons/src/assets/minimal/fullscreen-exit.svg create mode 100644 packages/icons/src/assets/minimal/pause.svg create mode 100644 packages/icons/src/assets/minimal/play.svg create mode 100644 packages/icons/src/assets/minimal/spinner.svg create mode 100755 packages/icons/src/assets/minimal/volume-high.svg create mode 100644 packages/icons/src/assets/minimal/volume-low.svg create mode 100644 packages/icons/src/assets/minimal/volume-off.svg create mode 100644 packages/icons/tsconfig.json create mode 100644 packages/utils/src/string/casing.ts create mode 100644 packages/utils/src/string/index.ts create mode 100644 packages/utils/src/string/tests/casing.test.ts create mode 100644 packages/utils/src/style/cn.ts create mode 100644 packages/utils/src/style/index.ts create mode 100644 packages/utils/src/style/tests/cn.test.ts diff --git a/.claude/skills/api-reference/references/demo-patterns.md b/.claude/skills/api-reference/references/demo-patterns.md index 45d64079..3e5f3523 100644 --- a/.claude/skills/api-reference/references/demo-patterns.md +++ b/.claude/skills/api-reference/references/demo-patterns.md @@ -109,6 +109,7 @@ import '@videojs/html/ui/mute-button'; ``` Import registration for: + - `@videojs/html/video/player` — always needed (registers ``) - `@videojs/html/ui/{component}` — registers the component's custom element @@ -117,7 +118,8 @@ Import registration for: ### .tsx (component) ```tsx -import { createPlayer, features, MuteButton, Video } from '@videojs/react'; +import { createPlayer, features, MuteButton } from '@videojs/react'; +import { Video } from '@videojs/react/video'; import './BasicUsage.css'; @@ -147,6 +149,7 @@ export default function BasicUsage() { ``` Key patterns: + - `createPlayer({ features: [...features.video] })` creates the player - Video attributes: `autoPlay muted playsInline loop` (React camelCase) - `render` prop for state-based rendering: `render={(props, state) => ...}` diff --git a/.claude/skills/docs/patterns/code-examples.md b/.claude/skills/docs/patterns/code-examples.md index 37b63dee..669c971e 100644 --- a/.claude/skills/docs/patterns/code-examples.md +++ b/.claude/skills/docs/patterns/code-examples.md @@ -24,7 +24,8 @@ function App() { } // ✅ Complete — copy, paste, run -import { createPlayer, features, PlayButton, Video } from '@videojs/react'; +import { createPlayer, features, PlayButton } from '@videojs/react'; +import { Video } from '@videojs/react/video'; const Player = createPlayer({ features: [...features.video] }); @@ -77,7 +78,8 @@ Site pages use `` and `` to show code per framework. N **React:** ```tsx -import { createPlayer, features, PlayButton, Video } from '@videojs/react'; +import { createPlayer, features, PlayButton } from '@videojs/react'; +import { Video } from '@videojs/react/video'; const Player = createPlayer({ features: [...features.video] }); @@ -222,7 +224,8 @@ Show which file code belongs to when multiple files are involved: ````markdown ```tsx title="App.tsx" -import { createPlayer, features, PlayButton, Video } from '@videojs/react'; +import { createPlayer, features, PlayButton } from '@videojs/react'; +import { Video } from '@videojs/react/video'; import './App.css'; const Player = createPlayer({ features: [...features.video] }); diff --git a/packages/icons/package.json b/packages/icons/package.json index 18f967e8..26a6ec18 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,15 +1,55 @@ { "name": "@videojs/icons", "type": "module", + "private": true, "version": "0.1.0-alpha.1", "description": "SVG icon library for Video.js", "license": "Apache-2.0", - "files": [], + "sideEffects": false, + "exports": { + "./react": { + "types": "./dist/react/default/index.d.ts", + "default": "./dist/react/default/index.js" + }, + "./react/*": { + "types": "./dist/react/*/index.d.ts", + "default": "./dist/react/*/index.js" + }, + "./html": { + "types": "./dist/html/default/index.d.ts", + "default": "./dist/html/default/index.js" + }, + "./html/*": { + "types": "./dist/html/*/index.d.ts", + "default": "./dist/html/*/index.js" + } + }, + "files": [ + "dist" + ], + "scripts": { + "build": "node --import tsx scripts/build.ts", + "clean": "rm -rf dist" + }, + "dependencies": { + "svgo": "^3.3.2" + }, "devDependencies": { - "tsdown": "^0.20.3", + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0", + "@svgr/plugin-svgo": "^8.1.0", + "@types/react": "^19.0.0", + "@videojs/utils": "workspace:*", + "react": "^19.0.0", + "tsx": "^4.19.0", "typescript": "^5.9.3" }, "publishConfig": { "access": "public" - } + }, + "keywords": [ + "videojs", + "icons", + "svg" + ] } diff --git a/packages/icons/scripts/build.ts b/packages/icons/scripts/build.ts new file mode 100644 index 00000000..d296f872 --- /dev/null +++ b/packages/icons/scripts/build.ts @@ -0,0 +1,136 @@ +import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs'; +import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { transform } from '@svgr/core'; +import { camelCase, pascalCase } from '@videojs/utils/string'; +import { transform as esbuildTransform } from 'esbuild'; +import { optimize } from 'svgo'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const ROOT = join(__dirname, '..'); +const ASSETS_DIR = join(ROOT, 'src/assets'); +const DIST_DIR = join(ROOT, 'dist'); + +const FRAMEWORKS = ['react', 'html'] as const; +type Framework = (typeof FRAMEWORKS)[number]; + +const SVGO_CONFIG = { + multipass: true, + plugins: [], +}; + +function ensureDir(path: string): void { + if (!existsSync(path)) mkdirSync(path, { recursive: true }); +} + +function cleanDist(): void { + if (existsSync(DIST_DIR)) rmSync(DIST_DIR, { recursive: true, force: true }); +} + +function getIconSets(): string[] { + if (!existsSync(ASSETS_DIR)) { + console.error(`Assets directory not found: ${ASSETS_DIR}`); + process.exit(1); + } + return readdirSync(ASSETS_DIR).filter((item) => !item.startsWith('.') && item !== 'index'); +} + +function getSvgFiles(setName: string): string[] { + return readdirSync(join(ASSETS_DIR, setName)).filter((f) => f.endsWith('.svg')); +} + +function optimizeSvg(svgContent: string): string { + return optimize(svgContent, SVGO_CONFIG).data; +} + +async function buildReactComponent(svgContent: string, componentName: string): Promise<{ js: string; tsx: string }> { + const transformOpts = { + plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], + svgoConfig: SVGO_CONFIG, + }; + + const tsxCode = await transform(svgContent, { ...transformOpts, typescript: true }, { componentName }); + const jsxCode = await transform(svgContent, transformOpts, { componentName }); + + // SVGR outputs JSX syntax which is invalid in .js files — compile to JS + const { code } = await esbuildTransform(jsxCode, { loader: 'jsx', jsx: 'automatic' }); + + return { js: code, tsx: tsxCode }; +} + +function buildHtmlExport(svgContent: string, varName: string): string { + return `export const ${varName} = \`${optimizeSvg(svgContent)}\`;\n`; +} + +function buildIndexExports(icons: { name: string; varName: string }[], framework: Framework): string { + return icons + .map(({ name, varName }) => + framework === 'react' + ? `export { default as ${pascalCase(varName)}Icon } from './${name}.js';` + : `export { ${camelCase(varName)}Icon } from './${name}.js';` + ) + .join('\n'); +} + +function buildIndexTypes(icons: { name: string; varName: string }[], framework: Framework): string { + const types = icons.map(({ varName }) => + framework === 'react' + ? `export declare const ${pascalCase(varName)}Icon: React.ForwardRefExoticComponent & React.RefAttributes>;` + : `export declare const ${camelCase(varName)}Icon: string;` + ); + return `/// \n${types.join('\n')}\n`; +} + +async function buildIconSet(setName: string): Promise { + const svgFiles = getSvgFiles(setName); + console.log(` Building set: ${setName} (${svgFiles.length} icons)`); + + const icons = svgFiles.map((file) => ({ + name: file.replace('.svg', ''), + varName: file.replace('.svg', ''), + content: readFileSync(join(ASSETS_DIR, setName, file), 'utf8'), + })); + + for (const framework of FRAMEWORKS) { + const outDir = join(DIST_DIR, framework, setName); + ensureDir(outDir); + + for (const icon of icons) { + const { name, varName, content } = icon; + + if (framework === 'react') { + const componentName = `${pascalCase(varName)}Icon`; + const { js, tsx } = await buildReactComponent(content, componentName); + writeFileSync(join(outDir, `${name}.js`), js); + writeFileSync(join(outDir, `${name}.tsx`), tsx); + writeFileSync( + join(outDir, `${name}.d.ts`), + `import * as React from 'react';\ndeclare const ${componentName}: React.ForwardRefExoticComponent & React.RefAttributes>;\nexport default ${componentName};\n` + ); + } else { + const varNameCamel = camelCase(varName); + writeFileSync(join(outDir, `${name}.js`), buildHtmlExport(content, `${varNameCamel}Icon`)); + writeFileSync(join(outDir, `${name}.d.ts`), `export declare const ${varNameCamel}Icon: string;\n`); + } + } + + writeFileSync(join(outDir, 'index.js'), buildIndexExports(icons, framework)); + writeFileSync(join(outDir, 'index.d.ts'), buildIndexTypes(icons, framework)); + } +} + +async function main(): Promise { + console.log('Building icons...\n'); + cleanDist(); + + const sets = getIconSets(); + console.log(`Found ${sets.length} icon sets: ${sets.join(', ')}\n`); + + for (const set of sets) { + await buildIconSet(set); + } + + console.log('\nBuild complete!'); +} + +main().catch(console.error); diff --git a/packages/icons/src/assets/default/fullscreen-enter.svg b/packages/icons/src/assets/default/fullscreen-enter.svg new file mode 100644 index 00000000..fb646cd4 --- /dev/null +++ b/packages/icons/src/assets/default/fullscreen-enter.svg @@ -0,0 +1,10 @@ + + + + diff --git a/packages/icons/src/assets/default/fullscreen-exit.svg b/packages/icons/src/assets/default/fullscreen-exit.svg new file mode 100644 index 00000000..586fc235 --- /dev/null +++ b/packages/icons/src/assets/default/fullscreen-exit.svg @@ -0,0 +1,10 @@ + + + + diff --git a/packages/icons/src/assets/default/pause.svg b/packages/icons/src/assets/default/pause.svg new file mode 100644 index 00000000..94b7dc64 --- /dev/null +++ b/packages/icons/src/assets/default/pause.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/assets/default/play.svg b/packages/icons/src/assets/default/play.svg new file mode 100644 index 00000000..9646cc51 --- /dev/null +++ b/packages/icons/src/assets/default/play.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/src/assets/default/spinner.svg b/packages/icons/src/assets/default/spinner.svg new file mode 100644 index 00000000..8ef97004 --- /dev/null +++ b/packages/icons/src/assets/default/spinner.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/icons/src/assets/default/volume-high.svg b/packages/icons/src/assets/default/volume-high.svg new file mode 100755 index 00000000..bae36d94 --- /dev/null +++ b/packages/icons/src/assets/default/volume-high.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/src/assets/default/volume-low.svg b/packages/icons/src/assets/default/volume-low.svg new file mode 100644 index 00000000..07fcbb44 --- /dev/null +++ b/packages/icons/src/assets/default/volume-low.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/src/assets/default/volume-off.svg b/packages/icons/src/assets/default/volume-off.svg new file mode 100644 index 00000000..e776b6a9 --- /dev/null +++ b/packages/icons/src/assets/default/volume-off.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/src/assets/minimal/fullscreen-enter.svg b/packages/icons/src/assets/minimal/fullscreen-enter.svg new file mode 100644 index 00000000..63623fa5 --- /dev/null +++ b/packages/icons/src/assets/minimal/fullscreen-enter.svg @@ -0,0 +1,10 @@ + + + + diff --git a/packages/icons/src/assets/minimal/fullscreen-exit.svg b/packages/icons/src/assets/minimal/fullscreen-exit.svg new file mode 100644 index 00000000..6c085818 --- /dev/null +++ b/packages/icons/src/assets/minimal/fullscreen-exit.svg @@ -0,0 +1,10 @@ + + + + diff --git a/packages/icons/src/assets/minimal/pause.svg b/packages/icons/src/assets/minimal/pause.svg new file mode 100644 index 00000000..94b7dc64 --- /dev/null +++ b/packages/icons/src/assets/minimal/pause.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/assets/minimal/play.svg b/packages/icons/src/assets/minimal/play.svg new file mode 100644 index 00000000..9646cc51 --- /dev/null +++ b/packages/icons/src/assets/minimal/play.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/src/assets/minimal/spinner.svg b/packages/icons/src/assets/minimal/spinner.svg new file mode 100644 index 00000000..8ef97004 --- /dev/null +++ b/packages/icons/src/assets/minimal/spinner.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/icons/src/assets/minimal/volume-high.svg b/packages/icons/src/assets/minimal/volume-high.svg new file mode 100755 index 00000000..bae36d94 --- /dev/null +++ b/packages/icons/src/assets/minimal/volume-high.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/src/assets/minimal/volume-low.svg b/packages/icons/src/assets/minimal/volume-low.svg new file mode 100644 index 00000000..07fcbb44 --- /dev/null +++ b/packages/icons/src/assets/minimal/volume-low.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/src/assets/minimal/volume-off.svg b/packages/icons/src/assets/minimal/volume-off.svg new file mode 100644 index 00000000..e776b6a9 --- /dev/null +++ b/packages/icons/src/assets/minimal/volume-off.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json new file mode 100644 index 00000000..5283a614 --- /dev/null +++ b/packages/icons/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src", + "declaration": true, + "jsx": "react-jsx" + }, + "include": ["src/**/*", "dist/**/*"] +} diff --git a/packages/utils/package.json b/packages/utils/package.json index 56f90157..963b2d87 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -30,6 +30,14 @@ "types": "./dist/predicate.d.ts", "default": "./dist/predicate.js" }, + "./string": { + "types": "./dist/string.d.ts", + "default": "./dist/string.js" + }, + "./style": { + "types": "./dist/style.d.ts", + "default": "./dist/style.js" + }, "./time": { "types": "./dist/time.d.ts", "default": "./dist/time.js" diff --git a/packages/utils/src/string/casing.ts b/packages/utils/src/string/casing.ts new file mode 100644 index 00000000..46cb4612 --- /dev/null +++ b/packages/utils/src/string/casing.ts @@ -0,0 +1,7 @@ +export function pascalCase(str: string): string { + return str.replace(/[-_](.)/g, (_, c) => c.toUpperCase()).replace(/^(.)/, (_, c) => c.toUpperCase()); +} + +export function camelCase(str: string): string { + return pascalCase(str).replace(/^(.)/, (_, c) => c.toLowerCase()); +} diff --git a/packages/utils/src/string/index.ts b/packages/utils/src/string/index.ts new file mode 100644 index 00000000..bba4fbbf --- /dev/null +++ b/packages/utils/src/string/index.ts @@ -0,0 +1 @@ +export * from './casing'; diff --git a/packages/utils/src/string/tests/casing.test.ts b/packages/utils/src/string/tests/casing.test.ts new file mode 100644 index 00000000..0d20a66d --- /dev/null +++ b/packages/utils/src/string/tests/casing.test.ts @@ -0,0 +1,44 @@ +import { describe, expect, it } from 'vitest'; +import { camelCase, pascalCase } from '../casing'; + +describe('casing', () => { + describe('pascalCase', () => { + it('converts simple strings', () => { + expect(pascalCase('hello')).toBe('Hello'); + }); + + it('converts kebab-case', () => { + expect(pascalCase('hello-world')).toBe('HelloWorld'); + }); + + it('converts snake_case', () => { + expect(pascalCase('hello_world')).toBe('HelloWorld'); + }); + + it('converts mixed case', () => { + expect(pascalCase('hello-World')).toBe('HelloWorld'); + }); + + it('handles already pascal case', () => { + expect(pascalCase('HelloWorld')).toBe('HelloWorld'); + }); + }); + + describe('camelCase', () => { + it('converts simple strings', () => { + expect(camelCase('hello')).toBe('hello'); + }); + + it('converts pascal case', () => { + expect(camelCase('HelloWorld')).toBe('helloWorld'); + }); + + it('converts kebab-case', () => { + expect(camelCase('hello-world')).toBe('helloWorld'); + }); + + it('converts snake_case', () => { + expect(camelCase('hello_world')).toBe('helloWorld'); + }); + }); +}); diff --git a/packages/utils/src/style/cn.ts b/packages/utils/src/style/cn.ts new file mode 100644 index 00000000..f3cbd944 --- /dev/null +++ b/packages/utils/src/style/cn.ts @@ -0,0 +1,11 @@ +/** + * A (very basic) utility to merge class names and make them a little easier to read. + * Aims to replicate the API of popular libraries like `clsx` and `classnames` but with a much simpler implementation. + * This is not intended to be a full replacement for those libraries, but it should be sufficient for our use case. + * It also allows us to avoid adding an additional dependency to our packages. + * @param classes - An array of class names, which can be strings or undefined. Undefined values will be filtered out. + * @returns A single string of class names, separated by spaces. + */ +export function cn(...classes: (string | undefined)[]): string { + return classes.filter(Boolean).join(' '); +} diff --git a/packages/utils/src/style/index.ts b/packages/utils/src/style/index.ts new file mode 100644 index 00000000..9ae36a53 --- /dev/null +++ b/packages/utils/src/style/index.ts @@ -0,0 +1 @@ +export * from './cn'; diff --git a/packages/utils/src/style/tests/cn.test.ts b/packages/utils/src/style/tests/cn.test.ts new file mode 100644 index 00000000..22a27bd3 --- /dev/null +++ b/packages/utils/src/style/tests/cn.test.ts @@ -0,0 +1,32 @@ +import { describe, expect, it } from 'vitest'; +import { cn } from '../cn'; + +describe('cn', () => { + it('returns an empty string for no arguments', () => { + expect(cn()).toBe(''); + }); + + it('returns a single class name', () => { + expect(cn('foo')).toBe('foo'); + }); + + it('joins multiple class names with a space', () => { + expect(cn('foo', 'bar', 'baz')).toBe('foo bar baz'); + }); + + it('filters out undefined values', () => { + expect(cn('foo', undefined, 'bar')).toBe('foo bar'); + }); + + it('handles all undefined values', () => { + expect(cn(undefined, undefined)).toBe(''); + }); + + it('filters out empty strings', () => { + expect(cn('foo', '', 'bar')).toBe('foo bar'); + }); + + it('preserves class names with multiple words', () => { + expect(cn('foo bar', 'baz')).toBe('foo bar baz'); + }); +}); diff --git a/packages/utils/tsdown.config.ts b/packages/utils/tsdown.config.ts index c3f25ee6..bd2679f5 100644 --- a/packages/utils/tsdown.config.ts +++ b/packages/utils/tsdown.config.ts @@ -9,6 +9,8 @@ export default defineConfig({ number: './src/number/index.ts', object: './src/object/index.ts', predicate: './src/predicate/index.ts', + string: './src/string/index.ts', + style: './src/style/index.ts', time: './src/time/index.ts', types: './src/types/index.ts', }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8bef7d7b..81d44e0f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -235,10 +235,32 @@ importers: version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2) packages/icons: + dependencies: + svgo: + specifier: ^3.3.2 + version: 3.3.2 devDependencies: - tsdown: - specifier: ^0.20.3 - version: 0.20.3(typescript@5.9.3) + '@svgr/core': + specifier: ^8.1.0 + version: 8.1.0(typescript@5.9.3) + '@svgr/plugin-jsx': + specifier: ^8.1.0 + version: 8.1.0(@svgr/core@8.1.0(typescript@5.9.3)) + '@svgr/plugin-svgo': + specifier: ^8.1.0 + version: 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))(typescript@5.9.3) + '@types/react': + specifier: ^19.0.0 + version: 19.2.7 + '@videojs/utils': + specifier: workspace:* + version: link:../utils + react: + specifier: ^19.0.0 + version: 19.2.3 + tsx: + specifier: ^4.19.0 + version: 4.21.0 typescript: specifier: ^5.9.3 version: 5.9.3 diff --git a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx index aa60ae56..29616935 100644 --- a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx @@ -1,4 +1,5 @@ -import { BufferingIndicator, createPlayer, features, Video } from '@videojs/react'; +import { BufferingIndicator, createPlayer, features } from '@videojs/react'; +import { Video } from '@videojs/react/video'; import './BasicUsage.css'; diff --git a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx index 75459dc7..3ddc92d2 100644 --- a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx +++ b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx @@ -1,4 +1,5 @@ -import { createPlayer, features, MuteButton, Video } from '@videojs/react'; +import { createPlayer, features, MuteButton } from '@videojs/react'; +import { Video } from '@videojs/react/video'; import './VolumeLevels.css'; diff --git a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx index 5083e63c..e845e1f6 100644 --- a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx @@ -1,4 +1,5 @@ -import { createPlayer, features, PiPButton, Video } from '@videojs/react'; +import { createPlayer, features, PiPButton } from '@videojs/react'; +import { Video } from '@videojs/react/video'; import './BasicUsage.css'; diff --git a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx index 326918f9..04f325cc 100644 --- a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx @@ -1,4 +1,5 @@ -import { createPlayer, features, SeekButton, Video } from '@videojs/react'; +import { createPlayer, features, SeekButton } from '@videojs/react'; +import { Video } from '@videojs/react/video'; import './BasicUsage.css'; diff --git a/tsconfig.json b/tsconfig.json index 43844387..7b7b98fc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,6 +16,8 @@ { "path": "packages/core" }, { "path": "packages/core/src/dom" }, + { "path": "packages/icons" }, + { "path": "packages/html" }, { "path": "packages/react" } ],