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

Timestamp:

03/19/2014 05:30:27 AM (13 years ago)

Author:

wonderboymusic

Message:

Create a new file, media-audiovideo.js, to house all of the audio and video JS code in core.

UX Changes:

• Don't add a menu item for "Add Audio|Video Source"
• In the Audio|Video Details modal, add buttons and some suggestive text for adding alternate playback sources
• Don't show "Create Audio|Video Playlist" menu items until the user has uploaded audio or video files

See #27437.

File:

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

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

@@ -766 +766 @@
 
         <script type="text/html" id="tmpl-audio-details">
+                <# var ext, html5types = { mp3: true, ogg: true }; #>
+
                 <?php $audio_types = wp_get_audio_extensions(); ?>
                 <div class="media-embed media-embed-details">
                         <div class="embed-media-settings embed-audio-settings">
-                                <div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
-
                                 <?php wp_underscore_audio_template() ?>
 
-                                <# if ( ! _.isEmpty( data.model.src ) ) { #>
+                                <# if ( ! _.isEmpty( data.model.src ) ) {
+                                        ext = data.model.src.split('.').pop();
+                                        if ( html5types[ ext ] ) {
+                                                delete html5types[ ext ];
+                                        }
+                                #>
                                 <label class="setting">
                                         <span>SRC</span>
@@ -783 +788 @@
 
                                 foreach ( $audio_types as $type ):
-                                ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
+                                ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
+                                        if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
+                                                delete html5types.<?php echo $type ?>;
+                                        }
+                                #>
                                 <label class="setting">
                                         <span><?php echo strtoupper( $type ) ?></span>
@@ -791 +800 @@
                                 <# } #>
                                 <?php endforeach ?>
+
+                                <# if ( ! _.isEmpty( html5types ) ) { #>
+                                <div class="setting">
+                                        <span>{{{ wp.media.view.l10n.mediaHTML5Text }}}</span>
+                                        <div class="button-large">
+                                        <# _.each( html5types, function (value, type) { #>
+                                        <button class="button add-media-source">{{ type }}</button>
+                                        <# } ) #>
+                                        </div>
+                                </div>
+                                <# } #>
 
                                 <div class="setting preload">
@@ -816 +836 @@
 
         <script type="text/html" id="tmpl-video-details">
+                <# var ext, html5types = { mp4: true, ogv: true, webm: true }; #>
+
                 <?php $video_types = wp_get_video_extensions(); ?>
                 <div class="media-embed media-embed-details">
                         <div class="embed-media-settings embed-video-settings">
-                                <div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
                                 <div class="wp-video-holder">
                                 <#
@@ -833 +854 @@
                                 <?php wp_underscore_video_template() ?>
 
-                                <# if ( ! _.isEmpty( data.model.src ) ) { #>
+                                <# if ( ! _.isEmpty( data.model.src ) ) {
+                                        ext = data.model.src.split('.').pop();
+                                        if ( html5types[ ext ] ) {
+                                                delete html5types[ ext ];
+                                        }
+                                #>
                                 <label class="setting">
                                         <span>SRC</span>
@@ -841 +867 @@
                                 <# } #>
                                 <?php foreach ( $video_types as $type ):
-                                ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
+                                ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
+                                        if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
+                                                delete html5types.<?php echo $type ?>;
+                                        }
+                                #>
                                 <label class="setting">
                                         <span><?php echo strtoupper( $type ) ?></span>
@@ -850 +880 @@
                                 <?php endforeach ?>
                                 </div>
+
+                                <# if ( ! _.isEmpty( html5types ) ) { #>
+                                <div class="setting">
+                                        <span>{{{ wp.media.view.l10n.mediaHTML5Text }}}</span>
+                                        <div class="button-large">
+                                        <# _.each( html5types, function (value, type) { #>
+                                        <button class="button add-media-source">{{ type }}</button>
+                                        <# } ) #>
+                                        </div>
+                                </div>
+                                <# } #>
+
                                 <# if ( ! _.isEmpty( data.model.poster ) ) { #>
                                 <label class="setting">