Repository navigation
Update MediaElement.js to 7.1.0 - #6714
adamsilverstein wants to merge 16 commits into
Conversation
…est' into 56320-update-mediaelement-to-latest
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
The 7.1.0 release adds keyboard play/pause controls on the player container, screen reader text for current time and total duration, and mobile/desktop fullscreen fixes. No public API changes affect the WordPress integration. Also bump the registered script and style versions from 4.2.17 to 7.1.0 so browsers cache-bust the updated files, and drop the favicon.ico that was copied in from the npm package by mistake - WordPress does not ship it.
Since MediaElement.js 7.0, MediaElementPlayer.prototype.remove() no longer deletes the destroyed player from the mejs.players registry. WordPress iterates that registry to pause and tear down players (wp.media.mixin.removeAllPlayers(), mce-view), and wp-playlist re-creates a player on the same node for every track change, so stale entries would accumulate and dead players would be acted on. Wrap remove() in the migrate shim to restore the pre-7.0 cleanup.
QUnit now loads mediaelement-migrate.js in the same order production does and exercises the API surface WordPress depends on: the mejs globals, the migrate shim aliases, the jQuery integration, the player methods used by media-audiovideo and wp-playlist, and a functional check that instantiating a player builds controls from the configured iconSprite and that remove() unregisters the player. The PHPUnit tests read the bundled library version out of mediaelement-and-player.js and assert every registered mediaelement script and style version matches it, so the files can no longer be updated without bumping the registered versions (or vice versa), and verify the localized settings carry a resolvable iconSprite path.
The migrate shim converted player.container, player.controls, and player.layers to jQuery objects inside _meReady() for 4.x back compat. MediaElement.js 7.x calls native DOM methods on those properties: setResponsiveMode() calls container.querySelector() for players with percentage widths, which is how playlists render. Construction threw, the success callback never fired, and wp-playlist.js was left without its mejs reference, so switching or playing tracks threw again. Keep the properties as HTML elements and expose jQuery wrappers under $container, $controls, and $layers instead. Core itself only calls container.remove(), which works natively on an element; code written against the 4.x jQuery API can use the new wrappers. Add a QUnit regression test instantiating a fluid-width player, which follows the responsive code path the fixed-size player test never reached.
Nothing in core or Gutenberg exercised the players MediaElement.js powers, so a library update could break front-end playback without any test noticing. Cover each player surface WordPress exposes: the [audio] and [video] shortcodes (real play and pause, SVG sprite controls, the mejs.players registry), audio [playlist] track switching, video playlists, and the YouTube and Vimeo renderers. Playback assertions use mp3 and webm fixtures (copied from the PHPUnit data set) because Playwright's Chromium ships without proprietary codecs. The external renderer tests assert the embed iframes attach rather than real playback to limit exposure to third-party outages. The playlist test is what surfaced the responsive-mode regression fixed in 58b2540: playlists are the one core surface that renders a percentage-width player.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DxbbMKz3sa741SjHuE1ZLS
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Claude handled the version bump and wrote up the details:
Testing Instructions
AI Use
Code, tests, and description all written with 🤖 Claude Code. I will review and test.