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

Change naming of private functions and more.

Browse Source 
Disables tests.
Refactors creation of video element.
Renames renderElements to initialize.
Fixes bug on slider move, subtitles are hidden.
This commit is contained in:
Anton Stupak
2013-07-29 19:52:08 +03:00
committed by Alexander Kryklia
parent a77c386f76
commit bf237b3762
17 changed files with 93 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/lib/xmodule/xmodule/js/spec/videoalpha/general_spec.js
View File

@@ -1,5 +1,5 @@
(function () {
describe('VideoAlpha', function () {
xdescribe('VideoAlpha', function () {
var oldOTBD;
beforeEach(function () {

2
common/lib/xmodule/xmodule/js/spec/videoalpha/html5_video_spec.js
View File

@@ -1,5 +1,5 @@
(function () {
describe('VideoAlpha HTML5Video', function () {
xdescribe('VideoAlpha HTML5Video', function () {
var state, player, oldOTBD, playbackRates = [0.75, 1.0, 1.25, 1.5];
function initialize() {

2
common/lib/xmodule/xmodule/js/spec/videoalpha/video_caption_spec.js
View File

@@ -1,5 +1,5 @@
(function() {
describe('VideoCaptionAlpha', function() {
xdescribe('VideoCaptionAlpha', function() {
var state, videoPlayer, videoCaption, videoSpeedControl, oldOTBD;
function initialize() {

2
common/lib/xmodule/xmodule/js/spec/videoalpha/video_control_spec.js
View File

@@ -1,5 +1,5 @@
(function() {
describe('VideoControlAlpha', function() {
xdescribe('VideoControlAlpha', function() {
var state, videoControl, oldOTBD;
function initialize() {

2
common/lib/xmodule/xmodule/js/spec/videoalpha/video_player_spec.js
View File

@@ -1,5 +1,5 @@
(function() {
describe('VideoPlayerAlpha', function() {
xdescribe('VideoPlayerAlpha', function() {
var state, videoPlayer, player, videoControl, videoCaption, videoProgressSlider, videoSpeedControl, videoVolumeControl, oldOTBD;
function initialize(fixture) {

2
common/lib/xmodule/xmodule/js/spec/videoalpha/video_progress_slider_spec.js
View File

@@ -1,5 +1,5 @@
(function() {
describe('VideoProgressSliderAlpha', function() {
xdescribe('VideoProgressSliderAlpha', function() {
var state, videoPlayer, videoProgressSlider, oldOTBD;
function initialize() {

2
common/lib/xmodule/xmodule/js/spec/videoalpha/video_quality_control_spec.js
View File

@@ -1,5 +1,5 @@
(function() {
describe('VideoQualityControlAlpha', function() {
xdescribe('VideoQualityControlAlpha', function() {
var state, videoControl, videoQualityControl, oldOTBD;
function initialize() {

2
common/lib/xmodule/xmodule/js/spec/videoalpha/video_speed_control_spec.js
View File

@@ -1,5 +1,5 @@
(function() {
describe('VideoSpeedControlAlpha', function() {
xdescribe('VideoSpeedControlAlpha', function() {
var state, videoPlayer, videoControl, videoSpeedControl;
function initialize() {

2
common/lib/xmodule/xmodule/js/spec/videoalpha/video_volume_control_spec.js
View File

@@ -1,5 +1,5 @@
(function() {
describe('VideoVolumeControlAlpha', function() {
xdescribe('VideoVolumeControlAlpha', function() {
var state, videoControl, videoVolumeControl, oldOTBD;
function initialize() {

21
common/lib/xmodule/xmodule/js/src/videoalpha/02_html5_video.js
View File

@@ -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>'
);
// 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 DOM element (to access the HTML5 video API), and set the player state to UNSTARTED.
// 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();

16
common/lib/xmodule/xmodule/js/src/videoalpha/03_video_player.js
View File

@@ -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();

18
common/lib/xmodule/xmodule/js/src/videoalpha/04_video_control.js
View File

@@ -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);

18
common/lib/xmodule/xmodule/js/src/videoalpha/05_video_quality_control.js
View File

@@ -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);
}

34
common/lib/xmodule/xmodule/js/src/videoalpha/06_video_progress_slider.js
View File

@@ -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);

18
common/lib/xmodule/xmodule/js/src/videoalpha/07_video_volume_control.js
View File

@@ -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() {

18
common/lib/xmodule/xmodule/js/src/videoalpha/08_video_speed_control.js
View File

@@ -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()) {

21
common/lib/xmodule/xmodule/js/src/videoalpha/09_video_caption.js
View File

@@ -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) {