1

I'm implementing a mixed playlists (with Youtube and uploaded videos (using react-youtube and Azure Media Player).

The desired features are:

  • Swap between Youtube (Y) and Y videos.
  • Swap between uploaded (U) and U videos.
  • Swap between Y and U videos.
  • Swap between U and Y videos.
  • When Y video ends, auto play next video if Y.
  • When U video ends, auto play next video if U.
  • When Y video ends, auto play next video if U.
  • When U video ends, auto play next video if Y.

The nonworking features are when swaping from Youtube to uploaded, all other options works perfectly. The error showed when trying to switch from Y to U is:

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I have a CourseDetails component, in it, I use azuremediaplayer/mediaPlayer component for U videos and react-youtube. In both cases, I change the selected video with setState, and I receive that error when doing that from a U video.

Edit 1: When changing from Y to Y or U video, the component doesn't unmount, neither when swaping between U videos. But when changing from U to Y it does. In both cases I'm changing the state.

Edit 2: The issue it's that the Azure Media Player component can't be removed. If I don't use that component the switching works (though not video is showed in U cases, so it's pointless).

Will gladly share any needed code for solving this.

AleOtero93
  • 473
  • 12
  • 32
  • 2
    This will usually happen if some code removes DOM elements that React is managing. Once React tries to unmount the component, it has already been removed from the DOM and you get this error. Generally the fix would be to not touch elements directly managed by React - sometimes you need to add an additional wrapper `
    ` if another library wants to clear its own DOM too.
     – Joru Apr 04 '19 at 19:12
  • As far as I remember, there is no DOM managed by React. Is there anyway I can go deeper searching this? – AleOtero93 Apr 04 '19 at 19:22
  • If you do a `ReactDOM.render(, element)` then React manages `element`. If you do something like `$(element).clear()` that will cause this error when React tries to unmount `Component`. – Joru Apr 04 '19 at 19:25
  • Could it be caused because on CourseDetails I have a mediaPlayer ref? – AleOtero93 Apr 04 '19 at 19:49
  • Just having the ref by itself shouldn't cause it. If you're sure that nothing is modifying the DOM outside of React, then you could also check whether there are any unhandled exceptions that might be messing with React's state. – Joru Apr 04 '19 at 20:45
  • How could I check that? – AleOtero93 Apr 04 '19 at 20:52
  • You can pause on all exceptions in browser dev tools and see if there's any unexpected errors. – Joru Apr 04 '19 at 21:18
  • The issue it's clear now, I can't remove the Azure Media Player component. The mentioned error shows up. But if I remove the component from rendering, it works ( even though it doesn't show the video so it's pointless) – AleOtero93 Apr 08 '19 at 17:14

1 Answers1

0

wrap video element with div

 <div>
        <video
            ...
        />
 </div>
etwas77
  • 514
  • 1
  • 6
  • 17