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

Timestamp:

03/09/2014 10:31:36 AM (11 years ago)

Author:

wonderboymusic

Message:

Video editing in the media modal:

• Add a state: Add Subititles
• Add text/vtt to the list of allowed mime-types, files end in .vtt. .srt files are served as text/plain.
• The content body of a video shortcode should be used for adding <track> elements only. This happens dynamically in the modal. If added by hand, they can still be parsed and managed.

See #27016.

File:

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

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

@@ -691 +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>
+                    <a class="remove-setting">{{{ wp.media.view.l10n.remove }}}</a>
                 </label>
                 <# } #>
@@ -701 +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>
+                    <a class="remove-setting">{{{ wp.media.view.l10n.remove }}}</a>
                 </label>
                 <# } #>
@@ -780 +780 @@
                     <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
                     <# } #>
-                    <?php endforeach;
-                ?></video>
+                    <?php endforeach; ?>
+                    {{{ data.model.content }}}
+                </video>
                 <# if ( ! _.isEmpty( data.model.src ) ) { #>
                 <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>
+                    <a class="remove-setting">{{{ wp.media.view.l10n.remove }}}</a>
                 </label>
                 <# } #>
@@ -794 +795 @@
                     <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>
+                    <a class="remove-setting">{{{ wp.media.view.l10n.remove }}}</a>
                 </label>
                 <# } #>
@@ -803 +804 @@
                     <span><?php _e( 'Poster Image' ); ?></span>
                     <input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
-                    <a class="remove-setting">{{{ wp.media.view.l10n.videoRemovePoster }}}</a>
+                    <a class="remove-setting">{{{ wp.media.view.l10n.remove }}}</a>
                 </label>
                 <# } #>
@@ -825 +826 @@
                 </label>
                 <div class="clear"></div>
+
+                <label class="setting" data-setting="content">
+                    <span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters or metadata)' ); ?></span>
+                    <#
+                    var content = '';
+                    if ( ! _.isEmpty( data.model.content ) ) {
+                        var tracks = jQuery( data.model.content ).filter( 'track' );
+                        _.each( tracks.toArray(), function (track) {
+                            content += track.outerHTML; #>
+                        <p>
+                            <input class="content-track" type="text" value="{{ track.outerHTML }}" />
+                            <a class="remove-setting remove-track">{{{ wp.media.view.l10n.remove }}}</a>
+                        </p>
+                        <# } ); #>
+                    <# } else { #>
+                    <em>There are no associated subtitles.</em>
+                    <# } #>
+                    <textarea class="hidden content-setting">{{ content }}</textarea>
+                </label>
             </div>
         </div>