diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml index 940d9e20..5dee1da3 100644 --- a/.github/workflows/cd.yml +++ b/.github/workflows/cd.yml @@ -65,6 +65,6 @@ jobs: - name: Publish if: ${{ steps.release.outputs.releases_created == 'true' }} - run: pnpm -r publish --filter "./packages/**" publish --access public --provenance --tag next --no-git-checks + run: pnpm -r publish --filter "./packages/*" publish --access public --provenance --tag next --no-git-checks env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/README.md b/README.md index 1b905d65..0875a02b 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Modern, modular, and composable media player framework for Web and React. -🚧 Technical Preview - not recommended for production. 🚧 +🚧 Alpha - not recommended for production. 🚧 Thanks for checking out the project! It's in its early stages and currently a mix of prototyping and early structure pointing in the direction we want to go with Video.js v10 (so be kind 🙏). @@ -17,11 +17,10 @@ and early structure pointing in the direction we want to go with Video.js v10 (s ## Timeline -🚧 Detailed roadmap coming soon. 🚧 - -- **Technical Preview (current):** Initial showcase for Demuxed. -- **Beta (Feb 2026):** Core goals accomplished, stable core, adoption in real projects. -- **GA (Mid 2026):** Stable APIs. Feature parity w/ Media Chrome, Vidstack, and Plyr. +- **Technical Preview (Complete):** Initial showcase for Demuxed. +- **Alpha (Current - Jan 2026):** [See milestone](https://github.com/videojs/v10/milestone/3) +- **Beta (Feb 2026):** [See milestone](https://github.com/videojs/v10/milestone/1) +- **GA (Mid 2026):** [See milestone](https://github.com/videojs/v10/milestone/2) - **Video.js (End of 2026):** Video.js core/contrib parity and supported plugins migrated. ## Documentation diff --git a/examples/html/package.json b/examples/html/package.json index d9eabf8d..ddf4951c 100644 --- a/examples/html/package.json +++ b/examples/html/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@videojs/html": "workspace:*" + "@videojs/html-preview": "workspace:*" }, "devDependencies": { "typescript": "^5.9.3", diff --git a/examples/html/src/frosted-eject.ts b/examples/html/src/frosted-eject.ts index 6c4f1ad6..68a4b051 100644 --- a/examples/html/src/frosted-eject.ts +++ b/examples/html/src/frosted-eject.ts @@ -1,15 +1,15 @@ import './frosted-eject.css'; -import '@videojs/html/icons'; +import '@videojs/html-preview/icons'; // be sure to import video-provider first for proper context initialization -import '@videojs/html/define/video-provider'; -import '@videojs/html/define/media-container'; -import '@videojs/html/define/media-play-button'; -import '@videojs/html/define/media-mute-button'; -import '@videojs/html/define/media-volume-slider'; -import '@videojs/html/define/media-time-slider'; -import '@videojs/html/define/media-fullscreen-button'; -import '@videojs/html/define/media-duration-display'; -import '@videojs/html/define/media-current-time-display'; -import '@videojs/html/define/media-preview-time-display'; -import '@videojs/html/define/media-popover'; -import '@videojs/html/define/media-tooltip'; +import '@videojs/html-preview/define/video-provider'; +import '@videojs/html-preview/define/media-container'; +import '@videojs/html-preview/define/media-play-button'; +import '@videojs/html-preview/define/media-mute-button'; +import '@videojs/html-preview/define/media-volume-slider'; +import '@videojs/html-preview/define/media-time-slider'; +import '@videojs/html-preview/define/media-fullscreen-button'; +import '@videojs/html-preview/define/media-duration-display'; +import '@videojs/html-preview/define/media-current-time-display'; +import '@videojs/html-preview/define/media-preview-time-display'; +import '@videojs/html-preview/define/media-popover'; +import '@videojs/html-preview/define/media-tooltip'; diff --git a/examples/html/src/frosted.ts b/examples/html/src/frosted.ts index 6bac4d85..99913f6f 100644 --- a/examples/html/src/frosted.ts +++ b/examples/html/src/frosted.ts @@ -1,4 +1,4 @@ -import '@videojs/html/skins/frosted'; +import '@videojs/html-preview/skins/frosted'; document.getElementById('app')!.innerHTML = /* html */ ` diff --git a/examples/html/src/minimal-eject.ts b/examples/html/src/minimal-eject.ts index 1dbbdc1c..78eaca68 100644 --- a/examples/html/src/minimal-eject.ts +++ b/examples/html/src/minimal-eject.ts @@ -1,15 +1,15 @@ import './minimal-eject.css'; -import '@videojs/html/icons'; +import '@videojs/html-preview/icons'; // be sure to import video-provider first for proper context initialization -import '@videojs/html/define/video-provider'; -import '@videojs/html/define/media-container'; -import '@videojs/html/define/media-play-button'; -import '@videojs/html/define/media-mute-button'; -import '@videojs/html/define/media-volume-slider'; -import '@videojs/html/define/media-time-slider'; -import '@videojs/html/define/media-fullscreen-button'; -import '@videojs/html/define/media-duration-display'; -import '@videojs/html/define/media-current-time-display'; -import '@videojs/html/define/media-preview-time-display'; -import '@videojs/html/define/media-popover'; -import '@videojs/html/define/media-tooltip'; +import '@videojs/html-preview/define/video-provider'; +import '@videojs/html-preview/define/media-container'; +import '@videojs/html-preview/define/media-play-button'; +import '@videojs/html-preview/define/media-mute-button'; +import '@videojs/html-preview/define/media-volume-slider'; +import '@videojs/html-preview/define/media-time-slider'; +import '@videojs/html-preview/define/media-fullscreen-button'; +import '@videojs/html-preview/define/media-duration-display'; +import '@videojs/html-preview/define/media-current-time-display'; +import '@videojs/html-preview/define/media-preview-time-display'; +import '@videojs/html-preview/define/media-popover'; +import '@videojs/html-preview/define/media-tooltip'; diff --git a/examples/html/src/minimal.ts b/examples/html/src/minimal.ts index 230ed9aa..155cf598 100644 --- a/examples/html/src/minimal.ts +++ b/examples/html/src/minimal.ts @@ -1,4 +1,4 @@ -import '@videojs/html/skins/minimal'; +import '@videojs/html-preview/skins/minimal'; document.getElementById('app')!.innerHTML = /* html */ ` diff --git a/examples/next/app/page.tsx b/examples/next/app/page.tsx index 99305c0c..6bbd2732 100644 --- a/examples/next/app/page.tsx +++ b/examples/next/app/page.tsx @@ -1,6 +1,6 @@ -import { FrostedSkin, HlsVideo, MinimalSkin, VideoProvider } from '@videojs/react'; -import '@videojs/react/skins/frosted.css'; -import '@videojs/react/skins/minimal.css'; +import { FrostedSkin, HlsVideo, MinimalSkin, VideoProvider } from '@videojs/react-preview'; +import '@videojs/react-preview/skins/frosted.css'; +import '@videojs/react-preview/skins/minimal.css'; export default function Home() { return ( diff --git a/examples/next/package.json b/examples/next/package.json index a9937287..6a4fbf8b 100644 --- a/examples/next/package.json +++ b/examples/next/package.json @@ -18,7 +18,7 @@ "@types/node": "^20.19.25", "@types/react": "^19.2.7", "@types/react-dom": "^19.2.3", - "@videojs/react": "workspace:*", + "@videojs/react-preview": "workspace:*", "eslint": "^9.39.1", "eslint-config-next": "16.0.8", "tailwindcss": "^4.1.17", diff --git a/examples/react/package.json b/examples/react/package.json index 40f745d4..904f1f37 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -12,8 +12,8 @@ "dependencies": { "@base-ui-components/react": "^1.0.0-rc.0", "@heroicons/react": "^2.2.0", - "@videojs/react": "workspace:*", - "@videojs/utils": "workspace:*", + "@videojs/react-preview": "workspace:*", + "@videojs/utils-preview": "workspace:*", "clsx": "^2.1.1", "motion": "^12.23.25", "react": "^19.2.1", diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index f436e71c..424fa54b 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren } from 'react'; -import { VideoProvider } from '@videojs/react'; +import { VideoProvider } from '@videojs/react-preview'; import clsx from 'clsx'; import { useEffect, useMemo, useRef } from 'react'; import { Link as LinkPrimitive, Redirect, Route, Switch, useLocation } from 'wouter'; diff --git a/examples/react/src/components/VideoElement.tsx b/examples/react/src/components/VideoElement.tsx index 55fc338a..b26623a4 100644 --- a/examples/react/src/components/VideoElement.tsx +++ b/examples/react/src/components/VideoElement.tsx @@ -1,4 +1,4 @@ -import { HlsVideo } from '@videojs/react'; +import { HlsVideo } from '@videojs/react-preview'; export function VideoElement(): JSX.Element { return ( diff --git a/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx b/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx index 865bb779..54ea9add 100644 --- a/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx +++ b/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx @@ -25,8 +25,8 @@ import { usePlayButtonState, useTimeSliderRootState, useVolumeSliderRootState, -} from '@videojs/react'; -import { formatDisplayTime } from '@videojs/utils'; +} from '@videojs/react-preview'; +import { formatDisplayTime } from '@videojs/utils-preview'; import clsx from 'clsx'; import { useCallback, useState } from 'react'; diff --git a/examples/react/src/skins/custom/native/CustomNativeSkin.tsx b/examples/react/src/skins/custom/native/CustomNativeSkin.tsx index fd7ff2b9..95deea1f 100644 --- a/examples/react/src/skins/custom/native/CustomNativeSkin.tsx +++ b/examples/react/src/skins/custom/native/CustomNativeSkin.tsx @@ -9,7 +9,7 @@ import { PlayButton, TimeSlider, VolumeSlider, -} from '@videojs/react'; +} from '@videojs/react-preview'; import { FullscreenEnterIcon, FullscreenExitIcon, @@ -18,7 +18,7 @@ import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon, -} from '@videojs/react/icons'; +} from '@videojs/react-preview/icons'; import styles from './styles'; type SkinProps = PropsWithChildren<{ diff --git a/examples/react/src/skins/ejected/frosted/FrostedSkin.tsx b/examples/react/src/skins/ejected/frosted/FrostedSkin.tsx index 4653d107..f32bb894 100644 --- a/examples/react/src/skins/ejected/frosted/FrostedSkin.tsx +++ b/examples/react/src/skins/ejected/frosted/FrostedSkin.tsx @@ -12,7 +12,7 @@ import { TimeSlider, Tooltip, VolumeSlider, -} from '@videojs/react'; +} from '@videojs/react-preview'; import { FullscreenEnterIcon, FullscreenExitIcon, @@ -21,7 +21,7 @@ import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon, -} from '@videojs/react/icons'; +} from '@videojs/react-preview/icons'; import './frosted.css'; diff --git a/examples/react/src/skins/ejected/minimal/MinimalSkin.tsx b/examples/react/src/skins/ejected/minimal/MinimalSkin.tsx index 946566a9..25db946c 100644 --- a/examples/react/src/skins/ejected/minimal/MinimalSkin.tsx +++ b/examples/react/src/skins/ejected/minimal/MinimalSkin.tsx @@ -12,7 +12,7 @@ import { TimeSlider, Tooltip, VolumeSlider, -} from '@videojs/react'; +} from '@videojs/react-preview'; import { FullscreenEnterAltIcon, FullscreenExitAltIcon, @@ -21,7 +21,7 @@ import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon, -} from '@videojs/react/icons'; +} from '@videojs/react-preview/icons'; import './minimal.css'; diff --git a/examples/react/src/skins/imported/FrostedSkin.tsx b/examples/react/src/skins/imported/FrostedSkin.tsx index 9fc7a416..2ecc422e 100644 --- a/examples/react/src/skins/imported/FrostedSkin.tsx +++ b/examples/react/src/skins/imported/FrostedSkin.tsx @@ -1,3 +1,3 @@ -import '@videojs/react/skins/frosted.css'; +import '@videojs/react-preview/skins/frosted.css'; -export { FrostedSkin as default } from '@videojs/react'; +export { FrostedSkin as default } from '@videojs/react-preview'; diff --git a/examples/react/src/skins/imported/MinimalSkin.tsx b/examples/react/src/skins/imported/MinimalSkin.tsx index 90b35113..73706afa 100644 --- a/examples/react/src/skins/imported/MinimalSkin.tsx +++ b/examples/react/src/skins/imported/MinimalSkin.tsx @@ -1,3 +1,3 @@ -import '@videojs/react/skins/minimal.css'; +import '@videojs/react-preview/skins/minimal.css'; -export { MinimalSkin as default } from '@videojs/react'; +export { MinimalSkin as default } from '@videojs/react-preview'; diff --git a/package.json b/package.json index 07427d02..a9ca3b37 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ }, "scripts": { "prepare": "simple-git-hooks", - "build:packages": "turbo run build --filter=./packages/**", + "build:packages": "turbo run build --filter=./packages/*", "build:site": "turbo run build --filter=site", "docs:update": "doctoc README.md CONTRIBUTING.md", "build": "turbo run build", diff --git a/packages/core/CHANGELOG.md b/packages/__tech-preview__/core/CHANGELOG.md similarity index 100% rename from packages/core/CHANGELOG.md rename to packages/__tech-preview__/core/CHANGELOG.md diff --git a/packages/__tech-preview__/core/README.md b/packages/__tech-preview__/core/README.md new file mode 100644 index 00000000..259381eb --- /dev/null +++ b/packages/__tech-preview__/core/README.md @@ -0,0 +1,28 @@ +# @videojs/core + +[![package-badge]][package] + +> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. + +## Overview + +`@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. + +## Community + +If you need help with anything related to Video.js v10, or if you'd like to casually chat with other +members: + +- [Join Discord Server][discord] +- [See GitHub Discussions][gh-discussions] + +## License + +[Apache-2.0](./LICENSE) + +[package]: https://www.npmjs.com/package/@videojs/core +[package-badge]: https://img.shields.io/npm/v/@videojs/core/next?label=@videojs/core@next +[discord]: https://discord.gg/JBqHh485uF +[gh-discussions]: https://github.com/videojs/v10/discussions diff --git a/packages/__tech-preview__/core/package.json b/packages/__tech-preview__/core/package.json new file mode 100644 index 00000000..3d15e2ff --- /dev/null +++ b/packages/__tech-preview__/core/package.json @@ -0,0 +1,55 @@ +{ + "name": "@videojs/core-preview", + "type": "module", + "version": "0.1.0-preview.10", + "description": "Core components and utilities for Video.js", + "license": "Apache-2.0", + "keywords": [ + "core", + "components", + "media", + "player", + "ui", + "time-range", + "videojs" + ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + }, + "./media": { + "types": "./dist/media.d.ts", + "default": "./dist/media.js" + }, + "./store": { + "types": "./dist/store.d.ts", + "default": "./dist/store.js" + } + }, + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsdown", + "build:watch": "tsdown --watch --silent", + "dev": "pnpm run build:watch", + "test": "echo \"No tests yet\"", + "clean": "rm -rf dist" + }, + "dependencies": { + "@videojs/utils-preview": "workspace:*", + "hls.js": "^1.6.7", + "nanostores": "^1.0.1" + }, + "devDependencies": { + "tsdown": "^0.15.9", + "typescript": "^5.9.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/core/src/components/popover.ts b/packages/__tech-preview__/core/src/components/popover.ts similarity index 99% rename from packages/core/src/components/popover.ts rename to packages/__tech-preview__/core/src/components/popover.ts index 91859a76..d5ecd959 100644 --- a/packages/core/src/components/popover.ts +++ b/packages/__tech-preview__/core/src/components/popover.ts @@ -1,4 +1,4 @@ -import { shallowEqual } from '@videojs/utils'; +import { shallowEqual } from '@videojs/utils-preview'; import { addTranslateToBoundingRect, contains, @@ -6,7 +6,7 @@ import { getInBoundsAdjustments, getUntransformedBoundingRect, safePolygon, -} from '@videojs/utils/dom'; +} from '@videojs/utils-preview/dom'; import { map } from 'nanostores'; type Placement = 'top' | 'top-start' | 'top-end'; diff --git a/packages/core/src/components/slider.ts b/packages/__tech-preview__/core/src/components/slider.ts similarity index 99% rename from packages/core/src/components/slider.ts rename to packages/__tech-preview__/core/src/components/slider.ts index d133ea48..63f5d822 100644 --- a/packages/core/src/components/slider.ts +++ b/packages/__tech-preview__/core/src/components/slider.ts @@ -1,4 +1,4 @@ -import { getPointProgressOnLine, shallowEqual } from '@videojs/utils'; +import { getPointProgressOnLine, shallowEqual } from '@videojs/utils-preview'; import { map } from 'nanostores'; export interface SliderState { diff --git a/packages/core/src/components/time-slider.ts b/packages/__tech-preview__/core/src/components/time-slider.ts similarity index 98% rename from packages/core/src/components/time-slider.ts rename to packages/__tech-preview__/core/src/components/time-slider.ts index bc45fc76..05e3e44c 100644 --- a/packages/core/src/components/time-slider.ts +++ b/packages/__tech-preview__/core/src/components/time-slider.ts @@ -1,6 +1,6 @@ import type { SliderState } from './slider'; -import { formatTime } from '@videojs/utils'; +import { formatTime } from '@videojs/utils-preview'; import { Slider } from './slider'; export interface TimeSliderState extends SliderState { diff --git a/packages/core/src/components/tooltip.ts b/packages/__tech-preview__/core/src/components/tooltip.ts similarity index 100% rename from packages/core/src/components/tooltip.ts rename to packages/__tech-preview__/core/src/components/tooltip.ts diff --git a/packages/core/src/components/volume-slider.ts b/packages/__tech-preview__/core/src/components/volume-slider.ts similarity index 100% rename from packages/core/src/components/volume-slider.ts rename to packages/__tech-preview__/core/src/components/volume-slider.ts diff --git a/packages/__tech-preview__/core/src/index.ts b/packages/__tech-preview__/core/src/index.ts new file mode 100644 index 00000000..2709088f --- /dev/null +++ b/packages/__tech-preview__/core/src/index.ts @@ -0,0 +1,4 @@ +export { Popover, type PopoverState } from './components/popover'; +export { TimeSlider, type TimeSliderState } from './components/time-slider'; +export { Tooltip, type TooltipState } from './components/tooltip'; +export { VolumeSlider, type VolumeSliderState } from './components/volume-slider'; diff --git a/packages/core/src/media/engine/hls-engine.ts b/packages/__tech-preview__/core/src/media/engine/hls-engine.ts similarity index 100% rename from packages/core/src/media/engine/hls-engine.ts rename to packages/__tech-preview__/core/src/media/engine/hls-engine.ts diff --git a/packages/core/src/media/engine/index.ts b/packages/__tech-preview__/core/src/media/engine/index.ts similarity index 100% rename from packages/core/src/media/engine/index.ts rename to packages/__tech-preview__/core/src/media/engine/index.ts diff --git a/packages/core/src/media/index.ts b/packages/__tech-preview__/core/src/media/index.ts similarity index 100% rename from packages/core/src/media/index.ts rename to packages/__tech-preview__/core/src/media/index.ts diff --git a/packages/core/src/media/playable.ts b/packages/__tech-preview__/core/src/media/playable.ts similarity index 100% rename from packages/core/src/media/playable.ts rename to packages/__tech-preview__/core/src/media/playable.ts diff --git a/packages/core/src/store/definitions/current-time-display.ts b/packages/__tech-preview__/core/src/store/definitions/current-time-display.ts similarity index 100% rename from packages/core/src/store/definitions/current-time-display.ts rename to packages/__tech-preview__/core/src/store/definitions/current-time-display.ts diff --git a/packages/core/src/store/definitions/duration-display.ts b/packages/__tech-preview__/core/src/store/definitions/duration-display.ts similarity index 100% rename from packages/core/src/store/definitions/duration-display.ts rename to packages/__tech-preview__/core/src/store/definitions/duration-display.ts diff --git a/packages/core/src/store/definitions/fullscreen-button.ts b/packages/__tech-preview__/core/src/store/definitions/fullscreen-button.ts similarity index 100% rename from packages/core/src/store/definitions/fullscreen-button.ts rename to packages/__tech-preview__/core/src/store/definitions/fullscreen-button.ts diff --git a/packages/core/src/store/definitions/mute-button.ts b/packages/__tech-preview__/core/src/store/definitions/mute-button.ts similarity index 100% rename from packages/core/src/store/definitions/mute-button.ts rename to packages/__tech-preview__/core/src/store/definitions/mute-button.ts diff --git a/packages/core/src/store/definitions/play-button.ts b/packages/__tech-preview__/core/src/store/definitions/play-button.ts similarity index 100% rename from packages/core/src/store/definitions/play-button.ts rename to packages/__tech-preview__/core/src/store/definitions/play-button.ts diff --git a/packages/core/src/store/definitions/preview-time-display.ts b/packages/__tech-preview__/core/src/store/definitions/preview-time-display.ts similarity index 100% rename from packages/core/src/store/definitions/preview-time-display.ts rename to packages/__tech-preview__/core/src/store/definitions/preview-time-display.ts diff --git a/packages/core/src/store/definitions/time-slider.ts b/packages/__tech-preview__/core/src/store/definitions/time-slider.ts similarity index 100% rename from packages/core/src/store/definitions/time-slider.ts rename to packages/__tech-preview__/core/src/store/definitions/time-slider.ts diff --git a/packages/core/src/store/definitions/volume-slider.ts b/packages/__tech-preview__/core/src/store/definitions/volume-slider.ts similarity index 100% rename from packages/core/src/store/definitions/volume-slider.ts rename to packages/__tech-preview__/core/src/store/definitions/volume-slider.ts diff --git a/packages/core/src/store/factory.ts b/packages/__tech-preview__/core/src/store/factory.ts similarity index 100% rename from packages/core/src/store/factory.ts rename to packages/__tech-preview__/core/src/store/factory.ts diff --git a/packages/core/src/store/index.ts b/packages/__tech-preview__/core/src/store/index.ts similarity index 100% rename from packages/core/src/store/index.ts rename to packages/__tech-preview__/core/src/store/index.ts diff --git a/packages/core/src/store/media-store.ts b/packages/__tech-preview__/core/src/store/media-store.ts similarity index 100% rename from packages/core/src/store/media-store.ts rename to packages/__tech-preview__/core/src/store/media-store.ts diff --git a/packages/core/src/store/mediators/audible.ts b/packages/__tech-preview__/core/src/store/mediators/audible.ts similarity index 100% rename from packages/core/src/store/mediators/audible.ts rename to packages/__tech-preview__/core/src/store/mediators/audible.ts diff --git a/packages/core/src/store/mediators/fullscreenable.ts b/packages/__tech-preview__/core/src/store/mediators/fullscreenable.ts similarity index 98% rename from packages/core/src/store/mediators/fullscreenable.ts rename to packages/__tech-preview__/core/src/store/mediators/fullscreenable.ts index 823f8ddc..c9893057 100644 --- a/packages/core/src/store/mediators/fullscreenable.ts +++ b/packages/__tech-preview__/core/src/store/mediators/fullscreenable.ts @@ -1,4 +1,4 @@ -import { containsComposedNode } from '@videojs/utils/dom'; +import { containsComposedNode } from '@videojs/utils-preview/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/index.ts b/packages/__tech-preview__/core/src/store/mediators/index.ts similarity index 100% rename from packages/core/src/store/mediators/index.ts rename to packages/__tech-preview__/core/src/store/mediators/index.ts diff --git a/packages/core/src/store/mediators/playable.ts b/packages/__tech-preview__/core/src/store/mediators/playable.ts similarity index 100% rename from packages/core/src/store/mediators/playable.ts rename to packages/__tech-preview__/core/src/store/mediators/playable.ts diff --git a/packages/core/src/store/mediators/preview.ts b/packages/__tech-preview__/core/src/store/mediators/preview.ts similarity index 100% rename from packages/core/src/store/mediators/preview.ts rename to packages/__tech-preview__/core/src/store/mediators/preview.ts diff --git a/packages/core/src/store/mediators/temporal.ts b/packages/__tech-preview__/core/src/store/mediators/temporal.ts similarity index 98% rename from packages/core/src/store/mediators/temporal.ts rename to packages/__tech-preview__/core/src/store/mediators/temporal.ts index bcbe6ccc..def18357 100644 --- a/packages/core/src/store/mediators/temporal.ts +++ b/packages/__tech-preview__/core/src/store/mediators/temporal.ts @@ -1,4 +1,4 @@ -import { isValidNumber } from '@videojs/utils'; +import { isValidNumber } from '@videojs/utils-preview'; export const temporal = { currentTime: { diff --git a/packages/core/src/store/types.ts b/packages/__tech-preview__/core/src/store/types.ts similarity index 100% rename from packages/core/src/store/types.ts rename to packages/__tech-preview__/core/src/store/types.ts diff --git a/packages/icons/tsconfig.build.json b/packages/__tech-preview__/core/tsconfig.build.json similarity index 100% rename from packages/icons/tsconfig.build.json rename to packages/__tech-preview__/core/tsconfig.build.json diff --git a/packages/__tech-preview__/core/tsconfig.json b/packages/__tech-preview__/core/tsconfig.json new file mode 100644 index 00000000..7db81593 --- /dev/null +++ b/packages/__tech-preview__/core/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + // This will be removed. + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src"] +} diff --git a/packages/__tech-preview__/core/tsdown.config.ts b/packages/__tech-preview__/core/tsdown.config.ts new file mode 100644 index 00000000..a796899a --- /dev/null +++ b/packages/__tech-preview__/core/tsdown.config.ts @@ -0,0 +1,19 @@ +import { defineConfig } from 'tsdown'; + +export default defineConfig({ + entry: { + index: './src/index.ts', + media: './src/media/index.ts', + store: './src/store/index.ts', + }, + platform: 'browser', + format: 'es', + sourcemap: true, + clean: true, + alias: { + '@': new URL('./src', import.meta.url).pathname, + }, + dts: { + oxc: true, + }, +}); diff --git a/packages/html/CHANGELOG.md b/packages/__tech-preview__/html/CHANGELOG.md similarity index 100% rename from packages/html/CHANGELOG.md rename to packages/__tech-preview__/html/CHANGELOG.md diff --git a/packages/__tech-preview__/html/README.md b/packages/__tech-preview__/html/README.md new file mode 100644 index 00000000..e0fdf5fe --- /dev/null +++ b/packages/__tech-preview__/html/README.md @@ -0,0 +1,26 @@ +# @videojs/html + +[![package-badge]][package] + +> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. + +## Overview + +`@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. + +## Community + +If you need help with anything related to Video.js 10, or if you'd like to casually chat with other +members: + +- [Join Discord Server][discord] +- [See GitHub Discussions][gh-discussions] + +## License + +[Apache-2.0](./LICENSE) + +[package]: https://www.npmjs.com/package/@videojs/html +[package-badge]: https://img.shields.io/npm/v/@videojs/html/next?label=@videojs/html@next +[discord]: https://discord.gg/JBqHh485uF +[gh-discussions]: https://github.com/videojs/v10/discussions diff --git a/packages/__tech-preview__/html/package.json b/packages/__tech-preview__/html/package.json new file mode 100644 index 00000000..d113498a --- /dev/null +++ b/packages/__tech-preview__/html/package.json @@ -0,0 +1,67 @@ +{ + "name": "@videojs/html-preview", + "type": "module", + "version": "0.1.0-preview.10", + "description": "HTML library for building media players", + "license": "Apache-2.0", + "keywords": [ + "media", + "player", + "html", + "ui", + "components", + "videojs" + ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + }, + "./store": { + "types": "./dist/store.d.ts", + "default": "./dist/store.js" + }, + "./icons": { + "types": "./dist/icons.d.ts", + "default": "./dist/icons.js" + }, + "./skins/frosted": { + "types": "./dist/skins/frosted.d.ts", + "default": "./dist/skins/frosted.js" + }, + "./skins/minimal": { + "types": "./dist/skins/minimal.d.ts", + "default": "./dist/skins/minimal.js" + }, + "./define/*": { + "types": "./dist/define/*.d.ts", + "default": "./dist/define/*.js" + } + }, + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsdown", + "build:watch": "tsdown --watch --silent", + "dev": "pnpm run build:watch", + "test": "echo \"No tests yet\"", + "clean": "rm -rf dist" + }, + "dependencies": { + "@open-wc/context-protocol": "^0.0.9", + "@videojs/core-preview": "workspace:*", + "@videojs/icons-preview": "workspace:*", + "@videojs/utils-preview": "workspace:*" + }, + "devDependencies": { + "tsdown": "^0.15.9", + "typescript": "^5.9.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/html/src/define/index.ts b/packages/__tech-preview__/html/src/define/index.ts similarity index 100% rename from packages/html/src/define/index.ts rename to packages/__tech-preview__/html/src/define/index.ts diff --git a/packages/html/src/define/media-container.ts b/packages/__tech-preview__/html/src/define/media-container.ts similarity index 100% rename from packages/html/src/define/media-container.ts rename to packages/__tech-preview__/html/src/define/media-container.ts diff --git a/packages/html/src/define/media-current-time-display.ts b/packages/__tech-preview__/html/src/define/media-current-time-display.ts similarity index 100% rename from packages/html/src/define/media-current-time-display.ts rename to packages/__tech-preview__/html/src/define/media-current-time-display.ts diff --git a/packages/html/src/define/media-duration-display.ts b/packages/__tech-preview__/html/src/define/media-duration-display.ts similarity index 100% rename from packages/html/src/define/media-duration-display.ts rename to packages/__tech-preview__/html/src/define/media-duration-display.ts diff --git a/packages/html/src/define/media-fullscreen-button.ts b/packages/__tech-preview__/html/src/define/media-fullscreen-button.ts similarity index 100% rename from packages/html/src/define/media-fullscreen-button.ts rename to packages/__tech-preview__/html/src/define/media-fullscreen-button.ts diff --git a/packages/html/src/define/media-mute-button.ts b/packages/__tech-preview__/html/src/define/media-mute-button.ts similarity index 100% rename from packages/html/src/define/media-mute-button.ts rename to packages/__tech-preview__/html/src/define/media-mute-button.ts diff --git a/packages/html/src/define/media-play-button.ts b/packages/__tech-preview__/html/src/define/media-play-button.ts similarity index 100% rename from packages/html/src/define/media-play-button.ts rename to packages/__tech-preview__/html/src/define/media-play-button.ts diff --git a/packages/html/src/define/media-popover.ts b/packages/__tech-preview__/html/src/define/media-popover.ts similarity index 100% rename from packages/html/src/define/media-popover.ts rename to packages/__tech-preview__/html/src/define/media-popover.ts diff --git a/packages/html/src/define/media-preview-time-display.ts b/packages/__tech-preview__/html/src/define/media-preview-time-display.ts similarity index 100% rename from packages/html/src/define/media-preview-time-display.ts rename to packages/__tech-preview__/html/src/define/media-preview-time-display.ts diff --git a/packages/html/src/define/media-time-slider.ts b/packages/__tech-preview__/html/src/define/media-time-slider.ts similarity index 100% rename from packages/html/src/define/media-time-slider.ts rename to packages/__tech-preview__/html/src/define/media-time-slider.ts diff --git a/packages/html/src/define/media-tooltip.ts b/packages/__tech-preview__/html/src/define/media-tooltip.ts similarity index 100% rename from packages/html/src/define/media-tooltip.ts rename to packages/__tech-preview__/html/src/define/media-tooltip.ts diff --git a/packages/html/src/define/media-volume-slider.ts b/packages/__tech-preview__/html/src/define/media-volume-slider.ts similarity index 100% rename from packages/html/src/define/media-volume-slider.ts rename to packages/__tech-preview__/html/src/define/media-volume-slider.ts diff --git a/packages/html/src/define/video-provider.ts b/packages/__tech-preview__/html/src/define/video-provider.ts similarity index 100% rename from packages/html/src/define/video-provider.ts rename to packages/__tech-preview__/html/src/define/video-provider.ts diff --git a/packages/html/src/elements/button.ts b/packages/__tech-preview__/html/src/elements/button.ts similarity index 97% rename from packages/html/src/elements/button.ts rename to packages/__tech-preview__/html/src/elements/button.ts index be72c1ba..fa55d4e2 100644 --- a/packages/html/src/elements/button.ts +++ b/packages/__tech-preview__/html/src/elements/button.ts @@ -1,4 +1,4 @@ -import { namedNodeMapToObject } from '@videojs/utils/dom'; +import { namedNodeMapToObject } from '@videojs/utils-preview/dom'; export function getTemplateHTML( this: typeof ButtonElement, diff --git a/packages/html/src/elements/current-time-display.ts b/packages/__tech-preview__/html/src/elements/current-time-display.ts similarity index 92% rename from packages/html/src/elements/current-time-display.ts rename to packages/__tech-preview__/html/src/elements/current-time-display.ts index 5e8d5def..2e9aed89 100644 --- a/packages/html/src/elements/current-time-display.ts +++ b/packages/__tech-preview__/html/src/elements/current-time-display.ts @@ -1,8 +1,8 @@ -import type { CurrentTimeDisplayState } from '@videojs/core/store'; +import type { CurrentTimeDisplayState } from '@videojs/core-preview/store'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { currentTimeDisplayStateDefinition } from '@videojs/core/store'; -import { formatDisplayTime } from '@videojs/utils'; +import { currentTimeDisplayStateDefinition } from '@videojs/core-preview/store'; +import { formatDisplayTime } from '@videojs/utils-preview'; import { toConnectedHTMLComponent } from '../utils/component-factory'; export const getCurrentTimeDisplayState: StateHook = (_element, mediaStore) => { diff --git a/packages/html/src/elements/duration-display.ts b/packages/__tech-preview__/html/src/elements/duration-display.ts similarity index 87% rename from packages/html/src/elements/duration-display.ts rename to packages/__tech-preview__/html/src/elements/duration-display.ts index 77e746fe..bbd8668d 100644 --- a/packages/html/src/elements/duration-display.ts +++ b/packages/__tech-preview__/html/src/elements/duration-display.ts @@ -1,10 +1,10 @@ -import type { DurationDisplayState } from '@videojs/core/store'; +import type { DurationDisplayState } from '@videojs/core-preview/store'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { durationDisplayStateDefinition } from '@videojs/core/store'; +import { durationDisplayStateDefinition } from '@videojs/core-preview/store'; -import { formatDisplayTime } from '@videojs/utils'; -import { namedNodeMapToObject } from '@videojs/utils/dom'; +import { formatDisplayTime } from '@videojs/utils-preview'; +import { namedNodeMapToObject } from '@videojs/utils-preview/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; export function getTemplateHTML( diff --git a/packages/html/src/elements/fullscreen-button.ts b/packages/__tech-preview__/html/src/elements/fullscreen-button.ts similarity index 92% rename from packages/html/src/elements/fullscreen-button.ts rename to packages/__tech-preview__/html/src/elements/fullscreen-button.ts index 819bd3dd..e7c8a772 100644 --- a/packages/html/src/elements/fullscreen-button.ts +++ b/packages/__tech-preview__/html/src/elements/fullscreen-button.ts @@ -1,10 +1,10 @@ -import type { FullscreenButtonState } from '@videojs/core/store'; +import type { FullscreenButtonState } from '@videojs/core-preview/store'; import type { Prettify } from '../types'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { fullscreenButtonStateDefinition } from '@videojs/core/store'; +import { fullscreenButtonStateDefinition } from '@videojs/core-preview/store'; -import { memoize } from '@videojs/utils'; +import { memoize } from '@videojs/utils-preview'; import { toConnectedHTMLComponent } from '../utils/component-factory'; import { ButtonElement } from './button'; diff --git a/packages/html/src/elements/mute-button.ts b/packages/__tech-preview__/html/src/elements/mute-button.ts similarity index 91% rename from packages/html/src/elements/mute-button.ts rename to packages/__tech-preview__/html/src/elements/mute-button.ts index 29325fd1..29e62dc0 100644 --- a/packages/html/src/elements/mute-button.ts +++ b/packages/__tech-preview__/html/src/elements/mute-button.ts @@ -1,10 +1,10 @@ -import type { MuteButtonState } from '@videojs/core/store'; +import type { MuteButtonState } from '@videojs/core-preview/store'; import type { Prettify } from '../types'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { muteButtonStateDefinition } from '@videojs/core/store'; +import { muteButtonStateDefinition } from '@videojs/core-preview/store'; -import { memoize } from '@videojs/utils'; +import { memoize } from '@videojs/utils-preview'; import { toConnectedHTMLComponent } from '../utils/component-factory'; import { ButtonElement } from './button'; diff --git a/packages/html/src/elements/play-button.ts b/packages/__tech-preview__/html/src/elements/play-button.ts similarity index 91% rename from packages/html/src/elements/play-button.ts rename to packages/__tech-preview__/html/src/elements/play-button.ts index 0219c954..c26499bc 100644 --- a/packages/html/src/elements/play-button.ts +++ b/packages/__tech-preview__/html/src/elements/play-button.ts @@ -1,9 +1,9 @@ -import type { PlayButtonState } from '@videojs/core/store'; +import type { PlayButtonState } from '@videojs/core-preview/store'; import type { Prettify } from '../types'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { playButtonStateDefinition } from '@videojs/core/store'; -import { memoize } from '@videojs/utils'; +import { playButtonStateDefinition } from '@videojs/core-preview/store'; +import { memoize } from '@videojs/utils-preview'; import { toConnectedHTMLComponent } from '../utils/component-factory'; import { ButtonElement } from './button'; diff --git a/packages/html/src/elements/popover.ts b/packages/__tech-preview__/html/src/elements/popover.ts similarity index 95% rename from packages/html/src/elements/popover.ts rename to packages/__tech-preview__/html/src/elements/popover.ts index a5f46307..f3c23a81 100644 --- a/packages/html/src/elements/popover.ts +++ b/packages/__tech-preview__/html/src/elements/popover.ts @@ -1,8 +1,8 @@ -import type { PopoverState as CorePopoverState } from '@videojs/core'; +import type { PopoverState as CorePopoverState } from '@videojs/core-preview'; import type { Prettify } from '../types'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { Popover as CorePopover } from '@videojs/core'; -import { getDocumentOrShadowRoot } from '@videojs/utils/dom'; +import { Popover as CorePopover } from '@videojs/core-preview'; +import { getDocumentOrShadowRoot } from '@videojs/utils-preview/dom'; import { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory'; type Placement = CorePopoverState['placement']; diff --git a/packages/html/src/elements/preview-time-display.ts b/packages/__tech-preview__/html/src/elements/preview-time-display.ts similarity index 91% rename from packages/html/src/elements/preview-time-display.ts rename to packages/__tech-preview__/html/src/elements/preview-time-display.ts index b589bd0e..979eb5e6 100644 --- a/packages/html/src/elements/preview-time-display.ts +++ b/packages/__tech-preview__/html/src/elements/preview-time-display.ts @@ -1,9 +1,9 @@ -import type { PreviewTimeDisplayState } from '@videojs/core/store'; +import type { PreviewTimeDisplayState } from '@videojs/core-preview/store'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { previewTimeDisplayStateDefinition } from '@videojs/core/store'; +import { previewTimeDisplayStateDefinition } from '@videojs/core-preview/store'; -import { formatDisplayTime } from '@videojs/utils'; +import { formatDisplayTime } from '@videojs/utils-preview'; import { toConnectedHTMLComponent } from '../utils/component-factory'; export const getPreviewTimeDisplayState: StateHook = (_element, mediaStore) => { diff --git a/packages/html/src/elements/time-slider.ts b/packages/__tech-preview__/html/src/elements/time-slider.ts similarity index 97% rename from packages/html/src/elements/time-slider.ts rename to packages/__tech-preview__/html/src/elements/time-slider.ts index 5af0e7b3..874c59b5 100644 --- a/packages/html/src/elements/time-slider.ts +++ b/packages/__tech-preview__/html/src/elements/time-slider.ts @@ -1,9 +1,9 @@ import type { Prettify } from '../types'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { TimeSlider as CoreTimeSlider } from '@videojs/core'; -import { timeSliderStateDefinition } from '@videojs/core/store'; -import { memoize } from '@videojs/utils'; +import { TimeSlider as CoreTimeSlider } from '@videojs/core-preview'; +import { timeSliderStateDefinition } from '@videojs/core-preview/store'; +import { memoize } from '@videojs/utils-preview'; import { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory'; diff --git a/packages/html/src/elements/tooltip.ts b/packages/__tech-preview__/html/src/elements/tooltip.ts similarity index 94% rename from packages/html/src/elements/tooltip.ts rename to packages/__tech-preview__/html/src/elements/tooltip.ts index 7bf3f51f..607966ee 100644 --- a/packages/html/src/elements/tooltip.ts +++ b/packages/__tech-preview__/html/src/elements/tooltip.ts @@ -1,6 +1,6 @@ import type { Prettify } from '../types'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { Tooltip as CoreTooltip } from '@videojs/core'; +import { Tooltip as CoreTooltip } from '@videojs/core-preview'; import { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory'; import { getPopoverProps, Popover } from './popover'; diff --git a/packages/html/src/elements/volume-slider.ts b/packages/__tech-preview__/html/src/elements/volume-slider.ts similarity index 97% rename from packages/html/src/elements/volume-slider.ts rename to packages/__tech-preview__/html/src/elements/volume-slider.ts index 539cff7d..fd8bcbfa 100644 --- a/packages/html/src/elements/volume-slider.ts +++ b/packages/__tech-preview__/html/src/elements/volume-slider.ts @@ -1,9 +1,9 @@ import type { Prettify } from '../types'; import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory'; -import { VolumeSlider as CoreVolumeSlider } from '@videojs/core'; -import { volumeSliderStateDefinition } from '@videojs/core/store'; -import { memoize } from '@videojs/utils'; +import { VolumeSlider as CoreVolumeSlider } from '@videojs/core-preview'; +import { volumeSliderStateDefinition } from '@videojs/core-preview/store'; +import { memoize } from '@videojs/utils-preview'; import { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory'; diff --git a/packages/html/src/icons/index.ts b/packages/__tech-preview__/html/src/icons/index.ts similarity index 100% rename from packages/html/src/icons/index.ts rename to packages/__tech-preview__/html/src/icons/index.ts diff --git a/packages/html/src/icons/media-chrome-icon.ts b/packages/__tech-preview__/html/src/icons/media-chrome-icon.ts similarity index 100% rename from packages/html/src/icons/media-chrome-icon.ts rename to packages/__tech-preview__/html/src/icons/media-chrome-icon.ts diff --git a/packages/html/src/icons/media-fullscreen-enter-alt-icon.ts b/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-alt-icon.ts similarity index 92% rename from packages/html/src/icons/media-fullscreen-enter-alt-icon.ts rename to packages/__tech-preview__/html/src/icons/media-fullscreen-enter-alt-icon.ts index 621edafe..30942a2e 100644 --- a/packages/html/src/icons/media-fullscreen-enter-alt-icon.ts +++ b/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-alt-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@videojs/icons'; +import { SVG_ICONS } from '@videojs/icons-preview'; import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-fullscreen-enter-icon.ts b/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-icon.ts similarity index 91% rename from packages/html/src/icons/media-fullscreen-enter-icon.ts rename to packages/__tech-preview__/html/src/icons/media-fullscreen-enter-icon.ts index 4f49aba5..55e3672d 100644 --- a/packages/html/src/icons/media-fullscreen-enter-icon.ts +++ b/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@videojs/icons'; +import { SVG_ICONS } from '@videojs/icons-preview'; import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-fullscreen-exit-alt-icon.ts b/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-alt-icon.ts similarity index 92% rename from packages/html/src/icons/media-fullscreen-exit-alt-icon.ts rename to packages/__tech-preview__/html/src/icons/media-fullscreen-exit-alt-icon.ts index 0e131263..5ee266ad 100644 --- a/packages/html/src/icons/media-fullscreen-exit-alt-icon.ts +++ b/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-alt-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@videojs/icons'; +import { SVG_ICONS } from '@videojs/icons-preview'; import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-fullscreen-exit-icon.ts b/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-icon.ts similarity index 91% rename from packages/html/src/icons/media-fullscreen-exit-icon.ts rename to packages/__tech-preview__/html/src/icons/media-fullscreen-exit-icon.ts index 634af981..42983dd4 100644 --- a/packages/html/src/icons/media-fullscreen-exit-icon.ts +++ b/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@videojs/icons'; +import { SVG_ICONS } from '@videojs/icons-preview'; import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-pause-icon.ts b/packages/__tech-preview__/html/src/icons/media-pause-icon.ts similarity index 89% rename from packages/html/src/icons/media-pause-icon.ts rename to packages/__tech-preview__/html/src/icons/media-pause-icon.ts index 0608945a..a7c99ef5 100644 --- a/packages/html/src/icons/media-pause-icon.ts +++ b/packages/__tech-preview__/html/src/icons/media-pause-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@videojs/icons'; +import { SVG_ICONS } from '@videojs/icons-preview'; import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-play-icon.ts b/packages/__tech-preview__/html/src/icons/media-play-icon.ts similarity index 91% rename from packages/html/src/icons/media-play-icon.ts rename to packages/__tech-preview__/html/src/icons/media-play-icon.ts index fba93139..2f6a7e68 100644 --- a/packages/html/src/icons/media-play-icon.ts +++ b/packages/__tech-preview__/html/src/icons/media-play-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@videojs/icons'; +import { SVG_ICONS } from '@videojs/icons-preview'; import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-volume-high-icon.ts b/packages/__tech-preview__/html/src/icons/media-volume-high-icon.ts similarity index 91% rename from packages/html/src/icons/media-volume-high-icon.ts rename to packages/__tech-preview__/html/src/icons/media-volume-high-icon.ts index 7a521d84..562c47d5 100644 --- a/packages/html/src/icons/media-volume-high-icon.ts +++ b/packages/__tech-preview__/html/src/icons/media-volume-high-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@videojs/icons'; +import { SVG_ICONS } from '@videojs/icons-preview'; import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-volume-low-icon.ts b/packages/__tech-preview__/html/src/icons/media-volume-low-icon.ts similarity index 91% rename from packages/html/src/icons/media-volume-low-icon.ts rename to packages/__tech-preview__/html/src/icons/media-volume-low-icon.ts index 7b42530a..0c1bd598 100644 --- a/packages/html/src/icons/media-volume-low-icon.ts +++ b/packages/__tech-preview__/html/src/icons/media-volume-low-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@videojs/icons'; +import { SVG_ICONS } from '@videojs/icons-preview'; import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/html/src/icons/media-volume-off-icon.ts b/packages/__tech-preview__/html/src/icons/media-volume-off-icon.ts similarity index 91% rename from packages/html/src/icons/media-volume-off-icon.ts rename to packages/__tech-preview__/html/src/icons/media-volume-off-icon.ts index 20336575..05d74b10 100644 --- a/packages/html/src/icons/media-volume-off-icon.ts +++ b/packages/__tech-preview__/html/src/icons/media-volume-off-icon.ts @@ -1,4 +1,4 @@ -import { SVG_ICONS } from '@videojs/icons'; +import { SVG_ICONS } from '@videojs/icons-preview'; import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; diff --git a/packages/__tech-preview__/html/src/index.ts b/packages/__tech-preview__/html/src/index.ts new file mode 100644 index 00000000..672d5b17 --- /dev/null +++ b/packages/__tech-preview__/html/src/index.ts @@ -0,0 +1,13 @@ +export { CurrentTimeDisplayElement } from './elements/current-time-display'; +export { DurationDisplayElement } from './elements/duration-display'; +export { FullscreenButtonElement } from './elements/fullscreen-button'; +export { MuteButtonElement } from './elements/mute-button'; +export { PlayButtonElement } from './elements/play-button'; +export { PopoverElement } from './elements/popover'; +export { PreviewTimeDisplayElement } from './elements/preview-time-display'; +export { TimeSliderElement } from './elements/time-slider'; +export { TooltipElement } from './elements/tooltip'; +export { VolumeSliderElement } from './elements/volume-slider'; +export { MediaContainerElement } from './media/media-container'; +export { MediaSkinElement } from './media/media-skin'; +export { VideoProviderElement } from './media/video-provider'; diff --git a/packages/html/src/media/media-container.ts b/packages/__tech-preview__/html/src/media/media-container.ts similarity index 100% rename from packages/html/src/media/media-container.ts rename to packages/__tech-preview__/html/src/media/media-container.ts diff --git a/packages/html/src/media/media-skin.ts b/packages/__tech-preview__/html/src/media/media-skin.ts similarity index 100% rename from packages/html/src/media/media-skin.ts rename to packages/__tech-preview__/html/src/media/media-skin.ts diff --git a/packages/html/src/media/video-provider.ts b/packages/__tech-preview__/html/src/media/video-provider.ts similarity index 71% rename from packages/html/src/media/video-provider.ts rename to packages/__tech-preview__/html/src/media/video-provider.ts index 902d71a4..6a898b3e 100644 --- a/packages/html/src/media/video-provider.ts +++ b/packages/__tech-preview__/html/src/media/video-provider.ts @@ -1,10 +1,10 @@ import type { Constructor, CustomElement } from '@open-wc/context-protocol'; -import type { MediaStore } from '@videojs/core/store'; +import type { MediaStore } from '@videojs/core-preview/store'; import { ProviderMixin } from '@open-wc/context-protocol'; -import { createMediaStore } from '@videojs/core/store'; +import { createMediaStore } from '@videojs/core-preview/store'; -import { printConsoleBanner } from '@videojs/utils'; +import { printConsoleBanner } from '@videojs/utils-preview'; import { version } from '../../package.json'; printConsoleBanner(version); diff --git a/packages/html/src/skins/frosted/index.ts b/packages/__tech-preview__/html/src/skins/frosted/index.ts similarity index 100% rename from packages/html/src/skins/frosted/index.ts rename to packages/__tech-preview__/html/src/skins/frosted/index.ts diff --git a/packages/html/src/skins/frosted/styles.css b/packages/__tech-preview__/html/src/skins/frosted/styles.css similarity index 100% rename from packages/html/src/skins/frosted/styles.css rename to packages/__tech-preview__/html/src/skins/frosted/styles.css diff --git a/packages/html/src/skins/minimal/index.ts b/packages/__tech-preview__/html/src/skins/minimal/index.ts similarity index 100% rename from packages/html/src/skins/minimal/index.ts rename to packages/__tech-preview__/html/src/skins/minimal/index.ts diff --git a/packages/html/src/skins/minimal/styles.css b/packages/__tech-preview__/html/src/skins/minimal/styles.css similarity index 100% rename from packages/html/src/skins/minimal/styles.css rename to packages/__tech-preview__/html/src/skins/minimal/styles.css diff --git a/packages/html/src/store/index.ts b/packages/__tech-preview__/html/src/store/index.ts similarity index 100% rename from packages/html/src/store/index.ts rename to packages/__tech-preview__/html/src/store/index.ts diff --git a/packages/__tech-preview__/html/src/types.d.ts b/packages/__tech-preview__/html/src/types.d.ts new file mode 100644 index 00000000..b3340833 --- /dev/null +++ b/packages/__tech-preview__/html/src/types.d.ts @@ -0,0 +1,8 @@ +declare module '*.css' { + const content: string; + export default content; +} + +export type Prettify = { + [K in keyof T]: T[K]; +} & {}; diff --git a/packages/html/src/utils/component-factory.ts b/packages/__tech-preview__/html/src/utils/component-factory.ts similarity index 96% rename from packages/html/src/utils/component-factory.ts rename to packages/__tech-preview__/html/src/utils/component-factory.ts index adad9dea..025b147e 100644 --- a/packages/html/src/utils/component-factory.ts +++ b/packages/__tech-preview__/html/src/utils/component-factory.ts @@ -1,7 +1,7 @@ -import type { MediaStore } from '@videojs/core/store'; +import type { MediaStore } from '@videojs/core-preview/store'; import { ConsumerMixin } from '@open-wc/context-protocol'; -import { shallowEqual, toCamelCase } from '@videojs/utils'; -import { setAttributes } from '@videojs/utils/dom'; +import { shallowEqual, toCamelCase } from '@videojs/utils-preview'; +import { setAttributes } from '@videojs/utils-preview/dom'; /** * Generic types for HTML component hooks pattern diff --git a/packages/html/src/utils/custom-element.ts b/packages/__tech-preview__/html/src/utils/custom-element.ts similarity index 100% rename from packages/html/src/utils/custom-element.ts rename to packages/__tech-preview__/html/src/utils/custom-element.ts diff --git a/packages/__tech-preview__/html/tsconfig.build.json b/packages/__tech-preview__/html/tsconfig.build.json new file mode 100644 index 00000000..b90fc83e --- /dev/null +++ b/packages/__tech-preview__/html/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["src"] +} diff --git a/packages/__tech-preview__/html/tsconfig.json b/packages/__tech-preview__/html/tsconfig.json new file mode 100644 index 00000000..0c2d28cc --- /dev/null +++ b/packages/__tech-preview__/html/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src"] +} diff --git a/packages/__tech-preview__/html/tsdown.config.ts b/packages/__tech-preview__/html/tsdown.config.ts new file mode 100644 index 00000000..8f7ca7c8 --- /dev/null +++ b/packages/__tech-preview__/html/tsdown.config.ts @@ -0,0 +1,34 @@ +import { readdirSync } from 'node:fs'; +import { defineConfig } from 'tsdown'; + +const defineDir = new URL('./src/define', import.meta.url).pathname; +const defineFiles = readdirSync(defineDir).filter(file => file.endsWith('.ts')); + +export default defineConfig({ + entry: { + index: 'src/index.ts', + store: 'src/store/index.ts', + icons: 'src/icons/index.ts', + 'skins/frosted': 'src/skins/frosted/index.ts', + 'skins/minimal': 'src/skins/minimal/index.ts', + ...defineFiles.reduce((entries, file) => { + const name = file.replace(/\.ts$/, ''); + entries[`define/${name}`] = `src/define/${file}`; + return entries; + }, {} as Record), + }, + platform: 'browser', + format: 'es', + sourcemap: true, + clean: true, + alias: { + '@': new URL('./src', import.meta.url).pathname, + }, + dts: { + oxc: true, + }, + loader: { + '.svg': 'text', + '.css': 'text', + }, +}); diff --git a/packages/icons/CHANGELOG.md b/packages/__tech-preview__/icons/CHANGELOG.md similarity index 100% rename from packages/icons/CHANGELOG.md rename to packages/__tech-preview__/icons/CHANGELOG.md diff --git a/packages/__tech-preview__/icons/README.md b/packages/__tech-preview__/icons/README.md new file mode 100644 index 00000000..9c9dcf7e --- /dev/null +++ b/packages/__tech-preview__/icons/README.md @@ -0,0 +1,28 @@ +# @videojs/icons + +[![package-badge]][package] + +> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. + +## Overview + +`@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. + +## Community + +If you need help with anything related to Video.js 10, or if you'd like to casually chat with other +members: + +- [Join Discord Server][discord] +- [See GitHub Discussions][gh-discussions] + +## License + +[Apache-2.0](./LICENSE) + +[package]: https://www.npmjs.com/package/@videojs/icons +[package-badge]: https://img.shields.io/npm/v/@videojs/icons/next?label=@videojs/icons@next +[discord]: https://discord.gg/JBqHh485uF +[gh-discussions]: https://github.com/videojs/v10/discussions diff --git a/packages/icons/assets/fullscreen-enter-alt.svg b/packages/__tech-preview__/icons/assets/fullscreen-enter-alt.svg similarity index 100% rename from packages/icons/assets/fullscreen-enter-alt.svg rename to packages/__tech-preview__/icons/assets/fullscreen-enter-alt.svg diff --git a/packages/icons/assets/fullscreen-enter.svg b/packages/__tech-preview__/icons/assets/fullscreen-enter.svg similarity index 100% rename from packages/icons/assets/fullscreen-enter.svg rename to packages/__tech-preview__/icons/assets/fullscreen-enter.svg diff --git a/packages/icons/assets/fullscreen-exit-alt.svg b/packages/__tech-preview__/icons/assets/fullscreen-exit-alt.svg similarity index 100% rename from packages/icons/assets/fullscreen-exit-alt.svg rename to packages/__tech-preview__/icons/assets/fullscreen-exit-alt.svg diff --git a/packages/icons/assets/fullscreen-exit.svg b/packages/__tech-preview__/icons/assets/fullscreen-exit.svg similarity index 100% rename from packages/icons/assets/fullscreen-exit.svg rename to packages/__tech-preview__/icons/assets/fullscreen-exit.svg diff --git a/packages/icons/assets/pause.svg b/packages/__tech-preview__/icons/assets/pause.svg similarity index 100% rename from packages/icons/assets/pause.svg rename to packages/__tech-preview__/icons/assets/pause.svg diff --git a/packages/icons/assets/play.svg b/packages/__tech-preview__/icons/assets/play.svg similarity index 100% rename from packages/icons/assets/play.svg rename to packages/__tech-preview__/icons/assets/play.svg diff --git a/packages/icons/assets/spinner.svg b/packages/__tech-preview__/icons/assets/spinner.svg similarity index 100% rename from packages/icons/assets/spinner.svg rename to packages/__tech-preview__/icons/assets/spinner.svg diff --git a/packages/icons/assets/volume-high.svg b/packages/__tech-preview__/icons/assets/volume-high.svg similarity index 100% rename from packages/icons/assets/volume-high.svg rename to packages/__tech-preview__/icons/assets/volume-high.svg diff --git a/packages/icons/assets/volume-low.svg b/packages/__tech-preview__/icons/assets/volume-low.svg similarity index 100% rename from packages/icons/assets/volume-low.svg rename to packages/__tech-preview__/icons/assets/volume-low.svg diff --git a/packages/icons/assets/volume-off.svg b/packages/__tech-preview__/icons/assets/volume-off.svg similarity index 100% rename from packages/icons/assets/volume-off.svg rename to packages/__tech-preview__/icons/assets/volume-off.svg diff --git a/packages/__tech-preview__/icons/package.json b/packages/__tech-preview__/icons/package.json new file mode 100644 index 00000000..7b0376e3 --- /dev/null +++ b/packages/__tech-preview__/icons/package.json @@ -0,0 +1,41 @@ +{ + "name": "@videojs/icons-preview", + "type": "module", + "version": "0.1.0-preview.10", + "description": "SVG icon library for Video.js", + "license": "Apache-2.0", + "keywords": [ + "icons", + "svg", + "media", + "player", + "ui", + "videojs" + ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + } + }, + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsdown", + "build:watch": "tsdown --watch --silent", + "dev": "pnpm run build:watch", + "test": "echo \"No tests yet\"", + "clean": "rm -rf dist" + }, + "devDependencies": { + "tsdown": "^0.15.9", + "typescript": "^5.9.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/icons/src/index.ts b/packages/__tech-preview__/icons/src/index.ts similarity index 100% rename from packages/icons/src/index.ts rename to packages/__tech-preview__/icons/src/index.ts diff --git a/packages/icons/src/svg.d.ts b/packages/__tech-preview__/icons/src/svg.d.ts similarity index 100% rename from packages/icons/src/svg.d.ts rename to packages/__tech-preview__/icons/src/svg.d.ts diff --git a/packages/__tech-preview__/icons/tsconfig.build.json b/packages/__tech-preview__/icons/tsconfig.build.json new file mode 100644 index 00000000..b90fc83e --- /dev/null +++ b/packages/__tech-preview__/icons/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["src"] +} diff --git a/packages/icons/tsconfig.json b/packages/__tech-preview__/icons/tsconfig.json similarity index 72% rename from packages/icons/tsconfig.json rename to packages/__tech-preview__/icons/tsconfig.json index e8e1ab9c..c4d7be0c 100644 --- a/packages/icons/tsconfig.json +++ b/packages/__tech-preview__/icons/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../..//tsconfig.base.json", + "extends": "../../../tsconfig.base.json", "compilerOptions": { "baseUrl": ".", "paths": { diff --git a/packages/icons/tsdown.config.ts b/packages/__tech-preview__/icons/tsdown.config.ts similarity index 100% rename from packages/icons/tsdown.config.ts rename to packages/__tech-preview__/icons/tsdown.config.ts diff --git a/packages/__tech-preview__/react-native/.gitkeep b/packages/__tech-preview__/react-native/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/packages/react/CHANGELOG.md b/packages/__tech-preview__/react/CHANGELOG.md similarity index 100% rename from packages/react/CHANGELOG.md rename to packages/__tech-preview__/react/CHANGELOG.md diff --git a/packages/__tech-preview__/react/README.md b/packages/__tech-preview__/react/README.md new file mode 100644 index 00000000..297c45f1 --- /dev/null +++ b/packages/__tech-preview__/react/README.md @@ -0,0 +1,28 @@ +# @videojs/react + +[![package-badge]][package] + +> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. + +## Overview + +`@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. + +## Community + +If you need help with anything related to Video.js 10, or if you'd like to casually chat with other +members: + +- [Join Discord Server][discord] +- [See GitHub Discussions][gh-discussions] + +## License + +[Apache-2.0](./LICENSE) + +[package]: https://www.npmjs.com/package/@videojs/react +[package-badge]: https://img.shields.io/npm/v/@videojs/react/next?label=@videojs/react@next +[discord]: https://discord.gg/JBqHh485uF +[gh-discussions]: https://github.com/videojs/v10/discussions diff --git a/packages/react/build/build-styles.ts b/packages/__tech-preview__/react/build/build-styles.ts similarity index 98% rename from packages/react/build/build-styles.ts rename to packages/__tech-preview__/react/build/build-styles.ts index 718d58a4..023aa11a 100644 --- a/packages/react/build/build-styles.ts +++ b/packages/__tech-preview__/react/build/build-styles.ts @@ -26,7 +26,7 @@ * * Why concatenate? * - Users only need to import one CSS file per skin - * - Simpler API: import '@videojs/react/skins/frosted.css' + * - Simpler API: import '@videojs/react-preview/skins/frosted.css' */ import { execSync } from 'node:child_process'; diff --git a/packages/__tech-preview__/react/package.json b/packages/__tech-preview__/react/package.json new file mode 100644 index 00000000..f877c0f5 --- /dev/null +++ b/packages/__tech-preview__/react/package.json @@ -0,0 +1,80 @@ +{ + "name": "@videojs/react-preview", + "type": "module", + "version": "0.1.0-preview.10", + "description": "React library for building media players", + "license": "Apache-2.0", + "keywords": [ + "media", + "player", + "react", + "components", + "hooks", + "videojs" + ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + }, + "./store": { + "types": "./dist/store.d.ts", + "default": "./dist/store.js" + }, + "./icons": { + "types": "./dist/icons.d.ts", + "default": "./dist/icons.js" + }, + "./skins/frosted": { + "types": "./dist/skins/frosted.d.ts", + "default": "./dist/skins/frosted.js" + }, + "./skins/minimal": { + "types": "./dist/skins/minimal.d.ts", + "default": "./dist/skins/minimal.js" + }, + "./skins/frosted.css": "./dist/skins/frosted.css", + "./skins/minimal.css": "./dist/skins/minimal.css" + }, + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsdown", + "build:watch": "tsdown --watch ./src --ignore-watch ./src/icons/generated-icons --silent", + "dev": "pnpm run build:watch", + "format:icons": "echo noop. Need to replace based on eslint vs. prettier decisions!", + "generate:icons": "svgr --config-file svgr.config.js --out-dir src/icons/generated-icons ../icons/assets && pnpm format:icons", + "test": "echo \"No tests yet\"", + "clean": "rm -rf dist src/icons/generated-icons" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "dependencies": { + "@videojs/core-preview": "workspace:*", + "@videojs/icons-preview": "workspace:*", + "@videojs/utils-preview": "workspace:*" + }, + "devDependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0", + "@svgr/cli": "^8.1.0", + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0", + "@tailwindcss/cli": "^4.1.17", + "@types/postcss-prefix-selector": "^1.16.3", + "@types/react": "^18.0.0", + "postcss": "^8.4.49", + "postcss-prefix-selector": "^1.16.1", + "react": "^18.0.0", + "tailwindcss": "^4.1.17", + "tsdown": "^0.15.9", + "typescript": "^5.9.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/react/src/components/CurrentTimeDisplay.tsx b/packages/__tech-preview__/react/src/components/CurrentTimeDisplay.tsx similarity index 95% rename from packages/react/src/components/CurrentTimeDisplay.tsx rename to packages/__tech-preview__/react/src/components/CurrentTimeDisplay.tsx index c5201f50..f8aeb029 100644 --- a/packages/react/src/components/CurrentTimeDisplay.tsx +++ b/packages/__tech-preview__/react/src/components/CurrentTimeDisplay.tsx @@ -1,8 +1,8 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { currentTimeDisplayStateDefinition } from '@videojs/core/store'; -import { formatDisplayTime, shallowEqual } from '@videojs/utils'; +import { currentTimeDisplayStateDefinition } from '@videojs/core-preview/store'; +import { formatDisplayTime, shallowEqual } from '@videojs/utils-preview'; import { useMediaSelector } from '@/store'; import { toConnectedComponent } from '../utils/component-factory'; diff --git a/packages/react/src/components/DurationDisplay.tsx b/packages/__tech-preview__/react/src/components/DurationDisplay.tsx similarity index 91% rename from packages/react/src/components/DurationDisplay.tsx rename to packages/__tech-preview__/react/src/components/DurationDisplay.tsx index f14bf04a..d1fc90ab 100644 --- a/packages/react/src/components/DurationDisplay.tsx +++ b/packages/__tech-preview__/react/src/components/DurationDisplay.tsx @@ -1,8 +1,8 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { durationDisplayStateDefinition } from '@videojs/core/store'; -import { formatDisplayTime, shallowEqual } from '@videojs/utils'; +import { durationDisplayStateDefinition } from '@videojs/core-preview/store'; +import { formatDisplayTime, shallowEqual } from '@videojs/utils-preview'; import { useMediaSelector } from '@/store'; import { toConnectedComponent } from '../utils/component-factory'; diff --git a/packages/react/src/components/FullscreenButton.tsx b/packages/__tech-preview__/react/src/components/FullscreenButton.tsx similarity index 94% rename from packages/react/src/components/FullscreenButton.tsx rename to packages/__tech-preview__/react/src/components/FullscreenButton.tsx index 2fdfd2a3..816d3ed0 100644 --- a/packages/react/src/components/FullscreenButton.tsx +++ b/packages/__tech-preview__/react/src/components/FullscreenButton.tsx @@ -1,9 +1,9 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { fullscreenButtonStateDefinition } from '@videojs/core/store'; +import { fullscreenButtonStateDefinition } from '@videojs/core-preview/store'; -import { shallowEqual } from '@videojs/utils'; +import { shallowEqual } from '@videojs/utils-preview'; import { useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; diff --git a/packages/react/src/components/HlsVideo.tsx b/packages/__tech-preview__/react/src/components/HlsVideo.tsx similarity index 98% rename from packages/react/src/components/HlsVideo.tsx rename to packages/__tech-preview__/react/src/components/HlsVideo.tsx index ae0bb35f..b625db9c 100644 --- a/packages/react/src/components/HlsVideo.tsx +++ b/packages/__tech-preview__/react/src/components/HlsVideo.tsx @@ -7,7 +7,7 @@ import type { VideoHTMLAttributes, } from 'react'; -import { createMediaPlaybackController } from '@videojs/core/media'; +import { createMediaPlaybackController } from '@videojs/core-preview/media'; import { forwardRef, useImperativeHandle, useRef } from 'react'; import { useMediaRef } from '@/store'; diff --git a/packages/react/src/components/MediaContainer.tsx b/packages/__tech-preview__/react/src/components/MediaContainer.tsx similarity index 91% rename from packages/react/src/components/MediaContainer.tsx rename to packages/__tech-preview__/react/src/components/MediaContainer.tsx index 0b7e9bf1..2484fdcd 100644 --- a/packages/react/src/components/MediaContainer.tsx +++ b/packages/__tech-preview__/react/src/components/MediaContainer.tsx @@ -1,8 +1,8 @@ import type { FC, HTMLProps, PropsWithChildren, RefCallback } from 'react'; -import { playButtonStateDefinition } from '@videojs/core/store'; +import { playButtonStateDefinition } from '@videojs/core-preview/store'; -import { shallowEqual } from '@videojs/utils'; +import { shallowEqual } from '@videojs/utils-preview'; 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 '@videojs/react'; + * import { useMediaContainerRef } from '@videojs/react-preview'; * * 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 '@videojs/react'; + * import { MediaContainer } from '@videojs/react-preview'; * * const MyPlayer = () => ( * diff --git a/packages/react/src/components/MuteButton.tsx b/packages/__tech-preview__/react/src/components/MuteButton.tsx similarity index 94% rename from packages/react/src/components/MuteButton.tsx rename to packages/__tech-preview__/react/src/components/MuteButton.tsx index a0841b2b..6da96961 100644 --- a/packages/react/src/components/MuteButton.tsx +++ b/packages/__tech-preview__/react/src/components/MuteButton.tsx @@ -1,9 +1,9 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { muteButtonStateDefinition } from '@videojs/core/store'; +import { muteButtonStateDefinition } from '@videojs/core-preview/store'; -import { shallowEqual } from '@videojs/utils'; +import { shallowEqual } from '@videojs/utils-preview'; import { useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; diff --git a/packages/react/src/components/PlayButton.tsx b/packages/__tech-preview__/react/src/components/PlayButton.tsx similarity index 94% rename from packages/react/src/components/PlayButton.tsx rename to packages/__tech-preview__/react/src/components/PlayButton.tsx index 3ad110c2..3f9156bd 100644 --- a/packages/react/src/components/PlayButton.tsx +++ b/packages/__tech-preview__/react/src/components/PlayButton.tsx @@ -1,9 +1,9 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { playButtonStateDefinition } from '@videojs/core/store'; +import { playButtonStateDefinition } from '@videojs/core-preview/store'; -import { shallowEqual } from '@videojs/utils'; +import { shallowEqual } from '@videojs/utils-preview'; import { useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; diff --git a/packages/react/src/components/Popover.tsx b/packages/__tech-preview__/react/src/components/Popover.tsx similarity index 99% rename from packages/react/src/components/Popover.tsx rename to packages/__tech-preview__/react/src/components/Popover.tsx index 3cabfb8f..acd4575c 100644 --- a/packages/react/src/components/Popover.tsx +++ b/packages/__tech-preview__/react/src/components/Popover.tsx @@ -1,9 +1,9 @@ -import type { PopoverState as CorePopoverState } from '@videojs/core'; +import type { PopoverState as CorePopoverState } from '@videojs/core-preview'; import type { ReactNode } from 'react'; import type { Prettify } from '../types'; import type { ConnectedComponent } from '../utils/component-factory'; -import { Popover as CorePopover } from '@videojs/core'; +import { Popover as CorePopover } from '@videojs/core-preview'; import { Children, cloneElement, useCallback, useEffect, useId, useState } from 'react'; import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory'; import { useMutationObserver } from '../utils/use-mutation-observer'; diff --git a/packages/react/src/components/PreviewTimeDisplay.tsx b/packages/__tech-preview__/react/src/components/PreviewTimeDisplay.tsx similarity index 95% rename from packages/react/src/components/PreviewTimeDisplay.tsx rename to packages/__tech-preview__/react/src/components/PreviewTimeDisplay.tsx index a1d957c4..59dc6f01 100644 --- a/packages/react/src/components/PreviewTimeDisplay.tsx +++ b/packages/__tech-preview__/react/src/components/PreviewTimeDisplay.tsx @@ -1,8 +1,8 @@ import type { PropsWithChildren } from 'react'; import type { ConnectedComponent } from '../utils/component-factory'; -import { previewTimeDisplayStateDefinition } from '@videojs/core/store'; -import { formatDisplayTime, shallowEqual } from '@videojs/utils'; +import { previewTimeDisplayStateDefinition } from '@videojs/core-preview/store'; +import { formatDisplayTime, shallowEqual } from '@videojs/utils-preview'; import { useMediaSelector } from '@/store'; import { toConnectedComponent } from '../utils/component-factory'; diff --git a/packages/react/src/components/TimeSlider.tsx b/packages/__tech-preview__/react/src/components/TimeSlider.tsx similarity index 97% rename from packages/react/src/components/TimeSlider.tsx rename to packages/__tech-preview__/react/src/components/TimeSlider.tsx index 8827815a..de55c24b 100644 --- a/packages/react/src/components/TimeSlider.tsx +++ b/packages/__tech-preview__/react/src/components/TimeSlider.tsx @@ -1,9 +1,9 @@ import type { Prettify } from '../types'; import type { ConnectedComponent } from '../utils/component-factory'; -import { TimeSlider as CoreTimeSlider } from '@videojs/core'; -import { timeSliderStateDefinition } from '@videojs/core/store'; -import { shallowEqual } from '@videojs/utils'; +import { TimeSlider as CoreTimeSlider } from '@videojs/core-preview'; +import { timeSliderStateDefinition } from '@videojs/core-preview/store'; +import { shallowEqual } from '@videojs/utils-preview'; import { useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory'; diff --git a/packages/react/src/components/Tooltip.tsx b/packages/__tech-preview__/react/src/components/Tooltip.tsx similarity index 98% rename from packages/react/src/components/Tooltip.tsx rename to packages/__tech-preview__/react/src/components/Tooltip.tsx index da4d5e5a..141a3015 100644 --- a/packages/react/src/components/Tooltip.tsx +++ b/packages/__tech-preview__/react/src/components/Tooltip.tsx @@ -1,10 +1,10 @@ -import type { TooltipState as CoreTooltipState } from '@videojs/core'; +import type { TooltipState as CoreTooltipState } from '@videojs/core-preview'; import type { ReactNode } from 'react'; import type { Prettify } from '../types'; import type { ConnectedComponent } from '../utils/component-factory'; import type { PopoverPopupProps, PopoverPopupRenderProps, PopoverPositionerProps, PopoverRootProps } from './Popover'; -import { Tooltip as CoreTooltip } from '@videojs/core'; +import { Tooltip as CoreTooltip } from '@videojs/core-preview'; import { cloneElement, useCallback, useId, useState } from 'react'; import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory'; import { usePopoverPopupProps, usePopoverPositionerProps, usePopoverTriggerProps } from './Popover'; diff --git a/packages/react/src/components/Video.tsx b/packages/__tech-preview__/react/src/components/Video.tsx similarity index 100% rename from packages/react/src/components/Video.tsx rename to packages/__tech-preview__/react/src/components/Video.tsx diff --git a/packages/react/src/components/VolumeSlider.tsx b/packages/__tech-preview__/react/src/components/VolumeSlider.tsx similarity index 96% rename from packages/react/src/components/VolumeSlider.tsx rename to packages/__tech-preview__/react/src/components/VolumeSlider.tsx index b19b36b5..5a1e9765 100644 --- a/packages/react/src/components/VolumeSlider.tsx +++ b/packages/__tech-preview__/react/src/components/VolumeSlider.tsx @@ -1,9 +1,9 @@ import type { Prettify } from '../types'; import type { ConnectedComponent } from '../utils/component-factory'; -import { VolumeSlider as CoreVolumeSlider } from '@videojs/core'; -import { volumeSliderStateDefinition } from '@videojs/core/store'; -import { shallowEqual } from '@videojs/utils'; +import { VolumeSlider as CoreVolumeSlider } from '@videojs/core-preview'; +import { volumeSliderStateDefinition } from '@videojs/core-preview/store'; +import { shallowEqual } from '@videojs/utils-preview'; import { useMemo } from 'react'; import { useMediaSelector, useMediaStore } from '@/store'; import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory'; diff --git a/packages/react/src/icons/index.ts b/packages/__tech-preview__/react/src/icons/index.ts similarity index 100% rename from packages/react/src/icons/index.ts rename to packages/__tech-preview__/react/src/icons/index.ts diff --git a/packages/react/src/icons/types.d.ts b/packages/__tech-preview__/react/src/icons/types.d.ts similarity index 100% rename from packages/react/src/icons/types.d.ts rename to packages/__tech-preview__/react/src/icons/types.d.ts diff --git a/packages/__tech-preview__/react/src/index.ts b/packages/__tech-preview__/react/src/index.ts new file mode 100644 index 00000000..cfa69134 --- /dev/null +++ b/packages/__tech-preview__/react/src/index.ts @@ -0,0 +1,17 @@ +'use client'; + +export { CurrentTimeDisplay, useCurrentTimeDisplayState } from './components/CurrentTimeDisplay'; +export { DurationDisplay } from './components/DurationDisplay'; +export { FullscreenButton, useFullscreenButtonState } from './components/FullscreenButton'; +export { HlsVideo } from './components/HlsVideo'; +export { MediaContainer, useMediaContainerRef } from './components/MediaContainer'; +export { MuteButton, useMuteButtonState } from './components/MuteButton'; +export { PlayButton, usePlayButtonState } from './components/PlayButton'; +export { Popover } from './components/Popover'; +export { PreviewTimeDisplay } from './components/PreviewTimeDisplay'; +export { TimeSlider, useTimeSliderRootState } from './components/TimeSlider'; +export { Tooltip } from './components/Tooltip'; +export { Video } from './components/Video'; +export { useVolumeSliderRootState, VolumeSlider } from './components/VolumeSlider'; +export * from './skins'; +export * from '@/store'; diff --git a/packages/react/src/media/index.ts b/packages/__tech-preview__/react/src/media/index.ts similarity index 100% rename from packages/react/src/media/index.ts rename to packages/__tech-preview__/react/src/media/index.ts diff --git a/packages/react/src/media/media-elements.tsx b/packages/__tech-preview__/react/src/media/media-elements.tsx similarity index 100% rename from packages/react/src/media/media-elements.tsx rename to packages/__tech-preview__/react/src/media/media-elements.tsx diff --git a/packages/react/src/skins/frosted/FrostedSkin.tsx b/packages/__tech-preview__/react/src/skins/frosted/FrostedSkin.tsx similarity index 100% rename from packages/react/src/skins/frosted/FrostedSkin.tsx rename to packages/__tech-preview__/react/src/skins/frosted/FrostedSkin.tsx diff --git a/packages/react/src/skins/frosted/frosted-skin.css b/packages/__tech-preview__/react/src/skins/frosted/frosted-skin.css similarity index 100% rename from packages/react/src/skins/frosted/frosted-skin.css rename to packages/__tech-preview__/react/src/skins/frosted/frosted-skin.css diff --git a/packages/react/src/skins/frosted/index.ts b/packages/__tech-preview__/react/src/skins/frosted/index.ts similarity index 100% rename from packages/react/src/skins/frosted/index.ts rename to packages/__tech-preview__/react/src/skins/frosted/index.ts diff --git a/packages/react/src/skins/frosted/styles.ts b/packages/__tech-preview__/react/src/skins/frosted/styles.ts similarity index 100% rename from packages/react/src/skins/frosted/styles.ts rename to packages/__tech-preview__/react/src/skins/frosted/styles.ts diff --git a/packages/react/src/skins/frosted/types.ts b/packages/__tech-preview__/react/src/skins/frosted/types.ts similarity index 100% rename from packages/react/src/skins/frosted/types.ts rename to packages/__tech-preview__/react/src/skins/frosted/types.ts diff --git a/packages/react/src/skins/index.ts b/packages/__tech-preview__/react/src/skins/index.ts similarity index 100% rename from packages/react/src/skins/index.ts rename to packages/__tech-preview__/react/src/skins/index.ts diff --git a/packages/react/src/skins/minimal/MinimalSkin.tsx b/packages/__tech-preview__/react/src/skins/minimal/MinimalSkin.tsx similarity index 100% rename from packages/react/src/skins/minimal/MinimalSkin.tsx rename to packages/__tech-preview__/react/src/skins/minimal/MinimalSkin.tsx diff --git a/packages/react/src/skins/minimal/index.ts b/packages/__tech-preview__/react/src/skins/minimal/index.ts similarity index 100% rename from packages/react/src/skins/minimal/index.ts rename to packages/__tech-preview__/react/src/skins/minimal/index.ts diff --git a/packages/react/src/skins/minimal/minimal-skin.css b/packages/__tech-preview__/react/src/skins/minimal/minimal-skin.css similarity index 100% rename from packages/react/src/skins/minimal/minimal-skin.css rename to packages/__tech-preview__/react/src/skins/minimal/minimal-skin.css diff --git a/packages/react/src/skins/minimal/styles.ts b/packages/__tech-preview__/react/src/skins/minimal/styles.ts similarity index 100% rename from packages/react/src/skins/minimal/styles.ts rename to packages/__tech-preview__/react/src/skins/minimal/styles.ts diff --git a/packages/react/src/skins/minimal/types.ts b/packages/__tech-preview__/react/src/skins/minimal/types.ts similarity index 100% rename from packages/react/src/skins/minimal/types.ts rename to packages/__tech-preview__/react/src/skins/minimal/types.ts diff --git a/packages/react/src/skins/preflight.css b/packages/__tech-preview__/react/src/skins/preflight.css similarity index 100% rename from packages/react/src/skins/preflight.css rename to packages/__tech-preview__/react/src/skins/preflight.css diff --git a/packages/react/src/store/context.ts b/packages/__tech-preview__/react/src/store/context.ts similarity index 100% rename from packages/react/src/store/context.ts rename to packages/__tech-preview__/react/src/store/context.ts diff --git a/packages/react/src/store/hooks.ts b/packages/__tech-preview__/react/src/store/hooks.ts similarity index 95% rename from packages/react/src/store/hooks.ts rename to packages/__tech-preview__/react/src/store/hooks.ts index f418978d..098c7396 100644 --- a/packages/react/src/store/hooks.ts +++ b/packages/__tech-preview__/react/src/store/hooks.ts @@ -1,5 +1,5 @@ /** @TODO !!! Revisit for SSR (CJP) */ -import type { MediaStore } from '@videojs/core/store'; +import type { MediaStore } from '@videojs/core-preview/store'; import { useContext } from 'react'; diff --git a/packages/react/src/store/index.ts b/packages/__tech-preview__/react/src/store/index.ts similarity index 100% rename from packages/react/src/store/index.ts rename to packages/__tech-preview__/react/src/store/index.ts diff --git a/packages/react/src/store/use-sync-external-store.ts b/packages/__tech-preview__/react/src/store/use-sync-external-store.ts similarity index 100% rename from packages/react/src/store/use-sync-external-store.ts rename to packages/__tech-preview__/react/src/store/use-sync-external-store.ts diff --git a/packages/react/src/store/video-provider.tsx b/packages/__tech-preview__/react/src/store/video-provider.tsx similarity index 85% rename from packages/react/src/store/video-provider.tsx rename to packages/__tech-preview__/react/src/store/video-provider.tsx index f9da0f14..6d29aa8b 100644 --- a/packages/react/src/store/video-provider.tsx +++ b/packages/__tech-preview__/react/src/store/video-provider.tsx @@ -1,9 +1,9 @@ /** @TODO !!! Revisit for SSR (CJP) */ import type { ReactNode } from 'react'; -import { createMediaStore } from '@videojs/core/store'; +import { createMediaStore } from '@videojs/core-preview/store'; -import { printConsoleBanner } from '@videojs/utils'; +import { printConsoleBanner } from '@videojs/utils-preview'; import { useMemo } from 'react'; import { version } from '../../package.json'; diff --git a/packages/__tech-preview__/react/src/types.d.ts b/packages/__tech-preview__/react/src/types.d.ts new file mode 100644 index 00000000..4fdac591 --- /dev/null +++ b/packages/__tech-preview__/react/src/types.d.ts @@ -0,0 +1,17 @@ +declare module '*.module.css' { + const classes: { [key: string]: string }; + export default classes; +} + +declare global { + namespace React { + interface HTMLAttributes { + popover?: 'auto' | 'manual' | string; + commandfor?: string; + } + } +} + +export type Prettify = { + [K in keyof T]: T[K]; +} & {}; diff --git a/packages/react/src/utils/cn.ts b/packages/__tech-preview__/react/src/utils/cn.ts similarity index 100% rename from packages/react/src/utils/cn.ts rename to packages/__tech-preview__/react/src/utils/cn.ts diff --git a/packages/react/src/utils/component-factory.tsx b/packages/__tech-preview__/react/src/utils/component-factory.tsx similarity index 100% rename from packages/react/src/utils/component-factory.tsx rename to packages/__tech-preview__/react/src/utils/component-factory.tsx diff --git a/packages/react/src/utils/use-composed-refs.ts b/packages/__tech-preview__/react/src/utils/use-composed-refs.ts similarity index 100% rename from packages/react/src/utils/use-composed-refs.ts rename to packages/__tech-preview__/react/src/utils/use-composed-refs.ts diff --git a/packages/react/src/utils/use-mutation-observer.ts b/packages/__tech-preview__/react/src/utils/use-mutation-observer.ts similarity index 100% rename from packages/react/src/utils/use-mutation-observer.ts rename to packages/__tech-preview__/react/src/utils/use-mutation-observer.ts diff --git a/packages/react/svgr.config.js b/packages/__tech-preview__/react/svgr.config.js similarity index 100% rename from packages/react/svgr.config.js rename to packages/__tech-preview__/react/svgr.config.js diff --git a/packages/__tech-preview__/react/tsconfig.build.json b/packages/__tech-preview__/react/tsconfig.build.json new file mode 100644 index 00000000..b90fc83e --- /dev/null +++ b/packages/__tech-preview__/react/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["src"] +} diff --git a/packages/__tech-preview__/react/tsconfig.json b/packages/__tech-preview__/react/tsconfig.json new file mode 100644 index 00000000..7e899578 --- /dev/null +++ b/packages/__tech-preview__/react/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "react", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src"] +} diff --git a/packages/__tech-preview__/react/tsdown.config.ts b/packages/__tech-preview__/react/tsdown.config.ts new file mode 100644 index 00000000..4ae7c504 --- /dev/null +++ b/packages/__tech-preview__/react/tsdown.config.ts @@ -0,0 +1,34 @@ +import { execSync } from 'node:child_process'; +import { defineConfig } from 'tsdown'; +import buildStyles from './build/build-styles.ts'; + +export default defineConfig({ + entry: { + index: './src/index.ts', + store: './src/store/index.ts', + icons: './src/icons/index.ts', + 'skins/frosted': './src/skins/frosted/index.ts', + 'skins/minimal': './src/skins/minimal/index.ts', + }, + platform: 'browser', + format: 'es', + sourcemap: true, + clean: true, + alias: { + '@': new URL('./src', import.meta.url).pathname, + }, + dts: { + oxc: true, + }, + hooks: { + 'build:prepare': async () => { + execSync('pnpm generate:icons', { stdio: 'inherit' }); + }, + 'build:done': async () => { + await buildStyles(); + }, + }, + loader: { + '.svg': 'text', + }, +}); diff --git a/packages/utils/CHANGELOG.md b/packages/__tech-preview__/utils/CHANGELOG.md similarity index 100% rename from packages/utils/CHANGELOG.md rename to packages/__tech-preview__/utils/CHANGELOG.md diff --git a/packages/__tech-preview__/utils/README.md b/packages/__tech-preview__/utils/README.md new file mode 100644 index 00000000..15552df8 --- /dev/null +++ b/packages/__tech-preview__/utils/README.md @@ -0,0 +1,22 @@ +# @videojs/utils + +[![package-badge]][package] + +> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. + +## Community + +If you need help with anything related to Video.js 10, or if you'd like to casually chat with other +members: + +- [Join Discord Server][discord] +- [See GitHub Discussions][gh-discussions] + +## License + +[Apache-2.0](./LICENSE) + +[package]: https://www.npmjs.com/package/@videojs/utils +[package-badge]: https://img.shields.io/npm/v/@videojs/react/utils?label=@videojs/react@utils +[discord]: https://discord.gg/JBqHh485uF +[gh-discussions]: https://github.com/videojs/v10/discussions diff --git a/packages/__tech-preview__/utils/package.json b/packages/__tech-preview__/utils/package.json new file mode 100644 index 00000000..fdb934b4 --- /dev/null +++ b/packages/__tech-preview__/utils/package.json @@ -0,0 +1,47 @@ +{ + "name": "@videojs/utils-preview", + "type": "module", + "version": "0.1.0-preview.10", + "description": "Utility functions and helpers for Video.js", + "license": "Apache-2.0", + "keywords": [ + "media", + "playback", + "engine", + "hls", + "dash", + "streaming", + "utils", + "videojs" + ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + }, + "./dom": { + "types": "./dist/dom.d.ts", + "default": "./dist/dom.js" + } + }, + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsdown", + "build:watch": "tsdown --watch --silent", + "dev": "pnpm run build:watch", + "test": "echo \"No tests yet\"", + "clean": "rm -rf dist" + }, + "devDependencies": { + "tsdown": "^0.15.9", + "typescript": "^5.9.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/utils/src/dom/attributes.ts b/packages/__tech-preview__/utils/src/dom/attributes.ts similarity index 100% rename from packages/utils/src/dom/attributes.ts rename to packages/__tech-preview__/utils/src/dom/attributes.ts diff --git a/packages/utils/src/dom/element.ts b/packages/__tech-preview__/utils/src/dom/element.ts similarity index 100% rename from packages/utils/src/dom/element.ts rename to packages/__tech-preview__/utils/src/dom/element.ts diff --git a/packages/utils/src/dom/event.ts b/packages/__tech-preview__/utils/src/dom/event.ts similarity index 100% rename from packages/utils/src/dom/event.ts rename to packages/__tech-preview__/utils/src/dom/event.ts diff --git a/packages/utils/src/dom/index.ts b/packages/__tech-preview__/utils/src/dom/index.ts similarity index 100% rename from packages/utils/src/dom/index.ts rename to packages/__tech-preview__/utils/src/dom/index.ts diff --git a/packages/utils/src/dom/safe-polygon.ts b/packages/__tech-preview__/utils/src/dom/safe-polygon.ts similarity index 100% rename from packages/utils/src/dom/safe-polygon.ts rename to packages/__tech-preview__/utils/src/dom/safe-polygon.ts diff --git a/packages/utils/src/dom/shadow-dom.ts b/packages/__tech-preview__/utils/src/dom/shadow-dom.ts similarity index 100% rename from packages/utils/src/dom/shadow-dom.ts rename to packages/__tech-preview__/utils/src/dom/shadow-dom.ts diff --git a/packages/utils/src/dom/tsconfig.json b/packages/__tech-preview__/utils/src/dom/tsconfig.json similarity index 100% rename from packages/utils/src/dom/tsconfig.json rename to packages/__tech-preview__/utils/src/dom/tsconfig.json diff --git a/packages/__tech-preview__/utils/src/index.ts b/packages/__tech-preview__/utils/src/index.ts new file mode 100644 index 00000000..c80d0f4b --- /dev/null +++ b/packages/__tech-preview__/utils/src/index.ts @@ -0,0 +1,8 @@ +export * from './shared/console'; +export * from './shared/crypto'; +export * from './shared/math'; +export * from './shared/memoize'; +export * from './shared/state'; +export * from './shared/string'; +export * from './shared/time'; +export * from './shared/unit'; diff --git a/packages/utils/src/shared/console.ts b/packages/__tech-preview__/utils/src/shared/console.ts similarity index 100% rename from packages/utils/src/shared/console.ts rename to packages/__tech-preview__/utils/src/shared/console.ts diff --git a/packages/utils/src/shared/crypto.ts b/packages/__tech-preview__/utils/src/shared/crypto.ts similarity index 100% rename from packages/utils/src/shared/crypto.ts rename to packages/__tech-preview__/utils/src/shared/crypto.ts diff --git a/packages/utils/src/shared/math.ts b/packages/__tech-preview__/utils/src/shared/math.ts similarity index 100% rename from packages/utils/src/shared/math.ts rename to packages/__tech-preview__/utils/src/shared/math.ts diff --git a/packages/utils/src/shared/memoize.ts b/packages/__tech-preview__/utils/src/shared/memoize.ts similarity index 100% rename from packages/utils/src/shared/memoize.ts rename to packages/__tech-preview__/utils/src/shared/memoize.ts diff --git a/packages/utils/src/shared/state.ts b/packages/__tech-preview__/utils/src/shared/state.ts similarity index 100% rename from packages/utils/src/shared/state.ts rename to packages/__tech-preview__/utils/src/shared/state.ts diff --git a/packages/utils/src/shared/string.ts b/packages/__tech-preview__/utils/src/shared/string.ts similarity index 100% rename from packages/utils/src/shared/string.ts rename to packages/__tech-preview__/utils/src/shared/string.ts diff --git a/packages/utils/src/shared/time.ts b/packages/__tech-preview__/utils/src/shared/time.ts similarity index 100% rename from packages/utils/src/shared/time.ts rename to packages/__tech-preview__/utils/src/shared/time.ts diff --git a/packages/utils/src/shared/unit.ts b/packages/__tech-preview__/utils/src/shared/unit.ts similarity index 100% rename from packages/utils/src/shared/unit.ts rename to packages/__tech-preview__/utils/src/shared/unit.ts diff --git a/packages/__tech-preview__/utils/tsconfig.build.json b/packages/__tech-preview__/utils/tsconfig.build.json new file mode 100644 index 00000000..b90fc83e --- /dev/null +++ b/packages/__tech-preview__/utils/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["src"] +} diff --git a/packages/__tech-preview__/utils/tsconfig.json b/packages/__tech-preview__/utils/tsconfig.json new file mode 100644 index 00000000..c7a4846e --- /dev/null +++ b/packages/__tech-preview__/utils/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "references": [{ "path": "./src/dom" }], + "include": ["src"] +} diff --git a/packages/__tech-preview__/utils/tsdown.config.ts b/packages/__tech-preview__/utils/tsdown.config.ts new file mode 100644 index 00000000..6ac667da --- /dev/null +++ b/packages/__tech-preview__/utils/tsdown.config.ts @@ -0,0 +1,18 @@ +import { defineConfig } from 'tsdown'; + +export default defineConfig({ + entry: { + index: './src/index.ts', + dom: './src/dom/index.ts', + }, + platform: 'neutral', + format: 'es', + sourcemap: true, + clean: true, + alias: { + '@': new URL('./src', import.meta.url).pathname, + }, + dts: { + oxc: true, + }, +}); diff --git a/packages/core/README.md b/packages/core/README.md index 259381eb..c8bb5833 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -2,13 +2,13 @@ [![package-badge]][package] -> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. +> **⚠️ Alpha - SUBJECT TO CHANGE** Not recommended for production use. ## Overview `@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. +(DOM, HTML, React, React Native) to create consistent media player experiences. ## Community diff --git a/packages/core/package.json b/packages/core/package.json index a1096a78..b4dad6f9 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,30 +1,19 @@ { "name": "@videojs/core", "type": "module", - "version": "0.1.0-preview.10", + "version": "0.1.0-alpha.1", "description": "Core components and utilities for Video.js", "license": "Apache-2.0", "keywords": [ "core", - "components", "media", "player", - "ui", - "time-range", "videojs" ], "exports": { ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" - }, - "./media": { - "types": "./dist/media.d.ts", - "default": "./dist/media.js" - }, - "./store": { - "types": "./dist/store.d.ts", - "default": "./dist/store.js" } }, "main": "dist/index.js", @@ -41,9 +30,7 @@ "clean": "rm -rf dist" }, "dependencies": { - "@videojs/utils": "workspace:*", - "hls.js": "^1.6.7", - "nanostores": "^1.0.1" + "@videojs/utils": "workspace:*" }, "devDependencies": { "tsdown": "^0.15.9", diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 2709088f..e69de29b 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,4 +0,0 @@ -export { Popover, type PopoverState } from './components/popover'; -export { TimeSlider, type TimeSliderState } from './components/time-slider'; -export { Tooltip, type TooltipState } from './components/tooltip'; -export { VolumeSlider, type VolumeSliderState } from './components/volume-slider'; diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index e7f0c314..b7cbfc88 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -1,8 +1,7 @@ { "extends": "../../tsconfig.base.json", "compilerOptions": { - // This will be removed. - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": ["ES2020"], "baseUrl": ".", "paths": { "@/*": ["src/*"] diff --git a/packages/core/tsdown.config.ts b/packages/core/tsdown.config.ts index a796899a..12194c36 100644 --- a/packages/core/tsdown.config.ts +++ b/packages/core/tsdown.config.ts @@ -3,10 +3,8 @@ import { defineConfig } from 'tsdown'; export default defineConfig({ entry: { index: './src/index.ts', - media: './src/media/index.ts', - store: './src/store/index.ts', }, - platform: 'browser', + platform: 'neutral', format: 'es', sourcemap: true, clean: true, diff --git a/packages/dom/README.md b/packages/dom/README.md new file mode 100644 index 00000000..1a57a238 --- /dev/null +++ b/packages/dom/README.md @@ -0,0 +1,32 @@ +# @videojs/dom + +[![package-badge]][package] + +> **⚠️ Alpha - SUBJECT TO CHANGE** Not recommended for production use. + +## Overview + +Provides foundational tools for working with the DOM including: + +- Attribute builders +- Event handling utilities +- Geometry and positioning helpers +- Component interfaces for data attributes and CSS custom properties +- Shared utilities for HTML and React implementations + +## Community + +If you need help with anything related to Video.js 10, or if you'd like to casually chat with other +members: + +- [Join Discord Server][discord] +- [See GitHub Discussions][gh-discussions] + +## License + +[Apache-2.0](./LICENSE) + +[package]: https://www.npmjs.com/package/@videojs/dom +[package-badge]: https://img.shields.io/npm/v/@videojs/dom/next?label=@videojs/dom@next +[discord]: https://discord.gg/JBqHh485uF +[gh-discussions]: https://github.com/videojs/v10/discussions diff --git a/packages/dom/package.json b/packages/dom/package.json new file mode 100644 index 00000000..7cdeca7c --- /dev/null +++ b/packages/dom/package.json @@ -0,0 +1,43 @@ +{ + "name": "@videojs/dom", + "type": "module", + "version": "0.1.0-alpha.1", + "description": "Shared DOM utilities for Video.js", + "license": "Apache-2.0", + "keywords": [ + "media", + "player", + "dom", + "videojs" + ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + } + }, + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsdown", + "build:watch": "tsdown --watch --silent", + "dev": "pnpm run build:watch", + "test": "echo \"No tests yet\"", + "clean": "rm -rf dist" + }, + "dependencies": { + "@videojs/core": "workspace:*", + "@videojs/utils": "workspace:*" + }, + "devDependencies": { + "tsdown": "^0.15.9", + "typescript": "^5.9.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/dom/src/index.ts b/packages/dom/src/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/dom/tsconfig.build.json b/packages/dom/tsconfig.build.json new file mode 100644 index 00000000..b90fc83e --- /dev/null +++ b/packages/dom/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["src"] +} diff --git a/packages/dom/tsconfig.json b/packages/dom/tsconfig.json new file mode 100644 index 00000000..91cf2438 --- /dev/null +++ b/packages/dom/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src"] +} diff --git a/packages/dom/tsdown.config.ts b/packages/dom/tsdown.config.ts new file mode 100644 index 00000000..2e3eb652 --- /dev/null +++ b/packages/dom/tsdown.config.ts @@ -0,0 +1,17 @@ +import { defineConfig } from 'tsdown'; + +export default defineConfig({ + entry: { + index: 'src/index.ts', + }, + platform: 'browser', + format: 'es', + sourcemap: true, + clean: true, + alias: { + '@': new URL('./src', import.meta.url).pathname, + }, + dts: { + oxc: true, + }, +}); diff --git a/packages/html/README.md b/packages/html/README.md index e0fdf5fe..89fe367b 100644 --- a/packages/html/README.md +++ b/packages/html/README.md @@ -2,11 +2,13 @@ [![package-badge]][package] -> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. +> **⚠️ Alpha - SUBJECT TO CHANGE** Not recommended for production use. ## Overview -`@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. +`@videojs/html` is a comprehensive library for building media players with vanilla JavaScript and +Web Components. It provides a complete set of Custom Elements, state management, controllers, +and utilities for creating feature-rich, accessible video and audio players. ## Community diff --git a/packages/html/package.json b/packages/html/package.json index 0922d7a9..22d1f940 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -1,7 +1,7 @@ { "name": "@videojs/html", "type": "module", - "version": "0.1.0-preview.10", + "version": "0.1.0-alpha.1", "description": "HTML library for building media players", "license": "Apache-2.0", "keywords": [ @@ -16,26 +16,6 @@ ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" - }, - "./store": { - "types": "./dist/store.d.ts", - "default": "./dist/store.js" - }, - "./icons": { - "types": "./dist/icons.d.ts", - "default": "./dist/icons.js" - }, - "./skins/frosted": { - "types": "./dist/skins/frosted.d.ts", - "default": "./dist/skins/frosted.js" - }, - "./skins/minimal": { - "types": "./dist/skins/minimal.d.ts", - "default": "./dist/skins/minimal.js" - }, - "./define/*": { - "types": "./dist/define/*.d.ts", - "default": "./dist/define/*.js" } }, "main": "dist/index.js", @@ -52,9 +32,7 @@ "clean": "rm -rf dist" }, "dependencies": { - "@open-wc/context-protocol": "^0.0.9", - "@videojs/core": "workspace:*", - "@videojs/icons": "workspace:*", + "@videojs/dom": "workspace:*", "@videojs/utils": "workspace:*" }, "devDependencies": { diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts index 672d5b17..e69de29b 100644 --- a/packages/html/src/index.ts +++ b/packages/html/src/index.ts @@ -1,13 +0,0 @@ -export { CurrentTimeDisplayElement } from './elements/current-time-display'; -export { DurationDisplayElement } from './elements/duration-display'; -export { FullscreenButtonElement } from './elements/fullscreen-button'; -export { MuteButtonElement } from './elements/mute-button'; -export { PlayButtonElement } from './elements/play-button'; -export { PopoverElement } from './elements/popover'; -export { PreviewTimeDisplayElement } from './elements/preview-time-display'; -export { TimeSliderElement } from './elements/time-slider'; -export { TooltipElement } from './elements/tooltip'; -export { VolumeSliderElement } from './elements/volume-slider'; -export { MediaContainerElement } from './media/media-container'; -export { MediaSkinElement } from './media/media-skin'; -export { VideoProviderElement } from './media/video-provider'; diff --git a/packages/html/src/types.d.ts b/packages/html/src/types.d.ts index b3340833..e69de29b 100644 --- a/packages/html/src/types.d.ts +++ b/packages/html/src/types.d.ts @@ -1,8 +0,0 @@ -declare module '*.css' { - const content: string; - export default content; -} - -export type Prettify = { - [K in keyof T]: T[K]; -} & {}; diff --git a/packages/html/tsdown.config.ts b/packages/html/tsdown.config.ts index 8f7ca7c8..371e6191 100644 --- a/packages/html/tsdown.config.ts +++ b/packages/html/tsdown.config.ts @@ -1,21 +1,18 @@ -import { readdirSync } from 'node:fs'; import { defineConfig } from 'tsdown'; -const defineDir = new URL('./src/define', import.meta.url).pathname; -const defineFiles = readdirSync(defineDir).filter(file => file.endsWith('.ts')); +// const defineDir = new URL('./src/define', import.meta.url).pathname; +// const defineFiles = readdirSync(defineDir).filter(file => file.endsWith('.ts')); export default defineConfig({ entry: { index: 'src/index.ts', - store: 'src/store/index.ts', - icons: 'src/icons/index.ts', - 'skins/frosted': 'src/skins/frosted/index.ts', - 'skins/minimal': 'src/skins/minimal/index.ts', - ...defineFiles.reduce((entries, file) => { - const name = file.replace(/\.ts$/, ''); - entries[`define/${name}`] = `src/define/${file}`; - return entries; - }, {} as Record), + // 'skins/frosted': 'src/skins/frosted/index.ts', + // 'skins/minimal': 'src/skins/minimal/index.ts', + // ...defineFiles.reduce((entries, file) => { + // const name = file.replace(/\.ts$/, ''); + // entries[`define/${name}`] = `src/define/${file}`; + // return entries; + // }, {} as Record), }, platform: 'browser', format: 'es', @@ -27,8 +24,4 @@ export default defineConfig({ dts: { oxc: true, }, - loader: { - '.svg': 'text', - '.css': 'text', - }, }); diff --git a/packages/icons/README.md b/packages/icons/README.md index 9c9dcf7e..498e8667 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -1,28 +1,5 @@ # @videojs/icons -[![package-badge]][package] +**Note:** This package is currently a placeholder and will be populated closer to Beta release. -> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. - -## Overview - -`@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. - -## Community - -If you need help with anything related to Video.js 10, or if you'd like to casually chat with other -members: - -- [Join Discord Server][discord] -- [See GitHub Discussions][gh-discussions] - -## License - -[Apache-2.0](./LICENSE) - -[package]: https://www.npmjs.com/package/@videojs/icons -[package-badge]: https://img.shields.io/npm/v/@videojs/icons/next?label=@videojs/icons@next -[discord]: https://discord.gg/JBqHh485uF -[gh-discussions]: https://github.com/videojs/v10/discussions +For now, custom icons are bundled directly with skins. diff --git a/packages/icons/package.json b/packages/icons/package.json index e34b03e7..79845322 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,36 +1,10 @@ { "name": "@videojs/icons", "type": "module", - "version": "0.1.0-preview.10", + "version": "0.1.0-alpha.1", "description": "SVG icon library for Video.js", "license": "Apache-2.0", - "keywords": [ - "icons", - "svg", - "media", - "player", - "ui", - "videojs" - ], - "exports": { - ".": { - "types": "./dist/index.d.ts", - "default": "./dist/index.js" - } - }, - "main": "dist/index.js", - "module": "dist/index.js", - "types": "dist/index.d.ts", - "files": [ - "dist" - ], - "scripts": { - "build": "tsdown", - "build:watch": "tsdown --watch --silent", - "dev": "pnpm run build:watch", - "test": "echo \"No tests yet\"", - "clean": "rm -rf dist" - }, + "files": [], "devDependencies": { "tsdown": "^0.15.9", "typescript": "^5.9.3" diff --git a/packages/react/README.md b/packages/react/README.md index 297c45f1..57120f37 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -2,7 +2,7 @@ [![package-badge]][package] -> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. +> **⚠️ Alpha - SUBJECT TO CHANGE** Not recommended for production use. ## Overview diff --git a/packages/react/package.json b/packages/react/package.json index 5653e9c3..36e0d7a9 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@videojs/react", "type": "module", - "version": "0.1.0-preview.10", + "version": "0.1.0-alpha.1", "description": "React library for building media players", "license": "Apache-2.0", "keywords": [ @@ -16,25 +16,7 @@ ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" - }, - "./store": { - "types": "./dist/store.d.ts", - "default": "./dist/store.js" - }, - "./icons": { - "types": "./dist/icons.d.ts", - "default": "./dist/icons.js" - }, - "./skins/frosted": { - "types": "./dist/skins/frosted.d.ts", - "default": "./dist/skins/frosted.js" - }, - "./skins/minimal": { - "types": "./dist/skins/minimal.d.ts", - "default": "./dist/skins/minimal.js" - }, - "./skins/frosted.css": "./dist/skins/frosted.css", - "./skins/minimal.css": "./dist/skins/minimal.css" + } }, "main": "dist/index.js", "module": "dist/index.js", @@ -44,33 +26,21 @@ ], "scripts": { "build": "tsdown", - "build:watch": "tsdown --watch ./src --ignore-watch ./src/icons/generated-icons --silent", + "build:watch": "tsdown --watch ./src", "dev": "pnpm run build:watch", - "format:icons": "echo noop. Need to replace based on eslint vs. prettier decisions!", - "generate:icons": "svgr --config-file svgr.config.js --out-dir src/icons/generated-icons ../icons/assets && pnpm format:icons", "test": "echo \"No tests yet\"", - "clean": "rm -rf dist src/icons/generated-icons" + "clean": "rm -rf dist" }, "peerDependencies": { "react": ">=16.8.0" }, "dependencies": { - "@videojs/core": "workspace:*", - "@videojs/icons": "workspace:*", + "@videojs/dom": "workspace:*", "@videojs/utils": "workspace:*" }, "devDependencies": { - "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0", - "@svgr/cli": "^8.1.0", - "@svgr/core": "^8.1.0", - "@svgr/plugin-jsx": "^8.1.0", - "@tailwindcss/cli": "^4.1.17", - "@types/postcss-prefix-selector": "^1.16.3", "@types/react": "^18.0.0", - "postcss": "^8.4.49", - "postcss-prefix-selector": "^1.16.1", "react": "^18.0.0", - "tailwindcss": "^4.1.17", "tsdown": "^0.15.9", "typescript": "^5.9.3" }, diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index cfa69134..ef4af0a0 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,17 +1 @@ 'use client'; - -export { CurrentTimeDisplay, useCurrentTimeDisplayState } from './components/CurrentTimeDisplay'; -export { DurationDisplay } from './components/DurationDisplay'; -export { FullscreenButton, useFullscreenButtonState } from './components/FullscreenButton'; -export { HlsVideo } from './components/HlsVideo'; -export { MediaContainer, useMediaContainerRef } from './components/MediaContainer'; -export { MuteButton, useMuteButtonState } from './components/MuteButton'; -export { PlayButton, usePlayButtonState } from './components/PlayButton'; -export { Popover } from './components/Popover'; -export { PreviewTimeDisplay } from './components/PreviewTimeDisplay'; -export { TimeSlider, useTimeSliderRootState } from './components/TimeSlider'; -export { Tooltip } from './components/Tooltip'; -export { Video } from './components/Video'; -export { useVolumeSliderRootState, VolumeSlider } from './components/VolumeSlider'; -export * from './skins'; -export * from '@/store'; diff --git a/packages/react/src/types.d.ts b/packages/react/src/types.d.ts index 4fdac591..830a59e9 100644 --- a/packages/react/src/types.d.ts +++ b/packages/react/src/types.d.ts @@ -1,8 +1,3 @@ -declare module '*.module.css' { - const classes: { [key: string]: string }; - export default classes; -} - declare global { namespace React { interface HTMLAttributes { @@ -11,7 +6,3 @@ declare global { } } } - -export type Prettify = { - [K in keyof T]: T[K]; -} & {}; diff --git a/packages/react/tsdown.config.ts b/packages/react/tsdown.config.ts index 4ae7c504..ccbd11d8 100644 --- a/packages/react/tsdown.config.ts +++ b/packages/react/tsdown.config.ts @@ -1,14 +1,10 @@ -import { execSync } from 'node:child_process'; import { defineConfig } from 'tsdown'; -import buildStyles from './build/build-styles.ts'; export default defineConfig({ entry: { index: './src/index.ts', - store: './src/store/index.ts', - icons: './src/icons/index.ts', - 'skins/frosted': './src/skins/frosted/index.ts', - 'skins/minimal': './src/skins/minimal/index.ts', + // 'skins/frosted': './src/skins/frosted/index.ts', + // 'skins/minimal': './src/skins/minimal/index.ts', }, platform: 'browser', format: 'es', @@ -20,15 +16,4 @@ export default defineConfig({ dts: { oxc: true, }, - hooks: { - 'build:prepare': async () => { - execSync('pnpm generate:icons', { stdio: 'inherit' }); - }, - 'build:done': async () => { - await buildStyles(); - }, - }, - loader: { - '.svg': 'text', - }, }); diff --git a/packages/store/README.md b/packages/store/README.md new file mode 100644 index 00000000..a3713d72 --- /dev/null +++ b/packages/store/README.md @@ -0,0 +1,26 @@ +# @videojs/store + +[![package-badge]][package] + +> **⚠️ Alpha - SUBJECT TO CHANGE** Not recommended for production use. + +## Overview + +Coming soon. + +## Community + +If you need help with anything related to Video.js v10, or if you'd like to casually chat with other +members: + +- [Join Discord Server][discord] +- [See GitHub Discussions][gh-discussions] + +## License + +[Apache-2.0](./LICENSE) + +[package]: https://www.npmjs.com/package/@videojs/store +[package-badge]: https://img.shields.io/npm/v/@videojs/store/next?label=@videojs/store@next +[discord]: https://discord.gg/JBqHh485uF +[gh-discussions]: https://github.com/videojs/v10/discussions diff --git a/packages/store/package.json b/packages/store/package.json new file mode 100644 index 00000000..bc63f4fd --- /dev/null +++ b/packages/store/package.json @@ -0,0 +1,40 @@ +{ + "name": "@videojs/store", + "type": "module", + "version": "0.1.0-alpha.1", + "description": "Reactive state management for external systems.", + "license": "Apache-2.0", + "keywords": [ + "store", + "media", + "player", + "videojs", + "reactive" + ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + } + }, + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsdown", + "build:watch": "tsdown --watch --silent", + "dev": "pnpm run build:watch", + "test": "echo \"No tests yet\"", + "clean": "rm -rf dist" + }, + "devDependencies": { + "tsdown": "^0.15.9", + "typescript": "^5.9.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/store/src/index.ts b/packages/store/src/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/store/tsconfig.build.json b/packages/store/tsconfig.build.json new file mode 100644 index 00000000..b90fc83e --- /dev/null +++ b/packages/store/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["src"] +} diff --git a/packages/store/tsconfig.json b/packages/store/tsconfig.json new file mode 100644 index 00000000..b7cbfc88 --- /dev/null +++ b/packages/store/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "lib": ["ES2020"], + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src"] +} diff --git a/packages/store/tsdown.config.ts b/packages/store/tsdown.config.ts new file mode 100644 index 00000000..12194c36 --- /dev/null +++ b/packages/store/tsdown.config.ts @@ -0,0 +1,17 @@ +import { defineConfig } from 'tsdown'; + +export default defineConfig({ + entry: { + index: './src/index.ts', + }, + platform: 'neutral', + format: 'es', + sourcemap: true, + clean: true, + alias: { + '@': new URL('./src', import.meta.url).pathname, + }, + dts: { + oxc: true, + }, +}); diff --git a/packages/utils/README.md b/packages/utils/README.md index 15552df8..ef7ca3b0 100644 --- a/packages/utils/README.md +++ b/packages/utils/README.md @@ -2,7 +2,7 @@ [![package-badge]][package] -> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use. +> **⚠️ Alpha - SUBJECT TO CHANGE** Not recommended for production use. ## Community diff --git a/packages/utils/package.json b/packages/utils/package.json index 02839306..513d2092 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,16 +1,11 @@ { "name": "@videojs/utils", "type": "module", - "version": "0.1.0-preview.10", + "version": "0.1.0-alpha.1", "description": "Utility functions and helpers for Video.js", "license": "Apache-2.0", "keywords": [ "media", - "playback", - "engine", - "hls", - "dash", - "streaming", "utils", "videojs" ], @@ -18,10 +13,6 @@ ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" - }, - "./dom": { - "types": "./dist/dom.d.ts", - "default": "./dist/dom.js" } }, "main": "dist/index.js", diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index c80d0f4b..e69de29b 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -1,8 +0,0 @@ -export * from './shared/console'; -export * from './shared/crypto'; -export * from './shared/math'; -export * from './shared/memoize'; -export * from './shared/state'; -export * from './shared/string'; -export * from './shared/time'; -export * from './shared/unit'; diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json index 4a567e27..5ef82b5e 100644 --- a/packages/utils/tsconfig.json +++ b/packages/utils/tsconfig.json @@ -7,6 +7,5 @@ "@/*": ["src/*"] } }, - "references": [{ "path": "./src/dom" }], "include": ["src"] } diff --git a/packages/utils/tsdown.config.ts b/packages/utils/tsdown.config.ts index 6ac667da..12194c36 100644 --- a/packages/utils/tsdown.config.ts +++ b/packages/utils/tsdown.config.ts @@ -3,7 +3,6 @@ import { defineConfig } from 'tsdown'; export default defineConfig({ entry: { index: './src/index.ts', - dom: './src/dom/index.ts', }, platform: 'neutral', format: 'es', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3cd270de..e5653895 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -86,9 +86,9 @@ importers: examples/html: dependencies: - '@videojs/html': + '@videojs/html-preview': specifier: workspace:* - version: link:../../packages/html + version: link:../../packages/__tech-preview__/html devDependencies: typescript: specifier: ^5.9.3 @@ -121,9 +121,9 @@ importers: '@types/react-dom': specifier: ^19.2.3 version: 19.2.3(@types/react@19.2.7) - '@videojs/react': + '@videojs/react-preview': specifier: workspace:* - version: link:../../packages/react + version: link:../../packages/__tech-preview__/react eslint: specifier: ^9.39.1 version: 9.39.2(jiti@2.6.1) @@ -145,12 +145,12 @@ importers: '@heroicons/react': specifier: ^2.2.0 version: 2.2.0(react@19.2.3) - '@videojs/react': + '@videojs/react-preview': specifier: workspace:* - version: link:../../packages/react - '@videojs/utils': + version: link:../../packages/__tech-preview__/react + '@videojs/utils-preview': specifier: workspace:* - version: link:../../packages/utils + version: link:../../packages/__tech-preview__/utils clsx: specifier: ^2.1.1 version: 2.1.1 @@ -192,9 +192,9 @@ importers: specifier: ^7.2.4 version: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2) - packages/core: + packages/__tech-preview__/core: dependencies: - '@videojs/utils': + '@videojs/utils-preview': specifier: workspace:* version: link:../utils hls.js: @@ -211,18 +211,18 @@ importers: specifier: ^5.9.3 version: 5.9.3 - packages/html: + packages/__tech-preview__/html: dependencies: '@open-wc/context-protocol': specifier: ^0.0.9 version: 0.0.9 - '@videojs/core': + '@videojs/core-preview': specifier: workspace:* version: link:../core - '@videojs/icons': + '@videojs/icons-preview': specifier: workspace:* version: link:../icons - '@videojs/utils': + '@videojs/utils-preview': specifier: workspace:* version: link:../utils devDependencies: @@ -233,7 +233,7 @@ importers: specifier: ^5.9.3 version: 5.9.3 - packages/icons: + packages/__tech-preview__/icons: devDependencies: tsdown: specifier: ^0.15.9 @@ -242,15 +242,15 @@ importers: specifier: ^5.9.3 version: 5.9.3 - packages/react: + packages/__tech-preview__/react: dependencies: - '@videojs/core': + '@videojs/core-preview': specifier: workspace:* version: link:../core - '@videojs/icons': + '@videojs/icons-preview': specifier: workspace:* version: link:../icons - '@videojs/utils': + '@videojs/utils-preview': specifier: workspace:* version: link:../utils devDependencies: @@ -294,6 +294,100 @@ importers: specifier: ^5.9.3 version: 5.9.3 + packages/__tech-preview__/utils: + devDependencies: + tsdown: + specifier: ^0.15.9 + version: 0.15.12(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 + + packages/core: + dependencies: + '@videojs/utils': + specifier: workspace:* + version: link:../utils + devDependencies: + tsdown: + specifier: ^0.15.9 + version: 0.15.12(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 + + packages/dom: + dependencies: + '@videojs/core': + specifier: workspace:* + version: link:../core + '@videojs/utils': + specifier: workspace:* + version: link:../utils + devDependencies: + tsdown: + specifier: ^0.15.9 + version: 0.15.12(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 + + packages/html: + dependencies: + '@videojs/dom': + specifier: workspace:* + version: link:../dom + '@videojs/utils': + specifier: workspace:* + version: link:../utils + devDependencies: + tsdown: + specifier: ^0.15.9 + version: 0.15.12(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 + + packages/icons: + devDependencies: + tsdown: + specifier: ^0.15.9 + version: 0.15.12(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 + + packages/react: + dependencies: + '@videojs/dom': + specifier: workspace:* + version: link:../dom + '@videojs/utils': + specifier: workspace:* + version: link:../utils + devDependencies: + '@types/react': + specifier: ^18.0.0 + version: 18.3.27 + react: + specifier: ^18.0.0 + version: 18.3.1 + tsdown: + specifier: ^0.15.9 + version: 0.15.12(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 + + packages/store: + devDependencies: + tsdown: + specifier: ^0.15.9 + version: 0.15.12(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 + packages/utils: devDependencies: tsdown: @@ -332,12 +426,12 @@ importers: '@tailwindcss/vite': specifier: ^4.1.17 version: 4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)) - '@videojs/html': + '@videojs/html-preview': specifier: workspace:* - version: link:../packages/html - '@videojs/react': + version: link:../packages/__tech-preview__/html + '@videojs/react-preview': specifier: workspace:* - version: link:../packages/react + version: link:../packages/__tech-preview__/react astro: specifier: ^5.14.4 version: 5.16.5(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.2) diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 25802e89..958e5bb8 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,5 +1,6 @@ packages: - 'packages/*' + - 'packages/__tech-preview__/*' - 'examples/*' - site minimumReleaseAge: 1440 diff --git a/site/package.json b/site/package.json index 2585dd9a..3cdc5a0f 100644 --- a/site/package.json +++ b/site/package.json @@ -22,8 +22,8 @@ "@nanostores/react": "^1.0.0", "@pagefind/default-ui": "^1.4.0", "@tailwindcss/vite": "^4.1.17", - "@videojs/html": "workspace:*", - "@videojs/react": "workspace:*", + "@videojs/html-preview": "workspace:*", + "@videojs/react-preview": "workspace:*", "astro": "^5.14.4", "clsx": "^2.1.1", "github-slugger": "^2.0.0", diff --git a/site/src/components/HomePageDemo/Base.tsx b/site/src/components/HomePageDemo/Base.tsx index fa4f04ff..e2fa5d9c 100644 --- a/site/src/components/HomePageDemo/Base.tsx +++ b/site/src/components/HomePageDemo/Base.tsx @@ -19,8 +19,8 @@ function generateReactCode(skin: Skin): string { const skinImport = skin === 'frosted' ? 'frosted' : 'minimal'; return `// npm install @videojs/react@next -import { VideoProvider, ${skinComponent}, Video } from '@videojs/react'; -import '@videojs/react/skins/${skinImport}.css'; +import { VideoProvider, ${skinComponent}, Video } from '@videojs/react-preview'; +import '@videojs/react-preview/skins/${skinImport}.css'; export const VideoPlayer = () => { return ( @@ -35,7 +35,7 @@ export const VideoPlayer = () => { function generateJS(skin: Skin): string { return `// npm install @videojs/html@next -import '@videojs/html/skins/${skin}';`; +import '@videojs/html-preview/skins/${skin}';`; } export default function BaseDemo({ className }: { className?: string }) { diff --git a/site/src/components/home/HeroVideo.tsx b/site/src/components/home/HeroVideo.tsx index e23380a5..d74fcc33 100644 --- a/site/src/components/home/HeroVideo.tsx +++ b/site/src/components/home/HeroVideo.tsx @@ -1,9 +1,9 @@ import { useStore } from '@nanostores/react'; -import { FrostedSkin, HlsVideo, MinimalSkin, VideoProvider } from '@videojs/react'; +import { FrostedSkin, HlsVideo, MinimalSkin, VideoProvider } from '@videojs/react-preview'; import { VJS8_DEMO_VIDEO } from '@/consts'; import { skin } from '@/stores/homePageDemos'; -import '@videojs/react/skins/frosted.css'; -import '@videojs/react/skins/minimal.css'; +import '@videojs/react-preview/skins/frosted.css'; +import '@videojs/react-preview/skins/minimal.css'; export default function HeroVideo({ className, poster }: { className?: string; poster: string }) { const $skin = useStore(skin); diff --git a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx index 664a7acf..73a6f88f 100644 --- a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx +++ b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx @@ -1,6 +1,6 @@ -import { FrostedSkin, Video, VideoProvider } from '@videojs/react'; +import { FrostedSkin, Video, VideoProvider } from '@videojs/react-preview'; import { VJS8_DEMO_VIDEO } from '@/consts'; -import '@videojs/react/skins/frosted.css'; +import '@videojs/react-preview/skins/frosted.css'; /** * Live demo of the FrostedSkin design. diff --git a/site/src/examples/react/FullscreenButton/BasicFullscreenButton.tsx b/site/src/examples/react/FullscreenButton/BasicFullscreenButton.tsx index f4d03e1b..64a0d680 100644 --- a/site/src/examples/react/FullscreenButton/BasicFullscreenButton.tsx +++ b/site/src/examples/react/FullscreenButton/BasicFullscreenButton.tsx @@ -1,5 +1,5 @@ -import { FullscreenButton } from '@videojs/react'; -import { FullscreenEnterIcon, FullscreenExitIcon } from '@videojs/react/icons'; +import { FullscreenButton } from '@videojs/react-preview'; +import { FullscreenEnterIcon, FullscreenExitIcon } from '@videojs/react-preview/icons'; import styles from './FullscreenButton.module.css'; /** diff --git a/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx b/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx index 90a2eee0..1ff5a675 100644 --- a/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx +++ b/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx @@ -1,4 +1,4 @@ -import { MediaContainer, Video, VideoProvider } from '@videojs/react'; +import { MediaContainer, Video, VideoProvider } from '@videojs/react-preview'; import { VJS8_DEMO_VIDEO } from '@/consts'; import { BasicFullscreenButton } from './BasicFullscreenButton'; diff --git a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx index 8e4bd53b..d1d7b016 100644 --- a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx +++ b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx @@ -1,6 +1,6 @@ -import { MinimalSkin, Video, VideoProvider } from '@videojs/react'; +import { MinimalSkin, Video, VideoProvider } from '@videojs/react-preview'; import { VJS8_DEMO_VIDEO } from '@/consts'; -import '@videojs/react/skins/minimal.css'; +import '@videojs/react-preview/skins/minimal.css'; /** * Live demo of the MinimalSkin design. diff --git a/site/src/examples/react/MuteButton/BasicMuteButton.tsx b/site/src/examples/react/MuteButton/BasicMuteButton.tsx index dc77ee74..f3c621e3 100644 --- a/site/src/examples/react/MuteButton/BasicMuteButton.tsx +++ b/site/src/examples/react/MuteButton/BasicMuteButton.tsx @@ -1,5 +1,5 @@ -import { MuteButton } from '@videojs/react'; -import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react/icons'; +import { MuteButton } from '@videojs/react-preview'; +import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react-preview/icons'; import styles from './MuteButton.module.css'; /** diff --git a/site/src/examples/react/MuteButton/MuteButtonDemo.tsx b/site/src/examples/react/MuteButton/MuteButtonDemo.tsx index 49ef4559..63dfb35c 100644 --- a/site/src/examples/react/MuteButton/MuteButtonDemo.tsx +++ b/site/src/examples/react/MuteButton/MuteButtonDemo.tsx @@ -1,4 +1,4 @@ -import { MediaContainer, Video, VideoProvider } from '@videojs/react'; +import { MediaContainer, Video, VideoProvider } from '@videojs/react-preview'; import { VJS8_DEMO_VIDEO } from '@/consts'; import { BasicMuteButton } from './BasicMuteButton'; diff --git a/site/src/examples/react/PlayButton/BasicPlayButton.tsx b/site/src/examples/react/PlayButton/BasicPlayButton.tsx index 45472d1b..56acd1ce 100644 --- a/site/src/examples/react/PlayButton/BasicPlayButton.tsx +++ b/site/src/examples/react/PlayButton/BasicPlayButton.tsx @@ -1,5 +1,5 @@ -import { PlayButton } from '@videojs/react'; -import { PauseIcon, PlayIcon } from '@videojs/react/icons'; +import { PlayButton } from '@videojs/react-preview'; +import { PauseIcon, PlayIcon } from '@videojs/react-preview/icons'; import styles from './PlayButton.module.css'; /** diff --git a/site/src/examples/react/PlayButton/PlayButtonDemo.tsx b/site/src/examples/react/PlayButton/PlayButtonDemo.tsx index 04d4cf2c..1bfb7044 100644 --- a/site/src/examples/react/PlayButton/PlayButtonDemo.tsx +++ b/site/src/examples/react/PlayButton/PlayButtonDemo.tsx @@ -1,4 +1,4 @@ -import { MediaContainer, Video, VideoProvider } from '@videojs/react'; +import { MediaContainer, Video, VideoProvider } from '@videojs/react-preview'; import { VJS8_DEMO_VIDEO } from '@/consts'; import { BasicPlayButton } from './BasicPlayButton'; diff --git a/site/src/examples/react/TimeSlider/BasicTimeSlider.tsx b/site/src/examples/react/TimeSlider/BasicTimeSlider.tsx index 2b36583e..ce78ae6a 100644 --- a/site/src/examples/react/TimeSlider/BasicTimeSlider.tsx +++ b/site/src/examples/react/TimeSlider/BasicTimeSlider.tsx @@ -1,4 +1,4 @@ -import { TimeSlider } from '@videojs/react'; +import { TimeSlider } from '@videojs/react-preview'; import styles from './TimeSlider.module.css'; /** diff --git a/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx b/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx index 04158ef5..2060c858 100644 --- a/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx +++ b/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx @@ -1,4 +1,4 @@ -import { MediaContainer, Video, VideoProvider } from '@videojs/react'; +import { MediaContainer, Video, VideoProvider } from '@videojs/react-preview'; import { VJS8_DEMO_VIDEO } from '@/consts'; import { BasicTimeSlider } from './BasicTimeSlider'; diff --git a/site/src/examples/react/VolumeSlider/BasicVolumeSlider.tsx b/site/src/examples/react/VolumeSlider/BasicVolumeSlider.tsx index 00e50084..22da78ba 100644 --- a/site/src/examples/react/VolumeSlider/BasicVolumeSlider.tsx +++ b/site/src/examples/react/VolumeSlider/BasicVolumeSlider.tsx @@ -1,4 +1,4 @@ -import { VolumeSlider } from '@videojs/react'; +import { VolumeSlider } from '@videojs/react-preview'; import styles from './VolumeSlider.module.css'; /** diff --git a/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx b/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx index efb4695f..02522975 100644 --- a/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx +++ b/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx @@ -1,4 +1,4 @@ -import { MediaContainer, Video, VideoProvider } from '@videojs/react'; +import { MediaContainer, Video, VideoProvider } from '@videojs/react-preview'; import { VJS8_DEMO_VIDEO } from '@/consts'; import { BasicVolumeSlider } from './BasicVolumeSlider'; diff --git a/site/src/utils/ejectCodeGenerator.ts b/site/src/utils/ejectCodeGenerator.ts index d64600a4..7bd2e25e 100644 --- a/site/src/utils/ejectCodeGenerator.ts +++ b/site/src/utils/ejectCodeGenerator.ts @@ -14,7 +14,7 @@ export function generateReactComponent(skin: Skin): string { return `// npm install @videojs/react@next import type { PropsWithChildren } from 'react'; -import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react'; +import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react-preview'; import { FullscreenEnterIcon, FullscreenExitIcon, @@ -23,7 +23,7 @@ import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon, -} from '@videojs/react/icons'; +} from '@videojs/react-preview/icons'; import './frosted.css'; @@ -123,7 +123,7 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS return `// npm install @videojs/react@next import type { PropsWithChildren } from 'react'; -import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react'; +import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react-preview'; import { FullscreenEnterAltIcon, FullscreenExitAltIcon, @@ -132,7 +132,7 @@ import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon, -} from '@videojs/react/icons'; +} from '@videojs/react-preview/icons'; import './minimal.css'; @@ -1899,18 +1899,18 @@ export function generateHTMLJS(skin: Skin): string { return `import './${skin}.css'; // npm install @videojs/html@next -import '@videojs/html/icons'; +import '@videojs/html-preview/icons'; // be sure to import video-provider first for proper context initialization -import '@videojs/html/define/video-provider'; -import '@videojs/html/define/media-container'; -import '@videojs/html/define/media-play-button'; -import '@videojs/html/define/media-mute-button'; -import '@videojs/html/define/media-volume-slider'; -import '@videojs/html/define/media-time-slider'; -import '@videojs/html/define/media-fullscreen-button'; -import '@videojs/html/define/media-duration-display'; -import '@videojs/html/define/media-current-time-display'; -import '@videojs/html/define/media-preview-time-display'; -import '@videojs/html/define/media-popover'; -import '@videojs/html/define/media-tooltip';`; +import '@videojs/html-preview/define/video-provider'; +import '@videojs/html-preview/define/media-container'; +import '@videojs/html-preview/define/media-play-button'; +import '@videojs/html-preview/define/media-mute-button'; +import '@videojs/html-preview/define/media-volume-slider'; +import '@videojs/html-preview/define/media-time-slider'; +import '@videojs/html-preview/define/media-fullscreen-button'; +import '@videojs/html-preview/define/media-duration-display'; +import '@videojs/html-preview/define/media-current-time-display'; +import '@videojs/html-preview/define/media-preview-time-display'; +import '@videojs/html-preview/define/media-popover'; +import '@videojs/html-preview/define/media-tooltip';`; }