Merge pull request #1344 from edx/valera/add_back_cc_button_mouseover

Added back on hover CC button functionality.

CHANGELOG.rst

@@ -5,6 +5,11 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Blades: Hovering over CC button in video player, when transcripts are hidden,
+will cause them to show up. Moving the mouse from the CC button will auto hide
+them. You can hover over the CC button and then move the mouse to the
+transcripts which will allow you to select some video position in 1 click.
+
 Blades: Add possibility to use multiple LTI tools per page.
 
 Blades: LTI module can now load external content in a new window.

cms/djangoapps/contentstore/features/component_settings_editor_helpers.py

@@ -35,7 +35,7 @@ def click_new_component_button(step, component_button_css):
     step.given('I have clicked the new unit button')
     world.wait_for_requirejs(
         ["jquery", "js/models/course", "coffee/src/models/module",
-         "coffee/src/views/unit", "jquery.ui"]
+         "coffee/src/views/unit", "jquery.ui", "domReady!"]
     )
     world.css_click(component_button_css)
 

common/lib/xmodule/xmodule/css/video/display.scss

@@ -638,8 +638,6 @@ div.video {
     ol.subtitles {
         width: 0;
         height: 0;
-
-        visibility: hidden;
     }
 
     ol.subtitles.html5 {
@@ -673,8 +671,6 @@ div.video {
       ol.subtitles {
         right: -(flex-grid(4));
         width: auto;
-
-        visibility: hidden;
       }
     }
 

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

@@ -182,7 +182,6 @@ function () {
 
             this.videoCaption.hideSubtitlesEl.on({
                 mousemove: this.videoCaption.autoShowCaptions,
-                focus: this.videoCaption.autoShowCaptions,
 
                 mouseout: this.videoCaption.autoHideCaptions,
                 blur: this.videoCaption.autoHideCaptions
@@ -677,6 +676,7 @@ function () {
         event.preventDefault();
 
         if (this.el.hasClass('closed')) {
+            this.videoCaption.autoShowCaptions();
             this.videoCaption.hideCaptions(false);
         } else {
             this.videoCaption.hideCaptions(true);

common/lib/xmodule/xmodule/js/src/video/10_main.js

@@ -1,5 +1,42 @@
 (function (requirejs, require, define) {
 
+// In the case when the Video constructor will be called before
+// RequireJS finishes loading all of the Video dependencies, we will have
+// a mock function that will collect all the elements that must be
+// initialized as Video elements.
+//
+// Once RequireJS will load all of the necessary dependencies, main code
+// will invoke the mock function with the second parameter set to truthy value.
+// This will trigger the actual Video constructor on all elements that
+// are stored in a temporary list.
+window.Video = (function () {
+    // Temporary storage place for elements that must be initialized as Video
+    // elements.
+    var tempCallStack = [];
+
+    return function (element, processTempCallStack) {
+        // If mock function was called with second parameter set to truthy
+        // value, we invoke the real `window.Video` on all the stored elements
+        // so far.
+        if (processTempCallStack) {
+            $.each(tempCallStack, function (index, element) {
+                // By now, `window.Video` is the real constructor.
+                window.Video(element);
+            });
+
+            return;
+        }
+
+        // If normal call to `window.Video` constructor, store the element
+        // for later initializing.
+        tempCallStack.push(element);
+
+        // Real Video constructor returns the `state` object. The mock
+        // function will return an empty object.
+        return {};
+    };
+}());
+
 // Main module.
 require(
 [
@@ -23,7 +60,8 @@ function (
     VideoCaption
 ) {
     var previousState,
-        youtubeXhr = null;
+        youtubeXhr = null,
+        oldVideo = window.Video;
 
     // Because this constructor can be called multiple times on a single page (when
     // the user switches verticals, the page doesn't reload, but the content changes), we must
@@ -79,6 +117,10 @@ function (
     window.Video.clearYoutubeXhr = function () {
         youtubeXhr = null;
     };
+
+    // Invoke the mock Video constructor so that the elements stored within
+    // it can be processed by the real `window.Video` constructor.
+    oldVideo(null, true);
 });
 
 }(RequireJS.requirejs, RequireJS.require, RequireJS.define));