Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-26 06:13:07 +02:00
Code Issues Projects Releases Wiki Activity

Media: Improve display and accessibility of meta data in detail view.

Browse Source 
* Add a `human_readable_duration` function including tests.
* Add 'pixels' after image width/height.
* Add screen reader text for durations.

Props Presskopp, kiranpotphode, milindmore22, stormrockwell, afercia.
Fixes #39667. 


Built from https://develop.svn.wordpress.org/trunk@43633


git-svn-id: http://core.svn.wordpress.org/trunk@43462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Adam Silverstein 2018-09-08 04:20:24 +00:00
parent c0aa2239a8
commit e71a3d6193
4 changed files with 81 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
wp-includes/functions.php
View File

@ -322,6 +322,62 @@ function size_format( $bytes, $decimals = 0 ) {
return false;
}
/**
* Convert a filelength to human readable format.
*
* @since 5.0
*
* @param string $filelength Duration will be in string format (HH:ii:ss) OR (ii:ss).
* @return boolean|string A human readable filelength string, false on failure.
*/
function human_readable_duration( $filelength = '' ) {
// Return false if filelength is empty or not in format.
if ( ( empty( $filelength ) || ! is_string( $filelength ) ) ) {
return false;
}
// Validate filelength format.
if ( ! ( (bool) preg_match( '/^(([0-3]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/', $filelength ) ) ) {
return false;
}
$human_readable_duration = array();
// Extract duration.
$durations = array_reverse( explode( ':', $filelength ) );
$duration_count = count( $durations );
if ( 3 === $duration_count ) {
// Three parts: hours, minutes & seconds.
list( $second, $minute, $hour ) = $durations;
} elseif ( 2 === $duration_count ) {
// Two parts: minutes & seconds.
list( $second, $minute ) = $durations;
} else {
return false;
}
// Add the hour part to the string.
if ( ! empty( $hour ) && is_numeric( $hour ) ) {
/* translators: Time duration in hour or hours. */
$human_readable_duration[] = sprintf( _n( '%s hour', '%s hours', $hour ), (int) $hour );
}
// Add the minute part to the string.
if ( ! empty( $minute ) && is_numeric( $minute ) ) {
/* translators: Time duration in minute or minutes. */
$human_readable_duration[] = sprintf( _n( '%s minute', '%s minutes', $minute ), (int) $minute );
}
// Add the second part to the string.
if ( ! empty( $second ) && is_numeric( $second ) ) {
/* translators: Time duration in second or seconds. */
$human_readable_duration[] = sprintf( _n( '%s second', '%s seconds', $second ), (int) $second );
}
return implode( ', ', $human_readable_duration );
}
/**
* Get the week start and end from the datetime or date string from MySQL.
*

28
wp-includes/media-template.php
View File

@ -371,12 +371,20 @@ function wp_print_media_templates() {
<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
<# if ( 'image' === data.type && ! data.uploading ) { #>
<# if ( data.width && data.height ) { #>
<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong>
<?php
/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
?>
</div>
<# } #>
<# } #>
<# if ( data.fileLength ) { #>
<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
<span aria-hidden="true">{{ data.fileLength }}</span>
<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
</div>
<# } #>
<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
@ -547,7 +555,12 @@ function wp_print_media_templates() {
<div class="file-size">{{ data.filesizeHumanReadable }}</div>
<# if ( 'image' === data.type && ! data.uploading ) { #>
<# if ( data.width && data.height ) { #>
<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
<div class="dimensions">
<?php
/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
?>
</div>
<# } #>
<# if ( data.can.save && data.sizes ) { #>
@ -555,8 +568,11 @@ function wp_print_media_templates() {
<# } #>
<# } #>
<# if ( data.fileLength ) { #>
<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
<div class="file-length"><?php _e( 'Length:' ); ?>
<span aria-hidden="true">{{ data.fileLength }}</span>
<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
</div>
<# } #>
<# if ( ! data.uploading && data.can.remove ) { #>

3
wp-includes/media.php
View File

@ -3378,7 +3378,8 @@ function wp_prepare_attachment_for_js( $attachment ) {
if ( $meta && ( 'audio' === $type || 'video' === $type ) ) {
if ( isset( $meta['length_formatted'] ) ) {
$response['fileLength'] = $meta['length_formatted'];
$response['fileLength'] = $meta['length_formatted'];
$response['fileLengthHumanReadable'] = human_readable_duration( $meta['length_formatted'] );
}
$response['meta'] = array();

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.0-alpha-43631';
$wp_version = '5.0-alpha-43633';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.