Changeset 28182 for trunk

Timestamp:

04/22/2014 05:52:06 PM (12 years ago)

Author:

wonderboymusic

Message:

Refinements for asynchronous rendering in wp.mce.media.PlaylistView:

• Add visibility: hidden as an inline style to <audio> tags, there is a race with the stylesheet which can get enqueued in the body and loaded in the footer.
• When creating new instances of MediaElementPlayer, always push them onto a stack. Lone views can be responsible for multiple instances of the same shortcode on render.
• Rename wp.media.mixin.unsetPlayer() to wp.media.mixin.unsetPlayers() to reflect the above.
• Call wp.media.mixin.unsetPlayers() on the view's unbind() method, instead of inline in the render() method
• Make sure WPPlaylistView is instantiated for each editor instance
• Ensure that the No Items Found view state is not rendered when attachments actually do exist.

Props gcorne, wonderboymusic.
See #27899.

Location:

trunk/src/wp-includes

Files:

• js/mce-view.js (modified) (7 diffs)
• js/media-audiovideo.js (modified) (3 diffs)
• media-template.php (modified) (1 diff)
• media.php (modified) (2 diffs)

trunk/src/wp-includes/js/mce-view.js

@@ -452 +452 @@
                                 className = '.wp-' +  this.shortcode.tag + '-shortcode';
 
-                        if ( this.player ) {
-                                this.unsetPlayer();
-                        }
-
                         media = $( node ).find( className );
 
@@ -496 +492 @@
 
                 unbind: function() {
-                        var self = this;
-                        this.pauseAllPlayers();
-                        _.each( this.players, function (player) {
-                                self.removePlayer( player );
-                        } );
-                        this.players = [];
+                        this.unsetPlayers();
                 }
         });
@@ -548 +539 @@
 
                 initialize: function( options ) {
+                        this.players = [];
                         this.data = {};
                         this.attachments = [];
                         this.shortcode = options.shortcode;
-                        _.bindAll( this, 'setPlayer' );
-                        $(this).on('ready', this.setNode);
-                },
-
-                /**
-                 * Set the element context for the view, and then fetch the playlist's
-                 *   associated attachments.
-                 *
-                 * @param {Event} e
-                 * @param {HTMLElement} node
-                 */
-                setNode: function(e, node) {
-                        this.node = node;
                         this.fetch();
                 },
@@ -572 +551 @@
                 fetch: function() {
                         this.attachments = wp.media.playlist.attachments( this.shortcode );
-                        this.attachments.more().done( this.setPlayer );
+                        this.dfd = this.attachments.more().done( _.bind( this.render, this ) );
                 },
 
@@ -583 +562 @@
                  * @global tinymce.editors
                  */
-                setPlayer: function() {
-                        var p,
-                                html = this.getHtml(),
-                                t = this.encodedText,
-                                self = this;
-
-                        this.unsetPlayer();
+                render: function() {
+                        var html = this.getHtml(), self = this;
 
                         _.each( tinymce.editors, function( editor ) {
@@ -595 +569 @@
                                 if ( editor.plugins.wpview ) {
                                         doc = editor.getDoc();
-                                        $( doc ).find( '[data-wpview-text="' + t + '"]' ).each(function(i, elem) {
+                                        $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).each(function (i, elem) {
                                                 var node = $( elem );
-                                                node.html( html );
-                                                self.node = elem;
+
+                                                // The <ins> is used to mark the end of the wrapper div. Needed when comparing
+                                                // the content as string for preventing extra undo levels.
+                                                node.html( html ).append( '<ins data-wpview-end="1"></ins>' );
+
+                                                if ( ! self.data.tracks ) {
+                                                        return;
+                                                }
+
+                                                self.players.push( new WPPlaylistView({
+                                                        el: $( elem ).find( '.wp-playlist' ).get(0),
+                                                        metadata: self.data
+                                                }).player );
                                         });
                                 }
                         }, this );
-
-                        if ( ! this.data.tracks ) {
-                                return;
-                        }
-
-                        p = new WPPlaylistView({
-                                el: $( self.node ).find( '.wp-playlist' ).get(0),
-                                metadata: this.data
-                        });
-
-                        this.player = p.player;
                 },
 
@@ -696 +670 @@
 
                         return this.template( options );
+                },
+
+                unbind: function() {
+                        this.unsetPlayers();
                 }
         });

trunk/src/wp-includes/js/media-audiovideo.js

@@ -163 +163 @@
                  *  Examples: modal closes, shortcode properties are removed, etc.
                  */
-                unsetPlayer : function() {
-                        if ( this.player ) {
+                unsetPlayers : function() {
+                        if ( this.players && this.players.length ) {
                                 wp.media.mixin.pauseAllPlayers();
-                                wp.media.mixin.removePlayer( this.player );
-                                this.player = false;
+                                _.each( this.players, function (player) {
+                                        wp.media.mixin.removePlayer( player );
+                                } );
+                                this.players = [];
                         }
                 }
@@ -706 +708 @@
                 initialize: function() {
                         _.bindAll(this, 'success');
-
-                        this.listenTo( this.controller, 'close', media.mixin.unsetPlayer );
+                        this.players = [];
+                        this.listenTo( this.controller, 'close', media.mixin.unsetPlayers );
                         this.on( 'ready', this.setPlayer );
-                        this.on( 'media:setting:remove', media.mixin.unsetPlayer, this );
+                        this.on( 'media:setting:remove', media.mixin.unsetPlayers, this );
                         this.on( 'media:setting:remove', this.render );
                         this.on( 'media:setting:remove', this.setPlayer );
@@ -765 +767 @@
                  */
                 setPlayer : function() {
-                        if ( ! this.player && this.media ) {
-                                this.player = new MediaElementPlayer( this.media, this.settings );
+                        if ( ! this.players.length && this.media ) {
+                                this.players.push( new MediaElementPlayer( this.media, this.settings ) );
                         }
                 },

trunk/src/wp-includes/media-template.php

@@ -17 +17 @@
         $audio_types = wp_get_audio_extensions();
 ?>
-<audio controls
+<audio style="visibility: hidden"
+        controls
         class="wp-audio-shortcode"
         width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"

trunk/src/wp-includes/media.php

@@ -1354 +1354 @@
         ?>"<?php if ( 'video' === $safe_type ):
                 echo ' height="', (int) $theme_height, '"';
+        else:
+                echo ' style="visibility: hidden"';
         endif; ?>></<?php echo $safe_type ?>>
         <div class="wp-playlist-next"></div>
@@ -1556 +1558 @@
                 'autoplay' => $autoplay,
                 'preload'  => $preload,
-                'style'    => 'width: 100%',
+                'style'    => 'width: 100%; visibility: hidden;',
         );