WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
03/09/2014 01:00:53 AM (12 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.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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>
Note: See TracChangeset for help on using the changeset viewer.