vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-10-06 23:58:03 +00:00
Code Issues Actions 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
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/css/media-views.css
+8
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;
src/wp-includes/media-template.php
+36 -10
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>