Skip to content

Commit

Permalink
Corrected all isues found during refactoring #2.
Browse files Browse the repository at this point in the history
  • Loading branch information
Valera Rozuvan authored and jmclaus committed Jun 19, 2013
1 parent a2045ff commit 02f913a
Show file tree
Hide file tree
Showing 12 changed files with 203 additions and 283 deletions.
1 change: 0 additions & 1 deletion common/lib/xmodule/xmodule/js/src/videoalpha/display/.gitignore
View file

This file was deleted.

70 changes: 29 additions & 41 deletions .../js/src/videoalpha/display/html5_video.js → .../xmodule/js/src/videoalpha/html5_video.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function () {
Player.prototype.callStateChangeCallback = function () {
if ($.isFunction(this.config.events.onStateChange)) {
this.config.events.onStateChange({
'data': this.playerState
data: this.playerState
});
}
};
Expand Down Expand Up @@ -96,61 +96,47 @@ function () {
*
* config = {
*
* 'videoSources': {}, // An object with properties being video sources. The property name is the
* videoSources: {}, // An object with properties being video sources. The property name is the
* // video format of the source. Supported video formats are: 'mp4', 'webm', and
* // 'ogg'.
*
* 'playerVars': { // Object's properties identify player parameters.
* 'start': 0, // Possible values: positive integer. Position from which to start playing the
* playerVars: { // Object's properties identify player parameters.
* start: 0, // Possible values: positive integer. Position from which to start playing the
* // video. Measured in seconds. If value is non-numeric, or 'start' property is
* // not specified, the video will start playing from the beginning.
*
* 'end': null // Possible values: positive integer. Position when to stop playing the
* end: null // Possible values: positive integer. Position when to stop playing the
* // video. Measured in seconds. If value is null, or 'end' property is not
* // specified, the video will end playing at the end.
*
* },
*
* 'events': { // Object's properties identify the events that the API fires, and the
* events: { // Object's properties identify the events that the API fires, and the
* // functions (event listeners) that the API will call when those events occur.
* // If value is null, or property is not specified, then no callback will be
* // called for that event.
*
* 'onReady': null,
* 'onStateChange': null
* onReady: null,
* onStateChange: null
* }
* }
*/
function Player(el, config) {
var sourceStr, _this;

// 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.
// Initially we assume that el is a DOM element. If jQuery selector fails to select something, we
// assume that el is an ID of a DOM element. We try to select by ID. If jQuery fails this time,
// we return. Nothing breaks because the player 'onReady' event will never be fired.

this.el = $(el);
if (this.el.length === 0) {
this.el = $('#' + el);

if (this.el.length === 0) {
return;
}
} else if (el instanceof jQuery) {
this.el = el;
} else {
return;
}

// A simple test to see that the 'config' is a normal object.
if ($.isPlainObject(config)) {
this.config = config;
Expand All @@ -165,9 +151,9 @@ function () {

// From the start, all sources are empty. We will populate this object below.
sourceStr = {
'mp4': ' ',
'webm': ' ',
'ogg': ' '
mp4: ' ',
webm: ' ',
ogg: ' '
};

// Will be used in inner functions to point to the current object.
Expand Down Expand Up @@ -304,14 +290,16 @@ function () {
}
}());

// REFACTOR: Doc.
// The YouTube API presents several constants which describe the player's state at a given moment.
// HTML5Video API will copy these constats so that code which uses both the YouTube API and this API
// doesn't have to change.
HTML5Video.PlayerState = {
'UNSTARTED': -1,
'ENDED': 0,
'PLAYING': 1,
'PAUSED': 2,
'BUFFERING': 3,
'CUED': 5
UNSTARTED: -1,
ENDED: 0,
PLAYING: 1,
PAUSED: 2,
BUFFERING: 3,
CUED: 5
};

// HTML5Video object - what this module exports.
Expand Down
76 changes: 22 additions & 54 deletions ...e/js/src/videoalpha/display/initialize.js → ...e/xmodule/js/src/videoalpha/initialize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ function (VideoPlayer) {
* @param {DOM element} element Container of the entire Video Alpha DOM element.
*/
return function (state, element) {
checkForNativeFunctions();
makeFunctionsPublic(state);
renderElements(state, element);
};
Expand Down Expand Up @@ -57,6 +56,9 @@ function (VideoPlayer) {
function renderElements(state, element) {
var onPlayerReadyFunc;

// This is used in places where we instead would have to check if an element has a CSS class 'fullscreen'.
state.isFullScreen = false;

// The parent element of the video, and the ID.
state.el = $(element).find('.videoalpha');
state.id = state.el.attr('id').replace(/video_/, '');
Expand All @@ -77,7 +79,11 @@ function (VideoPlayer) {
sub: state.el.data('sub'),
mp4Source: state.el.data('mp4-source'),
webmSource: state.el.data('webm-source'),
oggSource: state.el.data('ogg-source')
oggSource: state.el.data('ogg-source'),

fadeOutTimeout: 1400,

availableQualities: ['hd720', 'hd1080', 'highres']
};

// Try to parse YouTube stream ID's. If
Expand All @@ -95,9 +101,9 @@ function (VideoPlayer) {
parseVideoSources(
state,
{
'mp4': state.config.mp4Source,
'webm': state.config.webmSource,
'ogg': state.config.oggSource
mp4: state.config.mp4Source,
webm: state.config.webmSource,
ogg: state.config.oggSource
}
);

Expand Down Expand Up @@ -136,8 +142,8 @@ function (VideoPlayer) {
state.hide_captions = true;

$.cookie('hide_captions', state.hide_captions, {
'expires': 3650,
'path': '/'
expires: 3650,
path: '/'
});

state.el.addClass('closed');
Expand All @@ -153,8 +159,8 @@ function (VideoPlayer) {
state.currentPlayerMode = currentPlayerMode;
} else {
$.cookie('current_player_mode', 'html5', {
'expires': 3650,
'path': '/'
expires: 3650,
path: '/'
});
state.currentPlayerMode = 'html5';
}
Expand Down Expand Up @@ -219,7 +225,11 @@ function (VideoPlayer) {
// Take the HTML5 sources (URLs of videos), and make them available explictly for each type
// of video format (mp4, webm, ogg).
function parseVideoSources(state, sources) {
state.html5Sources = { 'mp4': null, 'webm': null, 'ogg': null };
state.html5Sources = {
mp4: null,
webm: null,
ogg: null
};

$.each(sources, function (name, source) {
if (source && source.length) {
Expand Down Expand Up @@ -254,48 +264,6 @@ function (VideoPlayer) {
state.setSpeed($.cookie('video_speed'));
}

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
// it.
//
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
var aArgs, fToBind, fNOP, fBound;

if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}

aArgs = Array.prototype.slice.call(arguments, 1);
fToBind = this;
fNOP = function () {};
fBound = function () {
return fToBind.apply(
this instanceof fNOP && oThis ? this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments))
);
};

fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();

return fBound;
};
}
}

// ***************************************************************
// Public functions start here.
// These are available via the 'state' object. Their context ('this' keyword) is the 'state' object.
Expand All @@ -311,8 +279,8 @@ function (VideoPlayer) {

if (updateCookie) {
$.cookie('video_speed', this.speed, {
'expires': 3650,
'path': '/'
expires: 3650,
path: '/'
});
}
}
Expand Down
Loading

0 comments on commit 02f913a

Please sign in to comment.