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

Timestamp:

03/20/2014 01:33:00 PM (11 years ago)

Author:

wonderboymusic

Message:

Unifying media controls and supporting playlists in the editor:

• Support a caption attribute for audio and video shortcodes
• In wp.media.audio|video, rename update to shortcode to allow these models to share the same mixins as wp.media.collection subclasses
• When sending an audio or video shortcode to the editor, create a default caption if the user hasn't entered one. This currently only displays in the editor, not on the front end. Captions aren't tied to a specific attachment here because external sources are supported.
• In the wp.mce.media mixin, in the edit method, read attr instead of data when attempting to parse the encoded shortcode. data does not automatically update when the attribute changes. This was a blessing to debug.
• Add wp.mce.media.PlaylistView to support playlist views in TinyMCE
• Expose WPPlaylistView to global scope and suppress auto-parsing of playlist nodes when in the admin. Allow WPPlaylistView to be passed metadata on creation instead of requiring a JSON blob to be parsed.
• Remove all of the playlist logic from the wpgallery TinyMCE plugin.
• In wp_prepare_attachment_for_js() return more data for audio/video so that playlists can have parity in the admin/front end.

See #27320.

File:

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

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

@@ -815 +815 @@
                     <span><?php _e( 'Preload' ); ?></span>
                     <div class="button-group button-large" data-setting="preload">
-                        <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload video' ); ?></button>
+                        <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload audio' ); ?></button>
                         <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
                         <button class="button active" value="none"><?php _e( 'None' ); ?></button>
@@ -830 +830 @@
                     <input type="checkbox" data-setting="loop" />
                 </label>
+
+                <label class="setting">
+                    <span><?php _e( 'Caption' ); ?></span>
+                    <input type="text" data-setting="caption" value="{{ data.model.caption }}" />
+                </label>
+
                 <div class="clear"></div>
             </div>
@@ -902 +908 @@
                     <span><?php _e( 'Preload' ); ?></span>
                     <div class="button-group button-large" data-setting="preload">
-                        <button class="button" value="auto"><?php _e( 'Auto' ); ?></button>
+                        <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload video' ); ?></button>
                         <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
                         <button class="button active" value="none"><?php _e( 'None' ); ?></button>
@@ -937 +943 @@
                     <textarea class="hidden content-setting">{{ content }}</textarea>
                 </label>
+
+                <label class="setting">
+                    <span><?php _e( 'Caption' ); ?></span>
+                    <input type="text" data-setting="caption" value="{{ data.model.caption }}" />
+                </label>
             </div>
         </div>
@@ -967 +978 @@
             <div class="dashicons dashicons-no-alt remove"></div>
         </div>
+        <# if ( ! _.isEmpty( data.model.caption ) ) { #>
+        <div class="track-details">{{{ data.model.caption }}}</div>
+        <# } #>
         <?php wp_underscore_audio_template() ?>
     </script>
@@ -975 +989 @@
             <div class="dashicons dashicons-no-alt remove"></div>
         </div>
+        <# if ( ! _.isEmpty( data.model.caption ) ) { #>
+        <div class="track-details">{{{ data.model.caption }}}</div>
+        <# } #>
         <?php wp_underscore_video_template() ?>
+    </script>
+
+    <?php wp_underscore_playlist_templates() ?>
+
+    <script type="text/html" id="tmpl-editor-playlist">
+        <div class="toolbar">
+            <div class="dashicons dashicons-edit edit"></div>
+            <div class="dashicons dashicons-no-alt remove"></div>
+        </div>
+        <div class="wp-playlist wp-{{ data.type }}-playlist wp-playlist-{{ data.style }}">
+            <# if ( 'audio' === data.type ){ #>
+            <div class="wp-playlist-current-item"></div>
+            <# } #>
+            <{{ data.type }} controls="controls" preload="none" <#
+                if ( data.width ) { #> width="{{ data.width }}"<# }
+                #><# if ( data.height ) { #> height="{{ data.height }}"<# } #>></{{ data.type }}>
+            <div class="wp-playlist-next"></div>
+            <div class="wp-playlist-prev"></div>
+        </div>
     </script>