feat: use ce-la-react, fix React 19 issues (#61)

muxinc · Dec 18, 2024 · 0a734e9 · 0a734e9
1 parent 6e32d36
commit 0a734e9
Show file tree

Hide file tree

Showing 29 changed files with 5,110 additions and 3,246 deletions.
diff --git a/examples/nextjs/app/dash-video/page.tsx b/examples/nextjs/app/dash-video/page.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 import DashVideo from 'dash-video-element/react';
+import Player from '../player';
 
 export const metadata: Metadata = {
   title: 'Dash Video - Media Elements',
@@ -9,13 +10,14 @@ export default function Page() {
   return (
     <>
       <section>
-        <DashVideo
+        <Player
+          as={DashVideo}
           className="video"
           src="https://player.vimeo.com/external/648359100.mpd?s=a4419a2e2113cc24a87aef2f93ef69a8e4c8fb0c"
           poster="https://image.mux.com/jtWZbHQ013SLyISc9LbIGn8f4c3lWan00qOkoPMZEXmcU/thumbnail.webp?time=0"
           controls
           playsInline
-        ></DashVideo>
+        ></Player>
       </section>
     </>
   );

diff --git a/examples/nextjs/app/hls-video/page.tsx b/examples/nextjs/app/hls-video/page.tsx
@@ -26,9 +26,9 @@ export default function Page(props: PageProps) {
           controls
           crossOrigin=""
           playsInline
-          autoPlay={props.searchParams?.autoplay}
-          muted={props.searchParams?.muted}
-          preload={props.searchParams?.preload}
+          autoplay={!!props.searchParams?.autoplay}
+          muted={!!props.searchParams?.muted}
+          preload={props.searchParams?.preload as 'auto' | 'metadata' | 'none'}
           suppressHydrationWarning
         >
           <track

diff --git a/examples/nextjs/app/player.tsx b/examples/nextjs/app/player.tsx
@@ -1,7 +1,15 @@
 'use client';
 
-export default function Player(props: any) {
-  const { as: PlayerElement, ...rest } = props;
+import type React from 'react';
+
+type PolymorphicProps<E extends React.ElementType> = React.PropsWithChildren<React.ComponentProps<E> & {
+  as: E;
+}>;
+
+export default function Player<T extends React.ElementType>({
+  as: PlayerElement,
+  ...rest
+}: PolymorphicProps<T>) {
   return (
     <PlayerElement
       {...rest}