diff --git a/app/assets/javascripts/mediaelement-and-player.js b/app/assets/javascripts/mediaelement-and-player.js index 292768f..2bfc53c 100644 --- a/app/assets/javascripts/mediaelement-and-player.js +++ b/app/assets/javascripts/mediaelement-and-player.js @@ -1896,19 +1896,11 @@ Object.assign(_player2.default.prototype, { t.slider.setAttribute('role', 'slider'); t.slider.tabIndex = 0; - if (media.paused) { - t.slider.setAttribute('aria-label', timeSliderText); - t.slider.setAttribute('aria-valuemin', 0); - t.slider.setAttribute('aria-valuemax', isNaN(duration) ? 0 : duration); - t.slider.setAttribute('aria-valuenow', seconds); - t.slider.setAttribute('aria-valuetext', time); - } else { - t.slider.removeAttribute('aria-label'); - t.slider.removeAttribute('aria-valuemin'); - t.slider.removeAttribute('aria-valuemax'); - t.slider.removeAttribute('aria-valuenow'); - t.slider.removeAttribute('aria-valuetext'); - } + t.slider.setAttribute('aria-label', timeSliderText); + t.slider.setAttribute('aria-valuemin', 0); + t.slider.setAttribute('aria-valuemax', isNaN(duration) ? 0 : duration); + t.slider.setAttribute('aria-valuenow', seconds); + t.slider.setAttribute('aria-valuetext', time); }, restartPlayer = function restartPlayer() { if (new Date() - lastKeyPressTime >= 1000) { @@ -3045,7 +3037,7 @@ Object.assign(_player2.default.prototype, { mute = _document2.default.createElement('div'); mute.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'volume-button ' + t.options.classPrefix + 'mute'; - mute.innerHTML = mode === 'horizontal' ? (0, _generate.generateControlButton)(t.id, muteText, muteText, '' + t.media.options.iconSprite, ['icon-mute', 'icon-unmute'], '' + t.options.classPrefix, '', t.options.classPrefix + 'horizontal-volume-slider') : (0, _generate.generateControlButton)(t.id, muteText, muteText, '' + t.media.options.iconSprite, ['icon-mute', 'icon-unmute'], '' + t.options.classPrefix, '', t.options.classPrefix + 'volume-slider') + ('' + ('' + volumeControlText + '') + ('
') + ('
') + ('
') + '
' + '
'; + mute.innerHTML = mode === 'horizontal' ? (0, _generate.generateControlButton)(t.id, muteText, muteText, '' + t.media.options.iconSprite, ['icon-mute', 'icon-unmute'], '' + t.options.classPrefix, '', t.id + '_volume-slider') : (0, _generate.generateControlButton)(t.id, muteText, muteText, '' + t.media.options.iconSprite, ['icon-mute', 'icon-unmute'], '' + t.options.classPrefix, '', t.id + '_volume-slider') + ('' + ('' + volumeControlText + '') + ('
') + ('
') + ('
') + '
' + '
' + ('') + ''; t.addControlElement(mute, 'volume'); @@ -3123,9 +3115,14 @@ Object.assign(_player2.default.prototype, { mouseIsOver = false, modified = false, updateVolumeSlider = function updateVolumeSlider() { - var volume = Math.floor(media.volume * 100); + const volume = Math.floor(media.volume * 100); volumeSlider.setAttribute('aria-valuenow', volume); volumeSlider.setAttribute('aria-valuetext', volume + '%'); + + const statusRegion = mute.querySelector('.' + t.options.classPrefix + 'volume-status'); + if (statusRegion) { + statusRegion.innerHTML = 'Volume ' + volume + '%'; + } }; var volumeSlider = mode === 'vertical' ? t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'volume-slider') : t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'horizontal-volume-slider'), @@ -3236,6 +3233,7 @@ Object.assign(_player2.default.prototype, { mute.addEventListener('focusin', function () { volumeSlider.style.display = 'block'; mouseIsOver = true; + setTimeout(updateVolumeSlider, 0); }); mute.addEventListener('focusout', function (e) {