Changeset 49195 for trunk/src/wp-includes/media-template.php

Timestamp:

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

File:

• trunk/src/wp-includes/media-template.php (modified) (2 diffs)

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>