diff --git a/src/components/settings/settings.tsx b/src/components/settings/settings.tsx index f8ec4dcc5..695f54396 100644 --- a/src/components/settings/settings.tsx +++ b/src/components/settings/settings.tsx @@ -49,6 +49,13 @@ const mapStateToProps = state => ({ }); const COMPONENT_NAME = 'Settings'; +const translates = () => ({ + buttonLabel: Settings, + qualityHdLabel: Quality is HD, + quality4kLabel: Quality is 4k, + quality8kLabel: Quality is 8k +}); + /** * Settings component * @@ -57,9 +64,7 @@ const COMPONENT_NAME = 'Settings'; * @extends {Component} */ @connect(mapStateToProps, bindActions({...actions, ...overlayIconActions})) -@withText({ - buttonLabel: 'controls.settings' -}) +@withText(translates) @withPlayer @withEventManager @withKeyboardEvent(COMPONENT_NAME) @@ -277,6 +282,19 @@ class Settings extends Component { return activeVideoTrackHeight ? getLabelBadgeType(activeVideoTrackHeight) : null; } + getQualityLabel(buttonBadgeType): string { + switch (buttonBadgeType) { + case 'qualityHd': + return this.props.qualityHdLabel; + case 'quality4k': + return this.props.quality4kLabel; + case 'quality8k': + return this.props.quality8kLabel; + default: + return ''; + } + } + /** * render component * @@ -297,13 +315,14 @@ class Settings extends Component { const targetId: HTMLDivElement | Document = (document.getElementById(this.props.player.config.targetId) as HTMLDivElement) || document; const portalSelector = `.overlay-portal`; + const buttonAriaLabel = props.buttonLabel + ' ' + this.getQualityLabel(buttonBadgeType); return ( (c ? (this._controlSettingsElement = c) : undefined)}>