Commit 332bfa96 by jmclaus

Added more explanatory states to the Volume, Fullscreen, HD, and CC controls

parent a3db5da9
...@@ -71,12 +71,12 @@ function () { ...@@ -71,12 +71,12 @@ function () {
// 'Fill screen' (the title attribute is set in video.html template). // 'Fill screen' (the title attribute is set in video.html template).
state.videoControl.playPauseEl.attr({ state.videoControl.playPauseEl.attr({
'role': gettext('button'), 'role': gettext('button'),
'aria-disabled': 'false' 'aria-disabled': false
}); });
state.videoControl.fullScreenEl.attr({ state.videoControl.fullScreenEl.attr({
'role': gettext('button'), 'role': gettext('button'),
'aria-disabled': 'false' 'aria-disabled': false
}); });
// This anchor behaves as a slider named 'video slider'. // This anchor behaves as a slider named 'video slider'.
...@@ -189,12 +189,14 @@ function () { ...@@ -189,12 +189,14 @@ function () {
this.videoControl.fullScreenState = false; this.videoControl.fullScreenState = false;
fullScreenClassNameEl.removeClass('video-fullscreen'); fullScreenClassNameEl.removeClass('video-fullscreen');
this.isFullScreen = false; this.isFullScreen = false;
this.videoControl.fullScreenEl.attr('title', gettext('Fullscreen')); this.videoControl.fullScreenEl.attr('title', gettext('Fill browser'));
this.videoControl.fullScreenEl.text(gettext('Fill browser'));
} else { } else {
this.videoControl.fullScreenState = true; this.videoControl.fullScreenState = true;
fullScreenClassNameEl.addClass('video-fullscreen'); fullScreenClassNameEl.addClass('video-fullscreen');
this.isFullScreen = true; this.isFullScreen = true;
this.videoControl.fullScreenEl.attr('title', gettext('Exit fullscreen')); this.videoControl.fullScreenEl.attr('title', gettext('Exit fullscreen'));
this.videoControl.fullScreenEl.text(gettext('Exit fullscreen'));
} }
this.trigger('videoCaption.resize', null); this.trigger('videoCaption.resize', null);
......
...@@ -51,7 +51,7 @@ function () { ...@@ -51,7 +51,7 @@ function () {
// (the title attribute is set in video.html template). // (the title attribute is set in video.html template).
state.videoQualityControl.el.attr({ state.videoQualityControl.el.attr({
'role': gettext('button'), 'role': gettext('button'),
'aria-disabled': 'false' 'aria-disabled': false
}); });
} }
......
...@@ -62,7 +62,7 @@ function () { ...@@ -62,7 +62,7 @@ function () {
state.videoProgressSlider.handle.attr({ state.videoProgressSlider.handle.attr({
'role': gettext('slider'), 'role': gettext('slider'),
'title': 'video position', 'title': 'video position',
'aria-disabled': 'false', 'aria-disabled': false,
'aria-valuetext': getTimeDescription(state.videoProgressSlider.slider.slider('option', 'value')) 'aria-valuetext': getTimeDescription(state.videoProgressSlider.slider.slider('option', 'value'))
}); });
} }
...@@ -120,6 +120,7 @@ function () { ...@@ -120,6 +120,7 @@ function () {
} }
} }
// Returns a string describing the current time of video in hh:mm:ss format.
function getTimeDescription(time) { function getTimeDescription(time) {
var seconds = Math.floor(time), var seconds = Math.floor(time),
minutes = Math.floor(seconds / 60), minutes = Math.floor(seconds / 60),
......
...@@ -68,12 +68,12 @@ function () { ...@@ -68,12 +68,12 @@ function () {
// This anchor behaves as a button named 'Volume'. // This anchor behaves as a button named 'Volume'.
// (the title attribute is set in video.html template). // (the title attribute is set in video.html template).
var buttonStr = state.videoVolumeControl.currentVolume === 0 ? gettext('Volume muted') : gettext('Volume');
state.videoVolumeControl.buttonEl.attr({ state.videoVolumeControl.buttonEl.attr({
'role': gettext('button'), 'role': gettext('button'),
'aria-label': gettext('Volume'), // Doesn't read the title attribute, why? 'aria-label': buttonStr, // Doesn't read the title attribute, why?
'aria-disabled': 'false' 'aria-disabled': false
}); });
//state.videoVolumeControl.buttonEl.attr();
// The anchor representing the slider handle behaves as a slider named // The anchor representing the slider handle behaves as a slider named
// volume. // volume.
...@@ -81,7 +81,7 @@ function () { ...@@ -81,7 +81,7 @@ function () {
state.videoVolumeControl.volumeSliderHandleEl.attr({ state.videoVolumeControl.volumeSliderHandleEl.attr({
'role': gettext('slider'), 'role': gettext('slider'),
'title': 'volume', 'title': 'volume',
'aria-disabled': 'false', 'aria-disabled': false,
'aria-valuemin': state.videoVolumeControl.slider.slider('option', 'min'), 'aria-valuemin': state.videoVolumeControl.slider.slider('option', 'min'),
'aria-valuemax': state.videoVolumeControl.slider.slider('option', 'max'), 'aria-valuemax': state.videoVolumeControl.slider.slider('option', 'max'),
'aria-valuenow': state.videoVolumeControl.slider.slider('option', 'value'), 'aria-valuenow': state.videoVolumeControl.slider.slider('option', 'value'),
...@@ -178,6 +178,10 @@ function () { ...@@ -178,6 +178,10 @@ function () {
'aria-valuenow': ui.value, 'aria-valuenow': ui.value,
'aria-valuetext': getVolumeDescription(ui.value) 'aria-valuetext': getVolumeDescription(ui.value)
}); });
this.videoVolumeControl.buttonEl.attr(
'aria-label', this.videoVolumeControl.currentVolume === 0 ? gettext('Volume muted') : gettext('Volume')
);
} }
function toggleMute(event) { function toggleMute(event) {
...@@ -205,7 +209,7 @@ function () { ...@@ -205,7 +209,7 @@ function () {
// Returns a string describing the level of volume. // Returns a string describing the level of volume.
function getVolumeDescription(vol) { function getVolumeDescription(vol) {
if (vol === 0) { if (vol === 0) {
return 'silent'; return 'muted';
} }
else if (vol <= 20) { else if (vol <= 20) {
return 'very low'; return 'very low';
......
...@@ -87,7 +87,7 @@ function () { ...@@ -87,7 +87,7 @@ function () {
// (the title attribute is set in video.html template). // (the title attribute is set in video.html template).
state.videoSpeedControl.el.children('a').attr({ state.videoSpeedControl.el.children('a').attr({
'role': gettext('button'), 'role': gettext('button'),
'aria-disabled': 'false' 'aria-disabled': false
}); });
} }
......
...@@ -599,11 +599,13 @@ function () { ...@@ -599,11 +599,13 @@ function () {
type = 'hide_transcript'; type = 'hide_transcript';
this.captionsHidden = true; this.captionsHidden = true;
this.videoCaption.hideSubtitlesEl.attr('title', gettext('Turn on captions')); this.videoCaption.hideSubtitlesEl.attr('title', gettext('Turn on captions'));
this.videoCaption.hideSubtitlesEl.text(gettext('Turn on captions'));
this.el.addClass('closed'); this.el.addClass('closed');
} else { } else {
type = 'show_transcript'; type = 'show_transcript';
this.captionsHidden = false; this.captionsHidden = false;
this.videoCaption.hideSubtitlesEl.attr('title', gettext('Turn off captions')); this.videoCaption.hideSubtitlesEl.attr('title', gettext('Turn off captions'));
this.videoCaption.hideSubtitlesEl.text(gettext('Turn off captions'));
this.el.removeClass('closed'); this.el.removeClass('closed');
this.videoCaption.scrollCaption(); this.videoCaption.scrollCaption();
} }
......
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