WordPress.org

Make WordPress Core


Ignore:
Timestamp:
03/20/2014 01:33:00 PM (7 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media-template.php

    r27628 r27640  
    815815                    <span><?php _e( 'Preload' ); ?></span>
    816816                    <div class="button-group button-large" data-setting="preload">
    817                         <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload video' ); ?></button>
     817                        <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload audio' ); ?></button>
    818818                        <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
    819819                        <button class="button active" value="none"><?php _e( 'None' ); ?></button>
     
    830830                    <input type="checkbox" data-setting="loop" />
    831831                </label>
     832
     833                <label class="setting">
     834                    <span><?php _e( 'Caption' ); ?></span>
     835                    <input type="text" data-setting="caption" value="{{ data.model.caption }}" />
     836                </label>
     837
    832838                <div class="clear"></div>
    833839            </div>
     
    902908                    <span><?php _e( 'Preload' ); ?></span>
    903909                    <div class="button-group button-large" data-setting="preload">
    904                         <button class="button" value="auto"><?php _e( 'Auto' ); ?></button>
     910                        <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload video' ); ?></button>
    905911                        <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
    906912                        <button class="button active" value="none"><?php _e( 'None' ); ?></button>
     
    937943                    <textarea class="hidden content-setting">{{ content }}</textarea>
    938944                </label>
     945
     946                <label class="setting">
     947                    <span><?php _e( 'Caption' ); ?></span>
     948                    <input type="text" data-setting="caption" value="{{ data.model.caption }}" />
     949                </label>
    939950            </div>
    940951        </div>
     
    967978            <div class="dashicons dashicons-no-alt remove"></div>
    968979        </div>
     980        <# if ( ! _.isEmpty( data.model.caption ) ) { #>
     981        <div class="track-details">{{{ data.model.caption }}}</div>
     982        <# } #>
    969983        <?php wp_underscore_audio_template() ?>
    970984    </script>
     
    975989            <div class="dashicons dashicons-no-alt remove"></div>
    976990        </div>
     991        <# if ( ! _.isEmpty( data.model.caption ) ) { #>
     992        <div class="track-details">{{{ data.model.caption }}}</div>
     993        <# } #>
    977994        <?php wp_underscore_video_template() ?>
     995    </script>
     996
     997    <?php wp_underscore_playlist_templates() ?>
     998
     999    <script type="text/html" id="tmpl-editor-playlist">
     1000        <div class="toolbar">
     1001            <div class="dashicons dashicons-edit edit"></div>
     1002            <div class="dashicons dashicons-no-alt remove"></div>
     1003        </div>
     1004        <div class="wp-playlist wp-{{ data.type }}-playlist wp-playlist-{{ data.style }}">
     1005            <# if ( 'audio' === data.type ){ #>
     1006            <div class="wp-playlist-current-item"></div>
     1007            <# } #>
     1008            <{{ data.type }} controls="controls" preload="none" <#
     1009                if ( data.width ) { #> width="{{ data.width }}"<# }
     1010                #><# if ( data.height ) { #> height="{{ data.height }}"<# } #>></{{ data.type }}>
     1011            <div class="wp-playlist-next"></div>
     1012            <div class="wp-playlist-prev"></div>
     1013        </div>
    9781014    </script>
    9791015
Note: See TracChangeset for help on using the changeset viewer.