feat: Add support for configuring HLS.js options (#463)

Added hlsConfig optional config in the plugin options

Author: R-Delfino95

src/components/Player.tsx

@@ -2,17 +2,18 @@ import {Card, Text} from '@sanity/ui'
 import React, {useEffect, useMemo, useRef} from 'react'
 
 import {useCancelUpload} from '../hooks/useCancelUpload'
-import type {MuxInputProps, VideoAssetDocument} from '../util/types'
+import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
 import {TopControls} from './Player.styled'
 import {UploadProgress} from './UploadProgress'
 import VideoPlayer from './VideoPlayer'
 
 interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
   buttons?: React.ReactNode
   asset: VideoAssetDocument
+  config?: PluginConfig
 }
 
-const Player = ({asset, buttons, readOnly, onChange}: Props) => {
+const Player = ({asset, buttons, readOnly, onChange, config}: Props) => {
   const isLoading = useMemo<boolean | string>(() => {
     if (asset?.status === 'preparing') {
       return 'Preparing the video'
@@ -91,7 +92,7 @@ const Player = ({asset, buttons, readOnly, onChange}: Props) => {
   }
 
   return (
-    <VideoPlayer asset={asset}>
+    <VideoPlayer asset={asset} hlsConfig={config?.hlsConfig}>
       {buttons && <TopControls slot="top-chrome">{buttons}</TopControls>}
       {isPreparingStaticRenditions && (
         <Card

src/components/Uploader.tsx

@@ -435,6 +435,7 @@ export default function Uploader(props: Props) {
               readOnly={props.readOnly}
               asset={props.asset}
               onChange={props.onChange}
+              config={props.config}
               buttons={
                 <PlayerActionsMenu
                   accept={acceptMimeString}

src/components/VideoPlayer.tsx

@@ -17,11 +17,15 @@ export default function VideoPlayer({
   asset,
   thumbnailWidth = 250,
   children,
+  hlsConfig,
   ...props
 }: PropsWithChildren<
-  {asset: VideoAssetDocument; thumbnailWidth?: number; forceAspectRatio?: number} & Partial<
-    Pick<MuxPlayerProps, 'autoPlay'>
-  >
+  {
+    asset: VideoAssetDocument
+    thumbnailWidth?: number
+    forceAspectRatio?: number
+    hlsConfig?: MuxPlayerProps['_hlsConfig']
+  } & Partial<Pick<MuxPlayerProps, 'autoPlay'>>
 >) {
   const client = useClient()
   const {dialogState} = useDialogStateContext()
@@ -110,6 +114,7 @@ export default function VideoPlayer({
                 page_type: 'Preview Player',
               }}
               audio={isAudio}
+              _hlsConfig={hlsConfig}
               style={{
                 ...(!isAudio && {height: '100%'}),
                 width: '100%',

src/util/types.ts

@@ -1,5 +1,6 @@
 import type {ObjectInputProps, PreviewLayoutKey, PreviewProps, SchemaType} from 'sanity'
 import type {PartialDeep} from 'type-fest'
+import type MuxPlayerElement from '@mux/mux-player'
 
 /**
  * Standard static rendition options available for plugin configuration defaults
@@ -149,6 +150,23 @@ export interface MuxInputConfig {
    * @defaultValue undefined
    */
   maxAssetDuration?: number
+
+  /**
+   * HLS.js configuration options to be passed to the Mux Player.
+   * These options allow you to customize the underlying HLS.js playback engine behavior.
+   *
+   * @see {@link https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning}
+   * @defaultValue undefined
+   * @example
+   * ```ts
+   * {
+   *   maxBufferLength: 30,
+   *   lowLatencyMode: true,
+   *   capLevelToPlayerSize: true
+   * }
+   * ```
+   */
+  hlsConfig?: MuxPlayerElement['_hlsConfig']
 }
 
 export interface PluginConfig extends MuxInputConfig {