Merge pull request #3678 from edx/anton/refactor-volume-control

Video: refactor volume control.

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

+(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>