mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-02-13 03:04:42 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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

Browse Source 
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. * 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; 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(); this.moveFocus();
} }
}, },
/** /**
* Untrashes an attachment. * 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 ); this.controller.trigger( 'attachment:details:shift-tab', event );
return false; 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; padding-bottom: 11px;
} }
.attachment-info .wp-media-wrapper {
margin-bottom: 8px;
}
.attachment-info .wp-media-wrapper.wp-audio {
margin-top: 13px;
}
.attachment-info .filename { .attachment-info .filename {
font-weight: 600; font-weight: 600;
color: #444; color: #444;

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

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