pandora/static/js/importAnnotationsDialog.js

245 lines
7.5 KiB
JavaScript
Raw Normal View History

2012-02-14 18:48:08 +00:00
'use strict';
pandora.ui.importAnnotationsDialog = function(options) {
2014-09-17 13:10:17 +00:00
2014-09-18 12:16:59 +00:00
var layers = pandora.site.layers.filter(function(layer) {
2012-02-16 13:11:27 +00:00
return layer.canAddAnnotations[pandora.user.level];
}),
2014-09-17 13:10:17 +00:00
languages = Ox.sortBy(Ox.LANGUAGES.map(function(language) {
return {id: language.code, title: language.name};
2014-09-17 13:25:48 +00:00
}), 'title'),
2014-09-17 14:42:44 +00:00
$content = Ox.Element().css({margin: '16px'}),
2014-09-17 13:10:17 +00:00
$layerSelect = Ox.Select({
items: layers,
label: Ox._('Layer'),
2014-09-17 13:25:48 +00:00
labelWidth: 128,
2014-09-17 13:10:17 +00:00
width: 384
})
.css({
marginTop: '16px'
})
2014-09-17 14:42:44 +00:00
.bindEvent({
2014-09-18 12:16:59 +00:00
change: updateLanguageSelect
2014-09-17 14:42:44 +00:00
})
2014-09-17 13:10:17 +00:00
.appendTo($content),
$languageSelect = Ox.Select({
2014-09-17 13:25:48 +00:00
items: languages,
2014-09-17 13:10:17 +00:00
label: Ox._('Language'),
2014-09-17 13:25:48 +00:00
labelWidth: 128,
2014-09-17 14:42:44 +00:00
value: pandora.site.language,
2014-09-17 13:10:17 +00:00
width: 384
})
.css({
marginTop: '16px'
})
.appendTo($content),
2014-09-19 08:14:40 +00:00
$formatSelect = Ox.Select({
items: [
{id: 'json', title: 'JSON'},
{id: 'srt', title: 'SRT'}
],
label: Ox._('Format'),
labelWidth: 128,
value: 'json',
width: 384
})
.css({
marginTop: '16px'
})
.bindEvent({
change: updateFileInput
})
.appendTo($content),
2014-09-17 13:10:17 +00:00
$fileInput = Ox.FileInput({
2014-09-19 08:14:40 +00:00
label: Ox._('File'),
2014-09-17 14:42:44 +00:00
labelWidth: 128,
2014-09-17 13:25:48 +00:00
maxFiles: 1,
2014-09-17 13:10:17 +00:00
width: 384
})
.css({
marginTop: '16px'
})
.bindEvent({
change: function(data) {
2014-09-19 08:14:40 +00:00
$status.empty();
if (data.value.length) {
var format = Ox.last(data.value[0].name.split('.'));
$formatSelect.options({value: format});
var subtitlesLayer = pandora.getSubtitlesLayer()
if (subtitlesLayer && format == 'srt' && Ox.getObjectById(layers, subtitlesLayer)) {
$layerSelect.options({value: subtitlesLayer})
}
}
2014-09-18 12:16:59 +00:00
that[
data.value.length ? 'enableButton' : 'disableButton'
]('import');
2014-09-17 13:10:17 +00:00
}
})
.appendTo($content),
$status = Ox.$('<div>')
.css({
2014-09-17 14:42:44 +00:00
marginTop: '48px' // FIXME
2014-09-17 13:10:17 +00:00
})
.appendTo($content),
that = Ox.Dialog({
2012-02-14 18:48:08 +00:00
buttons: [
2014-09-18 12:16:59 +00:00
Ox.Button({
2014-09-18 15:24:05 +00:00
id: 'dontImport',
title: Ox._('Don\'t Import')
})
.bindEvent({
click: function() {
that.close();
}
}),
2014-09-18 12:16:59 +00:00
Ox.Button({
2014-09-18 15:24:05 +00:00
disabled: true,
id: 'import',
title: Ox._('Import')
}).bindEvent({
click: importAnnotations
})
2012-02-14 18:48:08 +00:00
],
2014-09-17 14:42:44 +00:00
closeButton: true,
2014-09-17 13:10:17 +00:00
content: $content,
fixedSize: true,
2014-09-19 08:14:40 +00:00
height: 176,
2012-02-14 18:48:08 +00:00
keys: {
2014-09-17 14:42:44 +00:00
escape: 'dontImport'
2012-02-14 18:48:08 +00:00
},
2012-02-14 19:01:30 +00:00
removeOnClose: true,
2014-09-17 13:10:17 +00:00
title: Ox._('Import Annotations'),
width: 416
});
2012-02-16 13:11:27 +00:00
2014-09-18 12:16:59 +00:00
updateLanguageSelect();
2014-09-19 08:14:40 +00:00
updateFileInput();
2014-09-17 14:42:44 +00:00
function disableButtons() {
that.disableButtons();
that.disableCloseButton();
}
function enableButtons() {
that.enableButtons();
that.enableCloseButton();
}
function importAnnotations() {
2014-09-18 12:16:59 +00:00
var annotations = [],
2014-09-17 14:42:44 +00:00
language = $languageSelect.value(),
layer = $layerSelect.value(),
2014-09-19 08:14:40 +00:00
format = $formatSelect.value(),
2014-09-18 12:16:59 +00:00
file = $fileInput.value()[0],
reader = new FileReader();
disableButtons();
2014-09-17 13:10:17 +00:00
2014-09-18 12:16:59 +00:00
reader.onloadend = function(e) {
if (this.result) {
2014-09-19 08:14:40 +00:00
annotations = format == 'json'
? JSON.parse(this.result)
: parseSRT(this.result);
}
2014-09-18 12:16:59 +00:00
if (annotations.length) {
$status.html(Ox._(
2014-09-18 12:16:59 +00:00
'Importing {0} annotation'
+ (annotations.length == 1 ? '' : 's') + '...',
[annotations.length]
));
annotations = annotations.map(function(annotation) {
2015-04-20 08:13:56 +00:00
var value = Ox.sanitizeHTML(
annotation.text ? annotation.text : annotation.value
);
2014-09-19 08:14:40 +00:00
if (format == 'srt') {
value = value.replace(/<br[ /]*?>\n/g, '\n')
.replace(/\n\n/g, '<br>\n')
.replace(/\n/g, '<br>\n');
}
2014-09-18 12:16:59 +00:00
if (language != pandora.site.language) {
value = '<span lang="' + language + '">'
+ value + '</span>';
}
return {
'in': annotation['in'],
out: annotation.out,
value: value
};
});
pandora.api.addAnnotations({
annotations: annotations,
item: pandora.user.ui.item,
layer: layer
}, function(result) {
if (result.data.taskId) {
pandora.wait(result.data.taskId, function(result) {
if (result.data.status == 'SUCCESS') {
$status.html(Ox._('Import succeeded.'));
2014-09-18 12:16:59 +00:00
Ox.Request.clearCache(pandora.user.ui.item);
pandora.$ui.contentPanel.replaceElement(
1, pandora.$ui.item = pandora.ui.item()
);
} else {
$status.html(Ox._('Import failed.'));
2014-09-18 12:16:59 +00:00
}
enableButtons();
});
} else {
$status.html(Ox._('Import failed.'));
2014-09-18 12:16:59 +00:00
enableButtons();
}
});
} else {
$status.html(Ox._('No valid annotations found.'));
2014-09-18 12:16:59 +00:00
enableButtons();
}
};
reader.readAsText(file);
2014-09-18 12:16:59 +00:00
}
function parseSRT(srt) {
return Ox.parseSRT(srt).filter(function(annotation) {
return !Ox.isUndefined(annotation['in'])
&& !Ox.isUndefined(annotation.out)
&& annotation['in'] <= annotation.out
&& annotation.out <= options.duration
2014-09-18 12:16:59 +00:00
&& annotation.text;
});
}
2014-09-19 08:14:40 +00:00
function updateFileInput() {
$fileInput.options({
label: $formatSelect.value().toUpperCase() + ' File'
});
}
2014-09-17 14:42:44 +00:00
function updateLanguageSelect() {
var layerType = Ox.getObjectById(
pandora.site.layers, $layerSelect.value()
).type;
if (layerType != 'text') {
$languageSelect.value(pandora.site.language);
}
languages.forEach(function(language) {
$languageSelect[
language.id == pandora.site.language || layerType == 'text'
? 'enableItem' : 'disableItem'
](language.id);
});
}
2012-02-14 18:48:08 +00:00
return that;
2014-09-17 13:10:17 +00:00
2012-02-14 18:48:08 +00:00
};