fix: use @mux/mux-video/react pkg

muxinc · Dec 20, 2024 · 3990253 · 3990253
1 parent 29d4806
commit 3990253
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 174 deletions.
diff --git a/examples/default-provider/app/(default)/mp4-source/page.tsx b/examples/default-provider/app/(default)/mp4-source/page.tsx
@@ -10,7 +10,7 @@ export default function Page() {
     <>
       <section>
         <Player
-          style={{ display: 'grid', width: '100%', aspectRatio: '16/9' }}
+          style={{ width: '100%', aspectRatio: '16/9' }}
           src="https://storage.googleapis.com/muxdemofiles/mux.mp4"
           poster="https://image.mux.com/jxEf6XiJs6JY017pSzpv8Hd6tTbdAOecHTq4FiFAn564/thumbnail.webp"
           blurDataURL='data:image/webp;base64,UklGRlAAAABXRUJQVlA4IEQAAACwAQCdASoQAAkAAQAcJZwAAueBHFYwAP7+sPJ01xp5AM+XuhDsRQ67ZYXXhHDkrqsIkUGjQSCMuENc5y3Qg0o9pZgAAA=='

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -92,18 +92,18 @@
     "@aws-sdk/client-s3": "^3.540.0",
     "@inquirer/prompts": "^4.3.1",
     "@mux/mux-node": "8.8.0",
-    "@mux/mux-video": "^0.22.0",
-    "@mux/playback-core": "^0.27.0",
+    "@mux/mux-video": "^0.24.1",
+    "@mux/playback-core": "^0.28.1",
     "@next/env": "^15.0.2",
     "@paralleldrive/cuid2": "^2.2.2",
     "@vercel/blob": "^0.23.3",
     "chalk": "^4.1.2",
     "chokidar": "^3.6.0",
-    "dash-video-element": "^0.0.14",
-    "hls-video-element": "^1.2.11",
+    "dash-video-element": "^0.0.16",
+    "hls-video-element": "^1.4.0",
     "magicast": "^0.3.4",
     "media-chrome": "^4.3.0",
-    "player.style": "^0.1.0",
+    "player.style": "^0.1.1",
     "resolve": "^1.22.8",
     "symlink-dir": "^5.2.1",
     "undici": "^5.28.4",

diff --git a/src/components/players/default-player.tsx b/src/components/players/default-player.tsx
@@ -68,6 +68,7 @@ const DefaultPlayer = forwardRef<HTMLVideoElement, Omit<MediaProps, 'ref'> & Pla
     const showCustomBlur = isCustomPoster && blurDataURL !== asset?.blurDataURL;
 
     if (showGeneratedBlur || showCustomBlur) {
+      imgStyleProps.gridArea = '1 / 1';
       imgStyleProps.width = '100%';
       imgStyleProps.height = '100%';
       imgStyleProps.color = 'transparent';
@@ -101,12 +102,18 @@ const DefaultPlayer = forwardRef<HTMLVideoElement, Omit<MediaProps, 'ref'> & Pla
     }
 
     return (
-      <Theme style={style} data-next-video={dataNextVideo}>
+      <Theme data-next-video={dataNextVideo} style={{
+        display: 'grid',
+        ...style,
+      }}>
         {slottedPosterImg}
         <Suspense fallback={null}>
           <Media
             suppressHydrationWarning
             ref={forwardedRef}
+            style={{
+              gridArea: '1 / 1',
+            }}
             slot="media"
             poster={poster}
             crossOrigin=""
@@ -132,7 +139,10 @@ const DefaultPlayer = forwardRef<HTMLVideoElement, Omit<MediaProps, 'ref'> & Pla
       <Media
         suppressHydrationWarning
         ref={forwardedRef}
-        style={style}
+        style={{
+          gridArea: '1 / 1',
+          ...style,
+        }}
         controls={controls === false ? undefined : true}
         poster={poster}
         crossOrigin=""

diff --git a/src/components/players/media/index.tsx b/src/components/players/media/index.tsx
@@ -1,12 +1,13 @@
 import { forwardRef, lazy } from 'react';
 import { getUrlExtension } from '../../utils.js';
-import type MuxVideoComponent from './mux-video-react.js';
-import type { MuxVideoProps } from './mux-video-react.js';
+import type { MuxMediaProps } from '@mux/playback-core';
+import type MuxVideoComponent from '@mux/mux-video/react';
 import type HlsVideoComponent from 'hls-video-element/react';
 import type DashVideoComponent from 'dash-video-element/react';
 
-export type NativeVideoProps = React.ComponentPropsWithoutRef<'video'>;
-export type { MuxVideoProps };
+export type MuxVideoProps = Omit<MuxMediaProps, 'preload'> & Omit<React.ComponentProps<'video'>, 'autoPlay'>;
+
+export type NativeVideoProps = Omit<React.ComponentPropsWithoutRef<'video'>, 'preload' | 'width' | 'height'>;
 
 export type MediaProps<TPlaybackId = string | undefined> = TPlaybackId extends string
   ? MuxVideoProps & { playbackId?: TPlaybackId }
@@ -16,10 +17,11 @@ let MuxVideo: React.LazyExoticComponent<typeof MuxVideoComponent>;
 let HlsVideo: React.LazyExoticComponent<typeof HlsVideoComponent>;
 let DashVideo: React.LazyExoticComponent<typeof DashVideoComponent>;
 
-const Media = forwardRef<HTMLVideoElement, MediaProps>((props, forwardedRef) => {
+const Media = forwardRef<any, MediaProps>((props, forwardedRef) => {
 
   if (typeof props.playbackId === 'string') {
-    MuxVideo ??= lazy(() => import('./mux-video-react.js'));
+    MuxVideo ??= lazy(() => import('@mux/mux-video/react'));
+    // @ts-expect-error
     return <MuxVideo ref={forwardedRef} {...props} controls={false} />;
   }
 

diff --git a/src/components/players/media/mux-video-react.tsx b/src/components/players/media/mux-video-react.tsx
diff --git a/tests/components/video.test.tsx b/tests/components/video.test.tsx
@@ -27,6 +27,7 @@ test('renders native video without source', async () => {
 
 test('renders mux-video without UI with imported source', async () => {
   await import('@mux/mux-video');
+
   const wrapper = create(<Video controls={false} src={asset} />);
   await setTimeout(50);
   assert.equal(wrapper.toJSON().children[1].type, 'mux-video');