sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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


git-svn-id: https://develop.svn.wordpress.org/trunk@49195 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
John Blackbourn 2020-10-18 17:37:19 +00:00
parent 422a9049b5
commit d51fc4b06c
4 changed files with 56 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/js/media/views/attachment/details-two-column.js
View File

@ -35,17 +35,8 @@ TwoColumn = Details.extend(/** @lends wp.media.view.Attachment.Details.TowColumn
/**
* Noop this from parent class, doesn't apply here.
*/
toggleSelectionHandler: function() {},
toggleSelectionHandler: function() {}
render: function() {
Details.prototype.render.apply( this, arguments );
wp.media.mixin.removeAllPlayers();
this.$( 'audio, video' ).each( function (i, elem) {
var el = wp.media.view.MediaDetails.prepareSrc( elem );
new window.MediaElementPlayer( el, wp.media.mixin.mejsSettings );
} );
}
});
module.exports = TwoColumn;

11
src/js/media/views/attachment/details.js
View File

@ -198,6 +198,7 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
this.moveFocus();
}
},
/**
* Untrashes an attachment.
*
@ -257,6 +258,16 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
this.controller.trigger( 'attachment:details:shift-tab', event );
return false;
}
},
render: function() {
Attachment.prototype.render.apply( this, arguments );
wp.media.mixin.removeAllPlayers();
this.$( 'audio, video' ).each( function (i, elem) {
var el = wp.media.view.MediaDetails.prepareSrc( elem );
new window.MediaElementPlayer( el, wp.media.mixin.mejsSettings );
} );
}
});

8
src/wp-includes/css/media-views.css
View File

@ -1765,6 +1765,14 @@
padding-bottom: 11px;
}
.attachment-info .wp-media-wrapper {
margin-bottom: 8px;
}
.attachment-info .wp-media-wrapper.wp-audio {
margin-top: 13px;
}
.attachment-info .filename {
font-weight: 600;
color: #444;

46
src/wp-includes/media-template.php
View File

@ -366,7 +366,7 @@ function wp_print_media_templates() {
<# } #>
<# if ( 'audio' === data.type ) { #>
<div class="wp-media-wrapper">
<div class="wp-media-wrapper wp-audio">
<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
<source type="{{ data.mime }}" src="{{ data.url }}"/>
</audio>
@ -595,15 +595,41 @@ function wp_print_media_templates() {
</span>
</h2>
<div class="attachment-info">
<div class="thumbnail thumbnail-{{ data.type }}">
<# if ( data.uploading ) { #>
<div class="media-progress-bar"><div></div></div>
<# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
<img src="{{ data.size.url }}" draggable="false" alt="" />
<# } else { #>
<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
<# } #>
</div>
<# if ( 'audio' === data.type ) { #>
<div class="wp-media-wrapper wp-audio">
<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
<source type="{{ data.mime }}" src="{{ data.url }}"/>
</audio>
</div>
<# } else if ( 'video' === data.type ) {
var w_rule = '';
if ( data.width ) {
w_rule = 'width: ' + data.width + 'px;';
} else if ( wp.media.view.settings.contentWidth ) {
w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
}
#>
<div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
<video controls="controls" class="wp-video-shortcode" preload="metadata"
<# if ( data.width ) { #>width="{{ data.width }}"<# } #>
<# if ( data.height ) { #>height="{{ data.height }}"<# } #>
<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
<source type="{{ data.mime }}" src="{{ data.url }}"/>
</video>
</div>
<# } else { #>
<div class="thumbnail thumbnail-{{ data.type }}">
<# if ( data.uploading ) { #>
<div class="media-progress-bar"><div></div></div>
<# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
<img src="{{ data.size.url }}" draggable="false" alt="" />
<# } else { #>
<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
<# } #>
</div>
<# } #>
<div class="details">
<div class="filename">{{ data.filename }}</div>
<div class="uploaded">{{ data.dateFormatted }}</div>