WordPress.org
Get WordPress

Make WordPress Core

Changeset 29456


Ignore:
Timestamp:
08/09/2014 07:38:40 PM (12 years ago)
Author:
wonderboymusic
Message:

Video:

  • Don't set height on responsive <div> when generating markup
  • Move some CSS rules from the style tag to .wp-video
  • Use Video Details view event delegation instead of click events delegated from <body>
  • Fix some CSS rule collision in the grid modal

See #29110.

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

Legend:

Unmodified
Added
Removed

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

    r29452 r29456  
    26822682}
    26832683
    2684 .edit-attachment-frame .attachment-media-view img {
     2684.edit-attachment-frame .attachment-media-view .details-image {
    26852685        display: block;
    26862686        margin-bottom: 16px;

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

    r29194 r29456  
    637637                                'click .remove-setting' : 'removeSetting',
    638638                                'change .content-track' : 'setTracks',
    639                                 'click .remove-track' : 'setTracks'
     639                                'click .remove-track' : 'setTracks',
     640                                'click .add-media-source' : 'addSource'
    640641                        } );
    641642
    … …  
    681682                        this.model.set( 'content', tracks );
    682683                        this.trigger( 'media:setting:remove', this );
     684                },
     685
     686                addSource : function( e ) {
     687                        this.controller.lastMime = $( e.currentTarget ).data( 'mime' );
     688                        this.controller.setState( 'add-' + this.controller.defaults.id + '-source' );
    683689                },
    684690
    … …  
    823829        });
    824830
    825         /**
    826          * Event binding
    827          */
    828         function init() {
    829                 $(document.body)
    830                         .on( 'click', '.add-media-source', function( e ) {
    831                                 media.frame.lastMime = $( e.currentTarget ).data( 'mime' );
    832                                 media.frame.setState( 'add-' + media.frame.defaults.id + '-source' );
    833                         } );
    834         }
    835 
    836         $( init );
    837 
    838831}(jQuery, _, Backbone));

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

    r29179 r29456  
    9191        float: none;
    9292        margin: 0 0 10px;
     93}
     94
     95.wp-video {
     96        max-width: 100%;
     97        height: auto;
    9398}
    9499

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

    r29436 r29456  
    5151        $video_types = wp_get_video_extensions();
    5252?>
    53 <#  var w_rule = '', h_rule = '',
     53<#  var w_rule = '',
    5454                w, h, settings = wp.media.view.settings,
    5555                isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
    … …  
    7070                w_rule = ' width: ' + w + 'px;';
    7171        }
    72 
    73         if ( h ) {
    74                 h_rule = ' height: auto';
    75         }
    7672#>
    77 <div style="max-width: 100%;{{ w_rule }}{{ h_rule }}">
     73<div style="{{ w_rule }}" class="wp-video">
    7874<video controls
    7975        class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
    … …  
    279275                                        <div class="media-progress-bar"><div></div></div>
    280276                                <# } else if ( 'image' === data.type ) { #>
    281                                         <img src="{{ data.sizes.full.url }}" draggable="false" />
     277                                        <img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" />
    282278                                <# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
    283                                         <img src="{{ data.icon }}" class="icon" draggable="false" />
     279                                        <img class="details-image" src="{{ data.icon }}" class="icon" draggable="false" />
    284280                                <# } #>
    285281
    … …  
    291287                                </div>
    292288                                <# } else if ( 'video' === data.type ) {
    293                                         var w_rule = h_rule = '';
     289                                        var w_rule = '';
    294290                                        if ( data.width ) {
    295                                                 w_rule = ' width: ' + data.width + 'px;';
     291                                                w_rule = 'width: ' + data.width + 'px;';
    296292                                        } else if ( wp.media.view.settings.contentWidth ) {
    297                                                 w_rule = ' width: ' + wp.media.view.settings.contentWidth + 'px;';
    298                                         }
    299                                         if ( data.height ) {
    300                                                 h_rule = ' height: auto';
     293                                                w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
    301294                                        }
    302295                                #>
    303                                 <div style="max-width: 100%; {{ w_rule }}{{ h_rule }}" class="wp-media-wrapper">
    304                                         <video controls class="wp-video-shortcode" preload="metadata"
     296                                <div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
     297                                        <video controls="controls" class="wp-video-shortcode" preload="metadata"
    305298                                                <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
    306299                                                <# if ( data.height ) { #>height="{{ data.height }}"<# } #>

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

    r29455 r29456  
    18751875        $html .= '</video>';
    18761876
    1877         $width_rule = $height_rule = '';
     1877        $width_rule = '';
    18781878        if ( ! empty( $atts['width'] ) ) {
    18791879                $width_rule = sprintf( ' width: %dpx;', $atts['width'] );
    18801880        }
    1881         if ( ! empty( $atts['height'] ) ) {
    1882                 $height_rule = sprintf( ' height: %dpx;', $atts['height'] );
    1883         } else {
    1884                 $height_rule = ' height: auto;';
    1885         }
    1886         $output = sprintf( '<div style="max-width: 100%%;%s%s" class="wp-video">%s</div>', $width_rule, $height_rule, $html );
     1881        $output = sprintf( '<div style="%s" class="wp-video">%s</div>', $width_rule, $html );
    18871882
    18881883        /**
Note: See TracChangeset for help on using the changeset viewer.