sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.



git-svn-id: https://develop.svn.wordpress.org/trunk@27476 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor 2014-03-09 01:00:53 +00:00
parent f6d9b60cd0
commit 67512aa18a
3 changed files with 103 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/wp-includes/js/media-views.js
View File

@ -6435,18 +6435,27 @@
}, this.options ); }, this.options );
}, },
/**
* When multiple players in the DOM contain the same src, things get weird.
*
* @param {HTMLElement} media
* @returns {HTMLElement}
*/
prepareSrc : function (media) { prepareSrc : function (media) {
media.src = [ var t = (new Date()).getTime();
media.src, _.each( $(media).find('source'), function (source) {
media.src.indexOf('?') > -1 ? '&' : '?', source.src = [
(new Date()).getTime() source.src,
source.src.indexOf('?') > -1 ? '&' : '?',
t
].join(''); ].join('');
});
return media; return media;
}, },
setPlayer : function () { setPlayer : function () {
if ( ! this.player ) { if ( ! this.player && this.media ) {
this.player = new MediaElementPlayer( this.media, this.settings ); this.player = new MediaElementPlayer( this.media, this.settings );
} }
}, },

149
src/wp-includes/media-template.php
View File

@ -662,50 +662,42 @@ function wp_print_media_templates() {
</script> </script>
<script type="text/html" id="tmpl-audio-details"> <script type="text/html" id="tmpl-audio-details">
<?php // reusing .media-embed to pick up the styles for now <?php $audio_types = wp_get_audio_extensions(); ?>
?><# var rendered = false; #>
<div class="media-embed"> <div class="media-embed">
<div class="embed-media-settings embed-audio-settings"> <div class="embed-media-settings embed-audio-settings">
<# if ( data.model.src ) { #>
<audio controls <audio controls
class="wp-audio-shortcode" class="wp-audio-shortcode"
src="{{{ data.model.src }}}" preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
<# <#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ): <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) { ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><# #> <?php echo $attr ?><#
} }
<?php endforeach ?>#> <?php endforeach ?>#>
/> >
<# rendered = true; #> <# if ( ! _.isEmpty( data.model.src ) ) { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# } #>
<?php foreach ( $audio_types as $type ):
?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #>
<?php endforeach;
?></audio>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<label class="setting"> <label class="setting">
<span>SRC</span> <span>SRC</span>
<input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" /> <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
</label> </label>
<# } #> <# } #>
<?php <?php
$default_types = wp_get_audio_extensions();
foreach ( $default_types as $type ): foreach ( $audio_types as $type ):
?><# if ( data.model.<?php echo $type ?> ) { #> ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
<# if ( ! rendered ) { #>
<audio controls
class="wp-audio-shortcode"
src="{{{ data.model.<?php echo $type ?> }}}"
preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
<#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
/>
<# rendered = true;
} #>
<label class="setting"> <label class="setting">
<span><?php echo strtoupper( $type ) ?></span> <span><?php echo strtoupper( $type ) ?></span>
<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" /> <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
</label> </label>
<# } #> <# } #>
<?php endforeach ?> <?php endforeach ?>
@ -734,8 +726,7 @@ function wp_print_media_templates() {
</script> </script>
<script type="text/html" id="tmpl-video-details"> <script type="text/html" id="tmpl-video-details">
<?php // reusing .media-embed to pick up the styles for now <?php $video_types = wp_get_video_extensions(); ?>
?><# var rendered = false; #>
<div class="media-embed"> <div class="media-embed">
<div class="embed-media-settings embed-video-settings"> <div class="embed-media-settings embed-video-settings">
<div class="wp-video-holder"> <div class="wp-video-holder">
@ -746,24 +737,21 @@ function wp_print_media_templates() {
if ( data.model.width && w !== data.model.width ) { if ( data.model.width && w !== data.model.width ) {
h = Math.ceil( ( h * w ) / data.model.width ); h = Math.ceil( ( h * w ) / data.model.width );
} }
if ( data.model.src ) {
if ( data.model.src.match(/youtube|youtu\.be/) ) {
#> #>
<video controls <video controls
class="wp-video-shortcode youtube-video" class="wp-video-shortcode youtube-video"
width="{{{ w }}}" width="{{ w }}"
height="{{{ h }}}" height="{{ h }}"
<?php <?php
$props = array( 'poster' => '', 'preload' => 'metadata' ); $props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ): foreach ( $props as $key => $value ):
if ( empty( $value ) ) { if ( empty( $value ) ) {
?><# ?><#
if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) { if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
#> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<# #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
} #> } #>
<?php } else { <?php } else {
echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
} }
endforeach; endforeach;
?><# ?><#
@ -773,90 +761,45 @@ function wp_print_media_templates() {
} }
<?php endforeach ?>#> <?php endforeach ?>#>
> >
<source type="video/youtube" src="{{{ data.model.src }}}" /> <# if ( ! _.isEmpty( data.model.src ) ) {
</video> if ( data.model.src.match(/youtube|youtu\.be/) ) { #>
<# <source src="{{ data.model.src }}" type="video/youtube" />
} else { <# } else { #>
#> <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<video controls <# }
class="wp-video-shortcode"
width="{{{ w }}}"
height="{{{ h }}}"
src="{{{ data.model.src }}}"
<?php
$props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ):
if ( empty( $value ) ) {
?><#
if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
#> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
} #> } #>
<?php } else {
echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php <?php foreach ( $video_types as $type ):
} ?><# if ( data.model.<?php echo $type ?> ) { #>
endforeach; <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
?><# <# } #>
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ): <?php endforeach;
?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) { ?></video>
#> <?php echo $attr ?><# <# if ( ! _.isEmpty( data.model.src ) ) { #>
}
<?php endforeach ?>#>
/>
<label class="setting"> <label class="setting">
<span>SRC</span> <span>SRC</span>
<input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" /> <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
</label> </label>
<# } <# } #>
rendered = true; <?php foreach ( $video_types as $type ):
} #> ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
<?php
$default_types = wp_get_video_extensions();
foreach ( $default_types as $type ):
?><# if ( data.model.<?php echo $type ?> ) {
if ( ! rendered ) { #>
<video controls
class="wp-video-shortcode"
width="{{{ w }}}"
height="{{{ h }}}"
src="{{{ data.model.<?php echo $type ?> }}}"
<?php
$props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ):
echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"
<?php endforeach;
?><#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
/>
<# rendered = true;
} #>
<label class="setting"> <label class="setting">
<span><?php echo strtoupper( $type ) ?></span> <span><?php echo strtoupper( $type ) ?></span>
<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" /> <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
</label> </label>
<# } #> <# } #>
<?php endforeach ?> <?php endforeach ?>
</div> </div>
<label class="setting"> <label class="setting">
<span><?php _e( 'Poster Image' ); ?></span> <span><?php _e( 'Poster Image' ); ?></span>
<input type="text" data-setting="poster" value="{{{ data.model.poster }}}" /> <input type="text" data-setting="poster" value="{{ data.model.poster }}" />
</label> </label>
<div class="setting preload"> <div class="setting preload">
<span><?php _e( 'Preload' ); ?></span> <span><?php _e( 'Preload' ); ?></span>
<div class="button-group button-large" data-setting="preload"> <div class="button-group button-large" data-setting="preload">
<button class="button" value="auto"> <button class="button" value="auto"><?php _e( 'Auto' ); ?></button>
<?php esc_attr_e( 'Auto' ); ?> <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
</button> <button class="button active" value="none"><?php _e( 'None' ); ?></button>
<button class="button" value="metadata">
<?php esc_attr_e( 'Metadata' ); ?>
</button>
<button class="button active" value="none">
<?php esc_attr_e( 'None' ); ?>
</button>
</div> </div>
</div> </div>

15
src/wp-includes/media.php
View File

@ -2342,6 +2342,18 @@ function wp_enqueue_media( $args = array() ) {
'size' => get_option( 'image_default_size' ), // empty default 'size' => get_option( 'image_default_size' ), // empty default
); );
$exts = array_merge( wp_get_audio_extensions(), wp_get_video_extensions() );
$mimes = get_allowed_mime_types();
$ext_mimes = array();
foreach ( $exts as $ext ) {
foreach ( $mimes as $ext_preg => $mime_match ) {
if ( preg_match( '#' . $ext . '#i', $ext_preg ) ) {
$ext_mimes[ $ext ] = $mime_match;
break;
}
}
}
$settings = array( $settings = array(
'tabs' => $tabs, 'tabs' => $tabs,
'tabUrl' => add_query_arg( array( 'chromeless' => true ), admin_url('media-upload.php') ), 'tabUrl' => add_query_arg( array( 'chromeless' => true ), admin_url('media-upload.php') ),
@ -2354,7 +2366,8 @@ function wp_enqueue_media( $args = array() ) {
'id' => 0, 'id' => 0,
), ),
'defaultProps' => $props, 'defaultProps' => $props,
'embedExts' => array_merge( wp_get_audio_extensions(), wp_get_video_extensions() ), 'embedExts' => $exts,
'embedMimes' => $ext_mimes
); );
$post = null; $post = null;