From d2b2dd48682bbf9bd22da47bb3eb51b01f323916 Mon Sep 17 00:00:00 2001 From: Rahim Date: Mon, 22 Sep 2025 23:39:30 +1000 Subject: [PATCH] done --- .prettierignore | 1 + .prettierrc.cjs | 40 ++ CLAUDE.md | 23 +- examples/html-demo/index.html | 2 +- examples/html-demo/package.json | 2 +- examples/html-demo/vite.config.mts | 3 +- examples/react-demo/index.html | 8 +- examples/react-demo/package.json | 2 +- examples/react-demo/src/globals.css | 8 +- examples/react-demo/src/main.tsx | 15 +- examples/react-demo/vite.config.ts | 2 +- package-lock.json | 80 +++- package.json | 16 +- packages/core/icons/rollup.config.js | 12 +- packages/core/icons/src/index.ts | 32 +- packages/core/icons/src/svg.d.ts | 2 +- packages/core/icons/tsconfig.build.json | 2 +- packages/core/icons/tsconfig.json | 2 +- packages/core/media-store/package.json | 2 +- packages/core/media-store/rollup.config.js | 8 +- .../current-time-display.ts | 10 +- .../duration-display.ts | 6 +- .../fullscreen-button.ts | 27 +- .../mute-button.ts | 6 +- .../play-button.ts | 6 +- .../component-state-definitions/time-range.ts | 6 +- .../volume-range.ts | 4 +- packages/core/media-store/src/factory.ts | 40 +- packages/core/media-store/src/index.ts | 2 +- packages/core/media-store/src/media-store.ts | 12 +- .../src/state-mediators/audible.ts | 22 +- .../src/state-mediators/fullscreenable.ts | 23 +- .../media-store/src/state-mediators/index.ts | 2 +- .../src/state-mediators/playable.ts | 10 +- .../src/state-mediators/temporal.ts | 44 +-- packages/core/media-store/src/utils/time.ts | 25 +- packages/core/media-store/tsconfig.build.json | 2 +- packages/core/media-store/tsconfig.json | 2 +- packages/core/media/package.json | 2 +- packages/core/media/src/index.ts | 12 +- packages/core/media/src/playable.ts | 18 +- packages/core/media/tsconfig.json | 2 +- packages/core/media/tsup.config.ts | 2 +- packages/core/playback-engine/package.json | 2 +- .../src/HlsJSPlaybackEngine.ts | 2 +- packages/core/playback-engine/src/index.ts | 2 +- packages/core/playback-engine/tsconfig.json | 2 +- packages/core/playback-engine/tsup.config.ts | 2 +- packages/html/html-icons/rollup.config.js | 8 +- packages/html/html-icons/src/index.ts | 2 +- .../html/html-icons/src/media-chrome-icon.ts | 2 +- .../src/media-fullscreen-enter-icon.ts | 5 +- .../src/media-fullscreen-exit-icon.ts | 5 +- .../html/html-icons/src/media-pause-icon.ts | 5 +- .../html/html-icons/src/media-play-icon.ts | 5 +- .../html-icons/src/media-volume-high-icon.ts | 4 +- .../html-icons/src/media-volume-low-icon.ts | 4 +- .../html-icons/src/media-volume-off-icon.ts | 4 +- packages/html/html-icons/tsconfig.build.json | 2 +- packages/html/html-icons/tsconfig.json | 2 +- .../html/html-media-elements/package.json | 2 +- .../html/html-media-elements/src/index.ts | 2 +- .../html/html-media-elements/tsconfig.json | 2 +- .../html/html-media-elements/tsup.config.ts | 2 +- packages/html/html-media-store/package.json | 2 +- packages/html/html-media-store/src/index.ts | 2 +- packages/html/html-media-store/tsconfig.json | 2 +- packages/html/html-media-store/tsup.config.ts | 2 +- packages/html/html/rollup.config.js | 8 +- .../src/components/media-chrome-button.ts | 14 +- .../components/media-current-time-display.ts | 29 +- .../src/components/media-duration-display.ts | 27 +- .../src/components/media-fullscreen-button.ts | 20 +- .../html/src/components/media-mute-button.ts | 11 +- .../html/src/components/media-play-button.ts | 20 +- .../html/src/components/media-time-range.ts | 52 ++- .../html/src/components/media-volume-range.ts | 9 +- packages/html/html/src/media-container.ts | 2 +- .../html/html/src/utils/component-factory.ts | 2 +- packages/html/html/tsconfig.build.json | 2 +- packages/html/html/tsconfig.json | 2 +- .../react-native-icons/package.json | 2 +- .../react-native-icons/src/index.tsx | 35 +- .../react-native-icons/tsconfig.json | 2 +- .../react-native-icons/tsup.config.ts | 2 +- .../react-native-media-elements/package.json | 2 +- .../react-native-media-elements/src/index.tsx | 12 +- .../react-native-media-elements/tsconfig.json | 2 +- .../tsup.config.ts | 2 +- .../react-native/react-native/package.json | 2 +- .../react-native/react-native/src/index.tsx | 4 +- .../react-native/react-native/tsconfig.json | 2 +- .../react-native/react-native/tsup.config.ts | 2 +- packages/react/react-icons/README.md | 2 +- packages/react/react-icons/package.json | 2 +- packages/react/react-icons/rollup.config.js | 8 +- packages/react/react-icons/src/index.ts | 2 +- packages/react/react-icons/src/types.d.ts | 4 +- packages/react/react-icons/svgr.config.js | 30 +- .../react/react-icons/tsconfig.build.json | 2 +- packages/react/react-icons/tsconfig.json | 2 +- .../react/react-media-elements/package.json | 2 +- .../react/react-media-elements/src/index.ts | 2 +- .../src/media-elements.tsx | 360 ++++++++++-------- .../react/react-media-elements/tsconfig.json | 2 +- .../react/react-media-elements/tsup.config.ts | 2 +- packages/react/react-media-store/package.json | 2 +- .../react-media-store/src/MediaProvider.tsx | 25 +- packages/react/react-media-store/src/index.ts | 2 +- .../src/useSyncExternalStoreWithSelector.ts | 26 +- .../react/react-media-store/tsconfig.json | 2 +- .../react/react-media-store/tsup.config.ts | 2 +- packages/react/react/rollup.config.js | 20 +- .../src/components/CurrentTimeDisplay.tsx | 23 +- .../react/src/components/DurationDisplay.tsx | 32 +- .../react/src/components/FullscreenButton.tsx | 28 +- .../react/src/components/MediaContainer.tsx | 44 ++- .../react/react/src/components/MuteButton.tsx | 31 +- .../react/react/src/components/PlayButton.tsx | 31 +- .../react/react/src/components/TimeRange.tsx | 54 +-- packages/react/react/src/components/Video.tsx | 49 +-- .../react/src/components/VolumeRange.tsx | 26 +- packages/react/react/src/index.tsx | 2 +- .../react/src/skins/MediaSkinDefault.tsx | 31 +- .../react/react/src/skins/styles.module.css | 14 +- packages/react/react/src/skins/styles.ts | 32 +- packages/react/react/src/types.d.ts | 2 +- .../react/src/utils/component-factory.tsx | 28 +- packages/react/react/tsconfig.build.json | 2 +- packages/react/react/tsconfig.json | 2 +- tsconfig.base.json | 9 +- tsconfig.json | 2 +- 132 files changed, 860 insertions(+), 969 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc.cjs diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..bd5535a6 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +pnpm-lock.yaml diff --git a/.prettierrc.cjs b/.prettierrc.cjs new file mode 100644 index 00000000..4fe65186 --- /dev/null +++ b/.prettierrc.cjs @@ -0,0 +1,40 @@ +module.exports = { + printWidth: 120, + singleQuote: true, + tabWidth: 2, + useTabs: false, + semi: true, + quoteProps: 'as-needed', + jsxSingleQuote: false, + trailingComma: 'es5', + bracketSpacing: true, + bracketSameLine: false, + arrowParens: 'always', + plugins: ['@ianvs/prettier-plugin-sort-imports'], + importOrder: [ + '.css$', + '.styles$', + '', + '', + '', + '^__', + '', + '^node:', + '', + '', + '^react', + '^prop-types$', + '', + '', + '', + '.+__deprecated__', + '', + '^@mux', + '', + '^@', + '', + '^[$]', + '^[../]', + '^(?!.*[.](svg|png|webp|mp4)$)[./].*$', + ], +}; diff --git a/CLAUDE.md b/CLAUDE.md index 58884dc3..96038318 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -7,12 +7,14 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co This is a Video.js 10 monorepo organized by platform/runtime with a clear dependency hierarchy: ### Package Structure + - **Core packages** (`packages/core/*`) - Runtime-agnostic packages that form the foundation -- **HTML packages** (`packages/html/*`) - DOM/Browser-specific implementations +- **HTML packages** (`packages/html/*`) - DOM/Browser-specific implementations - **React packages** (`packages/react/*`) - React-specific implementations - **React Native packages** (`packages/react-native/*`) - React Native implementations ### Dependency Hierarchy + - Core packages have no dependencies on other vjs-10 packages - HTML packages depend only on core packages - React packages depend only on core packages (with React peer deps) @@ -21,6 +23,7 @@ This is a Video.js 10 monorepo organized by platform/runtime with a clear depend This prevents circular dependencies and ensures maximum reusability. ### Key Core Packages + - `@vjs-10/media-store` - State management for media players - `@vjs-10/playback-engine` - Abstraction layer for media engines (HLS.js, Dash.js, etc.) - `@vjs-10/media` - HTMLMediaElement contracts and utilities @@ -29,6 +32,7 @@ This prevents circular dependencies and ensures maximum reusability. ## Common Development Commands ### Monorepo Commands (run from root) + ```bash # Install all dependencies npm install @@ -50,6 +54,7 @@ npm run clean ``` ### Working with Specific Packages + ```bash # Build specific package npm run build --workspace=@vjs-10/media-store @@ -62,11 +67,13 @@ npm run build ## TypeScript Configuration The monorepo uses TypeScript project references for efficient compilation: + - `tsconfig.base.json` - Shared compiler options with strict settings - `tsconfig.json` - Root config with path mappings and project references - Each package has its own `tsconfig.json` extending the base Key TypeScript features: + - Strict mode enabled with additional checks (`noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`) - Path mappings for all `@vjs-10/*` packages point to source directories - Composite builds for incremental compilation @@ -74,7 +81,9 @@ Key TypeScript features: ## Package Development ### Individual Package Scripts + Most packages follow this pattern: + ```bash npm run build # Compile TypeScript (tsc) npm run test # Currently placeholder "No tests yet" @@ -82,6 +91,7 @@ npm run clean # Remove dist directory ``` ### Package Types + - **Core packages** - Pure TypeScript, no external dependencies - **HTML packages** - May include DOM-specific code, depend on core packages - **React packages** - Include React peer dependencies, depend on core packages @@ -90,8 +100,9 @@ npm run clean # Remove dist directory ## Workspace Management This uses npm workspaces with the following workspace patterns: + - `packages/core/*` -- `packages/html/*` +- `packages/html/*` - `packages/react/*` - `packages/react-native/*` @@ -102,6 +113,7 @@ Internal dependencies use `workspace:*` protocol for linking between packages. This project uses [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#specification) for commit messages. ### Commit Message Format + ``` [optional scope]: @@ -111,6 +123,7 @@ This project uses [Conventional Commits](https://www.conventionalcommits.org/en/ ``` ### Common Types + - `feat:` - New feature - `fix:` - Bug fix - `docs:` - Documentation changes @@ -120,15 +133,19 @@ This project uses [Conventional Commits](https://www.conventionalcommits.org/en/ - `chore:` - Maintenance tasks, dependency updates ### Scope Examples + Use package names or areas of the codebase: + - `feat(media-store): add pause state management` - `fix(react-icons): resolve SVG rendering issue` - `docs(readme): update installation instructions` - `chore(deps): update typescript to 5.4.0` ### Breaking Changes + For breaking changes, add `!` after the type/scope: + ``` feat!: remove deprecated playback API feat(media-store)!: change state interface structure -``` \ No newline at end of file +``` diff --git a/examples/html-demo/index.html b/examples/html-demo/index.html index 6099e3db..d602e3b6 100644 --- a/examples/html-demo/index.html +++ b/examples/html-demo/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/html-demo/package.json b/examples/html-demo/package.json index 4150fcae..75f78a5a 100644 --- a/examples/html-demo/package.json +++ b/examples/html-demo/package.json @@ -16,4 +16,4 @@ "typescript": "^5.9.2", "vite": "^7.1.6" } -} \ No newline at end of file +} diff --git a/examples/html-demo/vite.config.mts b/examples/html-demo/vite.config.mts index c2f634a8..289e7f7a 100644 --- a/examples/html-demo/vite.config.mts +++ b/examples/html-demo/vite.config.mts @@ -1,6 +1,7 @@ -import { defineConfig } from 'vite'; import { fileURLToPath } from 'url'; +import { defineConfig } from 'vite'; + const __dirname = fileURLToPath(new URL('.', import.meta.url)); export default defineConfig({ diff --git a/examples/react-demo/index.html b/examples/react-demo/index.html index 68783abd..7a6a9840 100644 --- a/examples/react-demo/index.html +++ b/examples/react-demo/index.html @@ -1,13 +1,13 @@ - + VJS React Demo - - + +
- \ No newline at end of file + diff --git a/examples/react-demo/package.json b/examples/react-demo/package.json index 57625108..08278368 100644 --- a/examples/react-demo/package.json +++ b/examples/react-demo/package.json @@ -22,4 +22,4 @@ "typescript": "^5.9.2", "vite": "^7.1.6" } -} \ No newline at end of file +} diff --git a/examples/react-demo/src/globals.css b/examples/react-demo/src/globals.css index 07a0f526..555d3400 100644 --- a/examples/react-demo/src/globals.css +++ b/examples/react-demo/src/globals.css @@ -4,11 +4,13 @@ @source "../../../packages/react"; @theme { - --font-sans: InterVariable, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-sans: + InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; } :root { - font-feature-settings: "cv01", "ss01", "ss03"; + font-feature-settings: 'cv01', 'ss01', 'ss03'; } /* Make hocus (hover + focus-visible) variants */ @@ -16,4 +18,4 @@ @custom-variant group-hocus (&:is(:hover, :focus-visible) &); @custom-variant peer-hocus (&:is(:hover, :focus-visible) ~ &); /* Make reduced-transparency variant */ -@custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce); \ No newline at end of file +@custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce); diff --git a/examples/react-demo/src/main.tsx b/examples/react-demo/src/main.tsx index 12e20951..250236dd 100644 --- a/examples/react-demo/src/main.tsx +++ b/examples/react-demo/src/main.tsx @@ -1,5 +1,6 @@ import ReactDOM from 'react-dom/client'; -import { MediaProvider, Video, MediaSkinDefault } from '@vjs-10/react'; + +import { MediaProvider, MediaSkinDefault, Video } from '@vjs-10/react'; import './globals.css'; @@ -15,10 +16,7 @@ function DemoPlayer() { src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4" /> */} {/* @ts-ignore -- types are incorrect */} -