fix(react, html): rename MediaProvider (and related) to VideoProvider (#159)

examples/html-demo/src/main.ts

@@ -3,18 +3,18 @@ import '@videojs/html/skins/minimal';
 
 document.body.innerHTML = /* html */ `
   <div style="display: flex; flex-direction: column; justify-content: center; min-height: 100vh; gap: 2rem; padding: 1rem; ">
-    <media-provider>
+    <video-provider>
       <media-skin-frosted style="border-radius: 2rem; width: 100%; max-width: 960px; margin: 2rem auto; aspect-ratio: 16/9">
-        <video 
+        <video
           slot="media"
           src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
           poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
           playsinline
         ></video>
       </media-skin-frosted>
-    </media-provider>
+    </video-provider>
 
-    <media-provider>
+    <video-provider>
       <media-skin-minimal style="border-radius: 0.75rem; width: 100%; max-width: 960px; margin: 2rem auto; aspect-ratio: 16/9">
         <video
           slot="media"
@@ -23,6 +23,6 @@ document.body.innerHTML = /* html */ `
           playsinline
         ></video>
       </media-skin-minimal>
-    </media-provider>
+    </video-provider>
   </div>
 `;

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';

examples/html-eject-minimal/index.html

@@ -29,7 +29,7 @@
         padding: 1rem;
       "
     >
-      <media-provider style="display: block">
+      <video-provider style="display: block">
         <media-container
           style="
             display: block;
@@ -143,7 +143,7 @@
             </div>
           </div>
         </media-container>
-      </media-provider>
+      </video-provider>
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>

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';

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 (
     <main className="p-4">
       <h1 className="text-4xl font-extrabold py-2">Frosted Skin</h1>
-      <MediaProvider>
+      <VideoProvider>
         <FrostedSkin>
           {/* @ts-expect-error -- types are incorrect */}
           <Video src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" playsInline />
         </FrostedSkin>
-      </MediaProvider>
+      </VideoProvider>
       <h1 className="text-4xl font-extrabold py-2">Minimal Skin</h1>
-      <MediaProvider>
+      <VideoProvider>
         <MinimalSkin>
           {/* @ts-expect-error -- types are incorrect */}
           <Video src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" playsInline />
         </MinimalSkin>
-      </MediaProvider>
+      </VideoProvider>
     </main>
   );
 }

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 {
       )}
       >
         <div className="w-full max-w-5xl mx-auto p-6">
-          <MediaProvider key={key}>
+          <VideoProvider key={key}>
             <Skin className={skinClassName}>
               {/* @ts-expect-error -- types are incorrect */}
               <Video src={mediaSource} poster={poster} playsInline />
             </Skin>
-          </MediaProvider>
+          </VideoProvider>
         </div>
       </main>
     </div>

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(
   <StrictMode>
-    <MediaProvider>
+    <VideoProvider>
       <FrostedSkin>
         <Video
           // @ts-expect-error -- types are incorrect
@@ -15,6 +15,6 @@ createRoot(document.getElementById('root')!).render(
           playsInline
         />
       </FrostedSkin>
-    </MediaProvider>
+    </VideoProvider>
   </StrictMode>,
 );

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(
   <StrictMode>
-    <MediaProvider>
+    <VideoProvider>
       <MinimalSkin>
         <Video
           // @ts-expect-error -- types are incorrect
@@ -15,6 +15,6 @@ createRoot(document.getElementById('root')!).render(
           playsInline
         />
       </MinimalSkin>
-    </MediaProvider>
+    </VideoProvider>
   </StrictMode>,
 );