Customize: Ensure media playlists get initialized after selective refresh; expose new `wp.playlist.initialize()` API.

In particular allows audio and video playlists to be added to the Text widget and previewed.

Props bpayton, westonruter.
See #40854.
Fixes #42495.

Built from https://develop.svn.wordpress.org/trunk@42613


git-svn-id: http://core.svn.wordpress.org/trunk@42442 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/customize-selective-refresh.js

@@ -488,6 +488,10 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
 				wp.mediaelement.initialize();
 			}
 
+			if ( wp.playlist ) {
+				wp.playlist.initialize();
+			}
+
 			/**
 			 * Announce when a partial's placement has been rendered so that dynamic elements can be re-built.
 			 */

wp-includes/js/mediaelement/wp-playlist.js

@@ -3,6 +3,9 @@
 (function ($, _, Backbone) {
 	'use strict';
 
+	/** @namespace wp */
+	window.wp = window.wp || {};
+
 	var WPPlaylistView = Backbone.View.extend(/** @lends WPPlaylistView.prototype */{
 		/**
 		 * @constructs
@@ -168,11 +171,32 @@
 		}
 	});
 
-    $(document).ready(function () {
-		$('.wp-playlist').each( function() {
-			return new WPPlaylistView({ el: this });
+	/**
+	 * Initialize media playlists in the document.
+	 *
+	 * Only initializes new playlists not previously-initialized.
+	 *
+	 * @since 4.9.3
+	 * @returns {void}
+	 */
+	function initialize() {
+		$( '.wp-playlist:not(:has(.mejs-container))' ).each( function() {
+			new WPPlaylistView( { el: this } );
 		} );
-    });
+	}
+
+	/**
+	 * Expose the API publicly on window.wp.playlist.
+	 *
+	 * @namespace wp.playlist
+	 * @since 4.9.3
+	 * @type {object}
+	 */
+	window.wp.playlist = {
+		initialize: initialize
+	};
+
+	$( document ).ready( initialize );
 
 	window.WPPlaylistView = WPPlaylistView;
 

wp-includes/js/mediaelement/wp-playlist.min.js

@@ -1 +1 @@
-!function(a,b,c){"use strict";var d=c.View.extend({initialize:function(d){this.index=0,this.settings={},this.data=d.metadata||a.parseJSON(this.$("script.wp-playlist-script").html()),this.playerNode=this.$(this.data.type),this.tracks=new c.Collection(this.data.tracks),this.current=this.tracks.first(),"audio"===this.data.type&&(this.currentTemplate=wp.template("wp-playlist-current-item"),this.currentNode=this.$(".wp-playlist-current-item")),this.renderCurrent(),this.data.tracklist&&(this.itemTemplate=wp.template("wp-playlist-item"),this.playingClass="wp-playlist-playing",this.renderTracks()),this.playerNode.attr("src",this.current.get("src")),b.bindAll(this,"bindPlayer","bindResetPlayer","setPlayer","ended","clickTrack"),b.isUndefined(window._wpmejsSettings)||(this.settings=b.clone(_wpmejsSettings)),this.settings.success=this.bindPlayer,this.setPlayer()},bindPlayer:function(a){this.mejs=a,this.mejs.addEventListener("ended",this.ended)},bindResetPlayer:function(a){this.bindPlayer(a),this.playCurrentSrc()},setPlayer:function(a){this.player&&(this.player.pause(),this.player.remove(),this.playerNode=this.$(this.data.type)),a&&(this.playerNode.attr("src",this.current.get("src")),this.settings.success=this.bindResetPlayer),this.player=new MediaElementPlayer(this.playerNode.get(0),this.settings)},playCurrentSrc:function(){this.renderCurrent(),this.mejs.setSrc(this.playerNode.attr("src")),this.mejs.load(),this.mejs.play()},renderCurrent:function(){var a,b="wp-includes/images/media/video.png";"video"===this.data.type?(this.data.images&&this.current.get("image")&&-1===this.current.get("image").src.indexOf(b)&&this.playerNode.attr("poster",this.current.get("image").src),a=this.current.get("dimensions").resized,this.playerNode.attr(a)):(this.data.images||this.current.set("image",!1),this.currentNode.html(this.currentTemplate(this.current.toJSON())))},renderTracks:function(){var b=this,c=1,d=a('<div class="wp-playlist-tracks"></div>');this.tracks.each(function(a){b.data.images||a.set("image",!1),a.set("artists",b.data.artists),a.set("index",!!b.data.tracknumbers&&c),d.append(b.itemTemplate(a.toJSON())),c+=1}),this.$el.append(d),this.$(".wp-playlist-item").eq(0).addClass(this.playingClass)},events:{"click .wp-playlist-item":"clickTrack","click .wp-playlist-next":"next","click .wp-playlist-prev":"prev"},clickTrack:function(a){a.preventDefault(),this.index=this.$(".wp-playlist-item").index(a.currentTarget),this.setCurrent()},ended:function(){this.index+1<this.tracks.length?this.next():(this.index=0,this.setCurrent())},next:function(){this.index=this.index+1>=this.tracks.length?0:this.index+1,this.setCurrent()},prev:function(){this.index=this.index-1<0?this.tracks.length-1:this.index-1,this.setCurrent()},loadCurrent:function(){var a=this.playerNode.attr("src")&&this.playerNode.attr("src").split(".").pop(),b=this.current.get("src").split(".").pop();this.mejs&&this.mejs.pause(),a!==b?this.setPlayer(!0):(this.playerNode.attr("src",this.current.get("src")),this.playCurrentSrc())},setCurrent:function(){this.current=this.tracks.at(this.index),this.data.tracklist&&this.$(".wp-playlist-item").removeClass(this.playingClass).eq(this.index).addClass(this.playingClass),this.loadCurrent()}});a(document).ready(function(){a(".wp-playlist").each(function(){return new d({el:this})})}),window.WPPlaylistView=d}(jQuery,_,Backbone);
+!function(a,b,c){"use strict";function d(){a(".wp-playlist:not(:has(.mejs-container))").each(function(){new e({el:this})})}window.wp=window.wp||{};var e=c.View.extend({initialize:function(d){this.index=0,this.settings={},this.data=d.metadata||a.parseJSON(this.$("script.wp-playlist-script").html()),this.playerNode=this.$(this.data.type),this.tracks=new c.Collection(this.data.tracks),this.current=this.tracks.first(),"audio"===this.data.type&&(this.currentTemplate=wp.template("wp-playlist-current-item"),this.currentNode=this.$(".wp-playlist-current-item")),this.renderCurrent(),this.data.tracklist&&(this.itemTemplate=wp.template("wp-playlist-item"),this.playingClass="wp-playlist-playing",this.renderTracks()),this.playerNode.attr("src",this.current.get("src")),b.bindAll(this,"bindPlayer","bindResetPlayer","setPlayer","ended","clickTrack"),b.isUndefined(window._wpmejsSettings)||(this.settings=b.clone(_wpmejsSettings)),this.settings.success=this.bindPlayer,this.setPlayer()},bindPlayer:function(a){this.mejs=a,this.mejs.addEventListener("ended",this.ended)},bindResetPlayer:function(a){this.bindPlayer(a),this.playCurrentSrc()},setPlayer:function(a){this.player&&(this.player.pause(),this.player.remove(),this.playerNode=this.$(this.data.type)),a&&(this.playerNode.attr("src",this.current.get("src")),this.settings.success=this.bindResetPlayer),this.player=new MediaElementPlayer(this.playerNode.get(0),this.settings)},playCurrentSrc:function(){this.renderCurrent(),this.mejs.setSrc(this.playerNode.attr("src")),this.mejs.load(),this.mejs.play()},renderCurrent:function(){var a,b="wp-includes/images/media/video.png";"video"===this.data.type?(this.data.images&&this.current.get("image")&&-1===this.current.get("image").src.indexOf(b)&&this.playerNode.attr("poster",this.current.get("image").src),a=this.current.get("dimensions").resized,this.playerNode.attr(a)):(this.data.images||this.current.set("image",!1),this.currentNode.html(this.currentTemplate(this.current.toJSON())))},renderTracks:function(){var b=this,c=1,d=a('<div class="wp-playlist-tracks"></div>');this.tracks.each(function(a){b.data.images||a.set("image",!1),a.set("artists",b.data.artists),a.set("index",!!b.data.tracknumbers&&c),d.append(b.itemTemplate(a.toJSON())),c+=1}),this.$el.append(d),this.$(".wp-playlist-item").eq(0).addClass(this.playingClass)},events:{"click .wp-playlist-item":"clickTrack","click .wp-playlist-next":"next","click .wp-playlist-prev":"prev"},clickTrack:function(a){a.preventDefault(),this.index=this.$(".wp-playlist-item").index(a.currentTarget),this.setCurrent()},ended:function(){this.index+1<this.tracks.length?this.next():(this.index=0,this.setCurrent())},next:function(){this.index=this.index+1>=this.tracks.length?0:this.index+1,this.setCurrent()},prev:function(){this.index=this.index-1<0?this.tracks.length-1:this.index-1,this.setCurrent()},loadCurrent:function(){var a=this.playerNode.attr("src")&&this.playerNode.attr("src").split(".").pop(),b=this.current.get("src").split(".").pop();this.mejs&&this.mejs.pause(),a!==b?this.setPlayer(!0):(this.playerNode.attr("src",this.current.get("src")),this.playCurrentSrc())},setCurrent:function(){this.current=this.tracks.at(this.index),this.data.tracklist&&this.$(".wp-playlist-item").removeClass(this.playingClass).eq(this.index).addClass(this.playingClass),this.loadCurrent()}});window.wp.playlist={initialize:d},a(document).ready(d),window.WPPlaylistView=e}(jQuery,_,Backbone);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.0-alpha-42612';
+$wp_version = '5.0-alpha-42613';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

wp-includes/widgets/class-wp-widget-text.php

@@ -57,6 +57,10 @@ class WP_Widget_Text extends WP_Widget {
 
 		wp_add_inline_script( 'text-widgets', sprintf( 'wp.textWidgets.idBases.push( %s );', wp_json_encode( $this->id_base ) ) );
 
+		if ( $this->is_preview() ) {
+			add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_preview_scripts' ) );
+		}
+
 		// Note that the widgets component in the customizer will also do the 'admin_print_scripts-widgets.php' action in WP_Customize_Widgets::print_scripts().
 		add_action( 'admin_print_scripts-widgets.php', array( $this, 'enqueue_admin_scripts' ) );
 
@@ -393,6 +397,22 @@ class WP_Widget_Text extends WP_Widget {
 		return $instance;
 	}
 
+	/**
+	 * Enqueue preview scripts.
+	 *
+	 * These scripts normally are enqueued just-in-time when a playlist shortcode is used.
+	 * However, in the customizer, a playlist shortcode may be used in a text widget and
+	 * dynamically added via selective refresh, so it is important to unconditionally enqueue them.
+	 *
+	 * @since 4.9.3
+	 */
+	public function enqueue_preview_scripts() {
+		require_once dirname( dirname( __FILE__ ) ) . '/media.php';
+
+		wp_playlist_scripts( 'audio' );
+		wp_playlist_scripts( 'video' );
+	}
+
 	/**
 	 * Loads the required scripts and styles for the widget control.
 	 *