Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BLD-852: Fix video positioning in full view mode.

Browse Source
This commit is contained in:
polesye
2014-02-27 17:50:17 +02:00
parent b292f6c276
commit fe8e6026a1
13 changed files with 311 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
common/lib/xmodule/xmodule/css/video/display.scss
View File

@@ -256,6 +256,11 @@ div.video {
margin: 0 lh() 0 0;
padding: 0;
@media (max-width: 1120px) {
margin-right: lh(.5);
font-size: em(14);
}
li {
float: left;
margin-bottom: 0;
@@ -292,11 +297,13 @@ div.video {
}
div.vidtime {
padding-left: lh(.75);
font-weight: bold;
line-height: 46px; //height of play pause buttons
padding-left: lh(.75);
-webkit-font-smoothing: antialiased;
padding-left: lh(.75);
@media (max-width: 1120px) {
padding-left: lh(.5);
}
}
}
}
@@ -389,8 +396,8 @@ div.video {
.menu{
width: 131px;
@media (max-width: 1024px) {
width: 101px;
@media (max-width: 1120px) {
width: 80px;
}
}
@@ -403,9 +410,9 @@ div.video {
min-width: 116px;
text-indent: 0;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
min-width: 0;
width: 86px;
width: 60px;
}
h3 {
@@ -418,7 +425,7 @@ div.video {
text-transform: uppercase;
color: #999;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
display: none;
}
}
@@ -429,7 +436,7 @@ div.video {
margin-bottom: 0;
padding: 0 lh(.5) 0 0;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
padding: 0 lh(.5) 0 lh(.5);
}
@@ -676,9 +683,10 @@ div.video {
vertical-align: middle;
&.closed {
ol.subtitles {
right: -(flex-grid(4));
width: auto;
div.tc-wrapper {
article.video-wrapper {
width: 100%;
}
}
}
@@ -698,17 +706,16 @@ div.video {
div.tc-wrapper {
@include clearfix;
display: table;
width: 100%;
height: 100%;
position: static;
article.video-wrapper {
width: 100%;
display: table-cell;
height: 100%;
width: 75%;
vertical-align: middle;
float: none;
margin-right: 0;
object, iframe, video{
position: absolute;
@@ -727,16 +734,12 @@ div.video {
}
ol.subtitles {
@include box-sizing(border-box);
@include transition(none);
background: rgba(#000, .8);
bottom: 0;
background: #000;
height: 100%;
max-height: 460px;
max-width: flex-grid(3);
width: 25%;
padding: lh();
position: fixed;
right: 0;
top: 0;
visibility: visible;
li {

9
common/lib/xmodule/xmodule/js/spec/helper.js
View File

@@ -240,12 +240,19 @@
'setParams',
'setMode'
],
obj = {};
obj = {},
delta = {
add: jasmine.createSpy().andReturn(obj),
substract: jasmine.createSpy().andReturn(obj),
reset: jasmine.createSpy().andReturn(obj)
};
$.each(methods, function (index, method) {
obj[method] = jasmine.createSpy(method).andReturn(obj);
});
obj.delta = delta;
return obj;
}());

90
common/lib/xmodule/xmodule/js/spec/video/resizer_spec.js
View File

@@ -18,7 +18,7 @@ function (Resizer) {
'</div>',
'</div>'
].join(''),
config, container, element, originalConsoleLog;
config, container, element;
beforeEach(function () {
setFixtures(html);
@@ -30,14 +30,9 @@ function (Resizer) {
element: element
};
originalConsoleLog = window.console.log;
spyOn(console, 'log');
});
afterEach(function () {
window.console.log = originalConsoleLog;
});
it('When Initialize without required parameters, log message is shown',
function () {
new Resizer({ });
@@ -134,7 +129,7 @@ function (Resizer) {
expect(spiesList[0].calls.length).toEqual(1);
});
it('All callbacks are removed', function () {
it('all callbacks are removed', function () {
$.each(spiesList, function (index, spy) {
resizer.callbacks.add(spy);
});
@@ -147,7 +142,7 @@ function (Resizer) {
});
});
it('Specific callback is removed', function () {
it('specific callback is removed', function () {
$.each(spiesList, function (index, spy) {
resizer.callbacks.add(spy);
});
@@ -176,9 +171,86 @@ function (Resizer) {
});
});
});
describe('Delta', function () {
var resizer;
beforeEach(function () {
resizer = new Resizer(config);
});
it('adding delta align correctly by height', function () {
var delta = 100,
expectedHeight = container.height() + delta,
realHeight;
resizer
.delta.add(delta, 'height')
.setMode('height');
realHeight = element.height();
expect(realHeight).toBe(expectedHeight);
});
it('adding delta align correctly by width', function () {
var delta = 100,
expectedWidth = container.width() + delta,
realWidth;
resizer
.delta.add(delta, 'width')
.setMode('width');
realWidth = element.width();
expect(realWidth).toBe(expectedWidth);
});
it('substract delta align correctly by height', function () {
var delta = 100,
expectedHeight = container.height() - delta,
realHeight;
resizer
.delta.substract(delta, 'height')
.setMode('height');
realHeight = element.height();
expect(realHeight).toBe(expectedHeight);
});
it('substract delta align correctly by width', function () {
var delta = 100,
expectedWidth = container.width() - delta,
realWidth;
resizer
.delta.substract(delta, 'width')
.setMode('width');
realWidth = element.width();
expect(realWidth).toBe(expectedWidth);
});
it('reset delta', function () {
var delta = 100,
expectedWidth = container.width(),
realWidth;
resizer
.delta.substract(delta, 'width')
.delta.reset()
.setMode('width');
realWidth = element.width();
expect(realWidth).toBe(expectedWidth);
});
});
});
});

7
common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js
View File

@@ -106,13 +106,6 @@
});
});
it('bind window resize event', function () {
state = jasmine.initializePlayer();
expect($(window)).toHandleWith(
'resize', state.videoCaption.resize
);
});
it('bind the hide caption button', function () {
state = jasmine.initializePlayer();
expect($('.hide-subtitles')).toHandleWith(

11
common/lib/xmodule/xmodule/js/spec/video/video_control_spec.js
View File

@@ -549,6 +549,17 @@
});
});
it('Controls height is actual on switch to fullscreen', function () {
spyOn($.fn, 'height').andCallFake(function (val) {
return _.isUndefined(val) ? 100: this;
});
state = jasmine.initializePlayer();
$(state.el).trigger('fullscreen');
expect(state.videoControl.height).toBe(150);
});
describe('play', function () {
beforeEach(function () {
state = jasmine.initializePlayer();

5
common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
View File

@@ -711,6 +711,7 @@ function (VideoPlayer) {
state.videoEl = $('video, iframe');
spyOn(state.videoCaption, 'resize').andCallThrough();
spyOn($.fn, 'trigger').andCallThrough();
state.videoControl.toggleFullScreen(jQuery.Event('click'));
});
@@ -725,7 +726,8 @@ function (VideoPlayer) {
it('tell VideoCaption to resize', function () {
expect(state.videoCaption.resize).toHaveBeenCalled();
expect(state.resizer.setMode).toHaveBeenCalled();
expect(state.resizer.setMode).toHaveBeenCalledWith('both');
expect(state.resizer.delta.substract).toHaveBeenCalled();
});
});
@@ -758,6 +760,7 @@ function (VideoPlayer) {
expect(state.videoCaption.resize).toHaveBeenCalled();
expect(state.resizer.setMode)
.toHaveBeenCalledWith('width');
expect(state.resizer.delta.reset).toHaveBeenCalled();
});
});
});

49
common/lib/xmodule/xmodule/js/src/video/00_resizer.js
View File

@@ -13,20 +13,24 @@ function () {
elementRatio: null
},
callbacksList = [],
delta = {
height: 0,
width: 0
},
module = {},
mode = null,
config;
var initialize = function (params) {
if (config) {
config = $.extend(true, config, params);
} else {
config = $.extend(true, {}, defaults, params);
if (!config) {
config = defaults;
}
config = $.extend(true, {}, config, params);
if (!config.element) {
console.log(
'[Video info]: Required parameter `element` is not passed.'
'Required parameter `element` is not passed.'
);
}
@@ -35,8 +39,8 @@ function () {
var getData = function () {
var container = $(config.container),
containerWidth = container.width(),
containerHeight = container.height(),
containerWidth = container.width() + delta.width,
containerHeight = container.height() + delta.height,
containerRatio = config.containerRatio,
element = $(config.element),
@@ -74,7 +78,6 @@ function () {
default:
if (data.containerRatio >= data.elementRatio) {
alignByHeightOnly();
} else {
alignByWidthOnly();
}
@@ -142,7 +145,7 @@ function () {
addCallback(decorator);
} else {
console.error('[Video info]: TypeError: Argument is not a function.');
console.error('TypeError: Argument is not a function.');
}
return module;
@@ -168,6 +171,29 @@ function () {
}
};
var cleanDelta = function () {
delta['height'] = 0;
delta['width'] = 0;
return module;
};
var addDelta = function (value, side) {
if (_.isNumber(value) && _.isNumber(delta[side])) {
delta[side] += value;
}
return module;
};
var substractDelta = function (value, side) {
if (_.isNumber(value) && _.isNumber(delta[side])) {
delta[side] -= value;
}
return module;
};
initialize.apply(module, arguments);
return $.extend(true, module, {
@@ -181,6 +207,11 @@ function () {
once: addOnceCallback,
remove: removeCallback,
removeAll: removeCallbacks
},
delta: {
add: addDelta,
substract: substractDelta,
reset: cleanDelta
}
});
};

8
common/lib/xmodule/xmodule/js/src/video/03_video_player.js
View File

@@ -221,7 +221,7 @@ function (HTML5Video, Resizer) {
state.resizer = new Resizer({
element: state.videoEl,
elementRatio: videoWidth/videoHeight,
container: state.videoEl.parent()
container: state.container
})
.callbacks.once(function() {
state.trigger('videoCaption.resize', null);
@@ -235,7 +235,11 @@ function (HTML5Video, Resizer) {
});
}
$(window).bind('resize', _.debounce(state.resizer.align, 100));
$(window).on('resize', _.debounce(function () {
state.trigger('videoControl.updateControlsHeight', null);
state.trigger('videoCaption.resize', null);
state.resizer.align();
}, 100));
}
// function _restartUsingFlash(state)

45
common/lib/xmodule/xmodule/js/src/video/04_video_control.js
View File

@@ -40,6 +40,7 @@ function () {
showPlayPlaceholder: showPlayPlaceholder,
toggleFullScreen: toggleFullScreen,
togglePlayback: togglePlayback,
updateControlsHeight: updateControlsHeight,
updateVcrVidTime: updateVcrVidTime
};
@@ -83,6 +84,8 @@ function () {
'role': 'slider',
'title': gettext('Video slider')
});
state.videoControl.updateControlsHeight();
}
// function _bindHandlers(state)
@@ -91,6 +94,23 @@ function () {
function _bindHandlers(state) {
state.videoControl.playPauseEl.on('click', state.videoControl.togglePlayback);
state.videoControl.fullScreenEl.on('click', state.videoControl.toggleFullScreen);
state.el.on('fullscreen', function (event, isFullScreen) {
var height = state.videoControl.updateControlsHeight();
if (isFullScreen) {
state.resizer
.delta
.substract(height, 'height')
.setMode('both');
} else {
state.resizer
.delta
.reset()
.setMode('width');
}
});
$(document).on('keyup', state.videoControl.exitFullScreen);
if ((state.videoType === 'html5') && (state.config.autohideHtml5)) {
@@ -110,12 +130,22 @@ function () {
});
}
}
function _getControlsHeight(control) {
return control.el.height() + 0.5 * control.sliderEl.height();
}
// ***************************************************************
// Public functions start here.
// These are available via the 'state' object. Their context ('this' keyword) is the 'state' object.
// The magic private function that makes them available and sets up their context is makeFunctionsPublic().
// ***************************************************************
function updateControlsHeight () {
this.videoControl.height = _getControlsHeight(this.videoControl);
return this.videoControl.height;
}
function show() {
this.videoControl.el.removeClass('is-hidden');
this.el.trigger('controls:show', arguments);
@@ -234,13 +264,6 @@ function () {
this.videoControl.fullScreenState = this.isFullScreen = false;
fullScreenClassNameEl.removeClass('video-fullscreen');
text = gettext('Fill browser');
this.resizer
.setParams({
container: this.videoEl.parent()
})
.setMode('width');
win.scrollTop(this.scrollPos);
} else {
this.scrollPos = win.scrollTop();
@@ -248,13 +271,6 @@ function () {
this.videoControl.fullScreenState = this.isFullScreen = true;
fullScreenClassNameEl.addClass('video-fullscreen');
text = gettext('Exit full browser');
this.resizer
.setParams({
container: window
})
.setMode('both');
}
this.videoControl.fullScreenEl
@@ -262,6 +278,7 @@ function () {
.text(text);
this.trigger('videoCaption.resize', null);
this.el.trigger('fullscreen', [this.isFullScreen]);
}
function exitFullScreen(event) {

20
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
View File

@@ -135,7 +135,6 @@ function () {
var self = this,
Caption = this.videoCaption;
$(window).bind('resize', Caption.resize);
Caption.hideSubtitlesEl.on({
'click': Caption.toggle
});
@@ -754,8 +753,12 @@ function () {
});
}
if (this.resizer && !this.isFullScreen) {
this.resizer.alignByWidthOnly();
if (this.resizer) {
if (this.isFullScreen) {
this.resizer.setMode('both');
} else {
this.resizer.alignByWidthOnly();
}
}
this.videoCaption.setSubtitlesHeight();
@@ -769,17 +772,8 @@ function () {
}
function captionHeight() {
var paddingTop;
if (this.isFullScreen) {
paddingTop = parseInt(
this.videoCaption.subtitlesEl.css('padding-top'), 10
);
return $(window).height() -
this.videoControl.el.height() -
0.5 * this.videoControl.sliderEl.height() -
2 * paddingTop;
return this.container.height() - this.videoControl.height;
} else {
return this.container.height();
}