HLS audio component autoplay props sets to always true

[TanjimAnim]

So I have been using the library in my NextJS 14 app. When I pass the autoplay props to the hls-video component, which is a conditional props in the component, it is always set to true whether I pass it or not. Even if the default props is set to false.

type AudioPlayerType = {
    audioId: string,
    audioControllerRef?: MutableRefObject<HTMLElement | undefined>,
    controls?: boolean,
    autoplay?: boolean
}
const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerType>(({ audioId, audioControllerRef, autoplay = false, controls = true }, ref) => {
    return (
        <div className='w-full py-7 px-1 sm:px-0'>
            <MediaController className="w-full rounded-md" audio ref={audioControllerRef}>
                {/* @ts-ignore */}
               <hls-video
                    src={`${baseURL}/media/audio/${audioId}.m3u8`}
                    slot="media"
                    crossOrigin="anonymous"
                    muted
                    className="w-full h-full"
                    autoplay={autoplay}
                    audio
                    ref={ref}
                // playsinline
                >
                    <track
                        default
                        label="thumbnails"
                        kind="metadata"
                        src={`${baseURL}/media/audio/${audioId}.vtt`}
                    />
                    {/* @ts-ignore */}
               </hls-video>
            </MediaController>
          </div>

So, for workaround what I have done is to render the hls-video conditionally, like this

{autoplay ? <hls-video
                    src={`${baseURL}/media/audio/${audioId}.m3u8`}
                    slot="media"
                    crossOrigin="anonymous"
                    muted
                    className="w-full h-full"
                    autoplay={autoplay}
                    audio
                    ref={ref}
                // playsinline
                >
                    <track
                        default
                        label="thumbnails"
                        kind="metadata"
                        src={`${baseURL}/media/audio/${audioId}.vtt`}
                    />
                    {/* @ts-ignore */}
                </hls-video> : <hls-video
                    src={`${baseURL}/media/audio/${audioId}.m3u8`}
                    slot="media"
                    crossOrigin="anonymous"
                    muted
                    className="w-full h-full"
                    audio
                    ref={ref}
                // playsinline
                >
                    <track
                        default
                        label="thumbnails"
                        kind="metadata"
                        src={`${baseURL}/media/audio/${audioId}.vtt`}
                    />
                    {/* @ts-ignore */}
                </hls-video>}

Which neither looks pretty nor the react way to do it. So, I guess I am doing something wrong here, or this is a bug.

[luwes]

I think this is expected, not a bug, because React transforms props to attributes (strings) of custom elements.

all our media elements also have a React import which should solve this issue.

try importing the React component with import HlsVideo from 'hls-video-element/react';