WordPress.org
Get WordPress

Make WordPress Core

Changeset 27608


Ignore:
Timestamp:
03/19/2014 05:30:27 AM (11 years ago)
Author:
wonderboymusic
Message:

Create a new file, media-audiovideo.js, to house all of the audio and video JS code in core.

UX Changes:

  • Don't add a menu item for "Add Audio|Video Source"
  • In the Audio|Video Details modal, add buttons and some suggestive text for adding alternate playback sources
  • Don't show "Create Audio|Video Playlist" menu items until the user has uploaded audio or video files

See #27437.

Location:
trunk/src/wp-includes
Files:
1 added
7 edited

Legend:

Unmodified
Added
Removed

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

    r27542 r27608  
    1212
    1313    /**
     14     * A helper mixin function to avoid truthy and falsey values being
     15     *   passed as an input that expects booleans. If key is undefined in the map,
     16     *   but has a default value, set it.
     17     *
     18     * @param {object} attrs Map of props from a shortcode or settings.
     19     * @param {string} key The key within the passed map to check for a value.
     20     * @returns {mixed|undefined} The original or coerced value of key within attrs
     21     */
     22    wp.media.coerce = function ( attrs, key ) {
     23        if ( _.isUndefined( attrs[ key ] ) && ! _.isUndefined( this.defaults[ key ] ) ) {
     24            attrs[ key ] = this.defaults[ key ];
     25        } else if ( 'true' === attrs[ key ] ) {
     26            attrs[ key ] = true;
     27        } else if ( 'false' === attrs[ key ] ) {
     28            attrs[ key ] = false;
     29        }
     30        return attrs[ key ];
     31    };
     32
     33    /**
    1434     * wp.media.string
    1535     * @namespace
    … …  
    275295    };
    276296
    277     /**
    278      * @mixin
    279      */
    280     wp.media.mixin = {
    281         /**
    282          * A helper function to avoid truthy and falsey values being
    283          *   passed as an input that expects booleans. If key is undefined in the map,
    284          *   but has a default value, set it.
    285          *
    286          * @param {object} attrs Map of props from a shortcode or settings.
    287          * @param {string} key The key within the passed map to check for a value.
    288          * @returns {mixed|undefined} The original or coerced value of key within attrs
    289          */
    290         coerce: function ( attrs, key ) {
    291             if ( _.isUndefined( attrs[ key ] ) && ! _.isUndefined( this.defaults[ key ] ) ) {
    292                 attrs[ key ] = this.defaults[ key ];
    293             } else if ( 'true' === attrs[ key ] ) {
    294                 attrs[ key ] = true;
    295             } else if ( 'false' === attrs[ key ] ) {
    296                 attrs[ key ] = false;
    297             }
    298             return attrs[ key ];
    299         },
    300 
    301         pauseAllPlayers: function () {
    302             var p;
    303             if ( window.mejs && window.mejs.players ) {
    304                 for ( p in window.mejs.players ) {
    305                     window.mejs.players[p].pause();
    306                 }
    307             }
    308         },
    309 
    310         ua: {
    311             is : function (browser) {
    312                 var passes = false, ua = window.navigator.userAgent;
    313 
    314                 switch ( browser ) {
    315                     case 'oldie':
    316                         passes = ua.match(/MSIE [6-8]/gi) !== null;
    317                     break;
    318                     case 'ie':
    319                         passes = ua.match(/MSIE/gi) !== null;
    320                     break;
    321                     case 'ff':
    322                         passes = ua.match(/firefox/gi) !== null;
    323                     break;
    324                     case 'opera':
    325                         passes = ua.match(/OPR/) !== null;
    326                     break;
    327                     case 'safari':
    328                         passes = ua.match(/safari/gi) !== null && ua.match(/chrome/gi) === null;
    329                     break;
    330                     case 'chrome':
    331                         passes = ua.match(/safari/gi) && ua.match(/chrome/gi) !== null;
    332                     break;
    333                 }
    334 
    335                 return passes;
    336             }
    337         },
    338 
    339         compat :{
    340             'opera' : {
    341                 audio: ['ogg', 'wav'],
    342                 video: ['ogg', 'webm']
    343             },
    344             'chrome' : {
    345                 audio: ['ogg', 'mpeg', 'x-ms-wma'],
    346                 video: ['ogg', 'webm', 'mp4', 'm4v', 'mpeg']
    347             },
    348             'ff' : {
    349                 audio: ['ogg', 'mpeg'],
    350                 video: ['ogg', 'webm']
    351             },
    352             'safari' : {
    353                 audio: ['mpeg', 'wav'],
    354                 video: ['mp4', 'm4v', 'mpeg', 'x-ms-wmv', 'quicktime']
    355             },
    356             'ie' : {
    357                 audio: ['mpeg'],
    358                 video: ['mp4', 'm4v', 'mpeg']
    359             }
    360         },
    361 
    362         isCompatible: function ( media ) {
    363             if ( ! media.find( 'source' ).length ) {
    364                 return false;
    365             }
    366 
    367             var ua = this.ua, test = false, found = false, sources;
    368 
    369             if ( ua.is( 'oldIE' ) ) {
    370                 return false;
    371             }
    372 
    373             sources = media.find( 'source' );
    374 
    375             _.find( this.compat, function (supports, browser) {
    376                 if ( ua.is( browser ) ) {
    377                     found = true;
    378                     _.each( sources, function (elem) {
    379                         var audio = new RegExp( 'audio\/(' + supports.audio.join('|') + ')', 'gi' ),
    380                             video = new RegExp( 'video\/(' + supports.video.join('|') + ')', 'gi' );
    381 
    382                         if ( elem.type.match( video ) !== null || elem.type.match( audio ) !== null ) {
    383                             test = true;
    384                         }
    385                     } );
    386                 }
    387 
    388                 return test || found;
    389             } );
    390 
    391             return test;
    392         },
    393 
    394         /**
    395          * Override the MediaElement method for removing a player.
    396          *  MediaElement tries to pull the audio/video tag out of
    397          *  its container and re-add it to the DOM.
    398          */
    399         removePlayer: function() {
    400             var t = this.player, featureIndex, feature;
    401 
    402             // invoke features cleanup
    403             for ( featureIndex in t.options.features ) {
    404                 feature = t.options.features[featureIndex];
    405                 if ( t['clean' + feature] ) {
    406                     try {
    407                         t['clean' + feature](t);
    408                     } catch (e) {}
    409                 }
    410             }
    411 
    412             if ( ! t.isDynamic ) {
    413                 t.$node.remove();
    414             }
    415 
    416             if ( 'native' !== t.media.pluginType ) {
    417                 t.media.remove();
    418             }
    419 
    420             delete window.mejs.players[t.id];
    421 
    422             t.container.remove();
    423             t.globalUnbind();
    424             delete t.node.player;
    425         },
    426 
    427         /**
    428          * Allows any class that has set 'player' to a MediaElementPlayer
    429          *  instance to remove the player when listening to events.
    430          *
    431          *  Examples: modal closes, shortcode properties are removed, etc.
    432          */
    433         unsetPlayer : function() {
    434             if ( this.player ) {
    435                 wp.media.mixin.pauseAllPlayers();
    436                 wp.media.mixin.removePlayer.apply( this );
    437                 this.player = false;
    438             }
    439         }
    440     };
    441 
    442297    wp.media.collection = function(attributes) {
    443298        var collections = {};
    444299
    445300        return _.extend( attributes, {
    446             coerce : wp.media.mixin.coerce,
     301            coerce : wp.media.coerce,
    447302            /**
    448303             * Retrieve attachments based on the properties of the passed shortcode
    … …  
    670525    });
    671526
    672     wp.media.playlist = new wp.media.collection({
    673         tag: 'playlist',
    674         type : 'audio',
    675         editTitle : wp.media.view.l10n.editPlaylistTitle,
    676         defaults : {
    677             id: wp.media.view.settings.post.id,
    678             style: 'light',
    679             tracklist: true,
    680             tracknumbers: true,
    681             images: true,
    682             artists: true
    683         }
    684     });
    685 
    686     wp.media['video-playlist'] = new wp.media.collection({
    687         tag: 'video-playlist',
    688         type : 'video',
    689         editTitle : wp.media.view.l10n.editVideoPlaylistTitle,
    690         defaults : {
    691             id: wp.media.view.settings.post.id,
    692             style: 'light',
    693             tracklist: false,
    694             tracknumbers: false,
    695             images: true
    696         }
    697     });
    698 
    699     /**
    700      * @namespace
    701      */
    702     wp.media.audio = {
    703         coerce : wp.media.mixin.coerce,
    704 
    705         defaults : {
    706             id : wp.media.view.settings.post.id,
    707             src      : '',
    708             loop     : false,
    709             autoplay : false,
    710             preload  : 'none'
    711         },
    712 
    713         edit : function (data) {
    714             var frame, shortcode = wp.shortcode.next( 'audio', data ).shortcode;
    715             frame = wp.media({
    716                 frame: 'audio',
    717                 state: 'audio-details',
    718                 metadata: _.defaults(
    719                     shortcode.attrs.named,
    720                     wp.media.audio.defaults
    721                 )
    722             });
    723 
    724             return frame;
    725         },
    726 
    727         shortcode : function (shortcode) {
    728             var self = this;
    729 
    730             _.each( wp.media.audio.defaults, function( value, key ) {
    731                 shortcode[ key ] = self.coerce( shortcode, key );
    732 
    733                 if ( value === shortcode[ key ] ) {
    734                     delete shortcode[ key ];
    735                 }
    736             });
    737 
    738             return wp.shortcode.string({
    739                 tag:     'audio',
    740                 attrs:   shortcode
    741             });
    742         }
    743     };
    744 
    745     /**
    746      * @namespace
    747      */
    748     wp.media.video = {
    749         coerce : wp.media.mixin.coerce,
    750 
    751         defaults : {
    752             id : wp.media.view.settings.post.id,
    753             src : '',
    754             poster : '',
    755             loop : false,
    756             autoplay : false,
    757             preload : 'metadata',
    758             content : ''
    759         },
    760 
    761         edit : function (data) {
    762             var frame,
    763                 defaults = this.defaults,
    764                 shortcode = wp.shortcode.next( 'video', data ).shortcode,
    765                 attrs;
    766 
    767             attrs = shortcode.attrs.named;
    768             attrs.content = shortcode.content;
    769 
    770             frame = wp.media({
    771                 frame: 'video',
    772                 state: 'video-details',
    773                 metadata: _.defaults( attrs, defaults )
    774             });
    775 
    776             return frame;
    777         },
    778 
    779         shortcode : function (shortcode) {
    780             var self = this, content = shortcode.content;
    781             delete shortcode.content;
    782 
    783             _.each( this.defaults, function( value, key ) {
    784                 shortcode[ key ] = self.coerce( shortcode, key );
    785 
    786                 if ( value === shortcode[ key ] ) {
    787                     delete shortcode[ key ];
    788                 }
    789             });
    790 
    791             return wp.shortcode.string({
    792                 tag:     'video',
    793                 attrs:   shortcode,
    794                 content: content
    795             });
    796         }
    797     };
    798 
    799527    /**
    800528     * wp.media.featuredImage
    … …  
    12801008                        options.state = 'gallery';
    12811009                        options.title = wp.media.view.l10n.createGalleryTitle;
    1282                     } else if ( elem.hasClass( 'playlist' ) ) {
    1283                         options.state = 'playlist';
    1284                         options.title = wp.media.view.l10n.createPlaylistTitle;
    1285                     } else if ( elem.hasClass( 'video-playlist' ) ) {
    1286                         options.state = 'video-playlist';
    1287                         options.title = wp.media.view.l10n.createVideoPlaylistTitle;
    12881010                    }
    12891011
    12901012                    wp.media.editor.open( editor, options );
    1291                 })
    1292                 .on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers );
     1013                });
    12931014
    12941015            // Initialize and render the Editor drag-and-drop uploader.

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

    r27536 r27608  
    4040
    4141        delete attributes.frame;
     42
     43        media.frame = frame;
    4244
    4345        return frame;
    … …  
    450452            this.set( 'width', size.width );
    451453            this.set( 'height', size.height );
    452         }
    453     });
    454 
    455     /**
    456      * wp.media.model.PostMedia
    457      *
    458      * @constructor
    459      * @augments Backbone.Model
    460      **/
    461     media.model.PostMedia = Backbone.Model.extend({
    462         initialize: function() {
    463             this.attachment = false;
    464         },
    465 
    466         setSource: function ( attachment ) {
    467             this.attachment = attachment;
    468             this.extension = attachment.get('filename' ).split('.').pop();
    469 
    470             if ( this.get( 'src' ) && this.extension === this.get( 'src' ).split('.').pop() ) {
    471                 this.unset( 'src' );
    472             }
    473 
    474             if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
    475                 this.set( this.extension, this.attachment.get( 'url' ) );
    476             } else {
    477                 this.unset( this.extension );
    478             }
    479         },
    480 
    481         changeAttachment: function( attachment ) {
    482             var self = this;
    483 
    484             this.setSource( attachment );
    485 
    486             this.unset( 'src' );
    487             _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function (ext) {
    488                 self.unset( ext );
    489             } );
    490454        }
    491455    });

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

    r27538 r27608  
    762762        initialize: function( options ) {
    763763            this.image = options.image;
    764             media.controller.State.prototype.initialize.apply( this, arguments );
    765         }
    766     });
    767 
    768     /**
    769      * wp.media.controller.AudioDetails
    770      *
    771      * @constructor
    772      * @augments wp.media.controller.State
    773      * @augments Backbone.Model
    774      */
    775     media.controller.AudioDetails = media.controller.State.extend({
    776         defaults: _.defaults({
    777             id: 'audio-details',
    778             toolbar: 'audio-details',
    779             title: l10n.audioDetailsTitle,
    780             content: 'audio-details',
    781             menu: 'audio-details',
    782             router: false,
    783             attachment: false,
    784             priority: 60,
    785             editing: false
    786         }, media.controller.Library.prototype.defaults ),
    787 
    788         initialize: function( options ) {
    789             this.media = options.media;
    790             media.controller.State.prototype.initialize.apply( this, arguments );
    791         }
    792     });
    793 
    794     /**
    795      * wp.media.controller.VideoDetails
    796      *
    797      * @constructor
    798      * @augments wp.media.controller.State
    799      * @augments Backbone.Model
    800      */
    801     media.controller.VideoDetails = media.controller.State.extend({
    802         defaults: _.defaults({
    803             id: 'video-details',
    804             toolbar: 'video-details',
    805             title: l10n.videoDetailsTitle,
    806             content: 'video-details',
    807             menu: 'video-details',
    808             router: false,
    809             attachment: false,
    810             priority: 60,
    811             editing: false
    812         }, media.controller.Library.prototype.defaults ),
    813 
    814         initialize: function( options ) {
    815             this.media = options.media;
    816764            media.controller.State.prototype.initialize.apply( this, arguments );
    817765        }
    … …  
    19311879
    19321880        createStates: function() {
    1933             var options = this.options;
     1881            var options = this.options, counts;
    19341882
    19351883            // Add the default states.
    … …  
    19911939                    collectionType: 'gallery',
    19921940                    title:          l10n.addToGalleryTitle
    1993                 }),
    1994 
    1995                 new media.controller.Library({
    1996                     id:         'playlist',
    1997                     title:      l10n.createPlaylistTitle,
    1998                     priority:   60,
    1999                     toolbar:    'main-playlist',
    2000                     filterable: 'uploaded',
    2001                     multiple:   'add',
    2002                     editable:   false,
    2003 
    2004                     library:  media.query( _.defaults({
    2005                         type: 'audio'
    2006                     }, options.library ) )
    2007                 }),
    2008 
    2009                 // Playlist states.
    2010                 new media.controller.CollectionEdit({
    2011                     type:           'audio',
    2012                     collectionType: 'playlist',
    2013                     title:          l10n.editPlaylistTitle,
    2014                     SettingsView:   media.view.Settings.Playlist,
    2015                     library:        options.selection,
    2016                     editing:        options.editing,
    2017                     menu:           'playlist',
    2018                     dragInfoText:   l10n.playlistDragInfo,
    2019                     dragInfo:       false
    2020                 }),
    2021 
    2022                 new media.controller.CollectionAdd({
    2023                     type: 'audio',
    2024                     collectionType: 'playlist',
    2025                     title: l10n.addToPlaylistTitle
    2026                 }),
    2027 
    2028                 new media.controller.Library({
    2029                     id:         'video-playlist',
    2030                     title:      l10n.createVideoPlaylistTitle,
    2031                     priority:   60,
    2032                     toolbar:    'main-video-playlist',
    2033                     filterable: 'uploaded',
    2034                     multiple:   'add',
    2035                     editable:   false,
    2036 
    2037                     library:  media.query( _.defaults({
    2038                         type: 'video'
    2039                     }, options.library ) )
    2040                 }),
    2041 
    2042                 // Video Playlist states.
    2043                 new media.controller.CollectionEdit({
    2044                     type:           'video',
    2045                     collectionType: 'video-playlist',
    2046                     title:          l10n.editVideoPlaylistTitle,
    2047                     SettingsView:   media.view.Settings.Playlist,
    2048                     library:        options.selection,
    2049                     editing:        options.editing,
    2050                     menu:           'video-playlist',
    2051                     dragInfoText:   l10n.videoPlaylistDragInfo,
    2052                     dragInfo:       false
    2053                 }),
    2054 
    2055                 new media.controller.CollectionAdd({
    2056                     type:           'video',
    2057                     collectionType: 'video-playlist',
    2058                     title:          l10n.addToVideoPlaylistTitle
    20591941                })
    20601942            ]);
    20611943
     1944            counts = media.playlist.counts();
     1945
     1946            if ( counts.audio ) {
     1947                this.states.add( media.playlist.states(options) );
     1948            }
     1949
     1950            if ( counts.video ) {
     1951                this.states.add( media.playlist.videoStates(options) );
     1952            }
    20621953
    20631954            if ( media.view.settings.post.featuredImageId ) {
    … …  
    27472638
    27482639    /**
    2749      * wp.media.view.MediaFrame.MediaDetails
    2750      *
    2751      * @constructor
    2752      * @augments wp.media.view.MediaFrame.Select
    2753      * @augments wp.media.view.MediaFrame
    2754      * @augments wp.media.view.Frame
    2755      * @augments wp.media.View
    2756      * @augments wp.Backbone.View
    2757      * @augments Backbone.View
    2758      * @mixes wp.media.controller.StateMachine
    2759      */
    2760     media.view.MediaFrame.MediaDetails = media.view.MediaFrame.Select.extend({
    2761         defaults: {
    2762             id:      'media',
    2763             url:     '',
    2764             menu:    'media-details',
    2765             content: 'media-details',
    2766             toolbar: 'media-details',
    2767             type:    'link',
    2768             priority: 120
    2769         },
    2770 
    2771         initialize: function( options ) {
    2772             this.DetailsView = options.DetailsView;
    2773             this.cancelText = options.cancelText;
    2774             this.addText = options.addText;
    2775 
    2776             this.media = new media.model.PostMedia( options.metadata );
    2777             this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
    2778             media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
    2779         },
    2780 
    2781         bindHandlers: function() {
    2782             var menu = this.defaults.menu;
    2783 
    2784             media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
    2785 
    2786             this.on( 'menu:create:' + menu, this.createMenu, this );
    2787             this.on( 'content:render:' + menu, this.renderDetailsContent, this );
    2788             this.on( 'menu:render:' + menu, this.renderMenu, this );
    2789             this.on( 'toolbar:render:' + menu, this.renderDetailsToolbar, this );
    2790         },
    2791 
    2792         renderDetailsContent: function() {
    2793             var view = new this.DetailsView({
    2794                 controller: this,
    2795                 model: this.state().media,
    2796                 attachment: this.state().media.attachment
    2797             }).render();
    2798 
    2799             this.content.set( view );
    2800         },
    2801 
    2802         renderMenu: function( view ) {
    2803             var lastState = this.lastState(),
    2804                 previous = lastState && lastState.id,
    2805                 frame = this;
    2806 
    2807             view.set({
    2808                 cancel: {
    2809                     text:     this.cancelText,
    2810                     priority: 20,
    2811                     click:    function() {
    2812                         if ( previous ) {
    2813                             frame.setState( previous );
    2814                         } else {
    2815                             frame.close();
    2816                         }
    2817                     }
    2818                 },
    2819                 separateCancel: new media.View({
    2820                     className: 'separator',
    2821                     priority: 40
    2822                 })
    2823             });
    2824 
    2825         },
    2826 
    2827         renderDetailsToolbar: function() {
    2828             this.toolbar.set( new media.view.Toolbar({
    2829                 controller: this,
    2830                 items: {
    2831                     select: {
    2832                         style:    'primary',
    2833                         text:     l10n.update,
    2834                         priority: 80,
    2835 
    2836                         click: function() {
    2837                             var controller = this.controller,
    2838                                 state = controller.state();
    2839 
    2840                             controller.close();
    2841 
    2842                             state.trigger( 'update', controller.media.toJSON() );
    2843 
    2844                             // Restore and reset the default state.
    2845                             controller.setState( controller.options.state );
    2846                             controller.reset();
    2847                         }
    2848                     }
    2849                 }
    2850             }) );
    2851         },
    2852 
    2853         renderReplaceToolbar: function() {
    2854             this.toolbar.set( new media.view.Toolbar({
    2855                 controller: this,
    2856                 items: {
    2857                     replace: {
    2858                         style:    'primary',
    2859                         text:     l10n.replace,
    2860                         priority: 80,
    2861 
    2862                         click: function() {
    2863                             var controller = this.controller,
    2864                                 state = controller.state(),
    2865                                 selection = state.get( 'selection' ),
    2866                                 attachment = selection.single();
    2867 
    2868                             controller.media.changeAttachment( attachment );
    2869 
    2870                             state.trigger( 'replace', controller.media.toJSON() );
    2871 
    2872                             // Restore and reset the default state.
    2873                             controller.setState( controller.options.state );
    2874                             controller.reset();
    2875                         }
    2876                     }
    2877                 }
    2878             }) );
    2879         },
    2880 
    2881         renderAddSourceToolbar: function() {
    2882             this.toolbar.set( new media.view.Toolbar({
    2883                 controller: this,
    2884                 items: {
    2885                     replace: {
    2886                         style:    'primary',
    2887                         text:     this.addText,
    2888                         priority: 80,
    2889 
    2890                         click: function() {
    2891                             var controller = this.controller,
    2892                                 state = controller.state(),
    2893                                 selection = state.get( 'selection' ),
    2894                                 attachment = selection.single();
    2895 
    2896                             controller.media.setSource( attachment );
    2897 
    2898                             state.trigger( 'add-source', controller.media.toJSON() );
    2899 
    2900                             // Restore and reset the default state.
    2901                             controller.setState( controller.options.state );
    2902                             controller.reset();
    2903                         }
    2904                     }
    2905                 }
    2906             }) );
    2907         }
    2908     });
    2909 
    2910     /**
    2911      * wp.media.view.MediaFrame.AudioDetails
    2912      *
    2913      * @constructor
    2914      * @augments wp.media.view.MediaFrame.MediaDetails
    2915      * @augments wp.media.view.MediaFrame.Select
    2916      * @augments wp.media.view.MediaFrame
    2917      * @augments wp.media.view.Frame
    2918      * @augments wp.media.View
    2919      * @augments wp.Backbone.View
    2920      * @augments Backbone.View
    2921      * @mixes wp.media.controller.StateMachine
    2922      */
    2923     media.view.MediaFrame.AudioDetails = media.view.MediaFrame.MediaDetails.extend({
    2924         defaults: {
    2925             id:      'audio',
    2926             url:     '',
    2927             menu:    'audio-details',
    2928             content: 'audio-details',
    2929             toolbar: 'audio-details',
    2930             type:    'link',
    2931             title:    l10n.audioDetailsTitle,
    2932             priority: 120
    2933         },
    2934 
    2935         initialize: function( options ) {
    2936             options.DetailsView = media.view.AudioDetails;
    2937             options.cancelText = l10n.audioDetailsCancel;
    2938             options.addText = l10n.audioAddSourceTitle;
    2939 
    2940             media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
    2941         },
    2942 
    2943         bindHandlers: function() {
    2944             media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
    2945 
    2946             this.on( 'toolbar:render:replace-audio', this.renderReplaceToolbar, this );
    2947             this.on( 'toolbar:render:add-audio-source', this.renderAddSourceToolbar, this );
    2948         },
    2949 
    2950         createStates: function() {
    2951             this.states.add([
    2952                 new media.controller.AudioDetails( {
    2953                     media: this.media,
    2954                     editable: false,
    2955                     menu: 'audio-details'
    2956                 } ),
    2957 
    2958                 new media.controller.MediaLibrary( {
    2959                     type: 'audio',
    2960                     id: 'replace-audio',
    2961                     title: l10n.audioReplaceTitle,
    2962                     toolbar: 'replace-audio',
    2963                     media: this.media,
    2964                     menu: 'audio-details'
    2965                 } ),
    2966 
    2967                 new media.controller.MediaLibrary( {
    2968                     type: 'audio',
    2969                     id: 'add-audio-source',
    2970                     title: l10n.audioAddSourceTitle,
    2971                     toolbar: 'add-audio-source',
    2972                     media: this.media,
    2973                     menu: 'audio-details'
    2974                 } )
    2975             ]);
    2976         }
    2977     });
    2978 
    2979     /**
    2980      * wp.media.view.MediaFrame.VideoDetails
    2981      *
    2982      * @constructor
    2983      * @augments wp.media.view.MediaFrame.MediaDetails
    2984      * @augments wp.media.view.MediaFrame.Select
    2985      * @augments wp.media.view.MediaFrame
    2986      * @augments wp.media.view.Frame
    2987      * @augments wp.media.View
    2988      * @augments wp.Backbone.View
    2989      * @augments Backbone.View
    2990      * @mixes wp.media.controller.StateMachine
    2991      */
    2992     media.view.MediaFrame.VideoDetails = media.view.MediaFrame.MediaDetails.extend({
    2993         defaults: {
    2994             id:      'video',
    2995             url:     '',
    2996             menu:    'video-details',
    2997             content: 'video-details',
    2998             toolbar: 'video-details',
    2999             type:    'link',
    3000             title:    l10n.videoDetailsTitle,
    3001             priority: 120
    3002         },
    3003 
    3004         initialize: function( options ) {
    3005             options.DetailsView = media.view.VideoDetails;
    3006             options.cancelText = l10n.videoDetailsCancel;
    3007             options.addText = l10n.videoAddSourceTitle;
    3008 
    3009             media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
    3010         },
    3011 
    3012         bindHandlers: function() {
    3013             media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
    3014 
    3015             this.on( 'toolbar:render:replace-video', this.renderReplaceToolbar, this );
    3016             this.on( 'toolbar:render:add-video-source', this.renderAddSourceToolbar, this );
    3017             this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this );
    3018             this.on( 'toolbar:render:add-track', this.renderAddTrackToolbar, this );
    3019         },
    3020 
    3021         createStates: function() {
    3022             this.states.add([
    3023                 new media.controller.VideoDetails({
    3024                     media: this.media,
    3025                     editable: false,
    3026                     menu: 'video-details'
    3027                 }),
    3028 
    3029                 new media.controller.MediaLibrary( {
    3030                     type: 'video',
    3031                     id: 'replace-video',
    3032                     title: l10n.videoReplaceTitle,
    3033                     toolbar: 'replace-video',
    3034                     media: this.media,
    3035                     menu: 'video-details'
    3036                 } ),
    3037 
    3038                 new media.controller.MediaLibrary( {
    3039                     type: 'video',
    3040                     id: 'add-video-source',
    3041                     title: l10n.videoAddSourceTitle,
    3042                     toolbar: 'add-video-source',
    3043                     media: this.media,
    3044                     menu: 'video-details'
    3045                 } ),
    3046 
    3047                 new media.controller.MediaLibrary( {
    3048                     type: 'image',
    3049                     id: 'select-poster-image',
    3050                     title: l10n.videoSelectPosterImageTitle,
    3051                     toolbar: 'select-poster-image',
    3052                     media: this.media,
    3053                     menu: 'video-details'
    3054                 } ),
    3055 
    3056                 new media.controller.MediaLibrary( {
    3057                     type: 'text',
    3058                     id: 'add-track',
    3059                     title: l10n.videoAddTrackTitle,
    3060                     toolbar: 'add-track',
    3061                     media: this.media,
    3062                     menu: 'video-details'
    3063                 } )
    3064             ]);
    3065         },
    3066 
    3067         renderSelectPosterImageToolbar: function() {
    3068             this.toolbar.set( new media.view.Toolbar({
    3069                 controller: this,
    3070                 items: {
    3071                     replace: {
    3072                         style:    'primary',
    3073                         text:     l10n.videoSelectPosterImageTitle,
    3074                         priority: 80,
    3075 
    3076                         click: function() {
    3077                             var controller = this.controller,
    3078                                 state = controller.state(),
    3079                                 selection = state.get( 'selection' ),
    3080                                 attachment = selection.single();
    3081 
    3082                             controller.media.set( 'poster', attachment.get( 'url' ) );
    3083 
    3084                             state.trigger( 'set-poster-image', controller.media.toJSON() );
    3085 
    3086                             // Restore and reset the default state.
    3087                             controller.setState( controller.options.state );
    3088                             controller.reset();
    3089                         }
    3090                     }
    3091                 }
    3092             }) );
    3093         },
    3094 
    3095         renderAddTrackToolbar: function() {
    3096             this.toolbar.set( new media.view.Toolbar({
    3097                 controller: this,
    3098                 items: {
    3099                     replace: {
    3100                         style:    'primary',
    3101                         text:     l10n.videoAddTrackTitle,
    3102                         priority: 80,
    3103 
    3104                         click: function() {
    3105                             var controller = this.controller,
    3106                                 state = controller.state(),
    3107                                 selection = state.get( 'selection' ),
    3108                                 attachment = selection.single(),
    3109                                 content = controller.media.get( 'content' );
    3110 
    3111                             if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
    3112                                 content += [
    3113                                     '<track srclang="en" label="English"kind="subtitles" src="',
    3114                                     attachment.get( 'url' ),
    3115                                     '" />'
    3116                                 ].join('');
    3117 
    3118                                 controller.media.set( 'content', content );
    3119                             }
    3120 
    3121                             state.trigger( 'add-track', controller.media.toJSON() );
    3122 
    3123                             // Restore and reset the default state.
    3124                             controller.setState( controller.options.state );
    3125                             controller.reset();
    3126                         }
    3127                     }
    3128                 }
    3129             }) );
    3130         }
    3131     });
    3132 
    3133     /**
    31342640     * wp.media.view.Modal
    31352641     *
    … …  
    66646170
    66656171    /**
    6666      * wp.media.view.AudioDetails
    6667      *
    6668      * @contructor
    6669      * @augments wp.media.view.MediaDetails
    6670      * @augments wp.media.view.Settings.AttachmentDisplay
    6671      * @augments wp.media.view.Settings
    6672      * @augments wp.media.View
    6673      * @augments wp.Backbone.View
    6674      * @augments Backbone.View
    6675      */
    6676     media.view.AudioDetails = media.view.MediaDetails.extend({
    6677         className: 'audio-details',
    6678         template:  media.template('audio-details'),
    6679 
    6680         setMedia: function() {
    6681             var audio = this.$('.wp-audio-shortcode');
    6682 
    6683             if ( audio.find( 'source' ).length ) {
    6684                 if ( audio.is(':hidden') ) {
    6685                     audio.show();
    6686                 }
    6687                 this.media = media.view.MediaDetails.prepareSrc( audio.get(0) );
    6688             } else {
    6689                 audio.hide();
    6690                 this.media = false;
    6691             }
    6692 
    6693             return this;
    6694         }
    6695     });
    6696 
    6697     /**
    6698      * wp.media.view.VideoDetails
    6699      *
    6700      * @contructor
    6701      * @augments wp.media.view.MediaDetails
    6702      * @augments wp.media.view.Settings.AttachmentDisplay
    6703      * @augments wp.media.view.Settings
    6704      * @augments wp.media.View
    6705      * @augments wp.Backbone.View
    6706      * @augments Backbone.View
    6707      */
    6708     media.view.VideoDetails = media.view.MediaDetails.extend({
    6709         className: 'video-details',
    6710         template:  media.template('video-details'),
    6711 
    6712         setMedia: function() {
    6713             var video = this.$('.wp-video-shortcode');
    6714 
    6715             if ( video.find( 'source' ).length ) {
    6716                 if ( video.is(':hidden') ) {
    6717                     video.show();
    6718                 }
    6719 
    6720                 if ( ! video.hasClass('youtube-video') ) {
    6721                     this.media = media.view.MediaDetails.prepareSrc( video.get(0) );
    6722                 } else {
    6723                     this.media = video.get(0);
    6724                 }
    6725             } else {
    6726                 video.hide();
    6727                 this.media = false;
    6728             }
    6729 
    6730             return this;
    6731         }
    6732     });
    6733 
    6734     /**
    67356172     * wp.media.view.Spinner
    67366173     *

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

    r27534 r27608  
    2727.media-embed-details .embed-media-settings {
    2828    padding-top: 0;
     29    top: 28px;
    2930}
    3031
    … …  
    4344.media-embed-details .setting a:hover {
    4445    color: #f00;
    45 }
    46 
    47 .media-embed-details .embed-media-settings {
    48     top: 0;
    4946}
    5047

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

    r27580 r27608  
    766766
    767767    <script type="text/html" id="tmpl-audio-details">
     768        <# var ext, html5types = { mp3: true, ogg: true }; #>
     769
    768770        <?php $audio_types = wp_get_audio_extensions(); ?>
    769771        <div class="media-embed media-embed-details">
    770772            <div class="embed-media-settings embed-audio-settings">
    771                 <div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
    772 
    773773                <?php wp_underscore_audio_template() ?>
    774774
    775                 <# if ( ! _.isEmpty( data.model.src ) ) { #>
     775                <# if ( ! _.isEmpty( data.model.src ) ) {
     776                    ext = data.model.src.split('.').pop();
     777                    if ( html5types[ ext ] ) {
     778                        delete html5types[ ext ];
     779                    }
     780                #>
    776781                <label class="setting">
    777782                    <span>SRC</span>
    … …  
    783788
    784789                foreach ( $audio_types as $type ):
    785                 ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
     790                ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
     791                    if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
     792                        delete html5types.<?php echo $type ?>;
     793                    }
     794                #>
    786795                <label class="setting">
    787796                    <span><?php echo strtoupper( $type ) ?></span>
    … …  
    791800                <# } #>
    792801                <?php endforeach ?>
     802
     803                <# if ( ! _.isEmpty( html5types ) ) { #>
     804                <div class="setting">
     805                    <span>{{{ wp.media.view.l10n.mediaHTML5Text }}}</span>
     806                    <div class="button-large">
     807                    <# _.each( html5types, function (value, type) { #>
     808                    <button class="button add-media-source">{{ type }}</button>
     809                    <# } ) #>
     810                    </div>
     811                </div>
     812                <# } #>
    793813
    794814                <div class="setting preload">
    … …  
    816836
    817837    <script type="text/html" id="tmpl-video-details">
     838        <# var ext, html5types = { mp4: true, ogv: true, webm: true }; #>
     839
    818840        <?php $video_types = wp_get_video_extensions(); ?>
    819841        <div class="media-embed media-embed-details">
    820842            <div class="embed-media-settings embed-video-settings">
    821                 <div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
    822843                <div class="wp-video-holder">
    823844                <#
    … …  
    833854                <?php wp_underscore_video_template() ?>
    834855
    835                 <# if ( ! _.isEmpty( data.model.src ) ) { #>
     856                <# if ( ! _.isEmpty( data.model.src ) ) {
     857                    ext = data.model.src.split('.').pop();
     858                    if ( html5types[ ext ] ) {
     859                        delete html5types[ ext ];
     860                    }
     861                #>
    836862                <label class="setting">
    837863                    <span>SRC</span>
    … …  
    841867                <# } #>
    842868                <?php foreach ( $video_types as $type ):
    843                 ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
     869                ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
     870                    if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
     871                        delete html5types.<?php echo $type ?>;
     872                    }
     873                #>
    844874                <label class="setting">
    845875                    <span><?php echo strtoupper( $type ) ?></span>
    … …  
    850880                <?php endforeach ?>
    851881                </div>
     882
     883                <# if ( ! _.isEmpty( html5types ) ) { #>
     884                <div class="setting">
     885                    <span>{{{ wp.media.view.l10n.mediaHTML5Text }}}</span>
     886                    <div class="button-large">
     887                    <# _.each( html5types, function (value, type) { #>
     888                    <button class="button add-media-source">{{ type }}</button>
     889                    <# } ) #>
     890                    </div>
     891                </div>
     892                <# } #>
     893
    852894                <# if ( ! _.isEmpty( data.model.poster ) ) { #>
    853895                <label class="setting">

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

    r27519 r27608  
    24012401        ),
    24022402        'defaultProps' => $props,
     2403        'attachmentCounts' => wp_count_attachments(),
    24032404        'embedExts'    => $exts,
    24042405        'embedMimes'   => $ext_mimes
    … …  
    24962497        'suggestedHeight' => __( 'Suggested height is %d pixels.' ),
    24972498
     2499        'mediaHTML5Text'        => __( 'Add alternate sources for maximum HTML5 playback:' ),
     2500
    24982501        // Edit Audio
    24992502        'audioDetailsTitle'     => __( 'Audio Details' ),
    … …  
    25012504        'audioAddSourceTitle'   => __( 'Add Audio Source' ),
    25022505        'audioDetailsCancel'    => __( 'Cancel Edit' ),
    2503         'audioDetailsText'      => __( '"Replace Audio" will remove all associated source files when you update. ' .
    2504             '"Add Audio Source" allows you to specify alternate sources for maximum native HTML5 audio playback.' ),
    25052506
    25062507        // Edit Video
    … …  
    25092510        'videoAddSourceTitle'   => __( 'Add Video Source' ),
    25102511        'videoDetailsCancel'    => __( 'Cancel Edit' ),
    2511         'videoDetailsText'      => __( '"Replace Video" will remove all associated source files when you update. ' .
    2512             '"Add Video Source" allows you to specify alternate sources for maximum native HTML5 video playback.' ),
    25132512        'videoSelectPosterImageTitle' => _( 'Select Poster Image' ),
    25142513        'videoAddTrackTitle'    => __( 'Add Subtitles' ),
    … …  
    25432542
    25442543    wp_enqueue_script( 'media-editor' );
     2544    wp_enqueue_script( 'media-audiovideo' );
    25452545    wp_enqueue_style( 'media-views' );
    25462546    wp_enqueue_style( 'imgareaselect' );

  • trunk/src/wp-includes/script-loader.php

    r27585 r27608  
    397397    $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'image-edit' ), false, 1 );
    398398    $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
     399    $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
    399400    $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
    400401
Note: See TracChangeset for help on using the changeset viewer.