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

site/src/components/HomePageDemo/Base.tsx

@@ -7,11 +7,11 @@ import ClientCode from '../Code/ClientCode';
 function generateHTMLCode(skin: Skin): string {
   const skinTag = `${skin}-skin`;
 
-  return `<media-provider>
+  return `<video-provider>
   <${skinTag}>
     <video src="https://example.com/video.mp4"></video>
   </${skinTag}>
-</media-provider>`;
+</video-provider>`;
 }
 
 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 (
-    <MediaProvider>
+    <VideoProvider>
       <${skinComponent}>
         <Video src="https://example.com/video.mp4" />
       </${skinComponent}>
-    </MediaProvider>
+    </VideoProvider>
   );
 };`;
 }

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 (
-    <MediaProvider>
+    <VideoProvider>
       <SkinComponent className={className}>
         <Video
           // @ts-expect-error -- types are incorrect
@@ -20,6 +20,6 @@ export default function HeroVideo({ className, poster }: { className?: string; p
           playsInline
         />
       </SkinComponent>
-    </MediaProvider>
+    </VideoProvider>
   );
 }