src/components/PlaybackControls.js
/**
	 * Render language voice select dropdowns.
	 *
	 * @return {VNode[]|null} Elements or null if no available voices or no present languages.
	 */
Render language voice select dropdowns.
@return {VNode[]|null} Elements or null if no available voices or no present languages.
Render language voice select dropdowns . @return { VNode [] |null } Elements or null if no available voices or no present languages .
renderLanguageVoiceSelects() {
		if ( 0 === this.props.availableVoices.length || 0 === this.props.presentLanguages.length ) {
			return null;
		}
		const updateLanguageVoice = ( event ) => {
			const languageVoices = Object.assign(
				{},
				this.props.languageVoices,
				{
					[ event.target.dataset.language ]: event.target.value,
				}
			);
			this.props.setProps( { languageVoices } );
		};
		const selects = [];
		for ( const presentLanguage of this.props.presentLanguages ) {
			const voicesInLanguage = this.props.availableVoices.filter(
				( voice ) => voice.lang.startsWith( presentLanguage )
			);
			if ( 0 === voicesInLanguage.length ) {
				continue;
			}
			const id = this.idPrefix + 'voice-' + presentLanguage;
			selects.push(
				<p key={ presentLanguage }>
					<label className="spoken-word-playback-controls__label" htmlFor={ id }>
						{ sprintf( __( 'Voice (%s):' ), presentLanguage ) }
					</label>
					{ ' ' }
					{
						<select
							id={ id }
							className="spoken-word-playback-controls__input"
							data-language={ presentLanguage }
							value={ this.props.languageVoices[ presentLanguage ] }
							onBlur={ updateLanguageVoice }
							onChange={ updateLanguageVoice }
						>
							{ voicesInLanguage.map(
								( voice ) =>
									<option key={ voice.voiceURI } value={ voice.voiceURI }>
										{ voice.lang.includes( '-' ) ?
											sprintf( __( '%s (%s)' ), voice.name, voice.lang ) :
											voice.name }
									</option>
							) }
						</select>
					}
				</p>
			);
		}
		return selects;
	}
renderLanguageVoiceSelects ( ) { if ( 0 === this . props . availableVoices . length || 0 === this . props . presentLanguages . length ) { return null ; } const updateLanguageVoice = ( event ) => { const languageVoices = Object . assign ( { } , this . props . languageVoices , { [ event . target . dataset . language ] : event . target . value , } ) ; this . props . setProps ( { languageVoices } ) ; } ; const selects = [ ] ; for ( const presentLanguage of this . props . presentLanguages ) { const voicesInLanguage = this . props . availableVoices . filter ( ( voice ) => voice . lang . startsWith ( presentLanguage ) ) ; if ( 0 === voicesInLanguage . length ) { continue ; } const id = this . idPrefix + 'voice-' + presentLanguage ; selects . push ( < p key = { presentLanguage } > < label className = "spoken-word-playback-controls__label" htmlFor = { id } > { sprintf ( __ ( 'Voice (%s):' ) , presentLanguage ) } < / label > { ' ' } { < select id = { id } className = "spoken-word-playback-controls__input" data-language = { presentLanguage } value = { this . props . languageVoices [ presentLanguage ] } onBlur = { updateLanguageVoice } onChange = { updateLanguageVoice } > { voicesInLanguage . map ( ( voice ) => < option key = { voice . voiceURI } value = { voice . voiceURI } > { voice . lang . includes ( '-' ) ? sprintf ( __ ( '%s (%s)' ) , voice . name , voice . lang ) : voice . name } < / option > ) } < / select > } < / p > ) ; } return selects ; }
Render language voice select dropdowns.
Render language voice select dropdowns .