From 65aa7d4f2e767ef306b5a1f2c334d3e5f5896fd6 Mon Sep 17 00:00:00 2001 From: Anton Stupak Date: Tue, 30 Jul 2013 16:47:53 +0300 Subject: [PATCH] Fixes bug with Fullscreen mode and more. Fixes subtitles hiding on slidermove and their height. --- .../xmodule/css/videoalpha/display.scss | 3 +- .../xmodule/js/spec/videoalpha/readme.md | 5 ---- .../js/spec/videoalpha/video_player_spec.js | 10 +++---- .../js/src/videoalpha/04_video_control.js | 5 ++-- .../js/src/videoalpha/09_video_caption.js | 29 ++++++++++++++----- .../sass/course/courseware/_courseware.scss | 8 +++++ 6 files changed, 39 insertions(+), 21 deletions(-) diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss index 4db641a99a..3b40809fa3 100644 --- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss +++ b/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; diff --git a/common/lib/xmodule/xmodule/js/spec/videoalpha/readme.md b/common/lib/xmodule/xmodule/js/spec/videoalpha/readme.md index 9609faa2ee..570827b910 100644 --- a/common/lib/xmodule/xmodule/js/spec/videoalpha/readme.md +++ b/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.*"). diff --git a/common/lib/xmodule/xmodule/js/spec/videoalpha/video_player_spec.js b/common/lib/xmodule/xmodule/js/spec/videoalpha/video_player_spec.js index b91e5c6909..467ecc75a2 100644 --- a/common/lib/xmodule/xmodule/js/spec/videoalpha/video_player_spec.js +++ b/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() { diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/04_video_control.js b/common/lib/xmodule/xmodule/js/src/videoalpha/04_video_control.js index 26159d2c9e..ac33e328c4 100644 --- a/common/lib/xmodule/xmodule/js/src/videoalpha/04_video_control.js +++ b/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'); } diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/09_video_caption.js b/common/lib/xmodule/xmodule/js/src/videoalpha/09_video_caption.js index dd64d8870a..db332c1e6b 100644 --- a/common/lib/xmodule/xmodule/js/src/videoalpha/09_video_caption.js +++ b/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)); diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 200705e8b6..abceb38359 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/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 {