WordPress.org
Get WordPress

Make WordPress Core

Ticket #27389: 27389.2.diff

File 27389.2.diff, 23.2 KB (added by wonderboymusic, 11 years ago)

  • src/wp-includes/class-wp-editor.php

     
    343343                                $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
    344344                                $version = 'ver=' . $GLOBALS['wp_version'];
    345345                                $dashicons = includes_url( "css/dashicons$suffix.css?$version" );
     346                                $mediaelement = includes_url( "js/mediaelement/mediaelementplayer.min.css?$version" );
     347                                $wpmediaelement = includes_url( "js/mediaelement/wp-mediaelement.css?$version" );
    346348
    347349                                // WordPress default stylesheet and dashicons
    348                                 $mce_css = array( $dashicons, self::$baseurl . '/skins/wordpress/wp-content.css' );
     350                                $mce_css = array(
     351                                        $dashicons,
     352                                        $mediaelement,
     353                                        $wpmediaelement,
     354                                        self::$baseurl . '/skins/wordpress/wp-content.css'
     355                                );
    349356
    350357                                // load editor_style.css if the current theme supports it
    351358                                if ( ! empty( $GLOBALS['editor_styles'] ) && is_array( $GLOBALS['editor_styles'] ) ) {

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

     
    3131                        var html = this.getHtml();
    3232                        // Search all tinymce editor instances and update the placeholders
    3333                        _.each( tinymce.editors, function( editor ) {
    34                                 var doc;
     34                                var doc, node;
    3535                                if ( editor.plugins.wpview ) {
    3636                                        doc = editor.getDoc();
    37                                         $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).html( html );
     37                                        node = $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' );
     38                                        if ( node.length ) {
     39                                                node.html( html );
     40                                                $(this).trigger( 'ready', node );
     41                                        }
    3842                                }
    3943                        }, this );
    4044                }
    … …  
    178182
    179183                /**
    180184                 * Refresh views after an update is made
    181                  * 
     185                 *
    182186                 * @param view {object} being refreshed
    183187                 * @param text {string} textual representation of the view
    184188                 */
    … …  
    204208                        return instances[ encodedText ];
    205209                },
    206210
    207                 /** 
     211                /**
    208212                 * render( scope )
    209                  * 
     213                 *
    210214                 * Renders any view instances inside a DOM node `scope`.
    211215                 *
    212216                 * View instances are detected by the presence of wrapper elements.
    … …  
    302306
    303307        };
    304308        wp.mce.views.register( 'gallery', wp.mce.gallery );
     309
     310        wp.mce.media = {
     311                render: function (e, node) {
     312                        // if the ready event fires on an empty node
     313                        if ( ! node ) {
     314                                return;
     315                        }
     316
     317                        var media, settings = {};
     318
     319                        if ( this.player ) {
     320                                this.player.remove();
     321                        }
     322
     323                        media = $( node ).find( '.wp-' +  this.shortcode + '-shortcode' );
     324
     325                        if ( ! _.isUndefined( window._wpmejsSettings ) ) {
     326                                settings.pluginPath = _wpmejsSettings.pluginPath;
     327                        }
     328                        media = wp.media.view.MediaDetails.prepareSrc( media.get(0) );
     329                        this.player = new MediaElementPlayer( media, settings );
     330                },
     331
     332                toView:  function( content ) {
     333                        var match = wp.shortcode.next( this.shortcode, content );
     334
     335                        if ( ! match ) {
     336                                return;
     337                        }
     338
     339                        return {
     340                                index:   match.index,
     341                                content: match.content,
     342                                options: {
     343                                        shortcode: match.shortcode
     344                                }
     345                        };
     346                },
     347
     348                edit: function( node ) {
     349                        var p,
     350                                media = wp.media[ this.shortcode ],
     351                                self = this,
     352                                frame, data;
     353
     354                        for (p in window.mejs.players) {
     355                                window.mejs.players[p].pause();
     356                        }
     357
     358                        data = window.decodeURIComponent( $( node ).data('wpview-text') );
     359                        frame = media.edit( data );
     360                        frame.on( 'close', function () {
     361                                frame.detach();
     362                        } );
     363                        frame.state( self.shortcode + '-details' ).on( 'update', function( selection ) {
     364                                var shortcode, shortcode = wp.media[ self.shortcode ].update( selection ).string();
     365                                $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
     366                                wp.mce.views.refreshView( self, shortcode );
     367                                self.render( node );
     368                                frame.detach();
     369                        } );
     370                        frame.open();
     371                }
     372        };
     373
     374        wp.mce.video = _.extend({}, wp.mce.media, {
     375                shortcode: 'video',
     376                View: wp.mce.View.extend({
     377                        className: 'editor-' + this.shortcode,
     378                        template:  media.template('editor-video'),
     379
     380                        initialize: function( options ) {
     381                                this.shortcode = options.shortcode;
     382                                _.bindAll(wp.mce.video, 'render');
     383                                $(this).on( 'ready', wp.mce.video.render );
     384                        },
     385
     386                        getHtml: function() {
     387                                var attrs = this.shortcode.attrs.named;
     388                                return this.template({ model: attrs });
     389                        }
     390                })
     391        });
     392        wp.mce.views.register( 'video', wp.mce.video );
     393
     394        wp.mce.audio = _.extend({}, wp.mce.media, {
     395                shortcode: 'audio',
     396                View: wp.mce.View.extend({
     397                        className: 'editor-audio',
     398                        template:  media.template('editor-audio'),
     399
     400                        initialize: function( options ) {
     401                                console.log( options.shortcode );
     402                                this.shortcode = options.shortcode;
     403                                _.bindAll(wp.mce.audio, 'render');
     404                                $(this).on( 'ready', wp.mce.audio.render );
     405                        },
     406
     407                        getHtml: function() {
     408                                var attrs = this.shortcode.attrs.named;
     409                                return this.template({ model: attrs });
     410                        }
     411                })
     412        });
     413        wp.mce.views.register( 'audio', wp.mce.audio );
    305414}(jQuery));

  • src/wp-includes/js/media-editor.js

     
    581581                        return frame;
    582582                },
    583583
    584                 shortcode : function (shortcode) {
    585                         var self = this;
     584                update : function (model) {
     585                        var self = this, content;
    586586
    587                         _.each( wp.media.audio.defaults, function( value, key ) {
    588                                 shortcode[ key ] = self.coerce( shortcode, key );
     587                        _.each( this.defaults, function( value, key ) {
     588                                model[ key ] = self.coerce( model, key );
    589589
    590                                 if ( value === shortcode[ key ] ) {
    591                                         delete shortcode[ key ];
     590                                if ( value === model[ key ] ) {
     591                                        delete model[ key ];
    592592                                }
    593593                        });
    594594
    595                         return wp.shortcode.string({
    596                                 tag:     'audio',
    597                                 attrs:   shortcode
     595                        content = model.content;
     596                        delete model.content;
     597
     598                        return new wp.shortcode({
     599                                tag: 'audio',
     600                                attrs: model,
     601                                content: content
    598602                        });
    599603                }
    600604        }, wp.media.mixin);
    … …  
    631635                        return frame;
    632636                },
    633637
    634                 shortcode : function (shortcode) {
    635                         var self = this, content = shortcode.content;
    636                         delete shortcode.content;
     638                update : function (model) {
     639                        var self = this, content = '';
    637640
    638641                        _.each( this.defaults, function( value, key ) {
    639                                 shortcode[ key ] = self.coerce( shortcode, key );
     642                                model[ key ] = self.coerce( model, key );
    640643
    641                                 if ( value === shortcode[ key ] ) {
    642                                         delete shortcode[ key ];
     644                                if ( value === model[ key ] ) {
     645                                        delete model[ key ];
    643646                                }
    644647                        });
    645648
    646                         return wp.shortcode.string({
    647                                 tag:     'video',
    648                                 attrs:   shortcode,
     649                        content = model.content;
     650                        delete model.content;
     651
     652                        return new wp.shortcode({
     653                                tag: 'video',
     654                                attrs: model,
    649655                                content: content
    650656                        });
    651657                }
    … …  
    11111117                 * @global wp.media.view.l10n
    11121118                 */
    11131119                init: function() {
    1114                         $(document.body).on( 'click', '.insert-media', function( event ) {
    1115                                 var elem = $( event.currentTarget ),
    1116                                         editor = elem.data('editor'),
    1117                                         options = {
    1118                                                 frame:    'post',
    1119                                                 state:    'insert',
    1120                                                 title:    wp.media.view.l10n.addMedia,
    1121                                                 multiple: true
    1122                                         };
     1120                        $(document.body)
     1121                                .on( 'click', '.insert-media', function( event ) {
     1122                                        var elem = $( event.currentTarget ),
     1123                                                editor = elem.data('editor'),
     1124                                                options = {
     1125                                                        frame:    'post',
     1126                                                        state:    'insert',
     1127                                                        title:    wp.media.view.l10n.addMedia,
     1128                                                        multiple: true
     1129                                                };
    11231130
    1124                                 event.preventDefault();
     1131                                        event.preventDefault();
    11251132
    1126                                 // Remove focus from the `.insert-media` button.
    1127                                 // Prevents Opera from showing the outline of the button
    1128                                 // above the modal.
    1129                                 //
    1130                                 // See: http://core.trac.wordpress.org/ticket/22445
    1131                                 elem.blur();
     1133                                        // Remove focus from the `.insert-media` button.
     1134                                        // Prevents Opera from showing the outline of the button
     1135                                        // above the modal.
     1136                                        //
     1137                                        // See: http://core.trac.wordpress.org/ticket/22445
     1138                                        elem.blur();
    11321139
    1133                                 if ( elem.hasClass( 'gallery' ) ) {
    1134                                         options.state = 'gallery';
    1135                                         options.title = wp.media.view.l10n.createGalleryTitle;
    1136                                 } else if ( elem.hasClass( 'playlist' ) ) {
    1137                                         options.state = 'playlist';
    1138                                         options.title = wp.media.view.l10n.createPlaylistTitle;
    1139                                 } else if ( elem.hasClass( 'video-playlist' ) ) {
    1140                                         options.state = 'video-playlist';
    1141                                         options.title = wp.media.view.l10n.createVideoPlaylistTitle;
    1142                                 }
     1140                                        if ( elem.hasClass( 'gallery' ) ) {
     1141                                                options.state = 'gallery';
     1142                                                options.title = wp.media.view.l10n.createGalleryTitle;
     1143                                        } else if ( elem.hasClass( 'playlist' ) ) {
     1144                                                options.state = 'playlist';
     1145                                                options.title = wp.media.view.l10n.createPlaylistTitle;
     1146                                        } else if ( elem.hasClass( 'video-playlist' ) ) {
     1147                                                options.state = 'video-playlist';
     1148                                                options.title = wp.media.view.l10n.createVideoPlaylistTitle;
     1149                                        }
    11431150
    1144                                 wp.media.editor.open( editor, options );
    1145                         });
     1151                                        wp.media.editor.open( editor, options );
     1152                                })
     1153                                .on( 'click', '.wp-switch-editor', function () {
     1154                                        var p;
     1155                                        if ( window.mejs && window.mejs.players ) {
     1156                                                for ( p in window.mejs.players ) {
     1157                                                        window.mejs.players[p].pause();
     1158                                                }
     1159                                        }
     1160                                } );
    11461161
    11471162                        // Initialize and render the Editor drag-and-drop uploader.
    11481163                        new wp.media.view.EditorUploader().render();

  • src/wp-includes/js/media-models.js

     
    467467                        this.attachment = attachment;
    468468                        this.extension = attachment.get('filename' ).split('.').pop();
    469469
     470                        this.unset( 'src' );
    470471                        if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
    471472                                this.set( this.extension, this.attachment.get( 'url' ) );
    472473                        } else {

  • src/wp-includes/js/media-views.js

     
    65426542                        }, this.options );
    65436543                },
    65446544
    6545                 /**
    6546                  * When multiple players in the DOM contain the same src, things get weird.
    6547                  *
    6548                  * @param {HTMLElement} media
    6549                  * @returns {HTMLElement}
    6550                  */
    6551                 prepareSrc : function (media) {
    6552                         var i = wp.media.view.MediaDetails.instances++;
    6553                         _.each( $(media).find('source'), function (source) {
    6554                                 source.src = [
    6555                                         source.src,
    6556                                         source.src.indexOf('?') > -1 ? '&' : '?',
    6557                                         '_=',
    6558                                         i
    6559                                 ].join('');
    6560                         });
    6561 
    6562                         return media;
    6563                 },
    6564 
    65656545                removeSetting : function (e) {
    65666546                        var wrap = $( e.currentTarget ).parent(), setting;
    65676547
    … …  
    66336613                },
    66346614
    66356615                unsetPlayer : function() {
     6616                        var p;
    66366617                        if ( this.player ) {
    6637                                 if ( _.isUndefined( this.mejs.pluginType ) ) {
    6638                                         this.mejs.pause();
     6618                                for ( p in window.mejs.players ) {
     6619                                        window.mejs.players[p].pause();
    66396620                                }
    66406621                                this.removePlayer();
    66416622                                this.player = false;
    … …  
    66756656                        this.$( '.embed-media-settings' ).scrollTop( 0 );
    66766657                }
    66776658        }, {
    6678                 instances : 0
     6659                instances : 0,
     6660
     6661                /**
     6662                 * When multiple players in the DOM contain the same src, things get weird.
     6663                 *
     6664                 * @param {HTMLElement} media
     6665                 * @returns {HTMLElement}
     6666                 */
     6667                prepareSrc : function (media) {
     6668                        var i = wp.media.view.MediaDetails.instances++;
     6669                        _.each( $(media).find('source'), function (source) {
     6670                                source.src = [
     6671                                        source.src,
     6672                                        source.src.indexOf('?') > -1 ? '&' : '?',
     6673                                        '_=',
     6674                                        i
     6675                                ].join('');
     6676                        });
     6677
     6678                        return media;
     6679                }
    66796680        });
    66806681
    66816682        /**
    … …  
    67006701                                if ( audio.is(':hidden') ) {
    67016702                                        audio.show();
    67026703                                }
    6703                                 this.media = this.prepareSrc( audio.get(0) );
     6704                                this.media = media.view.MediaDetails.prepareSrc( audio.get(0) );
    67046705                        } else {
    67056706                                audio.hide();
    67066707                                this.media = false;
    … …  
    67346735                                }
    67356736
    67366737                                if ( ! video.hasClass('youtube-video') ) {
    6737                                         this.media = this.prepareSrc( video.get(0) );
     6738                                        this.media = media.view.MediaDetails.prepareSrc( video.get(0) );
    67386739                                } else {
    67396740                                        this.media = video.get(0);
    67406741                                }

  • src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

     
    2525        }
    2626
    2727        function replaceAVShortcodes( content ) {
    28                 var testRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]/,
    29                         replaceRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
     28                var testRegex = /\[(video-playlist|playlist)[^\]]*\]/,
     29                        replaceRegex = /\[(video-playlist|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
    3030
    3131                while ( testRegex.test( content ) ) {
    3232                        content = content.replace( replaceRegex, replaceCallback );
    … …  
    9292                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    9393                                frame.detach();
    9494                        });
    95                 } else if ( editor.dom.hasClass( node, 'wp-video' ) ) {
    96                         frame = wp.media.video.edit( data );
    97                         frame.on( 'close', function () {
    98                                 frame.detach();
    99                         } );
    100                         frame.state( 'video-details' ).on(
    101                                 'update replace add-source select-poster-image add-track',
    102                                 function ( selection ) {
    103                                         var shortcode = wp.media.video.shortcode( selection );
    104                                         editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    105                                         frame.detach();
    106                                 }
    107                         );
    108                         frame.open();
    109                 } else if ( editor.dom.hasClass( node, 'wp-audio' ) ) {
    110                         frame = wp.media.audio.edit( data );
    111                         frame.on( 'close', function () {
    112                                 frame.detach();
    113                         } );
    114                         frame.state( 'audio-details' ).on( 'update replace add-source', function ( selection ) {
    115                                 var shortcode = wp.media.audio.shortcode( selection );
    116                                 editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    117                                 frame.detach();
    118                         } );
    119                         frame.open();
    12095                } else {
    12196                        // temp
    12297                        window.console && window.console.log( 'Edit AV shortcode ' + data );

  • src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

     
    237237/**
    238238 * Gallery preview
    239239 */
    240 .wpview-type-gallery {
     240.wpview-type-gallery,
     241.wpview-type-audio,
     242.wpview-type-video {
    241243    position: relative;
    242244    padding: 0 0 12px;
    243245    margin-bottom: 16px;
    … …  
    244246        cursor: pointer;
    245247}
    246248
    247  .wpview-type-gallery:after {
     249.wpview-type-audio,
     250.wpview-type-video {
     251    padding: 32px 0 0;
     252}
     253
     254.wpview-type-audio audio,
     255.wpview-type-video video {
     256    display: inline-block;
     257        max-width: 100%;
     258}
     259
     260 .wpview-type-gallery:after,
     261 .wpview-type-audio:after,
     262 .wpview-type-video:after {
    248263    content: '';
    249264    display: block;
    250265    height: 0;
    … …  
    252267    visibility: hidden;
    253268}
    254269
    255  .wpview-type-gallery.selected {
     270.wpview-type-gallery.selected {
    256271        background-color: #efefef;
    257272}
    258273
    259 .wpview-type-gallery .toolbar {
     274.wpview-type-audio,
     275.wpview-type-video {
     276        background-color: #efefef;
     277}
     278
     279.wpview-type-gallery .toolbar,
     280.wpview-type-audio .toolbar,
     281.wpview-type-video .toolbar {
    260282    position: absolute;
    261283    top: 0;
    262284    left: 0;
    … …  
    266288        display: none;
    267289}
    268290
     291.wpview-type-audio .toolbar,
     292.wpview-type-video .toolbar {
     293        display: block;
     294}
     295
    269296.wpview-type-gallery.selected .toolbar {
    270297        display: block;
    271298}
    272299
    273 .wpview-type-gallery .toolbar span {
     300.wpview-type-gallery .toolbar span,
     301.wpview-type-audio .toolbar span
     302.wpview-type-video .toolbar span {
    274303        cursor: pointer;
    275304}
    276305

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

     
    88 */
    99
    1010/**
     11 * Output the markup for a audio tag to be used in an Underscore template
     12 *      when data.model is passed.
     13 *
     14 * @since 3.9.0
     15 */
     16function wp_underscore_audio_template() {
     17        $audio_types = wp_get_audio_extensions();
     18?>
     19<audio controls
     20        class="wp-audio-shortcode"
     21        preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
     22        <#
     23        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     24        ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     25                #> <?php echo $attr ?><#
     26        }
     27        <?php endforeach ?>#>
     28>
     29        <# if ( ! _.isEmpty( data.model.src ) ) { #>
     30        <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     31        <# } #>
     32
     33        <?php foreach ( $audio_types as $type ):
     34        ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
     35        <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
     36        <# } #>
     37        <?php endforeach;
     38?></audio>
     39<?php
     40}
     41
     42/**
     43 * Output the markup for a video tag to be used in an Underscore template
     44 *      when data.model is passed.
     45 *
     46 * @since 3.9.0
     47 */
     48function wp_underscore_video_template( $onload = false ) {
     49        $video_types = wp_get_video_extensions();
     50?>
     51<#
     52var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
     53        w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
     54        h = ! data.model.height ? 360 : data.model.height;
     55
     56if ( data.model.width && w !== data.model.width ) {
     57        h = Math.ceil( ( h * w ) / data.model.width );
     58}
     59#>
     60<video controls
     61        class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
     62        width="{{ w }}"
     63        height="{{ h }}"
     64        <?php
     65        $props = array( 'poster' => '', 'preload' => 'metadata' );
     66        foreach ( $props as $key => $value ):
     67                if ( empty( $value ) ) {
     68                ?><#
     69                if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
     70                        #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
     71                } #>
     72                <?php } else {
     73                        echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
     74                }
     75        endforeach;
     76        ?><#
     77        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     78        ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     79                #> <?php echo $attr ?><#
     80        }
     81        <?php endforeach ?>#>
     82>
     83        <# if ( ! _.isEmpty( data.model.src ) ) {
     84                if ( isYouTube ) { #>
     85                <source src="{{ data.model.src }}" type="video/youtube" />
     86                <# } else { #>
     87                <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     88                <# }
     89        } #>
     90
     91        <?php foreach ( $video_types as $type ):
     92        ?><# if ( data.model.<?php echo $type ?> ) { #>
     93        <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
     94        <# } #>
     95        <?php endforeach; ?>
     96        {{{ data.model.content }}}
     97</video>
     98<?php
     99}
     100
     101/**
    11102 * Prints the templates used in the media manager.
    12103 *
    13104 * @since 3.5.0
    … …  
    676767                <div class="media-embed media-embed-details">
    677768                        <div class="embed-media-settings embed-audio-settings">
    678769                                <div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
    679                                 <audio controls
    680                                         class="wp-audio-shortcode"
    681                                         preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
    682                                         <#
    683                                         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    684                                         ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    685                                                 #> <?php echo $attr ?><#
    686                                         }
    687                                         <?php endforeach ?>#>
    688                                 >
    689                                         <# if ( ! _.isEmpty( data.model.src ) ) { #>
    690                                         <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
    691                                         <# } #>
    692 
    693                                         <?php foreach ( $audio_types as $type ):
    694                                         ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
    695                                         <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
    696                                         <# } #>
    697                                         <?php endforeach;
    698                                 ?></audio>
     770                                <?php wp_underscore_audio_template() ?>
    699771                                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    700772                                <label class="setting">
    701773                                        <span>SRC</span>
    … …  
    738810                </div>
    739811        </script>
    740812
     813        <script type="text/html" id="tmpl-editor-audio">
     814                <div class="toolbar">
     815                        <div class="dashicons dashicons-format-audio edit"></div>
     816                        <div class="dashicons dashicons-no-alt remove"></div>
     817                </div>
     818                <?php wp_underscore_audio_template( true ) ?>
     819        </script>
     820
    741821        <script type="text/html" id="tmpl-video-details">
    742822                <?php $video_types = wp_get_video_extensions(); ?>
    743823                <div class="media-embed media-embed-details">
    … …  
    744824                        <div class="embed-media-settings embed-video-settings">
    745825                                <div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
    746826                                <div class="wp-video-holder">
    747                                 <#
    748                                 var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
    749                                         w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
    750                                         h = ! data.model.height ? 360 : data.model.height;
    751 
    752                                 if ( data.model.width && w !== data.model.width ) {
    753                                         h = Math.ceil( ( h * w ) / data.model.width );
    754                                 }
    755 
    756                                 #>
    757                                 <video controls
    758                                         class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
    759                                         width="{{ w }}"
    760                                         height="{{ h }}"
    761                                         <?php
    762                                         $props = array( 'poster' => '', 'preload' => 'metadata' );
    763                                         foreach ( $props as $key => $value ):
    764                                                 if ( empty( $value ) ) {
    765                                                 ?><#
    766                                                 if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
    767                                                         #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
    768                                                 } #>
    769                                                 <?php } else {
    770                                                         echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
    771                                                 }
    772                                         endforeach;
    773                                         ?><#
    774                                         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    775                                         ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    776                                                 #> <?php echo $attr ?><#
    777                                         }
    778                                         <?php endforeach ?>#>
    779                                 >
    780                                         <# if ( ! _.isEmpty( data.model.src ) ) {
    781                                                 if ( isYouTube ) { #>
    782                                                 <source src="{{ data.model.src }}" type="video/youtube" />
    783                                                 <# } else { #>
    784                                                 <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
    785                                                 <# }
    786                                         } #>
    787 
    788                                         <?php foreach ( $video_types as $type ):
    789                                         ?><# if ( data.model.<?php echo $type ?> ) { #>
    790                                         <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
    791                                         <# } #>
    792                                         <?php endforeach; ?>
    793                                         {{{ data.model.content }}}
    794                                 </video>
     827                                <?php wp_underscore_video_template() ?>
    795828                                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    796829                                <label class="setting">
    797830                                        <span>SRC</span>
    … …  
    857890                        </div>
    858891                </div>
    859892        </script>
     893
     894        <script type="text/html" id="tmpl-editor-video">
     895                <div class="toolbar">
     896                        <div class="dashicons dashicons-format-video edit"></div>
     897                        <div class="dashicons dashicons-no-alt remove"></div>
     898                </div>
     899                <?php wp_underscore_video_template( true ) ?>
     900        </script>
    860901        <?php
    861902
    862903                //TODO: do we want to deal with the fact that the elements used for gallery items are filterable and can be overriden via shortcode attributes