Error when pausing a video - Uncaught (in promise) DOMException: The play() request was interrupted because the media was removed from the document

Question

I have a next js app that has a slider which contains blog style posts - each post contains a video which is set up as a component. Users can load a new slider (list of posts) by clicking one of the menu buttons - which basically is handled by changing state and displaying the slider and a new list of posts based on the selected value.

On a slide I have functions that allow a user to play or pause the video. Also if a user moves to the next slide and the video is playing it is paused when out of the window (using an observer).

Everything generally works except sometimes (while monkey testing as if I'm a 5 year old with ADHD) if the user selects a new slide the above error thrown and the app eventually freezes and becomes unresponsive

I assume the reason for the error is because play() is async and as I navigate away

• the video is removed from the DOM
• the promise resolves but can't pause the video as it is not longer there

Here is how I am handling the code in the video component - which fixed a previous error (Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()) but I don't know how to clean up to prevent the removed from DOM error

(Only needs to work in Chrome)

const playPromise = video.play()

    if (playPromise !== undefined) {
      playPromise
        .then((_) => {
          video.pause()
          video.currentTime = 0
        })
        .catch((error) => {
          console.log('error', error, )
        })
    }