video annotation panel: update subtitles on edit / remove

This commit is contained in:
rolux 2013-10-22 17:48:29 +02:00
parent e533af5cff
commit 3a17fcfe62

View file

@ -86,6 +86,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
showLayers: {},
showUsers: false,
subtitles: [],
subtitlesLayer: null,
timeline: '',
timelines: [],
videoRatio: 16/9,
@ -273,6 +274,8 @@ Ox.VideoAnnotationPanel = function(options, self) {
}
});
self.options.subtitles = self.options.subtitles || getSubtitles();
self.options.layers.forEach(function(layer, i) {
that.bindEvent('key_' + (i + 1), function() {
layer.editable
@ -338,7 +341,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
showMarkers: true,
showMilliseconds: 3,
sizeIsLarge: self.options.videoSize == 'large',
subtitles: self.options.subtitles,
subtitles: Ox.clone(self.options.subtitles),
type: type,
video: type == 'play' ? self.options.video : self.options.getFrameURL,
volume: self.options.volume,
@ -773,6 +776,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
}
},
change: function(data) {
if (data.layer == self.options.subtitlesLayer) {
updateSubtitles();
}
that.triggerEvent('editannotation', data);
},
define: function(data) {
@ -1019,6 +1025,22 @@ Ox.VideoAnnotationPanel = function(options, self) {
}));
}
function getSelectedLayer() {
var layer;
Ox.forEach(self.options.layers, function(layer) {
Ox.forEach(layer.items, function(item) {
if (item.id == self.options.selected) {
layer = layer.id;
return false;
}
});
if (layer) {
return false;
}
});
return layer;
}
function getSizes(scrollbarIsVisible) {
var scrollbarWidth = Ox.UI.SCROLLBAR_SIZE,
contentWidth = self.options.width
@ -1087,6 +1109,19 @@ Ox.VideoAnnotationPanel = function(options, self) {
return (!scrollbarIsVisible && height > self.options.height - 16) ? getSizes(true) : size;
}
function getSubtitles() {
return self.options.subtitlesLayer ? self.options.layers.filter(function(layer) {
return layer.id == self.options.subtitlesLayer;
})[0].map(function(subtitle) {
return {
id: subtitle.id,
'in': subtitle['in'],
out: subtitle.out,
text: subtitle.value.replace(/\n/g, ' ').replace(/<br\/?>/g, '\n')
};
}) : [];
}
function getWords() {
var words = [];
Ox.forEach(Ox.count(Ox.words(
@ -1136,6 +1171,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
self.positions = getPositions();
self.options.find && submitFindInput(self.options.find);
self.editing = false;
if (data.layer == self.options.subtitlesLayer) {
updateSubtitles();
}
setTimelineState();
self.$annotationPanel.removeItem();
that.triggerEvent('removeannotation', data);
@ -1215,6 +1253,12 @@ Ox.VideoAnnotationPanel = function(options, self) {
if (self.options['in'] > self.options.out) {
setPoint(point == 'in' ? 'out' : 'in', position, keepSelected);
} else {
if (
self.options.selected && self.options.subtitlesLayer
&& getSelectedLayer() == self.options.subtitlesLayer
) {
updateSubtitles();
}
self.$annotationPanel.options({
'in': self.options['in'],
out: self.options.out
@ -1321,6 +1365,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
updateWords('add');
self.options.find && submitFindInput(self.options.find);
self.editing = false;
if (data.layer == self.options.subtitlesLayer) {
updateSubtitles();
}
setTimelineState();
if (
self.options.annotationsRange == 'position'
@ -1429,9 +1476,17 @@ Ox.VideoAnnotationPanel = function(options, self) {
});
}
function updateSubtitles() {
self.options.subtitles = getSubtitles();
self.$player.forEach(function($player) {
player.options({subtitles: self.options.subtitles});
});
}
function updateTimelines() {
self.$timeline[0].options({type: self.options.timeline});
self.$timeline[1].options({type: self.options.timeline});
self.$timeline.forEach(function($timeline) {
$timeline.options({type: self.options.timeline});
});
}
function updateWords(action) {