Skip to content

E
edx-platform
Commit 0bcb378a by clrux
Options

Merge pull request #12419 from edx/clrux/ac-454 

AC-454 adding visual clarity for selected menu options in the video player
parents 9d3bd8e9 41756165
Showing with 56 additions and 18 deletions
common/lib/xmodule/xmodule/css/video/display.scss
...@@ -535,6 +535,8 @@ ...@@ -535,6 +535,8 @@
.speed-option, .speed-option,
.control-lang { .control-lang {
@include border-left($baseline/10 solid rgb(14, 166, 236));
font-weight: $font-bold;
color: rgb(14, 166, 236); // UXPL primary accent color: rgb(14, 166, 236); // UXPL primary accent
} }
} }
......
common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js
...@@ -266,6 +266,7 @@ ...@@ -266,6 +266,7 @@
expect($('.closed-captions')).toHaveAttrs({ expect($('.closed-captions')).toHaveAttrs({
'lang': 'de' 'lang': 'de'
}); });
expect(link).toHaveAttr('aria-pressed', 'true');
}); });
it('when clicking on link with current language', function () { it('when clicking on link with current language', function () {
...@@ -284,6 +285,7 @@ ...@@ -284,6 +285,7 @@
expect(state.storage.setItem) expect(state.storage.setItem)
.not.toHaveBeenCalledWith('language', 'en'); .not.toHaveBeenCalledWith('language', 'en');
expect($('.langs-list li.is-active').length).toBe(1); expect($('.langs-list li.is-active').length).toBe(1);
expect(link).toHaveAttr('aria-pressed', 'true');
}); });
it('open the language toggle on hover', function () { it('open the language toggle on hover', function () {
......
common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js
...@@ -203,16 +203,18 @@ ...@@ -203,16 +203,18 @@
describe('onSpeedChange', function () { describe('onSpeedChange', function () {
beforeEach(function () { beforeEach(function () {
state = jasmine.initializePlayer(); state = jasmine.initializePlayer();
$('li[data-speed="1.0"]').addClass('is-active'); $('li[data-speed="1.0"]').addClass('is-active').attr('aria-pressed', 'true');
state.videoSpeedControl.setSpeed(0.75); state.videoSpeedControl.setSpeed(0.75);
}); });
it('set the new speed as active', function () { it('set the new speed as active', function () {
expect($('.video-speeds li[data-speed="1.0"]')) expect($('li[data-speed="1.0"]')).not.toHaveClass('is-active');
.not.toHaveClass('is-active'); expect($('li[data-speed="1.0"] .speed-option').attr('aria-pressed')).not.toEqual('true');
expect($('.video-speeds li[data-speed="0.75"]'))
.toHaveClass('is-active'); expect($('li[data-speed="0.75"]')).toHaveClass('is-active');
expect($('.speeds .value')).toHaveHtml('0.75x'); expect($('li[data-speed="0.75"] .speed-option').attr('aria-pressed')).toEqual('true');
expect($('.speeds .speed-button .value')).toHaveHtml('0.75x');
}); });
}); });
......
common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js
...@@ -95,14 +95,15 @@ function (Iterator) { ...@@ -95,14 +95,15 @@ function (Iterator) {
* Creates any necessary DOM elements, attach them, and set their, * Creates any necessary DOM elements, attach them, and set their,
* initial configuration. * initial configuration.
* @param {array} speeds List of speeds available for the player. * @param {array} speeds List of speeds available for the player.
* @param {string} currentSpeed The current speed set to the player.
*/ */
render: function (speeds) { render: function (speeds, currentSpeed) {
var speedsContainer = this.speedsContainer, var speedsContainer = this.speedsContainer,
reversedSpeeds = speeds.concat().reverse(), reversedSpeeds = speeds.concat().reverse(),
speedsList = $.map(reversedSpeeds, function (speed) { speedsList = $.map(reversedSpeeds, function (speed) {
return [ return [
'<li data-speed="', speed, '">', '<li data-speed="', speed, '">',
'<button class="control speed-option" tabindex="-1">', '<button class="control speed-option" tabindex="-1" aria-pressed="false">',
speed, 'x', speed, 'x',
'</button>', '</button>',
'</li>' '</li>'
...@@ -112,6 +113,7 @@ function (Iterator) { ...@@ -112,6 +113,7 @@ function (Iterator) {
speedsContainer.html(speedsList.join('')); speedsContainer.html(speedsList.join(''));
this.speedLinks = new Iterator(speedsContainer.find('.speed-option')); this.speedLinks = new Iterator(speedsContainer.find('.speed-option'));
this.state.el.find('.secondary-controls').prepend(this.el); this.state.el.find('.secondary-controls').prepend(this.el);
this.setActiveSpeed(currentSpeed);
}, },
/** /**
...@@ -216,17 +218,38 @@ function (Iterator) { ...@@ -216,17 +218,38 @@ function (Iterator) {
if (speed !== this.currentSpeed || forceUpdate) { if (speed !== this.currentSpeed || forceUpdate) {
this.speedsContainer this.speedsContainer
.find('li') .find('li')
.removeClass('is-active') .siblings("li[data-speed='" + speed + "']");
.siblings("li[data-speed='" + speed + "']")
.addClass('is-active');
this.speedButton.find('.value').html(speed + 'x'); this.speedButton.find('.value').text(speed + 'x');
this.currentSpeed = speed; this.currentSpeed = speed;
if (!silent) { if (!silent) {
this.el.trigger('speedchange', [speed, this.state.speed]); this.el.trigger('speedchange', [speed, this.state.speed]);
} }
} }
this.resetActiveSpeed();
this.setActiveSpeed(speed);
},
resetActiveSpeed: function() {
var speedOptions = this.speedsContainer.find('li');
$(speedOptions).each(function(index, el) {
$(el).removeClass('is-active')
.find('.speed-option')
.attr('aria-pressed', 'false');
});
},
setActiveSpeed: function(speed) {
var speedOption = this.speedsContainer.find('li[data-speed="' + speed + '"]');
speedOption.addClass('is-active')
.find('.speed-option')
.attr('aria-pressed', 'true');
this.speedButton.attr('title', gettext('Video speed: ') + speed + 'x');
}, },
/** /**
...@@ -244,10 +267,13 @@ function (Iterator) { ...@@ -244,10 +267,13 @@ function (Iterator) {
* @param {jquery Event} event * @param {jquery Event} event
*/ */
clickLinkHandler: function (event) { clickLinkHandler: function (event) {
var speed = $(event.currentTarget).parent().data('speed'); var el = $(event.currentTarget).parent(),
speed = $(el).data('speed');
this.closeMenu();
this.resetActiveSpeed();
this.setActiveSpeed(speed);
this.state.videoCommands.execute('speed', speed); this.state.videoCommands.execute('speed', speed);
this.closeMenu(true);
return false; return false;
}, },
......
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
...@@ -662,10 +662,11 @@ ...@@ -662,10 +662,11 @@
$.each(languages, function(code, label) { $.each(languages, function(code, label) {
var li = $('<li data-lang-code="' + code + '" />'), var li = $('<li data-lang-code="' + code + '" />'),
link = $('<button class="control control-lang">' + label + '</button>'); link = $('<button class="control control-lang" aria-pressed="false">' + label + '</button>');
if (currentLang === code) { if (currentLang === code) {
li.addClass('is-active'); li.addClass('is-active');
link.attr('aria-pressed', 'true');
} }
li.append(link); li.append(link);
...@@ -683,7 +684,11 @@ ...@@ -683,7 +684,11 @@
state.lang = langCode; state.lang = langCode;
el .addClass('is-active') el .addClass('is-active')
.siblings('li') .siblings('li')
.removeClass('is-active'); .removeClass('is-active')
.find('.control-lang')
.attr('aria-pressed', 'false');
$(e.currentTarget).attr('aria-pressed', 'true');
state.el.trigger('language_menu:change', [langCode]); state.el.trigger('language_menu:change', [langCode]);
self.fetchCaption(); self.fetchCaption();
...@@ -693,6 +698,7 @@ ...@@ -693,6 +698,7 @@
// update the transcript lang attribute // update the transcript lang attribute
self.subtitlesMenuEl.attr('lang', langCode); self.subtitlesMenuEl.attr('lang', langCode);
self.closeLanguageMenu(e);
} }
}); });
}, },
...@@ -715,7 +721,7 @@ ...@@ -715,7 +721,7 @@
'data-index': index, 'data-index': index,
'data-start': start[index], 'data-start': start[index],
'tabindex': 0 'tabindex': 0
}).html(text); }).text(text);
return liEl[0]; return liEl[0];
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment