From 0b52fc790b8cf6e41c6e95590bf331d37ae91498 Mon Sep 17 00:00:00 2001 From: Christian Pillsbury Date: Tue, 4 Nov 2025 07:23:23 -0800 Subject: [PATCH] fix(react, html): rename MediaProvider (and related) to VideoProvider --- examples/html-demo/src/main.ts | 10 +++--- examples/html-eject-frosted/src/main.ts | 4 +-- examples/html-eject-minimal/index.html | 4 +-- examples/html-eject-minimal/src/main.ts | 4 +-- examples/next-demo/app/page.tsx | 10 +++--- examples/react-demo/src/App.tsx | 8 ++--- examples/react-eject-frosted/src/main.tsx | 6 ++-- examples/react-eject-minimal/src/main.tsx | 6 ++-- packages/html/src/define/index.ts | 2 +- packages/html/src/define/media-provider.ts | 4 --- packages/html/src/define/video-provider.ts | 4 +++ packages/html/src/index.ts | 2 +- .../{media-provider.ts => video-provider.ts} | 2 +- packages/html/src/skins/frosted/index.ts | 12 +++---- packages/html/src/skins/minimal/index.ts | 12 +++---- packages/react/src/components/SimpleVideo.tsx | 6 ++-- packages/react/src/components/Video.tsx | 2 +- packages/react/src/store/context.ts | 2 +- packages/react/src/store/index.ts | 4 +-- ...{media-provider.tsx => video-provider.tsx} | 2 +- site/src/components/HomePageDemo/Base.tsx | 10 +++--- site/src/components/home/HeroVideo.tsx | 6 ++-- .../content/docs/concepts/architecture.mdx | 22 ++++++------- site/src/content/docs/concepts/skins.mdx | 24 +++++++------- site/src/content/docs/how-to/installation.mdx | 12 +++---- .../react/FrostedSkin/FrostedSkinDemo.tsx | 6 ++-- .../BasicFullscreenButton.tsx | 2 +- .../FullscreenButton/FullscreenButtonDemo.tsx | 8 ++--- .../react/MinimalSkin/MinimalSkinDemo.tsx | 6 ++-- .../react/MuteButton/BasicMuteButton.tsx | 2 +- .../react/MuteButton/MuteButtonDemo.tsx | 8 ++--- .../react/PlayButton/BasicPlayButton.tsx | 2 +- .../react/PlayButton/PlayButtonDemo.tsx | 10 +++--- .../react/TimeSlider/BasicTimeSlider.tsx | 2 +- .../react/TimeSlider/TimeSliderDemo.tsx | 10 +++--- .../react/VolumeSlider/BasicVolumeSlider.tsx | 2 +- .../react/VolumeSlider/VolumeSliderDemo.tsx | 10 +++--- site/src/utils/ejectCodeGenerator.ts | 32 +++++++++---------- 38 files changed, 140 insertions(+), 140 deletions(-) delete mode 100644 packages/html/src/define/media-provider.ts create mode 100644 packages/html/src/define/video-provider.ts rename packages/html/src/media/{media-provider.ts => video-provider.ts} (87%) rename packages/react/src/store/{media-provider.tsx => video-provider.tsx} (91%) diff --git a/examples/html-demo/src/main.ts b/examples/html-demo/src/main.ts index c32dcd8d8..022fe7a90 100644 --- a/examples/html-demo/src/main.ts +++ b/examples/html-demo/src/main.ts @@ -3,18 +3,18 @@ import '@videojs/html/skins/minimal'; document.body.innerHTML = /* html */ `
- + - - + - + - +
`; diff --git a/examples/html-eject-frosted/src/main.ts b/examples/html-eject-frosted/src/main.ts index 23a78a28e..49aada20f 100644 --- a/examples/html-eject-frosted/src/main.ts +++ b/examples/html-eject-frosted/src/main.ts @@ -1,7 +1,7 @@ import './frosted.css'; import '@videojs/html/icons'; -// be sure to import media-provider first -import '@videojs/html/define/media-provider'; +// be sure to import video-provider first +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'; diff --git a/examples/html-eject-minimal/index.html b/examples/html-eject-minimal/index.html index 4f737bb34..515e5915a 100644 --- a/examples/html-eject-minimal/index.html +++ b/examples/html-eject-minimal/index.html @@ -29,7 +29,7 @@ padding: 1rem; " > - + diff --git a/examples/html-eject-minimal/src/main.ts b/examples/html-eject-minimal/src/main.ts index 502e70740..fdb619592 100644 --- a/examples/html-eject-minimal/src/main.ts +++ b/examples/html-eject-minimal/src/main.ts @@ -1,7 +1,7 @@ import './minimal.css'; import '@videojs/html/icons'; -// be sure to import media-provider first -import '@videojs/html/define/media-provider'; +// be sure to import video-provider first +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'; diff --git a/examples/next-demo/app/page.tsx b/examples/next-demo/app/page.tsx index bdd2e65e8..89eaadba6 100644 --- a/examples/next-demo/app/page.tsx +++ b/examples/next-demo/app/page.tsx @@ -1,4 +1,4 @@ -import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@videojs/react'; +import { FrostedSkin, MinimalSkin, Video, VideoProvider } from '@videojs/react'; import '@videojs/react/skins/frosted.css'; import '@videojs/react/skins/minimal.css'; @@ -6,19 +6,19 @@ export default function Home() { return (

Frosted Skin

- + {/* @ts-expect-error -- types are incorrect */} - +

Minimal Skin

- + {/* @ts-expect-error -- types are incorrect */} - +
); } diff --git a/examples/react-demo/src/App.tsx b/examples/react-demo/src/App.tsx index 61bb56dee..d104c30a2 100644 --- a/examples/react-demo/src/App.tsx +++ b/examples/react-demo/src/App.tsx @@ -1,6 +1,6 @@ import type { ChangeEventHandler } from 'react'; -import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@videojs/react'; +import { FrostedSkin, MinimalSkin, Video, VideoProvider } from '@videojs/react'; import { FullscreenEnterAltIcon, FullscreenExitAltIcon } from '@videojs/react/icons'; import clsx from 'clsx'; @@ -8,7 +8,7 @@ import clsx from 'clsx'; // import MinimalSkin from './skins/toasted/MinimalSkin'; // NOTE: Commented out imports are for testing locally/externally defined skins. -// import { MediaProvider, Video } from '@videojs/react'; +// import { VideoProvider, Video } from '@videojs/react'; import { useCallback, useMemo, useRef, useState } from 'react'; import { useFullscreen } from './hooks/useFullscreen'; import '@videojs/react/skins/frosted.css'; @@ -182,12 +182,12 @@ export default function App(): JSX.Element { )} >
- + {/* @ts-expect-error -- types are incorrect */} - +
diff --git a/examples/react-eject-frosted/src/main.tsx b/examples/react-eject-frosted/src/main.tsx index 61f69887b..a1e89e229 100644 --- a/examples/react-eject-frosted/src/main.tsx +++ b/examples/react-eject-frosted/src/main.tsx @@ -1,4 +1,4 @@ -import { MediaProvider, Video } from '@videojs/react'; +import { Video, VideoProvider } from '@videojs/react'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; @@ -6,7 +6,7 @@ import FrostedSkin from './FrostedSkin'; createRoot(document.getElementById('root')!).render( - + - + , ); diff --git a/examples/react-eject-minimal/src/main.tsx b/examples/react-eject-minimal/src/main.tsx index a827a7dea..2296632de 100644 --- a/examples/react-eject-minimal/src/main.tsx +++ b/examples/react-eject-minimal/src/main.tsx @@ -1,4 +1,4 @@ -import { MediaProvider, Video } from '@videojs/react'; +import { Video, VideoProvider } from '@videojs/react'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; @@ -6,7 +6,7 @@ import MinimalSkin from './MinimalSkin'; createRoot(document.getElementById('root')!).render( - + - + , ); diff --git a/packages/html/src/define/index.ts b/packages/html/src/define/index.ts index 095ab5055..af271e415 100644 --- a/packages/html/src/define/index.ts +++ b/packages/html/src/define/index.ts @@ -1,5 +1,5 @@ import './media-container'; -import './media-provider'; +import './video-provider'; import './media-play-button'; import './media-mute-button'; import './media-volume-slider'; diff --git a/packages/html/src/define/media-provider.ts b/packages/html/src/define/media-provider.ts deleted file mode 100644 index aa653a237..000000000 --- a/packages/html/src/define/media-provider.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { MediaProviderElement } from '@/media/media-provider'; -import { defineCustomElement } from '@/utils/custom-element'; - -defineCustomElement('media-provider', MediaProviderElement); diff --git a/packages/html/src/define/video-provider.ts b/packages/html/src/define/video-provider.ts new file mode 100644 index 000000000..dece3a474 --- /dev/null +++ b/packages/html/src/define/video-provider.ts @@ -0,0 +1,4 @@ +import { VideoProviderElement } from '@/media/video-provider'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('video-provider', VideoProviderElement); diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts index 65f80b1fc..672d5b170 100644 --- a/packages/html/src/index.ts +++ b/packages/html/src/index.ts @@ -9,5 +9,5 @@ export { TimeSliderElement } from './elements/time-slider'; export { TooltipElement } from './elements/tooltip'; export { VolumeSliderElement } from './elements/volume-slider'; export { MediaContainerElement } from './media/media-container'; -export { MediaProviderElement } from './media/media-provider'; export { MediaSkinElement } from './media/media-skin'; +export { VideoProviderElement } from './media/video-provider'; diff --git a/packages/html/src/media/media-provider.ts b/packages/html/src/media/video-provider.ts similarity index 87% rename from packages/html/src/media/media-provider.ts rename to packages/html/src/media/video-provider.ts index 885d4d8ce..9f13f7766 100644 --- a/packages/html/src/media/media-provider.ts +++ b/packages/html/src/media/video-provider.ts @@ -6,7 +6,7 @@ import { createMediaStore } from '@videojs/core/store'; const ProviderHTMLElement: Constructor = ProviderMixin(HTMLElement); -export class MediaProviderElement extends ProviderHTMLElement { +export class VideoProviderElement extends ProviderHTMLElement { contexts = { mediaStore: (): MediaStore => { return createMediaStore(); diff --git a/packages/html/src/skins/frosted/index.ts b/packages/html/src/skins/frosted/index.ts index f970bc7f8..daea0162e 100644 --- a/packages/html/src/skins/frosted/index.ts +++ b/packages/html/src/skins/frosted/index.ts @@ -2,7 +2,7 @@ import { MediaSkinElement } from '@/media/media-skin'; import { defineCustomElement } from '@/utils/custom-element'; import styles from './styles.css'; import '@/define/media-container'; -import '@/define/media-provider'; +import '@/define/video-provider'; import '@/define/media-play-button'; import '@/define/media-mute-button'; import '@/define/media-volume-slider'; @@ -56,7 +56,7 @@ export function getTemplateHTML() { - - - - - - + * * * * - * + * * ``` */ export const SimpleVideo: React.ForwardRefExoticComponent< diff --git a/packages/react/src/components/Video.tsx b/packages/react/src/components/Video.tsx index 3bd66f045..66d27447c 100644 --- a/packages/react/src/components/Video.tsx +++ b/packages/react/src/components/Video.tsx @@ -69,7 +69,7 @@ const DefaultVideoComponent: ElementType< /** * @description This is a "thin wrapper" around the media component whose primary responsibility is to wire up the element - * to the 's MediaStore for the media state. + * to the 's MediaStore for the media state. * @param props - Identical to both a `; } function generateReactCode(skin: Skin): string { @@ -19,16 +19,16 @@ function generateReactCode(skin: Skin): string { const skinImport = skin === 'frosted' ? 'frosted' : 'minimal'; return `// npm install @videojs/react@next -import { MediaProvider, ${skinComponent}, Video } from '@videojs/react'; +import { VideoProvider, ${skinComponent}, Video } from '@videojs/react'; import '@videojs/react/skins/${skinImport}.css'; export const VideoPlayer = () => { return ( - + <${skinComponent}> + ); };`; } diff --git a/site/src/components/home/HeroVideo.tsx b/site/src/components/home/HeroVideo.tsx index bbf3ebd82..adf564130 100644 --- a/site/src/components/home/HeroVideo.tsx +++ b/site/src/components/home/HeroVideo.tsx @@ -1,5 +1,5 @@ import { useStore } from '@nanostores/react'; -import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@videojs/react'; +import { FrostedSkin, MinimalSkin, Video, VideoProvider } from '@videojs/react'; import { VJS8_DEMO_VIDEO } from '@/consts'; import { skin } from '@/stores/homePageDemos'; import '@videojs/react/skins/frosted.css'; @@ -11,7 +11,7 @@ export default function HeroVideo({ className, poster }: { className?: string; p const SkinComponent = $skin === 'frosted' ? FrostedSkin : MinimalSkin; return ( - + - + ); } diff --git a/site/src/content/docs/concepts/architecture.mdx b/site/src/content/docs/concepts/architecture.mdx index 8b33576ab..8d9fb9c92 100644 --- a/site/src/content/docs/concepts/architecture.mdx +++ b/site/src/content/docs/concepts/architecture.mdx @@ -14,24 +14,24 @@ Video.js v10 is built around a three-tier architecture that separates concerns a ### 1. State Management -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. -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. ```tsx - + {/* All components inside automatically connect to state */} - + ``` ```html - + - + ``` @@ -74,19 +74,19 @@ Here's a complete example showing all three tiers: ```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 - + {/* Tier 2: User Interface (Skin with components) */} {/* Tier 3: Media Renderer */} - + ); } ``` @@ -102,13 +102,13 @@ function Player() { ```html - + - + ``` diff --git a/site/src/content/docs/concepts/skins.mdx b/site/src/content/docs/concepts/skins.mdx index 0d7a14bb1..9f2233081 100644 --- a/site/src/content/docs/concepts/skins.mdx +++ b/site/src/content/docs/concepts/skins.mdx @@ -32,23 +32,23 @@ A modern, glassy design with backdrop blur effects and polished interactions. ```tsx -import { MediaProvider, FrostedSkin, Video } from '@videojs/react'; +import { VideoProvider, FrostedSkin, Video } from '@videojs/react'; import '@videojs/react/skins/frosted.css'; - + - + ``` ```html - + - + ``` @@ -62,23 +62,23 @@ A clean, straightforward design that focuses on simplicity and clarity. ```tsx -import { MediaProvider, MinimalSkin, Video } from '@videojs/react'; +import { VideoProvider, MinimalSkin, Video } from '@videojs/react'; import '@videojs/react/skins/minimal.css'; - + - + ``` ```html - + - + ``` @@ -134,7 +134,7 @@ export function CustomSkin({ children, className }) { ```html - +
@@ -144,7 +144,7 @@ export function CustomSkin({ children, className }) {
- + ``` diff --git a/site/src/content/docs/how-to/installation.mdx b/site/src/content/docs/how-to/installation.mdx index 0f2983dc4..23e7d8aae 100644 --- a/site/src/content/docs/how-to/installation.mdx +++ b/site/src/content/docs/how-to/installation.mdx @@ -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 page. @@ -78,12 +78,12 @@ More renderers for formats like DASH, and services like YouTube and Vimeo are pl ```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 ( - + - + ); } ``` @@ -101,7 +101,7 @@ export default function App() { import '@videojs/html/skins/frosted'; document.body.innerHTML = ` - + - + `; ``` diff --git a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx index cfab9b5c8..8db486b0e 100644 --- a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx +++ b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx @@ -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 ( - + - + ); } diff --git a/site/src/examples/react/FullscreenButton/BasicFullscreenButton.tsx b/site/src/examples/react/FullscreenButton/BasicFullscreenButton.tsx index 5a5b68078..f4d03e1b0 100644 --- a/site/src/examples/react/FullscreenButton/BasicFullscreenButton.tsx +++ b/site/src/examples/react/FullscreenButton/BasicFullscreenButton.tsx @@ -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() { diff --git a/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx b/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx index 07c51506b..7fb03877c 100644 --- a/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx +++ b/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx @@ -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 ( - + - + ); } diff --git a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx index 033cd5ef8..b140ac360 100644 --- a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx +++ b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx @@ -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 ( - + - + ); } diff --git a/site/src/examples/react/MuteButton/BasicMuteButton.tsx b/site/src/examples/react/MuteButton/BasicMuteButton.tsx index 014c342aa..dc77ee74f 100644 --- a/site/src/examples/react/MuteButton/BasicMuteButton.tsx +++ b/site/src/examples/react/MuteButton/BasicMuteButton.tsx @@ -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() { diff --git a/site/src/examples/react/MuteButton/MuteButtonDemo.tsx b/site/src/examples/react/MuteButton/MuteButtonDemo.tsx index 93cfbb2f9..94fdafaef 100644 --- a/site/src/examples/react/MuteButton/MuteButtonDemo.tsx +++ b/site/src/examples/react/MuteButton/MuteButtonDemo.tsx @@ -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 ( - + - + ); } diff --git a/site/src/examples/react/PlayButton/BasicPlayButton.tsx b/site/src/examples/react/PlayButton/BasicPlayButton.tsx index 956812401..45472d1bb 100644 --- a/site/src/examples/react/PlayButton/BasicPlayButton.tsx +++ b/site/src/examples/react/PlayButton/BasicPlayButton.tsx @@ -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() { diff --git a/site/src/examples/react/PlayButton/PlayButtonDemo.tsx b/site/src/examples/react/PlayButton/PlayButtonDemo.tsx index 3ffb0c190..69a418fbc 100644 --- a/site/src/examples/react/PlayButton/PlayButtonDemo.tsx +++ b/site/src/examples/react/PlayButton/PlayButtonDemo.tsx @@ -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 ( - + - + ); } diff --git a/site/src/examples/react/TimeSlider/BasicTimeSlider.tsx b/site/src/examples/react/TimeSlider/BasicTimeSlider.tsx index e71d4c9f2..2b36583e0 100644 --- a/site/src/examples/react/TimeSlider/BasicTimeSlider.tsx +++ b/site/src/examples/react/TimeSlider/BasicTimeSlider.tsx @@ -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() { diff --git a/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx b/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx index aa651d69b..251a269bc 100644 --- a/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx +++ b/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx @@ -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 ( - + - + ); } diff --git a/site/src/examples/react/VolumeSlider/BasicVolumeSlider.tsx b/site/src/examples/react/VolumeSlider/BasicVolumeSlider.tsx index 3f2d03a8d..00e500844 100644 --- a/site/src/examples/react/VolumeSlider/BasicVolumeSlider.tsx +++ b/site/src/examples/react/VolumeSlider/BasicVolumeSlider.tsx @@ -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() { diff --git a/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx b/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx index 57da1a489..a0e5ede50 100644 --- a/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx +++ b/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx @@ -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 ( - + - + ); } diff --git a/site/src/utils/ejectCodeGenerator.ts b/site/src/utils/ejectCodeGenerator.ts index 9325f758b..a2a4948f8 100644 --- a/site/src/utils/ejectCodeGenerator.ts +++ b/site/src/utils/ejectCodeGenerator.ts @@ -973,7 +973,7 @@ export function generateReactCSS(skin: Skin): string { */ export function generateHTMLMarkup(skin: Skin): string { if (skin === 'frosted') { - return ` + return ` -`; +`; } else { - return ` + return ` -`; +`; } } @@ -1916,8 +1916,8 @@ export function generateHTMLJS(skin: Skin): string { // npm install @videojs/html@next import '@videojs/html/icons'; -// be sure to import media-provider first -import '@videojs/html/define/media-provider'; +// be sure to import video-provider first +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';