WordPress.org
Get WordPress

Make WordPress Core


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

Add TinyMCE placeholders for audio and video shortcodes.

  • Add wp.media.mixin.
  • Add wp.media.audio and wp.media.video.
  • Add wp.media.model.PostAudio and wp.media.model.PostVideo
  • Add wp.media.controller.AudioDetails and wp.media.controller.VideoDetails.
  • Add wp.media.controller.ReplaceAudio and wp.media.controller.ReplaceVideo.
  • Add wp.media.view.MediaFrame.AudioDetails and wp.media.view.MediaFrame.VideoDetails.
  • Add wp.media.view.AudioDetails and wp.media.view.VideoDetails.
  • Update the wpgallery TinyMCE plugin.
  • Display audio and video players in the media modal when shortcode is clicked.
  • Provide a UI to edit shortcode attributes in the media modal.
  • Provide a UI to replace the src media file in an audio or video shortcode.

See #27016.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r27408 r27411  
    556556        <?php // reusing .media-embed to pick up the styles for now ?>
    557557        <div class="media-embed">
    558             <div class="embed-image-settings">
     558            <div class="embed-media-settings">
    559559                <div class="thumbnail">
    560560                    <img src="{{ data.model.url }}" draggable="false" />
    … …  
    646646                    </div>
    647647                <# } #>
     648            </div>
     649        </div>
     650    </script>
     651
     652    <script type="text/html" id="tmpl-audio-details">
     653        <?php // reusing .media-embed to pick up the styles for now ?>
     654        <# var rendered = false; #>
     655        <div class="media-embed">
     656            <div class="embed-media-settings embed-audio-settings">
     657                <# if ( data.model.src ) { #>
     658                    <audio class="wp-audio-shortcode" src="{{{ data.model.src }}}"
     659                        preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
     660                        <# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
     661                        <# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
     662                    />
     663                    <# rendered = true; #>
     664                <label class="setting">
     665                    <span>SRC</span>
     666                    <input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" />
     667                </label>
     668                <# } #>
     669                <?php
     670                $default_types = wp_get_audio_extensions();
     671
     672                foreach ( $default_types as $type ): ?>
     673                <# if ( data.model.<?php echo $type ?> ) { #>
     674                    <# if ( ! rendered ) { #>
     675                    <audio class="wp-audio-shortcode" src="{{{ data.model.<?php echo $type ?> }}}"
     676                        preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
     677                        <# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
     678                        <# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
     679                    />
     680                    <#
     681                        rendered = true;
     682                    } #>
     683                <label class="setting">
     684                    <span><?php echo strtoupper( $type ) ?></span>
     685                    <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" />
     686                </label>
     687                <# } #>
     688                <?php endforeach ?>
     689
     690                <div class="setting preload">
     691                    <span><?php _e( 'Preload' ); ?></span>
     692                    <div class="button-group button-large" data-setting="preload">
     693                        <button class="button" value="auto">
     694                            <?php esc_attr_e( 'Auto' ); ?>
     695                        </button>
     696                        <button class="button" value="metadata">
     697                            <?php esc_attr_e( 'Metadata' ); ?>
     698                        </button>
     699                        <button class="button active" value="none">
     700                            <?php esc_attr_e( 'None' ); ?>
     701                        </button>
     702                    </div>
     703                </div>
     704
     705                <label class="setting checkbox-setting">
     706                    <span><?php _e( 'Autoplay' ); ?></span>
     707                    <input type="checkbox" data-setting="autoplay" />
     708                </label>
     709
     710                <label class="setting checkbox-setting">
     711                    <span><?php _e( 'Loop' ); ?></span>
     712                    <input type="checkbox" data-setting="loop" />
     713                </label>
     714                <div class="clear"></div>
     715            </div>
     716        </div>
     717    </script>
     718
     719    <script type="text/html" id="tmpl-video-details">
     720        <?php // reusing .media-embed to pick up the styles for now ?>
     721        <# var rendered = false; #>
     722        <div class="media-embed">
     723            <div class="embed-media-settings embed-video-settings">
     724                <div class="wp-video-holder">
     725                <#
     726                var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
     727                    h = ! data.model.height ? 320 : data.model.height;
     728
     729                if ( w !== data.model.width ) {
     730                    h = Math.ceil( ( h * w ) / data.model.width );
     731                }
     732
     733                if ( data.model.src ) { #>
     734                    <video class="wp-video-shortcode"
     735                        width="{{{ w }}}"
     736                        height="{{{ h }}}"
     737                        src="{{{ data.model.src }}}"
     738                        <# if ( ! _.isUndefined( data.model.poster ) ) { #>poster="{{{ data.model.poster }}}"<# } #>
     739                        preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
     740                        <# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
     741                        <# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
     742                    />
     743                    <# rendered = true; #>
     744                <label class="setting">
     745                    <span>SRC</span>
     746                    <input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" />
     747                </label>
     748                <# } #>
     749                <?php
     750                $default_types = wp_get_video_extensions();
     751
     752                foreach ( $default_types as $type ): ?>
     753                <# if ( data.model.<?php echo $type ?> ) { #>
     754                    <# if ( ! rendered ) { #>
     755                    <video class="wp-video-shortcode"
     756                        width="{{{ w }}}"
     757                        height="{{{ h }}}"
     758                        src="{{{ data.model.<?php echo $type ?> }}}"
     759                        <# if ( ! _.isUndefined( data.model.poster ) ) { #>poster="{{{ data.model.poster }}}"<# } #>
     760                        preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
     761                        <# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
     762                        <# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
     763                    />
     764                    <#
     765                        rendered = true;
     766                    } #>
     767                <label class="setting">
     768                    <span><?php echo strtoupper( $type ) ?></span>
     769                    <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" />
     770                </label>
     771                <# } #>
     772                <?php endforeach ?>
     773                </div>
     774                <label class="setting">
     775                    <span><?php _e( 'Poster Image' ); ?></span>
     776                    <input type="text" data-setting="poster" value="{{{ data.model.poster }}}" />
     777                </label>
     778                <div class="setting preload">
     779                    <span><?php _e( 'Preload' ); ?></span>
     780                    <div class="button-group button-large" data-setting="preload">
     781                        <button class="button" value="auto">
     782                            <?php esc_attr_e( 'Auto' ); ?>
     783                        </button>
     784                        <button class="button" value="metadata">
     785                            <?php esc_attr_e( 'Metadata' ); ?>
     786                        </button>
     787                        <button class="button active" value="none">
     788                            <?php esc_attr_e( 'None' ); ?>
     789                        </button>
     790                    </div>
     791                </div>
     792
     793                <label class="setting checkbox-setting">
     794                    <span><?php _e( 'Autoplay' ); ?></span>
     795                    <input type="checkbox" data-setting="autoplay" />
     796                </label>
     797
     798                <label class="setting checkbox-setting">
     799                    <span><?php _e( 'Loop' ); ?></span>
     800                    <input type="checkbox" data-setting="loop" />
     801                </label>
     802                <div class="clear"></div>
    648803            </div>
    649804        </div>
Note: See TracChangeset for help on using the changeset viewer.