WordPress.org

Make WordPress Core

Changeset 43633


Ignore:
Timestamp:
09/08/2018 04:19:40 AM (14 months ago)
Author:
adamsilverstein
Message:

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.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/functions.php

    r43599 r43633  
    321321
    322322    return false;
     323}
     324
     325/**
     326 * Convert a filelength to human readable format.
     327 *
     328 * @since 5.0
     329 *
     330 * @param string $filelength Duration will be in string format (HH:ii:ss) OR (ii:ss).
     331 * @return boolean|string A human readable filelength string, false on failure.
     332 */
     333function human_readable_duration( $filelength = '' ) {
     334    // Return false if filelength is empty or not in format.
     335    if ( ( empty( $filelength ) || ! is_string( $filelength ) ) ) {
     336        return false;
     337    }
     338
     339    // Validate filelength format.
     340    if ( ! ( (bool) preg_match( '/^(([0-3]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/', $filelength ) ) ) {
     341        return false;
     342    }
     343
     344    $human_readable_duration = array();
     345
     346    // Extract duration.
     347    $durations      = array_reverse( explode( ':', $filelength ) );
     348    $duration_count = count( $durations );
     349
     350    if ( 3 === $duration_count ) {
     351        // Three parts: hours, minutes & seconds.
     352        list( $second, $minute, $hour ) = $durations;
     353    } elseif ( 2 === $duration_count ) {
     354        // Two parts: minutes & seconds.
     355        list( $second, $minute ) = $durations;
     356    } else {
     357        return false;
     358    }
     359
     360    // Add the hour part to the string.
     361    if ( ! empty( $hour ) && is_numeric( $hour ) ) {
     362        /* translators: Time duration in hour or hours. */
     363        $human_readable_duration[] = sprintf( _n( '%s hour', '%s hours', $hour ), (int) $hour );
     364    }
     365
     366    // Add the minute part to the string.
     367    if ( ! empty( $minute ) && is_numeric( $minute ) ) {
     368        /* translators: Time duration in minute or minutes. */
     369        $human_readable_duration[] = sprintf( _n( '%s minute', '%s minutes', $minute ), (int) $minute );
     370    }
     371
     372    // Add the second part to the string.
     373    if ( ! empty( $second ) && is_numeric( $second ) ) {
     374        /* translators: Time duration in second or seconds. */
     375        $human_readable_duration[] = sprintf( _n( '%s second', '%s seconds', $second ), (int) $second );
     376    }
     377
     378    return implode( ', ', $human_readable_duration );
    323379}
    324380
  • trunk/src/wp-includes/media-template.php

    r43601 r43633  
    372372                <# if ( 'image' === data.type && ! data.uploading ) { #>
    373373                    <# if ( data.width && data.height ) { #>
    374                         <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
     374                        <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong>
     375                            <?php
     376                            /* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
     377                            printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
     378                            ?>
     379                        </div>
    375380                    <# } #>
    376381                <# } #>
    377382
    378                 <# if ( data.fileLength ) { #>
    379                     <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
     383                <# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
     384                    <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
     385                        <span aria-hidden="true">{{ data.fileLength }}</span>
     386                        <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
     387                    </div>
    380388                <# } #>
    381389
     
    548556                <# if ( 'image' === data.type && ! data.uploading ) { #>
    549557                    <# if ( data.width && data.height ) { #>
    550                         <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
     558                        <div class="dimensions">
     559                            <?php
     560                            /* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
     561                            printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
     562                            ?>
     563                        </div>
    551564                    <# } #>
    552565
     
    556569                <# } #>
    557570
    558                 <# if ( data.fileLength ) { #>
    559                     <div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
     571                <# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
     572                    <div class="file-length"><?php _e( 'Length:' ); ?>
     573                        <span aria-hidden="true">{{ data.fileLength }}</span>
     574                        <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
     575                    </div>
    560576                <# } #>
    561577
  • trunk/src/wp-includes/media.php

    r43582 r43633  
    33793379    if ( $meta && ( 'audio' === $type || 'video' === $type ) ) {
    33803380        if ( isset( $meta['length_formatted'] ) ) {
    3381             $response['fileLength'] = $meta['length_formatted'];
     3381            $response['fileLength']              = $meta['length_formatted'];
     3382            $response['fileLengthHumanReadable'] = human_readable_duration( $meta['length_formatted'] );
    33823383        }
    33833384
  • trunk/tests/phpunit/tests/functions.php

    r43571 r43633  
    15191519        );
    15201520    }
     1521
     1522    /**
     1523     * Test the human_readable_duration function.
     1524     *
     1525     * @ticket 39667
     1526     * @dataProvider _datahuman_readable_duration()
     1527     *
     1528     * @param $input
     1529     * @param $expected
     1530     */
     1531    public function test_duration_format( $input, $expected ) {
     1532        $this->assertSame( $expected, human_readable_duration( $input ) );
     1533    }
     1534
     1535    public function _datahuman_readable_duration() {
     1536        return array(
     1537            array( array(), false ),
     1538            array( '30:00', '30 minutes, 0 seconds' ),
     1539            array( 'Batman Begins !', false ),
     1540            array( '', false ),
     1541            array( '-1', false ),
     1542            array( -1, false ),
     1543            array( 0, false ),
     1544            array( 1, false ),
     1545            array( '00', false ),
     1546            array( '00:00', '0 minutes, 0 seconds' ),
     1547            array( '00:00:00', '0 hours, 0 minutes, 0 seconds' ),
     1548            array( '10:30:34', '10 hours, 30 minutes, 34 seconds' ),
     1549            array( '00:30:34', '0 hours, 30 minutes, 34 seconds' ),
     1550            array( 'MM:30:00', false ),
     1551            array( '30:MM', false ),
     1552            array( 'MM:00', false ),
     1553            array( 'MM:MM', false ),
     1554            array( '01:01', '1 minute, 1 second' ),
     1555            array( '01:01:01', '1 hour, 1 minute, 1 second' ),
     1556            array( '0:05', '5 seconds' ),
     1557            array( '1:02:00', '1 hour, 2 minutes, 0 seconds' ),
     1558        );
     1559    }
    15211560}
Note: See TracChangeset for help on using the changeset viewer.