From f9dcb125422e70767fb2d74ace1cf43de7936e01 Mon Sep 17 00:00:00 2001 From: Rahim Date: Thu, 23 Oct 2025 15:23:21 -0700 Subject: [PATCH] Use `@videojs` npm scope (#121) --- CLAUDE.md | 4 ++-- docs/ARCHITECTURE.md | 2 +- examples/html-demo/package.json | 2 +- examples/html-demo/src/main.ts | 2 +- examples/react-demo/package.json | 2 +- examples/react-demo/src/App.tsx | 10 +++++----- examples/react-demo/src/main.tsx | 4 ++-- .../src/skins/frosted/FrostedSkin.tsx | 4 ++-- .../src/skins/minimal/MinimalSkin.tsx | 4 ++-- packages/core/README.md | 6 +++--- packages/core/package.json | 4 ++-- packages/core/src/components/slider.ts | 2 +- .../src/store/mediators/fullscreenable.ts | 2 +- packages/core/src/store/mediators/temporal.ts | 2 +- packages/html/README.md | 6 +++--- packages/html/package.json | 8 ++++---- .../src/components/media-chrome-button.ts | 2 +- .../components/media-current-time-display.ts | 6 +++--- .../src/components/media-duration-display.ts | 8 ++++---- .../src/components/media-fullscreen-button.ts | 6 +++--- .../html/src/components/media-mute-button.ts | 6 +++--- .../html/src/components/media-play-button.ts | 6 +++--- packages/html/src/components/media-popover.ts | 4 ++-- .../components/media-preview-time-display.ts | 6 +++--- .../html/src/components/media-time-slider.ts | 6 +++--- packages/html/src/components/media-tooltip.ts | 2 +- .../src/components/media-volume-slider.ts | 6 +++--- .../src/icons/media-fullscreen-enter-icon.ts | 2 +- .../src/icons/media-fullscreen-exit-icon.ts | 2 +- packages/html/src/icons/media-pause-icon.ts | 2 +- packages/html/src/icons/media-play-icon.ts | 2 +- .../html/src/icons/media-volume-high-icon.ts | 2 +- .../html/src/icons/media-volume-low-icon.ts | 2 +- .../html/src/icons/media-volume-off-icon.ts | 2 +- packages/html/src/media/media-provider.ts | 4 ++-- packages/icons/README.md | 6 +++--- packages/icons/package.json | 2 +- packages/react/README.md | 6 +++--- packages/react/build/build-styles.ts | 2 +- packages/react/package.json | 8 ++++---- .../src/components/CurrentTimeDisplay.tsx | 4 ++-- .../react/src/components/DurationDisplay.tsx | 4 ++-- .../react/src/components/FullscreenButton.tsx | 4 ++-- .../react/src/components/MediaContainer.tsx | 8 ++++---- packages/react/src/components/MuteButton.tsx | 4 ++-- packages/react/src/components/PlayButton.tsx | 4 ++-- .../src/components/PreviewTimeDisplay.tsx | 4 ++-- packages/react/src/components/TimeSlider.tsx | 6 +++--- packages/react/src/components/Video.tsx | 2 +- .../react/src/components/VolumeSlider.tsx | 6 +++--- packages/react/src/store/hooks.ts | 2 +- packages/react/src/store/media-provider.tsx | 2 +- packages/utils/README.md | 4 ++-- packages/utils/package.json | 2 +- pnpm-lock.yaml | 20 +++++++++---------- website/package.json | 2 +- website/src/components/HomePageDemo/Base.tsx | 4 ++-- website/src/components/home/HeroVideo.tsx | 6 +++--- 58 files changed, 126 insertions(+), 126 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 6fea6256..56d4dec5 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -71,7 +71,7 @@ pnpm dev ```bash # Build specific package -pnpm --filter @vjs-10/core build +pnpm --filter @videojs/core build # Run website independently cd website @@ -93,7 +93,7 @@ The monorepo uses TypeScript project references for efficient compilation: Key TypeScript features: - Strict mode enabled with additional checks (`noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`) -- Path mappings for all `@vjs-10/*` packages point to source directories +- Path mappings for all `@videojs/*` packages point to source directories - Composite builds for incremental compilation ## Package Development diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index 94558c4b..d75a2a82 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -1121,7 +1121,7 @@ export function useMuteButtonState(_props: any) { **Key Characteristics**: -- Uses core `muteButtonStateDefinition` from `@vjs-10/core/store` +- Uses core `muteButtonStateDefinition` from `@videojs/core/store` - No platform-specific assumptions - Could theoretically work with React Native or other platforms diff --git a/examples/html-demo/package.json b/examples/html-demo/package.json index 92c9f439..df85e0c9 100644 --- a/examples/html-demo/package.json +++ b/examples/html-demo/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@vjs-10/html": "workspace:*" + "@videojs/html": "workspace:*" }, "devDependencies": { "typescript": "^5.9.2", diff --git a/examples/html-demo/src/main.ts b/examples/html-demo/src/main.ts index 2072129b..08d4d3f5 100644 --- a/examples/html-demo/src/main.ts +++ b/examples/html-demo/src/main.ts @@ -1,4 +1,4 @@ -import { defineVjsPlayer } from '@vjs-10/html'; +import { defineVjsPlayer } from '@videojs/html'; defineVjsPlayer(); diff --git a/examples/react-demo/package.json b/examples/react-demo/package.json index f36b08bb..42a8ad5f 100644 --- a/examples/react-demo/package.json +++ b/examples/react-demo/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@vjs-10/react": "workspace:*", + "@videojs/react": "workspace:*", "clsx": "^2.1.1", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/examples/react-demo/src/App.tsx b/examples/react-demo/src/App.tsx index dbb8c8ec..4e45254a 100644 --- a/examples/react-demo/src/App.tsx +++ b/examples/react-demo/src/App.tsx @@ -1,18 +1,18 @@ import type { ChangeEventHandler } from 'react'; -import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@vjs-10/react'; -import { FullscreenEnterAltIcon, FullscreenExitAltIcon } from '@vjs-10/react/icons'; +import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@videojs/react'; +import { FullscreenEnterAltIcon, FullscreenExitAltIcon } from '@videojs/react/icons'; import clsx from 'clsx'; // import FrostedSkin from './skins/frosted/FrostedSkin'; // import MinimalSkin from './skins/toasted/MinimalSkin'; // NOTE: Commented out imports are for testing locally/externally defined skins. -// import { MediaProvider, Video } from '@vjs-10/react'; +// import { MediaProvider, Video } from '@videojs/react'; import { useCallback, useMemo, useRef, useState } from 'react'; import { useFullscreen } from './hooks/useFullscreen'; -import '@vjs-10/react/skins/frosted.css'; -import '@vjs-10/react/skins/minimal.css'; +import '@videojs/react/skins/frosted.css'; +import '@videojs/react/skins/minimal.css'; import './globals.css'; const skins = [ diff --git a/examples/react-demo/src/main.tsx b/examples/react-demo/src/main.tsx index e01f8322..b374a3a2 100644 --- a/examples/react-demo/src/main.tsx +++ b/examples/react-demo/src/main.tsx @@ -2,9 +2,9 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; -import '@vjs-10/react/skins/frosted.css'; +import '@videojs/react/skins/frosted.css'; -import '@vjs-10/react/skins/minimal.css'; +import '@videojs/react/skins/minimal.css'; import './globals.css'; diff --git a/examples/react-demo/src/skins/frosted/FrostedSkin.tsx b/examples/react-demo/src/skins/frosted/FrostedSkin.tsx index eaeed78c..7c087350 100644 --- a/examples/react-demo/src/skins/frosted/FrostedSkin.tsx +++ b/examples/react-demo/src/skins/frosted/FrostedSkin.tsx @@ -11,7 +11,7 @@ import { TimeSlider, Tooltip, VolumeSlider, -} from '@vjs-10/react'; +} from '@videojs/react'; import { FullscreenEnterIcon, @@ -21,7 +21,7 @@ import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon, -} from '@vjs-10/react/icons'; +} from '@videojs/react/icons'; import styles from './styles'; diff --git a/examples/react-demo/src/skins/minimal/MinimalSkin.tsx b/examples/react-demo/src/skins/minimal/MinimalSkin.tsx index a70de75c..cda78286 100644 --- a/examples/react-demo/src/skins/minimal/MinimalSkin.tsx +++ b/examples/react-demo/src/skins/minimal/MinimalSkin.tsx @@ -8,7 +8,7 @@ import { MuteButton, PlayButton, TimeSlider, -} from '@vjs-10/react'; +} from '@videojs/react'; import { FullscreenEnterIcon, @@ -18,7 +18,7 @@ import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon, -} from '@vjs-10/react/icons'; +} from '@videojs/react/icons'; import styles from './styles'; diff --git a/packages/core/README.md b/packages/core/README.md index 59229494..8c6bc633 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -1,12 +1,12 @@ -# @vjs-10/core +# @videojs/core -[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/core) +[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/core) > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. ## Overview -`@vjs-10/core` provides runtime-agnostic core components and utilities shared across Video.js +`@videojs/core` provides runtime-agnostic core components and utilities shared across Video.js packages. These are foundational building blocks used by platform-specific implementations (HTML, React, React Native) to create consistent media player experiences. diff --git a/packages/core/package.json b/packages/core/package.json index 67b6b39f..2beb02c5 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,5 +1,5 @@ { - "name": "@vjs-10/core", + "name": "@videojs/core", "type": "module", "version": "0.1.0", "description": "Core components and utilities for Video.js", @@ -40,7 +40,7 @@ "clean": "rm -rf dist" }, "dependencies": { - "@vjs-10/utils": "workspace:*", + "@videojs/utils": "workspace:*", "hls.js": "^1.6.7", "nanostores": "^1.0.1" }, diff --git a/packages/core/src/components/slider.ts b/packages/core/src/components/slider.ts index 00508f52..6253f7ec 100644 --- a/packages/core/src/components/slider.ts +++ b/packages/core/src/components/slider.ts @@ -1,4 +1,4 @@ -import { shallowEqual } from '@vjs-10/utils'; +import { shallowEqual } from '@videojs/utils'; import { map } from 'nanostores'; diff --git a/packages/core/src/store/mediators/fullscreenable.ts b/packages/core/src/store/mediators/fullscreenable.ts index 526c3c27..bf817cdf 100644 --- a/packages/core/src/store/mediators/fullscreenable.ts +++ b/packages/core/src/store/mediators/fullscreenable.ts @@ -1,4 +1,4 @@ -import { containsComposedNode } from '@vjs-10/utils/dom'; +import { containsComposedNode } from '@videojs/utils/dom'; /** @TODO This is implemented for web/browser only! We will need an alternative state mediator model for e.g. React Native. (CJP) */ export const fullscreenable = { diff --git a/packages/core/src/store/mediators/temporal.ts b/packages/core/src/store/mediators/temporal.ts index fd71b2e6..bcbe6ccc 100644 --- a/packages/core/src/store/mediators/temporal.ts +++ b/packages/core/src/store/mediators/temporal.ts @@ -1,4 +1,4 @@ -import { isValidNumber } from '@vjs-10/utils'; +import { isValidNumber } from '@videojs/utils'; export const temporal = { currentTime: { diff --git a/packages/html/README.md b/packages/html/README.md index 9d90795f..465349aa 100644 --- a/packages/html/README.md +++ b/packages/html/README.md @@ -1,12 +1,12 @@ -# @vjs-10/html +# @videojs/html -[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/html) +[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/html) > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. ## Overview -`@vjs-10/html` is a comprehensive library for building media players with vanilla JavaScript and Web Components. It provides a complete set of UI components, state management, and utilities for creating feature-rich, accessible video and audio players. +`@videojs/html` is a comprehensive library for building media players with vanilla JavaScript and Web Components. It provides a complete set of UI components, state management, and utilities for creating feature-rich, accessible video and audio players. ## License diff --git a/packages/html/package.json b/packages/html/package.json index bb523b9d..faa4a695 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -1,5 +1,5 @@ { - "name": "@vjs-10/html", + "name": "@videojs/html", "type": "module", "version": "0.1.0", "description": "HTML library for building media players", @@ -45,9 +45,9 @@ "dependencies": { "@floating-ui/dom": "^1.6.13", "@open-wc/context-protocol": "^0.0.9", - "@vjs-10/core": "workspace:*", - "@vjs-10/icons": "workspace:*", - "@vjs-10/utils": "workspace:*" + "@videojs/core": "workspace:*", + "@videojs/icons": "workspace:*", + "@videojs/utils": "workspace:*" }, "devDependencies": { "tsdown": "^0.15.9", diff --git a/packages/html/src/components/media-chrome-button.ts b/packages/html/src/components/media-chrome-button.ts index 917029bc..b1fdeba7 100644 --- a/packages/html/src/components/media-chrome-button.ts +++ b/packages/html/src/components/media-chrome-button.ts @@ -1,4 +1,4 @@ -import { namedNodeMapToObject } from '@vjs-10/utils/dom'; +import { namedNodeMapToObject } from '@videojs/utils/dom'; export function getTemplateHTML( this: typeof MediaChromeButton, diff --git a/packages/html/src/components/media-current-time-display.ts b/packages/html/src/components/media-current-time-display.ts index 45b2e7cf..2c69dd77 100644 --- a/packages/html/src/components/media-current-time-display.ts +++ b/packages/html/src/components/media-current-time-display.ts @@ -1,9 +1,9 @@ -import type { CurrentTimeDisplayState } from '@vjs-10/core/store'; +import type { CurrentTimeDisplayState } from '@videojs/core/store'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { currentTimeDisplayStateDefinition } from '@vjs-10/core/store'; +import { currentTimeDisplayStateDefinition } from '@videojs/core/store'; -import { formatDisplayTime } from '@vjs-10/utils'; +import { formatDisplayTime } from '@videojs/utils'; import { toConnectedHTMLComponent } from '../utils/component-factory'; export class CurrentTimeDisplayBase extends HTMLElement { diff --git a/packages/html/src/components/media-duration-display.ts b/packages/html/src/components/media-duration-display.ts index 2ce42b5f..e1394117 100644 --- a/packages/html/src/components/media-duration-display.ts +++ b/packages/html/src/components/media-duration-display.ts @@ -1,10 +1,10 @@ -import type { DurationDisplayState } from '@vjs-10/core/store'; +import type { DurationDisplayState } from '@videojs/core/store'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { durationDisplayStateDefinition } from '@vjs-10/core/store'; +import { durationDisplayStateDefinition } from '@videojs/core/store'; -import { formatDisplayTime } from '@vjs-10/utils'; -import { namedNodeMapToObject } from '@vjs-10/utils/dom'; +import { formatDisplayTime } from '@videojs/utils'; +import { namedNodeMapToObject } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; export function getTemplateHTML( diff --git a/packages/html/src/components/media-fullscreen-button.ts b/packages/html/src/components/media-fullscreen-button.ts index c3339190..ed40f538 100644 --- a/packages/html/src/components/media-fullscreen-button.ts +++ b/packages/html/src/components/media-fullscreen-button.ts @@ -1,9 +1,9 @@ -import type { FullscreenButtonState } from '@vjs-10/core/store'; +import type { FullscreenButtonState } from '@videojs/core/store'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { fullscreenButtonStateDefinition } from '@vjs-10/core/store'; +import { fullscreenButtonStateDefinition } from '@videojs/core/store'; -import { setAttributes } from '@vjs-10/utils/dom'; +import { setAttributes } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; import { MediaChromeButton } from './media-chrome-button'; diff --git a/packages/html/src/components/media-mute-button.ts b/packages/html/src/components/media-mute-button.ts index d9ffa705..081c1417 100644 --- a/packages/html/src/components/media-mute-button.ts +++ b/packages/html/src/components/media-mute-button.ts @@ -1,9 +1,9 @@ -import type { MuteButtonState } from '@vjs-10/core/store'; +import type { MuteButtonState } from '@videojs/core/store'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { muteButtonStateDefinition } from '@vjs-10/core/store'; +import { muteButtonStateDefinition } from '@videojs/core/store'; -import { setAttributes } from '@vjs-10/utils/dom'; +import { setAttributes } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; import { MediaChromeButton } from './media-chrome-button'; diff --git a/packages/html/src/components/media-play-button.ts b/packages/html/src/components/media-play-button.ts index fe3a860e..11b13dea 100644 --- a/packages/html/src/components/media-play-button.ts +++ b/packages/html/src/components/media-play-button.ts @@ -1,9 +1,9 @@ -import type { PlayButtonState } from '@vjs-10/core/store'; +import type { PlayButtonState } from '@videojs/core/store'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { playButtonStateDefinition } from '@vjs-10/core/store'; +import { playButtonStateDefinition } from '@videojs/core/store'; -import { setAttributes } from '@vjs-10/utils/dom'; +import { setAttributes } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; import { MediaChromeButton } from './media-chrome-button'; diff --git a/packages/html/src/components/media-popover.ts b/packages/html/src/components/media-popover.ts index 5c5ab894..56b2c355 100644 --- a/packages/html/src/components/media-popover.ts +++ b/packages/html/src/components/media-popover.ts @@ -1,8 +1,8 @@ import type { Placement } from '@floating-ui/dom'; import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'; -import { uniqueId } from '@vjs-10/utils'; +import { uniqueId } from '@videojs/utils'; -import { getDocument, getNextTabbable, getPreviousTabbable, isOutsideEvent } from '@vjs-10/utils/dom'; +import { getDocument, getNextTabbable, getPreviousTabbable, isOutsideEvent } from '@videojs/utils/dom'; export class MediaPopoverRoot extends HTMLElement { #open = false; diff --git a/packages/html/src/components/media-preview-time-display.ts b/packages/html/src/components/media-preview-time-display.ts index 0e008314..d4be5737 100644 --- a/packages/html/src/components/media-preview-time-display.ts +++ b/packages/html/src/components/media-preview-time-display.ts @@ -1,9 +1,9 @@ -import type { PreviewTimeDisplayState } from '@vjs-10/core/store'; +import type { PreviewTimeDisplayState } from '@videojs/core/store'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { previewTimeDisplayStateDefinition } from '@vjs-10/core/store'; +import { previewTimeDisplayStateDefinition } from '@videojs/core/store'; -import { formatDisplayTime } from '@vjs-10/utils'; +import { formatDisplayTime } from '@videojs/utils'; import { toConnectedHTMLComponent } from '../utils/component-factory'; export class PreviewTimeDisplayBase extends HTMLElement { diff --git a/packages/html/src/components/media-time-slider.ts b/packages/html/src/components/media-time-slider.ts index e271d5a7..2ccdce29 100644 --- a/packages/html/src/components/media-time-slider.ts +++ b/packages/html/src/components/media-time-slider.ts @@ -1,9 +1,9 @@ import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { TimeSlider as CoreTimeSlider } from '@vjs-10/core'; -import { timeSliderStateDefinition } from '@vjs-10/core/store'; +import { TimeSlider as CoreTimeSlider } from '@videojs/core'; +import { timeSliderStateDefinition } from '@videojs/core/store'; -import { setAttributes } from '@vjs-10/utils/dom'; +import { setAttributes } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; interface TimeSliderRootState { diff --git a/packages/html/src/components/media-tooltip.ts b/packages/html/src/components/media-tooltip.ts index cd4412c2..c37fef64 100644 --- a/packages/html/src/components/media-tooltip.ts +++ b/packages/html/src/components/media-tooltip.ts @@ -2,7 +2,7 @@ import type { Placement } from '@floating-ui/dom'; import type { MediaContainer } from '@/media/media-container'; import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'; -import { uniqueId } from '@vjs-10/utils'; +import { uniqueId } from '@videojs/utils'; export class MediaTooltipRoot extends HTMLElement { #open = false; diff --git a/packages/html/src/components/media-volume-slider.ts b/packages/html/src/components/media-volume-slider.ts index a0e368a5..85ed6251 100644 --- a/packages/html/src/components/media-volume-slider.ts +++ b/packages/html/src/components/media-volume-slider.ts @@ -1,9 +1,9 @@ import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { VolumeSlider as CoreVolumeSlider } from '@vjs-10/core'; -import { volumeSliderStateDefinition } from '@vjs-10/core/store'; +import { VolumeSlider as CoreVolumeSlider } from '@videojs/core'; +import { volumeSliderStateDefinition } from '@videojs/core/store'; -import { setAttributes } from '@vjs-10/utils/dom'; +import { setAttributes } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; /** diff --git a/packages/html/src/icons/media-fullscreen-enter-icon.ts b/packages/html/src/icons/media-fullscreen-enter-icon.ts index a1862157..2df15f5b 100644 --- a/packages/html/src/icons/media-fullscreen-enter-icon.ts +++ b/packages/html/src/icons/media-fullscreen-enter-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@vjs-10/icons'; +import { SVG_ICONS } from '@videojs/icons'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-fullscreen-exit-icon.ts b/packages/html/src/icons/media-fullscreen-exit-icon.ts index 572a09a5..da0cd6b1 100644 --- a/packages/html/src/icons/media-fullscreen-exit-icon.ts +++ b/packages/html/src/icons/media-fullscreen-exit-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@vjs-10/icons'; +import { SVG_ICONS } from '@videojs/icons'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-pause-icon.ts b/packages/html/src/icons/media-pause-icon.ts index b0a28556..8013a2f8 100644 --- a/packages/html/src/icons/media-pause-icon.ts +++ b/packages/html/src/icons/media-pause-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@vjs-10/icons'; +import { SVG_ICONS } from '@videojs/icons'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-play-icon.ts b/packages/html/src/icons/media-play-icon.ts index e231d5b4..d83f4fc9 100644 --- a/packages/html/src/icons/media-play-icon.ts +++ b/packages/html/src/icons/media-play-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@vjs-10/icons'; +import { SVG_ICONS } from '@videojs/icons'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-volume-high-icon.ts b/packages/html/src/icons/media-volume-high-icon.ts index 43a11036..5c20f350 100644 --- a/packages/html/src/icons/media-volume-high-icon.ts +++ b/packages/html/src/icons/media-volume-high-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@vjs-10/icons'; +import { SVG_ICONS } from '@videojs/icons'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-volume-low-icon.ts b/packages/html/src/icons/media-volume-low-icon.ts index 3be25cb3..2e60afd3 100644 --- a/packages/html/src/icons/media-volume-low-icon.ts +++ b/packages/html/src/icons/media-volume-low-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@vjs-10/icons'; +import { SVG_ICONS } from '@videojs/icons'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-volume-off-icon.ts b/packages/html/src/icons/media-volume-off-icon.ts index 2e2bf5b3..0004c32e 100644 --- a/packages/html/src/icons/media-volume-off-icon.ts +++ b/packages/html/src/icons/media-volume-off-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@vjs-10/icons'; +import { SVG_ICONS } from '@videojs/icons'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/media/media-provider.ts b/packages/html/src/media/media-provider.ts index adb000f4..04413875 100644 --- a/packages/html/src/media/media-provider.ts +++ b/packages/html/src/media/media-provider.ts @@ -1,8 +1,8 @@ import type { Constructor, CustomElement } from '@open-wc/context-protocol'; -import type { MediaStore } from '@vjs-10/core/store'; +import type { MediaStore } from '@videojs/core/store'; import { ProviderMixin } from '@open-wc/context-protocol'; -import { createMediaStore } from '@vjs-10/core/store'; +import { createMediaStore } from '@videojs/core/store'; const ProviderHTMLElement: Constructor = ProviderMixin(HTMLElement); diff --git a/packages/icons/README.md b/packages/icons/README.md index f341cb15..b761799b 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -1,12 +1,12 @@ -# @vjs-10/icons +# @videojs/icons -[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/icons) +[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/icons) > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. ## Overview -`@vjs-10/icons` is a curated collection of SVG icons designed specifically for media player +`@videojs/icons` is a curated collection of SVG icons designed specifically for media player interfaces. This package serves as the single source of truth for all Video.js icons, providing raw SVG assets that platform-specific packages transform into their respective component formats. diff --git a/packages/icons/package.json b/packages/icons/package.json index 37fccfee..92aa75f4 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,5 +1,5 @@ { - "name": "@vjs-10/icons", + "name": "@videojs/icons", "type": "module", "version": "0.1.0", "description": "SVG icon library for Video.js", diff --git a/packages/react/README.md b/packages/react/README.md index 8fbf294a..0f7fb3bb 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -1,12 +1,12 @@ -# @vjs-10/react +# @videojs/react -[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/react) +[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/react) > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. ## Overview -`@vjs-10/react` is a comprehensive library for building media players in React applications. It +`@videojs/react` is a comprehensive library for building media players in React applications. It provides a complete set of components, hooks, and utilities for creating feature-rich, accessible video and audio players with React. diff --git a/packages/react/build/build-styles.ts b/packages/react/build/build-styles.ts index f3a4bb0d..718d58a4 100644 --- a/packages/react/build/build-styles.ts +++ b/packages/react/build/build-styles.ts @@ -26,7 +26,7 @@ * * Why concatenate? * - Users only need to import one CSS file per skin - * - Simpler API: import '@vjs-10/react/skins/frosted.css' + * - Simpler API: import '@videojs/react/skins/frosted.css' */ import { execSync } from 'node:child_process'; diff --git a/packages/react/package.json b/packages/react/package.json index 5efce10b..ee730d36 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,5 +1,5 @@ { - "name": "@vjs-10/react", + "name": "@videojs/react", "type": "module", "version": "0.1.0", "description": "React library for building media players", @@ -55,9 +55,9 @@ }, "dependencies": { "@floating-ui/react": "^0.27.16", - "@vjs-10/core": "workspace:*", - "@vjs-10/icons": "workspace:*", - "@vjs-10/utils": "workspace:*" + "@videojs/core": "workspace:*", + "@videojs/icons": "workspace:*", + "@videojs/utils": "workspace:*" }, "devDependencies": { "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0", diff --git a/packages/react/src/components/CurrentTimeDisplay.tsx b/packages/react/src/components/CurrentTimeDisplay.tsx index 19f8a9eb..6af730b0 100644 --- a/packages/react/src/components/CurrentTimeDisplay.tsx +++ b/packages/react/src/components/CurrentTimeDisplay.tsx @@ -1,8 +1,8 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { currentTimeDisplayStateDefinition } from '@vjs-10/core/store'; -import { formatDisplayTime, shallowEqual } from '@vjs-10/utils'; +import { currentTimeDisplayStateDefinition } from '@videojs/core/store'; +import { formatDisplayTime, shallowEqual } from '@videojs/utils'; import { useMediaSelector } from '@/store'; import { toConnectedComponent } from '../utils/component-factory'; diff --git a/packages/react/src/components/DurationDisplay.tsx b/packages/react/src/components/DurationDisplay.tsx index e09590f0..f14bf04a 100644 --- a/packages/react/src/components/DurationDisplay.tsx +++ b/packages/react/src/components/DurationDisplay.tsx @@ -1,8 +1,8 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { durationDisplayStateDefinition } from '@vjs-10/core/store'; -import { formatDisplayTime, shallowEqual } from '@vjs-10/utils'; +import { durationDisplayStateDefinition } from '@videojs/core/store'; +import { formatDisplayTime, shallowEqual } from '@videojs/utils'; import { useMediaSelector } from '@/store'; import { toConnectedComponent } from '../utils/component-factory'; diff --git a/packages/react/src/components/FullscreenButton.tsx b/packages/react/src/components/FullscreenButton.tsx index 319ad278..0e46ae4f 100644 --- a/packages/react/src/components/FullscreenButton.tsx +++ b/packages/react/src/components/FullscreenButton.tsx @@ -1,9 +1,9 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { fullscreenButtonStateDefinition } from '@vjs-10/core/store'; +import { fullscreenButtonStateDefinition } from '@videojs/core/store'; -import { shallowEqual } from '@vjs-10/utils'; +import { shallowEqual } from '@videojs/utils'; import { useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; diff --git a/packages/react/src/components/MediaContainer.tsx b/packages/react/src/components/MediaContainer.tsx index 705f30d6..d916f796 100644 --- a/packages/react/src/components/MediaContainer.tsx +++ b/packages/react/src/components/MediaContainer.tsx @@ -1,8 +1,8 @@ import type { FC, HTMLProps, PropsWithChildren, RefCallback } from 'react'; -import { playButtonStateDefinition } from '@vjs-10/core/store'; +import { playButtonStateDefinition } from '@videojs/core/store'; -import { shallowEqual } from '@vjs-10/utils'; +import { shallowEqual } from '@videojs/utils'; import { forwardRef, useCallback, useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; import { useComposedRefs } from '../utils/use-composed-refs'; @@ -15,7 +15,7 @@ import { useComposedRefs } from '../utils/use-composed-refs'; * in the media store, enabling fullscreen functionality. * * @example - * import { useMediaContainerRef } from '@vjs-10/react'; + * import { useMediaContainerRef } from '@videojs/react'; * * const PlayerContainer = ({ children }) => { * const containerRef = useMediaContainerRef(); @@ -45,7 +45,7 @@ export function useMediaContainerRef(): RefCallback { * This provides a simple wrapper component for fullscreen functionality. * * @example - * import { MediaContainer } from '@vjs-10/react'; + * import { MediaContainer } from '@videojs/react'; * * const MyPlayer = () => ( * diff --git a/packages/react/src/components/MuteButton.tsx b/packages/react/src/components/MuteButton.tsx index 963e46db..b6d59f82 100644 --- a/packages/react/src/components/MuteButton.tsx +++ b/packages/react/src/components/MuteButton.tsx @@ -1,9 +1,9 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { muteButtonStateDefinition } from '@vjs-10/core/store'; +import { muteButtonStateDefinition } from '@videojs/core/store'; -import { shallowEqual } from '@vjs-10/utils'; +import { shallowEqual } from '@videojs/utils'; import { useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; diff --git a/packages/react/src/components/PlayButton.tsx b/packages/react/src/components/PlayButton.tsx index 02843990..2516dc60 100644 --- a/packages/react/src/components/PlayButton.tsx +++ b/packages/react/src/components/PlayButton.tsx @@ -1,9 +1,9 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { playButtonStateDefinition } from '@vjs-10/core/store'; +import { playButtonStateDefinition } from '@videojs/core/store'; -import { shallowEqual } from '@vjs-10/utils'; +import { shallowEqual } from '@videojs/utils'; import { useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; diff --git a/packages/react/src/components/PreviewTimeDisplay.tsx b/packages/react/src/components/PreviewTimeDisplay.tsx index 7d60dbcf..a1d957c4 100644 --- a/packages/react/src/components/PreviewTimeDisplay.tsx +++ b/packages/react/src/components/PreviewTimeDisplay.tsx @@ -1,8 +1,8 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { previewTimeDisplayStateDefinition } from '@vjs-10/core/store'; -import { formatDisplayTime, shallowEqual } from '@vjs-10/utils'; +import { previewTimeDisplayStateDefinition } from '@videojs/core/store'; +import { formatDisplayTime, shallowEqual } from '@videojs/utils'; import { useMediaSelector } from '@/store'; import { toConnectedComponent } from '../utils/component-factory'; diff --git a/packages/react/src/components/TimeSlider.tsx b/packages/react/src/components/TimeSlider.tsx index df65a1ab..cd99b330 100644 --- a/packages/react/src/components/TimeSlider.tsx +++ b/packages/react/src/components/TimeSlider.tsx @@ -1,9 +1,9 @@ import type { ConnectedComponent } from '../utils/component-factory'; -import { TimeSlider as CoreTimeSlider } from '@vjs-10/core'; +import { TimeSlider as CoreTimeSlider } from '@videojs/core'; -import { timeSliderStateDefinition } from '@vjs-10/core/store'; -import { shallowEqual } from '@vjs-10/utils'; +import { timeSliderStateDefinition } from '@videojs/core/store'; +import { shallowEqual } from '@videojs/utils'; import { useCallback, useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; diff --git a/packages/react/src/components/Video.tsx b/packages/react/src/components/Video.tsx index 045f9328..f4bedd20 100644 --- a/packages/react/src/components/Video.tsx +++ b/packages/react/src/components/Video.tsx @@ -10,7 +10,7 @@ import type { VideoHTMLAttributes, } from 'react'; -import { createMediaPlaybackController } from '@vjs-10/core/media'; +import { createMediaPlaybackController } from '@videojs/core/media'; import { forwardRef, useImperativeHandle, useRef } from 'react'; import { useMediaRef } from '@/store'; diff --git a/packages/react/src/components/VolumeSlider.tsx b/packages/react/src/components/VolumeSlider.tsx index c963d4cf..9e61a159 100644 --- a/packages/react/src/components/VolumeSlider.tsx +++ b/packages/react/src/components/VolumeSlider.tsx @@ -1,9 +1,9 @@ import type { ConnectedComponent } from '../utils/component-factory'; -import { VolumeSlider as CoreVolumeSlider } from '@vjs-10/core'; +import { VolumeSlider as CoreVolumeSlider } from '@videojs/core'; -import { volumeSliderStateDefinition } from '@vjs-10/core/store'; -import { shallowEqual } from '@vjs-10/utils'; +import { volumeSliderStateDefinition } from '@videojs/core/store'; +import { shallowEqual } from '@videojs/utils'; import { useCallback, useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; diff --git a/packages/react/src/store/hooks.ts b/packages/react/src/store/hooks.ts index 0aafab79..f418978d 100644 --- a/packages/react/src/store/hooks.ts +++ b/packages/react/src/store/hooks.ts @@ -1,5 +1,5 @@ /** @TODO !!! Revisit for SSR (CJP) */ -import type { MediaStore } from '@vjs-10/core/store'; +import type { MediaStore } from '@videojs/core/store'; import { useContext } from 'react'; diff --git a/packages/react/src/store/media-provider.tsx b/packages/react/src/store/media-provider.tsx index 591d1625..3e834558 100644 --- a/packages/react/src/store/media-provider.tsx +++ b/packages/react/src/store/media-provider.tsx @@ -3,7 +3,7 @@ /** @TODO !!! Revisit for SSR (CJP) */ import type { ReactNode } from 'react'; -import { createMediaStore } from '@vjs-10/core/store'; +import { createMediaStore } from '@videojs/core/store'; import { useMemo } from 'react'; import { MediaContext } from './context'; diff --git a/packages/utils/README.md b/packages/utils/README.md index 3782b60e..ec5521e0 100644 --- a/packages/utils/README.md +++ b/packages/utils/README.md @@ -1,6 +1,6 @@ -# @vjs-10/utils +# @videojs/utils -[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/utils) +[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/utils) > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. diff --git a/packages/utils/package.json b/packages/utils/package.json index ab11d789..c5a85540 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,5 +1,5 @@ { - "name": "@vjs-10/utils", + "name": "@videojs/utils", "type": "module", "version": "0.1.0", "description": "Utility functions and helpers.", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 90364d32..cd922432 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,7 +74,7 @@ importers: examples/html-demo: dependencies: - '@vjs-10/html': + '@videojs/html': specifier: workspace:* version: link:../../packages/html devDependencies: @@ -87,7 +87,7 @@ importers: examples/react-demo: dependencies: - '@vjs-10/react': + '@videojs/react': specifier: workspace:* version: link:../../packages/react clsx: @@ -127,7 +127,7 @@ importers: packages/core: dependencies: - '@vjs-10/utils': + '@videojs/utils': specifier: workspace:* version: link:../utils hls.js: @@ -152,13 +152,13 @@ importers: '@open-wc/context-protocol': specifier: ^0.0.9 version: 0.0.9 - '@vjs-10/core': + '@videojs/core': specifier: workspace:* version: link:../core - '@vjs-10/icons': + '@videojs/icons': specifier: workspace:* version: link:../icons - '@vjs-10/utils': + '@videojs/utils': specifier: workspace:* version: link:../utils devDependencies: @@ -183,13 +183,13 @@ importers: '@floating-ui/react': specifier: ^0.27.16 version: 0.27.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@vjs-10/core': + '@videojs/core': specifier: workspace:* version: link:../core - '@vjs-10/icons': + '@videojs/icons': specifier: workspace:* version: link:../icons - '@vjs-10/utils': + '@videojs/utils': specifier: workspace:* version: link:../utils devDependencies: @@ -266,7 +266,7 @@ importers: '@tailwindcss/vite': specifier: ^4.1.14 version: 4.1.14(vite@7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.1)(yaml@2.8.1)) - '@vjs-10/react': + '@videojs/react': specifier: workspace:* version: link:../packages/react astro: diff --git a/website/package.json b/website/package.json index aa145488..9bb816b9 100644 --- a/website/package.json +++ b/website/package.json @@ -21,7 +21,7 @@ "@base-ui-components/react": "1.0.0-beta.4", "@nanostores/react": "^1.0.0", "@tailwindcss/vite": "^4.1.14", - "@vjs-10/react": "workspace:*", + "@videojs/react": "workspace:*", "astro": "^5.14.4", "clsx": "^2.1.1", "github-slugger": "^2.0.0", diff --git a/website/src/components/HomePageDemo/Base.tsx b/website/src/components/HomePageDemo/Base.tsx index 8da65787..f75f1192 100644 --- a/website/src/components/HomePageDemo/Base.tsx +++ b/website/src/components/HomePageDemo/Base.tsx @@ -21,8 +21,8 @@ function generateReactCode(skin: Skin, media: Media): string { const skinImport = skin === 'frosted' ? 'frosted' : 'minimal'; const videoExtension = media === 'hls-video' ? 'm3u8' : 'mp4'; - return `import { VideoProvider, ${mediaComponent} } from '@vjs-10/react'; -import { ${skinComponent} } from '@vjs-10/react/skins/${skinImport}'; + return `import { VideoProvider, ${mediaComponent} } from '@videojs/react'; +import { ${skinComponent} } from '@videojs/react/skins/${skinImport}'; export const VideoPlayer = () => { return ( diff --git a/website/src/components/home/HeroVideo.tsx b/website/src/components/home/HeroVideo.tsx index e988a387..f08b4a62 100644 --- a/website/src/components/home/HeroVideo.tsx +++ b/website/src/components/home/HeroVideo.tsx @@ -1,9 +1,9 @@ import { useStore } from '@nanostores/react'; -import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@vjs-10/react'; +import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@videojs/react'; import { skin } from '@/stores/homePageDemos'; import { PLAYBACK_ID } from './config'; -import '@vjs-10/react/skins/frosted.css'; -import '@vjs-10/react/skins/minimal.css'; +import '@videojs/react/skins/frosted.css'; +import '@videojs/react/skins/minimal.css'; export default function HeroVideo({ className, poster }: { className?: string; poster: string }) { // Subscribe to skin store for future skin switching functionality