Merge pull request #1183 from edx/valera/add_option_transcripts_remove_onhover

Valera/add option transcripts remove onhover

cms/djangoapps/contentstore/features/video.feature

@@ -2,15 +2,18 @@
 Feature: CMS.Video Component
   As a course author, I want to be able to view my created videos in Studio.
 
+  # 1
   # Video Alpha Features will work in Firefox only when Firefox is the active window
   Scenario: Autoplay is disabled in Studio
     Given I have created a Video component
     Then when I view the video it does not have autoplay enabled
 
+  # 2
   Scenario: Creating a video takes a single click
     Given I have clicked the new unit button
     Then creating a video takes a single click
 
+  # 3
   # Sauce Labs cannot delete cookies
   @skip_sauce
   Scenario: Captions are hidden correctly
@@ -18,12 +21,14 @@ Feature: CMS.Video Component
     And I have hidden captions
     Then when I view the video it does not show the captions
 
+  # 4
   # Sauce Labs cannot delete cookies
   @skip_sauce
   Scenario: Captions are shown correctly
     Given I have created a Video component with subtitles
     Then when I view the video it does show the captions
 
+  # 5
   # Sauce Labs cannot delete cookies
   @skip_sauce
   Scenario: Captions are toggled correctly
@@ -31,7 +36,36 @@ Feature: CMS.Video Component
     And I have toggled captions
     Then when I view the video it does show the captions
 
+  # 6
   Scenario: Video data is shown correctly
     Given I have created a video with only XML data
     And I reload the page
     Then the correct Youtube video is shown
+
+  # 7
+  Scenario: Closed captions become visible when the mouse hovers over CC button
+    Given I have created a Video component with subtitles
+    And Make sure captions are closed
+    Then Captions become "invisible" after 3 seconds
+    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"
+    And I hover over button "CC"
+    Then Captions are "visible"
+    And I hover over button "volume"
+    Then Captions are "visible"
+
+  # 9
+  Scenario: Closed captions are invisible when mouse doesn't hover on CC button
+    Given I have created a Video component with subtitles
+    And Make sure captions are closed
+    Then Captions become "invisible" after 3 seconds
+    And I hover over button "volume"
+    Then Captions are "invisible"

cms/djangoapps/contentstore/features/video.py

@@ -4,6 +4,11 @@ from lettuce import world, step
 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):
@@ -19,6 +24,7 @@ def i_created_a_video_component(step):
 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')
@@ -115,3 +121,38 @@ def the_youtube_video_is_shown(_step):
     world.wait_for_xmodule()
     ele = world.css_find('.video').first
     assert ele['data-streams'].split(':')[1] == world.scenario_dict['YOUTUBE_ID']
+
+
+@step('Make sure captions are (.+)$')
+def set_captions_visibility_state(_step, captions_state):
+    if captions_state == 'closed':
+        if world.css_visible('.subtitles'):
+            world.browser.find_by_css('.hide-subtitles').click()
+    else:
+        if not world.css_visible('.subtitles'):
+            world.browser.find_by_css('.hide-subtitles').click()
+
+
+@step('I hover over button "([^"]*)"$')
+def hover_over_button(_step, button):
+    world.css_find(BUTTONS[button.strip()]).mouse_over()
+
+
+@step('Captions (?:are|become) "([^"]*)"$')
+def are_captions_visibile(_step, visibility_state):
+    _step.given('Captions become "{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())
+
+    # Captions become invisible by fading out. We must wait by a specified
+    # time.
+    world.wait(timeout)
+
+    if visibility_state == 'visible':
+        assert world.css_visible('.subtitles')
+    else:
+        assert not world.css_visible('.subtitles')
+

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

@@ -392,7 +392,7 @@ div.video {
             @include transition(none);
             -webkit-font-smoothing: antialiased;
             width: 30px;
-          
+
             &:hover, &:active {
               background-color: #444;
               color: #fff;
@@ -457,7 +457,7 @@ div.video {
           text-indent: -9999px;
           @include transition(none);
           width: 30px;
-          
+
           &:hover, &:active {
             background-color: #444;
             color: #fff;
@@ -611,6 +611,7 @@ div.video {
     ol.subtitles {
         width: 0;
         height: 0;
+
         visibility: hidden;
     }
 
@@ -645,6 +646,7 @@ div.video {
       ol.subtitles {
         right: -(flex-grid(4));
         width: auto;
+
         visibility: hidden;
       }
     }

common/lib/xmodule/xmodule/js/fixtures/video.html

@@ -12,6 +12,7 @@
         data-autoplay="False"
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
+        data-autohide-html5="True"
       >
         <div class="focus_grabber first"></div>
 

common/lib/xmodule/xmodule/js/fixtures/video_all.html

@@ -15,6 +15,7 @@
         data-autoplay="False"
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
+        data-autohide-html5="True"
       >
         <div class="focus_grabber first"></div>
 

common/lib/xmodule/xmodule/js/fixtures/video_html5.html

@@ -15,6 +15,7 @@
         data-autoplay="False"
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
+        data-autohide-html5="True"
       >
         <div class="focus_grabber first"></div>
 

common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html

@@ -12,6 +12,7 @@
         data-autoplay="False"
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
+        data-autohide-html5="True"
       >
         <div class="focus_grabber first"></div>
 

common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html

@@ -12,6 +12,7 @@
         data-autoplay="False"
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
+        data-autohide-html5="True"
       >
         <div class="focus_grabber first"></div>
 
@@ -73,6 +74,8 @@
         data-autoplay="False"
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
+
+        data-autohide-html5="True"
       >
         <div class="tc-wrapper">
           <article class="video-wrapper">
@@ -130,6 +133,8 @@
         data-autoplay="False"
         data-yt-test-timeout="1500"
         data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/"
+
+        data-autohide-html5="True"
       >
         <div class="tc-wrapper">
           <article class="video-wrapper">

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

@@ -264,15 +264,21 @@ 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;
 
         // The parent element of the video, and the ID.
         this.el = $(element).find('.video');
+        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 + '".'
         );
@@ -283,32 +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'),
-
-            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/04_video_control.js

@@ -57,7 +57,7 @@ function () {
             state.videoControl.play();
         }
 
-        if (state.videoType === 'html5') {
+        if ((state.videoType === 'html5') && (state.config.autohideHtml5)) {
             state.videoControl.fadeOutTimeout = state.config.fadeOutTimeout;
 
             state.videoControl.el.addClass('html5');
@@ -81,7 +81,7 @@ function () {
         state.videoControl.fullScreenEl.on('click', state.videoControl.toggleFullScreen);
         $(document).on('keyup', state.videoControl.exitFullScreen);
 
-        if (state.videoType === 'html5') {
+        if ((state.videoType === 'html5') && (state.config.autohideHtml5)) {
             state.el.on('mousemove', state.videoControl.showControls);
             state.el.on('keydown', state.videoControl.showControls);
         }

lms/djangoapps/courseware/features/video.feature

@@ -2,38 +2,45 @@
 Feature: LMS.Video component
   As a student, I want to view course videos in LMS.
 
+  # 1
   Scenario: Video component is fully rendered in the LMS in HTML5 mode
     Given the course has a Video component in HTML5 mode
     Then when I view the video it has rendered in HTML5 mode
     And all sources are correct
 
+  # 2
   # Firefox doesn't have HTML5 (only mp4 - fix here)
   @skip_firefox
   Scenario: Autoplay is disabled in LMS for a Video component
     Given the course has a Video component in HTML5 mode
     Then when I view the video it does not have autoplay enabled
 
+  # 3
   # Youtube testing
   Scenario: Video component is fully rendered in the LMS in Youtube mode with HTML5 sources
     Given youtube server is up and response time is  0.4 seconds
     And the course has a Video component in Youtube_HTML5 mode
     Then when I view the video it has rendered in Youtube mode
 
+  # 4
   Scenario: Video component is not rendered in the LMS in Youtube mode with HTML5 sources
     Given youtube server is up and response time is 2 seconds
     And the course has a Video component in Youtube_HTML5 mode
     Then when I view the video it has rendered in HTML5 mode
 
+  # 5
   Scenario: Video component is rendered in the LMS in Youtube mode without HTML5 sources
     Given youtube server is up and response time is 2 seconds
     And the course has a Video component in Youtube mode
     Then when I view the video it has rendered in Youtube mode
 
+  # 6
   Scenario: Video component is rendered in the LMS in Youtube mode with HTML5 sources that doesn't supported by browser
     Given youtube server is up and response time is 2 seconds
     And the course has a Video component in Youtube_HTML5_Unsupported_Video mode
     Then when I view the video it has rendered in Youtube mode
 
+  # 7
   Scenario: Video component is rendered in the LMS in HTML5 mode with HTML5 sources that doesn't supported by browser
     Given the course has a Video component in HTML5_Unsupported_Video mode
     Then error message is shown

lms/templates/video.html

@@ -26,6 +26,19 @@
     data-yt-test-timeout="${yt_test_timeout}"
     data-yt-test-url="${yt_test_url}"
 
+    ## For now, the option "data-autohide-html5" is hard coded. This option
+    ## either enables or disables autohiding of controls and captions on mouse
+    ## inactivity. If set to true, controls and captions will autohide for
+    ## HTML5 sources (non-YouTube) after a period of mouse inactivity over the
+    ## whole video. When the mouse moves (or a key is pressed while any part of
+    ## the video player is focused), the captions and controls will be shown
+    ## once again.
+    ##
+    ## There is no option in the "Advanced Editor" to set this option. However,
+    ## this option will have an effect if changed to "True". The code on
+    ## front-end exists.
+    data-autohide-html5="False"
+
     tabindex="-1"
 >
     <div class="focus_grabber first"></div>