HLS with ManageMediaSource throws NotFoundError: The object can not be found here.

[pvm1987]

Current Behavior:

I'm using Safari 17.1 and trying to play HLS video. This browser has support of ManagedMediaSource and hls.js uses it. I sometimes receive the following error "NotFoundError: The object can not be found here." and the whole my React component is removed from the DOM.

Expected Behavior:

Player should load and play the HLS video every time as it's woking on all other browsers with the old MediaSource support. For example it works on Chrome.

Steps To Reproduce:

1. Setup vidstack player with autoPlay={true} and load="visible"
2. Setup HLS provider library to be "locally" accessed:

onProviderChange={(provider: MediaProviderAdapter | null, nativeEvent: MediaProviderChangeEvent,) => {
    if (isHLSProvider(provider)) {
      // Set hls.js to be used locally (i.e., not over a CDN).
      provider.library = HLS;
    }
  };
  }

3. Reload the page and observe the console until you catch the moment when the following error occurs.

"NotFoundError: The object can not be found here." 

Environment:

• Framework: React 18.3.1
• Vidstack version: vidstack/[email protected]
• hls.js: [email protected]
• Browser: Safari 17.1
• OS: [email protected]

I think this error happens when the <source> is appended to the <video> by hls.js. The lib is manipulating the DOM tree which is previously created by Vidstack MediaOutlet React component. Such actions are not allowed by React's re-render methods and they throw an error which breaks the whole app.

Note that I tested with HLS config param:

preferManagedMediaSource: false 

This turns off the usage of ManagedMediaSource and then everything works as expected. When MediaSource is used hls.js changes only the "src" attribute of the video tag and doesn't add any <source> child tags.