WordPress.org

Make WordPress Core

Changeset 28182 for trunk


Ignore:
Timestamp:
04/22/2014 05:52:06 PM (7 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/mce-view.js

    r28171 r28182  
    452452                className = '.wp-' +  this.shortcode.tag + '-shortcode';
    453453
    454             if ( this.player ) {
    455                 this.unsetPlayer();
    456             }
    457 
    458454            media = $( node ).find( className );
    459455
     
    496492
    497493        unbind: function() {
    498             var self = this;
    499             this.pauseAllPlayers();
    500             _.each( this.players, function (player) {
    501                 self.removePlayer( player );
    502             } );
    503             this.players = [];
     494            this.unsetPlayers();
    504495        }
    505496    });
     
    548539
    549540        initialize: function( options ) {
     541            this.players = [];
    550542            this.data = {};
    551543            this.attachments = [];
    552544            this.shortcode = options.shortcode;
    553             _.bindAll( this, 'setPlayer' );
    554             $(this).on('ready', this.setNode);
    555         },
    556 
    557         /**
    558          * Set the element context for the view, and then fetch the playlist's
    559          *   associated attachments.
    560          *
    561          * @param {Event} e
    562          * @param {HTMLElement} node
    563          */
    564         setNode: function(e, node) {
    565             this.node = node;
    566545            this.fetch();
    567546        },
     
    572551        fetch: function() {
    573552            this.attachments = wp.media.playlist.attachments( this.shortcode );
    574             this.attachments.more().done( this.setPlayer );
     553            this.dfd = this.attachments.more().done( _.bind( this.render, this ) );
    575554        },
    576555
     
    583562         * @global tinymce.editors
    584563         */
    585         setPlayer: function() {
    586             var p,
    587                 html = this.getHtml(),
    588                 t = this.encodedText,
    589                 self = this;
    590 
    591             this.unsetPlayer();
     564        render: function() {
     565            var html = this.getHtml(), self = this;
    592566
    593567            _.each( tinymce.editors, function( editor ) {
     
    595569                if ( editor.plugins.wpview ) {
    596570                    doc = editor.getDoc();
    597                     $( doc ).find( '[data-wpview-text="' + t + '"]' ).each(function(i, elem) {
     571                    $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).each(function (i, elem) {
    598572                        var node = $( elem );
    599                         node.html( html );
    600                         self.node = elem;
     573
     574                        // The <ins> is used to mark the end of the wrapper div. Needed when comparing
     575                        // the content as string for preventing extra undo levels.
     576                        node.html( html ).append( '<ins data-wpview-end="1"></ins>' );
     577
     578                        if ( ! self.data.tracks ) {
     579                            return;
     580                        }
     581
     582                        self.players.push( new WPPlaylistView({
     583                            el: $( elem ).find( '.wp-playlist' ).get(0),
     584                            metadata: self.data
     585                        }).player );
    601586                    });
    602587                }
    603588            }, this );
    604 
    605             if ( ! this.data.tracks ) {
    606                 return;
    607             }
    608 
    609             p = new WPPlaylistView({
    610                 el: $( self.node ).find( '.wp-playlist' ).get(0),
    611                 metadata: this.data
    612             });
    613 
    614             this.player = p.player;
    615589        },
    616590
     
    696670
    697671            return this.template( options );
     672        },
     673
     674        unbind: function() {
     675            this.unsetPlayers();
    698676        }
    699677    });
  • trunk/src/wp-includes/js/media-audiovideo.js

    r28084 r28182  
    163163         *  Examples: modal closes, shortcode properties are removed, etc.
    164164         */
    165         unsetPlayer : function() {
    166             if ( this.player ) {
     165        unsetPlayers : function() {
     166            if ( this.players && this.players.length ) {
    167167                wp.media.mixin.pauseAllPlayers();
    168                 wp.media.mixin.removePlayer( this.player );
    169                 this.player = false;
     168                _.each( this.players, function (player) {
     169                    wp.media.mixin.removePlayer( player );
     170                } );
     171                this.players = [];
    170172            }
    171173        }
     
    706708        initialize: function() {
    707709            _.bindAll(this, 'success');
    708 
    709             this.listenTo( this.controller, 'close', media.mixin.unsetPlayer );
     710            this.players = [];
     711            this.listenTo( this.controller, 'close', media.mixin.unsetPlayers );
    710712            this.on( 'ready', this.setPlayer );
    711             this.on( 'media:setting:remove', media.mixin.unsetPlayer, this );
     713            this.on( 'media:setting:remove', media.mixin.unsetPlayers, this );
    712714            this.on( 'media:setting:remove', this.render );
    713715            this.on( 'media:setting:remove', this.setPlayer );
     
    765767         */
    766768        setPlayer : function() {
    767             if ( ! this.player && this.media ) {
    768                 this.player = new MediaElementPlayer( this.media, this.settings );
     769            if ( ! this.players.length && this.media ) {
     770                this.players.push( new MediaElementPlayer( this.media, this.settings ) );
    769771            }
    770772        },
  • trunk/src/wp-includes/media-template.php

    r28144 r28182  
    1717    $audio_types = wp_get_audio_extensions();
    1818?>
    19 <audio controls
     19<audio style="visibility: hidden"
     20    controls
    2021    class="wp-audio-shortcode"
    2122    width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
  • trunk/src/wp-includes/media.php

    r28168 r28182  
    13541354    ?>"<?php if ( 'video' === $safe_type ):
    13551355        echo ' height="', (int) $theme_height, '"';
     1356    else:
     1357        echo ' style="visibility: hidden"';
    13561358    endif; ?>></<?php echo $safe_type ?>>
    13571359    <div class="wp-playlist-next"></div>
     
    15561558        'autoplay' => $autoplay,
    15571559        'preload'  => $preload,
    1558         'style'    => 'width: 100%',
     1560        'style'    => 'width: 100%; visibility: hidden;',
    15591561    );
    15601562
Note: See TracChangeset for help on using the changeset viewer.