Why am I receiving an uncaught error in a play function despite having a play promise in the code?

Question

I was originally received the following error in a code for a video player: Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user's request, so I looked up a solution and came across this article. I then replaced all the play and pause functions with the fix detailed in the article but it didn't solve the error. Did I implement the fix improperly? Any guidance would be much appreciated, thanks!

    function pauseVideo( idx, div, img, playPromise )
    {
        img = getVideoElm( idx, div, img );
        if( !img )
            return;
        else
      var playPromise = img.play();
      if (playPromise !== undefined) {
    playPromise.then(_ => {
        if( img.paused )
                    addClass( img, 'video-paused');
                else
                    removeClass( img, 'video-paused');
                    img.pause();
    })
    .catch(error => {
      console.log("playPromise is undefined");
    });
  }
    else
      console.log("Video failed to pause");
    }
    function resumeVideo( idx, div, img, forcePause, playPromise )
    {
        img = getVideoElm( idx, div, img );
    var playPromise = img.play();
        if( !img )
            return;
        else if( forcePause || hasClass(img, 'video-paused') )
            img.pause();
    else if (playPromise !== undefined) {
    playPromise.then(_ => {
    })
    .catch(error => {
      console.log("playPromise is undefined");
    });
  }
        else
            console.log("Video failed to load");
    
    }