/*
Open Video Annotation v1.0 (http://openvideoannotation.org/)
Copyright (C) 2014 CHS (Harvard University), Daniel Cebrian Robles and Phil Desenne
License: https://github.com/CtrHellenicStudies/OpenVideoAnnotation/blob/master/License.rst
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
// ----------------Utilities---------------- //
var _ref;
var __bind = function(fn, me) {
return function() {
return fn.apply(me, arguments);
};
};
var __hasProp = {}.hasOwnProperty;
var __extends = function(child, parent) {
for (var key in parent) {
if (__hasProp.call(parent, key))
child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
};
var createDateFromISO8601 = function(string) {
var d, date, offset, regexp, time, _ref;
regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" + "(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\\.([0-9]+))?)?" + "(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
d = string.match(new RegExp(regexp));
offset = 0;
date = new Date(d[1], 0, 1);
if (d[3]) {
date.setMonth(d[3] - 1);
}
if (d[5]) {
date.setDate(d[5]);
}
if (d[7]) {
date.setHours(d[7]);
}
if (d[8]) {
date.setMinutes(d[8]);
}
if (d[10]) {
date.setSeconds(d[10]);
}
if (d[12]) {
date.setMilliseconds(Number("0." + d[12]) * 1000);
}
if (d[14]) {
offset = (Number(d[16]) * 60) + Number(d[17]);
offset *= (_ref = d[15] === '-') != null ? _ref : {
1: -1
};
}
offset -= date.getTimezoneOffset();
time = Number(date) + (offset * 60 * 1000);
date.setTime(Number(time));
return date;
};
var Util = typeof Util != 'undefined' ? Util : {};
Util.mousePosition = function(e, offsetEl) {
var offset, _ref1;
if ((_ref1 = $(offsetEl).css('position')) !== 'absolute' && _ref1 !== 'fixed' && _ref1 !== 'relative') {
offsetEl = $(offsetEl).offsetParent()[0];
}
offset = $(offsetEl).offset();
return {
top: e.pageY - offset.top,
left: e.pageX - offset.left
};
};
// ----------------Load videojs-Annotation Plugin---------------- //
(function () {
// -- Load Annotation plugin in videojs
function vjsAnnotation_(options){
var player = this;
// variables to know if it is ready
player.annotations = new vjsAnnotation(player, options);
// When the DOM, Range Slider and the video media is loaded
function initialVideoFinished(event) {
// -- wait for plugins -- //
var wrapper = $('.annotator-wrapper').parent()[0];
var annotator = $.data(wrapper, 'annotator');
// wait for Annotator and the Share plugin
if (typeof Annotator.Plugin["Share"] === 'function') {
if (typeof annotator.isShareLoaded != 'undefined' && annotator.isShareLoaded) {
annotator.unsubscribe('shareloaded', initialVideoFinished);
} else {
annotator.subscribe('shareloaded', initialVideoFinished);
return false;
}
}
var plugin = player.annotations;
// All components will be initialize after they have been loaded by videojs
for (var index in plugin.components) {
plugin.components[index].init_();
}
player.annotations.BigNewAn.show();
// set the position of the big buttom
plugin.setposBigNew(plugin.options.posBigNew);
if(!options.showDisplay)
plugin.hideDisplay();
if(!options.showStatistics)
plugin.hideStatistics();
// Get current instance of annotator
player.annotator = annotator;
plugin.annotator = annotator;
// get annotations
var allannotations = annotator.plugins['Store'].annotations;
plugin.refreshDisplay();
// -- Listener to Range Slider Plugin
player.rangeslider.rstb.on('mousedown', function(){plugin._onMouseDownRS(event)});
// Open the autoPlay from the API
if (player.autoPlayAPI) {
var OnePlay = function () {
player.annotations.showAnnotation(player.autoPlayAPI);
$('html, body').animate({
scrollTop: $("#" + player.id_).offset().top},
'slow');
};
if (player.techName == 'Youtube')
setTimeout(OnePlay, 100); // fix the delay playing youtube
else
OnePlay();
}
// set the number of Annotations to display
plugin.refreshDesignPanel();
// check full-screen change
player.on('fullscreenchange', function() {
if (player.isFullScreen) {
$(player.annotator.wrapper[0]).addClass('vjs-fullscreen');
} else {
$(player.annotator.wrapper[0]).removeClass('vjs-fullscreen');
}
plugin.refreshDesignPanel();
});
// loaded plugin
plugin.loaded = true;
}
player.one('loadedRangeSlider', initialVideoFinished); // Loaded RangeSlider
console.log("Loaded Annotation Plugin");
}
videojs.plugin('annotations', vjsAnnotation_);
// -- Plugin
function vjsAnnotation(player, options) {
var player = player || this;
this.player = player;
this.components = {}; // holds any custom components we add to the player
options = options || {}; // plugin options
if(!options.hasOwnProperty('posBigNew'))
options.posBigNew = 'none'; // ul = up left || ur = up right || bl = below left || br = below right || c = center
if(!options.hasOwnProperty('showDisplay'))
options.showDisplay = false;
if(!options.hasOwnProperty('showStatistics'))
options.showStatistics = false;
this.options = options;
this.init();
}
// -- Methods
vjsAnnotation.prototype = {
/* Constructor */
init: function() {
var player = this.player || {};
var controlBar = player.controlBar;
var seekBar = player.controlBar.progressControl.seekBar;
this.updatePrecision = 3;
// Components and Quick Aliases
this.BigNewAn = this.components.BigNewAnnotation = player.BigNewAnnotation;
this.AnConBut = this.components.AnContainerButtons = controlBar.AnContainerButtons;
this.ShowSt = this.components.ShowStatistics = this.AnConBut.ShowStatistics;
this.NewAn = this.components.NewAnnotation = this.AnConBut.NewAnnotation;
this.ShowAn =this.components.ShowAnnotations = this.AnConBut.ShowAnnotations;
this.BackAnDisplay = this.components.BackAnDisplay = controlBar.BackAnDisplay; // Background of the panel
this.AnDisplay = this.components.AnDisplay = controlBar.BackAnDisplay.AnDisplay; // Panel with all the annotations
this.AnStat = this.components.AnStat = controlBar.BackAnDisplay.AnStat; // Panel with statistics of the number of annotations
this.BackAnDisplayScroll = this.components.BackAnDisplayScroll = controlBar.BackAnDisplayScroll; // Back Panel with all the annotations
this.backDSBar = this.components.BackAnDisplayScrollBar = this.BackAnDisplayScroll.BackAnDisplayScrollBar; // Scroll Bar
this.backDSBarSel = this.components.ScrollBarSelector = this.backDSBar.ScrollBarSelector; // Scroll Bar Selector
this.backDSTime = this.components.BackAnDisplayScrollTime = this.BackAnDisplayScroll.BackAnDisplayScrollTime; // Back Panel with time of the annotations in the scroll
this.rsd = this.components.RangeSelectorDisplay = controlBar.BackAnDisplay.RangeSelectorDisplay; // Selection the time to display the annotations
this.rsdl = this.components.RangeSelectorLeft = this.rsd.RangeSelectorLeft;
this.rsdr = this.components.RangeSelectorRight = this.rsd.RangeSelectorRight;
this.rsdb = this.components.RangeSelectorBar = this.rsd.RangeSelectorBar;
this.rsdbl = this.components.RangeSelectorBarL = this.rsdb.RangeSelectorBarL;
this.rsdbr = this.components.RangeSelectorBarR = this.rsdb.RangeSelectorBarR;
this.rs = player.rangeslider;
// local variables
this.editing = false;
var wrapper = $('.annotator-wrapper').parent()[0];
var annotator = $.data(wrapper, 'annotator');
var self = this;
// Subscribe to Annotator changes
annotator.subscribe("annotationsLoaded", function (annotations) {
if(self.loaded)
self.refreshDisplay();
});
annotator.subscribe("annotationUpdated", function (annotation) {
if(self.loaded)
self.refreshDisplay();
});
annotator.subscribe("annotationDeleted", function (annotation) {
var annotations = annotator.plugins['Store'].annotations;
var tot = typeof annotations !== 'undefined' ? annotations.length : 0;
var attempts = 0; // max 100
// This is to watch the annotations object, to see when is deleted the annotation
var ischanged = function() {
var new_tot = annotator.plugins['Store'].annotations.length;
if (attempts < 100)
setTimeout(function(){
if (new_tot !== tot) {
if(self.loaded)
self.refreshDisplay();
} else {
attempts++;
ischanged();
}
}, 100); // wait for the change in the annotations
};
ischanged();
});
this.BigNewAn.hide(); // Hide until the video is load
},
newan: function(start, end) {
var player = this.player;
var annotator = this.annotator;
var sumPercent = 10; // percentage for the last mark
var currentTime = player.currentTime();
var lastTime = this._sumPercent(currentTime, sumPercent);
var start = typeof start !== 'undefined' ? start : currentTime;
var end = typeof end !== 'undefined' ? end : lastTime;
this._reset();
// set position RS and pause the player
player.showSlider();
player.pause();
player.setValueSlider(start, end);
// This variable is to say the editor that we want create a VideoJS annotation
annotator.editor.VideoJS = this.player.id_;
annotator.adder.show();
this._setOverRS(annotator.adder);
// Open a new annotator dialog
annotator.onAdderClick();
},
showDisplay: function() {
this._reset();
// show
this.BackAnDisplay.removeClass('disable'); // show the Container
this.BackAnDisplayScroll.removeClass('disable'); // show the scroll
// active button
this.ShowAn.addClass('active');
this.options.showDisplay =true;
},
hideDisplay: function() {
// hide
this.BackAnDisplay.addClass('disable'); // hide the Container
this.BackAnDisplayScroll.addClass('disable'); // hide the scroll
// no active button
videojs.removeClass(this.ShowAn.el_, 'active');
this.options.showDisplay =false;
},
showStatistics: function() {
this._reset();
// show
this.BackAnDisplay.removeClass('disable'); // show the Container
this.AnStat.removeClass('disable'); // show Statistics
// mode (this mode will hide the annotations to show the statistics in the container)
this.BackAnDisplay.addClass('statistics'); // mode statistics
// paint
this.AnStat.paintCanvas(); // refresh canvas
// active button
this.ShowSt.addClass('active');
this.options.showStatistics =true;
},
hideStatistics: function() {
// hide
this.BackAnDisplay.addClass('disable'); // hide the Container
this.AnStat.addClass('disable'); // hide Statistics
// remove mode statistics
this.BackAnDisplay.removeClass('statistics');
// no active button
this.ShowSt.removeClass('active');
this.options.showStatistics = false;
},
showAnnotation: function(annotation) {
var isVideo = this._isVideoJS(annotation);
if (isVideo) {
var start = annotation.rangeTime.start;
var end = annotation.rangeTime.end;
var duration = this.player.duration();
var isPoint = videojs.round(start, 3) == videojs.round(end, 3);
this._reset();
// show the range slider
this.rs.show();
// set the slider position
this.rs.setValues(start, end);
// lock the player
this.rs.lock();
// play
if (!isPoint)
this.rs.playBetween(start, end);
// fix small bar
var width = Math.min(1, Math.max(0.005, (this.rs._percent(end - start)))) * 100;
this.rs.bar.el_.style.width = width + '%';
// Add the annotation object to the bar
var bar = isPoint ? this.rs[((duration - start) / duration < 0.1) ? 'left' : 'right'].el_ : this.rs.bar.el_;
var holder = $(this.rs.left.el_).parent()[0];
$(holder).append('<span class="annotator-hl"></div>');
$(bar).appendTo( $(holder).find('.annotator-hl'));
var span = $(bar).parent()[0];
$.data(span, 'annotation', annotation); // Set the object in the span
// set the editor over the range slider
this._setOverRS(this.annotator.editor.element);
this.annotator.editor.checkOrientation();
// hide the panel
this.rs.hidePanel();
}
},
hideAnnotation: function() {
this.rs.hide();
this.rs.showPanel();
// remove the last single showed annotation
var holder = $(this.rs.left.el_).parent()[0];
var holderRight = $(this.rs.right.el_).parent()[0];
if ($(holder).find('.annotator-hl').length > 0) {
$($(holder).find('.annotator-hl')[0].children[0]).appendTo(holder);
$(holder).find('.annotator-hl').remove();
} else if ($(holderRight).find('.annotator-hl').length > 0) {
$($(holderRight).find('.annotator-hl')[0].children[0]).appendTo(holderRight);
$(holderRight).find('.annotator-hl').remove();
}
},
editAnnotation: function(annotation, editor) {
// This will be usefull when we are going to edit an annotation.
if (this._isVideoJS(annotation)) {
this.hideDisplay();
var player = this.player;
var editor = editor || this.annotator.editor;
// show the slider and set in the position
player.showSlider();
player.unlockSlider();
player.setValueSlider(annotation.rangeTime.start, annotation.rangeTime.end);
// show the time panel
player.showSliderPanel();
// set the editor over the range slider
this._setOverRS(editor.element);
editor.checkOrientation();
// set the VideoJS variable
editor.VideoJS = player.id_;
}
},
refreshDisplay: function() {
var count = 0;
var allannotations = this.annotator.plugins['Store'].annotations;
// Sort by date the Array
this._sortByDate(allannotations);
// reset the panel
$(this.AnDisplay.el_).find('span').remove(); // remove the last html items
$(this.player.el_).find('.vjs-anpanel-annotation .annotation').remove(); // remove a deleted annotation without span wrapper
for (var item in allannotations) {
var an = allannotations[item];
// check if the annotation is a video annotation
if (this._isVideoJS(an)){
var div = document.createElement('div');
var span = document.createElement('span');
var start = this.rs._percent(an.rangeTime.start) * 100;
var end = this.rs._percent(an.rangeTime.end) * 100;
var width;
span.appendChild(div);
span.className = "annotator-hl";
width = Math.min(100, Math.max(0.2, end - start));
div.className = "annotation";
div.id = count;
div.style.top = count + "em";
div.style.left = start + '%';
div.style.width = width + '%';
div.start = an.rangeTime.start;
div.end = an.rangeTime.end;
this.AnDisplay.el_.appendChild(span);
// detect point annotations
if (videojs.round(start, 0) == videojs.round(end, 0)) {
$(div).css('width', '');
$(div).addClass("point");
}
// Set the object in the div
$.data(span, 'annotation', an);
// Add the highlights to the annotation
an.highlights = $(span);
count++;
}
};
var start = this.rs._seconds(parseFloat(this.rsdl.el_.style.left) / 100);
var end = this.rs._seconds(parseFloat(this.rsdr.el_.style.left) / 100);
this.showBetween(start, end, this.rsdl.include, this.rsdr.include);
},
showBetween: function (start, end, includeLeft, includeRight) {
var duration = this.player.duration();
var start = start || 0;
var end = end || duration;
var annotationsHTML = $.makeArray($(this.player.el_).find('.vjs-anpanel-annotation .annotator-hl'));
var count = 0;
for (var index in annotationsHTML) {
var an = $.data(annotationsHTML[index], 'annotation');
var expressionLeft = includeLeft ? (an.rangeTime.end >= start) : (an.rangeTime.start >= start);
var expressionRight = includeRight ? (an.rangeTime.start <= end) : (an.rangeTime.end <= end);
if (this._isVideoJS(an) && expressionLeft && expressionRight && typeof an.highlights[0] !== 'undefined') {
var annotationHTML = an.highlights[0].children[0];
annotationHTML.style.marginTop = (-1 * parseFloat(annotationHTML.style.top) + count) + 'em';
$(an.highlights[0]).show();
count++;
} else if (this._isVideoJS(an) && typeof an.highlights[0] !== 'undefined') {
$(an.highlights[0]).hide();
an.highlights[0].children[0].style.marginTop = '';
}
}
// Set the times in the scroll time panel
this.backDSTime.setTimes();
},
setposBigNew: function(pos) {
var pos = pos || 'ul';
var el = this.player.BigNewAnnotation.el_;
videojs.removeClass(el, 'ul');
videojs.removeClass(el, 'ur');
videojs.removeClass(el, 'c');
videojs.removeClass(el, 'bl');
videojs.removeClass(el, 'br');
videojs.addClass(el, pos);
},
pressedKey: function (key) {
var player = this.player;
var rs = this.player.rs;
if (typeof key !== 'undefined' && key == 73) { // -- i key
this._reset();
// show slider
this.rs.show();
// hide other elements
this.rs._reset();
this.rs.setValue(0, player.currentTime());
this.rs.right.el_.style.visibility = 'hidden';
this.rs.tpr.el_.style.visibility = 'hidden';
this.rs.ctpr.el_.style.visibility = 'hidden';
this.rs.bar.el_.style.visibility = 'hidden';
this.lastStartbyKey = player.currentTime();
} else if (typeof key!='undefined' && key==79) { // -- o key
if (this.rs.bar.el_.style.visibility == 'hidden') { // the last action was to type the i key
var start = this.lastStartbyKey != 'undefined' ? this.lastStartbyKey:0;
this.newan(start, player.currentTime());
} else {
this.newan(player.currentTime(), player.currentTime());
}
}
},
refreshDesignPanel: function() {
var player = this.player;
var emtoPx = parseFloat($(this.backDSBar.el_).css('width'));
var playerHeight = parseFloat($(player.el_).css('height'));
var controlBarHeight = parseFloat($(player.controlBar.el_).css('height'));
var newHeight = (playerHeight - controlBarHeight) / emtoPx - 5;
this.BackAnDisplay.el_.style.height = this.backDSBar.el_.style.height = (newHeight + 'em');
this.BackAnDisplay.el_.style.top = this.backDSBar.el_.style.top = "-" + (newHeight + 3 + 'em');
this.BackAnDisplayScroll.el_.children[0].style.top = "-" + (newHeight + 5 + 'em');
this.backDSTime.el_.children[0].style.top = "-" + (newHeight + 5 + 'em');
},
_reset: function() {
// Hide all the components
this.hideDisplay();
this.hideAnnotation();
this.hideStatistics();
this.player.annotator.adder.hide();
this.player.annotator.editor.hide();
this.player.annotator.viewer.hide();
// make visible all the range slider element that maybe were hidden in pressedKey event
this.rs.right.el_.style.visibility = '';
this.rs.tpr.el_.style.visibility = '';
this.rs.ctpr.el_.style.visibility = '';
this.rs.bar.el_.style.visibility = '';
// by default the range slider must be unlocked
this.rs.unlock();
// whether there is a playing selection
this.rs.bar.suspendPlay();
// refresh the design
this.refreshDesignPanel();
},
_setOverRS: function(elem) {
var annotator = this.player.annotator;
var wrapper = $('.annotator-wrapper')[0];
var positionLeft = videojs.findPosition(this.rs.left.el_);
var positionRight = videojs.findPosition(this.rs.right.el_);
var positionAnnotator = videojs.findPosition(wrapper);
var positionAdder = {};
elem[0].style.display = 'block'; // Show the adder
if (this.player.isFullScreen) {
positionAdder.top = positionLeft.top;
positionAdder.left = positionLeft.left + (positionRight.left - positionLeft.left) / 2;
} else {
positionAdder.left = positionLeft.left + (positionRight.left - positionLeft.left) / 2 - positionAnnotator.left;
positionAdder.top = positionLeft.top - positionAnnotator.top;
}
elem.css(positionAdder);
},
_onMouseDownRS: function(event) {
event.preventDefault();
if (!this.rs.options.locked) {
videojs.on(document, "mousemove", videojs.bind(this, this._onMouseMoveRS));
videojs.on(document, "mouseup", videojs.bind(this, this._onMouseUpRS));
}
},
_onMouseMoveRS: function(event) {
var player = this.player;
var annotator = player.annotator;
var rs = player.rangeslider;
annotator.editor.element[0].style.display = 'none';
rs.show();
this._setOverRS(annotator.adder);
},
_onMouseUpRS: function(event) {
videojs.off(document, "mousemove", this._onMouseMoveRS, false);
videojs.off(document, "mouseup", this._onMouseUpRS, false);
var player = this.player;
var annotator = player.annotator;
var rs = player.rangeslider;
annotator.editor.element[0].style.display = 'block';
this._setOverRS(annotator.editor.element);
},
_sumPercent: function(seconds, percent) {
// the percentage is in %
var duration = this.player.duration();
var seconds = seconds || 0;
var percent = percent || 10;
percent = Math.min(100, Math.max(0, percent));
if (isNaN(duration)) {
return 0;
}
return Math.min(duration, Math.max(0, seconds + duration * percent / 100));
},
// Detect if we are creating or editing a video-js annotation
_EditVideoAn: function () {
var annotator = this.annotator;
var isOpenVideojs = (typeof this.player != 'undefined');
var VideoJS = annotator.editor.VideoJS;
return (isOpenVideojs && typeof VideoJS!='undefined' && VideoJS!==-1);
},
// Detect if the annotation is a video-js annotation
_isVideoJS: function (an) {
var player = this.player;
var rt = an.rangeTime;
var isOpenVideojs = (typeof this.player !== 'undefined');
var isVideo = (typeof an.media !== 'undefined' && (an.media === 'video' || an.media === 'audio'));
var isContainer = (typeof an.target !== 'undefined' && an.target.container == player.id_ );
var isNumber = (typeof rt !== 'undefined' && !isNaN(parseFloat(rt.start)) && isFinite(rt.start) && !isNaN(parseFloat(rt.end)) && isFinite(rt.end));
var isSource = false;
if (isContainer) {
// Compare without extension
var isYoutube = (isOpenVideojs && typeof this.player.techName !== 'undefined') ? (this.player.techName === 'Youtube') : false;
var targetSrc = isYoutube ? an.target.src : an.target.src.substring(0, an.target.src.lastIndexOf("."));
var playerSrc = isYoutube ? player.options_.sources[0].src : player.options_.sources[0].src.substring(0, player.options_.sources[0].src.lastIndexOf("."));
isSource = (targetSrc === playerSrc);
}
return (isOpenVideojs && isVideo && isContainer && isSource && isNumber);
},
_sortByDate: function (annotations, type) {
var type = type || 'asc'; // asc => The value [0] will be the most recent date
annotations.sort(function(a, b) {
a = new Date(typeof a.updated !== 'undefined' ? createDateFromISO8601(a.updated) : '');
b = new Date(typeof b.updated !== 'undefined' ? createDateFromISO8601(b.updated) : '');
if (type == 'asc')
return (b < a) ? -1 : ((b > a) ? 1 : 0);
else
return (a < b) ? -1 : ((a > b) ? 1 : 0);
});
}
};
// ----------------CREATE new Components for video-js---------------- //
// --Charge the new Component into videojs
videojs.ControlBar.prototype.options_.children.AnContainerButtons = {}; // Container with the css for the buttons
videojs.ControlBar.prototype.options_.children.BackAnDisplay = {}; // Range Slider Time Bar
videojs.ControlBar.prototype.options_.children.BackAnDisplayScroll = {}; // Range Slider Time Bar
videojs.options.children.BigNewAnnotation = {}; // Big Button New Annotation
// -- Player--> BigNewAnnotation
/**
* Create a New Annotation with big Button
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.BigNewAnnotation = videojs.Button.extend({
/** @constructor */
init: function(player, options) {
videojs.Button.call(this, player, options);
}
});
videojs.BigNewAnnotation.prototype.init_ = function() {
this.an = this.player_.annotations;
// Hide Button if the user has selected readOnly in the Annotator options
var opts = this.an.options.optionsAnnotator;
if (typeof opts !== 'undefined' && typeof opts.readOnly !== 'undefined' && opts.readOnly)
this.hide();
};
videojs.BigNewAnnotation.prototype.createEl = function() {
return videojs.Button.prototype.createEl.call(this, 'div', {
className: 'vjs-big-new-annotation vjs-menu-button vjs-control',
innerHTML: '<div class="vjs-big-menu-button vjs-control">A</div>',
title: 'New Annotation',
});
};
videojs.BigNewAnnotation.prototype.onClick = function() {
this.an.newan();
};
// -- Player--> ControlBar--> AnContainerButtons
/**
* Container for the button CSS
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.AnContainerButtons = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
}
});
videojs.AnContainerButtons.prototype.init_ = function() {};
videojs.AnContainerButtons.prototype.options_ = {
children: {
'ShowStatistics': {},
'ShowAnnotations': {},
'NewAnnotation': {},
}
};
videojs.AnContainerButtons.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-container-button-annotation vjs-menu-button vjs-control',
});
};
// -- Player--> ControlBar--> AnContainerButtons--> ShowStatistics
/**
* Button for show/hide the chart with statistics of the annotation's number
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.ShowStatistics = videojs.Button.extend({
/** @constructor */
init: function(player, options) {
videojs.Button.call(this, player, options);
}
});
videojs.ShowStatistics.prototype.init_ = function() {
this.an = this.player_.annotations;
};
videojs.ShowStatistics.prototype.createEl = function() {
return videojs.Button.prototype.createEl.call(this, 'div', {
className: 'vjs-statistics-annotation vjs-menu-button vjs-control',
title: 'Show the Statistics',
});
};
videojs.ShowStatistics.prototype.onClick = function() {
if (!this.an.options.showStatistics) this.an.showStatistics();
else this.an.hideStatistics();
};
// -- Player--> ControlBar--> AnContainerButtons--> ShowAnnotations
/**
* Button for show/hide the annotation panel
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.ShowAnnotations = videojs.Button.extend({
/** @constructor */
init: function(player, options) {
videojs.Button.call(this, player, options);
}
});
videojs.ShowAnnotations.prototype.init_ = function() {
this.an = this.player_.annotations;
};
videojs.ShowAnnotations.prototype.createEl = function() {
return videojs.Button.prototype.createEl.call(this, 'div', {
className: 'vjs-showannotations-annotation vjs-menu-button vjs-control',
title: 'Show Annotations',
});
};
videojs.ShowAnnotations.prototype.onClick = function() {
if (!this.an.options.showDisplay) this.an.showDisplay();
else this.an.hideDisplay();
};
// -- Player--> ControlBar--> AnContainerButtons--> NewAnnotation
/**
* Create a New Annotation
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.NewAnnotation = videojs.Button.extend({
/** @constructor */
init: function(player, options) {
videojs.Button.call(this, player, options);
}
});
videojs.NewAnnotation.prototype.init_ = function() {
this.an = this.player_.annotations;
// Hide Button if the user has selected readOnly in the Annotator options
var opts = this.an.options.optionsAnnotator;
if (typeof opts !== 'undefined' && typeof opts.readOnly !== 'undefined' && opts.readOnly)
this.hide();
};
videojs.NewAnnotation.prototype.createEl = function() {
return videojs.Button.prototype.createEl.call(this, 'div', {
className: 'vjs-new-annotation vjs-menu-button vjs-control',
title: 'New Annotation',
});
};
videojs.NewAnnotation.prototype.onClick = function() {
this.an.newan();
};
// -- Player--> ControlBar--> BackAnDisplay
/**
* The background annotations panel
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.BackAnDisplay = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
}
});
videojs.BackAnDisplay.prototype.init_ = function() {
this.an = this.player_.annotations
self = this;
// Fix error resizing the display panel. The scroll always went up.
$(this.el_).watch('font-size', function() {
self.an.backDSBarSel.setPosition(self.an.BackAnDisplayScroll.currentValue, false);
});
};
videojs.BackAnDisplay.prototype.options_ = {
children: {
'RangeSelectorDisplay': {},
'AnDisplay': {},
'AnStat': {},
}
};
videojs.BackAnDisplay.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-back-anpanel-annotation',
});
};
// -- Player--> ControlBar--> BackAnDisplay--> RangeSelectorDisplay
/**
* The selector to show the annotations in a time selection
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.RangeSelectorDisplay = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
this.on('mousedown', this.onMouseDown);
}
});
videojs.RangeSelectorDisplay.prototype.init_ = function() {
this.rs = this.player_.rangeslider;
this.an = this.player_.annotations;
var duration = this.an.player.duration();
this.start = 0;
this.end = duration;
// set the selection area in the extreme position
this.setPosition(0, 0, false);
this.setPosition(1, this.rs._percent(duration), false);
};
videojs.RangeSelectorDisplay.prototype.options_ = {
children: {
'RangeSelectorLeft': {},
'RangeSelectorRight': {},
'RangeSelectorBar': {},
}
};
videojs.RangeSelectorDisplay.prototype.createEl = function(){
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-rangeselector-anpanel-annotation',
});
};
videojs.RangeSelectorDisplay.prototype.onMouseDown = function(event) {
event.preventDefault();
// videojs.blockTextSelection();
videojs.on(document, "mousemove", videojs.bind(this, this.onMouseMove));
videojs.on(document, "mouseup", videojs.bind(this, this.onMouseUp));
videojs.removeClass(this.an.rsdb.el_, 'disable');
};
videojs.RangeSelectorDisplay.prototype.onMouseUp = function(event) {
videojs.off(document, "mousemove", this.onMouseMove, false);
videojs.off(document, "mouseup", this.onMouseUp, false);
videojs.addClass(this.an.rsdb.el_, 'disable');
};
videojs.RangeSelectorDisplay.prototype.onMouseMove = function(event) {
var left = this.calculateDistance(event);
if (this.an.rsdl.pressed)
this.setPosition(0, left);
else if (this.an.rsdr.pressed)
this.setPosition(1, left);
// move the frame to the position of the arrow
this.an.player.currentTime(this.rs._seconds(left));
};
videojs.RangeSelectorDisplay.prototype.calculateDistance = function(event) {
var rstbX = this.getRSTBX();
var rstbW = this.getRSTBWidth();
var handleW = this.getWidth();
// Adjusted X and Width, so handle doesn't go outside the bar
rstbX = rstbX + (handleW / 2);
rstbW = rstbW - handleW;
// Percent that the click is through the adjusted area
return Math.max(0, Math.min(1, (event.pageX - rstbX) / rstbW));
};
videojs.RangeSelectorDisplay.prototype.getRSTBWidth = function() {
return this.el_.offsetWidth;
};
videojs.RangeSelectorDisplay.prototype.getRSTBX = function() {
return videojs.findPosition(this.el_).left;
};
videojs.RangeSelectorDisplay.prototype.getWidth = function() {
var arrow = $(this.an.rsdl.el_).find('.vjs-selector-arrow')[0];
return arrow.offsetWidth; // does not matter left or right
};
videojs.RangeSelectorDisplay.prototype.setPosition = function(index, left, changeTime) {
// index = 0 for left side, index = 1 for right side
var index = index || 0;
var changeTime = typeof changeTime !== 'undefined' ? changeTime : true;
// Check for invalid position
if(isNaN(left))
return false;
// Check index between 0 and 1
if (!(index === 0 || index === 1))
return false;
// Alias
var ObjLeft = this.an.rsdl.el_;
var ObjRight = this.an.rsdr.el_;
var Obj = this.an[index === 0 ? 'rsdl' : 'rsdr'].el_;
// Check if left arrow is over the right arrow
if ((index === 0 ? this.updateLeft(left) : this.updateRight(left))) {
if (index === 1) { // right
Obj.style.left = (left * 100) + '%';
Obj.style.width = ((1 - left) * 100) + '%';
} else { // left
Obj.style.left = (left * 100) + '%';
Obj.style.width = ((left) * 100) + '%';
}
this[index === 0 ? 'start' : 'end'] = this.rs._seconds(left);
// Fix the problem when you press the button and the two arrow are underhand
// left.zIndex = 10 and right.zIndex=20. This is always less in this case:
if (index === 0 && (left * 100) >= 90)
$(ObjLeft).find('.vjs-selector-arrow')[0].style.zIndex = 25;
else
$(ObjLeft).find('.vjs-selector-arrow')[0].style.zIndex = 10;
// -- Panel
var rsdbl = this.an.rsdbl.el_,
rsdbr = this.an.rsdbr.el_,
distance = parseFloat(ObjRight.style.left) - parseFloat(ObjLeft.style.left);
if (index === 0)
rsdbl.children[0].innerHTML = videojs.formatTime(this.rs._seconds(left));
else
rsdbr.children[0].innerHTML = videojs.formatTime(this.rs._seconds(left));
if (typeof distance !== 'undefined' && distance <= 12.5) {
if (parseFloat(ObjLeft.style.left) < 7) {
rsdbl.style.top = (-1.5) + 'em';
rsdbl.style.left = 1 + 'em';
} else {
rsdbl.style.left = (-2.5) + 'em';
rsdbl.style.top = '';
}
if (parseFloat(ObjRight.style.left) > 93) {
rsdbr.style.top = (-1.5) + 'em';
rsdbr.style.right = 1 + 'em';
} else {
rsdbr.style.right = (-2.5) + 'em';
rsdbr.style.top = '';
}
} else {
rsdbl.style.left = 1 + 'em';
rsdbr.style.right = 1 + 'em';
rsdbl.style.top = '';
rsdbr.style.top = '';
}
var start = this.rs._seconds(parseFloat(ObjLeft.style.left) / 100);
var end = this.rs._seconds(parseFloat(ObjRight.style.left) / 100);
if (changeTime)
this.an.showBetween(start, end, this.an.rsdl.include, this.an.rsdr.include);
}
return true;
};
videojs.RangeSelectorDisplay.prototype.updateLeft = function(left) {
var rightVal = this.an.rsdr.el_.style.left !== '' ? this.an.rsdr.el_.style.left : 100;
var right = parseFloat(rightVal) / 100;
var bar = this.an.rsdb.el_;
var width = videojs.round((right - left), this.an.updatePrecision); // round necessary for not get 0.6e-7 for example that it's not able for the html css width
if(left <= (right+0.00001)) {
bar.style.left = (left * 100) + '%';
bar.style.width = (width * 100) + '%';
return true;
}
return false;
};
videojs.RangeSelectorDisplay.prototype.updateRight = function(right) {
var leftVal = this.an.rsdl.el_.style.left !== '' ? this.an.rsdl.el_.style.left : 0;
var left = parseFloat(leftVal) / 100;
var bar = this.an.rsdb.el_;
var width = videojs.round((right - left), this.an.updatePrecision); // round necessary for not get 0.6e-7 for example that it's not able for the html css width
if((right+0.00001) >= left) {
bar.style.width = (width * 100) + '%';
bar.style.left = ((right - width) * 100) + '%';
return true;
}
return false;
};
// -- Player--> ControlBar--> BackAnDisplay--> RangeSelectorDisplay--> RangeSelectorLeft
/**
* Left Time selector
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.RangeSelectorLeft = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
this.on('mousedown', this.onMouseDown);
this.on('dblclick', this.ondblclick);
this.pressed = false; // to know when is mousedown
this.include = true; // to know when we want to include the boundary time in the selection or not
}
});
videojs.RangeSelectorLeft.prototype.init_ = function() {
this.rs = this.player_.rangeslider;
this.an = this.player_.annotations;
videojs.addClass(this.el_, 'include');
};
videojs.RangeSelectorLeft.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-leftselector-anpanel-annotation',
innerHTML: '<div class="vjs-selector-arrow" title="Left Annotation Selector"></div><div class="vjs-leftselector-back"></div>'
});
};
videojs.RangeSelectorLeft.prototype.onMouseDown = function(event) {
event.preventDefault();
this.pressed = true;
videojs.on(document, "mouseup", videojs.bind(this, this.onMouseUp));
videojs.addClass(this.el_, 'active');
videojs.addClass(this.el_.parentNode, 'active');
};
videojs.RangeSelectorLeft.prototype.onMouseUp = function(event) {
videojs.off(document, "mouseup", this.onMouseUp, false);
videojs.removeClass(this.el_, 'active');
videojs.removeClass(this.el_.parentNode, 'active');
this.pressed = false;
};
videojs.RangeSelectorLeft.prototype.ondblclick = function(event) {
if (this.include) {
this.include = false;
videojs.removeClass(this.el_, 'include');
} else {
this.include = true;
videojs.addClass(this.el_, 'include');
}
var left = this.an.rsd.calculateDistance(event);
this.an.rsd.setPosition(0, left);
};
// -- Player--> ControlBar--> BackAnDisplay--> RangeSelectorDisplay--> RangeSelectorRight
/**
* Right Time selector
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.RangeSelectorRight = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
this.on('mousedown', this.onMouseDown);
this.on('dblclick', this.ondblclick);
this.pressed = false; // to know when is mousedown
this.include = true; // to know when we want to include the boundary time in the selection or not
}
});
videojs.RangeSelectorRight.prototype.init_ = function() {
this.rs = this.player_.rangeslider;
this.an = this.player_.annotations;
videojs.addClass(this.el_, 'include');
};
videojs.RangeSelectorRight.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-rightselector-anpanel-annotation',
innerHTML: '<div class="vjs-selector-arrow" title="Right Annotation Selector"></div><div class="vjs-rightselector-back"></div>'
});
};
videojs.RangeSelectorRight.prototype.onMouseDown = function(event) {
event.preventDefault();
this.pressed = true;
videojs.on(document, "mouseup", videojs.bind(this, this.onMouseUp));
videojs.addClass(this.el_, 'active');
videojs.addClass(this.el_.parentNode, 'active');
};
videojs.RangeSelectorRight.prototype.onMouseUp = function(event) {
videojs.off(document, "mouseup", this.onMouseUp, false);
videojs.removeClass(this.el_, 'active');
videojs.removeClass(this.el_.parentNode, 'active');
this.pressed = false;
};
videojs.RangeSelectorRight.prototype.ondblclick = function(event) {
if (this.include){
this.include = false;
videojs.removeClass(this.el_, 'include');
}else{
this.include = true;
videojs.addClass(this.el_, 'include');
}
var left = this.an.rsd.calculateDistance(event);
this.an.rsd.setPosition(1, left);
};
// -- Player--> ControlBar--> BackAnDisplay--> RangeSelectorDisplay--> RangeSelectorBar
/**
* Bar to display the selected Time
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.RangeSelectorBar = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
}
});
videojs.RangeSelectorBar.prototype.init_ = function() {
videojs.addClass(this.el_, 'disable');
};
videojs.RangeSelectorBar.prototype.options_ = {
children: {
'RangeSelectorBarL': {},
'RangeSelectorBarR': {},
}
};
videojs.RangeSelectorBar.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-barselector-anpanel-annotation',
});
};
// -- Player--> ControlBar--> BackAnDisplay--> RangeSelectorDisplay--> RangeSelectorBar--> RangeSelectorBarL
/**
* This is the left time panel for RangeSelectorBar
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.RangeSelectorBarL = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
}
});
videojs.RangeSelectorBarL.prototype.init_ = function() {};
videojs.RangeSelectorBarL.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-barselector-left',
innerHTML: '<span class="vjs-time-text">00:00</span>',
});
};
// -- Player--> ControlBar--> BackAnDisplay--> RangeSelectorDisplay--> RangeSelectorBar--> RangeSelectorBarR
/**
* This is the right time panel for RangeSelectorBar
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.RangeSelectorBarR = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
}
});
videojs.RangeSelectorBarR.prototype.init_ = function() {};
videojs.RangeSelectorBarR.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-barselector-right',
innerHTML: '<span class="vjs-time-text">00:00</span>'
});
};
// -- Player--> ControlBar--> BackAnDisplay--> AnDisplay
/**
* Show the annotations in a panel
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.AnDisplay = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
this.on('mousedown', this.onMouseDown);
this.on('mouseover', this.onMouseOver);
}
});
videojs.AnDisplay.prototype.init_ = function() {
this.rs = this.player_.rangeslider;
this.an = this.player_.annotations;
this.transition = false;
};
videojs.AnDisplay.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-anpanel-annotation',
});
};
videojs.AnDisplay.prototype.onMouseDown = function(event) {
var elem = $(event.target).parents('.annotator-hl').andSelf();
var _self = this;
if (elem.hasClass("annotator-hl")) {
videojs.on(document, "mouseup", videojs.bind(this, this.onMouseUp));
// Clone the bar box to make the animation
var boxup = document.createElement('div');
var ElemTop = parseFloat(elem[1].style.top);
var ElemMargin = parseFloat(elem[1].style.marginTop);
var emtoPx = parseFloat($(elem[1]).css('height'));
var isPoint = $(elem[1]).hasClass("point");
boxup.className = isPoint ? "boxup-dashed-line point" : "boxup-dashed-line";
boxup.style.left = elem[1].style.left;
boxup.style.width = elem[1].style.width;
boxup.style.top = (ElemTop + ElemMargin - this.el_.scrollTop / emtoPx) + 'em';
elem[0].parentNode.parentNode.appendChild(boxup);
}
}
videojs.AnDisplay.prototype.onMouseUp = function(event) {
if (typeof this.lastelem === 'undefined')
return false;
var elem = this.lastelem;
var _self = this;
if (elem.hasClass("annotator-hl")) {
var annotation = elem.map(function() {
return $(this).data("annotation");
})[0];
var displayHeight = (-1) * parseFloat($(this.el_).parent()[0].style.top);
var emtoPx = parseFloat($(elem[1]).css('height'));
if (typeof $(elem).parent().parent().find('.boxup-dashed-line')[0] !== 'undefined') {
$(elem).parent().parent().find('.boxup-dashed-line')[0].style.top = (displayHeight - 2) + 'em';
}
this.an.player.pause();
this.transition = true;
window.setTimeout(function () {
_self.an.showAnnotation(annotation);
_self.transition = false;
_self.onCloseViewer();
}, 900);
}
videojs.off(document, "mouseup", this.onMouseUp, false);
};
videojs.AnDisplay.prototype.onMouseOver = function(event) {
if (!this.transition && !this.an.rsdl.pressed && !this.an.rsdr.pressed) {
var annotator = this.an.annotator;
var elem = $(event.target).parents('.annotator-hl').andSelf();
// if there is a opened annotation then show the new annotation mouse over
if (typeof annotator !== 'undefined' && annotator.viewer.isShown() && elem.hasClass("annotator-hl")) {
// hide the last open viewer
annotator.viewer.hide();
// get the annotation over the mouse
var annotations = elem.map(function() {
return $(this).data("annotation");
});
// show the annotation in the viewer
annotator.showViewer($.makeArray(annotations), Util.mousePosition(event, annotator.wrapper[0]));
}
// create dashed line
elem.addClass('active');
if (typeof elem !== 'undefined' && $(elem[1]).hasClass('annotation')) {
// create dashed line under the bar
var dashed = document.createElement('div');
var boxdown = document.createElement('div');
var DisplayHeight = parseFloat(this.an.BackAnDisplay.el_.style.height);
var ElemMarginTop = elem[1].style.marginTop !== '' ? parseFloat(elem[1].style.marginTop) : 0;
var ElemTop = parseFloat(elem[1].style.top) + ElemMarginTop;
var emtoPx = parseFloat($(elem[1]).css('height'));
var isPoint = $(elem[1]).hasClass("point");
dashed.className = isPoint ? 'dashed-line point' : 'dashed-line';
boxdown.className = "box-dashed-line";
dashed.style.left = boxdown.style.left = elem[1].style.left;
dashed.style.width = boxdown.style.width = isPoint ? '0' : elem[1].style.width;
dashed.style.top = ((ElemTop + 1) - this.el_.scrollTop / emtoPx) + 'em';
dashed.style.height = ((DisplayHeight - ElemTop + 2) + this.el_.scrollTop / emtoPx) + 'em'; // get the absolute value of the top to put in the height
boxdown.style.top = (DisplayHeight + 2) + 'em';
elem[0].parentNode.parentNode.appendChild(dashed);
elem[0].parentNode.parentNode.appendChild(boxdown);
$(this.player).find('.vjs-play-progress').css('z-index', 2);
$(this.player).find('.vjs-seek-handle').css('z-index', 2);
}
// store the last selected item
if (elem.hasClass("annotator-hl"))
this.lastelem = elem;
}
};
videojs.AnDisplay.prototype.onCloseViewer = function() {
if (!this.transition) {
if (typeof this.lastelem !== 'undefined')
this.lastelem.removeClass('active');
// remove dashed line
if (typeof this.lastelem !== 'undefined' && this.lastelem.hasClass("annotator-hl")) {
$(this.lastelem).parent().parent().find('.dashed-line').remove();
$(this.lastelem).parent().parent().find('.box-dashed-line').remove();
$(this.lastelem).parent().parent().find('.boxup-dashed-line').remove();
$(this.player).find('.vjs-play-progress').css('z-index', "");
$(this.player).find('.vjs-seek-handle').css('z-index', "");
}
}
};
videojs.AnDisplay.prototype.countVisibles = function() {
var AnArray = $.makeArray(this.el_.children);
// Count visible annotations in Panel
var count = 0;
for (var index in AnArray) {
var an = AnArray[index];
if (an.style.display !== 'none') {
count++;
}
}
return count;
};
// -- Player--> ControlBar--> BackAnDisplay--> AnStat
/**
* Display with a chart with the statistics of the number of Annotations
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.AnStat = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
this.marginTop = 20;
this.marginBottom = 0;
}
});
videojs.AnStat.prototype.init_ = function() {
this.rs = this.player_.rangeslider;
this.an = this.player_.annotations;
this.canvas = this.el_.children[0];
};
videojs.AnStat.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-anstat-annotation',
innerHTML: '<canvas class="vjs-char-anstat-annotation">Your browser does not support the HTML5 canvas tag.</canvas>',
});
};
videojs.AnStat.prototype.paintCanvas = function() {
var ctx = this.canvas.getContext("2d");
var points = this._getPoints();
var w = this._getWeights(points);
var maxEn = this._getMaxArray(points, 'entries');
var TotAn = this.an.AnDisplay.el_.children.length;
var duration = this.an.player.duration();
// set the position of the canvas
this.canvas.style.marginTop = Math.round(this.marginTop) + 'px';
// Add the Max Concentration and Number of annotations
if($(this.canvas).parent().find('.vjs-totan-anstat-annotation').length === 0) {
$(this.canvas).parent().append('<div class="vjs-totan-anstat-annotation">');
$(this.canvas).parent().append('<div class="vjs-maxcon-anstat-annotation">');
}
var textCanvas = $(this.canvas).parent().find('.vjs-totan-anstat-annotation')[0];
textCanvas.innerHTML = TotAn + ' total annotations';
var textCanvas = $(this.canvas).parent().find('.vjs-maxcon-anstat-annotation')[0];
textCanvas.innerHTML = 'Max Annotations = ' + maxEn;
// Added dashed line function to paint
if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo) {
CanvasRenderingContext2D.prototype.dashedLine = function(x1, y1, x2, y2, dashLen) {
if (dashLen === undefined) dashLen = 2;
this.beginPath();
this.moveTo(x1, y1);
var dX = x2 - x1;
var dY = y2 - y1;
var dashes = Math.floor(Math.sqrt(dX * dX + dY * dY) / dashLen);
var dashX = dX / dashes;
var dashY = dY / dashes;
var q = 0;
while (q++ < dashes) {
x1 += dashX;
y1 += dashY;
this[q % 2 == 0 ? 'moveTo' : 'lineTo'](x1, y1);
}
this[q % 2 == 0 ? 'moveTo' : 'lineTo'](x2, y2);
this.stroke();
this.closePath();
};
};
// set the canvas size
this.canvas.height = this.an.AnDisplay.el_.offsetHeight - (this.marginTop + this.marginBottom);
this.canvas.width = this.an.AnDisplay.el_.offsetWidth;
ctx.beginPath();
ctx.strokeStyle = "rgb(255, 163, 0)";
var lastSe = 0;
var lastEn = 0;
ctx.moveTo(0, maxEn * w.Y); // Move pointer to 0, 0
for (var index in points) {
var p = points[index];
var x1 = lastSe * w.X, y1 = (maxEn - lastEn) * w.Y; // Old Point
var x2 = p.second * w.X, y2 = (maxEn - p.entries) * w.Y; // New Point
// new line
ctx.lineTo(x2, y1); // move horizontally to the new point
ctx.moveTo(x2, y1); // Move pointer
ctx.lineTo(x2, y2); // move vertically to the new point height
ctx.moveTo(x2, y2); // Prepare pointer for a new instance
// new rectangle under the curve
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(x1, y1, (x2 - x1), (maxEn * w.Y - y1));
// store the last point
lastSe = p.second;
lastEn = p.entries;
}
// set the graphic to the end of the video
ctx.lineTo(lastSe * w.X, maxEn * w.Y);
ctx.moveTo(lastSe * w.X, maxEn * w.Y);
ctx.lineTo(duration * w.X, maxEn * w.Y);
ctx.stroke();
// dashed line down
ctx.beginPath();
ctx.dashedLine(0, maxEn * w.Y, duration * w.X, maxEn * w.Y, 8);
ctx.stroke();
// dashed line top
ctx.beginPath();
ctx.dashedLine(0, 0, duration * w.X, 0, 8);
ctx.stroke();
};
videojs.AnStat.prototype._getWeights = function(points){
var weight = {};
var panel = $(this.an.AnDisplay.el_);
var maxSe = this.an.player.duration();
var maxEn = this._getMaxArray(points, 'entries');
var panelW = parseFloat(panel.css('width'));
var panelH = parseFloat(panel.css('height')) - (this.marginTop + this.marginBottom);
weight.X = maxSe != 0 ? (panelW / maxSe) : 0;
weight.Y = maxEn != 0 ? (panelH / maxEn) : 0;
return weight;
};
videojs.AnStat.prototype._getMaxArray = function(points, variable) {
var highest = 0;
var tmp;
for (var index in points) {
tmp = points[index][variable];
if (tmp > highest) highest = tmp;
}
return highest;
};
videojs.AnStat.prototype._getPoints = function() {
var points = [];
var allannotations = this.an.annotator.plugins.Store.annotations;
for (var index in allannotations) {
var an = allannotations[index];
var start, end;
if (this.an._isVideoJS(an)) {
start = an.rangeTime.start;
end = an.rangeTime.end;
// start
if (!this._isFound(points, start)) {
points.push({
second:an.rangeTime.start,
entries:this._getNumberAnnotations(start)
});
if (an.rangeTime.start == an.rangeTime.end){ // is a point
points.push({
second:an.rangeTime.end,
entries:this._getNumberAnnotations(end, true)
});
}
}
// end
if (!this._isFound(points, end)) {
points.push({
second:an.rangeTime.end,
entries:this._getNumberAnnotations(end, true)
});
}
found = false;
}
}
points.sort(function(a, b) {
return parseFloat(a.second) - parseFloat(b.second)
});
return points;
};
videojs.AnStat.prototype._isFound = function(array, elem) {
var found = false;
for (var indexA in array) {
if(typeof array[indexA].second !== 'undefined' && array[indexA].second == elem)
found = true;
}
return found;
};
videojs.AnStat.prototype._getNumberAnnotations = function(time, end) {
var num = (typeof end !== 'undefined' && end) ? -1 : 0;
var allannotations = this.an.annotator.plugins['Store'].annotations;
for (var index in allannotations) {
var an = allannotations[index];
if (this.an._isVideoJS(an)) {
if(an.rangeTime.start <= time && an.rangeTime.end >= time)
num++;
}
}
return num;
};
// -- Player--> ControlBar--> BackAnDisplayScroll
/**
* The background annotations panel
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.BackAnDisplayScroll = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
this.on('mousedown', this.onMouseDown);
this.UpValue = 0.1;
this.currentValue = 0;
}
});
videojs.BackAnDisplayScroll.prototype.init_ = function() {
this.rs = this.player_.rangeslider;
this.an = this.player_.annotations;
this.mousedownID = -1;
var self = this;
var direction;
// Firefox
$(this.an.AnDisplay.el_).bind('DOMMouseScroll', function(e) {
if (e.originalEvent.detail > 0)
direction = self.UpValue;
else
direction = -self.UpValue;
self.an.backDSBarSel.setPosition(self.getPercentScroll() + direction);
return false;
});
// IE, Opera, Safari
$(this.an.AnDisplay.el_).bind('mousewheel', function(e) {
if (e.originalEvent.wheelDelta < 0)
direction = self.UpValue;
else
direction = -self.UpValue;
self.an.backDSBarSel.setPosition(self.getPercentScroll() + direction);
return false;
});
};
videojs.BackAnDisplayScroll.prototype.options_ = {
children: {
'BackAnDisplayScrollBar': {},
'BackAnDisplayScrollTime': {},
}
};
videojs.BackAnDisplayScroll.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-scroll-anpanel-annotation',
innerHTML: '<div class="vjs-up-scroll-annotation"></div><div class="vjs-down-scroll-annotation"></div>',
});
};
videojs.BackAnDisplayScroll.prototype.onMouseDown = function(event) {
var self = this;
if (event.target.className === 'vjs-scrollbar-anpanel-annotation') {
// change position with a click in the scrollbar
this.an.backDSBarSel.onMouseMove(event);
return false;
} else if (event.target.className === 'vjs-scrollbar-selector') {
// change position with scrollbar
// this event is controlled by this.an.backDSBarSel
return false;
} else {
// change position with arrows
var direction = event.target.className=='vjs-down-scroll-annotation' ? this.UpValue : -this.UpValue;
videojs.on(document, "mouseup", videojs.bind(this, this.onMouseUp));
if(parseInt(this.mousedownID, 10) === -1) { // Prevent multimple loops!
this.mousedownID = setInterval(function () {
var pos = Math.max(0, Math.min(1, self.getPercentScroll() + direction));
self.an.backDSBarSel.setPosition(pos);
}, 100);
}
}
};
videojs.BackAnDisplayScroll.prototype.onMouseUp = function(event) {
videojs.off(document, "mouseup", this.onMouseUp, false);
var self = this;
if(parseInt(this.mousedownID, 10) != -1) { // Only stop if exists
clearInterval(this.mousedownID);
self.mousedownID = -1;
}
};
videojs.BackAnDisplayScroll.prototype.getPercentScroll = function() {
var scroll = this.an.AnDisplay.el_;
var maxscroll = scroll.scrollHeight - scroll.offsetHeight;
var currentValue = scroll.scrollTop;
return Math.max(0, Math.min(1, maxscroll !== 0 ? (currentValue / maxscroll) : 0));
};
videojs.BackAnDisplayScroll.prototype.setPercentScroll = function(percent) {
var scroll = this.an.AnDisplay.el_;
var maxscroll = scroll.scrollHeight-scroll.offsetHeight;
percent = Math.max(0, Math.min(1, percent ? percent : 0));
scroll.scrollTop = Math.round(maxscroll * percent);
};
// -- Player--> ControlBar--> BackAnDisplayScroll--> BackAnDisplayScrollBar
/**
* The Scroll bar for the display
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.BackAnDisplayScrollBar = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
}
});
videojs.BackAnDisplayScrollBar.prototype.init_ = function() {};
videojs.BackAnDisplayScrollBar.prototype.options_ = {
children: {
'ScrollBarSelector': {},
}
};
videojs.BackAnDisplayScrollBar.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-scrollbar-anpanel-annotation',
});
};
// -- Player--> ControlBar--> BackAnDisplayScroll--> BackAnDisplayScrollBar--> ScrollBarSelector
/**
* The Scroll bar for the display
* @param {videojs.Player|Object} player
* @param {Object=} options
* @constructor
*/
videojs.ScrollBarSelector = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
this.on('mousedown', this.onMouseDown);
}
});
videojs.ScrollBarSelector.prototype.init_ = function() {
this.rs = this.player_.rangeslider;
this.an = this.player_.annotations;
videojs.addClass(this.an.backDSBar.el_, 'disable');
};
videojs.ScrollBarSelector.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-scrollbar-selector',
});
};
videojs.ScrollBarSelector.prototype.onMouseDown = function(event) {
event.preventDefault();
videojs.on(document, "mousemove", videojs.bind(this, this.onMouseMove));
videojs.on(document, "mouseup", videojs.bind(this, this.onMouseUp));
}
videojs.ScrollBarSelector.prototype.onMouseUp = function(event) {
videojs.off(document, "mousemove", this.onMouseMove, false);
videojs.off(document, "mouseup", this.onMouseUp, false);
};
videojs.ScrollBarSelector.prototype.onMouseMove = function(event) {
var top = this.calculateDistance(event);
top = this.parseMaxPercent(top); // set the max value fixing the height of the handle
this.setPosition(top);
}
videojs.ScrollBarSelector.prototype.calculateDistance = function(event) {
var scrollY = this.getscrollY();
var scrollH = this.getscrollHeight();
var handleH = this.getHeight();
// Adjusted X and Width, so handle doesn't go outside the bar
scrollY = scrollY + (handleH);
scrollH = scrollH - (handleH);
// Adjusted X and Width, so handle doesn't go outside the bar
// Percent that the click is through the adjusted area
return Math.max(0, Math.min(1, (event.pageY - scrollY) / scrollH));
};
videojs.ScrollBarSelector.prototype.getscrollHeight = function() {
return this.el_.parentNode.offsetHeight;
};
videojs.ScrollBarSelector.prototype.getscrollY = function() {
return videojs.findPosition(this.el_.parentNode).top;
};
videojs.ScrollBarSelector.prototype.getHeight = function() {
return this.el_.offsetHeight;
};
videojs.ScrollBarSelector.prototype.parseMaxHeight = function(top) {
var scrollH = this.getscrollHeight();
var handleH = this.getHeight();
var percent = handleH / scrollH;
return Math.max(0, Math.min(1 - percent, top));
};
videojs.ScrollBarSelector.prototype.parseMaxPercent = function(top) {
var scrollH = this.getscrollHeight();
var handleH = this.getHeight();
var percent = handleH / scrollH;
var newTop = top;
if (top >= (1 - percent))
newTop = 1;
return newTop;
};
videojs.ScrollBarSelector.prototype.setPosition = function(top, showBar) {
var showBar = typeof showBar !== 'undefined' ? showBar : true;
// Check for invalid position
if (isNaN(top))
return false;
// Check if there is enough annotations to scroll
if (!this.isScrollable())
return false;
// Show the Scrollbar
if (showBar) {
videojs.removeClass(this.an.backDSBar.el_, 'disable')
}
// Alias
var Obj = this.el_;
var scroll = this.an.BackAnDisplayScroll;
var scrollTime = this.an.backDSTime;
Obj.style.top = (this.parseMaxHeight(top) * 100) + '%';
scroll.setPercentScroll(top);
// Set the times in the scroll time panel
scrollTime.setTimes();
// Hide the Scrollbar in 1 sec
if(showBar) {
var _self = this;
if (typeof this.Timeout !== 'undefined')
clearTimeout(this.Timeout);
this.Timeout = window.setTimeout(function () {
videojs.addClass(_self.an.backDSBar.el_, 'disable');
}, 1000);
}
// set current position
this.an.BackAnDisplayScroll.currentValue = top;
return true;
}
videojs.ScrollBarSelector.prototype.isScrollable = function() {
var scroll = this.an.AnDisplay.el_;
var emtoPx = parseFloat($(scroll).find('.annotation').css('height'));
var minTop = parseInt(scroll.offsetHeight/emtoPx);
// Count visible annotations in Panel
var count = this.an.AnDisplay.countVisibles();
return (count > minTop);
}
// -- Player--> ControlBar--> BackAnDisplayScroll--> BackAnDisplayScrollTime
videojs.BackAnDisplayScrollTime = videojs.Component.extend({
/** @constructor */
init: function(player, options) {
videojs.Component.call(this, player, options);
}
});
videojs.BackAnDisplayScrollTime.prototype.init_ = function() {
this.rs = this.player_.rangeslider;
this.an = this.player_.annotations;
};
videojs.BackAnDisplayScrollTime.prototype.createEl = function() {
return videojs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-scrolltime-anpanel-annotation',
innerHTML: '<div class="vjs-up-scrolltime-annotation"><span class="vjs-time-text"></span></div><div class="vjs-down-scrolltime-annotation"><span class="vjs-time-text"></span></div>',
});
};
videojs.BackAnDisplayScrollTime.prototype.setTimes = function() {
var AnPos = this.getAnnotationPosition();
var AnEl = this.getElements(AnPos);
var AnTimes = this.getTimes(AnEl);
if (AnTimes.top != 'Invalid Date') {
$(this.el_).find('.vjs-up-scrolltime-annotation')[0].style.visibility = '';
$(this.el_).find('.vjs-up-scrolltime-annotation span')[0].innerHTML = AnTimes.top;
} else {
$(this.el_).find('.vjs-up-scrolltime-annotation')[0].style.visibility = 'hidden';
}
if (AnTimes.bottom != 'Invalid Date') {
$(this.el_).find('.vjs-down-scrolltime-annotation')[0].style.visibility = '';
$(this.el_).find('.vjs-down-scrolltime-annotation span')[0].innerHTML = AnTimes.bottom;
} else {
$(this.el_).find('.vjs-down-scrolltime-annotation')[0].style.visibility = 'hidden';
}
};
videojs.BackAnDisplayScrollTime.prototype.getAnnotationPosition = function() {
var backDSBarSel = this.an.backDSBarSel;
var percent = backDSBarSel.parseMaxPercent(parseFloat(backDSBarSel.el_.style.top) / 100);
var scroll = this.an.AnDisplay.el_;
var maxTop = scroll.scrollHeight;
var minTop = scroll.offsetHeight;
var maxBottom = maxTop - minTop;
var minBottom = 0;
var pos = {};
percent = percent || 0;
pos.top = Math.max(minTop, Math.min(maxTop, maxBottom * percent + scroll.offsetHeight));
pos.bottom = Math.max(minBottom, Math.min(maxBottom, maxBottom * percent));
return pos;
};
videojs.BackAnDisplayScrollTime.prototype.getElements = function(AnPos) {
var AnPos = AnPos || {};
var scroll = this.an.AnDisplay.el_;
var emtoPx = parseFloat($(scroll).find('.annotation').css('height'));
var maxTop = parseInt(scroll.scrollHeight / emtoPx);
var minTop = parseInt(scroll.offsetHeight / emtoPx);
var maxBottom = (maxTop - minTop);
var minBottom = 0;
var AnEl = {};
AnEl.top = Math.max(minTop, Math.min(maxTop, parseInt(AnPos.top / emtoPx)));
AnEl.bottom = Math.max(minBottom, Math.min(maxBottom, parseInt(AnPos.bottom / emtoPx)));
return AnEl;
};
videojs.BackAnDisplayScrollTime.prototype.getTimes = function(AnEl) {
var AnEl = AnEl || {};
var AnTimes = {};
var TopEl, BottomEl, AnTop, AnBottom;
var AnArray = $.makeArray(this.an.AnDisplay.el_.children);
AnEl.top = AnEl.top || 0;
AnEl.bottom = AnEl.bottom || 0;
// Get HTML Elements
var count = 0;
var lastEl;
for (var index in AnArray) {
var an = AnArray[index];
if (an.style.display !== 'none') {
if (count == AnEl.bottom) {
TopEl = an;
} else if (count == AnEl.top) {
BottomEl = an;
}
lastEl = an;
count++;
}
}
if (typeof BottomEl === 'undefined')
BottomEl = lastEl;
// Annotation Element
AnTop = typeof TopEl !== 'undefined' ? $.data(TopEl, 'annotation') : undefined;
AnBottom = typeof BottomEl !== 'undefined' ? $.data(BottomEl, 'annotation') : undefined;
// Update of the element
AnTimes.top = (typeof AnTop !== 'undefined' && typeof AnTop.updated !== 'undefined') ? AnTop.updated : '';
AnTimes.bottom = (typeof AnBottom !=='undefined' && typeof AnBottom.updated !== 'undefined') ? AnBottom.updated : '';
// Format
AnTimes.top = new Date(AnTimes.top !== '' ? createDateFromISO8601(AnTimes.top) : '');
AnTimes.bottom = new Date(AnTimes.bottom != '' ? createDateFromISO8601(AnTimes.bottom) : '');
return AnTimes;
};
}) ();
// ----------------Plugin for Annotator to setup videojs---------------- //
Annotator.Plugin.VideoJS = (function(_super) {
__extends(VideoJS, _super);
// constructor
function VideoJS() {
this.pluginSubmit = __bind(this.pluginSubmit, this);
_ref = VideoJS.__super__.constructor.apply(this, arguments);
this.__indexOf = [].indexOf || function(item) {
for (var i = 0, l = this.length; i < l; i++) {
if (i in this && this[i] === item)
return i;
}
return -1;
};
return _ref;
};
VideoJS.prototype.field = null;
VideoJS.prototype.input = null;
VideoJS.prototype.pluginInit = function() {
console.log("VideoJS-pluginInit");
// Check that annotator is working
if (!Annotator.supported()) {
return;
}
// -- Editor
this.field = this.annotator.editor.addField({
id: 'vjs-input-rangeTime-annotations',
type: 'input', // options (textarea, input, select, checkbox)
submit: this.pluginSubmit,
EditVideoAn: this.EditVideoAn
});
// Modify the element created with annotator to be an invisible span
var select = '<li><span id="vjs-input-rangeTime-annotations"></span></li>';
var newfield = Annotator.$(select);
Annotator.$(this.field).replaceWith(newfield);
this.field = newfield[0];
// -- Listener for Open Video Annotator
this.initListeners();
return this.input = $(this.field).find(':input');
};
// New JSON for the database
VideoJS.prototype.pluginSubmit = function(field, annotation) {
console.log("Plug-pluginSubmit");
// Select the new JSON for the Object to save
if (this.EditVideoAn()) {
var annotator = this.annotator;
var index = annotator.editor.VideoJS;
var player = annotator.mplayer[index];
var rs = player.rangeslider;
var time = rs.getValues();
var isYoutube = (player && typeof player.techName !== 'undefined') ? (player.techName === 'Youtube') : false;
var isNew = typeof annotation.media === 'undefined';
var ext;
var type = player.options_.sources[0].type.split("/") || "";
if (isNew)
annotation.media = typeof type[0] !== 'undefined' ? type[0] : "video"; // - media (by default: video)
annotation.target = annotation.target || {}; // - target
annotation.target.container = player.id_ || ""; // - target.container
annotation.target.src = player.options_.sources[0].src || ""; // - target.src (media source)
ext = (player.options_.sources[0].src.substring(player.options_.sources[0].src.lastIndexOf("."))).toLowerCase();
ext = isYoutube ? 'Youtube' : ext; // The extension for youtube
annotation.target.ext = ext || ""; // - target.ext (extension)
annotation.rangeTime = annotation.rangeTime || {}; // - rangeTime
annotation.rangeTime.start = time.start || 0; // - rangeTime.start
annotation.rangeTime.end = time.end || 0; // - rangeTime.end
annotation.updated = new Date().toISOString(); // - updated
if (typeof annotation.created === 'undefined')
annotation.created = annotation.updated; // - created
// show the new annotation
var eventAn = isNew ? "annotationCreated" : "annotationUpdated";
function afterFinish(){
player.annotations.showAnnotation(annotation);
annotator.unsubscribe(eventAn, afterFinish);
};
annotator.subscribe(eventAn, afterFinish); // show after the annotation is in the back-end
} else {
if (typeof annotation.media === 'undefined')
annotation.media = "text"; // - media
annotation.updated = new Date().toISOString(); // - updated
if (typeof annotation.created === 'undefined')
annotation.created = annotation.updated; // - created
}
return annotation.media;
};
// ------ Methods ------ //
// Detect if we are creating or editing a video-js annotation
VideoJS.prototype.EditVideoAn = function () {
var wrapper = $('.annotator-wrapper').parent()[0];
var annotator = window.annotator = $.data(wrapper, 'annotator');
var isOpenVideojs = (typeof annotator.mplayer !== 'undefined');
var VideoJS = annotator.editor.VideoJS;
return (isOpenVideojs && typeof VideoJS !== 'undefined' && VideoJS !== -1);
};
// Detect if the annotation is a video-js annotation
VideoJS.prototype.isVideoJS = function (an) {
var wrapper = $('.annotator-wrapper').parent()[0];
var annotator = window.annotator = $.data(wrapper, 'annotator');
var rt = an.rangeTime;
var isOpenVideojs = (typeof annotator.mplayer !== 'undefined');
var isVideo = (typeof an.media !== 'undefined' && (an.media === 'video' || an.media === 'audio'));
var isNumber = (typeof rt !== 'undefined' && !isNaN(parseFloat(rt.start)) && isFinite(rt.start) && !isNaN(parseFloat(rt.end)) && isFinite(rt.end));
return (isOpenVideojs && isVideo && isNumber);
};
// Delete Video Annotation
VideoJS.prototype._deleteAnnotation = function(an) {
var target = an.target || {};
var container = target.container || {};
var player = this.annotator.mplayer[container];
var annotator = this.annotator;
var annotations = annotator.plugins.Store.annotations;
var tot = typeof annotations !== 'undefined' ? annotations.length : 0;
var attempts = 0; // max 100
// This is to watch the annotations object, to see when is deleted the annotation
var ischanged = function() {
var new_tot = annotator.plugins.Store.annotations.length;
if (attempts < 100)
setTimeout(function() {
if (new_tot !== tot) {
player.annotations.refreshDisplay(); // Reload the display of annotation
} else {
attempts++;
ischanged();
}
}, 100); // wait for the change in the annotations
};
ischanged();
player.rangeslider.hide(); // Hide Range Slider
};
// --Listeners
VideoJS.prototype.initListeners = function () {
var wrapper = $('.annotator-wrapper').parent()[0];
var annotator = $.data(wrapper, 'annotator');
var EditVideoAn = this.EditVideoAn;
var isVideoJS = this.isVideoJS;
var self = this;
// local functions
// -- Editor
function annotationEditorHidden(editor) {
if (EditVideoAn()){
var index = annotator.editor.VideoJS;
annotator.mplayer[index].rangeslider.hide(); // Hide Range Slider
annotator.an[index].refreshDisplay(); // Reload the display of annotations
}
annotator.editor.VideoJS=-1;
annotator.unsubscribe("annotationEditorHidden", annotationEditorHidden);
};
function annotationEditorShown(editor, annotation) {
for (var index in annotator.an){
annotator.an[index].editAnnotation(annotation, editor);
}
annotator.subscribe("annotationEditorHidden", annotationEditorHidden);
};
// -- Annotations
function annotationDeleted(annotation) {
if (isVideoJS(annotation))
self._deleteAnnotation(annotation);
};
// -- Viewer
function hideViewer(){
for (var index in annotator.an) {
annotator.an[index].AnDisplay.onCloseViewer();
}
annotator.viewer.unsubscribe("hide", hideViewer);
};
function annotationViewerShown(viewer, annotations) {
var separation = viewer.element.hasClass(viewer.classes.invert.y) ? 5 : -5;
var newpos = {
top: parseFloat(viewer.element[0].style.top)+separation,
left: parseFloat(viewer.element[0].style.left)
};
viewer.element.css(newpos);
// Remove the time to wait until disapear, to be more faster that annotator by default
viewer.element.find('.annotator-controls').removeClass(viewer.classes.showControls);
annotator.viewer.subscribe("hide", hideViewer);
};
// subscribe to Annotator
annotator.subscribe("annotationEditorShown", annotationEditorShown)
.subscribe("annotationDeleted", annotationDeleted)
.subscribe("annotationViewerShown", annotationViewerShown);
};
return VideoJS;
})(Annotator.Plugin);
// ----------------PUBLIC OBJECT TO CONTROL THE ANNOTATIONS---------------- //
// The name of the plugin that the user will write in the html
OpenVideoAnnotation = ("OpenVideoAnnotation" in window) ? OpenVideoAnnotation : {};
OpenVideoAnnotation.Annotator = function (element, options) {
// local variables
var $ = jQuery;
var options = options || {};
options.optionsAnnotator = options.optionsAnnotator || {};
options.optionsVideoJS = options.optionsVideoJS || {};
options.optionsRS = options.optionsRS || {};
options.optionsOVA = options.optionsOVA || {};
// if there isn't store optinos it will create a uri and limit variables for the Back-end of Annotations
if (typeof options.optionsAnnotator.store === 'undefined')
options.optionsAnnotator.store = {};
var store = options.optionsAnnotator.store;
if (typeof store.annotationData === 'undefined')
store.annotationData = {};
if (typeof store.annotationData.uri === 'undefined'){
var uri = location.protocol + '//' + location.host + location.pathname;
store.annotationData.store = {uri: uri};
}
if (typeof store.loadFromSearch === 'undefined')
store.loadFromSearch = {};
if (typeof store.loadFromSearch.uri === 'undefined')
store.loadFromSearch.uri = uri;
if (typeof store.loadFromSearch.limit === 'undefined')
store.loadFromSearch.limit = 10000;
// global variables
this.currentUser = null;
// -- Init all the classes --/
// Annotator
this.annotator = $(element).annotator(options.optionsAnnotator.annotator).data('annotator');
options.optionsOVA.optionsAnnotator = options.optionsAnnotator.annotator; // send the Annotator's options to OVA
// Video-JS
/*
mplayers -> Array with the html of all the video-js
mplayer -> Array with all the video-js that will be in the plugin
*/
var mplayers = $(element).find('div .video-js').toArray();
var mplayer = this.mplayer = {};
for (var index in mplayers) {
var id = mplayers[index].id;
var mplayer_ = videojs(mplayers[index], options.optionsVideoJS);
// solve a problem with firefox. In Firefox the src() function is loaded before charge the optionsVideoJS, and the techOrder are not loaded
if (vjs.IS_FIREFOX && typeof options.optionsVideoJS.techOrder !== 'undefined'){
mplayer_.options_.techOrder = options.optionsVideoJS.techOrder;
mplayer_.src(mplayer_.options_['sources']);
}
this.mplayer[id] = mplayer_;
}
// Video-JS
this.annotator.an = {}; // annotations video-js plugin to annotator
for (var index in this.mplayer) {
// to be their own options is necessary to extend deeply the options with all the childrens
this.mplayer[index].rangeslider($.extend(true, {}, options.optionsRS));
this.mplayer[index].annotations($.extend(true, {}, options.optionsOVA));
this.annotator.an[index]=this.mplayer[index].annotations;
}
// -- Experimental Global function for Open Video Annotator -- //
this.setCurrentUser = function (user) {
this.currentUser = user;
this.annotator.plugins["Permissions"].setUser(user);
}
// Local function to setup the keyboard listener
var focusedPlayer = this.focusedPlayer = ''; // variable to know the focused player
var lastfocusPlayer = this.lastfocusPlayer = '';
function onKeyUp(e) {
// skip the text areas
if (e.target.nodeName.toLowerCase() !== 'textarea')
mplayer[focusedPlayer].annotations.pressedKey(e.which);
};
(this._setupKeyboard = function() {
$(document).mousedown(function(e) {
focusedPlayer = '';
// Detects if a player was click
for (var index in mplayer) {
if ($(mplayer[index].el_).find(e.target).length)
focusedPlayer = mplayer[index].id_;
}
// Enter if we change the focus between player or go out of the player
if (lastfocusPlayer !== focusedPlayer) {
$(document).off("keyup", onKeyUp); // Remove the last listener
// set the key listener
if (focusedPlayer !== '')
$(document).on("keyup", onKeyUp);
}
lastfocusPlayer = focusedPlayer;
});
}) (this);
// -- Activate all the plugins -- //
// Annotator
if (typeof options.optionsAnnotator.auth !== 'undefined')
this.annotator.addPlugin('Auth', options.optionsAnnotator.auth);
if (typeof options.optionsAnnotator.permissions !== 'undefined')
this.annotator.addPlugin("Permissions", options.optionsAnnotator.permissions);
if (typeof options.optionsAnnotator.store !== 'undefined')
this.annotator.addPlugin("Store", options.optionsAnnotator.store);
if (typeof options.optionsAnnotator.diacriticMarks !== 'undefined' && typeof Annotator.Plugin["Diacritics"] === 'function')
this.annotator.addPlugin("Diacritics", options.optionsAnnotator.diacriticMarks);
if (typeof Annotator.Plugin["Geolocation"] === 'function')
this.annotator.addPlugin("Geolocation", options.optionsAnnotator.geolocation);
if (typeof Annotator.Plugin["Share"] === 'function')
this.annotator.addPlugin("Share", options.optionsAnnotator.share);
this.annotator.addPlugin("VideoJS"); // it is obligatory to have
if (typeof Annotator.Plugin["RichText"] === 'function')
this.annotator.addPlugin("RichText", options.optionsAnnotator.richText);
if (typeof Annotator.Plugin["Reply"] === 'function')
this.annotator.addPlugin("Reply");
if (typeof Annotator.Plugin["Flagging"] === 'function')
this.annotator.addPlugin("Flagging");
if (typeof options.optionsAnnotator.highlightTags !== 'undefined')
this.annotator.addPlugin("HighlightTags", options.optionsAnnotator.highlightTags);
// Will be add the player and the annotations plugin for video-js in the annotator
this.annotator.mplayer = this.mplayer;
this.annotator.editor.VideoJS = -1;
this.options = options;
return this;
}
// ----------------Local Functions for Open Video Annotator---------------- //
// --local functions
// if the annotation is a video return true
OpenVideoAnnotation.Annotator.prototype._isVideo = function(an) {
// Detect if the annotation is a Open Video Annotation
var an = an || {};
var rt = an.rangeTime;
var isVideo = (typeof an.media !== 'undefined' && (an.media === 'video' || an.media === 'audio'));
var hasContainer = (typeof an.target !== 'undefined' && typeof an.target.container !== 'undefined');
var isNumber = (typeof rt !== 'undefined' && !isNaN(parseFloat(rt.start)) && isFinite(rt.start) && !isNaN(parseFloat(rt.end)) && isFinite(rt.end));
return (isVideo && hasContainer && isNumber);
}
// if the ova has been loaded and the video is opened return true
OpenVideoAnnotation.Annotator.prototype._isloaded = function(idElem) {
return typeof this.mplayer[idElem].annotations.loaded !== 'undefined';
}
// ----------------Public Functions for Open Video Annotator---------------- //
// Create a new video annotation
OpenVideoAnnotation.Annotator.prototype.newVideoAn = function(idElem) {
var player = this.mplayer[idElem];
if (typeof player.play !== 'undefined') {
player.play();
player.one('playing', function() {
player.annotations.newan();
$('html, body').animate({
scrollTop: $("#" + player.id_).offset().top
}, 'slow');
player.pause();
});
}
};
// Show the annotation display
OpenVideoAnnotation.Annotator.prototype.showDisplay = function(idElem) {
if (this._isloaded(idElem))
return this.mplayer[idElem].annotations.showDisplay();
};
// Hide the annotation display
OpenVideoAnnotation.Annotator.prototype.hideDisplay = function(idElem) {
if (this._isloaded(idElem))
return this.mplayer[idElem].annotations.hideDisplay();
};
// Refresh the annotation display
OpenVideoAnnotation.Annotator.prototype.refreshDisplay = function(idElem) {
if (this._isloaded(idElem))
return this.mplayer[idElem].annotations.hideDisplay();
};
// Set the position of the big new annotation button
OpenVideoAnnotation.Annotator.prototype.setposBigNew = function(idElem, position) {
if (this._isloaded(idElem))
return this.mplayer[idElem].annotations.setposBigNew(position);
};
OpenVideoAnnotation.Annotator.prototype.playTarget = function (annotationId) {
var allannotations = this.annotator.plugins.Store.annotations;
var ovaId = annotationId;
var mplayer = this.mplayer;
for (var item in allannotations) {
var an = allannotations[item];
if (typeof an.id != 'undefined' && an.id == ovaId) { // this is the annotation
if (this._isVideo(an)) { // It is a video
for (var index in mplayer) {
var player = mplayer[index];
if (player.id_ == an.target.container && player.tech.options_.source.src === an.target.src){
var anFound = an;
var playFunction = function() {
// Fix problem with youtube videos in the first play. The plugin don't have this trigger
if (player.techName === 'Youtube') {
var startAPI = function() {
player.annotations.showAnnotation(anFound);
}
if (player.annotations.loaded)
startAPI();
else
player.one('loadedRangeSlider', startAPI); // show Annotations once the RangeSlider is loaded
} else {
player.annotations.showAnnotation(anFound);
}
$('html, body').animate({
scrollTop: $("#"+player.id_).offset().top
}, 'slow');
};
if (player.paused()) {
player.play();
player.one('playing', playFunction);
} else {
playFunction();
}
return false; // this will stop the code to not set a new player.one.
}
}
} else { // It is a text
var hasRanges = typeof an.ranges !== 'undefined' && typeof an.ranges[0] !== 'undefined';
var startOffset = hasRanges ? an.ranges[0].startOffset : '';
var endOffset = hasRanges ? an.ranges[0].endOffset : '';
if (typeof startOffset !== 'undefined' && typeof endOffset !== 'undefined') {
$(an.highlights).parent().find('.annotator-hl').removeClass('api');
// change the color
$(an.highlights).addClass('api');
// animate to the annotation
$('html, body').animate({
scrollTop: $(an.highlights[0]).offset().top
}, 'slow');
}
}
}
}
}