Plyr: Custom Controls still not working properly

[ndimatteo]

Expected behaviour

Plyr to render my custom controls and change play/pause states when interacted with.

Actual behaviour

When using the minified plyr.js file from the dist folder on here, the player doesn't render at all, instead giving a console error from Plyr that reads: Uncaught TypeError: Object.defineProperty called on non-object

If you use the latest from unpkg.com (https://unpkg.com/[email protected]/dist/plyr.min.js) it actually renders, but the problem persists that the play/pause button does not change states.

Steps to reproduce

I setup Plyr using the following:

$('.video-player').each(function() {
  var video = $(this)[0];
  var poster = $(this).data('poster');
  var controls = `
    <div class="plyr__controls">
      <button type="button" class="plyr__control plyr__control--overlaid" aria-label="Play, {title}" data-plyr="play">
        <svg role="presentation" focusable="false"><use xlink:href="#plyr-play"></use></svg>
        <span class="plyr__sr-only">Play</span>
      </button>
      <button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play">
        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg>
        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg>
        <span class="label--pressed plyr__tooltip" role="tooltip">Pause</span>
        <span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span>
      </button>
      <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
      <button type="button" class="plyr__control" data-plyr="fullscreen">
        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-exit-fullscreen"></use></svg>
        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-enter-fullscreen"></use></svg>
        <span class="label--pressed plyr__tooltip" role="tooltip">Exit fullscreen</span>
        <span class="label--not-pressed plyr__tooltip" role="tooltip">Enter fullscreen</span>
      </button>
    </div>
    `;

  var player = new Plyr(video, { controls });
  player.poster = poster;
});

When using the dist file:
You'll notice, if you take out the { controls } part when calling Plyr it loads just fine.

When using the unpkg.com file:
It'll render but the play/pause button state does not change.

Environment

• Browser: Chrome
• Version: 68.0.3440.106 (Official Build) (64-bit)
• Operating System: Mac OS X Sierra
• Version: 10.12.4

Console errors (if any)

Uncaught TypeError: Object.defineProperty called on non-object

Link to where the bug is happening

https://codepen.io/ndimatteo/pen/zLXOaN (this one uses the unpkg.com version, unable to recreate using the dist file from here since it's not updated properly on your demos, which all still use an older version than 3.4.0)

[friday]

Thanks!

The reason unpkg.com is used in the codepen templates is that it supports version ranges, so we don't have to update them with every release. Using fixed releases shouldn't differ. v3.4.0 is released now so the latest cdn version is https://cdn.plyr.io/3.4.0/plyr.js (which still doesn't work).

Its seems the code assumes all buttons in the array exists, but with your setup some are null.

Should be easy to fix by adding .filter(Boolean) after Object.values(this.elements.buttons)

I'll leave this to Sam though since he know this better.

[sampotts]

Thanks @friday . Will push out 3.4.1 shortly with your fix.

[ndimatteo]

@sampotts / @friday – I just pulled in the latest dist file and it's still exactly the same for me. Is there something I need to be doing differently to get this working properly?

[sampotts]

Found it and fixed in v3.4.3 - https://codepen.io/sampotts/pen/PBgNNe

[ndimatteo]

Thanks @sampotts that did the trick!