Error on Destroying Splide Instance with Unvisited HTML Video Slide

[Elwood-P]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.8.0

Description

When using the Splide extension for video, an error occurs if you attempt to destroy a Splide instance containing an HTML video slide that hasn't been visited. I think the error is due to the destroy method in the HTMLVideoPlayer class not checking if the player exists before attempting to destroy it. I think the method also incorrectly uses addEventListener instead of removeEventListener.

1. Create a Splide instance with multiple slides, including at least one slide containing an HTML video.
2. Do not navigate to the slide with the video.
3. Attempt to destroy the Splide instance.

Proposed Solution:

Add check for existence of player.
Replace addEventListener with removeEventListener.

Current code:
https://github.com/Splidejs/splide-extension-video/blob/e71a80264d9e384caf3ddca54227b339cc75e660/src/js/players/html/HTMLVideoPlayer.ts

 destroy(): void {
    super.destroy();

    const { player } = this;
    const off = player.addEventListener.bind( player );

    off( 'play', this.onPlay );
    off( 'pause', this.onPause );
    off( 'ended', this.onEnded );
    off( 'loadeddata', this.onPlayerReady );
  }

Suggested amendment:

 destroy(): void {
    super.destroy();

    const { player } = this;
    if (!player) return;

    const off = player.removeEventListener.bind( player );

    off( 'play', this.onPlay );
    off( 'pause', this.onPause );
    off( 'ended', this.onEnded );
    off( 'loadeddata', this.onPlayerReady );
  }

Reproduction Link

https://codepen.io/ElwoodP/pen/mdNRWpO

Steps to Reproduce

1. Without navigating to slide 3 (the video slide), click the "Destroy" button.
2. The Splide instance will not be destroyed and a console error will be produced:

splide-extension-video.esm.js:552 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at ae.destroy (splide-extension-video.esm.js:552:24)
    at fe.destroy (splide-extension-video.esm.js:3440:19)
    at splide-extension-video.esm.js:3472:14
    at O (splide-extension-video.esm.js:272:13)
    at Object.u [as destroy] (splide-extension-video.esm.js:3471:5)
    at splide.esm.js:3118:40
    at splide.esm.js:139:30
    at Array.forEach (<anonymous>)
    at it (splide.esm.js:138:59)
    at n.destroy (splide.esm.js:3117:7)

Expected Behaviour

Splide instance should be destroyed without errors.
A "Destroyed." message should appear in the console log showing the instance destroy event has been successfully triggered.

[terax6669]

Looks like there's already a PR that fixes this issue #59