WordPress.org
Get WordPress

Make WordPress Core

Changeset 29456


Ignore:
Timestamp:
08/09/2014 07:38:40 PM (11 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.