Changeset 27478 for trunk/src/wp-includes/media-template.php

Timestamp:

03/09/2014 05:24:10 AM (13 years ago)

Author:

wonderboymusic

Message:

Audio/Video shortcodes in the media modal:

• 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.

File:

• trunk/src/wp-includes/media-template.php (modified) (8 diffs)

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

@@ -664 +664 @@
         <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
@@ -690 +691 @@
                                         <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>
                                 <# } #>
@@ -699 +701 @@
                                         <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>
                                 <# } #>
@@ -728 +731 @@
         <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;
 
@@ -738 +743 @@
                                         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 }}"
@@ -763 +769 @@
                                 >
                                         <# if ( ! _.isEmpty( data.model.src ) ) {
-                                                if ( data.model.src.match(/youtube|youtu\.be/) ) { #>
+                                                if ( isYouTube ) { #>
                                                 <source src="{{ data.model.src }}" type="video/youtube" />
                                                 <# } else { #>
@@ -780 +786 @@
                                         <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>
                                 <# } #>
@@ -787 +794 @@
                                         <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 }}" />
-                                </label>
+                                        <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>