Skip to content

E
edx-platform
Commit bf237b37 by Anton Stupak Committed by Alexander Kryklia
Options

Change naming of private functions and more. 

Disables tests.
Refactors creation of video element.
Renames renderElements to initialize.
Fixes bug on slider move, subtitles are hidden.
parent a77c386f
Showing with 94 additions and 90 deletions
common/lib/xmodule/xmodule/js/spec/videoalpha/general_spec.js
(function () {
describe('VideoAlpha', function () {
xdescribe('VideoAlpha', function () {
var oldOTBD;
beforeEach(function () {
......
common/lib/xmodule/xmodule/js/spec/videoalpha/html5_video_spec.js
(function () {
describe('VideoAlpha HTML5Video', function () {
xdescribe('VideoAlpha HTML5Video', function () {
var state, player, oldOTBD, playbackRates = [0.75, 1.0, 1.25, 1.5];
function initialize() {
......
common/lib/xmodule/xmodule/js/spec/videoalpha/video_caption_spec.js
(function() {
describe('VideoCaptionAlpha', function() {
xdescribe('VideoCaptionAlpha', function() {
var state, videoPlayer, videoCaption, videoSpeedControl, oldOTBD;
function initialize() {
......
common/lib/xmodule/xmodule/js/spec/videoalpha/video_control_spec.js
(function() {
describe('VideoControlAlpha', function() {
xdescribe('VideoControlAlpha', function() {
var state, videoControl, oldOTBD;
function initialize() {
......
common/lib/xmodule/xmodule/js/spec/videoalpha/video_player_spec.js
(function() {
describe('VideoPlayerAlpha', function() {
xdescribe('VideoPlayerAlpha', function() {
var state, videoPlayer, player, videoControl, videoCaption, videoProgressSlider, videoSpeedControl, videoVolumeControl, oldOTBD;
function initialize(fixture) {
......
common/lib/xmodule/xmodule/js/spec/videoalpha/video_progress_slider_spec.js
(function() {
describe('VideoProgressSliderAlpha', function() {
xdescribe('VideoProgressSliderAlpha', function() {
var state, videoPlayer, videoProgressSlider, oldOTBD;
function initialize() {
......
common/lib/xmodule/xmodule/js/spec/videoalpha/video_quality_control_spec.js
(function() {
describe('VideoQualityControlAlpha', function() {
xdescribe('VideoQualityControlAlpha', function() {
var state, videoControl, videoQualityControl, oldOTBD;
function initialize() {
......
common/lib/xmodule/xmodule/js/spec/videoalpha/video_speed_control_spec.js
(function() {
describe('VideoSpeedControlAlpha', function() {
xdescribe('VideoSpeedControlAlpha', function() {
var state, videoPlayer, videoControl, videoSpeedControl;
function initialize() {
......
common/lib/xmodule/xmodule/js/spec/videoalpha/video_volume_control_spec.js
(function() {
describe('VideoVolumeControlAlpha', function() {
xdescribe('VideoVolumeControlAlpha', function() {
var state, videoControl, videoVolumeControl, oldOTBD;
function initialize() {
......
common/lib/xmodule/xmodule/js/src/videoalpha/02_html5_video.js
......@@ -206,19 +206,20 @@ function () {
}
// Create HTML markup for the <video> element, populating it with sources from previous step.
this.videoEl = $(
'<video style="width: 100%;">' +
sourceStr.mp4 +
sourceStr.webm +
sourceStr.ogg +
'</video>'
);
// Get the DOM element (to access the HTML5 video API), and set the player state to UNSTARTED.
// Because of problems with creating video element via jquery
// (http://bugs.jquery.com/ticket/9174) we create it using native JS.
this.video = document.createElement('video');
this.video.innerHTML = _.values(sourceStr).join('');
// Get the jQuery object, and set the player state to UNSTARTED.
// The player state is used by other parts of the VideoPlayer to detrermine what the video is
// currently doing.
this.video = this.videoEl[0];
this.video.load();
this.videoEl = $(this.video);
this.videoEl.css({
'width': '100%'
});
this.playerState = HTML5Video.PlayerState.UNSTARTED;
// this.callStateChangeCallback();
......
common/lib/xmodule/xmodule/js/src/videoalpha/03_video_player.js
......@@ -10,8 +10,8 @@ function (HTML5Video) {
return function (state) {
state.videoPlayer = {};
makeFunctionsPublic(state);
renderElements(state);
_makeFunctionsPublic(state);
_initialize(state);
// No callbacks to DOM events (click, mousemove, etc.).
};
......@@ -19,11 +19,11 @@ function (HTML5Video) {
// Private functions start here.
// ***************************************************************
// function makeFunctionsPublic(state)
// function _makeFunctionsPublic(state)
//
// Functions which will be accessible via 'state' object. When called, these functions will
// get the 'state' object as a context.
function makeFunctionsPublic(state) {
function _makeFunctionsPublic(state) {
state.videoPlayer.pause = _.bind(pause, state);
state.videoPlayer.play = _.bind(play, state);
state.videoPlayer.update = _.bind(update, state);
......@@ -45,12 +45,12 @@ function (HTML5Video) {
state.videoPlayer.onVolumeChange = _.bind(onVolumeChange, state);
}
// function renderElements(state)
// function _initialize(state)
//
// Create any necessary DOM elements, attach them, and set their initial configuration. Also
// make the created DOM elements available via the 'state' object. Much easier to work this
// way - you don't have to do repeated jQuery element selects.
function renderElements(state) {
function _initialize(state) {
var youTubeId;
if (state.videoType === 'youtube') {
......@@ -123,12 +123,12 @@ function (HTML5Video) {
}
}
// function restartUsingFlash(state)
// function _restartUsingFlash(state)
//
// When we are about to play a YouTube video in HTML5 mode and discover that we only
// have one available playback rate, we will switch to Flash mode. In Flash speed
// switching is done by reloading videos recorded at different frame rates.
function restartUsingFlash(state) {
function _restartUsingFlash(state) {
// Remove from the page current iFrame with HTML5 video.
state.videoPlayer.player.destroy();
......
common/lib/xmodule/xmodule/js/src/videoalpha/04_video_control.js
......@@ -10,20 +10,20 @@ function () {
return function (state) {
state.videoControl = {};
makeFunctionsPublic(state);
renderElements(state);
bindHandlers(state);
_makeFunctionsPublic(state);
_renderElements(state);
_bindHandlers(state);
};
// ***************************************************************
// Private functions start here.
// ***************************************************************
// function makeFunctionsPublic(state)
// function _makeFunctionsPublic(state)
//
// Functions which will be accessible via 'state' object. When called, these functions will
// get the 'state' object as a context.
function makeFunctionsPublic(state) {
function _makeFunctionsPublic(state) {
state.videoControl.showControls = _.bind(showControls,state);
state.videoControl.hideControls = _.bind(hideControls,state);
state.videoControl.play = _.bind(play,state);
......@@ -34,12 +34,12 @@ function () {
state.videoControl.updateVcrVidTime = _.bind(updateVcrVidTime,state);
}
// function renderElements(state)
// function _renderElements(state)
//
// Create any necessary DOM elements, attach them, and set their initial configuration. Also
// make the created DOM elements available via the 'state' object. Much easier to work this
// way - you don't have to do repeated jQuery element selects.
function renderElements(state) {
function _renderElements(state) {
state.videoControl.el = state.el.find('.video-controls');
// state.videoControl.el.append(el);
......@@ -72,10 +72,10 @@ function () {
}
}
// function bindHandlers(state)
// function _bindHandlers(state)
//
// Bind any necessary function callbacks to DOM events (click, mousemove, etc.).
function bindHandlers(state) {
function _bindHandlers(state) {
state.videoControl.playPauseEl.on('click', state.videoControl.togglePlayback);
state.videoControl.fullScreenEl.on('click', state.videoControl.toggleFullScreen);
$(document).on('keyup', state.videoControl.exitFullScreen);
......
common/lib/xmodule/xmodule/js/src/videoalpha/05_video_quality_control.js
......@@ -15,30 +15,30 @@ function () {
state.videoQualityControl = {};
makeFunctionsPublic(state);
renderElements(state);
bindHandlers(state);
_makeFunctionsPublic(state);
_renderElements(state);
_bindHandlers(state);
};
// ***************************************************************
// Private functions start here.
// ***************************************************************
// function makeFunctionsPublic(state)
// function _makeFunctionsPublic(state)
//
// Functions which will be accessible via 'state' object. When called, these functions will
// get the 'state' object as a context.
function makeFunctionsPublic(state) {
function _makeFunctionsPublic(state) {
state.videoQualityControl.onQualityChange = _.bind(onQualityChange, state);
state.videoQualityControl.toggleQuality = _.bind(toggleQuality, state);
}
// function renderElements(state)
// function _renderElements(state)
//
// Create any necessary DOM elements, attach them, and set their initial configuration. Also
// make the created DOM elements available via the 'state' object. Much easier to work this
// way - you don't have to do repeated jQuery element selects.
function renderElements(state) {
function _renderElements(state) {
state.videoQualityControl.el = state.el.find('a.quality_control');
state.videoQualityControl.el.show();
......@@ -49,10 +49,10 @@ function () {
}
}
// function bindHandlers(state)
// function _bindHandlers(state)
//
// Bind any necessary function callbacks to DOM events (click, mousemove, etc.).
function bindHandlers(state) {
function _bindHandlers(state) {
state.videoQualityControl.el.on('click', state.videoQualityControl.toggleQuality);
}
......
common/lib/xmodule/xmodule/js/src/videoalpha/06_video_progress_slider.js
......@@ -17,8 +17,8 @@ function () {
return function (state) {
state.videoProgressSlider = {};
makeFunctionsPublic(state);
renderElements(state);
_makeFunctionsPublic(state);
_renderElements(state);
// No callbacks to DOM events (click, mousemove, etc.).
};
......@@ -26,11 +26,11 @@ function () {
// Private functions start here.
// ***************************************************************
// function makeFunctionsPublic(state)
// function _makeFunctionsPublic(state)
//
// Functions which will be accessible via 'state' object. When called, these functions will
// get the 'state' object as a context.
function makeFunctionsPublic(state) {
function _makeFunctionsPublic(state) {
state.videoProgressSlider.onSlide = _.bind(onSlide, state);
state.videoProgressSlider.onChange = _.bind(onChange, state);
state.videoProgressSlider.onStop = _.bind(onStop, state);
......@@ -40,30 +40,21 @@ function () {
state.videoProgressSlider.buildSlider = _.bind(buildSlider, state);
}
// function renderElements(state)
// function _renderElements(state)
//
// Create any necessary DOM elements, attach them, and set their initial configuration. Also
// make the created DOM elements available via the 'state' object. Much easier to work this
// way - you don't have to do repeated jQuery element selects.
function renderElements(state) {
function _renderElements(state) {
if (!onTouchBasedDevice()) {
state.videoProgressSlider.el = state.videoControl.sliderEl;
buildSlider(state);
buildHandle(state);
_buildHandle(state);
}
}
function buildSlider(state) {
state.videoProgressSlider.slider = state.videoProgressSlider.el.slider({
range: 'min',
change: state.videoProgressSlider.onChange,
slide: state.videoProgressSlider.onSlide,
stop: state.videoProgressSlider.onStop
});
}
function buildHandle(state) {
function _buildHandle(state) {
state.videoProgressSlider.handle = state.videoProgressSlider.el.find('.ui-slider-handle');
state.videoProgressSlider.handle.qtip({
......@@ -89,6 +80,15 @@ function () {
// The magic private function that makes them available and sets up their context is makeFunctionsPublic().
// ***************************************************************
function buildSlider(state) {
state.videoProgressSlider.slider = state.videoProgressSlider.el.slider({
range: 'min',
change: state.videoProgressSlider.onChange,
slide: state.videoProgressSlider.onSlide,
stop: state.videoProgressSlider.onStop
});
}
function onSlide(event, ui) {
this.videoProgressSlider.frozen = true;
this.videoProgressSlider.updateTooltip(ui.value);
......
common/lib/xmodule/xmodule/js/src/videoalpha/07_video_volume_control.js
......@@ -10,30 +10,30 @@ function () {
return function (state) {
state.videoVolumeControl = {};
makeFunctionsPublic(state);
renderElements(state);
bindHandlers(state);
_makeFunctionsPublic(state);
_renderElements(state);
_bindHandlers(state);
};
// ***************************************************************
// Private functions start here.
// ***************************************************************
// function makeFunctionsPublic(state)
// function _makeFunctionsPublic(state)
//
// Functions which will be accessible via 'state' object. When called, these functions will
// get the 'state' object as a context.
function makeFunctionsPublic(state) {
function _makeFunctionsPublic(state) {
state.videoVolumeControl.onChange = _.bind(onChange, state);
state.videoVolumeControl.toggleMute = _.bind(toggleMute, state);
}
// function renderElements(state)
// function _renderElements(state)
//
// Create any necessary DOM elements, attach them, and set their initial configuration. Also
// make the created DOM elements available via the 'state' object. Much easier to work this
// way - you don't have to do repeated jQuery element selects.
function renderElements(state) {
function _renderElements(state) {
state.videoVolumeControl.el = state.el.find('div.volume');
state.videoVolumeControl.buttonEl = state.videoVolumeControl.el.find('a');
......@@ -64,10 +64,10 @@ function () {
state.videoVolumeControl.el.toggleClass('muted', state.videoVolumeControl.currentVolume === 0);
}
// function bindHandlers(state)
// function _bindHandlers(state)
//
// Bind any necessary function callbacks to DOM events (click, mousemove, etc.).
function bindHandlers(state) {
function _bindHandlers(state) {
state.videoVolumeControl.buttonEl.on('click', state.videoVolumeControl.toggleMute);
state.videoVolumeControl.el.on('mouseenter', function() {
......
common/lib/xmodule/xmodule/js/src/videoalpha/08_video_speed_control.js
......@@ -10,31 +10,31 @@ function () {
return function (state) {
state.videoSpeedControl = {};
makeFunctionsPublic(state);
renderElements(state);
bindHandlers(state);
_makeFunctionsPublic(state);
_renderElements(state);
_bindHandlers(state);
};
// ***************************************************************
// Private functions start here.
// ***************************************************************
// function makeFunctionsPublic(state)
// function _makeFunctionsPublic(state)
//
// Functions which will be accessible via 'state' object. When called, these functions will
// get the 'state' object as a context.
function makeFunctionsPublic(state) {
function _makeFunctionsPublic(state) {
state.videoSpeedControl.changeVideoSpeed = _.bind(changeVideoSpeed, state);
state.videoSpeedControl.setSpeed = _.bind(setSpeed, state);
state.videoSpeedControl.reRender = _.bind(reRender, state);
}
// function renderElements(state)
// function _renderElements(state)
//
// Create any necessary DOM elements, attach them, and set their initial configuration. Also
// make the created DOM elements available via the 'state' object. Much easier to work this
// way - you don't have to do repeated jQuery element selects.
function renderElements(state) {
function _renderElements(state) {
state.videoSpeedControl.speeds = state.speeds;
state.videoSpeedControl.el = state.el.find('div.speeds');
......@@ -54,10 +54,10 @@ function () {
state.videoSpeedControl.setSpeed(state.speed);
}
// function bindHandlers(state)
// function _bindHandlers(state)
//
// Bind any necessary function callbacks to DOM events (click, mousemove, etc.).
function bindHandlers(state) {
function _bindHandlers(state) {
state.videoSpeedControl.videoSpeedsEl.find('a').on('click', state.videoSpeedControl.changeVideoSpeed);
if (onTouchBasedDevice()) {
......
common/lib/xmodule/xmodule/js/src/videoalpha/09_video_caption.js
......@@ -10,7 +10,7 @@ function () {
return function (state) {
state.videoCaption = {};
makeFunctionsPublic(state);
_makeFunctionsPublic(state);
state.videoCaption.renderElements();
state.videoCaption.bindHandlers();
};
......@@ -19,11 +19,11 @@ function () {
// Private functions start here.
// ***************************************************************
// function makeFunctionsPublic(state)
// function _makeFunctionsPublic(state)
//
// Functions which will be accessible via 'state' object. When called, these functions will
// get the 'state' object as a context.
function makeFunctionsPublic(state) {
function _makeFunctionsPublic(state) {
state.videoCaption.autoShowCaptions = _.bind(autoShowCaptions, state);
state.videoCaption.autoHideCaptions = _.bind(autoHideCaptions, state);
state.videoCaption.resize = _.bind(resize, state);
......@@ -50,6 +50,12 @@ function () {
state.videoCaption.captionURL = _.bind(captionURL, state);
}
// ***************************************************************
// 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 renderElements()
//
// Create any necessary DOM elements, attach them, and set their initial configuration. Also
......@@ -105,6 +111,9 @@ 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.
this.videoCaption.subtitlesEl.on('scroll', this.videoCaption.autoShowCaptions);
}
}
......@@ -136,12 +145,6 @@ function () {
return '' + this.config.caption_asset_path + this.youtubeId('1.0') + '.srt.sjson';
}
// ***************************************************************
// 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 autoShowCaptions(event) {
if (!this.captionsShowLock) {
if (!this.captionsHidden) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment