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

Merge pull request #771 from edx/valera/fix_empty_captions_panel_no_captions

Browse Source 
Valera/fix empty captions panel no captions
This commit is contained in:
Valera Rozuvan
2013-08-28 07:24:56 -07:00
parent 3194e54400 0a110b672d
commit 869d09220c
3 changed files with 122 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,7 +53,8 @@
expect($.ajaxWithPrefix).toHaveBeenCalledWith({
url: videoCaption.captionURL(),
notifyOnError: false,
success: jasmine.any(Function)
success: jasmine.any(Function),
error: jasmine.any(Function),
});
});
});
@@ -126,6 +127,22 @@
expect(videoCaption.rendered).toBeFalsy();
});
});
describe('when no captions file was specified', function () {
beforeEach(function () {
loadFixtures('video_all.html');
// Unspecify the captions file.
$('#example').find('#video_id').data('sub', '');
state = new Video('#example');
videoCaption = state.videoCaption;
});
it('captions panel is not shown', function () {
expect(videoCaption.hideSubtitlesEl).toBeHidden();
});
});
});
describe('mouse movement', function() {
@@ -446,7 +463,7 @@
});
// Temporarily disabled due to intermittent failures
// Fails with error: "InvalidStateError: An attempt was made to
// Fails with error: "InvalidStateError: An attempt was made to
// use an object that is not, or is no longer, usable
// Expected 0 to equal 14.91."
// on Firefox

10
common/lib/xmodule/xmodule/js/src/video/01_initialize.js
View File

@@ -25,7 +25,9 @@ function (VideoPlayer) {
*
* Initialize module exports this function.
*
* @param {Object} state A place for all properties, and methods of Video.
* @param {object} state The object containg the state of the video player.
* All other modules, their parameters, public variables, etc. are
* available via this object.
* @param {DOM element} element Container of the entire Video DOM element.
*/
return function (state, element) {
@@ -40,10 +42,12 @@ function (VideoPlayer) {
/**
* @function _makeFunctionsPublic
*
* Functions which will be accessible via 'state' object. When called, these functions will get the 'state'
* Functions which will be accessible via 'state' object. When called,
* these functions will get the 'state'
* object as a context.
*
* @param {Object} state A place for all properties, and methods of Video.
* @param {object} state The object containg the state (properties,
* methods, modules) of the Video player.
*/
function _makeFunctionsPublic(state) {
state.setSpeed = _.bind(setSpeed, state);

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

@@ -6,13 +6,26 @@ define(
[],
function () {
// VideoCaption() function - what this module "exports".
/**
* @desc VideoCaption module exports a function.
*
* @type {function}
* @access public
*
* @param {object} state - The object containg the state of the video
* player. All other modules, their parameters, public variables, etc.
* are available via this object.
*
* @this {object} The global window object.
*
* @returns {undefined}
*/
return function (state) {
state.videoCaption = {};
_makeFunctionsPublic(state);
state.videoCaption.renderElements();
state.videoCaption.bindHandlers();
};
// ***************************************************************
@@ -57,28 +70,34 @@ function () {
// 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
// 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.
/**
* @desc 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.
*
* @type {function}
* @access public
*
* @this {object} - The object containg the state of the video
* player. All other modules, their parameters, public variables, etc.
* are available via this object.
*
* @returns {boolean}
* true: The function fethched captions successfully, and compltely
* rendered everything related to captions.
* false: The captions were not fetched. Nothing will be rendered,
* and the CC button will be hidden.
*/
function renderElements() {
this.videoCaption.loaded = false;
this.videoCaption.subtitlesEl = this.el.find('ol.subtitles');
this.videoCaption.hideSubtitlesEl = this.el.find('a.hide-subtitles');
this.el.find('.video-wrapper').after(this.videoCaption.subtitlesEl);
this.el.find('.video-controls .secondary-controls').append(this.videoCaption.hideSubtitlesEl);
this.videoCaption.fetchCaption();
this.videoCaption.setSubtitlesHeight();
if (this.videoType === 'html5') {
this.videoCaption.fadeOutTimeout = this.config.fadeOutTimeout;
this.videoCaption.subtitlesEl.addClass('html5');
this.captionHideTimeout = setTimeout(this.videoCaption.autoHideCaptions, this.videoCaption.fadeOutTimeout);
if (!this.videoCaption.fetchCaption()) {
this.videoCaption.hideCaptions(true);
this.videoCaption.hideSubtitlesEl.hide();
}
}
@@ -118,32 +137,69 @@ function () {
}
}
/**
* @desc Fetch the caption file specified by the user. Upn successful
* receival of the file, the captions will be rendered.
*
* @type {function}
* @access public
*
* @this {object} - The object containg the state of the video
* player. All other modules, their parameters, public variables, etc.
* are available via this object.
*
* @returns {boolean}
* true: The user specified a caption file. NOTE: if an error happens
* while the specified file is being retrieved (for example the
* file is missing on the server), this function will still return
* true.
* false: No caption file was specified, or an empty string was
* specified.
*/
function fetchCaption() {
var _this = this;
this.videoCaption.hideCaptions(this.hide_captions);
// Check whether the captions file was specified. This is the point
// where we either stop with the caption panel (so that a white empty
// panel to the right of the video will not be shown), or carry on
// further.
if (!this.youtubeId('1.0')) {
return;
return false;
}
// Fetch the captions file. If no file was specified, or if an error
// occurred, then we hide the captions panel, and the "CC" button
$.ajaxWithPrefix({
url: _this.videoCaption.captionURL(),
notifyOnError: false,
success: function(captions) {
success: function (captions) {
_this.videoCaption.captions = captions.text;
_this.videoCaption.start = captions.start;
_this.videoCaption.loaded = true;
if (onTouchBasedDevice()) {
_this.videoCaption.subtitlesEl.find('li').html(
gettext('Caption will be displayed when you start playing the video.')
gettext(
'Caption will be displayed when ' +
'you start playing the video.'
)
);
} else {
_this.videoCaption.renderCaption();
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('ERROR while fetching captions.');
console.log(
'STATUS:', textStatus + ', MESSAGE:', '' + errorThrown
);
_this.videoCaption.hideCaptions(true);
_this.videoCaption.hideSubtitlesEl.hide();
}
});
return true;
}
function captionURL() {
@@ -227,9 +283,24 @@ function () {
}
function renderCaption() {
var container,
var container = $('<ol>'),
_this = this;
container = $('<ol>');
this.el.find('.video-wrapper').after(this.videoCaption.subtitlesEl);
this.el.find('.video-controls .secondary-controls').append(this.videoCaption.hideSubtitlesEl);
this.videoCaption.setSubtitlesHeight();
if (this.videoType === 'html5') {
this.videoCaption.fadeOutTimeout = this.config.fadeOutTimeout;
this.videoCaption.subtitlesEl.addClass('html5');
this.captionHideTimeout = setTimeout(this.videoCaption.autoHideCaptions, this.videoCaption.fadeOutTimeout);
}
this.videoCaption.hideCaptions(this.hide_captions);
this.videoCaption.bindHandlers();
$.each(this.videoCaption.captions, function(index, text) {
var liEl = $('<li>');