feat: add React tooltip component (#35)

examples/react-demo/src/App.tsx

@@ -18,11 +18,11 @@ type SkinKey = (typeof skins)[number]['key'];
 const mediaSources = [{
   key: '1',
   name: 'Mux 1',
-  value: 'https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8'
+  value: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8'
 }, {
   key: '2',
   name: 'Mux 2',
-  value: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8'
+  value: 'https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8'
 }, {
   key: '3',
   name: 'Mux 3',
@@ -97,6 +97,9 @@ export default function App(): JSX.Element {
     }
   }, [skinKey]);
 
+  const playbackId = mediaSource.match(/stream\.mux\.com\/([^./]+)/)?.[1];
+  const poster = playbackId ? `https://image.mux.com/${playbackId}/thumbnail.webp` : undefined;
+
   return (
     <>
       <header className="fixed top-0 inset-x-0 bg-white dark:bg-stone-800 shadow shadow-black/10 after:h-px after:absolute after:inset-x-0 after:top-full after:bg-black/5">
@@ -138,7 +141,7 @@ export default function App(): JSX.Element {
           <MediaProvider key={key}>
             <Skin className={skinClassName}>
               {/* @ts-ignore -- types are incorrect */}
-              <Video src={mediaSource} />
+              <Video src={mediaSource} poster={poster} />
             </Skin>
           </MediaProvider>
         </div>