IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Audio/Video shortcodes in the media modal:

Browse Source 
* Make a generic model, `wp.media.model.PostMedia`, which replaces `wp.media.model.PostAudio` and `wp.media.model.PostVideo`
* Make a generic library, `wp.media.controller.MediaLibrary`, which replaces `wp.media.controller.ReplaceVideo` and `wp.media.controller.ReplaceAudio`
* `wp.media.controller.MediaLibrary` is used to create new states that want to load a library filtered by type, making it incredibly simple to add states to frames. See `wp.media.view.MediaFrame.VideoDetails` and `wp.media.view.MediaFrame.AudioDetails`.

UX changes:

* Add the ability to manage HTML5 fallbacks - add additional `<source>`s or remove specific `<source>`s
* In the Video Details state, add the ability to select a poster image

See #27016.


Built from https://develop.svn.wordpress.org/trunk@27478


git-svn-id: http://core.svn.wordpress.org/trunk@27322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor
2014-03-09 05:25:15 +00:00
parent f0863476f5
commit f7af18e1d6
10 changed files with 277 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
wp-includes/media-template.php
View File

@@ -663,7 +663,8 @@ function wp_print_media_templates() {
<script type="text/html" id="tmpl-audio-details">
<?php $audio_types = wp_get_audio_extensions(); ?>
<div class="media-embed">
<div class="media-embed media-embed-details">
<div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
<div class="embed-media-settings embed-audio-settings">
<audio controls
class="wp-audio-shortcode"
@@ -689,6 +690,7 @@ function wp_print_media_templates() {
<label class="setting">
<span>SRC</span>
<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
<a class="remove-setting">{{{ wp.media.view.l10n.audioRemoveSource }}}</a>
</label>
<# } #>
<?php
@@ -698,6 +700,7 @@ function wp_print_media_templates() {
<label class="setting">
<span><?php echo strtoupper( $type ) ?></span>
<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
<a class="remove-setting">{{{ wp.media.view.l10n.audioRemoveSource }}}</a>
</label>
<# } #>
<?php endforeach ?>
@@ -727,19 +730,22 @@ function wp_print_media_templates() {
<script type="text/html" id="tmpl-video-details">
<?php $video_types = wp_get_video_extensions(); ?>
<div class="media-embed">
<div class="media-embed media-embed-details">
<div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
<div class="embed-media-settings embed-video-settings">
<div class="wp-video-holder">
<#
var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
h = ! data.model.height ? 360 : data.model.height;
if ( data.model.width && w !== data.model.width ) {
h = Math.ceil( ( h * w ) / data.model.width );
}
#>
<video controls
class="wp-video-shortcode youtube-video"
class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
width="{{ w }}"
height="{{ h }}"
<?php
@@ -762,7 +768,7 @@ function wp_print_media_templates() {
<?php endforeach ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) {
if ( data.model.src.match(/youtube|youtu\.be/) ) { #>
if ( isYouTube ) { #>
<source src="{{ data.model.src }}" type="video/youtube" />
<# } else { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
@@ -779,6 +785,7 @@ function wp_print_media_templates() {
<label class="setting">
<span>SRC</span>
<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
<a class="remove-setting">{{{ wp.media.view.l10n.videoRemoveSource }}}</a>
</label>
<# } #>
<?php foreach ( $video_types as $type ):
@@ -786,14 +793,18 @@ function wp_print_media_templates() {
<label class="setting">
<span><?php echo strtoupper( $type ) ?></span>
<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
<a class="remove-setting">{{{ wp.media.view.l10n.videoRemoveSource }}}</a>
</label>
<# } #>
<?php endforeach ?>
</div>
<# if ( ! _.isEmpty( data.model.poster ) ) { #>
<label class="setting">
<span><?php _e( 'Poster Image' ); ?></span>
<input type="text" data-setting="poster" value="{{ data.model.poster }}" />
<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
<a class="remove-setting">{{{ wp.media.view.l10n.videoRemovePoster }}}</a>
</label>
<# } #>
<div class="setting preload">
<span><?php _e( 'Preload' ); ?></span>
<div class="button-group button-large" data-setting="preload">