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/examples/react/FrostedSkin/FrostedSkinDemo.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { FrostedSkin, MediaProvider, Video } from '@videojs/react';
import { FrostedSkin, Video, VideoProvider } from '@videojs/react';
import { VJS8_DEMO_VIDEO } from '@/consts';
import '@videojs/react/skins/frosted.css';
@@ -14,7 +14,7 @@ import '@videojs/react/skins/frosted.css';
*/
export function FrostedSkinDemo() {
return (
<MediaProvider>
<VideoProvider>
<FrostedSkin className="w-full aspect-video rounded-3xl">
<Video
src={VJS8_DEMO_VIDEO.hls}
@@ -22,6 +22,6 @@ export function FrostedSkinDemo() {
playsInline
/>
</FrostedSkin>
</MediaProvider>
</VideoProvider>
);
}
site/src/examples/react/FullscreenButton/BasicFullscreenButton.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import styles from './FullscreenButton.module.css';
* - Data attribute state selectors
* - Enter/exit fullscreen functionality
*
* Note: This component must be used within a MediaProvider context.
* Note: This component must be used within a VideoProvider context.
* See the usage example in the documentation.
*/
export function BasicFullscreenButton() {
site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx
+4 -4
View File
@@ -1,15 +1,15 @@
import { MediaContainer, MediaProvider, Video } from '@videojs/react';
import { MediaContainer, Video, VideoProvider } from '@videojs/react';
import { VJS8_DEMO_VIDEO } from '@/consts';
import { BasicFullscreenButton } from './BasicFullscreenButton';
/**
* Demo showing proper MediaProvider usage with FullscreenButton.
* Demo showing proper VideoProvider usage with FullscreenButton.
* The FullscreenButton automatically toggles fullscreen mode for
* the containing MediaContainer.
*/
export function FullscreenButtonDemo() {
return (
<MediaProvider>
<VideoProvider>
<MediaContainer style={{ position: 'relative', zIndex: 10 }}>
<Video
src={VJS8_DEMO_VIDEO.hls}
@@ -20,6 +20,6 @@ export function FullscreenButtonDemo() {
<BasicFullscreenButton />
</div>
</MediaContainer>
</MediaProvider>
</VideoProvider>
);
}
site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { MediaProvider, MinimalSkin, Video } from '@videojs/react';
import { MinimalSkin, Video, VideoProvider } from '@videojs/react';
import { VJS8_DEMO_VIDEO } from '@/consts';
import '@videojs/react/skins/minimal.css';
@@ -13,7 +13,7 @@ import '@videojs/react/skins/minimal.css';
*/
export function MinimalSkinDemo() {
return (
<MediaProvider>
<VideoProvider>
<MinimalSkin className="w-full aspect-video">
<Video
src={VJS8_DEMO_VIDEO.hls}
@@ -21,6 +21,6 @@ export function MinimalSkinDemo() {
playsInline
/>
</MinimalSkin>
</MediaProvider>
</VideoProvider>
);
}
site/src/examples/react/MuteButton/BasicMuteButton.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import styles from './MuteButton.module.css';
* - Volume level data attributes
* - Smooth icon transitions
*
* Note: This component must be used within a MediaProvider context.
* Note: This component must be used within a VideoProvider context.
* See the usage example in the documentation.
*/
export function BasicMuteButton() {
site/src/examples/react/MuteButton/MuteButtonDemo.tsx
+4 -4
View File
@@ -1,15 +1,15 @@
import { MediaContainer, MediaProvider, Video } from '@videojs/react';
import { MediaContainer, Video, VideoProvider } from '@videojs/react';
import { VJS8_DEMO_VIDEO } from '@/consts';
import { BasicMuteButton } from './BasicMuteButton';
/**
* Demo showing proper MediaProvider usage with MuteButton.
* Demo showing proper VideoProvider usage with MuteButton.
* The MuteButton automatically reflects the current volume state
* and toggles mute/unmute on click.
*/
export function MuteButtonDemo() {
return (
<MediaProvider>
<VideoProvider>
<MediaContainer style={{ position: 'relative', zIndex: 10 }}>
<Video
src={VJS8_DEMO_VIDEO.hls}
@@ -20,6 +20,6 @@ export function MuteButtonDemo() {
<BasicMuteButton />
</div>
</MediaContainer>
</MediaProvider>
</VideoProvider>
);
}
site/src/examples/react/PlayButton/BasicPlayButton.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import styles from './PlayButton.module.css';
* - CSS Modules for scoped styling
* - Data attribute selectors for state-based styling
*
* Note: This component must be used within a MediaProvider context.
* Note: This component must be used within a VideoProvider context.
* See the usage example in the documentation.
*/
export function BasicPlayButton() {
site/src/examples/react/PlayButton/PlayButtonDemo.tsx
+5 -5
View File
@@ -1,15 +1,15 @@
import { MediaContainer, MediaProvider, Video } from '@videojs/react';
import { MediaContainer, Video, VideoProvider } from '@videojs/react';
import { VJS8_DEMO_VIDEO } from '@/consts';
import { BasicPlayButton } from './BasicPlayButton';
/**
* Demo showing proper MediaProvider usage with PlayButton.
* The MediaProvider wraps the entire media experience and provides
* Demo showing proper VideoProvider usage with PlayButton.
* The VideoProvider wraps the entire media experience and provides
* the necessary context for all media components.
*/
export function PlayButtonDemo() {
return (
<MediaProvider>
<VideoProvider>
<MediaContainer style={{ position: 'relative', zIndex: 10 }}>
<Video
src={VJS8_DEMO_VIDEO.hls}
@@ -20,6 +20,6 @@ export function PlayButtonDemo() {
<BasicPlayButton />
</div>
</MediaContainer>
</MediaProvider>
</VideoProvider>
);
}
site/src/examples/react/TimeSlider/BasicTimeSlider.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import styles from './TimeSlider.module.css';
* - CSS Modules for scoped styling
* - Data attribute selectors for state-based styling
*
* Note: This component must be used within a MediaProvider context.
* Note: This component must be used within a VideoProvider context.
* See the usage example in the documentation.
*/
export function BasicTimeSlider() {
site/src/examples/react/TimeSlider/TimeSliderDemo.tsx
+5 -5
View File
@@ -1,15 +1,15 @@
import { MediaContainer, MediaProvider, Video } from '@videojs/react';
import { MediaContainer, Video, VideoProvider } from '@videojs/react';
import { VJS8_DEMO_VIDEO } from '@/consts';
import { BasicTimeSlider } from './BasicTimeSlider';
/**
* Demo showing proper MediaProvider usage with TimeSlider.
* The MediaProvider wraps the entire media experience and provides
* Demo showing proper VideoProvider usage with TimeSlider.
* The VideoProvider wraps the entire media experience and provides
* the necessary context for all media components.
*/
export function TimeSliderDemo() {
return (
<MediaProvider>
<VideoProvider>
<MediaContainer style={{ position: 'relative', zIndex: 10 }}>
<Video
src={VJS8_DEMO_VIDEO.hls}
@@ -20,6 +20,6 @@ export function TimeSliderDemo() {
<BasicTimeSlider />
</div>
</MediaContainer>
</MediaProvider>
</VideoProvider>
);
}
site/src/examples/react/VolumeSlider/BasicVolumeSlider.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import styles from './VolumeSlider.module.css';
* - CSS Modules for scoped styling
* - Data attribute selectors for state-based styling
*
* Note: This component must be used within a MediaProvider context.
* Note: This component must be used within a VideoProvider context.
* See the usage example in the documentation.
*/
export function BasicVolumeSlider() {
site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx
+5 -5
View File
@@ -1,15 +1,15 @@
import { MediaContainer, MediaProvider, Video } from '@videojs/react';
import { MediaContainer, Video, VideoProvider } from '@videojs/react';
import { VJS8_DEMO_VIDEO } from '@/consts';
import { BasicVolumeSlider } from './BasicVolumeSlider';
/**
* Demo showing proper MediaProvider usage with VolumeSlider.
* The MediaProvider wraps the entire media experience and provides
* Demo showing proper VideoProvider usage with VolumeSlider.
* The VideoProvider wraps the entire media experience and provides
* the necessary context for all media components.
*/
export function VolumeSliderDemo() {
return (
<MediaProvider>
<VideoProvider>
<MediaContainer style={{ position: 'relative', zIndex: 10 }}>
<Video
src={VJS8_DEMO_VIDEO.hls}
@@ -20,6 +20,6 @@ export function VolumeSliderDemo() {
<BasicVolumeSlider />
</div>
</MediaContainer>
</MediaProvider>
</VideoProvider>
);
}