Plyr disappears when seeking while playing

Hi! I am submitting this issue as I have not seen it addressed before. It might very well be environment specific.

I am using VueCLI v3.x in combination with TS and Vuetify. My vue-plyr is in a separate component that gets the audio file URL as a prop. It then emits a timeupdate event as I use that elsewhere. I tried removing the timeupdate, the issue still persists. It seems to be happening only with longer audio files, 5 mins and above. It does not appear to happen when the audio is not being played.

I am providing a GIF showcase, as well as the code for the player.

showcase

<template>
  <v-card>
    <vue-plyr :emit="['timeupdate']" @timeupdate="handleUpdate">
      <audio :src="url"></audio>
    </vue-plyr>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class AudioPlayer extends Vue {
  @Prop({ default: () => "" }) url!: string;

  handleUpdate(value: any): void {
    let time = value.detail.plyr.currentTime;
    this.$emit("timeupdate", time);
  }
}
</script>

<style>
.plyr__controls {
  border-radius: 100px !important;
}
</style>

redxtech / vue-plyr

Plyr disappears when seeking while playing #168