Watching events on plyr instance

[jwjcmw]

I'd love any advice on what the best way to monitor events in the player instance that is created by this component from a parent component. I was able to do it by using plyr in the parent component to find any instances...but I don't have access to the unique id to make sure I'm getting the right one. Would it make sense to have the vue-plyr components $emit the unique id? Is there a better way to do this?

[redxtech]

I can probably watch the instance for events and them emit those.
Would that work?

[jwjcmw]

That would probably work, and would be the more "vue" way of doing it. I'm not sure how much extra overhead that extra layer adds on...I'm monitoring the time change, so there is going to be a whole lot of emitting going on.

[jwjcmw]

How about something like this, where you can pass in the events that you want emitted back...

<plyr :emit="['timeupdate','exitfullscreen']" @timeupdate="videoTimeUpdated" @exitfullscreen="exitedFullScreen">

and then the plyr component will just emit what has been requested...

<script>
  import plyr from 'plyr'
  import 'plyr/dist/plyr.css'

  export default {
    name: 'plyr',
    props: {
      /** Options object for plyr config. */
      options: {
        type: Object,
        required: false,
        default () { return {} }
      },
      /**new prop to accept what to emit back**/
      emit: {
          type: Array,
          required: false,
          default () { return [] }
      },
    },
    data () {
      return {
        player: {}
      }
    },
    mounted () {
      this.player = plyr.setup(document.getElementById(`plyr-container-${this.idNumber}`),
        this.options)[0]
      /**after player object is setup, loop through the emit array to set the on() API method for each**/
      this.emit.forEach(element => {
        this.player.on(element,this.emitPlayerEvent)
      });
    },
    methods: {
        /**method to handle emitting any of the player events**/
        emitPlayerEvent() {
            this.$emit(event.type,event)
        }, 
    }, 
    beforeDestroy () {
      this.player.destroy()
    },
    computed: {
      idNumber () {
        return Math.floor(Math.random() * (100000 - 1)) + 1
      }
    }
  }
</script>

If you like this method, I can set it up in each of the plyr-* components and create a PR.

[redxtech]

That looks great!
I wouldn't be able to get to this for a bit, so if you're willing to send a PR that would be amazing !

[jwjcmw]

Will do.

[jwjcmw]

#5

[redxtech]

Accepted PR, should be good.

[rulrok]

@redxtech @jwjcmw Heads up!
The line:

this.player.on(element,this.emitPlayerEvent)

off is never called

this.player.off(...).

This causes memory leaks.

I'm just not sure if it it necessary this part of the code only, or some bug with plyr also.
On my SPA I cannot use any event with :emit because of the code I highlighted.