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/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.