i'm creating a custom progerssbar control for ngx-plyr, it is working but there's a bug where user sometimes need to click the progress bar 2-3 times in order to change the video time to be change. you can see it here https://bory-webspeech.netlify.app

here's how i manage to simulate the progress bar

 updateTime(e) {
    this.plyr.toArray().forEach((plyr) => {
      const lastTime = plyr.player.currentTime;
      try {
        plyr.player.pause();
        this.isPlayed = false;
        plyr.player.currentTime = parseFloat(e.target.value);
        this.time = e.target.value;

        this.remaining = this.parse(
          plyr.player.duration - this.time
        );
      } catch (error) {
        console.log(error);
      }
      plyr.player.on("canplay", () => {
        if (plyr.player.currentTime != lastTime) {
          setTimeout(function () {
            console.log('play');
            plyr.player.play();
          }, 250);
        } else {
          console.log('dont play');
          plyr.player.currentTime = parseFloat(e.target.value);
          this.time = e.target.value
        }
      });
    });
  }

where did i do wrong?