Bug: Lazy loaded MuxPlayer duplicates children <track/> elements

fredrik-sogaard commented 7 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player-react

Which browsers are you using?

Chrome

Which operating systems are you using?

macOS

Description

When using mux-player-react and adding a subtitle track as a child, the subtitle track gets duplicated:

Code structure:

import MuxPlayer from '@mux/mux-player-react';

 <MuxPlayer playbackId=...">
  <track
    kind="subtitles"
    label="Norsk"
    src="..."
    srcLang="no"
  />
</MuxPlayer>

Reduced test case

https://stackblitz.com/edit/vitejs-vite-fhn3wm?file=src%2FApp.tsx

Steps to reproduce

Add a <track> as child of MuxPlayer
See duplicated subtitle options.

Current Behavior

<track> children gets duplicated.

Expected Behavior

<track> children not getting duplicated.

Errors

No response

What version of the package are you using?

2.4.1

luwes commented 7 months ago

it's because Mux player automatically loads them from the m3u8. they can be removed with some API calls to the Mux video API https://docs.mux.com/api-reference#video/operation/delete-asset-track

is your intention to manually override the subtitles?

fredrik-sogaard commented 7 months ago

No, I want to add my own subtitle tracks stored elsewhere to the video player. We don't add subtitles to Mux directly.

We're using Sanity as a CMS and the Mux plugin doesn't support uploading subtitle tracks, so we want to load them in as <track> elements.

It is so close to working perfectly, except the duplicating issue.

muxinc / elements