fix: use Sutro as default

examples/default-provider/app/(default)/custom-theme/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 import Video from 'next-video';
-import Sutro from 'player.style/sutro/react';
+import Instaplay from 'player.style/instaplay/react';
 import getStarted from '/videos/get-started.mp4?thumbnailTime=0';
 
 export const metadata: Metadata = {
@@ -11,7 +11,7 @@ export default function Page() {
   return (
     <>
       <section>
-        <Video src={getStarted} theme={Sutro}>
+        <Video src={getStarted} theme={Instaplay}>
           <track kind="captions" src="/get-started.vtt" srcLang="en" label="English" default />
         </Video>
       </section>

package.json

@@ -100,8 +100,9 @@
     "chalk": "^4.1.2",
     "chokidar": "^3.6.0",
     "magicast": "^0.3.4",
-    "resolve": "^1.22.8",
     "media-chrome": "^4.2.3",
+    "player.style": "^0.0.12",
+    "resolve": "^1.22.8",
     "symlink-dir": "^5.2.1",
     "undici": "^5.28.4",
     "yargs": "^17.7.2"

src/components/players/default-player.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { forwardRef, Suspense, lazy, Children, isValidElement } from 'react';
+import Sutro from 'player.style/sutro/react';
 import { getPlaybackId, getPosterURLFromPlaybackId } from '../../providers/mux/transformer.js';
 import { getUrlExtension, svgBlurImage } from '../utils.js';
 
-import DefaultTheme from './default-theme.js';
 import type { Props as MuxVideoProps } from './mux-video-react.js';
 import type { PlayerProps } from '../types.js';
 
@@ -20,7 +20,7 @@ const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwardedRef: an
     controls,
     poster,
     blurDataURL,
-    theme: Theme = DefaultTheme,
+    theme: Theme = Sutro,
     ...rest
   } = allProps;
 

tests/components/video.test.tsx

@@ -42,9 +42,9 @@ test('renders media-controller and mux-video', async () => {
 
   const wrapper = create(<Video src={asset} />);
   await setTimeout(50);
-  console.log(JSON.stringify(wrapper.toJSON()));
-  assert.equal(wrapper.toJSON().children[2].type, 'media-controller');
-  assert.equal(wrapper.toJSON().children[2].children[1].type, 'mux-video');
+
+  assert.equal(wrapper.toJSON().children[1].type, 'media-theme-sutro');
+  assert.equal(wrapper.toJSON().children[1].children[1].type, 'mux-video');
   assert.equal(
     wrapper.root.findByType('mux-video').parent.props.playbackId,
     'zNYmqdvJ61gt5uip02zPid01rYIPyyzVRVKQChgSgJlaY'