WordPress.org
Get WordPress

Make WordPress Core

Ticket #27320: playlist-mce.diff

File playlist-mce.diff, 18.8 KB (added by wonderboymusic, 10 years ago)

  • src/wp-includes/js/media-audiovideo.js

     
    207207
    208208                defaults : {
    209209                        id : wp.media.view.settings.post.id,
    210                         src      : '',
    211                         loop     : false,
     210                        src : '',
     211                        loop : false,
    212212                        autoplay : false,
    213                         preload  : 'none'
     213                        preload : 'none',
     214                        caption : ''
    214215                },
    215216
    216217                edit : function (data) {
    … …  
    227228                        return frame;
    228229                },
    229230
    230                 update : function (model) {
     231                shortcode : function (model) {
    231232                        var self = this, content;
    232233
    233234                        _.each( this.defaults, function( value, key ) {
    … …  
    266267                        loop : false,
    267268                        autoplay : false,
    268269                        preload : 'metadata',
    269                         content : ''
     270                        content : '',
     271                        caption : ''
    270272                },
    271273
    272274                edit : function (data) {
    … …  
    287289                        return frame;
    288290                },
    289291
    290                 update : function (model) {
     292                shortcode : function (model) {
    291293                        var self = this, content;
    292294
    293295                        _.each( this.defaults, function( value, key ) {
    … …  
    11291131
    11301132                        wp.media.mixin.pauseAllPlayers();
    11311133
    1132                         data = window.decodeURIComponent( $( node ).data('wpview-text') );
     1134                        data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
    11331135                        frame = media.edit( data );
    11341136                        frame.on( 'close', function () {
    11351137                                frame.detach();
    11361138                        } );
    1137                         frame.state( self.shortcode + '-details' ).on( 'update', function( selection ) {
    1138                                 var shortcode = wp.media[ self.shortcode ].update( selection ).string();
     1139                        frame.state( self.state ).on( 'update', function( selection ) {
     1140                                var shortcode = wp.media[ self.shortcode ].shortcode( selection ).string();
    11391141                                $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
    11401142                                wp.mce.views.refreshView( self, shortcode );
    11411143                                frame.detach();
    … …  
    12051207
    12061208        wp.mce.video = _.extend( {}, wp.mce.media, {
    12071209                shortcode: 'video',
     1210                state: 'video-details',
    12081211                View: wp.mce.media.View.extend({
    12091212                        className: 'editor-video',
    12101213                        template:  media.template('editor-video')
    … …  
    12151218
    12161219        wp.mce.audio = _.extend( {}, wp.mce.media, {
    12171220                shortcode: 'audio',
     1221                state: 'audio-details',
    12181222                View: wp.mce.media.View.extend({
    12191223                        className: 'editor-audio',
    12201224                        template:  media.template('editor-audio')
    … …  
    12231227
    12241228        wp.mce.views.register( 'audio', wp.mce.audio );
    12251229
     1230        wp.mce.media.PlaylistView = wp.mce.View.extend({
     1231                className: 'editor-playlist',
     1232                template:  media.template('editor-playlist'),
     1233
     1234                initialize: function( options ) {
     1235                        this.data = {};
     1236                        this.attachments = [];
     1237                        this.shortcode = options.shortcode;
     1238                        _.bindAll( this, 'setPlayer' );
     1239                        $(this).on('ready', this.setNode);
     1240                },
     1241
     1242                setNode: function (e, node) {
     1243                        this.node = node;
     1244                        this.fetch();
     1245                },
     1246
     1247                fetch: function() {
     1248                        this.attachments = wp.media[ this.shortcode.tag ].attachments( this.shortcode );
     1249                        this.attachments.more().done( this.setPlayer );
     1250                },
     1251
     1252                setPlayer: function () {
     1253                        var p,
     1254                                html = this.getHtml(),
     1255                                t = this.encodedText,
     1256                                self = this;
     1257
     1258                        this.unsetPlayer();
     1259
     1260                        _.each( tinymce.editors, function( editor ) {
     1261                                var doc;
     1262                                if ( editor.plugins.wpview ) {
     1263                                        doc = editor.getDoc();
     1264                                        $( doc ).find( '[data-wpview-text="' + t + '"]' ).each(function (i, elem) {
     1265                                                var node = $( elem );
     1266                                                node.html( html );
     1267                                                self.node = elem;
     1268                                        });
     1269                                }
     1270                        }, this );
     1271
     1272                        p = new WPPlaylistView({
     1273                                el: $( self.node ).find( '.wp-playlist' ).get(0),
     1274                                metadata: this.data
     1275                        });
     1276
     1277                        this.player = p._player;
     1278                },
     1279
     1280                getHtml: function() {
     1281                        var data = this.shortcode.attrs.named,
     1282                                model = wp.media[ this.shortcode.tag ],
     1283                                type = 'playlist' === this.shortcode.tag ? 'audio' : 'video',
     1284                                options,
     1285                                attachments,
     1286                                tracks = [];
     1287
     1288                        if ( ! this.attachments.length ) {
     1289                                return;
     1290                        }
     1291
     1292                        _.each( model.defaults, function( value, key ) {
     1293                                data[ key ] = model.coerce( data, key );
     1294                        });
     1295
     1296                        attachments = this.attachments.toJSON();
     1297
     1298                        options = {
     1299                                type: type,
     1300                                style: data.style,
     1301                                tracklist: data.tracklist,
     1302                                tracknumbers: data.tracknumbers,
     1303                                images: data.images,
     1304                                artists: data.artists
     1305                        };
     1306
     1307                        _.each( attachments, function (attachment) {
     1308                                var size = {}, track = {
     1309                                        src : attachment.url,
     1310                                        type : attachment.mime,
     1311                                        title : attachment.title,
     1312                                        caption : attachment.caption,
     1313                                        description : attachment.description,
     1314                                        meta : attachment.meta
     1315                                };
     1316
     1317                                if ( 'video' === type ) {
     1318                                        if ( ! options.width ) {
     1319                                                options.width = attachment.width;
     1320                                                options.height = attachment.height;
     1321                                        }
     1322                                        size.width = attachment.width;
     1323                                        size.height = attachment.height;
     1324                                        track.dimensions = {
     1325                                                original : size,
     1326                                                resized : size
     1327                                        };
     1328                                } else {
     1329                                        options.width = 400;
     1330                                }
     1331
     1332                                track.image = attachment.image;
     1333                                track.thumb = attachment.thumb;
     1334
     1335                                tracks.push( track );
     1336                        } );
     1337
     1338                        options.tracks = tracks;
     1339                        this.data = options;
     1340
     1341                        return this.template( options );
     1342                }
     1343        });
     1344        _.extend( wp.mce.media.PlaylistView.prototype, wp.media.mixin );
     1345
     1346        wp.mce.playlist = _.extend( {}, wp.mce.media, {
     1347                shortcode: 'playlist',
     1348                state: 'playlist-edit',
     1349                View: wp.mce.media.PlaylistView
     1350        } );
     1351
     1352        wp.mce.views.register( 'playlist', wp.mce.playlist );
     1353
     1354        wp.mce['video-playlist'] = _.extend( {}, wp.mce.media, {
     1355                shortcode: 'video-playlist',
     1356                state: 'video-playlist-edit',
     1357                View: wp.mce.media.PlaylistView
     1358        } );
     1359
     1360        wp.mce.views.register( 'video-playlist', wp.mce['video-playlist'] );
     1361
    12261362        function init() {
    12271363                $(document.body)
    12281364                        .on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers )

  • src/wp-includes/js/media-editor.js

     
    198198                                }
    199199                        }
    200200
     201                        if ( ! _.isEmpty( attachment.caption ) ) {
     202                                shortcode.caption = attachment.caption;
     203                        } else if ( attachment.meta && attachment.meta.title ) {
     204                                shortcode.caption = '“' + attachment.meta.title + '”';
     205                                if ( attachment.meta.album ) {
     206                                        shortcode.caption += ' from ' + attachment.meta.album;
     207                                }
     208
     209                                if ( attachment.meta.artist ) {
     210                                        shortcode.caption += ' by ' + attachment.meta.artist;
     211                                }
     212                        } else if ( ! _.isEmpty( attachment.description ) ) {
     213                                shortcode.caption = attachment.description;
     214                        } else {
     215                                shortcode.caption = attachment.title;
     216                        }
     217
    201218                        extension = attachment.filename.split('.').pop();
    202219
    203220                        if ( _.contains( wp.media.view.settings.embedExts, extension ) ) {
    … …  
    387404                                if ( attachments[this.tag] ) {
    388405                                        _.extend( attrs, attachments[this.tag].toJSON() );
    389406                                }
     407
    390408                                // Convert all gallery shortcodes to use the `ids` property.
    391409                                // Ignore `post__in` and `post__not_in`; the attachments in
    392410                                // the collection will already reflect those properties.

  • src/wp-includes/js/mediaelement/wp-playlist.js

     
    88
    99                itemTemplate : wp.template('wp-playlist-item'),
    1010
    11                 initialize : function () {
     11                initialize : function (options) {
    1212                        var settings = {};
    1313
    14                         this.data = $.parseJSON( this.$('script').html() );
     14                        this.data = options.metadata || $.parseJSON( this.$('script').html() );
    1515                        this.playerNode = this.$( this.data.type );
    1616
    1717                        this.tracks = new Backbone.Collection( this.data.tracks );
    … …  
    3838                        }
    3939                        settings.success = this.bindPlayer;
    4040
    41                         new MediaElementPlayer( this.playerNode.get(0), settings );
     41                        this._player = new MediaElementPlayer( this.playerNode.get(0), settings );
    4242                },
    4343
    4444                renderCurrent : function () {
    … …  
    132132        });
    133133
    134134    $(document).ready(function () {
    135                 $('.wp-playlist').each(function () {
    136                         return new WPPlaylistView({ el: this });
    137                 });
     135                if ( ! $( 'body' ).hasClass('wp-admin') ) {
     136                        $('.wp-playlist').each(function () {
     137                                return new WPPlaylistView({ el: this });
     138                        });
     139                }
    138140    });
    139141
     142        window.WPPlaylistView = WPPlaylistView;
     143
    140144}(jQuery, _, Backbone));
     145 No newline at end of file

  • src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

     
    1313                        'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
    1414        }
    1515
    16         function replaceCallback( match, type, close ) {
    17                 var index;
    18 
    19                 if ( close && close.indexOf( '[' + type ) > -1 ) {
    20                         index = match.length - close.length;
    21                         return html( 'wp-' + type, match.substring( 0, index ) ) + match.substring( index );
    22                 }
    23 
    24                 return html( 'wp-' + type, match );
    25         }
    26 
    27         function replaceAVShortcodes( content ) {
    28                 var testRegex = /\[(video-playlist|playlist)[^\]]*\]/,
    29                         replaceRegex = /\[(video-playlist|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
    30 
    31                 while ( testRegex.test( content ) ) {
    32                         content = content.replace( replaceRegex, replaceCallback );
    33                 }
    34 
    35                 return content;
    36         }
    37 
    3816        function restoreMediaShortcodes( content ) {
    3917                function getAttr( str, name ) {
    4018                        name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
    … …  
    7654                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    7755                                frame.detach();
    7856                        });
    79                 } else if ( editor.dom.hasClass( node, 'wp-playlist' ) && wp.media.playlist ) {
    80                         frame = wp.media.playlist.edit( data );
    81 
    82                         frame.state('playlist-edit').on( 'update', function( selection ) {
    83                                 var shortcode = wp.media.playlist.shortcode( selection ).string();
    84                                 editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    85                                 frame.detach();
    86                         });
    87                 } else if ( editor.dom.hasClass( node, 'wp-video-playlist' ) && wp.media['video-playlist'] ) {
    88                         frame = wp.media['video-playlist'].edit( data );
    89 
    90                         frame.state('video-playlist-edit').on( 'update', function( selection ) {
    91                                 var shortcode = wp.media['video-playlist'].shortcode( selection ).string();
    92                                 editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    93                                 frame.detach();
    94                         });
    95                 } else {
    96                         // temp
    97                         window.console && window.console.log( 'Edit AV shortcode ' + data );
    9857                }
    9958        }
    10059
    … …  
    152111                if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
    153112                        if ( dom.hasClass( node, 'wp-gallery' ) ) {
    154113                                event.name = 'gallery';
    155                         } else if ( dom.hasClass( node, 'wp-playlist' ) ) {
    156                                 event.name = 'playlist';
    157                         } else if ( dom.hasClass( node, 'wp-video-playlist' ) ) {
    158                                 event.name = 'video-playlist';
    159114                        }
    160115                }
    161116        });
    … …  
    165120                if ( ! editor.plugins.wpview ) {
    166121                        event.content = replaceGalleryShortcodes( event.content );
    167122                }
    168 
    169                 event.content = replaceAVShortcodes( event.content );
    170123        });
    171124
    172125        editor.on( 'PostProcess', function( event ) {

  • src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

     
    141141        background-image: url(images/gallery.png);
    142142}
    143143
    144 .mce-content-body img.wp-media.wp-playlist {
    145         background-image: url("images/playlist-audio.png");
    146 }
    147 
    148 .mce-content-body img.wp-media.wp-video-playlist {
    149         background-image: url("images/playlist-video.png");
    150 }
    151 
    152144/* Image resize handles */
    153145.mce-content-body div.mce-resizehandle {
    154146        border-color: #777;
    … …  
    299291        border-color: rgba(0,0,0,0.3);
    300292}
    301293
     294.wpview-type-audio .track-details {
     295        position: absolute;
     296        top: 0;
     297        left: 5px;
     298        width: 85%;
     299        overflow: hidden;
     300        white-space: nowrap;
     301        text-overflow: ellipsis;
     302}
     303
    302304.gallery img[data-mce-selected]:focus {
    303305        outline: none;
    304306}

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

     
    814814                                <div class="setting preload">
    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>
    820820                                        </div>
    … …  
    829829                                        <span><?php _e( 'Loop' ); ?></span>
    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>
    834840                </div>
    … …  
    901907                                <div class="setting preload">
    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>
    907913                                        </div>
    … …  
    936942                                        <# } #>
    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>
    941952        </script>
    … …  
    966977                        <div class="dashicons dashicons-edit edit"></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>
    971985
    … …  
    974988                        <div class="dashicons dashicons-edit edit"></div>
    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() ?>
    978995        </script>
    979996
     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>
     1014        </script>
     1015
    9801016        <?php
    9811017
    9821018        /**

  • src/wp-includes/media.php

     
    999999}
    10001000
    10011001/**
    1002  * Output and enqueue default scripts and styles for playlists.
     1002 * Output the templates used by playlists
    10031003 *
    10041004 * @since 3.9.0
    1005  *
    1006  * @param string $type Type of playlist: "audio" or "video."
    10071005 */
    1008 function wp_playlist_scripts( $type ) {
    1009         wp_enqueue_style( 'wp-mediaelement' );
    1010         wp_enqueue_script( 'wp-playlist' );
     1006function wp_underscore_playlist_templates() {
    10111007?>
    1012 <!--[if lt IE 9]><script>document.createElement('<?php echo esc_js( $type ) ?>');</script><![endif]-->
    10131008<script type="text/html" id="tmpl-wp-playlist-current-item">
    10141009        <# if ( data.image ) { #>
    10151010        <img src="{{{ data.thumb.src }}}"/>
    … …  
    10451040</script>
    10461041<?php
    10471042}
     1043
     1044/**
     1045 * Output and enqueue default scripts and styles for playlists.
     1046 *
     1047 * @since 3.9.0
     1048 *
     1049 * @param string $type Type of playlist: "audio" or "video."
     1050 */
     1051function wp_playlist_scripts( $type ) {
     1052        wp_enqueue_style( 'wp-mediaelement' );
     1053        wp_enqueue_script( 'wp-playlist' );
     1054?>
     1055<!--[if lt IE 9]><script>document.createElement('<?php echo esc_js( $type ) ?>');</script><![endif]-->
     1056<?php
     1057        wp_underscore_playlist_templates();
     1058}
    10481059add_action( 'wp_playlist_scripts', 'wp_playlist_scripts' );
    10491060
    10501061/**
    … …  
    13901401
    13911402        $default_types = wp_get_audio_extensions();
    13921403        $defaults_atts = array(
     1404                'caption'  => '',
    13931405                'src'      => '',
    13941406                'loop'     => '',
    13951407                'autoplay' => '',
    … …  
    15491561
    15501562        $default_types = wp_get_video_extensions();
    15511563        $defaults_atts = array(
     1564                'caption'  => '',
    15521565                'src'      => '',
    15531566                'poster'   => '',
    15541567                'loop'     => '',
    … …  
    23322345        if ( $meta && ( 'audio' === $type || 'video' === $type ) ) {
    23332346                if ( isset( $meta['length_formatted'] ) )
    23342347                        $response['fileLength'] = $meta['length_formatted'];
     2348
     2349                $response['meta'] = array();
     2350                $keys = array( 'title', 'artist', 'band', 'album', 'genre', 'year', 'length', 'length_formatted' );
     2351                foreach ( $keys as $key ) {
     2352                        if ( ! empty( $meta[ $key ] ) ) {
     2353                                $response['meta'][ $key ] = $meta[ $key ];
     2354                        }
     2355                }
     2356
     2357                $id = get_post_thumbnail_id( $attachment->ID );
     2358                if ( ! empty( $id ) ) {
     2359                        list( $src, $width, $height ) = wp_get_attachment_image_src( $id, 'full' );
     2360                        $response['image'] = compact( 'src', 'width', 'height' );
     2361                        list( $src, $width, $height ) = wp_get_attachment_image_src( $id, 'thumbnail' );
     2362                        $response['thumb'] = compact( 'src', 'width', 'height' );
     2363                }
    23352364        }
    23362365
    23372366        if ( function_exists('get_compat_media_markup') )

  • src/wp-includes/script-loader.php

     
    396396        // Both rely on numerous settings, styles, and templates to operate correctly.
    397397        $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement' ), false, 1 );
    398398        $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
    399         $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor', 'mce-view' ), false, 1 );
     399        $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor', 'mce-view', 'wp-playlist' ), false, 1 );
    400400        $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
    401401
    402402        if ( is_admin() ) {