Fixes bug with Fullscreen mode and more.

Fixes subtitles hiding on slidermove and their height.

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

@@ -541,14 +541,13 @@ div.videoalpha {
     }
   }
 
-  &.fullscreen {
+  &.video-fullscreen {
     background: rgba(#000, .95);
     border: 0;
     bottom: 0;
     height: 100%;
     left: 0;
     margin: 0;
-    overflow: hidden;
     padding: 0;
     position: fixed;
     top: 0;

common/lib/xmodule/xmodule/js/spec/videoalpha/readme.md

@@ -5,8 +5,3 @@ As of 22.07.2013, all the tests in this directory pass. To disable each of them,
 
 PS: When you are running the tests in chrome locally, make sure that chrome is started
 with the option "--allow-file-access-from-files".
-
-PPS: Don't forget to place test video files (test.mp4, test.ogv, test.webm) into the
-folder "common/lib/xmodule". You can get these from http://www.quirksmode.org/html5/tests/video.html
-or from some other site that demonstrates HTML5 video playback. Just open up the site's
-source, and save the video files (make sure to rname them to "test.*").

common/lib/xmodule/xmodule/js/spec/videoalpha/video_player_spec.js

@@ -609,8 +609,8 @@
           expect($('.add-fullscreen')).toHaveAttr('title', 'Exit fullscreen');
         });
 
-        it('add the fullscreen class', function() {
-          expect(state.el).toHaveClass('fullscreen');
+        it('add the video-fullscreen class', function() {
+          expect(state.el).toHaveClass('video-fullscreen');
         });
 
         it('tell VideoCaption to resize', function() {
@@ -623,7 +623,7 @@
           initialize();
           spyOn(videoCaption, 'resize').andCallThrough();
 
-          state.el.addClass('fullscreen');
+          state.el.addClass('video-fullscreen');
           videoControl.fullScreenState = true;
           isFullScreen = true;
           videoControl.fullScreenEl.attr('title', 'Exit-fullscreen');
@@ -635,8 +635,8 @@
           expect($('.add-fullscreen')).toHaveAttr('title', 'Fullscreen');
         });
 
-        it('remove the fullscreen class', function() {
-          expect(state.el).not.toHaveClass('fullscreen');
+        it('remove the video-fullscreen class', function() {
+          expect(state.el).not.toHaveClass('video-fullscreen');
         });
 
         it('tell VideoCaption to resize', function() {

common/lib/xmodule/xmodule/js/src/videoalpha/04_video_control.js

@@ -154,15 +154,16 @@ function () {
 
     function toggleFullScreen(event) {
         event.preventDefault();
+        var fullScreenClassNameEl = this.el.add(document.documentElement);
 
         if (this.videoControl.fullScreenState) {
             this.videoControl.fullScreenState = false;
-            this.el.removeClass('fullscreen');
+            fullScreenClassNameEl.removeClass('video-fullscreen');
             this.isFullScreen = false;
             this.videoControl.fullScreenEl.attr('title', 'Fullscreen');
         } else {
             this.videoControl.fullScreenState = true;
-            this.el.addClass('fullscreen');
+            fullScreenClassNameEl.addClass('video-fullscreen');
             this.isFullScreen = true;
             this.videoControl.fullScreenEl.attr('title', 'Exit fullscreen');
         }

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

@@ -43,6 +43,7 @@ function () {
         state.videoCaption.hideCaptions        = _.bind(hideCaptions, state);
         state.videoCaption.calculateOffset     = _.bind(calculateOffset, state);
         state.videoCaption.updatePlayTime      = _.bind(updatePlayTime, state);
+        state.videoCaption.setSubtitlesHeight      = _.bind(setSubtitlesHeight, state);
 
         state.videoCaption.renderElements      = _.bind(renderElements, state);
         state.videoCaption.bindHandlers        = _.bind(bindHandlers, state);
@@ -70,9 +71,7 @@ function () {
         this.el.find('.video-wrapper').after(this.videoCaption.subtitlesEl);
         this.el.find('.video-controls .secondary-controls').append(this.videoCaption.hideSubtitlesEl);
 
-        this.el.find('.subtitles').css({
-            maxHeight: this.el.find('.video-wrapper').height()
-        });
+        this.videoCaption.setSubtitlesHeight();
 
         this.videoCaption.fetchCaption();
 
@@ -112,8 +111,10 @@ function () {
         if (this.videoType === 'html5') {
             this.el.on('mousemove', this.videoCaption.autoShowCaptions);
 
-            // Moving slider on subtitles is not a mouse move, but captions should be showed.
+            // Moving slider on subtitles is not a mouse move,
+            // but captions and controls should be showed.
             this.videoCaption.subtitlesEl.on('scroll', this.videoCaption.autoShowCaptions);
+            this.videoCaption.subtitlesEl.on('scroll', this.videoControl.showControls);
         }
     }
 
@@ -188,9 +189,8 @@ function () {
     }
 
     function resize() {
-        this.videoCaption.subtitlesEl.css({
-            maxHeight: this.videoCaption.captionHeight()
-        });
+
+        this.videoCaption.setSubtitlesHeight();
 
         this.videoCaption.subtitlesEl
             .find('.spacing:first').height(this.videoCaption.topSpacingHeight())
@@ -393,6 +393,21 @@ function () {
         }
     }
 
+    function setSubtitlesHeight() {
+        var height = 0;
+         if (this.videoType === 'html5')
+            if  ( (this.captionsHidden === undefined && this.hide_captions === true ) ||
+                  (this.captionsHidden === true) ) {
+            // In case of html5 autoshowing subtitles,
+            // we ajdust height of subs, by height of scrollbar
+            height = this.videoControl.el.height() + this.videoControl.sliderEl.height() / 2;
+            // height of videoControl does not contain height of slider.
+            // (css is set to absolute, to avoid yanking when slider autochanges its height) 
+         }
+        this.videoCaption.subtitlesEl.css({
+            maxHeight: this.videoCaption.captionHeight() - height
+        });
+     }
 });
 
 }(RequireJS.requirejs, RequireJS.require, RequireJS.define));

lms/static/sass/course/courseware/_courseware.scss

@@ -3,6 +3,14 @@ html {
   max-height: 100%;
 }
 
+html.video-fullscreen{
+  overflow: hidden;
+
+  body{
+    overflow: hidden;
+  }
+}
+
 div.course-wrapper {
 
   section.course-content {