Not working with audio element/component?

[ariel-frischer]

I tried using this package so that I can move my audio component (a React.FC which holds html audio tag) into different nodes without re-rendering during audio playback, however following the documentation I believe I have setup everything correctly however, the audio component still seems to re-render and interrupt playback. I've tried wrapping my component in React.memo(), I've also tried using skipUpdate = true (which just causes react errors) when using sendReparentableChild(). My use case is that when the user clicks music tab I want to show them our audio component, but when that tab is not open I want audio player to play anyway (kind of like in the background). I can do something similar to this using portals, and html audio element control parameter but I can't insert it into correct parent component node position when my tab opens/closes. Thanks for the interesting library anyway, I'm sure it works with other more basic elements.

[paol-imi]

When a component is reparented, its dom elements are removed from the DOM and re-inserted into the new container. I'm pretty sure the audio stops for this reason. The options you can try are mainly 2.

First option: You can reactivate the audio element after reparenting. The element should still have in memory the position in which it was stopped and start again from it. In any case, if it had not, it would be enough to save it in the state of the component.

Second option: The audio may stop only after the removal of the element (el.removeChild( )). If so, you can try to disable it and leave only the insert action enabled. (in your case skipUpdate = true disable both)

import {configure} from 'react-reparenting';

configure({
  removeChildFromContainer(container, child) {
    // An empty function to avoid the removal of the element.
  },
});

Anyway, I think you should evaluate a more global audio management instead of repareting.

[ariel-frischer]

@Paol-imi Thank you for the very useful response, I've kind of just simulated the correct positioning with portals, and getting position of a placeholder element. The first option I think would still give an interruption but the second option looks promising thanks again!