WordPress.org

Make WordPress Core

Changeset 49195


Ignore:
Timestamp:
10/18/2020 05:37:19 PM (7 months ago)
Author:
johnbillion
Message:

Media: Add an audio and video player to the media manager modal.

This introduces a means of playing existing audio and video files while browsing them prior to selecting them for use.

Props antpb, Mista-Flo, garrett-eclipse, mapk

Fixes #43640

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/media/views/attachment/details-two-column.js

    r43309 r49195  
    3636     * Noop this from parent class, doesn't apply here.
    3737     */
    38     toggleSelectionHandler: function() {},
     38    toggleSelectionHandler: function() {}
    3939
    40     render: function() {
    41         Details.prototype.render.apply( this, arguments );
    42 
    43         wp.media.mixin.removeAllPlayers();
    44         this.$( 'audio, video' ).each( function (i, elem) {
    45             var el = wp.media.view.MediaDetails.prepareSrc( elem );
    46             new window.MediaElementPlayer( el, wp.media.mixin.mejsSettings );
    47         } );
    48     }
    4940});
    5041
  • trunk/src/js/media/views/attachment/details.js

    r48309 r49195  
    199199        }
    200200    },
     201
    201202    /**
    202203     * Untrashes an attachment.
     
    258259            return false;
    259260        }
     261    },
     262
     263    render: function() {
     264        Attachment.prototype.render.apply( this, arguments );
     265
     266        wp.media.mixin.removeAllPlayers();
     267        this.$( 'audio, video' ).each( function (i, elem) {
     268            var el = wp.media.view.MediaDetails.prepareSrc( elem );
     269            new window.MediaElementPlayer( el, wp.media.mixin.mejsSettings );
     270        } );
    260271    }
    261272});
  • trunk/src/wp-includes/css/media-views.css

    r49064 r49195  
    17661766}
    17671767
     1768.attachment-info .wp-media-wrapper {
     1769    margin-bottom: 8px;
     1770}
     1771
     1772.attachment-info .wp-media-wrapper.wp-audio {
     1773    margin-top: 13px;
     1774}
     1775
    17681776.attachment-info .filename {
    17691777    font-weight: 600;
  • trunk/src/wp-includes/media-template.php

    r49064 r49195  
    367367
    368368                <# if ( 'audio' === data.type ) { #>
    369                 <div class="wp-media-wrapper">
     369                <div class="wp-media-wrapper wp-audio">
    370370                    <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
    371371                        <source type="{{ data.mime }}" src="{{ data.url }}"/>
     
    596596        </h2>
    597597        <div class="attachment-info">
    598             <div class="thumbnail thumbnail-{{ data.type }}">
    599                 <# if ( data.uploading ) { #>
    600                     <div class="media-progress-bar"><div></div></div>
    601                 <# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
    602                     <img src="{{ data.size.url }}" draggable="false" alt="" />
    603                 <# } else { #>
    604                     <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
    605                 <# } #>
    606             </div>
     598
     599            <# if ( 'audio' === data.type ) { #>
     600                <div class="wp-media-wrapper wp-audio">
     601                    <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
     602                        <source type="{{ data.mime }}" src="{{ data.url }}"/>
     603                    </audio>
     604                </div>
     605            <# } else if ( 'video' === data.type ) {
     606                var w_rule = '';
     607                if ( data.width ) {
     608                    w_rule = 'width: ' + data.width + 'px;';
     609                } else if ( wp.media.view.settings.contentWidth ) {
     610                    w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
     611                }
     612            #>
     613                <div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
     614                    <video controls="controls" class="wp-video-shortcode" preload="metadata"
     615                        <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
     616                        <# if ( data.height ) { #>height="{{ data.height }}"<# } #>
     617                        <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
     618                        <source type="{{ data.mime }}" src="{{ data.url }}"/>
     619                    </video>
     620                </div>
     621            <# } else { #>
     622                <div class="thumbnail thumbnail-{{ data.type }}">
     623                    <# if ( data.uploading ) { #>
     624                        <div class="media-progress-bar"><div></div></div>
     625                    <# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
     626                        <img src="{{ data.size.url }}" draggable="false" alt="" />
     627                    <# } else { #>
     628                        <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
     629                    <# } #>
     630                </div>
     631            <# } #>
     632
    607633            <div class="details">
    608634                <div class="filename">{{ data.filename }}</div>
Note: See TracChangeset for help on using the changeset viewer.