Changeset 28182

Timestamp:

04/22/2014 05:52:06 PM (11 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;',
     );