WordPress.org
Get WordPress

Make WordPress Core

Changeset 27478


Ignore:
Timestamp:
03/09/2014 05:24:10 AM (13 years ago)
Author:
wonderboymusic
Message:

Audio/Video shortcodes in the media modal:

  • Make a generic model, wp.media.model.PostMedia, which replaces wp.media.model.PostAudio and wp.media.model.PostVideo
  • Make a generic library, wp.media.controller.MediaLibrary, which replaces wp.media.controller.ReplaceVideo and wp.media.controller.ReplaceAudio
  • wp.media.controller.MediaLibrary is used to create new states that want to load a library filtered by type, making it incredibly simple to add states to frames. See wp.media.view.MediaFrame.VideoDetails and wp.media.view.MediaFrame.AudioDetails.

UX changes:

  • Add the ability to manage HTML5 fallbacks - add additional <source>s or remove specific <source>s
  • In the Video Details state, add the ability to select a poster image

See #27016.

Location:
trunk/src/wp-includes
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r27477 r27478  
    454454
    455455        /**
    456          * wp.media.model.PostAudio
     456         * wp.media.model.PostMedia
    457457         *
    458458         * @constructor
    459459         * @augments Backbone.Model
    460460         **/
    461         media.model.PostAudio = Backbone.Model.extend({
     461        media.model.PostMedia = Backbone.Model.extend({
    462462                initialize: function() {
    463463                        this.attachment = false;
    464464                },
    465465
     466                setSource: function ( attachment ) {
     467                        this.attachment = attachment;
     468                        this.extension = attachment.get('filename' ).split('.').pop();
     469
     470                        if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
     471                                this.set( this.extension, this.attachment.get( 'url' ) );
     472                        } else {
     473                                this.unset( this.extension );
     474                        }
     475                },
     476
    466477                changeAttachment: function( attachment ) {
    467478                        var self = this;
    468479
    469                         this.attachment = attachment;
    470                         this.extension = attachment.get('filename' ).split('.').pop();
    471 
    472                         if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
    473                                 this.set( this.extension, attachment.get( 'url' ) );
    474                         } else {
    475                                 this.unset( this.extension );
    476                         }
    477 
    478                         _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function (ext) {
    479                                 self.unset( ext );
    480                         } );
    481                 }
    482         });
    483 
    484         /**
    485          * wp.media.model.PostVideo
    486          *
    487          * @constructor
    488          * @augments Backbone.Model
    489          **/
    490         media.model.PostVideo = Backbone.Model.extend({
    491                 initialize: function() {
    492                         this.attachment = false;
    493                 },
    494 
    495                 changeAttachment: function( attachment ) {
    496                         var self = this;
    497 
    498                         this.attachment = attachment;
    499                         this.extension = attachment.get('filename' ).split('.').pop();
    500 
    501                         if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
    502                                 this.set( this.extension, attachment.get( 'url' ) );
    503                         } else {
    504                                 this.unset( this.extension );
    505                         }
     480                        this.setSource( attachment );
    506481
    507482                        _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function (ext) {

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

    r27476 r27478  
    787787
    788788                initialize: function( options ) {
    789                         this.audio = options.audio;
     789                        this.media = options.media;
    790790                        media.controller.State.prototype.initialize.apply( this, arguments );
    791791                }
    … …  
    813813
    814814                initialize: function( options ) {
    815                         this.video = options.video;
     815                        this.media = options.media;
    816816                        media.controller.State.prototype.initialize.apply( this, arguments );
    817817                }
    … …  
    11841184
    11851185        /**
    1186          * wp.media.controller.ReplaceVideo
    1187          *
    1188          * Replace a selected single video
     1186         * wp.media.controller.MediaLibrary
    11891187         *
    11901188         * @constructor
    … …  
    11931191         * @augments Backbone.Model
    11941192         */
    1195         media.controller.ReplaceVideo = media.controller.Library.extend({
     1193        media.controller.MediaLibrary = media.controller.Library.extend({
    11961194                defaults: _.defaults({
    1197                         id:         'replace-video',
    11981195                        filterable: 'uploaded',
    11991196                        multiple:   false,
    1200                         toolbar:    'replace',
    1201                         title:      l10n.replaceVideoTitle,
    1202                         priority:   60,
    1203                         syncSelection: false
     1197                        priority:   80,
     1198                        syncSelection: false,
     1199                        displaySettings: true
    12041200                }, media.controller.Library.prototype.defaults ),
    12051201
    … …  
    12071203                        var library, comparator;
    12081204
    1209                         this.video = options.video;
    1210                         // If we haven't been provided a `library`, create a `Selection`.
    1211                         if ( ! this.get('library') ) {
    1212                                 this.set( 'library', media.query({ type: 'video' }) );
    1213                         }
     1205                        this.media = options.media;
     1206                        this.set( 'library', media.query({ type: options.type }) );
    12141207
    12151208                        media.controller.Library.prototype.initialize.apply( this, arguments );
    … …  
    12451238                updateSelection: function() {
    12461239                        var selection = this.get('selection'),
    1247                                 attachment = this.video.attachment;
    1248 
    1249                         selection.reset( attachment ? [ attachment ] : [] );
    1250                 }
    1251         });
    1252 
    1253         /**
    1254          * wp.media.controller.ReplaceAudio
    1255          *
    1256          * Replace a selected single audio file
    1257          *
    1258          * @constructor
    1259          * @augments wp.media.controller.Library
    1260          * @augments wp.media.controller.State
    1261          * @augments Backbone.Model
    1262          */
    1263         media.controller.ReplaceAudio = media.controller.Library.extend({
    1264                 defaults: _.defaults({
    1265                         id:         'replace-audio',
    1266                         filterable: 'uploaded',
    1267                         multiple:   false,
    1268                         toolbar:    'replace',
    1269                         title:      l10n.replaceAudioTitle,
    1270                         priority:   60,
    1271                         syncSelection: false
    1272                 }, media.controller.Library.prototype.defaults ),
    1273 
    1274                 initialize: function( options ) {
    1275                         var library, comparator;
    1276 
    1277                         this.audio = options.audio;
    1278                         // If we haven't been provided a `library`, create a `Selection`.
    1279                         if ( ! this.get('library') ) {
    1280                                 this.set( 'library', media.query({ type: 'audio' }) );
    1281                         }
    1282 
    1283                         media.controller.Library.prototype.initialize.apply( this, arguments );
    1284 
    1285                         library    = this.get('library');
    1286                         comparator = library.comparator;
    1287 
    1288                         // Overload the library's comparator to push items that are not in
    1289                         // the mirrored query to the front of the aggregate collection.
    1290                         library.comparator = function( a, b ) {
    1291                                 var aInQuery = !! this.mirroring.get( a.cid ),
    1292                                         bInQuery = !! this.mirroring.get( b.cid );
    1293 
    1294                                 if ( ! aInQuery && bInQuery ) {
    1295                                         return -1;
    1296                                 } else if ( aInQuery && ! bInQuery ) {
    1297                                         return 1;
    1298                                 } else {
    1299                                         return comparator.apply( this, arguments );
    1300                                 }
    1301                         };
    1302 
    1303                         // Add all items in the selection to the library, so any featured
    1304                         // images that are not initially loaded still appear.
    1305                         library.observe( this.get('selection') );
    1306                 },
    1307 
    1308                 activate: function() {
    1309                         this.updateSelection();
    1310                         media.controller.Library.prototype.activate.apply( this, arguments );
    1311                 },
    1312 
    1313                 updateSelection: function() {
    1314                         var selection = this.get('selection'),
    1315                                 attachment = this.audio.attachment;
     1240                                attachment;
     1241
     1242                        attachment = this.media.attachment;
    13161243
    13171244                        selection.reset( attachment ? [ attachment ] : [] );
    … …  
    27952722
    27962723                initialize: function( options ) {
    2797                         this.audio = new media.model.PostAudio( options.metadata );
    2798                         this.options.selection = new media.model.Selection( this.audio.attachment, { multiple: false } );
     2724                        this.media = new media.model.PostMedia( options.metadata );
     2725                        this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
    27992726                        media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
    28002727                },
    … …  
    28072734                        this.on( 'toolbar:render:audio-details', this.renderAudioDetailsToolbar, this );
    28082735                        // override the select toolbar
    2809                         this.on( 'toolbar:render:replace', this.renderReplaceAudioToolbar, this );
     2736                        this.on( 'toolbar:render:replace-audio', this.renderReplaceAudioToolbar, this );
     2737                        this.on( 'toolbar:render:add-audio-source', this.renderAddAudioSourceToolbar, this );
    28102738                },
    28112739
    28122740                createStates: function() {
    28132741                        this.states.add([
    2814                                 new media.controller.AudioDetails({
    2815                                         audio: this.audio,
     2742                                new media.controller.AudioDetails( {
     2743                                        media: this.media,
    28162744                                        editable: false,
    28172745                                        menu: 'audio-details'
    2818                                 }),
    2819                                 new media.controller.ReplaceAudio({
     2746                                } ),
     2747
     2748                                new media.controller.MediaLibrary( {
     2749                                        type: 'audio',
    28202750                                        id: 'replace-audio',
    2821                                         library:   media.query( { type: 'audio' } ),
    2822                                         audio: this.audio,
    2823                                         multiple:  false,
    2824                                         title:     l10n.audioReplaceTitle,
    2825                                         menu: 'audio-details',
    2826                                         toolbar: 'replace',
    2827                                         priority:  80,
    2828                                         displaySettings: true
    2829                                 })
     2751                                        title: l10n.audioReplaceTitle,
     2752                                        toolbar: 'replace-audio',
     2753                                        media: this.media,
     2754                                        menu: 'audio-details'
     2755                                } ),
     2756
     2757
     2758                                new media.controller.MediaLibrary( {
     2759                                        type: 'audio',
     2760                                        id: 'add-audio-source',
     2761                                        title: l10n.audioAddSourceTitle,
     2762                                        toolbar: 'add-audio-source',
     2763                                        media: this.media,
     2764                                        menu: 'audio-details'
     2765                                } )
    28302766                        ]);
    28312767                },
    … …  
    28342770                        var view = new media.view.AudioDetails({
    28352771                                controller: this,
    2836                                 model: this.state().audio,
    2837                                 attachment: this.state().audio.attachment
     2772                                model: this.state().media,
     2773                                attachment: this.state().media.attachment
    28382774                        }).render();
    28392775
    … …  
    28812817                                                        controller.close();
    28822818
    2883                                                         // not sure if we want to use wp.media.string.image which will create a shortcode or
    2884                                                         // perhaps wp.html.string to at least to build the <img />
    2885                                                         state.trigger( 'update', controller.audio.toJSON() );
     2819                                                        state.trigger( 'update', controller.media.toJSON() );
    28862820
    28872821                                                        // Restore and reset the default state.
    … …  
    29092843                                                                attachment = selection.single();
    29102844
    2911                                                         controller.audio.changeAttachment( attachment, state.display( attachment ) );
     2845                                                        controller.media.changeAttachment( attachment, state.display( attachment ) );
    29122846
    29132847                                                        // not sure if we want to use wp.media.string.image which will create a shortcode or
    29142848                                                        // perhaps wp.html.string to at least to build the <img />
    2915                                                         state.trigger( 'replace', controller.audio.toJSON() );
     2849                                                        state.trigger( 'replace', controller.media.toJSON() );
     2850
     2851                                                        // Restore and reset the default state.
     2852                                                        controller.setState( controller.options.state );
     2853                                                        controller.reset();
     2854                                                }
     2855                                        }
     2856                                }
     2857                        }) );
     2858                },
     2859
     2860                renderAddAudioSourceToolbar: function() {
     2861                        this.toolbar.set( new media.view.Toolbar({
     2862                                controller: this,
     2863                                items: {
     2864                                        replace: {
     2865                                                style:    'primary',
     2866                                                text:     l10n.audioAddSourceTitle,
     2867                                                priority: 80,
     2868
     2869                                                click: function() {
     2870                                                        var controller = this.controller,
     2871                                                                state = controller.state(),
     2872                                                                selection = state.get( 'selection' ),
     2873                                                                attachment = selection.single();
     2874
     2875                                                        controller.media.setSource( attachment, state.display( attachment ) );
     2876
     2877                                                        state.trigger( 'add-source', controller.media.toJSON() );
    29162878
    29172879                                                        // Restore and reset the default state.
    … …  
    29502912
    29512913                initialize: function( options ) {
    2952                         this.video = new media.model.PostVideo( options.metadata );
    2953                         this.options.selection = new media.model.Selection( this.video.attachment, { multiple: false } );
     2914                        this.media = new media.model.PostMedia( options.metadata );
     2915                        this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
    29542916                        media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
    29552917                },
    … …  
    29622924                        this.on( 'toolbar:render:video-details', this.renderVideoDetailsToolbar, this );
    29632925                        // override the select toolbar
    2964                         this.on( 'toolbar:render:replace', this.renderReplaceVideoToolbar, this );
     2926                        this.on( 'toolbar:render:replace-video', this.renderReplaceVideoToolbar, this );
     2927                        this.on( 'toolbar:render:add-video-source', this.renderAddVideoSourceToolbar, this );
     2928                        this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this );
    29652929                },
    29662930
    … …  
    29682932                        this.states.add([
    29692933                                new media.controller.VideoDetails({
    2970                                         video: this.video,
     2934                                        media: this.media,
    29712935                                        editable: false,
    29722936                                        menu: 'video-details'
    29732937                                }),
    2974                                 new media.controller.ReplaceVideo({
     2938
     2939                                new media.controller.MediaLibrary( {
     2940                                        type: 'video',
    29752941                                        id: 'replace-video',
    2976                                         library:   media.query( { type: 'video' } ),
    2977                                         video: this.video,
    2978                                         multiple:  false,
    2979                                         title:     l10n.videoReplaceTitle,
    2980                                         menu: 'video-details',
    2981                                         toolbar: 'replace',
    2982                                         priority:  80,
    2983                                         displaySettings: true
    2984                                 })
     2942                                        title: l10n.videoReplaceTitle,
     2943                                        toolbar: 'replace-video',
     2944                                        media: this.media,
     2945                                        menu: 'video-details'
     2946                                } ),
     2947
     2948                                new media.controller.MediaLibrary( {
     2949                                        type: 'video',
     2950                                        id: 'add-video-source',
     2951                                        title: l10n.videoAddSourceTitle,
     2952                                        toolbar: 'add-video-source',
     2953                                        media: this.media,
     2954                                        menu: 'video-details'
     2955                                } ),
     2956
     2957                                new media.controller.MediaLibrary( {
     2958                                        type: 'image',
     2959                                        id: 'select-poster-image',
     2960                                        title: l10n.videoSelectPosterImageTitle,
     2961                                        toolbar: 'select-poster-image',
     2962                                        media: this.media,
     2963                                        menu: 'video-details'
     2964                                } )
    29852965                        ]);
    29862966                },
    … …  
    29892969                        var view = new media.view.VideoDetails({
    29902970                                controller: this,
    2991                                 model: this.state().video,
    2992                                 attachment: this.state().video.attachment
     2971                                model: this.state().media,
     2972                                attachment: this.state().media.attachment
    29932973                        }).render();
    29942974
    … …  
    30383018                                                        // not sure if we want to use wp.media.string.image which will create a shortcode or
    30393019                                                        // perhaps wp.html.string to at least to build the <img />
    3040                                                         state.trigger( 'update', controller.video.toJSON() );
     3020                                                        state.trigger( 'update', controller.media.toJSON() );
    30413021
    30423022                                                        // Restore and reset the default state.
    … …  
    30643044                                                                attachment = selection.single();
    30653045
    3066                                                         controller.video.changeAttachment( attachment, state.display( attachment ) );
    3067 
    3068                                                         state.trigger( 'replace', controller.video.toJSON() );
     3046                                                        controller.media.changeAttachment( attachment, state.display( attachment ) );
     3047
     3048                                                        state.trigger( 'replace', controller.media.toJSON() );
     3049
     3050                                                        // Restore and reset the default state.
     3051                                                        controller.setState( controller.options.state );
     3052                                                        controller.reset();
     3053                                                }
     3054                                        }
     3055                                }
     3056                        }) );
     3057                },
     3058
     3059                renderAddVideoSourceToolbar: function() {
     3060                        this.toolbar.set( new media.view.Toolbar({
     3061                                controller: this,
     3062                                items: {
     3063                                        replace: {
     3064                                                style:    'primary',
     3065                                                text:     l10n.videoAddSourceTitle,
     3066                                                priority: 80,
     3067
     3068                                                click: function() {
     3069                                                        var controller = this.controller,
     3070                                                                state = controller.state(),
     3071                                                                selection = state.get( 'selection' ),
     3072                                                                attachment = selection.single();
     3073
     3074                                                        controller.media.setSource( attachment, state.display( attachment ) );
     3075
     3076                                                        state.trigger( 'add-source', controller.media.toJSON() );
     3077
     3078                                                        // Restore and reset the default state.
     3079                                                        controller.setState( controller.options.state );
     3080                                                        controller.reset();
     3081                                                }
     3082                                        }
     3083                                }
     3084                        }) );
     3085                },
     3086
     3087                renderSelectPosterImageToolbar: function() {
     3088                        this.toolbar.set( new media.view.Toolbar({
     3089                                controller: this,
     3090                                items: {
     3091                                        replace: {
     3092                                                style:    'primary',
     3093                                                text:     l10n.videoSelectPosterImageTitle,
     3094                                                priority: 80,
     3095
     3096                                                click: function() {
     3097                                                        var controller = this.controller,
     3098                                                                state = controller.state(),
     3099                                                                selection = state.get( 'selection' ),
     3100                                                                attachment = selection.single();
     3101
     3102                                                        controller.media.set( 'poster', attachment.get( 'url' ) );
     3103
     3104                                                        state.trigger( 'set-poster-image', controller.media.toJSON() );
    30693105
    30703106                                                        // Restore and reset the default state.
    … …  
    64166452        media.view.MediaDetails = media.view.Settings.AttachmentDisplay.extend({
    64176453                initialize: function() {
    6418                         _.bindAll(this, 'success', 'close');
    6419 
    6420                         this.listenTo( this.controller, 'close', this.close );
     6454                        _.bindAll(this, 'success', 'unsetPlayer');
     6455
     6456                        this.listenTo( this.controller, 'close', this.unsetPlayer );
    64216457                        this.on( 'ready', this.setPlayer );
     6458                        this.on( 'media:setting:remove', this.unsetPlayer );
     6459                        this.on( 'media:setting:remove', this.render );
     6460                        this.on( 'media:setting:remove', this.setPlayer );
     6461                        this.events = _.extend( this.events, {
     6462                                'click .remove-setting' : 'removeSetting'
     6463                        } );
    64226464
    64236465                        media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    … …  
    64556497                },
    64566498
     6499                removeSetting : function (e) {
     6500                        var setting = $( e.currentTarget ).parent();
     6501
     6502                        this.model.unset( setting.find( 'input' ).data( 'setting' ) );
     6503
     6504                        setting.remove();
     6505
     6506                        this.trigger( 'media:setting:remove', this );
     6507                },
     6508
    64576509                setPlayer : function () {
    64586510                        if ( ! this.player && this.media ) {
    … …  
    64736525                 *      its container and re-add it to the DOM.
    64746526                 */
    6475                 remove: function() {
     6527                removePlayer: function() {
    64766528                        var t = this.player, featureIndex, feature;
    64776529
    … …  
    65016553                },
    65026554
    6503                 close : function() {
     6555                unsetPlayer : function() {
    65046556                        if ( this.player ) {
    65056557                                if ( _.isUndefined( this.mejs.pluginType ) ) {
    65066558                                        this.mejs.pause();
    65076559                                }
    6508                                 this.remove();
     6560                                this.removePlayer();
    65096561                                this.player = false;
    65106562                        }
    … …  
    65616613
    65626614                setMedia: function() {
    6563                         var audio = this.$('.wp-audio-shortcode').get(0);
    6564 
    6565                         this.media = this.prepareSrc( audio );
     6615                        var audio = this.$('.wp-audio-shortcode');
     6616
     6617                        if ( audio.find( 'source' ).length ) {
     6618                                if ( audio.is(':hidden') ) {
     6619                                        audio.show();
     6620                                }
     6621                                this.media = this.prepareSrc( audio.get(0) );
     6622                        } else {
     6623                                audio.hide();
     6624                                this.media = false;
     6625                        }
    65666626
    65676627                        return this;
    … …  
    65876647                        var video = this.$('.wp-video-shortcode');
    65886648
    6589                         if ( ! video.hasClass('youtube-video') ) {
    6590                                 video = this.prepareSrc( video.get(0) );
     6649                        if ( video.find( 'source' ).length ) {
     6650                                if ( video.is(':hidden') ) {
     6651                                        video.show();
     6652                                }
     6653
     6654                                if ( ! video.hasClass('youtube-video') ) {
     6655                                        this.media = this.prepareSrc( video.get(0) );
     6656                                } else {
     6657                                        this.media = video.get(0);
     6658                                }
    65916659                        } else {
    6592                                 video = video.get(0);
    6593                         }
    6594 
    6595                         this.media = video;
     6660                                video.hide();
     6661                                this.media = false;
     6662                        }
    65966663
    65976664                        return this;

  • trunk/src/wp-includes/js/mediaelement/wp-mediaelement.css

    r27411 r27478  
    1515}
    1616
    17 .audio-details .wp-audio-shortcode {
     17.media-embed-details .wp-audio-shortcode {
    1818        display: inline-block;
    1919        max-width: 400px;
    2020}
    2121
    22 .video-details .embed-video-settings,
    23 .audio-details .embed-audio-settings {
    24         top: 10px;
     22.media-embed-details .embed-media-settings {
     23        padding-top: 0;
    2524}
    2625
    27 .video-details .embed-video-settings .checkbox-setting,
    28 .audio-details .embed-audio-settings .checkbox-setting {
     26.media-embed-details .instructions {
     27        padding: 16px;
     28        max-width: 600px;
     29}
     30
     31.media-embed-details .setting a {
     32        color: #a00;
     33}
     34
     35.media-embed-details .setting a:hover {
     36        color: #f00;
     37}
     38
     39.media-embed-details .embed-media-settings {
     40        top: 70px;
     41}
     42
     43.media-embed-details .embed-media-settings .checkbox-setting {
    2944        width: 100px;
    3045        clear: none;

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

    r27440 r27478  
    9898                                frame.detach();
    9999                        } );
    100                         frame.state( 'video-details' ).on( 'update replace', function ( selection ) {
     100                        frame.state( 'video-details' ).on( 'update replace add-source select-poster-image', function ( selection ) {
    101101                                var shortcode = wp.media.video.shortcode( selection );
    102102                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    … …  
    109109                                frame.detach();
    110110                        } );
    111                         frame.state( 'audio-details' ).on( 'update replace', function ( selection ) {
     111                        frame.state( 'audio-details' ).on( 'update replace add-source', function ( selection ) {
    112112                                var shortcode = wp.media.audio.shortcode( selection );
    113113                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );

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

    r27476 r27478  
    664664        <script type="text/html" id="tmpl-audio-details">
    665665                <?php $audio_types = wp_get_audio_extensions(); ?>
    666                 <div class="media-embed">
     666                <div class="media-embed media-embed-details">
     667                        <div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
    667668                        <div class="embed-media-settings embed-audio-settings">
    668669                                <audio controls
    … …  
    690691                                        <span>SRC</span>
    691692                                        <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
     693                                        <a class="remove-setting">{{{ wp.media.view.l10n.audioRemoveSource }}}</a>
    692694                                </label>
    693695                                <# } #>
    … …  
    699701                                        <span><?php echo strtoupper( $type ) ?></span>
    700702                                        <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
     703                                        <a class="remove-setting">{{{ wp.media.view.l10n.audioRemoveSource }}}</a>
    701704                                </label>
    702705                                <# } #>
    … …  
    728731        <script type="text/html" id="tmpl-video-details">
    729732                <?php $video_types = wp_get_video_extensions(); ?>
    730                 <div class="media-embed">
     733                <div class="media-embed media-embed-details">
     734                        <div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
    731735                        <div class="embed-media-settings embed-video-settings">
    732736                                <div class="wp-video-holder">
    733737                                <#
    734                                 var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
     738                                var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
     739                                        w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
    735740                                        h = ! data.model.height ? 360 : data.model.height;
    736741
    … …  
    738743                                        h = Math.ceil( ( h * w ) / data.model.width );
    739744                                }
     745
    740746                                #>
    741747                                <video controls
    742                                         class="wp-video-shortcode youtube-video"
     748                                        class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
    743749                                        width="{{ w }}"
    744750                                        height="{{ h }}"
    … …  
    763769                                >
    764770                                        <# if ( ! _.isEmpty( data.model.src ) ) {
    765                                                 if ( data.model.src.match(/youtube|youtu\.be/) ) { #>
     771                                                if ( isYouTube ) { #>
    766772                                                <source src="{{ data.model.src }}" type="video/youtube" />
    767773                                                <# } else { #>
    … …  
    780786                                        <span>SRC</span>
    781787                                        <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
     788                                        <a class="remove-setting">{{{ wp.media.view.l10n.videoRemoveSource }}}</a>
    782789                                </label>
    783790                                <# } #>
    … …  
    787794                                        <span><?php echo strtoupper( $type ) ?></span>
    788795                                        <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
     796                                        <a class="remove-setting">{{{ wp.media.view.l10n.videoRemoveSource }}}</a>
    789797                                </label>
    790798                                <# } #>
    791799                                <?php endforeach ?>
    792800                                </div>
     801                                <# if ( ! _.isEmpty( data.model.poster ) ) { #>
    793802                                <label class="setting">
    794803                                        <span><?php _e( 'Poster Image' ); ?></span>
    795                                         <input type="text" data-setting="poster" value="{{ data.model.poster }}" />
    796                                 </label>
     804                                        <input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
     805                                        <a class="remove-setting">{{{ wp.media.view.l10n.videoRemovePoster }}}</a>
     806                                </label>
     807                                <# } #>
    797808                                <div class="setting preload">
    798809                                        <span><?php _e( 'Preload' ); ?></span>

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

    r27476 r27478  
    24442444                'editImage'             => __( 'Edit Image' ),
    24452445
    2446                 // Edit Image
     2446                // Edit Audio
    24472447                'audioDetailsTitle'     => __( 'Audio Details' ),
    24482448                'audioReplaceTitle'     => __( 'Replace Audio' ),
     2449                'audioAddSourceTitle'   => __( 'Add Audio Source' ),
    24492450                'audioDetailsCancel'    => __( 'Cancel Edit' ),
    2450 
    2451                 // Edit Image
     2451                'audioDetailsText'      => __( '"Replace Audio" will remove all associated source files when you update. ' .
     2452                        '"Add Audio Source" allows you to specify alternate sources for maximum native HTML5 audio playback.' ),
     2453                'audioRemoveSource'     => __( 'Remove Audio Source' ),
     2454
     2455                // Edit Video
    24522456                'videoDetailsTitle'     => __( 'Video Details' ),
    24532457                'videoReplaceTitle'     => __( 'Replace Video' ),
     2458                'videoAddSourceTitle'   => __( 'Add Video Source' ),
    24542459                'videoDetailsCancel'    => __( 'Cancel Edit' ),
     2460                'videoDetailsText'      => __( '"Replace Video" will remove all associated source files when you update. ' .
     2461                        '"Add Video Source" allows you to specify alternate sources for maximum native HTML5 video playback.' ),
     2462                'videoRemoveSource'     => __( 'Remove Video Source' ),
     2463                'videoSelectPosterImageTitle' => _( 'Select Poster Image' ),
     2464                'videoRemovePoster'     => __( 'Remove Poster Image' ),
    24552465
    24562466                // Playlist
Note: See TracChangeset for help on using the changeset viewer.