Media: Improve display and accessibility of meta data in detail view.
* 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. git-svn-id: https://develop.svn.wordpress.org/trunk@43633 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Adam Silverstein
parent
37b53387ff
commit
fd5ba80c5c
@ -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.
|
||||
*
|
||||
|
||||
@ -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 }} × {{ 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 }} × {{ 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 ) { #>
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -1518,4 +1518,43 @@ class Tests_Functions extends WP_UnitTestCase {
|
||||
array( '/leading/relative/path', false ),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Test the human_readable_duration function.
|
||||
*
|
||||
* @ticket 39667
|
||||
* @dataProvider _datahuman_readable_duration()
|
||||
*
|
||||
* @param $input
|
||||
* @param $expected
|
||||
*/
|
||||
public function test_duration_format( $input, $expected ) {
|
||||
$this->assertSame( $expected, human_readable_duration( $input ) );
|
||||
}
|
||||
|
||||
public function _datahuman_readable_duration() {
|
||||
return array(
|
||||
array( array(), false ),
|
||||
array( '30:00', '30 minutes, 0 seconds' ),
|
||||
array( 'Batman Begins !', false ),
|
||||
array( '', false ),
|
||||
array( '-1', false ),
|
||||
array( -1, false ),
|
||||
array( 0, false ),
|
||||
array( 1, false ),
|
||||
array( '00', false ),
|
||||
array( '00:00', '0 minutes, 0 seconds' ),
|
||||
array( '00:00:00', '0 hours, 0 minutes, 0 seconds' ),
|
||||
array( '10:30:34', '10 hours, 30 minutes, 34 seconds' ),
|
||||
array( '00:30:34', '0 hours, 30 minutes, 34 seconds' ),
|
||||
array( 'MM:30:00', false ),
|
||||
array( '30:MM', false ),
|
||||
array( 'MM:00', false ),
|
||||
array( 'MM:MM', false ),
|
||||
array( '01:01', '1 minute, 1 second' ),
|
||||
array( '01:01:01', '1 hour, 1 minute, 1 second' ),
|
||||
array( '0:05', '5 seconds' ),
|
||||
array( '1:02:00', '1 hour, 2 minutes, 0 seconds' ),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user