fix: add maxReconnectAttempts type and numberRenderer to example page

Author: spuppo-mux

examples/nextjs-with-typescript/pages/MuxPlayer.tsx

@@ -129,6 +129,7 @@ const DEFAULT_INITIAL_STATE: Partial<MuxPlayerProps> = Object.freeze({
   proudlyDisplayMuxBadge: undefined,
   disablePseudoEnded: undefined,
   capRenditionToPlayerSize: undefined,
+  maxReconnectRetries: undefined,
 });
 
 const SMALL_BREAKPOINT = 700;
@@ -285,6 +286,7 @@ function MuxPlayerPage({ location }: Props) {
           // }}
           maxAutoResolution="720p"
           capRenditionToPlayerSize={state.capRenditionToPlayerSize}
+          maxReconnectRetries={state.maxReconnectRetries}
           title={state.title}
           videoTitle={state.videoTitle}
           startTime={state.startTime}
@@ -662,6 +664,14 @@ function MuxPlayerPage({ location }: Props) {
             name="capRenditionToPlayerSize"
             onChange={genericOnChange}
           />
+          <NumberRenderer
+            value={state.maxReconnectRetries}
+            name="maxReconnectRetries"
+            label="maxReconnectRetries (0/unset = off; e.g. 6 to enable network recovery)"
+            onChange={genericOnChange}
+            min={0}
+            step={1}
+          />
         </div>
       </main>
     </>

packages/mux-player-react/src/types.ts

@@ -122,6 +122,7 @@ export type MuxPlayerProps = {
   themeProps?: { [k: string]: any };
   fullscreenElement?: string;
   capRenditionToPlayerSize?: boolean;
+  maxReconnectRetries?: number;
   onAbort?: GenericEventListener<MuxPlayerElementEventMap['abort']>;
   onCanPlay?: GenericEventListener<MuxPlayerElementEventMap['canplay']>;
   onCanPlayThrough?: GenericEventListener<MuxPlayerElementEventMap['canplaythrough']>;