feat(packages): add poster component to video skins (#994)

site/src/components/home/Demo/Base.tsx

@@ -25,7 +25,7 @@ function generateReactCode(skin: Skin): string {
   const skinComponent = skin === 'default' ? 'VideoSkin' : 'MinimalVideoSkin';
   const skinCss = skin === 'default' ? 'skin' : 'minimal-skin';
 
-  return `import { createPlayer, Poster } from '@videojs/react';
+  return `import { createPlayer } from '@videojs/react';
 import { ${skinComponent}, Video, videoFeatures } from '@videojs/react/video';
 import '@videojs/react/video/${skinCss}.css';
 
@@ -34,9 +34,8 @@ const Player = createPlayer({ features: videoFeatures });
 export function VideoPlayer() {
   return (
     <Player.Provider>
-      <${skinComponent}>
+      <${skinComponent} poster={VJS10_DEMO_VIDEO.poster}>
         <Video src="${VJS10_DEMO_VIDEO.mp4}" playsInline />
-        <Poster src="${VJS10_DEMO_VIDEO.poster}" />
       </${skinComponent}>
     </Player.Provider>
   );

site/src/components/home/HeroVideo.tsx

@@ -1,5 +1,5 @@
 import { useStore } from '@nanostores/react';
-import { createPlayer, Poster } from '@videojs/react';
+import { createPlayer } from '@videojs/react';
 import { HlsVideo } from '@videojs/react/media/hls-video';
 import { MinimalVideoSkin, VideoSkin, videoFeatures } from '@videojs/react/video';
 import { VJS10_DEMO_VIDEO } from '@/consts';
@@ -32,9 +32,9 @@ export default function HeroVideo({
             ...style,
           } as React.CSSProperties
         }
+        poster={poster}
       >
         <HlsVideo src={VJS10_DEMO_VIDEO.hls} playsInline />
-        <Poster src={poster} />
       </SkinComponent>
     </Player.Provider>
   );