WordPress.org
Get WordPress

Make WordPress Core

Changeset 27440


Ignore:
Timestamp:
03/06/2014 07:05:11 PM (11 years ago)
Author:
wonderboymusic
Message:

Cleanup audio/video shortcodes in the media modal:

  • On the controller's update, replace, and close events, call detach() on the frame
  • Cleanup the HTML ouput of the Underscore templates.
  • Move some logic from the Underscore template to the VideoDetails view class.

See #27016.

Location:
trunk/src/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/js/media-views.js

    r27438 r27440  
    62386238        close : function() {
    62396239            this.mejs.pause();
    6240             this.remove();
    62416240        },
    62426241
    … …  
    63036302        close : function() {
    63046303            this.mejs.pause();
    6305             this.remove();
    63066304        },
    63076305
    … …  
    63116309
    63126310        render: function() {
    6313             var self = this, settings = {
     6311            var video, self = this, settings = {
    63146312                success : this.player
    63156313            };
    … …  
    63226320            setTimeout( function() { self.resetFocus(); }, 10 );
    63236321
    6324             new MediaElementPlayer( this.$('.wp-video-shortcode').get(0), settings );
     6322            video = this.$('.wp-video-shortcode').get(0);
     6323            video.src = [
     6324                video.src,
     6325                video.src.indexOf('?') > -1 ? '&' : '?',
     6326                (new Date()).getTime()
     6327            ].join('');
     6328
     6329            new MediaElementPlayer( video, settings );
    63256330            return this;
    63266331        },

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

    r27411 r27440  
    9595        } else if ( editor.dom.hasClass( node, 'wp-video' ) ) {
    9696            frame = wp.media.video.edit( data );
     97            frame.on( 'close', function () {
     98                frame.detach();
     99            } );
    97100            frame.state( 'video-details' ).on( 'update replace', function ( selection ) {
    98101                var shortcode = wp.media.video.shortcode( selection );
    99102                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
     103                frame.detach();
    100104            } );
    101105            frame.open();
    102106        } else if ( editor.dom.hasClass( node, 'wp-audio' ) ) {
    103107            frame = wp.media.audio.edit( data );
     108            frame.on( 'close', function () {
     109                frame.detach();
     110            } );
    104111            frame.state( 'audio-details' ).on( 'update replace', function ( selection ) {
    105112                var shortcode = wp.media.audio.shortcode( selection );
    106113                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
     114                frame.detach();
    107115            } );
    108116            frame.open();

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

    r27421 r27440  
    651651
    652652    <script type="text/html" id="tmpl-audio-details">
    653         <?php // reusing .media-embed to pick up the styles for now ?>
    654         <# var rendered = false; #>
     653        <?php // reusing .media-embed to pick up the styles for now
     654        ?><# var rendered = false; #>
    655655        <div class="media-embed">
    656656            <div class="embed-media-settings embed-audio-settings">
    657                 <#
    658                     var src,
    659                         t = (new Date()).getTime();
    660 
    661                     if ( data.model.src ) {
    662                         src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
    663                     #>
    664                     <audio controls class="wp-audio-shortcode" src="{{{ src }}}"
     657                <# if ( data.model.src ) { #>
     658                    <audio controls
     659                        class="wp-audio-shortcode"
     660                        src="{{{ data.model.src }}}"
    665661                        preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
    666662                        <#
    667                         if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
    668                             #> autoplay<#
     663                        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     664                        ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     665                            #> <?php echo $attr ?><#
    669666                        }
    670 
    671                         if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
    672                             #> loop<#
    673                         } #>
     667                        <?php endforeach ?>#>
    674668                    />
    675669                    <# rendered = true; #>
    … …  
    682676                $default_types = wp_get_audio_extensions();
    683677
    684                 foreach ( $default_types as $type ): ?>
    685                 <# if ( data.model.<?php echo $type ?> ) { #>
    686                     <# if ( ! rendered ) {
    687                         src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
    688                     #>
    689                     <audio controls class="wp-audio-shortcode" src="{{{ src }}}"
     678                foreach ( $default_types as $type ):
     679                ?><# if ( data.model.<?php echo $type ?> ) { #>
     680                    <# if ( ! rendered ) { #>
     681                    <audio controls
     682                        class="wp-audio-shortcode"
     683                        src="{{{ data.model.<?php echo $type ?> }}}"
    690684                        preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
    691685                        <#
    692                         if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
    693                             #> autoplay<#
     686                        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     687                        ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     688                            #> <?php echo $attr ?><#
    694689                        }
    695                         if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
    696                             #> loop<#
    697                         } #>
     690                        <?php endforeach ?>#>
    698691                    />
    699                     <#
    700                         rendered = true;
     692                    <# rendered = true;
    701693                    } #>
    702694                <label class="setting">
    … …  
    710702                    <span><?php _e( 'Preload' ); ?></span>
    711703                    <div class="button-group button-large" data-setting="preload">
    712                         <button class="button" value="auto">
    713                             <?php esc_attr_e( 'Auto' ); ?>
    714                         </button>
    715                         <button class="button" value="metadata">
    716                             <?php esc_attr_e( 'Metadata' ); ?>
    717                         </button>
    718                         <button class="button active" value="none">
    719                             <?php esc_attr_e( 'None' ); ?>
    720                         </button>
     704                        <button class="button" value="auto"><?php _e( 'Auto' ); ?></button>
     705                        <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
     706                        <button class="button active" value="none"><?php _e( 'None' ); ?></button>
    721707                    </div>
    722708                </div>
    … …  
    737723
    738724    <script type="text/html" id="tmpl-video-details">
    739         <?php // reusing .media-embed to pick up the styles for now ?>
    740         <# var rendered = false; #>
     725        <?php // reusing .media-embed to pick up the styles for now
     726        ?><# var rendered = false; #>
    741727        <div class="media-embed">
    742728            <div class="embed-media-settings embed-video-settings">
    743729                <div class="wp-video-holder">
    744730                <#
    745                     var src,
    746                         t = (new Date()).getTime(),
    747                         w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
    748                         h = ! data.model.height ? 360 : data.model.height;
     731                var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
     732                    h = ! data.model.height ? 360 : data.model.height;
    749733
    750734                if ( w !== data.model.width ) {
    … …  
    752736                }
    753737
    754                 if ( data.model.src ) {
    755                     src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
    756                 #>
    757                     <video controls class="wp-video-shortcode"
     738                if ( data.model.src ) { #>
     739                    <video controls
     740                        class="wp-video-shortcode"
    758741                        width="{{{ w }}}"
    759742                        height="{{{ h }}}"
    760                         src="{{{ src }}}"
    761                         <#
    762                         if ( ! _.isUndefined( data.model.poster ) ) {
    763                             #> poster="{{{ data.model.poster }}}"<#
     743                        src="{{{ data.model.src }}}"
     744                        <?php
     745                        $props = array( 'poster' => '', 'preload' => 'metadata' );
     746                        foreach ( $props as $key => $value ):
     747                            echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"
     748                        <?php endforeach;
     749                        ?><#
     750                        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     751                        ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     752                            #> <?php echo $attr ?><#
    764753                        }
    765                         #> preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
    766                         <#
    767                         if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
    768                             #> autoplay<#
    769                         }
    770 
    771                         if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
    772                             #> loop<#
    773                         } #>
     754                        <?php endforeach ?>#>
    774755                    />
    775756                    <# rendered = true; #>
    … …  
    782763                $default_types = wp_get_video_extensions();
    783764
    784                 foreach ( $default_types as $type ): ?>
    785                 <# if ( data.model.<?php echo $type ?> ) { #>
    786                     <# if ( ! rendered ) {
    787                         src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
    788                     #>
    789                     <video controls class="wp-video-shortcode"
     765                foreach ( $default_types as $type ):
     766                ?><# if ( data.model.<?php echo $type ?> ) {
     767                    if ( ! rendered ) { #>
     768                    <video controls
     769                        class="wp-video-shortcode"
    790770                        width="{{{ w }}}"
    791771                        height="{{{ h }}}"
    792                         src="{{{ src }}}"
    793                         <#
    794                         if ( ! _.isUndefined( data.model.poster ) ) {
    795                             #> poster="{{{ data.model.poster }}}"<#
     772                        src="{{{ data.model.<?php echo $type ?> }}}"
     773                        <?php
     774                        $props = array( 'poster' => '', 'preload' => 'metadata' );
     775                        foreach ( $props as $key => $value ):
     776                            echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"
     777                        <?php endforeach;
     778                        ?><#
     779                        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     780                        ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     781                            #> <?php echo $attr ?><#
    796782                        }
    797                         #> preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
    798                         <#
    799                         if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
    800                             #> autoplay<#
    801                         }
    802 
    803                         if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
    804                             #> loop<#
    805                         } #>
     783                        <?php endforeach ?>#>
    806784                    />
    807                     <#
    808                         rendered = true;
     785                    <# rendered = true;
    809786                    } #>
    810787                <label class="setting">
Note: See TracChangeset for help on using the changeset viewer.