Skip to content

Commit

Permalink
Work in progress.
Browse files Browse the repository at this point in the history
  • Loading branch information
Valera Rozuvan committed Jun 28, 2013
1 parent 296ee78 commit 1a35a5e
Show file tree
Hide file tree
Showing 11 changed files with 94 additions and 39 deletions.
21 changes: 16 additions & 5 deletions common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@ define(
'videoalpha/display/html5_video.js',
[],
function () {
var HTML5Video;

HTML5Video = {};
var HTML5Video = {};

HTML5Video.Player = (function () {
Player.prototype.callStateChangeCallback = function () {
Expand Down Expand Up @@ -129,9 +127,21 @@ function () {
// If el is string, we assume it is an ID of a DOM element. Get the element, and check that the ID
// really belongs to an element. If we didn't get a DOM element, return. At this stage, nothing will
// break because other parts of the video player are waiting for 'onReady' callback to be called.

// REFACTOR: Use .length === 0

this.el = $(el);
// REFACTOR: Simplify chck.
if (this.el.length === 0) {
return;
}




if (typeof el === 'string') {
this.el = $(el);

// REFACTOR: Simplify chck.
if (this.el.length === 0) {
return;
}
Expand All @@ -140,7 +150,7 @@ function () {
} else {
return;
}

// A simple test to see that the 'config' is a normal object.
if ($.isPlainObject(config)) {
this.config = config;
Expand Down Expand Up @@ -294,6 +304,7 @@ function () {
}
}());

// REFACTOR: Doc.
HTML5Video.PlayerState = {
'UNSTARTED': -1,
'ENDED': 0,
Expand Down
36 changes: 22 additions & 14 deletions common/lib/xmodule/xmodule/js/src/videoalpha/display/initialize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,20 +64,20 @@ function (VideoPlayer) {
// We store all settings passed to us by the server in one place. These are "read only", so don't
// modify them. All variable content lives in 'state' object.
state.config = {
'element': element,
element: element,

'start': state.el.data('start'),
'end': state.el.data('end'),
start: state.el.data('start'),
end: state.el.data('end'),

'caption_data_dir': state.el.data('caption-data-dir'),
'caption_asset_path': state.el.data('caption-asset-path'),
'show_captions': (state.el.data('show-captions').toString().toLowerCase() === 'true'),
'youtubeStreams': state.el.data('streams'),
caption_data_dir: state.el.data('caption-data-dir'),
caption_asset_path: state.el.data('caption-asset-path'),
show_captions: (state.el.data('show-captions').toString().toLowerCase() === 'true'),
youtubeStreams: state.el.data('streams'),

'sub': state.el.data('sub'),
'mp4Source': state.el.data('mp4-source'),
'webmSource': state.el.data('webm-source'),
'oggSource': state.el.data('ogg-source')
sub: state.el.data('sub'),
mp4Source: state.el.data('mp4-source'),
webmSource: state.el.data('webm-source'),
oggSource: state.el.data('ogg-source')
};

// Try to parse YouTube stream ID's. If
Expand Down Expand Up @@ -149,14 +149,14 @@ function (VideoPlayer) {
// in a browser that doesn't fully support HTML5. When we have this setting in cookies, we can select
// the proper mode from the start (not having to change mode later on).
(function (currentPlayerMode) {
if ((currentPlayerMode !== 'html5') && (currentPlayerMode !== 'flash')) {
if ((currentPlayerMode === 'html5') || (currentPlayerMode === 'flash')) {
state.currentPlayerMode = currentPlayerMode;
} else {
$.cookie('current_player_mode', 'html5', {
'expires': 3650,
'path': '/'
});
state.currentPlayerMode = 'html5';
} else {
state.currentPlayerMode = currentPlayerMode;
}
}($.cookie('current_player_mode')));

Expand Down Expand Up @@ -255,6 +255,14 @@ function (VideoPlayer) {
}

function checkForNativeFunctions() {
// REFACTOR:
// 1.) IE8 doc.
// 2.) Move to separate file.
// 3.) Write about a generic soluction system wide.

//
// IE browser supports Function.bind() only starting with version 8.
//
// The bind function is a recent addition to ECMA-262, 5th edition; as such it may not be present in all
// browsers. You can partially work around this by inserting the following code at the beginning of your
// scripts, allowing use of much of the functionality of bind() in implementations that do not natively support
Expand Down
36 changes: 27 additions & 9 deletions common/lib/xmodule/xmodule/js/src/videoalpha/display/video_caption.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ function () {

fetchCaption(state);

// REFACTOR. Const.
if (state.videoType === 'html5') {
state.videoCaption.fadeOutTimeout = 1400;

Expand All @@ -79,6 +80,8 @@ function () {
function bindHandlers(state) {
$(window).bind('resize', state.videoCaption.resize);
state.videoCaption.hideSubtitlesEl.click(state.videoCaption.toggle);

// REFACTOR: Use .on()
state.videoCaption.subtitlesEl.mouseenter(
state.videoCaption.onMouseEnter
).mouseleave(
Expand Down Expand Up @@ -134,6 +137,8 @@ function () {

this.captionsShowLock = true;

// REFACTOR.

if (this.captionState === 'invisible') {
this.videoCaption.subtitlesEl.show();
this.captionState = 'visible';
Expand Down Expand Up @@ -166,6 +171,7 @@ function () {

_this = this;

// REFACTOR.
this.videoCaption.subtitlesEl.fadeOut(1000, function () {
_this.captionState = 'invisible';
});
Expand All @@ -176,6 +182,7 @@ function () {
'maxHeight': this.videoCaption.captionHeight()
});

// REFACTOR: Chain.
this.videoCaption.subtitlesEl.find('.spacing:first').height(this.videoCaption.topSpacingHeight());
this.videoCaption.subtitlesEl.find('.spacing:last').height(this.videoCaption.bottomSpacingHeight());

Expand All @@ -187,6 +194,7 @@ function () {
clearTimeout(this.videoCaption.frozen);
}

// REFACTOR.
this.videoCaption.frozen = setTimeout(this.videoCaption.onMouseLeave, 10000);
}

Expand All @@ -207,34 +215,43 @@ function () {
}

function renderCaption() {
var container, _this;

_this = this;
var container, _this = this;
container = $('<ol>');

$.each(this.videoCaption.captions, function(index, text) {
// REFACTOR: Use .data()
container.append($('<li>').html(text).attr({
'data-index': index,
'data-start': _this.videoCaption.start[index]
}));
});

// REFACTOR: Chain.
this.videoCaption.subtitlesEl.html(container.html());
this.videoCaption.subtitlesEl.find('li[data-index]').on('click', this.videoCaption.seekPlayer);
this.videoCaption.subtitlesEl.prepend(
this.videoCaption.subtitlesEl
.prepend(
$('<li class="spacing">').height(this.videoCaption.topSpacingHeight())
).append(
)
.append(
$('<li class="spacing">').height(this.videoCaption.bottomSpacingHeight())
);

this.videoCaption.rendered = true;
}

function scrollCaption() {
if (!this.videoCaption.frozen && this.videoCaption.subtitlesEl.find('.current:first').length) {
this.videoCaption.subtitlesEl.scrollTo(this.videoCaption.subtitlesEl.find('.current:first'), {
'offset': -this.videoCaption.calculateOffset(this.videoCaption.subtitlesEl.find('.current:first'))
});
// REFACTOR: Cache current:first
if (
!this.videoCaption.frozen &&
this.videoCaption.subtitlesEl.find('.current:first').length
) {
this.videoCaption.subtitlesEl.scrollTo(
this.videoCaption.subtitlesEl.find('.current:first'),
{
'offset': -this.videoCaption.calculateOffset(this.videoCaption.subtitlesEl.find('.current:first'))
}
);
}
}

Expand Down Expand Up @@ -350,6 +367,7 @@ function () {
}

function captionHeight() {
// REFACTOR: Use property instead of class.
if (this.el.hasClass('fullscreen')) {
return $(window).height() - this.el.find('.video-controls').height();
} else {
Expand Down
13 changes: 10 additions & 3 deletions common/lib/xmodule/xmodule/js/src/videoalpha/display/video_control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function () {
// 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) {
var el, qTipConfig;
var qTipConfig;

state.videoControl.el = state.el.find('.video-controls');
// state.videoControl.el.append(el);
Expand Down Expand Up @@ -70,6 +70,8 @@ function () {
}

if (state.videoType === 'html5') {
// REFACTOR: constants move to initialize()

state.videoControl.fadeOutTimeout = 1400;

state.videoControl.el.addClass('html5');
Expand Down Expand Up @@ -105,6 +107,9 @@ function () {
this.controlShowLock = true;

// Refactor: separate UI state in object. No code duplication.
// REFACTOR:
// 1.) Chain jQuery calls.
// 2.) Drop out common code.
if (this.controlState === 'invisible') {
this.videoControl.el.show();
this.controlState = 'visible';
Expand Down Expand Up @@ -143,6 +148,7 @@ function () {
}

function play() {
// REFACTOR: this.videoControl.playPauseState should be bool.
this.videoControl.playPauseEl.removeClass('play').addClass('pause').attr('title', 'Pause');
this.videoControl.playPauseState = 'playing';
}
Expand All @@ -168,17 +174,18 @@ function () {
if (this.videoControl.fullScreenState) {
this.videoControl.fullScreenState = false;
this.el.removeClass('fullscreen');
this.videoControl.fullScreenEl.attr('title', 'Fill browser');
this.videoControl.fullScreenEl.attr('title', 'Fullscreen');
} else {
this.videoControl.fullScreenState = true;
this.el.addClass('fullscreen');
this.videoControl.fullScreenEl.attr('title', 'Exit fill browser');
this.videoControl.fullScreenEl.attr('title', 'Exit fullscreen');
}

this.trigger(['videoCaption', 'resize'], null);
}

function exitFullScreen(event) {
// REFACTOR: Add variable instead of class.
if ((this.el.hasClass('fullscreen')) && (event.keyCode === 27)) {
this.videoControl.toggleFullScreen(event);
}
Expand Down
2 changes: 2 additions & 0 deletions common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,8 @@ function (HTML5Video) {

function onReady() {
var availablePlaybackRates, baseSpeedSubs, _this;

// REFACTOR: Check if logic.

availablePlaybackRates = this.videoPlayer.player.getAvailablePlaybackRates();
if ((this.currentPlayerMode === 'html5') && (this.videoType === 'youtube')) {
Expand Down
6 changes: 2 additions & 4 deletions common/lib/xmodule/xmodule/js/src/videoalpha/display/video_progress_slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@ function () {
function onSlide(event, ui) {
this.videoProgressSlider.frozen = true;
this.videoProgressSlider.updateTooltip(ui.value);

this.trigger(['videoPlayer', 'onSeek'], ui.value);
}

Expand All @@ -106,9 +105,7 @@ function () {
}

function onStop(event, ui) {
var _this;

_this = this;
var _this = this;

this.videoProgressSlider.frozen = true;

Expand All @@ -125,6 +122,7 @@ function () {

function updatePlayTime(params) {
if ((this.videoProgressSlider.slider) && (!this.videoProgressSlider.frozen)) {
// REFACTOR: Check if you can chain.
this.videoProgressSlider.slider.slider('option', 'max', params.duration);
this.videoProgressSlider.slider.slider('value', params.time);
}
Expand Down
3 changes: 3 additions & 0 deletions common/lib/xmodule/xmodule/js/src/videoalpha/display/video_quality_control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ function () {
state.videoQualityControl.quality = null;

if (!onTouchBasedDevice()) {
// REFACTOR: Move qtip config to state.config
state.videoQualityControl.el.qtip({
'position': {
'my': 'top right',
Expand All @@ -69,6 +70,7 @@ function () {
function onQualityChange(value) {
this.videoQualityControl.quality = value;

// refactor: Move constants to state.config.
if ((value === 'hd720') || (value === 'hd1080') || (value === 'highres')) {
this.videoQualityControl.el.addClass('active');
} else {
Expand All @@ -83,6 +85,7 @@ function () {

_ref = this.videoQualityControl.quality;

// refactor: Move constants to state.config.
if ((_ref === 'hd720') || (_ref === 'hd1080') || (_ref === 'highres')) {
newQuality = 'large';
} else {
Expand Down
11 changes: 8 additions & 3 deletions common/lib/xmodule/xmodule/js/src/videoalpha/display/video_speed_control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ function () {
state.videoControl.secondaryControlsEl.prepend(state.videoSpeedControl.el);

$.each(state.videoSpeedControl.speeds, function(index, speed) {
var link;

link = $('<a>').attr({
// REFACTOR: Move all HTML into one function call.
var link = $('<a>').attr({
'href': '#'
}).html('' + speed + 'x');

// REFACTOR: Use jQuery .data()
state.videoSpeedControl.videoSpeedsEl.prepend($('<li>').attr('data-speed', speed).html(link));
});

Expand All @@ -68,6 +68,7 @@ function () {
$(this).toggleClass('open');
});
} else {
// REFACTOR: Chain.
state.videoSpeedControl.el.on('mouseenter', function() {
$(this).addClass('open');
});
Expand All @@ -90,6 +91,7 @@ function () {
// ***************************************************************

function setSpeed(speed) {
// REFACTOR: Use chaining.
this.videoSpeedControl.videoSpeedsEl.find('li').removeClass('active');
this.videoSpeedControl.videoSpeedsEl.find("li[data-speed='" + speed + "']").addClass('active');
this.videoSpeedControl.el.find('p.active').html('' + speed + 'x');
Expand All @@ -98,17 +100,20 @@ function () {
function changeVideoSpeed(event) {
event.preventDefault();

// REFACTOR: Cache parent el.
if (!$(event.target).parent().hasClass('active')) {
this.videoSpeedControl.currentSpeed = $(event.target).parent().data('speed');

this.videoSpeedControl.setSpeed(
// To meet the API expected format.
parseFloat(this.videoSpeedControl.currentSpeed).toFixed(2).replace(/\.00$/, '.0')
);

this.trigger(['videoPlayer', 'onSpeedChange'], this.videoSpeedControl.currentSpeed);
}
}

// REFACTOR.
function reRender(params /*newSpeeds, currentSpeed*/) {
var _this;

Expand Down
Loading

0 comments on commit 1a35a5e

Please sign in to comment.