WordPress.org

Make WordPress Core

Ticket #27899: 27899.3.diff

File 27899.3.diff, 6.3 KB (added by gcorne, 7 years ago)
  • src/wp-includes/js/mce-view.js

    diff --git src/wp-includes/js/mce-view.js src/wp-includes/js/mce-view.js
    index 1e8a1de..5caf801 100644
    window.wp = window.wp || {}; 
    451451                                firefox = this.ua.is( 'ff' ),
    452452                                className = '.wp-' +  this.shortcode.tag + '-shortcode';
    453453
    454                         if ( this.player ) {
    455                                 this.unsetPlayer();
    456                         }
    457 
    458454                        media = $( node ).find( className );
    459455
    460456                        if ( ! this.isCompatible( media ) ) {
    window.wp = window.wp || {}; 
    495491                },
    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        });
    506497        _.extend( wp.mce.media.View.prototype, wp.media.mixin );
    window.wp = window.wp || {}; 
    547538                template:  media.template('editor-playlist'),
    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                },
    568547
    window.wp = window.wp || {}; 
    571550                 */
    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
    577556                /**
    window.wp = window.wp || {}; 
    582561                 * @global WPPlaylistView
    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 ) {
    594568                                var doc;
    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;
    601                                         });
    602                                 }
    603                         }, this );
    604573
    605                         if ( ! this.data.tracks ) {
    606                                 return;
    607                         }
     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>' );
    608577
    609                         p = new WPPlaylistView({
    610                                 el: $( self.node ).find( '.wp-playlist' ).get(0),
    611                                 metadata: this.data
    612                         });
     578                                                if ( ! self.data.tracks ) {
     579                                                        return;
     580                                                }
    613581
    614                         this.player = p.player;
     582                                                self.players.push( new WPPlaylistView({
     583                                                        el: $( elem ).find( '.wp-playlist' ).get(0),
     584                                                        metadata: self.data
     585                                                }).player );
     586                                        });
     587                                }
     588                        }, this );
    615589                },
    616590
    617591                /**
    window.wp = window.wp || {}; 
    695669                        this.data = options;
    696670
    697671                        return this.template( options );
     672                },
     673
     674                unbind: function() {
     675                        this.unsetPlayers();
    698676                }
    699677        });
    700678        _.extend( wp.mce.media.PlaylistView.prototype, wp.media.mixin );
  • src/wp-includes/js/media-audiovideo.js

    diff --git src/wp-includes/js/media-audiovideo.js src/wp-includes/js/media-audiovideo.js
    index da91a9c..47f6d36 100644
     
    162162                 *
    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                }
    172174        };
     
    705707        media.view.MediaDetails = media.view.Settings.AttachmentDisplay.extend({
    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 );
    714716                        this.events = _.extend( this.events, {
     
    764766                 * @global MediaElementPlayer
    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                },
    771773
  • src/wp-includes/media-template.php

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
    index 202fd07..a3300e5 100644
     
    1616function wp_underscore_audio_template() {
    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 }}"
    2223        preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
  • src/wp-includes/media.php

    diff --git src/wp-includes/media.php src/wp-includes/media.php
    index e9b4a1d..fe5b63b 100644
    function wp_playlist_shortcode( $attr ) { 
    13531353                echo (int) $theme_width;
    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>
    13581360        <div class="wp-playlist-prev"></div>
    function wp_audio_shortcode( $attr, $content = '' ) { 
    15551557                'loop'     => $loop,
    15561558                'autoplay' => $autoplay,
    15571559                'preload'  => $preload,
    1558                 'style'    => 'width: 100%',
     1560                'style'    => 'width: 100%; visibility: hidden;',
    15591561        );
    15601562
    15611563        // These ones should just be omitted altogether if they are blank