zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update npm install paths (#379)

Browse Source
This commit is contained in:
Darius Cepulis
2026-02-02 09:53:10 -06:00
committed by GitHub
parent 82511745d8
commit bfaf93fda9
21 changed files with 276 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/HomePageDemo/Base.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ function generateReactCode(skin: Skin): string {
const skinComponent = skin === 'frosted' ? 'FrostedSkin' : 'MinimalSkin';
const skinImport = skin === 'frosted' ? 'frosted' : 'minimal';
return `// npm install @videojs/react@next
return `// npm install @videojs/react-preview
import { VideoProvider, ${skinComponent}, Video } from '@videojs/react-preview';
import '@videojs/react-preview/skins/${skinImport}.css';
@@ -34,7 +34,7 @@ export const VideoPlayer = () => {
}
function generateJS(skin: Skin): string {
return `// npm install @videojs/html@next
return `// npm install @videojs/html-preview
import '@videojs/html-preview/skins/${skin}';`;
}
site/src/content/docs/concepts/architecture.mdx
+4 -4
View File
@@ -74,8 +74,8 @@ Here's a complete example showing all three tiers:
<FrameworkCase frameworks={["react"]}>
```tsx
import { VideoProvider, FrostedSkin, Video } from '@videojs/react';
import '@videojs/react/skins/frosted.css';
import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
import '@videojs/react-preview/skins/frosted.css';
function Player() {
return (
@@ -115,9 +115,9 @@ function Player() {
<TabsPanel client:visible value="javascript">
```ts
import '@videojs/html/skins/frosted';
import '@videojs/html-preview/skins/frosted';
```
</TabsPanel>
</TabsRoot>
</FrameworkCase>
</FrameworkCase>
site/src/content/docs/concepts/skins.mdx
+6 -6
View File
@@ -32,8 +32,8 @@ A modern, glassy design with backdrop blur effects and polished interactions.
<FrameworkCase frameworks={["react"]}>
```tsx
import { VideoProvider, FrostedSkin, Video } from '@videojs/react';
import '@videojs/react/skins/frosted.css';
import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
import '@videojs/react-preview/skins/frosted.css';
<VideoProvider>
<FrostedSkin>
@@ -62,8 +62,8 @@ A clean, straightforward design that focuses on simplicity and clarity.
<FrameworkCase frameworks={["react"]}>
```tsx
import { VideoProvider, MinimalSkin, Video } from '@videojs/react';
import '@videojs/react/skins/minimal.css';
import { VideoProvider, MinimalSkin, Video } from '@videojs/react-preview';
import '@videojs/react-preview/skins/minimal.css';
<VideoProvider>
<MinimalSkin>
@@ -111,7 +111,7 @@ A skin is simply a component that:
<FrameworkCase frameworks={["react"]}>
```tsx
import { MediaContainer, PlayButton, TimeSlider } from '@videojs/react';
import { MediaContainer, PlayButton, TimeSlider } from '@videojs/react-preview';
export function CustomSkin({ children, className }) {
return (
@@ -153,4 +153,4 @@ Read more about components <DocsLink slug="concepts/ui-components">in the compon
## Coming Soon
- More built-in skins for different use cases
- CLI tool for ejecting and customizing skins
- CLI tool for ejecting and customizing skins
site/src/content/docs/how-to/installation.mdx
+12 -11
View File
@@ -3,6 +3,7 @@ title: Installation
description: Get started with Video.js v10 by choosing your framework, styles, skin, and media renderer
---
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import DocsLink from '@/components/docs/DocsLink.astro';
@@ -24,16 +25,16 @@ Video.js v10 supports both React and vanilla JavaScript/HTML through Web Compone
First, select your preferred framework in the framework selector at the top of the <span class="hidden lg:inline">sidebar</span><span class="lg:hidden">page</span>.
Then, install the appropriate package, taking care to use the `@next` dist.
Then, install the package:
<FrameworkCase frameworks={["react"]}>
```bash
npm install @videojs/react@next
npm install @videojs/react-preview
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```bash
npm install @videojs/html@next
npm install @videojs/html-preview
```
</FrameworkCase>
@@ -50,16 +51,16 @@ Currently, Video.js v10 uses CSS for styling these skins. More styling approache
<FrameworkCase frameworks={["react"]}>
```tsx
import '@videojs/react/skins/frosted.css';
import '@videojs/react-preview/skins/frosted.css';
// or
import '@videojs/react/skins/minimal.css';
import '@videojs/react-preview/skins/minimal.css';
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```ts
import '@videojs/html/skins/frosted';
import '@videojs/html-preview/skins/frosted';
// or
import '@videojs/html/skins/minimal';
import '@videojs/html-preview/skins/minimal';
```
</FrameworkCase>
@@ -78,8 +79,8 @@ More renderers for formats like DASH, and services like YouTube and Vimeo are pl
<FrameworkCase frameworks={["react"]}>
```tsx
import { VideoProvider, FrostedSkin, Video } from '@videojs/react';
import '@videojs/react/skins/frosted.css';
import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
import '@videojs/react-preview/skins/frosted.css';
export default function App() {
return (
@@ -98,7 +99,7 @@ export default function App() {
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```ts
import '@videojs/html/skins/frosted';
import '@videojs/html-preview/skins/frosted';
document.body.innerHTML = `
<video-provider>
@@ -115,4 +116,4 @@ document.body.innerHTML = `
```
</FrameworkCase>
That's it! You now have a fully functional Video.js player. Go forth and play.
That's it! You now have a fully functional Video.js player. Go forth and play.
site/src/examples/html/fullscreen-button/fullscreen-button.js
+2 -2
View File
@@ -1,5 +1,5 @@
import '@videojs/html/define/media-fullscreen-button';
import '@videojs/html/icons';
import "@videojs/html-preview/define/media-fullscreen-button";
import "@videojs/html-preview/icons";
// The web components will automatically register themselves
// No additional setup needed
site/src/examples/html/mute-button/mute-button.js
+2 -2
View File
@@ -1,5 +1,5 @@
import '@videojs/html/define/media-mute-button';
import '@videojs/html/icons';
import "@videojs/html-preview/define/media-mute-button";
import "@videojs/html-preview/icons";
// The web components will automatically register themselves
// No additional setup needed
site/src/examples/html/play-button/play-button.js
+2 -2
View File
@@ -1,5 +1,5 @@
import '@videojs/html/define/media-play-button';
import '@videojs/html/icons';
import "@videojs/html-preview/define/media-play-button";
import "@videojs/html-preview/icons";
// The web components will automatically register themselves
// No additional setup needed
site/src/utils/ejectCodeGenerator.ts
+3 -3
View File
@@ -11,7 +11,7 @@ type Skin = 'frosted' | 'minimal';
*/
export function generateReactComponent(skin: Skin): string {
if (skin === 'frosted') {
return `// npm install @videojs/react@next
return `// npm install @videojs/react-preview
import type { PropsWithChildren } from 'react';
import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react-preview';
@@ -120,7 +120,7 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
);
}`;
} else {
return `// npm install @videojs/react@next
return `// npm install @videojs/react-preview
import type { PropsWithChildren } from 'react';
import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react-preview';
@@ -1898,7 +1898,7 @@ media-tooltip {
export function generateHTMLJS(skin: Skin): string {
return `import './${skin}.css';
// npm install @videojs/html@next
// npm install @videojs/html-preview
import '@videojs/html-preview/icons';
// be sure to import video-provider first for proper context initialization
import '@videojs/html-preview/define/video-provider';