Changeset 49195

Timestamp:

10/18/2020 05:37:19 PM (6 years 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:

• js/media/views/attachment/details-two-column.js (modified) (1 diff)
• js/media/views/attachment/details.js (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (1 diff)
• wp-includes/media-template.php (modified) (2 diffs)

trunk/src/js/media/views/attachment/details-two-column.js

@@ -36 +36 @@
          * 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 );
-                } );
-        }
 });
 

trunk/src/js/media/views/attachment/details.js

@@ -199 +199 @@
                 }
         },
+
         /**
          * Untrashes an attachment.
@@ -258 +259 @@
                         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 );
+                } );
         }
 });

trunk/src/wp-includes/css/media-views.css

@@ -1766 +1766 @@
 }
 
+.attachment-info .wp-media-wrapper {
+        margin-bottom: 8px;
+}
+
+.attachment-info .wp-media-wrapper.wp-audio {
+        margin-top: 13px;
+}
+
 .attachment-info .filename {
         font-weight: 600;

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

@@ -367 +367 @@
 
                                 <# 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 }}"/>
@@ -596 +596 @@
                 </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>