Tidy up the code.

cms/djangoapps/contentstore/features/video.feature

@@ -46,19 +46,19 @@ Feature: CMS.Video Component
     Given I have created a Video component with subtitles
     And Make sure captions are closed
     Then Captions become invisible after 3 seconds
-    And Hover over CC button
-    Then Captions become visible after 0 seconds
-    And Hover over volume button
+    And I hover over button "CC"
+    Then Captions become visible
+    And I hover over button "volume"
     Then Captions become invisible after 3 seconds
 
   # 8
   Scenario: Open captions never become invisible
     Given I have created a Video component with subtitles
     And Make sure captions are open
-    Then Captions are visible after 0 seconds
-    And Hover over CC button
+    Then Captions are visible
+    And I hover over button "CC"
     Then Captions are visible after 3 seconds
-    And Hover over volume button
+    And I hover over button "volume"
     Then Captions are visible after 3 seconds
 
   # 9
@@ -66,5 +66,5 @@ Feature: CMS.Video Component
     Given I have created a Video component with subtitles
     And Make sure captions are closed
     Then Captions become invisible after 3 seconds
-    And Hover over volume button
-    Then Captions are invisible after 0 seconds
+    And I hover over button "volume"
+    Then Captions are invisible

cms/djangoapps/contentstore/features/video.py

@@ -5,6 +5,11 @@ from terrain.steps import reload_the_page
 from xmodule.modulestore import Location
 from contentstore.utils import get_modulestore
 
+BUTTONS = {
+    'CC': '.hide-subtitles',
+    'volume': '.volume',
+}
+
 
 @step('I have created a Video component$')
 def i_created_a_video_component(step):
@@ -17,8 +22,13 @@ def i_created_a_video_component(step):
 
 
 @step('I have created a Video component with subtitles$')
-def i_created_a_video_component_subtitles(step):
-    step.given('I have created a Video component')
+def i_created_a_video_with_subs(_step):
+    _step.given('I have created a Video component with subtitles "OEoXaMPEzfM"')
+
+
+@step('I have created a Video component with subtitles "([^"]*)"$')
+def i_created_a_video_with_subs_with_name(_step, sub_id):
+    _step.given('I have created a Video component')
 
     # Store the current URL so we can return here
     video_url = world.browser.url
@@ -119,15 +129,17 @@ def set_captions_visibility_state(_step, captions_state):
             world.browser.find_by_css('.hide-subtitles').click()
 
 
-@step('Hover over (.+) button$')
+@step('I hover over button "([^"]*)"$')
 def hover_over_button(_step, button):
-    if button.strip() == 'CC':
-        world.browser.find_by_css('.hide-subtitles').mouse_over()
-    else:
-        world.browser.find_by_css('.volume').mouse_over()
+    world.browser.find_by_css(BUTTONS[button.strip()]).mouse_over()
 
 
-@step('Captions become (.+) after (.+) seconds$')
+@step('Captions (?:are|become) (.+)$')
+def are_captions_visibile(_step, visibility_state):
+    _step.given('Captions are {0} after 0 seconds'.format(visibility_state))
+
+
+@step('Captions (?:are|become) (.+) after (.+) seconds$')
 def check_captions_visibility_state(_step, visibility_state, timeout):
     timeout = int(timeout.strip())
 
@@ -140,8 +152,3 @@ def check_captions_visibility_state(_step, visibility_state, timeout):
     else:
         assert not world.css_visible('.subtitles')
 
-
-@step('Captions are (.+) after (.+) seconds$')
-def check_captions_visibility_state2(_step, visibility_state, timeout):
-    check_captions_visibility_state(_step, visibility_state, timeout)
-

common/lib/xmodule/xmodule/js/src/video/01_initialize.js

@@ -264,7 +264,9 @@ function (VideoPlayer) {
     // The function set initial configuration and preparation.
 
     function initialize(element) {
-        var _this = this, tempYtTestTimeout;
+        var _this = this,
+            regExp = /^true$/i,
+            data, tempYtTestTimeout;
         // This is used in places where we instead would have to check if an
         // element has a CSS class 'fullscreen'.
         this.isFullScreen = false;
@@ -274,6 +276,9 @@ function (VideoPlayer) {
         this.elVideoWrapper = this.el.find('.video-wrapper');
         this.id = this.el.attr('id').replace(/video_/, '');
 
+        // jQuery .data() return object with keys in lower camelCase format.
+        data = this.el.data();
+
         console.log(
             '[Video info]: Initializing video with id "' + this.id + '".'
         );
@@ -284,37 +289,26 @@ function (VideoPlayer) {
         this.config = {
             element: element,
 
-            start:              this.el.data('start'),
-            end:                this.el.data('end'),
-
-            caption_data_dir:   this.el.data('caption-data-dir'),
-            caption_asset_path: this.el.data('caption-asset-path'),
-            show_captions:      (
-                                    this.el.data('show-captions')
-                                        .toString().toLowerCase() === 'true'
-                                ),
-            youtubeStreams:     this.el.data('streams'),
-
-            autohideHtml5:      (
-                                    this.el.data('autohide-html5')
-                                        .toString().toLowerCase() === 'true'
-                                ),
-
-            sub:                this.el.data('sub'),
-            mp4Source:          this.el.data('mp4-source'),
-            webmSource:         this.el.data('webm-source'),
-            oggSource:          this.el.data('ogg-source'),
-
-            ytTestUrl:   this.el.data('yt-test-url'),
-
+            start:              data['start'],
+            end:                data['end'],
+            caption_data_dir:   data['captionDataDir'],
+            caption_asset_path: data['captionAssetPath'],
+            show_captions:      regExp.test(data['showCaptions'].toString()),
+            youtubeStreams:     data['streams'],
+            autohideHtml5:      regExp.test(data['autohideHtml5'].toString()),
+            sub:                data['sub'],
+            mp4Source:          data['mp4Source'],
+            webmSource:         data['webmSource'],
+            oggSource:          data['oggSource'],
+            ytTestUrl:          data['ytTestUrl'],
             fadeOutTimeout:     1400,
-
+            captionsFreezeTime: 10000,
             availableQualities: ['hd720', 'hd1080', 'highres']
         };
 
         // Check if the YT test timeout has been set. If not, or it is in
         // improper format, then set to default value.
-        tempYtTestTimeout = parseInt(this.el.data('yt-test-timeout'), 10);
+        tempYtTestTimeout = parseInt(data['ytTestTimeout'], 10);
         if (!isFinite(tempYtTestTimeout)) {
             tempYtTestTimeout = 1500;
         }

common/lib/xmodule/xmodule/js/src/video/09_video_caption.js

@@ -294,12 +294,13 @@ function () {
 
         _this = this;
 
-        this.videoCaption.subtitlesEl.fadeOut(
-            this.videoCaption.fadeOutTimeout,
-            function () {
-
-            _this.captionState = 'invisible';
-        });
+        this.videoCaption.subtitlesEl
+            .fadeOut(
+                this.videoCaption.fadeOutTimeout,
+                function () {
+                    _this.captionState = 'invisible';
+                }
+            );
     }
 
     function resize() {
@@ -321,7 +322,7 @@ function () {
 
         this.videoCaption.frozen = setTimeout(
             this.videoCaption.onMouseLeave,
-            10000
+            this.config.captionsFreezeTime
         );
     }
 
@@ -391,17 +392,18 @@ function () {
             container.append(liEl);
         });
 
-        this.videoCaption.subtitlesEl.html(container.html());
-
-        this.videoCaption.subtitlesEl.find('li[data-index]').on({
-            mouseover:  this.videoCaption.captionMouseOverOut,
-            mouseout:   this.videoCaption.captionMouseOverOut,
-            mousedown:  this.videoCaption.captionMouseDown,
-            click:      this.videoCaption.captionClick,
-            focus:      this.videoCaption.captionFocus,
-            blur:       this.videoCaption.captionBlur,
-            keydown:    this.videoCaption.captionKeyDown
-        });
+        this.videoCaption.subtitlesEl
+            .html(container.html())
+            .find('li[data-index]')
+            .on({
+                mouseover:  this.videoCaption.captionMouseOverOut,
+                mouseout:   this.videoCaption.captionMouseOverOut,
+                mousedown:  this.videoCaption.captionMouseDown,
+                click:      this.videoCaption.captionClick,
+                focus:      this.videoCaption.captionFocus,
+                blur:       this.videoCaption.captionBlur,
+                keydown:    this.videoCaption.captionKeyDown
+            });
 
         // Enables or disables automatic scrolling of the captions when the
         // video is playing. This feature has to be disabled when tabbing
@@ -422,14 +424,15 @@ function () {
         // outline has to be drawn (tabbing) or not (mouse click).
         this.videoCaption.isMouseFocus = false;
 
-        this.videoCaption.subtitlesEl.prepend(
-            $('<li class="spacing">')
-                .height(this.videoCaption.topSpacingHeight())
-        );
-        this.videoCaption.subtitlesEl.append(
-            $('<li class="spacing">')
-            .height(this.videoCaption.bottomSpacingHeight())
-        );
+        this.videoCaption.subtitlesEl
+            .prepend(
+                $('<li class="spacing">')
+                    .height(this.videoCaption.topSpacingHeight())
+            )
+            .append(
+                $('<li class="spacing">')
+                    .height(this.videoCaption.bottomSpacingHeight())
+            );
 
         this.videoCaption.rendered = true;
     }
@@ -684,26 +687,27 @@ function () {
         }
     }
 
-    function hideCaptions(hide_captions) {
-        var type;
+    function hideCaptions(hide_captions, update_cookie) {
+        var hideSubtitlesEl = this.videoCaption.hideSubtitlesEl,
+            type;
 
         if (hide_captions) {
             type = 'hide_transcript';
             this.captionsHidden = true;
-            this.videoCaption.hideSubtitlesEl.attr(
-                'title', gettext('Turn on captions')
-            );
-            this.videoCaption.hideSubtitlesEl
+
+            hideSubtitlesEl
+                .attr('title', gettext('Turn on captions'))
                 .text(gettext('Turn on captions'));
+
             this.el.addClass('closed');
         } else {
             type = 'show_transcript';
             this.captionsHidden = false;
-            this.videoCaption.hideSubtitlesEl.attr(
-                'title', gettext('Turn off captions')
-            );
-            this.videoCaption.hideSubtitlesEl
+
+            hideSubtitlesEl
+                .attr('title', gettext('Turn off captions'))
                 .text(gettext('Turn off captions'));
+
             this.el.removeClass('closed');
             this.videoCaption.scrollCaption();
         }