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(react, html): rename MediaProvider (and related) to VideoProvider (#159)

Browse Source
This commit is contained in:
Christian Pillsbury
2025-11-04 07:34:10 -08:00
committed by GitHub
parent 16cfde138d
commit f28557359c
38 changed files with 140 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/concepts/architecture.mdx
+11 -11
View File
@@ -14,24 +14,24 @@ Video.js v10 is built around a three-tier architecture that separates concerns a
### 1. State Management
<FrameworkCase frameworks={["react"]}>
State is handled by `MediaProvider`, which creates a central store that all components can access. When you wrap your player in a `MediaProvider`, components automatically connect to the state.
State is handled by `VideoProvider`, which creates a central store that all components can access. When you wrap your player in a `VideoProvider`, components automatically connect to the state.
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
State is handled by `media-provider`, which creates a central store that all components can access. When you wrap your player in a `media-provider`, components automatically connect to the state.
State is handled by `video-provider`, which creates a central store that all components can access. When you wrap your player in a `video-provider`, components automatically connect to the state.
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
```tsx
<MediaProvider>
<VideoProvider>
{/* All components inside automatically connect to state */}
</MediaProvider>
</VideoProvider>
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```html
<media-provider>
<video-provider>
<!-- All components inside automatically connect to state -->
</media-provider>
</video-provider>
```
</FrameworkCase>
@@ -74,19 +74,19 @@ Here's a complete example showing all three tiers:
<FrameworkCase frameworks={["react"]}>
```tsx
import { MediaProvider, FrostedSkin, Video } from '@videojs/react';
import { VideoProvider, FrostedSkin, Video } from '@videojs/react';
import '@videojs/react/skins/frosted.css';
function Player() {
return (
// Tier 1: State Management
<MediaProvider>
<VideoProvider>
{/* Tier 2: User Interface (Skin with components) */}
<FrostedSkin>
{/* Tier 3: Media Renderer */}
<Video src="video.mp4" />
</FrostedSkin>
</MediaProvider>
</VideoProvider>
);
}
```
@@ -102,13 +102,13 @@ function Player() {
```html
<!-- Tier 1: State Management -->
<media-provider>
<video-provider>
<!-- Tier 2: User Interface (Skin with components) -->
<media-skin-frosted>
<!-- Tier 3: Media Renderer -->
<video slot="media" src="video.mp4"></video>
</media-skin-frosted>
</media-provider>
</video-provider>
```
</TabsPanel>
site/src/content/docs/concepts/skins.mdx
+12 -12
View File
@@ -32,23 +32,23 @@ A modern, glassy design with backdrop blur effects and polished interactions.
<FrameworkCase frameworks={["react"]}>
```tsx
import { MediaProvider, FrostedSkin, Video } from '@videojs/react';
import { VideoProvider, FrostedSkin, Video } from '@videojs/react';
import '@videojs/react/skins/frosted.css';
<MediaProvider>
<VideoProvider>
<FrostedSkin>
<Video src="video.mp4" />
</FrostedSkin>
</MediaProvider>
</VideoProvider>
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```html
<media-provider>
<video-provider>
<media-skin-frosted>
<video slot="media" src="video.mp4"></video>
</media-skin-frosted>
</media-provider>
</video-provider>
```
</FrameworkCase>
@@ -62,23 +62,23 @@ A clean, straightforward design that focuses on simplicity and clarity.
<FrameworkCase frameworks={["react"]}>
```tsx
import { MediaProvider, MinimalSkin, Video } from '@videojs/react';
import { VideoProvider, MinimalSkin, Video } from '@videojs/react';
import '@videojs/react/skins/minimal.css';
<MediaProvider>
<VideoProvider>
<MinimalSkin>
<Video src="video.mp4" />
</MinimalSkin>
</MediaProvider>
</VideoProvider>
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```html
<media-provider>
<video-provider>
<media-skin-minimal>
<video slot="media" src="video.mp4"></video>
</media-skin-minimal>
</media-provider>
</video-provider>
```
</FrameworkCase>
@@ -134,7 +134,7 @@ export function CustomSkin({ children, className }) {
<FrameworkCase frameworks={["html"]}>
```html
<media-provider>
<video-provider>
<media-container class="custom-skin">
<slot></slot>
<div class="controls">
@@ -144,7 +144,7 @@ export function CustomSkin({ children, className }) {
</media-time-slider>
</div>
</media-container>
</media-provider>
</video-provider>
```
</FrameworkCase>
site/src/content/docs/how-to/installation.mdx
+6 -6
View File
@@ -20,7 +20,7 @@ Welcome to Video.js v10! This guide will help you get up and running. In it, you
## 1. Pick Your Framework
Video.js v10 supports both React and vanilla JavaScript/HTML through Web Components.
Video.js v10 supports both React and vanilla JavaScript/HTML through Web Components.
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>.
@@ -78,12 +78,12 @@ More renderers for formats like DASH, and services like YouTube and Vimeo are pl
<FrameworkCase frameworks={["react"]}>
```tsx
import { MediaProvider, FrostedSkin, Video } from '@videojs/react';
import { VideoProvider, FrostedSkin, Video } from '@videojs/react';
import '@videojs/react/skins/frosted.css';
export default function App() {
return (
<MediaProvider>
<VideoProvider>
<FrostedSkin>
<Video
src="https://stream.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA.m3u8"
@@ -91,7 +91,7 @@ export default function App() {
playsInline
/>
</FrostedSkin>
</MediaProvider>
</VideoProvider>
);
}
```
@@ -101,7 +101,7 @@ export default function App() {
import '@videojs/html/skins/frosted';
document.body.innerHTML = `
<media-provider>
<video-provider>
<media-skin-frosted>
<video
slot="media"
@@ -110,7 +110,7 @@ document.body.innerHTML = `
playsinline
></video>
</media-skin-frosted>
</media-provider>
</video-provider>
`;
```
</FrameworkCase>