';
/* maybe not so important to fix>
if (inMarker.pos == outMarker.pos)
element.find('span').addClass('warning');
element = $('');
element.addClass('italic');
element.html('Press H for Help');
this.box.appendContent(element);
*/
/*
if (inMarker.pos == outMarker.pos)
this.box.button['link'].disable();
else
this.box.button['link'].enable();
*/
}
else {
var title = selectedBin.capitalize();
var html = '
';
this.layerBox[k].parent.find('#' + this.layerBox[k].name + 'Toolbar').append(credit);
if (!layers[k]['editable']) {
this.layerBox[k].button['edit'].disable();
this.layerBox[k].button['remove'].disable();
}
if (layers[k]['value_highlighted'])
this.layerBox[k].appendContent(layers[k]['value_highlighted']);
else
this.layerBox[k].appendContent(layers[k]['value_html']);
}
if (selectedLayer == k) {
$('#' + this.name + k + 'Content').addClass('selected')
if (k != -1)
this.layerBox[k].button['select'].change();
}
return '';
}
// ----------------------------------------------------------------------------
// Creator Bin prototype
// ----------------------------------------------------------------------------
/**
* @augments Bin
* @class Bin to hold Layer Creator information (from global "creator" array)
* @see creator
* @property {jQuery Object} parent
* @property {Object} checkbox Switch Object to check creator names (toggle hide and display of their layers)
* @property {Object} box Box Object
* @param {jQuery Object} parent Parent element to append Bin to
* @constructor
*/
function CreatorBin(parent) {
this.parent = parent;
this.checkbox = {};
}
/**
* Loads Bin Box, sets to default collapsed state
*/
CreatorBin.prototype.load = function() {
this.box = new Box(this.parent, 'user', 'binBox', true, false, false, 0);
this.box.load();
this.box.setTitle('Contributors');
t = this;
this.box.addSwitch('TopLeft', 'collapse', 'Collapse Contributors', function() { t.box.collapse() }, 'expand', 'Expand Contributors', function() { t.box.expand() });
this.box.collapse();
this.box.button['collapse'].change();
this.update();
}
/**
* Update Bin contents with names of all creators
* @see creator
*/
CreatorBin.prototype.update = function() {
this.box.clearContent();
if (creator.length > 0) {
for (var k in creator) {
var name = creator[k].name;
var element = $('');
element.addClass('creator');
element.attr('id', 'creator' + k);
this.box.appendContent(element);
// var parent = this.parent.find('#' + this.name + 'Buttons' + corner);
element = $('');
element.addClass('checkbox');
t = this;
function check(k) {
return function() { t.checkCreator(k) }
}
function uncheck(k) {
return function() { t.uncheckCreator(k) }
}
this.checkbox[name] = new Switch(element, 'unchecked', 'Show Layers by ' + name, check(k), 'checked', 'Hide Layers by ' + name, uncheck(k));
if (creator[k].state == 1)
this.checkbox[name].change();
$('#creator' + k).append(element);
element = $('');
element.addClass('name');
element.html(name);
$('#creator' + k).append(element);
}
}
else {
var element = $('');
element.addClass('disabled');
element.html('No Contributors');
this.box.appendContent(element);
}
}
/**
* Function called when a creator is checked. Sets creator state to 1. Loads layers.
*/
CreatorBin.prototype.checkCreator = function(k) {
creator[k].state = 1;
loadLayers();
}
/**
* Function called when a creator is unchecked. Sets creator state to 0 (Unloads creator's layers) and deselects current layer if is unchecked creator's.
*/
CreatorBin.prototype.uncheckCreator = function(k) {
creator[k].state = 0;
loadLayers();
if (selectedLayer != -1 && layers[selectedLayer].creator == creator[k]['name']) {
if (!selectNextLayer()) {
if (typeof(bin[selectedBin].layerBox) != 'undefined')
bin[selectedBin].layerBox[selectedLayer].button['select'].change();
bin[selectedBin].deselectLayer();
}
}
}
// ----------------------------------------------------------------------------
// Layer functions
// ----------------------------------------------------------------------------
// fixme: wrap an object around these functions
/**
* Sets global variable layerState to state.
* States: 0 (show layers at marker), 1 (show layers in selection)
* @param {Int} state State to set layerState to.
*/
function setLayerState(state) {
/*
layerState: 0 (show layers at marker), 1 (show layers in selection)
*/
layerState = state;
if (selectedLayer != -1) {
if (layerState == 0) {
if (playMarker.pos < layers[selectedLayer]['time_in'] || playMarker.pos >= layers[selectedLayer]['time_out'])
bin[selectedBin].deselectLayer();
}
else if (layerState == 1) {
if (inMarker.pos == outMarker.pos || inMarker.pos >= layers[selectedLayer]['time_out'] || outMarker.pos <= layers[selectedLayer]['time_in'])
bin[selectedBin].deselectLayer();
}
}
loadLayers();
}
/**
* Load all current and active layers
*/
function loadLayers() {
for (var k in bin)
bin[k].layers = [];
for (var k in layers) {
var v = layers[k]
if (creator[getCreator(v['creator'])].state == 1) {
if (layerState == 0) {
if (playMarker.pos >= v['time_in'] && playMarker.pos < v['time_out'])
bin[v['track']].layers.push(k);
}
else if (layerState == 1) {
if (inMarker.pos != outMarker.pos && inMarker.pos < v['time_out'] && outMarker.pos > v['time_in'])
bin[v['track']].layers.push(k);
}
}
}
for (var k in bin) {
if (selectedSort == 'name')
bin[k].layers.sort(sortBinLayersByName);
else if (selectedSort == 'duration')
bin[k].layers.sort(sortBinLayersByDuration);
if (bin[k]['loaded'])
bin[k].update();
}
}
/**
* Load unique edit points in layers and sort them. Store in global variable (Array) called edit.
*/
function loadEdits() {
edit = [];
for (var k in layers) {
edit.push(layers[k].time_in);
edit.push(layers[k].time_out);
}
edit = unique(edit);
edit.sort(sortEdits);
}
/**
* Load creators - store in global variable (Array) called creator (with creator.state and creator.name)
*/
function loadCreators() {
var creatorName = [];
for (var k in layers)
creatorName.push(layers[k].creator);
creatorName = unique(creatorName);
if (typeof(creator) != 'undefined') {
var creatorState = {};
for (var k in creator)
creatorState[creator[k].name] = creator[k].state;
}
creator = [];
for (var k in creatorName) {
if (typeof(creatorState) != 'undefined' && typeof(creatorState[creatorName[k]]) != 'undefined')
var state = creatorState[creatorName[k]];
else
var state = 1;
creator[k] = {'name': creatorName[k], 'state': state};
}
creator.sort(sortCreators);
}
/**
* Gets the Bin ('track') for passed id
* @param {String} id Id of layer (Layer ID from DB)
* @returns {String} track Currently "keyword", "location", "description", or "transcript"
* @throws {Int} -1 If doesn't find layer matching id
*/
function getBin(id) {
// fixme: getBin and getLayer may usually be called together - so maybe they should be one function
for (var k in layers) {
if (layers[k].id == id)
return layers[k].track;
}
return -1;
}
/**
* Gets layer matching id passed
* @param {String} id Id of layer (layer Id from Db)
* @returns {Int} Array index of matching layer
* @throws {Int} -1 if does not find layer with id
*/
function getLayer(id) {
for (var k in layers) {
if (layers[k]['id'] == id)
return k;
}
return -1;
}
/**
* Gets creator array index matching name passed
* @param {String} Creator name
* @returns {Int} k Array index of matching creator in global variable creator.
* @throws {Int} -1 If it does not find a creator name matching name passed.
*/
function getCreator(name) {
for (var k in creator) {
if (creator[k]['name'] == name)
return k;
}
return -1;
}
/**
* Selects next layer and returns true. Returns false if there are no layers.
* @returns {Boolean} true
* @throws {Boolean} false
*/
function selectNextLayer() {
var length = 0;
for (var k in bin)
length += bin[k].layers.length;
if (length > 0) {
var nextBin = selectedBin;
var nextLayer = selectedLayer;
while (nextBin == '' || bin[nextBin].layers.length == 0 || bin[nextBin].layers.indexOf(nextLayer) == bin[nextBin].layers.length - 1) {
if (nextBin == '' || nextBin == binName[binName.length - 1])
nextBin = binName[0];
else
nextBin = binName[binName.indexOf(nextBin) + 1];
nextLayer = -1;
}
if (nextLayer == -1)
nextLayer = bin[nextBin].layers[0];
else
nextLayer = bin[nextBin].layers[parseInt(bin[nextBin].layers.indexOf(nextLayer)) + 1];
if (typeof(bin[nextBin].layerBox) != 'undefined')
bin[nextBin].layerBox[nextLayer].button['select'].change();
bin[nextBin].selectLayer(nextLayer);
return true;
}
else
return false;
}
/**
* Get previous edit point.
* @returns {Int} Timecode of previous edit, in miliseconds or 0 if no previous edit point.
*/
function getPreviousEdit() {
if (edit.length == 0 || edit[0] >= playViewer.pos)
return 0;
for (k in edit) {
if (edit[k] >= playViewer.pos)
return edit[k - 1];
}
return edit[edit.length-1];
}
/**
* Get Next edit point.
* @returns {Int} Timecode of next edit, in miliseconds. If at last edit point, returns video.duration
*/
function getNextEdit() {
for (k in edit) {
if (edit[k] > playViewer.pos)
return edit[k];
}
return video.duration;
}
/**
* Check if there is an edit point between two timecodes
* @param {Int} pos0 First time-code, in miliseconds
* @param {Int} pos1 Second time-code, in miliseconds (pos1 does not have to be > pos0, the function checks for this)
* @returns {Boolean} True if there is a value in edit[] array in between two time-codes, False if not.
*/
function crossesEdit(pos0, pos1) {
if (pos0 == pos1)
return false;
if (pos0 > pos1) {
var pos = pos0
pos0 = pos1
pos1 = pos
}
for (k in edit)
if (edit[k] > pos0 && edit[k] <= pos1)
return true
return false
}
/**
* Get next result from results global variable. Set global var selectedResult++ .
*/
function getNextResult() {
if (results.length > 0) {
if (selectedResult == results.length - 1)
selectedResult = 0;
else
selectedResult++;
}
playMarker.set(layers[results[selectedResult]]['time_in']);
}
/**
* Selects Layer and Bin which hold the selected result. Refers to globals: results,bin, layers.
*/
function selectResult() {
if (results.length > 0) {
var resultBin = getBin(layers[results[selectedResult]]['id']);
bin[resultBin].selectLayer(results[selectedResult]);
if (typeof(bin[resultBin].layerBox) != 'undefined')
bin[resultBin].layerBox[results[selectedResult]].button['select'].change();
}
}
// ----------------------------------------------------------------------------
// Sort functions
// ----------------------------------------------------------------------------
/**
* Set sort order for layers to s
* @param {String} s Sort to use (String)
*/
function setSort(s) {
selectedSort = s;
$('#elementSelectSort').html('Sort: ' + selectedSort.capitalize());
loadLayers();
}
/**
* Sorts layers by index
* @param {Object} a Layer a with property "index"
* @param {Object} b Layer b with property "index"
* @returns {Int} 1 if a > b, -1 if b > a, 0 if neither.
*/
function sortLayers(a, b) {
if (a['index'] > b['index'])
return 1;
if (a['index'] < b['index'])
return -1;
return 0;
}
/**
* Sorts layers within a bin alphabetically by value
* @param {Int} a Array index of layer a
* @param {Int} b Array index of layer b
* @returns {Int} 1 if a > b, -1 if b > a, 0 if neither.
*/
function sortBinLayersByName(a, b) {
if (layers[a]['value'].toLowerCase() > layers[b]['value'].toLowerCase())
return 1;
if (layers[a]['value'].toLowerCase() < layers[b]['value'].toLowerCase())
return -1;
return 0;
}
/**
* Sorts layers within a bin by duration (shortest first)
* @param {Int} a Array index of layer a
* @param {Int} b Array index of layer b
* @returns {Int} 1 if a is shorter than b, -1 if b is shorter than a, 0 if neither
*/
function sortBinLayersByDuration(a, b) {
if (layers[a]['time_out'] - layers[a]['time_in'] < layers[b]['time_out'] - layers[b]['time_in'])
return 1;
if (layers[a]['time_out'] - layers[a]['time_in'] > layers[b]['time_out'] - layers[b]['time_in'])
return -1;
return 0;
}
/**
* Function to sort edits
* @param {Int} Edit a
* @param {Int} Edit b
* @returns {Int} a - b
*/
function sortEdits(a, b) {
return a - b;
}
/**
* Sort creators alphabetically
* @param {Object} a Creator
* @param {Object} b Creator
* @returns {Int} 1 if a comes after b, -1 if b comes after a, 0 if neither.
*/
function sortCreators(a, b) {
if (a['name'].toLowerCase() > b['name'].toLowerCase())
return 1;
if (a['name'].toLowerCase() < b['name'].toLowerCase())
return -1;
return 0;
}
// ----------------------------------------------------------------------------
// Notes prototype
// ----------------------------------------------------------------------------
/**
* @class Class for "Rooms" - Room for Notes and Room for Discussion.
* @property {jQuery Object} parent Parent element to append room to
* @property {String} name0 Currently, either "Discussion", or "notes"
* @property {String} name1 Currently, either "Discussion", or "notes"
* @property {Int} left Left position of room
* @property {Int} top Top position of room
* @property {Int} width Width of room
* @property {Int} height Height of room
* @property {jQuery Object} element jQuery element of the Room.
* @property {String} content Content of room, from global video object.
* @property {String} content_html Content_html of room, from global video object.
* @constructor
* @param {jQuery Object} parent Parent to append Room to
* @param {String} name0 "Notes", or "Discussion"
* @param {String} name1 "Notes", or "Discussion"
* @param {Int} left left pos
* @param {Int} top Top pos
* @param {Int} width Width
* @param {Int} height Height
*/
function Room(parent, name0, name1, left, top, width, height) {
this.parent = parent;
this.name0 = name0;
this.name1 = name1;
this.title0 = 'Room for ' + this.name0.capitalize();
this.title1 = 'Room for ' + this.name1.capitalize();
this.left = left;
this.top = top;
this.width = width;
this.height = height;
this.content = video[name0];
this.content_html = video[name0 + '_html'];
}
/**
* loads Room element on page, adds switches, appends to parent element
*/
Room.prototype.load = function() {
this.element = $(parseTemplate(htmlRoom, {'name': this.name0, 'title': this.title0, 'content': this.content_html}));
this.element.css('left', this.left + 'px');
this.element.css('top', this.top + 'px');
if (user.logged_in) {
var t = this;
var elementSwitch = this.element.find('.roomSwitch');
elementSwitch.addClass('enabled');
elementSwitch.attr('title', 'Switch to ' + this.title1);
elementSwitch.click(function() { t.clickTitle() });
}
var elementContent = this.element.find('.roomContent');
elementContent.css('width', this.width + 'px');
elementContent.css('height', (this.height - 16) + 'px');
if (user.logged_in)
this.enableContent();
this.parent.append(this.element);
}
/**
* Make Room "enabled" / editable - adds onclick event handler on room element to fire this.clickContent
*/
Room.prototype.enableContent = function() {
var t = this;
var element = this.element.find('.roomContent');
element.addClass('enabled');
element.attr('title', 'Edit ' + this.name0.capitalize());
element.click(function() { t.clickContent() });
}
/**
* Disables room / makes it not-editable, removes onclick event handler
*/
Room.prototype.disableContent = function() {
var element = this.element.find('.roomContent');
element.removeClass('enabled');
element.attr('title', '');
element.unbind('click');
}
/**
* Toggles between name0 room and name1 room - calls Room constructor with name1 as name0 ..
*/
Room.prototype.clickTitle = function() {
$('#' + this.name0 + 'Room').remove();
room = new Room(this.parent, this.name1, this.name0, this.left, this.top, this.width, this.height);
room.load();
}
/**
* Called when a logged in user clicks on room content - allows user to edit
*/
Room.prototype.clickContent = function() {
var t = this;
this.disableContent();
var element = $('');
element.attr('id', this.name0 + 'Input');
element.addClass('roomInput');
if ($.browser.safari) {
element.css('width', '603px');
element.css('margin-left', '-3px');
}
element.val(this.content);
element.focus(function() { focusTextarea() });
element.blur(function() { blurTextarea(); t.save() });
$('#' + this.name0 + 'Content').html(element);
}
/**
* Saves room edit - adds request to requests
*/
Room.prototype.save = function() {
var parameters = {};
parameters[this.name0] = $('#' + this.name0 + 'Input').val();
requests.add('/' + video.id + '/edit', parameters, saveRoomCallback);
}
/**
* Callback function fired after room has been saved, updates video object data and room content
*/
function saveRoomCallback(result) {
video[room.name0] = result.video[room.name0];
video[room.name0 + '_html'] = result.video[room.name0 + '_html'];
video[room.name1] = result.video[room.name1];
video[room.name1 + '_html'] = result.video[room.name1 + '_html'];
room.content = video[room.name0];
room.content_html = video[room.name0 + '_html'];
$('.roomContent').html(room.content_html);
room.enableContent();
}
// ----------------------------------------------------------------------------
// Clipboard and History prototypes
// ----------------------------------------------------------------------------
/**
* @class Layer Clipboard class - to copy / paste timecode spans
* @property {Int} inPos In position of Span, in miliseconds
* @property {Int} outPos Out position of Span, in miliseconds
* @constructor
*/
function LayerClipboard() {
this.inPos = inMarker.pos;
this.outPos = outMarker.pos;
}
/**
* Copy current in and out positions to Clipboard
*/
LayerClipboard.prototype.copy = function () {
this.inPos = inMarker.pos;
this.outPos = outMarker.pos;
}
/**
* Set timeline with in and out positions from clipboard
*/
LayerClipboard.prototype.paste = function () {
timeline.set(playMarker.pos, this.inPos, this.outPos);
}
/**
* @class LayerHistory class - maintains a history of selected in and out points
* @property {Array} history - Array of history objects with inPos, outPos and selected as properties
* @property {Int} position Current position in history
* @property {Int} state States: 0 {disabled), 1 (enabled)
* @constructor
*/
function LayerHistory() {
/*
state: 0 (disabled), 1 (enabled)
*/
// fixme: selected is not used
this.history = [{'inPos': inMarker.pos, 'outPos': outMarker.pos, 'selected': -1}];
this.position = 0;
this.state = 1;
}
/**
* Sets this.state to state
* @param {Int} state 0 = disabled, 1 = enabled
*/
LayerHistory.prototype.setState = function(state) {
this.state = state;
}
/**
* Add a new history item with passed inPos and outPos
* @param {Int} inPos In Point, in ms
* @param {Int} outPos Out Point, in ms
*/
LayerHistory.prototype.add = function(inPos, outPos) {
if (this.state == 1) {
while (this.history.length > this.position + 1)
this.history.pop();
var i = this.history.length - 1;
if (inMarker.pos != this.history[i]['inPos'] || outMarker.pos != this.history[i]['outPos']) {
this.history.push({'inPos': inMarker.pos, 'outPos': outMarker.pos, 'selected': -1})
this.position++;
}
}
// this.debug();
}
/**
* Undo - set previously selected layer to selected
*/
LayerHistory.prototype.undo = function() {
if (this.position > 0) {
this.position--;
this.state = 0;
timeline.set(playMarker.pos, this.history[this.position]['inPos'], this.history[this.position]['outPos']);
this.state = 1;
}
// this.debug();
}
/**
* Redo - set next selected layer as selected
*/
LayerHistory.prototype.redo = function() {
if (this.position < this.history.length - 1) {
this.position++;
this.state = 0;
timeline.set(playMarker.pos, this.history[this.position]['inPos'], this.history[this.position]['outPos']);
this.state = 1;
}
// this.debug();
}
/**
* Debug / testing function for layerHistory
*/
LayerHistory.prototype.debug = function() {
$('#menuTop').html('');
for (var i in this.history) {
if (i == this.position)
$('#menuTop').append('<');
$('#menuTop').append('[' + Math.floor(this.history[i]['inPos'] / 1000) + '-' + Math.floor(this.history[i]['outPos'] / 1000) + ']')
if (i == this.position)
$('#menuTop').append('>');
}
}
//
//
//
/**
* Sends request to server to find layers in current event in field "f", matching query "q"
* @param {String} f Field to search in
* @param {String} q Query string to search for
*/
function find(f, q) {
if (q == '[Clear Recent Searches]') {
searchHistory.clear();
return false;
}
var fq = parseQuery(f, q);
f = fq['f'];
q = fq['q'];
$('#elementSelectFind').html('Find: ' + f.capitalize());
$('#selectFind').val(f);
$('#inputFind').val(q);
if (q)
searchHistory.add(q);
requests.add('/' + video.id + '/find', {'f': f, 'q': q}, findCallback);
}
/**
* Callback function called after server returns result of find - marks results on timeline.
* @param {Array} result Array holding matched results, as json object from server
*/
function findCallback(result) {
// fixme: always use foo.bar instead of foo['bar']
// fixme: layers no longer sorted by time if we add new layers at the end of the array
$('#inputFind').blur();
keyboard.setState(0);
for (var k in layers)
layers[k]['value_highlighted'] = '';
timeline.clearResults();
results = [];
selectedResult = -1;
for (var k in result.layers) {
for (var l in layers) {
if (result.layers[k].id == layers[l].id) {
timeline.markResult(layers[l].time_in, layers[l].time_out);
layers[l].value_highlighted = result.layers[k].value_highlighted;
results[k] = l;
break;
}
}
}
if (result.results) {
selectedResult = 0;
playMarker.set(layers[results[0]]['time_in']);
}
for (var k in bin)
bin[k].update();
}
/**
* Clears a search - calls find with an empty string as query
*/
function clearFind() {
var val = $('#inputFind').val();
$('#inputFind').val('');
if (val != '')
find($('#selectFind').val(), '');
}
/**
* Show Map, add buttons to location Bin
*/
function showMap() {
loadTemplate('map.html', function(html) {
$('#locationEditbar').html(html);
$('#locationEditbar').css('height', '192px');
$('#gLocation').attr('src', base_url + '/map/iframe/' + layers[selectedLayer].id);
locationBin.box.showEditbar();
locationBin.box.button.map.disable();
if (typeof(locationBin.box.button.cancel) != 'undefined')
locationBin.box.button.cancel.remove();
if (typeof(locationBin.box.button.link) != 'undefined')
locationBin.box.button.link.remove();
locationBin.box.button.remove.remove();
locationBin.box.addButton('BottomRight', 'cancel', 'Hide Map', function() { hideMap() } );
locationBin.box.addButton('BottomRight', 'link', 'Show Large Map', function() { document.location.href = base_url + '/map/layer/' + layers[selectedLayer].id });
locationBin.box.addButton('BottomRight', 'remove', 'Remove Layer', function() { locationBin.removeLayer() } );
locationBin.box.button.remove.disable();
});
}
/**
* Hide map
*/
function hideMap() {
//k does not seem to be used?
var k = selectedLayer;
$('#locationEditbar').html('');
$('#locationEditbar').css('height', '16px');
locationBin.box.hideEditbar();
if (locationBin.box.hasToolbar) {
locationBin.box.button['map'].enable();
locationBin.box.button['cancel'].remove();
locationBin.box.button['link'].remove();
}
}
/**
* Make request to add a layer to video
*/
function addLayer() {
var parameters = {
'track': selectedBin,
'value': $('#' + selectedBin + 'Input').val(),
'time_in': inMarker.pos,
'time_out': outMarker.pos
}
requests.add('/' + video.id + '/add', parameters, addLayerCallback);
}
/**
* Callback function called after layer has been added - reloads layers, edits
* @param {Object} result Result json object from server
*/
function addLayerCallback(result) {
if (!result.result) {
error('result');
return false;
}
var k = layers.length;
layers[k] = result.layer;
bin[result.layer.track].cancelLayer();
loadCreators();
creatorBin.update();
loadLayers();
loadEdits();
if (layerState == 0 && (playMarker.pos < layers[k].time_in || playMarker.pos >= layers[k].time_out))
playMarker.set(layers[k].time_in);
bin[result.layer.track].update();
bin[result.layer.track].selectLayer(layers.length - 1);
if (typeof(bin[selectedBin].layerBox) != 'undefined')
bin[selectedBin].layerBox[selectedLayer].button['select'].change();
if ($('#inputFind').val() != '')
find($('#selectFind').val(), $('#inputFind').val())
}
/**
* Makes a request to edit selectedLayer
*/
function editLayer() {
var parameters = {
'id': layers[selectedLayer].id,
'value': $('#' + selectedBin + 'Input').val(),
'time_in': inMarker.pos,
'time_out': outMarker.pos
}
requests.add('/' + video.id + '/edit', parameters, editLayerCallback);
}
/**
* Callback function called after layer has been editted
* @param {Object} result Result json object from server
*/
function editLayerCallback(result) {
if (!result.result) {
error('result');
return false;
}
var k = getLayer(result.layer.id)
layers[k] = result.layer;
loadEdits();
if (layerState == 0 && (playMarker.pos < layers[k].time_in || playMarker.pos >= layers[k].time_out))
playMarker.set(layers[k].time_in);
bin[result.layer.track].cancelLayer();
bin[result.layer.track].update();
bin[result.layer.track].selectLayer(k);
if (typeof(bin[selectedBin].layerBox) != 'undefined')
bin[selectedBin].layerBox[selectedLayer].button['select'].change();
if ($('#inputFind').val() != '')
find($('#selectFind').val(), $('#inputFind').val());
}
/**
* Make request to remove layer with array index k in layers
* @param {Int} k Array index in layers of layer to remove.
*/
function removeLayer(k) {
parameters = {
'id': layers[k].id
}
requests.add('/' + video.id + '/remove', parameters, removeLayerCallback)
}
/**
* Callback function called after layer has been removed.
* @param {Object} result Result json object from server
*/
function removeLayerCallback(result) {
if (!result.result) {
error('result');
return false;
}
var b = getBin(result.id);
var k = getLayer(result.id);
bin[b].selectLayer(k);
selectNextLayer();
delete layers[k];
loadCreators();
creatorBin.update();
loadLayers();
loadEdits();
bin[b].update();
}
/**
* Makes request to set poster frame to current playMarker.pos
*/
function setPosterFrame() {
requests.add('/' + video.id + '/edit', {'poster_frame': playMarker.pos}, setPosterFrameCallback);
}
/**
* Callback function called after poster frame has been set
* @param {Object} result Result json object from server
*/
function setPosterFrameCallback(result) {
if (!result.result) {
error('result');
return false;
}
video.poster_frame = result.video.poster_frame;
timeline.set(video.poster_frame, inMarker.pos, outMarker.pos);
}
/**
* Enable setPoster button on infoPanel
*/
function unlockPosterFrame() {
if (playMarker.pos != video.poster_frame)
menu.button['setPoster'].enable();
}
/**
* Disable setPoster button on infoPanel
*/
function lockPosterFrame() {
if (playMarker.pos != video.poster_frame)
menu.button['setPoster'].disable();
}
/**
* Generates a link to currently selected layer - eg. http://padmo.pad.ma/Vfc3nh5d/00:02:24.000-00:04:08.000
*/
function link() {
loadTemplate('link.editor.html', function(html) {
var link = base_url + '/' + video.id + '/' + getTimecode(inMarker.pos) + '-' + getTimecode(outMarker.pos);
var linkSelection = '' + link + '';
if (timeline.state == 0 || selectedLayer == -1) {
var layer = '';
var linkLayer = '';
}
else {
var layer = 'Link to this ' + selectedBin + ':';
var link = base_url + '/' + video.id + '/' + layers[selectedLayer]['id'];
var linkLayer = '' + link + '';
}
html = parseTemplate(html, {
'linkSelection': linkSelection,
'layer': layer,
'linkLayer': linkLayer
});
dialog = new Dialog('Link', html, [['Close', function() { dialog.close() }]], 552, 138);
dialog.load();
});
}
function download() {
loadTemplate('download.editor.html', function(html) {
var link = base_url + '/' + video.id + '/download/' + getTimecode(inMarker.pos) + '-' + getTimecode(outMarker.pos) + '.ogv';
var linkSelection = '' + link + '';
html = parseTemplate(html, {
'linkSelection': linkSelection,
});
dialog = new Dialog('Download', html, [['Close', function() { dialog.close() }]], 552, 138);
dialog.load();
});
}
function importAnnotations() {
var html = '';
dialog = new Dialog('Import Annotations', html, [
['Upload File', function() { uploadFile() }],
['Select .srt File', function() {
var val = $('#elementFileInput').val();
$('#elementFileInput').val('Click here to select .srt file')
setTimeout(function() {
$('#elementFileInput').val(val);
}, 2000);
}],
['Cancel', function() { dialog.close() }]
], 416, 128);
dialog.load(function() {
var frame = $('');
frame.load(function() {
var frameBody = $(window.frames['frame'].document.getElementsByTagName('pre')[0]);
// alert(frameBody.html());
try {
var result = eval('(' + frameBody.html() + ')');
} catch(e) {
var result = { result: 'failed', message: 'Upload failed' };
}
// var result = frameBody.html();
if (result) { // catch if frame is loaded for the first time, before the request
var track = $('#selectTrack').val();
frameBody.html('');
$('#dialogContent').html(result.message);
setTimeout(function() {
bin[track].update();
dialog.close();
}, 2500);
}
});
$('body').append(frame);
$('#form').attr('target', 'frame');
$('.buttonbar :first-child').removeClass('enabled');
$('.buttonbar :first-child').addClass('disabled');
});
}
function changeTrack() {
//alert($("#selectTrack option[selected]").length)
$('#elementSelectTrack').html($("#selectTrack option[selected]").html());
if ($('#selectTrack').val() == 'select') {
$('.buttonbar :first-child').removeClass('enabled');
$('.buttonbar :first-child').addClass('disabled');
} else {
if ($('#fileInput').val()) {
$('.buttonbar :first-child').removeClass('disabled');
$('.buttonbar :first-child').addClass('enabled');
}
}
}
function changeFile() {
$('#elementFileInput').val($('#fileInput').val());
if ($('#selectTrack').val() != 'select') {
$('.buttonbar :first-child').removeClass('disabled');
$('.buttonbar :first-child').addClass('enabled');
}
}
function uploadFile() {
$('#form').trigger('submit');
$('#elementSelectTrack').addClass('disabled');
$('#selectTrack option').attr( { disabled: 'disabled' });
$('.buttonbar div').addClass('disabled');
}
/**
* Generates downloadable layer data
*/
function exportAnnotations() {
for (var k in layers)
layers[k]['index'] = layers[k]['time_in'] * 1000000000 + layers[k]['time_out'];
layers.sort(sortLayers);
var value = [];
for (var k in layers) {
var v = layers[k];
value[k] = '';
value[k] += getTimecode(v['time_in']) + ' – ' + getTimecode(v['time_out']);
var date = new Date();
date.setTime(v['created'] * 1000);
value[k] += ' [' + v['track'].capitalize() + ', ' + v['creator'] + ', ' + date.format('%F %T') + ']';
value[k] += '';
value[k] += ' ' + v['value_html'];
}
if (layers.length == 0)
var html = 'No Annotations';
else {
var html = 'Download Annotations as Subtitle Files ';
var arr = ['locations', 'keywords', 'descriptions', 'transcripts'];
for (var i in arr) {
var link = base_url + '/' + video.id + '/export/' + arr[i] + '.srt';
html += '' + link + ' ';
}
html += ' ';
html += value.join('
');
}
dialog = new Dialog('Annotations', html, [['Close', function() { dialog.close() }]], 552, 276);
dialog.load();
}
/**
* Generates some meta-info on layers
*/
function info() {
loadTemplate('info.editor.html', function(html) {
var l = {'location': 0, 'keyword': 0, 'description': 0, 'transcript': 0};
var length = 0
for (k in layers) {
var v = layers[k];
l[v['track']]++;
length += v.time_out - v.time_in;
}
if (layers.length)
length = getTimecode(Math.floor(length / layers.length));
html = parseTemplate(html, {
'length': getTimecode(video.duration),
'layers': layers.length,
'layersPerMinute': Math.round(layers.length / (video.duration / 60000) * 10) / 10,
'layerLength': length,
'locations': l['location'],
'keywords': l['keyword'],
'descriptions': l['description'],
'transcripts': l['transcript'],
'edits': edit.length,
'editsPerMinute': Math.round(edit.length / (video.duration / 60000) * 10) / 10,
'creators': creator.length
});
dialog = new Dialog('Info', html, [['Close', function() { dialog.close() }]], 280, 280);
dialog.load();
});
}
/**
* Throws up help dialog
*/
function help() {
loadTemplate('help.editor.html', function(html) {
dialog = new Dialog('Help', html, [['Close', function() { dialog.close() }]], 280, 280);
dialog.load();
});
}
/**
* Throws an error dialog based on type passed
* @param {String} type Type of error - currently can be layerValue, layerDuration, layerValueDuration, layerExists or result
*/
function error(type) {
// fixme: don't declare message every time it is called
var message = {
'layerValue': 'Your _bin_ is empty.',
'layerDuration': 'The duration of your _bin_ is zero, since your in and out points are the same.',
'layerValueDuration': 'Your _bin_ is empty, and its duration is zero, since your in and out points are the same.',
'layerExists': 'You have already added the same _bin_ with the same in and out points.',
'result': 'An error occurred. We were unable to save your input.'
};
var vars = {'bin': selectedBin };
for (var k in vars) {
var regexp = new RegExp('_' + k + '_', 'g')
message[type] = message[type].replace(regexp , vars[k]);
}
dialog = new Dialog('Error', message[type], [['Close', function() { dialog.close() }]], 280, 140);
dialog.load();
}
//
//
//
/**
* Resize room element on browser resize
*/
function resize() {
if (typeof room != 'undefined') {
if (room.name0 == 'notes')
var element = $('#notesContent');
else
var element = $('#discussionContent');
var top = video.height + timeline.lines * 24 + 32;
var height = window.innerHeight - top - 112;
element.css('height', height);
}
}
//
//
//
/**
* Set keyboard state to 1 on focus in input box
*/
function focusInput() {
keyboard.setState(1);
$(this).removeClass('blurred');
$(this).addClass('focused');
}
/**
* Set keyboard state to 0 on blur of input box
*/
function blurInput() {
keyboard.setState(0);
$(this).removeClass('focused');
$(this).addClass('blurred');
}
/**
* Set keyboard state to 2 on focus in textarea
*/
function focusTextarea() {
keyboard.setState(2);
}
/**
* Set keyboard state to 0 on blur of textarea
*/
function blurTextarea() {
keyboard.setState(0);
}
/**
* Set keyboard state to 1 when focus on input inside Bin
*/
function focusBinInput() {
keyboard.setState(1);
$(this).removeClass('blurred');
$(this).addClass('focused');
if (typeof(bin[selectedBin].box.button['save']) != 'undefined')
bin[selectedBin].box.button['save'].element.attr('src', base_url + '/static/images/buttonSave.png');
}
/**
* Set keyboard state to 0 on blur of input inside Bin
*/
function blurBinInput() {
keyboard.setState(0);
$(this).removeClass('focused');
$(this).addClass('blurred');
bin[selectedBin].box.button['save'].element.attr('src', base_url + '/static/images/buttonSaveFocused.png');
}
/**
* set keyboard state to 2 on focus in textarea in Bin
*/
function focusBinTextarea() {
keyboard.setState(2);
$(this).removeClass('blurred');
$(this).addClass('focused');
if (typeof(bin[selectedBin].layerBox[selectedLayer].button['save']) != 'undefined')
bin[selectedBin].layerBox[selectedLayer].button['save'].element.attr('src', base_url + '/static/images/buttonSave.png')
}
/**
* Set keyboard state to 0 on blur of textarea in Bin
*/
function blurBinTextarea() {
keyboard.setState(0);
$(this).removeClass('focused');
$(this).addClass('blurred');
bin[selectedBin].layerBox[selectedLayer].button['save'].element.attr('src', base_url + '/static/images/buttonSaveFocused.png')
}
function changeSelectSetting() {
$('#elementSelectSetting').html($('#selectSetting').val().capitalize());
}
function changeVideoSettings() {
// settings.video.setting = $('#selectSetting').val();
updatePlayer();
updateViewer('play');
updateViewer('in');
updateViewer('out');
if (settings.video.setting == 'large') {
$('#inViewer').hide();
$('#outViewer').hide();
} else {
$('#inViewer').show();
$('#outViewer').show();
}
// dialog.close();
}
function updateViewer(name) {
$('#' + name + 'Viewer').css('left', settings.video[settings.video.setting][name].left);
$('#' + name + 'Viewer').css('top', settings.video[settings.video.setting][name].top);
$('#' + name + 'Viewer').css('width', settings.video[settings.video.setting][name].width);
$('#' + name + 'Viewer').css('height', settings.video[settings.video.setting][name].height());
$('#' + name + 'Viewer .viewerOverlay').css('width', settings.video[settings.video.setting][name].width);
$('#' + name + 'Viewer .viewerOverlay').css('height', settings.video[settings.video.setting][name].height());
$('#' + name + 'Viewer .frame').css('width', ((parseInt(settings.video[settings.video.setting][name].width.replace('px', '')) - parseInt(settings.video[settings.video.setting][name].height().replace('px', ''))) / 2 + 16) + 'px');
$('#' + name + 'Viewer .frame').css('height', (parseInt(settings.video[settings.video.setting][name].height().replace('px', '')) / 2) + 'px');
$('#' + name + 'Viewer .timecode').css('width', settings.video[settings.video.setting][name].width);
$('#' + name + 'Viewer .timecode').css('top', settings.video[settings.video.setting][name].height());
// alert(settings.video[settings.video.setting][this.name].width.substr(0, -2));
$('#' + name + 'Input').css('width', (parseInt(settings.video[settings.video.setting][name].width.replace('px', '')) - 53) + 'px');
$('#timeline').css('top', (parseInt(settings.video[settings.video.setting].play.height().replace('px', '')) + 44) + 'px');
if(video.local) {
$('#' + name + 'Image')
.width(settings.video[settings.video.setting][name].width.replace('px', ''))
.height(parseInt(settings.video[settings.video.setting][name].height().replace('px', '')))
.css('width', settings.video[settings.video.setting][name].width)
.css('height',settings.video[settings.video.setting][name].height());
}
}
function updatePlayer() {
video.stream_width = settings.video[settings.video.setting].w;
if (typeof player != 'undefined' && typeof player.update != 'undefined') {
var video_url = video.urls[video.stream_width];
if (typeof video_url == 'undefined')
video_url = video.urls['128'];
player.update(
video_url,
settings.video[settings.video.setting].play.width.replace('px', ''),
settings.video[settings.video.setting].play.height().replace('px', '')
);
}
$('#player').attr({
width: settings.video[settings.video.setting].play.width.replace('px', ''),
height: settings.video[settings.video.setting].play.height().replace('px', '')
});
}