Plyr: controls icons not toggling using custom html

[georgeejr]

I am using custom html for controls because i want to rearrange it but when i play the video or make it fullscreen the icons are not changing at all. Play icon should turn to pause and fullscreen should change to exit fullscreen icon. Just follow this docs https://github.com/sampotts/plyr/blob/master/controls.md

[friday]

Which Plyr version are you using?

[georgeejr]

v3.3.14. But if i don't use custom html for controls it works perfectly. Just need to custom coz i want to rearrange to controls. Or is there any workaround to rearrange the controls.

here's my code => https://s22.postimg.cc/iteg64vxr/Screen_Shot_2018-06-22_at_5.42.42_PM.png

[friday]

There are no other ways to rearrange the controls yet #1047

I'll copy that png and paste it into my code so I can test it ;)

[georgeejr]

@friday have you tried it?

[friday]

No sorry, that was a joke (you can't copy a png image into your code). I was hoping you'd paste the actual code. Please read our guidelines about replication: https://github.com/sampotts/plyr/blob/master/CONTRIBUTING.md#replication (these are now in the issue temaplate)

My guess is that your code was copied from Plyr before v3.3.13, and that the controls have changed since (they have in #1041, but I'm not sure exactly what changed), so try downgrading Plyr to 3.3.12 or upgrading your buttons by copying from the default button output of a newer Plyr version (or however you did it originally) before changing the order.

I'm not sure this fixes the problem.

[tomaspinho]

Getting the same issue with the default HTML5 markup in controls.md

[wizedesign]

I copied the original code https://github.com/sampotts/plyr/blob/master/controls.md#example-1 and the same issues "controls icons not toggling".

https://codepen.io/anon/pen/JZVVWM

Is there any solution?

[jwjcmw]

I'm just here to +1 this issue. I've got a pen showing the issue with 3.3.23 here
https://codepen.io/jwjcmw/pen/mjzWRQ
as with @wizedesign above, I just copied in the controls example verbatim.

[jwjcmw]

It looks like the issue is that when the standard controls are created, this property is added to each button:

Object.defineProperty(button, 'pressed', {
  enumerable: true,
  get() {
    return hasClass(button, className);
  },
  set(pressed = false) {
    toggleClass(button, className, pressed);
  },
});

But that doesn't get done with the custom buttons. I've got a hack in place in mine now to do this to my custom buttons right before the Edge redraw in the inject function.

[sampotts]

I'll be deploying a fix for this shortly

[ndimatteo]

Sigh. This still doesn't work. Now when rendering, this error comes up: Object.defineProperty called on non-object

Set this up exactly as you have it in the controls.md doc too:
var player = new Plyr('.video-player', { controls });

[friday]

@ndimatteo That's not very helpful. Please create a new issue and follow the template.

[ndimatteo]

@friday sorry, here's a more detailed issue about the problem: #1161

[sampotts]

Sigh. I still didn't get a pull request. Don't worry though, you sit back.