diff --git a/examples/html-demo/src/main.ts b/examples/html-demo/src/main.ts index c32dcd8d..022fe7a9 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 23a78a28..49aada20 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 4f737bb3..515e5915 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 502e7074..fdb61959 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 bdd2e65e..89eaadba 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 61bb56de..d104c30a 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 61f69887..a1e89e22 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 a827a7de..2296632d 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 095ab505..af271e41 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 aa653a23..00000000 --- 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 00000000..dece3a47 --- /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 65f80b1f..672d5b17 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 885d4d8c..9f13f776 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 f970bc7f..daea0162 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 3bd66f04..66d27447 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 bbf3ebd8..adf56413 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 8b33576a..8d9fb9c9 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 0d7a14bb..9f223308 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 0f2983dc..23e7d8aa 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 cfab9b5c..8db486b0 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 5a5b6807..f4d03e1b 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 07c51506..7fb03877 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 033cd5ef..b140ac36 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 014c342a..dc77ee74 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 93cfbb2f..94fdafae 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 95681240..45472d1b 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 3ffb0c19..69a418fb 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 e71d4c9f..2b36583e 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 aa651d69..251a269b 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 3f2d03a8..00e50084 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 57da1a48..a0e5ede5 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 9325f758..a2a4948f 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';