Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 118x 1x 1x 2x 114x 1x 118x 118x 118x | import { createInterpolateElement } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { getScoreTier } from './score-utils';
import type { SpeedScoreProgress } from './use-speed-scores';
import type { ReactElement, ReactNode } from 'react';
function getStepText( stage: SpeedScoreProgress[ 'stage' ], percent: number | undefined ): string {
switch ( stage ) {
case 'queued':
return percent === undefined
? __( 'Waiting to start…', 'jetpack-boost' )
: sprintf(
/* translators: %d: how much of the speed test is done, as a percentage. */
__( 'Waiting to start… <pct>%d%%</pct>', 'jetpack-boost' ),
percent
);
case 'mobile':
return percent === undefined
? __( 'Testing mobile…', 'jetpack-boost' )
: sprintf(
/* translators: %d: how much of the speed test is done, as a percentage. */
__( 'Testing mobile… <pct>%d%%</pct>', 'jetpack-boost' ),
percent
);
case 'desktop':
return percent === undefined
? __( 'Testing desktop…', 'jetpack-boost' )
: sprintf(
/* translators: %d: how much of the speed test is done, as a percentage. */
__( 'Testing desktop… <pct>%d%%</pct>', 'jetpack-boost' ),
percent
);
default:
return percent === undefined
? __( 'Checking site speed…', 'jetpack-boost' )
: sprintf(
/* translators: %d: how much of the speed test is done, as a percentage. */
__( 'Checking site speed… <pct>%d%%</pct>', 'jetpack-boost' ),
percent
);
}
}
function FinishedScore( { score, children }: { score: number; children: string } ) {
return (
<span
className={ `jetpack-boost-overview__early-score jetpack-boost-overview__tier--${ getScoreTier(
score
) }` }
>
{ children }
</span>
);
}
/**
* The running speed test's step, its estimated percent, and any device score already measured.
*
* @param progress - The latest progress the server reported, if any.
* @param percent - Estimated percent done, or undefined when there is nothing to estimate from.
* @param percentTag - Element that wraps the percent, so a live region can hide it from screen readers.
* @return The message to show while the test runs.
*/
export function getProgressMessage(
progress: SpeedScoreProgress | undefined,
percent: number | undefined,
percentTag: ReactElement
): ReactNode {
const step = createInterpolateElement( getStepText( progress?.stage, percent ), {
pct: percentTag,
} );
const { mobile, desktop } = progress?.scores ?? {};
return (
<>
{ step }
{ mobile !== undefined && (
<FinishedScore score={ mobile }>
{ sprintf(
/* translators: %d: the mobile speed score, out of 100. */
__( 'Mobile: %d', 'jetpack-boost' ),
mobile
) }
</FinishedScore>
) }
{ desktop !== undefined && (
<FinishedScore score={ desktop }>
{ sprintf(
/* translators: %d: the desktop speed score, out of 100. */
__( 'Desktop: %d', 'jetpack-boost' ),
desktop
) }
</FinishedScore>
) }
</>
);
}
|