Skip to content

E
edx-platform
Commit 8c26fc68 by polesye
Options

Refactor video volume control.

parent d01af063
Showing with 72 additions and 47 deletions
common/lib/xmodule/xmodule/css/video/display.scss
......@@ -458,14 +458,14 @@ div.video {
float: left;
position: relative;
&.open {
&.is-opened {
.volume-slider-container {
display: block;
opacity: 1;
}
}
&.muted {
&.is-muted {
& > a {
background-image: url('../images/mute.png');
}
......
common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
......@@ -141,8 +141,7 @@ function (VideoPlayer) {
state.videoEl = $('video, iframe');
expect(state.videoVolumeControl).toBeUndefined();
expect(state.el.find('div.volume')).not.toExist();
expect(state.el.find('.volume')).not.toExist();
});
});
});
......@@ -450,42 +449,34 @@ function (VideoPlayer) {
}, 'currentTime got updated', 10000);
});
});
});
describe('when the video is not playing', function () {
beforeEach(function () {
state = jasmine.initializePlayer();
spyOn(state.videoPlayer, 'updatePlayTime').andCallThrough();
spyOn(state, 'setSpeed').andCallThrough();
spyOn(state.videoPlayer, 'log').andCallThrough();
spyOn(state.videoPlayer.player, 'setPlaybackRate').andCallThrough();
spyOn(state.videoPlayer, 'setPlaybackRate').andCallThrough();
});
describe('when the video is not playing', function () {
beforeEach(function () {
state = jasmine.initializePlayer();
it('video has a correct speed', function () {
state.speed = '2.0';
state.videoPlayer.onPlay();
expect(state.videoPlayer.setPlaybackRate)
.toHaveBeenCalledWith('2.0');
state.videoPlayer.onPlay();
expect(state.videoPlayer.setPlaybackRate.calls.length)
.toEqual(1);
});
spyOn(state.videoPlayer, 'updatePlayTime').andCallThrough();
spyOn(state, 'setSpeed').andCallThrough();
spyOn(state.videoPlayer, 'log').andCallThrough();
spyOn(state.videoPlayer.player, 'setPlaybackRate').andCallThrough();
spyOn(state.videoPlayer, 'setPlaybackRate').andCallThrough();
});
it('video has a correct volume', function () {
spyOn(state.videoPlayer.player, 'setVolume');
state.currentVolume = '0.26';
state.videoPlayer.onPlay();
expect(state.videoPlayer.player.setVolume)
.toHaveBeenCalledWith('0.26');
it('video has a correct speed', function () {
state.speed = '2.0';
state.videoPlayer.onPlay();
expect(state.videoPlayer.setPlaybackRate)
.toHaveBeenCalledWith('2.0');
state.videoPlayer.onPlay();
expect(state.videoPlayer.setPlaybackRate.calls.length)
.toEqual(1);
});
});
});
describe('onVolumeChange', function () {
beforeEach(function () {
state = jasmine.initializePlayer();
state.videoPlayer.onReady();
state.videoEl = $('video, iframe');
});
......@@ -502,10 +493,10 @@ function (VideoPlayer) {
it('video has a correct volume', function () {
spyOn(state.videoPlayer.player, 'setVolume');
state.currentVolume = '0.26';
state.videoPlayer.onPlay();
state.videoVolumeControl.volume = 26;
state.el.trigger('play');
expect(state.videoPlayer.player.setVolume)
.toHaveBeenCalledWith('0.26');
.toHaveBeenCalledWith(26);
});
});
});
......
common/lib/xmodule/xmodule/js/src/video/00_i18n.js 0 → 100644
(function (define) {
'use strict';
define(
'video/00_i18n.js',
[],
function() {
/**
* i18n module.
* @exports video/00_i18n.js
* @return {object}
*/
return {
'Volume': gettext('Volume'),
// Translators: Volume level equals 0%.
'Muted': gettext('Muted'),
// Translators: Volume level in range ]0,20]%
'Very low': gettext('Very low'),
// Translators: Volume level in range ]20,40]%
'Low': gettext('Low'),
// Translators: Volume level in range ]40,60]%
'Average': gettext('Average'),
// Translators: Volume level in range ]60,80]%
'Loud': gettext('Loud'),
// Translators: Volume level in range ]80,99]%
'Very loud': gettext('Very loud'),
// Translators: Volume level equals 100%.
'Maximum': gettext('Maximum')
};
});
}(RequireJS.define));
common/lib/xmodule/xmodule/js/src/video/01_initialize.js
......@@ -14,8 +14,8 @@
define(
'video/01_initialize.js',
['video/03_video_player.js', 'video/00_video_storage.js'],
function (VideoPlayer, VideoStorage) {
['video/03_video_player.js', 'video/00_video_storage.js', 'video/00_i18n.js'],
function (VideoPlayer, VideoStorage, i18n) {
/**
* @function
*
......@@ -39,7 +39,7 @@ function (VideoPlayer, VideoStorage) {
return false;
}
_initializeModules(state)
_initializeModules(state, i18n)
.done(function () {
// On iPad ready state occurs just after start playing.
// We hide controls before video starts playing.
......@@ -341,11 +341,11 @@ function (VideoPlayer, VideoStorage) {
state.captionHideTimeout = null;
}
function _initializeModules(state) {
function _initializeModules(state, i18n) {
var dfd = $.Deferred(),
modulesList = $.map(state.modules, function(module) {
if ($.isFunction(module)) {
return module(state);
return module(state, i18n);
} else if ($.isPlainObject(module)) {
return module;
}
......@@ -494,7 +494,6 @@ function (VideoPlayer, VideoStorage) {
__dfd__: __dfd__,
el: el,
container: container,
currentVolume: 100,
id: id,
isFullScreen: false,
isTouch: isTouch,
......
common/lib/xmodule/xmodule/js/src/video/03_video_player.js
......@@ -98,7 +98,6 @@ function (HTML5Video, Resizer) {
if (!state.isFlashMode() && state.speed != '1.0') {
state.videoPlayer.setPlaybackRate(state.speed);
}
state.videoPlayer.player.setVolume(state.currentVolume);
});
if (state.isYoutubeType()) {
......@@ -584,6 +583,10 @@ function (HTML5Video, Resizer) {
_this.videoPlayer.onSpeedChange(speed);
});
this.el.on('volumechange volumechange:silent', function (event, volume) {
_this.videoPlayer.onVolumeChange(volume);
});
this.videoPlayer.log('load_video');
availablePlaybackRates = this.videoPlayer.player
......@@ -919,7 +922,6 @@ function (HTML5Video, Resizer) {
function onVolumeChange(volume) {
this.videoPlayer.player.setVolume(volume);
this.el.trigger('volumechange', arguments);
}
});
......
common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js
......@@ -64,9 +64,9 @@ function () {
state.videoQualityControl.el.on('click',
state.videoQualityControl.toggleQuality
);
state.el.on('play',
_.once(state.videoQualityControl.fetchAvailableQualities)
);
state.el.on('play', _.once(function () {
state.videoQualityControl.fetchAvailableQualities();
}));
}
// ***************************************************************
......
common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js
......@@ -9,6 +9,7 @@ function (Iterator) {
* @exports video/08_video_speed_control.js
* @constructor
* @param {object} state The object containing the state of the video player.
* @return {jquery Promise}
*/
var SpeedControl = function (state) {
if (!(this instanceof SpeedControl)) {
......
common/lib/xmodule/xmodule/video_module/video_module.py
......@@ -71,6 +71,7 @@ class VideoModule(VideoFields, VideoStudentViewHandlers, XModule):
resource_string(module, 'js/src/video/00_video_storage.js'),
resource_string(module, 'js/src/video/00_resizer.js'),
resource_string(module, 'js/src/video/00_async_process.js'),
resource_string(module, 'js/src/video/00_i18n.js'),
resource_string(module, 'js/src/video/00_sjson.js'),
resource_string(module, 'js/src/video/00_iterator.js'),
resource_string(module, 'js/src/video/01_initialize.js'),
......
lms/templates/video.html
......@@ -79,8 +79,8 @@
<ol class="video-speeds menu" role="menu"></ol>
</div>
<div class="volume">
<a href="#" title="${_('Volume')}" role="button" aria-disabled="false"></a>
<div class="volume-slider-container">
<a href="#" role="button" aria-disabled="false" title="${_('Volume')}" aria-label="${_('Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.')}"></a>
<div role="presentation" class="volume-slider-container">
<div class="volume-slider"></div>
</div>
</div>
......
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