Skip to content

E
edx-platform
Commit 2f572a86 by polesye
Options

Refactor video caption module.

parent 668134de
Showing with 496 additions and 407 deletions
common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js
......@@ -123,28 +123,16 @@
it('bind the hide caption button', function () {
state = jasmine.initializePlayer();
expect($('.hide-subtitles')).toHandleWith(
'click', state.videoCaption.toggle
);
expect($('.hide-subtitles')).toHandle('click');
});
it('bind the mouse movement', function () {
state = jasmine.initializePlayer();
expect($('.subtitles')).toHandleWith(
'mouseover', state.videoCaption.onMouseEnter
);
expect($('.subtitles')).toHandleWith(
'mouseout', state.videoCaption.onMouseLeave
);
expect($('.subtitles')).toHandleWith(
'mousemove', state.videoCaption.onMovement
);
expect($('.subtitles')).toHandleWith(
'mousewheel', state.videoCaption.onMovement
);
expect($('.subtitles')).toHandleWith(
'DOMMouseScroll', state.videoCaption.onMovement
);
expect($('.subtitles')).toHandle('mouseover');
expect($('.subtitles')).toHandle('mouseout');
expect($('.subtitles')).toHandle('mousemove');
expect($('.subtitles')).toHandle('mousewheel');
expect($('.subtitles')).toHandle('DOMMouseScroll');
});
it('bind the scroll', function () {
......@@ -859,7 +847,7 @@
runs(function () {
videoControl = state.videoControl;
$('.subtitles li[data-index=1]').addClass('current');
state.videoCaption.resize();
state.videoCaption.onResize();
});
});
......
common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
......@@ -26,7 +26,6 @@ function (VideoPlayer) {
describe('always', function () {
beforeEach(function () {
state = jasmine.initializePlayer();
state.videoEl = $('video, iframe');
});
......@@ -211,7 +210,7 @@ function (VideoPlayer) {
state.videoEl = $('video, iframe');
spyOn(state.videoControl, 'pause').andCallThrough();
spyOn(state.videoCaption, 'pause').andCallThrough();
spyOn($.fn, 'trigger').andCallThrough();
state.videoPlayer.onStateChange({
data: YT.PlayerState.PAUSED
......@@ -223,7 +222,7 @@ function (VideoPlayer) {
});
it('pause the video caption', function () {
expect(state.videoCaption.pause).toHaveBeenCalled();
expect($.fn.trigger).toHaveBeenCalledWith('pause', {});
});
});
......@@ -245,7 +244,7 @@ function (VideoPlayer) {
spyOn(state.videoPlayer, 'log').andCallThrough();
spyOn(window, 'setInterval').andReturn(100);
spyOn(state.videoControl, 'play');
spyOn(state.videoCaption, 'play');
spyOn($.fn, 'trigger').andCallThrough();
state.videoPlayer.onStateChange({
data: YT.PlayerState.PLAYING
......@@ -281,7 +280,7 @@ function (VideoPlayer) {
});
it('play the video caption', function () {
expect(state.videoCaption.play).toHaveBeenCalled();
expect($.fn.trigger).toHaveBeenCalledWith('play', {});
});
});
......@@ -295,7 +294,7 @@ function (VideoPlayer) {
spyOn(state.videoPlayer, 'log').andCallThrough();
spyOn(state.videoControl, 'pause').andCallThrough();
spyOn(state.videoCaption, 'pause').andCallThrough();
spyOn($.fn, 'trigger').andCallThrough();
state.videoPlayer.onStateChange({
data: YT.PlayerState.PLAYING
......@@ -323,7 +322,7 @@ function (VideoPlayer) {
});
it('pause the video caption', function () {
expect(state.videoCaption.pause).toHaveBeenCalled();
expect($.fn.trigger).toHaveBeenCalledWith('pause', {});
});
});
......@@ -334,7 +333,7 @@ function (VideoPlayer) {
state.videoEl = $('video, iframe');
spyOn(state.videoControl, 'pause').andCallThrough();
spyOn(state.videoCaption, 'pause').andCallThrough();
spyOn($.fn, 'trigger').andCallThrough();
state.videoPlayer.onStateChange({
data: YT.PlayerState.ENDED
......@@ -346,7 +345,7 @@ function (VideoPlayer) {
});
it('pause the video caption', function () {
expect(state.videoCaption.pause).toHaveBeenCalled();
expect($.fn.trigger).toHaveBeenCalledWith('ended', {});
});
});
});
......@@ -709,6 +708,7 @@ function (VideoPlayer) {
describe('updatePlayTime with invalid endTime', function () {
beforeEach(function () {
state = {
el: $('#video_id'),
videoPlayer: {
duration: function () {
// The video will be 60 seconds long.
......@@ -756,10 +756,7 @@ function (VideoPlayer) {
describe('when the video player is not full screen', function () {
beforeEach(function () {
state = jasmine.initializePlayer();
state.videoEl = $('video, iframe');
spyOn(state.videoCaption, 'resize').andCallThrough();
spyOn($.fn, 'trigger').andCallThrough();
state.videoControl.toggleFullScreen(jQuery.Event('click'));
});
......@@ -774,7 +771,7 @@ function (VideoPlayer) {
});
it('tell VideoCaption to resize', function () {
expect(state.videoCaption.resize).toHaveBeenCalled();
expect($.fn.trigger).toHaveBeenCalledWith('fullscreen', [true]);
expect(state.resizer.setMode).toHaveBeenCalledWith('both');
expect(state.resizer.delta.substract).toHaveBeenCalled();
});
......@@ -783,11 +780,8 @@ function (VideoPlayer) {
describe('when the video player already full screen', function () {
beforeEach(function () {
state = jasmine.initializePlayer();
state.videoEl = $('video, iframe');
spyOn(state.videoCaption, 'resize').andCallThrough();
spyOn($.fn, 'trigger').andCallThrough();
state.el.addClass('video-fullscreen');
state.videoControl.fullScreenState = true;
state.videoControl.isFullScreen = true;
......@@ -806,7 +800,7 @@ function (VideoPlayer) {
});
it('tell VideoCaption to resize', function () {
expect(state.videoCaption.resize).toHaveBeenCalled();
expect($.fn.trigger).toHaveBeenCalledWith('fullscreen', [false]);
expect(state.resizer.setMode)
.toHaveBeenCalledWith('width');
expect(state.resizer.delta.reset).toHaveBeenCalled();
......
common/lib/xmodule/xmodule/js/src/video/03_video_player.js
......@@ -223,20 +223,20 @@ function (HTML5Video, Resizer) {
container: state.container
})
.callbacks.once(function() {
state.trigger('videoCaption.resize', null);
state.el.trigger('caption:resize');
})
.setMode('width');
// Update captions size when controls becomes visible on iPad or Android
if (/iPad|Android/i.test(state.isTouch[0])) {
state.el.on('controls:show', function () {
state.trigger('videoCaption.resize', null);
state.el.trigger('caption:resize');
});
}
$(window).on('resize', _.debounce(function () {
state.trigger('videoControl.updateControlsHeight', null);
state.trigger('videoCaption.resize', null);
state.el.trigger('caption:resize');
state.resizer.align();
}, 100));
}
......@@ -271,7 +271,7 @@ function (HTML5Video, Resizer) {
});
_updateVcrAndRegion(state, true);
state.trigger('videoCaption.fetchCaption', null);
state.el.trigger('caption:fetch');
state.resizer.setElement(state.el.find('iframe')).align();
}
......@@ -447,10 +447,6 @@ function (HTML5Video, Resizer) {
end: true
});
if (this.config.showCaptions) {
this.trigger('videoCaption.pause', null);
}
if (this.videoPlayer.skipOnEndedStartEndReset) {
this.videoPlayer.skipOnEndedStartEndReset = undefined;
}
......@@ -475,11 +471,6 @@ function (HTML5Video, Resizer) {
delete this.videoPlayer.updateInterval;
this.trigger('videoControl.pause', null);
if (this.config.showCaptions) {
this.trigger('videoCaption.pause', null);
}
this.saveState(true);
this.el.trigger('pause', arguments);
}
......@@ -501,17 +492,10 @@ function (HTML5Video, Resizer) {
}
this.trigger('videoControl.play', null);
this.trigger('videoProgressSlider.notifyThroughHandleEnd', {
end: false
});
if (this.config.showCaptions) {
this.trigger('videoCaption.play', null);
}
this.videoPlayer.ready();
this.el.trigger('play', arguments);
}
......@@ -803,7 +787,7 @@ function (HTML5Video, Resizer) {
}
);
this.trigger('videoCaption.updatePlayTime', time);
this.el.trigger('caption:update', [time]);
}
function isEnded() {
......
common/lib/xmodule/xmodule/js/src/video/04_video_control.js
......@@ -277,7 +277,6 @@ function () {
.attr('title', text)
.text(text);
this.trigger('videoCaption.resize', null);
this.el.trigger('fullscreen', [this.isFullScreen]);
}
......
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
......@@ -5,230 +5,198 @@ define(
'video/09_video_caption.js',
['video/00_sjson.js', 'video/00_async_process.js'],
function (Sjson, AsyncProcess) {
/**
* @desc VideoCaption module exports a function.
*
* @type {function}
* @access public
*
* @param {object} state - The object containg the state of the video
* @param {object} state - The object containing 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}
* @returns {jquery Promise}
*/
return function (state) {
state.videoCaption = {};
_makeFunctionsPublic(state);
state.videoCaption.renderElements();
var VideoCaption = function (state) {
if (!(this instanceof VideoCaption)) {
return new VideoCaption(state);
}
return $.Deferred().resolve().promise();
};
this.state = state;
this.state.videoCaption = this;
this.renderElements();
// ***************************************************************
// Private functions start here.
// ***************************************************************
// 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) {
var methodsDict = {
addPaddings: addPaddings,
bindHandlers: bindHandlers,
bottomSpacingHeight: bottomSpacingHeight,
calculateOffset: calculateOffset,
captionBlur: captionBlur,
captionClick: captionClick,
captionFocus: captionFocus,
captionHeight: captionHeight,
captionKeyDown: captionKeyDown,
captionMouseDown: captionMouseDown,
captionMouseOverOut: captionMouseOverOut,
fetchCaption: fetchCaption,
fetchAvailableTranslations: fetchAvailableTranslations,
hideCaptions: hideCaptions,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onMovement: onMovement,
pause: pause,
play: play,
renderCaption: renderCaption,
renderElements: renderElements,
renderLanguageMenu: renderLanguageMenu,
resize: resize,
scrollCaption: scrollCaption,
seekPlayer: seekPlayer,
setSubtitlesHeight: setSubtitlesHeight,
toggle: toggle,
topSpacingHeight: topSpacingHeight,
updatePlayTime: updatePlayTime
return $.Deferred().resolve().promise();
};
state.bindTo(methodsDict, state.videoCaption, 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().
// ***************************************************************
VideoCaption.prototype = {
/**
* @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.
* @desc Initiate rendering of elements, and set their initial configuration.
*
* @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() {
var Caption = this.videoCaption,
languages = this.config.transcriptLanguages;
renderElements: function () {
var state = this.state,
languages = this.state.config.transcriptLanguages;
Caption.loaded = false;
Caption.subtitlesEl = this.el.find('ol.subtitles');
Caption.container = this.el.find('.lang');
Caption.hideSubtitlesEl = this.el.find('a.hide-subtitles');
this.loaded = false;
this.subtitlesEl = state.el.find('ol.subtitles');
this.container = state.el.find('.lang');
this.hideSubtitlesEl = state.el.find('a.hide-subtitles');
if (_.keys(languages).length) {
Caption.renderLanguageMenu(languages);
this.renderLanguageMenu(languages);
if (!Caption.fetchCaption()) {
Caption.hideCaptions(true);
Caption.hideSubtitlesEl.hide();
if (!this.fetchCaption()) {
this.hideCaptions(true);
this.hideSubtitlesEl.hide();
}
} else {
Caption.hideCaptions(true, false);
Caption.hideSubtitlesEl.hide();
}
this.hideCaptions(true, false);
this.hideSubtitlesEl.hide();
}
},
// function bindHandlers()
//
// Bind any necessary function callbacks to DOM events (click,
// mousemove, etc.).
function bindHandlers() {
/**
* @desc Bind any necessary function callbacks to DOM events (click,
* mousemove, etc.).
*
*/
bindHandlers: function () {
var self = this,
Caption = this.videoCaption,
state = this.state,
events = [
'mouseover', 'mouseout', 'mousedown', 'click', 'focus', 'blur',
'keydown'
].join(' ');
Caption.hideSubtitlesEl.on({
'click': Caption.toggle
});
Caption.subtitlesEl
// Change context to VideoCaption of event handlers using `bind`.
this.hideSubtitlesEl.on('click', this.toggle.bind(this));
this.subtitlesEl
.on({
mouseenter: Caption.onMouseEnter,
mouseleave: Caption.onMouseLeave,
mousemove: Caption.onMovement,
mousewheel: Caption.onMovement,
DOMMouseScroll: Caption.onMovement
mouseenter: this.onMouseEnter.bind(this),
mouseleave: this.onMouseLeave.bind(this),
mousemove: this.onMovement.bind(this),
mousewheel: this.onMovement.bind(this),
DOMMouseScroll: this.onMovement.bind(this)
})
.on(events, 'li[data-index]', function (event) {
switch (event.type) {
case 'mouseover':
case 'mouseout':
Caption.captionMouseOverOut(event);
self.captionMouseOverOut(event);
break;
case 'mousedown':
Caption.captionMouseDown(event);
self.captionMouseDown(event);
break;
case 'click':
Caption.captionClick(event);
self.captionClick(event);
break;
case 'focusin':
Caption.captionFocus(event);
self.captionFocus(event);
break;
case 'focusout':
Caption.captionBlur(event);
self.captionBlur(event);
break;
case 'keydown':
Caption.captionKeyDown(event);
self.captionKeyDown(event);
break;
}
});
if (Caption.showLanguageMenu) {
Caption.container.on({
mouseenter: onContainerMouseEnter,
mouseleave: onContainerMouseLeave
if (this.showLanguageMenu) {
this.container.on({
mouseenter: this.onContainerMouseEnter,
mouseleave: this.onContainerMouseLeave
});
}
if ((this.videoType === 'html5') && (this.config.autohideHtml5)) {
Caption.subtitlesEl.on('scroll', this.videoControl.showControls);
}
state.el
.on({
'caption:fetch': this.fetchCaption.bind(this),
'caption:resize': this.onResize.bind(this),
'caption:update': function (event, time) {
self.updatePlayTime(time);
},
'ended': this.pause,
'fullscreen': this.onResize.bind(this),
'pause': this.pause,
'play': this.play,
});
if ((state.videoType === 'html5') && (state.config.autohideHtml5)) {
this.subtitlesEl.on('scroll', state.videoControl.showControls);
}
},
function onContainerMouseEnter(event) {
/**
* @desc Opens language menu.
*
* @param {jquery Event} event
*/
onContainerMouseEnter: function (event) {
event.preventDefault();
$(event.currentTarget).addClass('open');
}
},
function onContainerMouseLeave(event) {
/**
* @desc Closes language menu.
*
* @param {jquery Event} event
*/
onContainerMouseLeave: function (event) {
event.preventDefault();
$(event.currentTarget).removeClass('open');
}
},
function onMouseEnter() {
if (this.videoCaption.frozen) {
clearTimeout(this.videoCaption.frozen);
/**
* @desc Freezes moving of captions when mouse is over them.
*
* @param {jquery Event} event
*/
onMouseEnter: function (event) {
if (this.frozen) {
clearTimeout(this.frozen);
}
this.videoCaption.frozen = setTimeout(
this.videoCaption.onMouseLeave,
this.config.captionsFreezeTime
this.frozen = setTimeout(
this.onMouseLeave,
this.state.config.captionsFreezeTime
);
}
},
function onMouseLeave() {
if (this.videoCaption.frozen) {
clearTimeout(this.videoCaption.frozen);
/**
* @desc Unfreezes moving of captions when mouse go out.
*
* @param {jquery Event} event
*/
onMouseLeave: function (event) {
if (this.frozen) {
clearTimeout(this.frozen);
}
this.videoCaption.frozen = null;
this.frozen = null;
if (this.videoCaption.playing) {
this.videoCaption.scrollCaption();
}
}
function onMovement() {
this.videoCaption.onMouseEnter();
if (this.playing) {
this.scrollCaption();
}
},
/**
* @desc Fetch the caption file specified by the user. Upn successful
* receival of the file, the captions will be rendered.
*
* @type {function}
* @access public
* @desc Freezes moving of captions when mouse is moving over them.
*
* @this {object} - The object containg the state of the video
* player. All other modules, their parameters, public variables, etc.
* are available via this object.
* @param {jquery Event} event
*/
onMovement: function (event) {
this.onMouseEnter();
},
/**
* @desc Fetch the caption file specified by the user. Upon successful
* receipt of the file, the captions will be rendered.
*
* @returns {boolean}
* true: The user specified a caption file. NOTE: if an error happens
......@@ -236,63 +204,69 @@ function (Sjson, AsyncProcess) {
* file is missing on the server), this function will still return
* true.
* false: No caption file was specified, or an empty string was
* specified.
* specified for the Youtube type player.
*/
function fetchCaption() {
fetchCaption: function () {
var self = this,
Caption = self.videoCaption,
language = this.getCurrentLanguage(),
data;
state = this.state,
language = state.getCurrentLanguage(),
data, youtubeId;
if (Caption.loaded) {
Caption.hideCaptions(false);
if (this.loaded) {
this.hideCaptions(false);
} else {
Caption.hideCaptions(this.hide_captions, false);
this.hideCaptions(state.hide_captions, false);
}
if (this.fetchXHR && this.fetchXHR.abort) {
this.fetchXHR.abort();
}
if (Caption.fetchXHR && Caption.fetchXHR.abort) {
Caption.fetchXHR.abort();
if (state.videoType === 'youtube') {
youtubeId = state.youtubeId('1.0');
if (!youtubeId) {
return false;
}
if (this.videoType === 'youtube') {
data = {
videoId: this.youtubeId('1.0')
videoId: youtubeId
};
}
// Fetch the captions file. If no file was specified, or if an error
// occurred, then we hide the captions panel, and the "CC" button
Caption.fetchXHR = $.ajaxWithPrefix({
url: self.config.transcriptTranslationUrl + '/' + language,
this.fetchXHR = $.ajaxWithPrefix({
url: state.config.transcriptTranslationUrl + '/' + language,
notifyOnError: false,
data: data,
success: function (response) {
Caption.sjson = new Sjson(response);
success: function (sjson) {
self.sjson = new Sjson(sjson);
var start = Caption.sjson.getStartTimes(),
captions = Caption.sjson.getCaptions();
var start = self.sjson.getStartTimes(),
captions = self.sjson.getCaptions();
if (Caption.loaded) {
if (Caption.rendered) {
Caption.renderCaption(start, captions);
Caption.updatePlayTime(self.videoPlayer.currentTime);
if (self.loaded) {
if (self.rendered) {
self.renderCaption(start, captions);
self.updatePlayTime(state.videoPlayer.currentTime);
}
} else {
if (self.isTouch) {
Caption.subtitlesEl.find('li').html(
if (state.isTouch) {
self.subtitlesEl.find('li').html(
gettext(
'Caption will be displayed when ' +
'you start playing the video.'
)
);
} else {
Caption.renderCaption(start, captions);
self.renderCaption(start, captions);
}
Caption.bindHandlers();
self.bindHandlers();
}
Caption.loaded = true;
self.loaded = true;
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('[Video info]: ERROR while fetching captions.');
......@@ -302,68 +276,87 @@ function (Sjson, AsyncProcess) {
);
// If initial list of languages has more than 1 item, check
// for availability other transcripts.
if (_.keys(self.config.transcriptLanguages).length > 1) {
Caption.fetchAvailableTranslations();
if (_.keys(state.config.transcriptLanguages).length > 1) {
self.fetchAvailableTranslations();
} else {
Caption.hideCaptions(true, false);
Caption.hideSubtitlesEl.hide();
self.hideCaptions(true, false);
self.hideSubtitlesEl.hide();
}
}
});
return true;
}
},
function fetchAvailableTranslations() {
/**
* @desc Fetch the list of available translations. Upon successful receipt,
* the list of available translations will be updated.
*
* @returns {jquery Promise}
*/
fetchAvailableTranslations: function () {
var self = this,
Caption = this.videoCaption;
state = this.state;
return $.ajaxWithPrefix({
url: self.config.transcriptAvailableTranslationsUrl,
url: state.config.transcriptAvailableTranslationsUrl,
notifyOnError: false,
success: function (response) {
var currentLanguages = self.config.transcriptLanguages,
var currentLanguages = state.config.transcriptLanguages,
newLanguages = _.pick(currentLanguages, response);
// Update property with available currently translations.
self.config.transcriptLanguages = newLanguages;
state.config.transcriptLanguages = newLanguages;
// Remove an old language menu.
Caption.container.find('.langs-list').remove();
self.container.find('.langs-list').remove();
if (_.keys(newLanguages).length) {
// And try again to fetch transcript.
Caption.fetchCaption();
Caption.renderLanguageMenu(newLanguages);
self.fetchCaption();
self.renderLanguageMenu(newLanguages);
}
},
error: function (jqXHR, textStatus, errorThrown) {
Caption.hideCaptions(true, false);
Caption.hideSubtitlesEl.hide();
self.hideCaptions(true, false);
self.hideSubtitlesEl.hide();
}
});
}
function resize() {
this.videoCaption.subtitlesEl
.find('.spacing:first')
.height(this.videoCaption.topSpacingHeight())
.find('.spacing:last')
.height(this.videoCaption.bottomSpacingHeight());
},
this.videoCaption.scrollCaption();
this.videoCaption.setSubtitlesHeight();
}
/**
* @desc Recalculates and updates the height of the container of captions.
*
*/
onResize: function () {
this.subtitlesEl
.find('.spacing').first()
.height(this.topSpacingHeight()).end()
.find('.spacing').last()
.height(this.bottomSpacingHeight());
this.scrollCaption();
this.setSubtitlesHeight();
},
function renderLanguageMenu(languages) {
/**
* @desc Create any necessary DOM elements, attach them, and set their
* initial configuration for the Language menu.
*
* @param {object} languages Dictionary where key is language code,
* value - language label
*
*/
renderLanguageMenu: function (languages) {
var self = this,
state = this.state,
menu = $('<ol class="langs-list menu">'),
currentLang = this.getCurrentLanguage();
currentLang = state.getCurrentLanguage();
if (_.keys(languages).length < 2) {
return false;
}
this.videoCaption.showLanguageMenu = true;
this.showLanguageMenu = true;
$.each(languages, function(code, label) {
var li = $('<li data-lang-code="' + code + '" />'),
......@@ -377,26 +370,37 @@ function (Sjson, AsyncProcess) {
menu.append(li);
});
this.videoCaption.container.append(menu);
this.container.append(menu);
menu.on('click', 'a', function (e) {
var el = $(e.currentTarget).parent(),
Caption = self.videoCaption,
state = self.state,
langCode = el.data('lang-code');
if (self.lang !== langCode) {
self.lang = langCode;
self.storage.setItem('language', langCode);
if (state.lang !== langCode) {
state.lang = langCode;
state.storage.setItem('language', langCode);
el .addClass('active')
.siblings('li')
.removeClass('active');
Caption.fetchCaption();
self.fetchCaption();
}
});
}
},
function buildCaptions (container, start, captions) {
/**
* @desc Create any necessary DOM elements, attach them, and set their
* initial configuration.
*
* @param {jQuery element} container Element in which captions will be
* inserted.
* @param {array} start List of start times for the video.
* @param {array} captions List of captions for the video.
* @returns {object} jQuery's Promise object
*
*/
buildCaptions: function (container, start, captions) {
var process = function(text, index) {
var liEl = $('<li>', {
'data-index': index,
......@@ -410,13 +414,20 @@ function (Sjson, AsyncProcess) {
return AsyncProcess.array(captions, process).done(function (list) {
container.append(list);
});
}
},
function renderCaption(start, captions) {
var Caption = this.videoCaption;
/**
* @desc Initiates creating of captions and set their initial configuration.
*
* @param {array} start List of start times for the video.
* @param {array} captions List of captions for the video.
*
*/
renderCaption: function (start, captions) {
var self = this;
var onRender = function () {
Caption.addPaddings();
self.addPaddings();
// Enables or disables automatic scrolling of the captions when the
// video is playing. This feature has to be disabled when tabbing
// through them as it interferes with that action. Initially, have
......@@ -424,49 +435,60 @@ function (Sjson, AsyncProcess) {
// caption (through forward tabbing) or the last caption (through
// backwards tabbing) gets the focus, disable that feature.
// Re-enable it if tabbing then cycles out of the the captions.
Caption.autoScrolling = true;
self.autoScrolling = true;
// Keeps track of where the focus is situated in the array of
// captions. Used to implement the automatic scrolling behavior and
// decide if the outline around a caption has to be hidden or shown
// on a mouseenter or mouseleave. Initially, no caption has the
// focus, set the index to -1.
Caption.currentCaptionIndex = -1;
self.currentCaptionIndex = -1;
// Used to track if the focus is coming from a click or tabbing. This
// has to be known to decide if, when a caption gets the focus, an
// outline has to be drawn (tabbing) or not (mouse click).
Caption.isMouseFocus = false;
Caption.rendered = true;
self.isMouseFocus = false;
self.rendered = true;
};
Caption.rendered = false;
Caption.subtitlesEl.empty();
Caption.setSubtitlesHeight();
buildCaptions(Caption.subtitlesEl, start, captions).done(onRender);
}
this.rendered = false;
this.subtitlesEl.empty();
this.setSubtitlesHeight();
this.buildCaptions(this.subtitlesEl, start, captions).done(onRender);
},
/**
* @desc Sets top and bottom spacing height and make sure they are taken
* out of the tabbing order.
*
*/
addPaddings: function () {
function addPaddings() {
// Set top and bottom spacing height and make sure they are taken out of
// the tabbing order.
this.videoCaption.subtitlesEl
this.subtitlesEl
.prepend(
$('<li class="spacing">')
.height(this.videoCaption.topSpacingHeight())
.height(this.topSpacingHeight())
.attr('tabindex', -1)
)
.append(
$('<li class="spacing">')
.height(this.videoCaption.bottomSpacingHeight())
.height(this.bottomSpacingHeight())
.attr('tabindex', -1)
);
}
},
// On mouseOver, hide the outline of a caption that has been tabbed to.
// On mouseOut, show the outline of a caption that has been tabbed to.
function captionMouseOverOut(event) {
/**
* @desc
* On mouseOver: Hides the outline of a caption that has been tabbed to.
* On mouseOut: Shows the outline of a caption that has been tabbed to.
*
* @param {jquery Event} event
*
*/
captionMouseOverOut: function (event) {
var caption = $(event.target),
captionIndex = parseInt(caption.attr('data-index'), 10);
if (captionIndex === this.videoCaption.currentCaptionIndex) {
if (captionIndex === this.currentCaptionIndex) {
if (event.type === 'mouseover') {
caption.removeClass('focused');
}
......@@ -474,48 +496,73 @@ function (Sjson, AsyncProcess) {
caption.addClass('focused');
}
}
}
},
function captionMouseDown(event) {
/**
* @desc Handles mousedown event on concrete caption.
*
* @param {jquery Event} event
*
*/
captionMouseDown: function (event) {
var caption = $(event.target);
this.videoCaption.isMouseFocus = true;
this.videoCaption.autoScrolling = true;
this.isMouseFocus = true;
this.autoScrolling = true;
caption.removeClass('focused');
this.videoCaption.currentCaptionIndex = -1;
}
this.currentCaptionIndex = -1;
},
function captionClick(event) {
this.videoCaption.seekPlayer(event);
}
/**
* @desc Handles click event on concrete caption.
*
* @param {jquery Event} event
*
*/
captionClick: function (event) {
this.seekPlayer(event);
},
function captionFocus(event) {
/**
* @desc Handles focus event on concrete caption.
*
* @param {jquery Event} event
*
*/
captionFocus: function (event) {
var caption = $(event.target),
captionIndex = parseInt(caption.attr('data-index'), 10);
// If the focus comes from a mouse click, hide the outline, turn on
// automatic scrolling and set currentCaptionIndex to point outside of
// caption list (ie -1) to disable mouseenter, mouseleave behavior.
if (this.videoCaption.isMouseFocus) {
this.videoCaption.autoScrolling = true;
if (this.isMouseFocus) {
this.autoScrolling = true;
caption.removeClass('focused');
this.videoCaption.currentCaptionIndex = -1;
this.currentCaptionIndex = -1;
}
// If the focus comes from tabbing, show the outline and turn off
// automatic scrolling.
else {
this.videoCaption.currentCaptionIndex = captionIndex;
this.currentCaptionIndex = captionIndex;
caption.addClass('focused');
// The second and second to last elements turn automatic scrolling
// off again as it may have been enabled in captionBlur.
if (
captionIndex <= 1 ||
captionIndex >= this.videoCaption.sjson.getSize() - 2
captionIndex >= this.sjson.getSize() - 2
) {
this.videoCaption.autoScrolling = false;
}
this.autoScrolling = false;
}
}
},
function captionBlur(event) {
/**
* @desc Handles blur event on concrete caption.
*
* @param {jquery Event} event
*
*/
captionBlur: function (event) {
var caption = $(event.target),
captionIndex = parseInt(caption.attr('data-index'), 10);
......@@ -526,97 +573,129 @@ function (Sjson, AsyncProcess) {
// tabbing back out of the captions or on the last element and tabbing
// forward out of the captions.
if (captionIndex === 0 ||
captionIndex === this.videoCaption.sjson.getSize() - 1) {
captionIndex === this.sjson.getSize() - 1) {
this.videoCaption.autoScrolling = true;
}
this.autoScrolling = true;
}
},
function captionKeyDown(event) {
this.videoCaption.isMouseFocus = false;
/**
* @desc Handles keydown event on concrete caption.
*
* @param {jquery Event} event
*
*/
captionKeyDown: function (event) {
this.isMouseFocus = false;
if (event.which === 13) { //Enter key
this.videoCaption.seekPlayer(event);
}
this.seekPlayer(event);
}
},
function scrollCaption() {
var el = this.videoCaption.subtitlesEl.find('.current:first');
/**
* @desc Scrolls caption container to make active caption visible.
*
*/
scrollCaption: function () {
var el = this.subtitlesEl.find('.current:first');
// Automatic scrolling gets disabled if one of the captions has
// received focus through tabbing.
if (
!this.videoCaption.frozen &&
!this.frozen &&
el.length &&
this.videoCaption.autoScrolling
this.autoScrolling
) {
this.videoCaption.subtitlesEl.scrollTo(
this.subtitlesEl.scrollTo(
el,
{
offset: -this.videoCaption.calculateOffset(el)
offset: -1 * this.calculateOffset(el)
}
);
}
}
},
function play() {
if (this.videoCaption.loaded) {
if (!this.videoCaption.rendered) {
var start = this.videoCaption.sjson.getStartTimes(),
captions = this.videoCaption.sjson.getCaptions();
/**
* @desc Updates flags on play
*
*/
play: function () {
if (this.loaded) {
if (!this.rendered) {
var start = this.sjson.getStartTimes(),
captions = this.sjson.getCaptions();
this.videoCaption.renderCaption(start, captions);
this.renderCaption(start, captions);
}
this.videoCaption.playing = true;
}
this.playing = true;
}
},
function pause() {
if (this.videoCaption.loaded) {
this.videoCaption.playing = false;
}
/**
* @desc Updates flags on pause
*
*/
pause: function () {
if (this.loaded) {
this.playing = false;
}
},
function updatePlayTime(time) {
var newIndex;
/**
* @desc Updates captions UI on paying.
*
* @param {number} time Time in seconds.
*
*/
updatePlayTime: function (time) {
var state = this.state,
newIndex;
if (this.videoCaption.loaded) {
if (this.isFlashMode()) {
time = Time.convert(time, this.speed, '1.0');
if (this.loaded) {
if (state.isFlashMode()) {
time = Time.convert(time, state.speed, '1.0');
}
time = Math.round(time * 1000 + 100);
newIndex = this.videoCaption.sjson.search(time);
newIndex = this.sjson.search(time);
if (
typeof newIndex !== 'undefined' &&
newIndex !== -1 &&
this.videoCaption.currentIndex !== newIndex
this.currentIndex !== newIndex
) {
if (typeof this.videoCaption.currentIndex !== 'undefined') {
this.videoCaption.subtitlesEl
if (typeof this.currentIndex !== 'undefined') {
this.subtitlesEl
.find('li.current')
.removeClass('current');
}
this.videoCaption.subtitlesEl
this.subtitlesEl
.find("li[data-index='" + newIndex + "']")
.addClass('current');
this.videoCaption.currentIndex = newIndex;
this.videoCaption.scrollCaption();
}
this.currentIndex = newIndex;
this.scrollCaption();
}
}
},
function seekPlayer(event) {
var time = parseInt($(event.target).data('start'), 10);
/**
* @desc Sends log to the server on caption seek.
*
* @param {jquery Event} event
*
*/
seekPlayer: function (event) {
var state = this.state,
time = parseInt($(event.target).data('start'), 10);
if (this.isFlashMode()) {
time = Math.round(Time.convert(time, '1.0', this.speed));
if (state.isFlashMode()) {
time = Math.round(Time.convert(time, '1.0', state.speed));
}
this.trigger(
state.trigger(
'videoPlayer.onCaptionSeek',
{
'type': 'onCaptionSeek',
......@@ -625,36 +704,70 @@ function (Sjson, AsyncProcess) {
);
event.preventDefault();
}
},
function calculateOffset(element) {
return this.videoCaption.captionHeight() / 2 - element.height() / 2;
}
/**
* @desc Calculates offset for paddings.
*
* @param {jquery element} element Top or bottom padding element.
* @returns {number} Offset for the passed padding element.
*
*/
calculateOffset: function (element) {
return this.captionHeight() / 2 - element.height() / 2;
},
function topSpacingHeight() {
return this.videoCaption.calculateOffset(
this.videoCaption.subtitlesEl.find('li:not(.spacing):first')
/**
* @desc Calculates offset for the top padding element.
*
* @returns {number} Offset for the passed top padding element.
*
*/
topSpacingHeight: function () {
return this.calculateOffset(
this.subtitlesEl.find('li:not(.spacing)').first()
);
}
},
function bottomSpacingHeight() {
return this.videoCaption.calculateOffset(
this.videoCaption.subtitlesEl.find('li:not(.spacing):last')
/**
* @desc Calculates offset for the bottom padding element.
*
* @returns {number} Offset for the passed bottom padding element.
*
*/
bottomSpacingHeight: function () {
return this.calculateOffset(
this.subtitlesEl.find('li:not(.spacing)').last()
);
}
},
function toggle(event) {
/**
* @desc Shows/Hides captions on click `CC` button
*
* @param {jquery Event} event
*
*/
toggle: function (event) {
event.preventDefault();
if (this.el.hasClass('closed')) {
this.videoCaption.hideCaptions(false);
if (this.state.el.hasClass('closed')) {
this.hideCaptions(false);
} else {
this.videoCaption.hideCaptions(true);
}
this.hideCaptions(true);
}
},
function hideCaptions(hide_captions, update_cookie) {
var hideSubtitlesEl = this.videoCaption.hideSubtitlesEl,
/**
* @desc Shows/Hides captions and updates the cookie.
*
* @param {boolean} hide_captions if `true` hides the caption,
* otherwise - show.
* @param {boolean} update_cookie Flag to update or not the cookie.
*
*/
hideCaptions: function (hide_captions, update_cookie) {
var hideSubtitlesEl = this.hideSubtitlesEl,
state = this.state,
type, text;
if (typeof update_cookie === 'undefined') {
......@@ -663,18 +776,14 @@ function (Sjson, AsyncProcess) {
if (hide_captions) {
type = 'hide_transcript';
this.captionsHidden = true;
this.el.addClass('closed');
state.captionsHidden = true;
state.el.addClass('closed');
text = gettext('Turn on captions');
} else {
type = 'show_transcript';
this.captionsHidden = false;
this.el.removeClass('closed');
this.videoCaption.scrollCaption();
state.captionsHidden = false;
state.el.removeClass('closed');
this.scrollCaption();
text = gettext('Turn off captions');
}
......@@ -682,57 +791,72 @@ function (Sjson, AsyncProcess) {
.attr('title', text)
.text(gettext(text));
if (this.videoPlayer) {
this.videoPlayer.log(type, {
currentTime: this.videoPlayer.currentTime
if (state.videoPlayer) {
state.videoPlayer.log(type, {
currentTime: state.videoPlayer.currentTime
});
}
if (this.resizer) {
if (this.isFullScreen) {
this.resizer.setMode('both');
if (state.resizer) {
if (state.isFullScreen) {
state.resizer.setMode('both');
} else {
this.resizer.alignByWidthOnly();
state.resizer.alignByWidthOnly();
}
}
this.videoCaption.setSubtitlesHeight();
this.setSubtitlesHeight();
if (update_cookie) {
$.cookie('hide_captions', hide_captions, {
expires: 3650,
path: '/'
});
}
}
},
function captionHeight() {
if (this.isFullScreen) {
return this.container.height() - this.videoControl.height;
/**
* @desc Return the caption container height.
*
* @returns {number} event Height of the container in pixels.
*
*/
captionHeight: function () {
var state = this.state;
if (state.isFullScreen) {
return state.container.height() - state.videoControl.height;
} else {
return this.container.height();
}
return state.container.height();
}
},
function setSubtitlesHeight() {
var height = 0;
/**
* @desc Sets the height of the caption container element.
*
*/
setSubtitlesHeight: function () {
var height = 0,
state = this.state;
// on page load captionHidden = undefined
if ((this.captionsHidden === undefined && this.hide_captions) ||
this.captionsHidden === true
if ((state.captionsHidden === undefined && state.hide_captions) ||
state.captionsHidden === true
) {
// In case of html5 autoshowing subtitles, we adjust height of
// subs, by height of scrollbar.
height = this.videoControl.el.height() +
0.5 * this.videoControl.sliderEl.height();
height = state.videoControl.el.height() +
0.5 * state.videoControl.sliderEl.height();
// Height of videoControl does not contain height of slider.
// css is set to absolute, to avoid yanking when slider
// autochanges its height.
}
this.videoCaption.subtitlesEl.css({
maxHeight: this.videoCaption.captionHeight() - height
this.subtitlesEl.css({
maxHeight: this.captionHeight() - height
});
}
};
return VideoCaption;
});
}(RequireJS.define));
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