[wp-trac] [WordPress Trac] #40373: Conditionally initialize Playlist Media Element

[WordPress Trac]

#40373: Conditionally initialize Playlist Media Element
-------------------------+-----------------------------
 Reporter:  kostasx      |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:  4.7.3
 Severity:  normal       |   Keywords:
  Focuses:  javascript   |
-------------------------+-----------------------------
 The single element media player
 (https://develop.svn.wordpress.org/trunk/src/wp-includes/js/mediaelement
 /wp-mediaelement.js) uses a special jQuery filter to remove already
 initialized media elements from the initialization process:

 Source: https://develop.svn.wordpress.org/trunk/src/wp-
 includes/js/mediaelement/wp-mediaelement.js
 Lines: 43~49
 {{{
                         // Only initialize new media elements.
                         $( '.wp-audio-shortcode, .wp-video-shortcode' )
                                 .not( '.mejs-container' )
                                 .filter(function () {
                                         return ! $( this
 ).parent().hasClass( 'mejs-mediaelement' );
                                 })
                                 .mediaelementplayer( settings );
 }}}

 However, a similar approach is not implemented for the Playlist element
 and might be needed.

 Source: https://develop.svn.wordpress.org/trunk/src/wp-
 includes/js/mediaelement/wp-playlist.js
 Lines: 167~171

 Original Code:
 {{{
     $(document).ready(function () {
                 $('.wp-playlist').each( function() {
                         return new WPPlaylistView({ el: this });
                 } );
     });
 }}}

 Should probably be (my suggestion):
 {{{
    // Only initialize new media elements.
     $(document).ready(function () {
                 $('.wp-playlist')
                 .not(':has(.mejs-mediaelement)')    // <-- Filter out
 already initialized playlist media elements
                 .each( function() {
                         return new WPPlaylistView({ el: this });
                 } );
     });
 }}}

 I have tested both media elements (single player and playlist player) on
 an Ajax-based WordPress theme, and I've noticed that an already
 initialized playlist media element stops playing when the wp-playlist.js
 file is reloaded on a new page load.
 When the conditional (patch above) is placed in the code, the playlist
 element continues playing without problem on subsequent page loads.

 Awaiting feedback.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/40373>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform