Player destroy throwing errors since v3

[redxtech]

Player destroy throwing errors since v3

[pmcp]

Unclear if this issue is resolved (because ages ago), but I had the same issue and resolved it by wrapping the plyr in two (!) extra divs, and putting the v-if on the outer div. One div still didn't work, two did. hacky, but works (for me).

so:

<div v-if="songUrl">
      <div>
        <vue-plyr ... />
     </div>
  </div>

[redxtech]

Sorry for the late response - I should be able to take a look at this soon.
I should maybe put some try/catch in the destroy method. I will see if that works.

[Bugari]

Experiencing exactly same issue. Seems like it's making library unusable at the moment...? @redxtech I'm really hoping you'll be able to look into this soon :)

[Bugari]

I'm not sure what should I do - I'm trying to develop app using vue-plyr, but this issue is making it pretty much unusable... Is there a hope it will be fixed, or should I just use plain plyr, and try to integrate it with vue/nuxt in-house?

[ashleahhill]

Plyr v3's destroy method is no longer synchronous. Vue's beforeDestroy hook is. Since destroy is modifying the DOM after Vue has already gotten rid of you see errors.

https://github.com/sampotts/plyr/blob/master/src/js/plyr.js#L1014

I'm using Plyr v2 in a Vue app right now (not using vue-plyr) and came here hoping @redxtech already had a fix for this. Sigh.

[redxtech]

I have updated to the latest version of plyr in the next upcoming build and this should be fixed once I iron out some build issues and publish the new version.

[lemieszek]

Still throwing errors after destroying.

Uncaught TypeError: Cannot read property 'controls' of null (plyr.min.js?4fb8:1 )
 at toggleControls (plyr.min.js?4fb8:1)
   at eval (plyr.min.js?4fb8:1)

v.5.0.4

[dietrichg]

Im doing a simple v-if on the player to toggle multiple players visibility and they don't obey it properly. (They're still visible after changing the state).
I'm having to use v-show to make sure i dont actually destroy them.. This is not ideal and I'd really like to use this wrapper.

[Niehaus]

Unclear if this issue is resolved (because ages ago), but I had the same issue and resolved it by wrapping the plyr in two (!) extra divs, and putting the v-if on the outer div. One div still didn't work, two did. hacky, but works (for me).

so:

<div v-if="songUrl">
      <div>
        <vue-plyr ... />
     </div>
  </div>

I used wrapped and worked as well

<template v-if="someBool"> 
  <div>
    <vue-plyr ref="plyr">
      <audio controls crossorigin playsinline>
        <source :src="audioPath" type="audio/mp3" />
      </audio>
    </vue-plyr>
  </div>
</template>