WordPress.org
Get WordPress

Make WordPress Core

Changeset 27476


Ignore:
Timestamp:
03/09/2014 01:00:53 AM (9 years ago)
Author:
wonderboymusic
Message:

Audio/Video shortcodes in the media modal:

  • Add embedMimes to _wpMediaViewsL10n
  • Use escape instead of interpolate when setting attributes in Underscore templates
  • When creating the <audio> and <video> tags dynamically, set inner <source> nodes instead of the src attribute and properly set the mime-type per source as the type attribute. This is also drastically reduces the amount of code used to generate the tags.

See #27016.

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

Legend:

Unmodified
Added
Removed

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

    r27464 r27476  
    64366436        },
    64376437
     6438        /**
     6439         * When multiple players in the DOM contain the same src, things get weird.
     6440         *
     6441         * @param {HTMLElement} media
     6442         * @returns {HTMLElement}
     6443         */
    64386444        prepareSrc : function (media) {
    6439             media.src = [
    6440                 media.src,
    6441                 media.src.indexOf('?') > -1 ? '&' : '?',
    6442                 (new Date()).getTime()
    6443             ].join('');
     6445            var t = (new Date()).getTime();
     6446            _.each( $(media).find('source'), function (source) {
     6447                source.src = [
     6448                    source.src,
     6449                    source.src.indexOf('?') > -1 ? '&' : '?',
     6450                    t
     6451                ].join('');
     6452            });
    64446453
    64456454            return media;
    … …  
    64476456
    64486457        setPlayer : function () {
    6449             if ( ! this.player ) {
     6458            if ( ! this.player && this.media ) {
    64506459                this.player = new MediaElementPlayer( this.media, this.settings );
    64516460            }

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

    r27454 r27476  
    663663
    664664    <script type="text/html" id="tmpl-audio-details">
    665         <?php // reusing .media-embed to pick up the styles for now
    666         ?><# var rendered = false; #>
     665        <?php $audio_types = wp_get_audio_extensions(); ?>
    667666        <div class="media-embed">
    668667            <div class="embed-media-settings embed-audio-settings">
    669                 <# if ( data.model.src ) { #>
    670                     <audio controls
    671                         class="wp-audio-shortcode"
    672                         src="{{{ data.model.src }}}"
    673                         preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
    674                         <#
    675                         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    676                         ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    677                             #> <?php echo $attr ?><#
    678                         }
    679                         <?php endforeach ?>#>
    680                     />
    681                     <# rendered = true; #>
     668                <audio controls
     669                    class="wp-audio-shortcode"
     670                    preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
     671                    <#
     672                    <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     673                    ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     674                        #> <?php echo $attr ?><#
     675                    }
     676                    <?php endforeach ?>#>
     677                >
     678                    <# if ( ! _.isEmpty( data.model.src ) ) { #>
     679                    <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     680                    <# } #>
     681
     682                    <?php foreach ( $audio_types as $type ):
     683                    ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
     684                    <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
     685                    <# } #>
     686                    <?php endforeach;
     687                ?></audio>
     688                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    682689                <label class="setting">
    683690                    <span>SRC</span>
    684                     <input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" />
     691                    <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
    685692                </label>
    686693                <# } #>
    687694                <?php
    688                 $default_types = wp_get_audio_extensions();
    689 
    690                 foreach ( $default_types as $type ):
    691                 ?><# if ( data.model.<?php echo $type ?> ) { #>
    692                     <# if ( ! rendered ) { #>
    693                     <audio controls
    694                         class="wp-audio-shortcode"
    695                         src="{{{ data.model.<?php echo $type ?> }}}"
    696                         preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
    697                         <#
    698                         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    699                         ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    700                             #> <?php echo $attr ?><#
    701                         }
    702                         <?php endforeach ?>#>
    703                     />
    704                     <# rendered = true;
    705                     } #>
     695
     696                foreach ( $audio_types as $type ):
     697                ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
    706698                <label class="setting">
    707699                    <span><?php echo strtoupper( $type ) ?></span>
    708                     <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" />
     700                    <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
    709701                </label>
    710702                <# } #>
    … …  
    735727
    736728    <script type="text/html" id="tmpl-video-details">
    737         <?php // reusing .media-embed to pick up the styles for now
    738         ?><# var rendered = false; #>
     729        <?php $video_types = wp_get_video_extensions(); ?>
    739730        <div class="media-embed">
    740731            <div class="embed-media-settings embed-video-settings">
    … …  
    747738                    h = Math.ceil( ( h * w ) / data.model.width );
    748739                }
    749 
    750                 if ( data.model.src ) {
    751                     if ( data.model.src.match(/youtube|youtu\.be/) ) {
    752740                #>
    753                     <video controls
    754                         class="wp-video-shortcode youtube-video"
    755                         width="{{{ w }}}"
    756                         height="{{{ h }}}"
    757                         <?php
    758                         $props = array( 'poster' => '', 'preload' => 'metadata' );
    759                         foreach ( $props as $key => $value ):
    760                             if ( empty( $value ) ) {
    761                             ?><#
    762                             if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
    763                                 #> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
    764                             } #>
    765                             <?php } else {
    766                                 echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php
    767                             }
    768                         endforeach;
     741                <video controls
     742                    class="wp-video-shortcode youtube-video"
     743                    width="{{ w }}"
     744                    height="{{ h }}"
     745                    <?php
     746                    $props = array( 'poster' => '', 'preload' => 'metadata' );
     747                    foreach ( $props as $key => $value ):
     748                        if ( empty( $value ) ) {
    769749                        ?><#
    770                         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    771                         ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    772                             #> <?php echo $attr ?><#
     750                        if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
     751                            #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
     752                        } #>
     753                        <?php } else {
     754                            echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
    773755                        }
    774                         <?php endforeach ?>#>
    775                     >
    776                         <source type="video/youtube" src="{{{ data.model.src }}}" />
    777                     </video>
    778                 <#
    779                     } else {
    780                 #>
    781                     <video controls
    782                         class="wp-video-shortcode"
    783                         width="{{{ w }}}"
    784                         height="{{{ h }}}"
    785                         src="{{{ data.model.src }}}"
    786                         <?php
    787                         $props = array( 'poster' => '', 'preload' => 'metadata' );
    788                         foreach ( $props as $key => $value ):
    789                             if ( empty( $value ) ) {
    790                             ?><#
    791                             if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
    792                                 #> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
    793                             } #>
    794                             <?php } else {
    795                                 echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php
    796                             }
    797                         endforeach;
    798                         ?><#
    799                         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    800                         ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    801                             #> <?php echo $attr ?><#
    802                         }
    803                         <?php endforeach ?>#>
    804                     />
     756                    endforeach;
     757                    ?><#
     758                    <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     759                    ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     760                        #> <?php echo $attr ?><#
     761                    }
     762                    <?php endforeach ?>#>
     763                >
     764                    <# if ( ! _.isEmpty( data.model.src ) ) {
     765                        if ( data.model.src.match(/youtube|youtu\.be/) ) { #>
     766                        <source src="{{ data.model.src }}" type="video/youtube" />
     767                        <# } else { #>
     768                        <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     769                        <# }
     770                    } #>
     771
     772                    <?php foreach ( $video_types as $type ):
     773                    ?><# if ( data.model.<?php echo $type ?> ) { #>
     774                    <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
     775                    <# } #>
     776                    <?php endforeach;
     777                ?></video>
     778                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    805779                <label class="setting">
    806780                    <span>SRC</span>
    807                     <input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" />
    808                 </label>
    809                 <#  }
    810                     rendered = true;
    811                 } #>
    812                 <?php
    813                 $default_types = wp_get_video_extensions();
    814 
    815                 foreach ( $default_types as $type ):
    816                 ?><# if ( data.model.<?php echo $type ?> ) {
    817                     if ( ! rendered ) { #>
    818                     <video controls
    819                         class="wp-video-shortcode"
    820                         width="{{{ w }}}"
    821                         height="{{{ h }}}"
    822                         src="{{{ data.model.<?php echo $type ?> }}}"
    823                         <?php
    824                         $props = array( 'poster' => '', 'preload' => 'metadata' );
    825                         foreach ( $props as $key => $value ):
    826                             echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"
    827                         <?php endforeach;
    828                         ?><#
    829                         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    830                         ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    831                             #> <?php echo $attr ?><#
    832                         }
    833                         <?php endforeach ?>#>
    834                     />
    835                     <# rendered = true;
    836                     } #>
     781                    <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
     782                </label>
     783                <# } #>
     784                <?php foreach ( $video_types as $type ):
     785                ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
    837786                <label class="setting">
    838787                    <span><?php echo strtoupper( $type ) ?></span>
    839                     <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" />
     788                    <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
    840789                </label>
    841790                <# } #>
    … …  
    844793                <label class="setting">
    845794                    <span><?php _e( 'Poster Image' ); ?></span>
    846                     <input type="text" data-setting="poster" value="{{{ data.model.poster }}}" />
     795                    <input type="text" data-setting="poster" value="{{ data.model.poster }}" />
    847796                </label>
    848797                <div class="setting preload">
    849798                    <span><?php _e( 'Preload' ); ?></span>
    850799                    <div class="button-group button-large" data-setting="preload">
    851                         <button class="button" value="auto">
    852                             <?php esc_attr_e( 'Auto' ); ?>
    853                         </button>
    854                         <button class="button" value="metadata">
    855                             <?php esc_attr_e( 'Metadata' ); ?>
    856                         </button>
    857                         <button class="button active" value="none">
    858                             <?php esc_attr_e( 'None' ); ?>
    859                         </button>
     800                        <button class="button" value="auto"><?php _e( 'Auto' ); ?></button>
     801                        <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
     802                        <button class="button active" value="none"><?php _e( 'None' ); ?></button>
    860803                    </div>
    861804                </div>

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

    r27472 r27476  
    23432343    );
    23442344
     2345    $exts = array_merge( wp_get_audio_extensions(), wp_get_video_extensions() );
     2346    $mimes = get_allowed_mime_types();
     2347    $ext_mimes = array();
     2348    foreach ( $exts as $ext ) {
     2349        foreach ( $mimes as $ext_preg => $mime_match ) {
     2350            if ( preg_match( '#' . $ext . '#i', $ext_preg ) ) {
     2351                $ext_mimes[ $ext ] = $mime_match;
     2352                break;
     2353            }
     2354        }
     2355    }
     2356
    23452357    $settings = array(
    23462358        'tabs'      => $tabs,
    … …  
    23552367        ),
    23562368        'defaultProps' => $props,
    2357         'embedExts'    => array_merge( wp_get_audio_extensions(), wp_get_video_extensions() ),
     2369        'embedExts'    => $exts,
     2370        'embedMimes'   => $ext_mimes
    23582371    );
    23592372
Note: See TracChangeset for help on using the changeset viewer.