fix video editor bugs
This commit is contained in:
parent
3c94f44a99
commit
76466e7eeb
6 changed files with 63 additions and 47 deletions
|
@ -440,7 +440,7 @@ Ox.Element = function(options, self) {
|
||||||
'mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick',
|
'mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick',
|
||||||
'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend',
|
'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend',
|
||||||
'draganddropstart', 'draganddrop', 'draganddropenter', 'draganddropleave', 'draganddropend',
|
'draganddropstart', 'draganddrop', 'draganddropenter', 'draganddropleave', 'draganddropend',
|
||||||
'playing', 'position', 'progress'
|
'playing', 'position', 'progress', 'request'
|
||||||
].indexOf(event) == -1) {
|
].indexOf(event) == -1) {
|
||||||
if (!/^pandora_/.test(event)) {
|
if (!/^pandora_/.test(event)) {
|
||||||
Ox.Log('EVENT', that.id, self.options.id, 'trigger', event, data);
|
Ox.Log('EVENT', that.id, self.options.id, 'trigger', event, data);
|
||||||
|
|
|
@ -143,7 +143,9 @@ Ox.ArrayEditable = function(options, self) {
|
||||||
cancel: function(data) {
|
cancel: function(data) {
|
||||||
self.editing = false;
|
self.editing = false;
|
||||||
that.gainFocus();
|
that.gainFocus();
|
||||||
that.triggerEvent('blur', data);
|
data.value === ''
|
||||||
|
? submitItem(i, '')
|
||||||
|
: that.triggerEvent('blur', data);
|
||||||
},
|
},
|
||||||
change: function(data) {
|
change: function(data) {
|
||||||
that.triggerEvent('change', {
|
that.triggerEvent('change', {
|
||||||
|
@ -190,7 +192,7 @@ Ox.ArrayEditable = function(options, self) {
|
||||||
self.editing = false;
|
self.editing = false;
|
||||||
that.blurItem();
|
that.blurItem();
|
||||||
}
|
}
|
||||||
Ox.print('SELECT ITEM', self.options.selected, self.selected);
|
Ox.print('AE SELECT ITEM', self.options.selected, self.selected);
|
||||||
that.find('.OxSelected').removeClass('OxSelected');
|
that.find('.OxSelected').removeClass('OxSelected');
|
||||||
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
|
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
|
||||||
triggerSelectEvent();
|
triggerSelectEvent();
|
||||||
|
|
|
@ -44,7 +44,7 @@ Ox.IconItem = function(options, self) {
|
||||||
})
|
})
|
||||||
.options(options || {});
|
.options(options || {});
|
||||||
|
|
||||||
Ox.print('ICON ITEM FIND', self.options.find)
|
//Ox.print('ICON ITEM FIND', self.options.find)
|
||||||
|
|
||||||
Ox.extend(self, {
|
Ox.extend(self, {
|
||||||
fontSize: self.options.itemWidth == 64 ? 6 : 9,
|
fontSize: self.options.itemWidth == 64 ? 6 : 9,
|
||||||
|
|
|
@ -285,7 +285,9 @@ Ox.AnnotationFolder = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function crossesPoint() {
|
function crossesPoint() {
|
||||||
var sort = [self.position, self.options.position].sort(),
|
var sort = [self.position, self.options.position].sort(function(a, b) {
|
||||||
|
return a - b
|
||||||
|
}),
|
||||||
positionA = sort[0],
|
positionA = sort[0],
|
||||||
positionB = sort[1];
|
positionB = sort[1];
|
||||||
return self.points.some(function(point) {
|
return self.points.some(function(point) {
|
||||||
|
@ -389,9 +391,9 @@ Ox.AnnotationFolder = function(options, self) {
|
||||||
|
|
||||||
function getSort() {
|
function getSort() {
|
||||||
return ({
|
return ({
|
||||||
duration: ['-duration', '+in', '+value'],
|
duration: ['+duration', '+in', '+value'],
|
||||||
position: ['+in', '-duration', '+value'],
|
position: ['+in', '+duration', '+value'],
|
||||||
text: ['+value', '+in', '-duration']
|
text: ['+value', '+in', '+duration']
|
||||||
})[self.options.sort];
|
})[self.options.sort];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -261,22 +261,27 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function scrollToSelected(type) {
|
function scrollToSelected(type) {
|
||||||
var $item = that.find('.OxEditableElement.OxSelected'),
|
try {
|
||||||
itemHeight = $item.height() + (type == 'text' ? 8 : 0),
|
Ox.print('scrollToSelected $item', that.find('.OxEditableElement.OxSelected'))
|
||||||
itemTop = $item.offset().top,
|
var $item = that.find('.OxEditableElement.OxSelected'),
|
||||||
itemBottom = itemTop + itemHeight,
|
itemHeight = $item.height() + (type == 'text' ? 8 : 0),
|
||||||
height = self.$folders.height(),
|
itemTop = $item.offset().top,
|
||||||
scrollTop = self.$folders.scrollTop(),
|
itemBottom = itemTop + itemHeight,
|
||||||
top = self.$folders.offset().top;
|
height = self.$folders.height(),
|
||||||
if (itemTop < top || itemBottom > top + height) {
|
scrollTop = self.$folders.scrollTop(),
|
||||||
if (itemTop < top) {
|
top = self.$folders.offset().top;
|
||||||
scrollTop += itemTop - top;
|
if (itemTop < top || itemBottom > top + height) {
|
||||||
} else {
|
if (itemTop < top) {
|
||||||
scrollTop += itemBottom - top - height;
|
scrollTop += itemTop - top;
|
||||||
|
} else {
|
||||||
|
scrollTop += itemBottom - top - height;
|
||||||
|
}
|
||||||
|
self.$folders.animate({
|
||||||
|
scrollTop: scrollTop + 'px'
|
||||||
|
}, 0);
|
||||||
}
|
}
|
||||||
self.$folders.animate({
|
} catch(e) {
|
||||||
scrollTop: scrollTop + 'px'
|
Ox.print('THIS SHOULD NOT HAPPEN');
|
||||||
}, 0);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -127,7 +127,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
self.options.videoSize == 'large' && toggleSize();
|
self.options.videoSize == 'large' && toggleSize();
|
||||||
},
|
},
|
||||||
key_n: function() {
|
key_n: function() {
|
||||||
selectAnnotation(getNextAnnotation('annotation', 1));
|
selectAnnotation(getNextAnnotation('annotation', 1), true);
|
||||||
},
|
},
|
||||||
key_o: function() {
|
key_o: function() {
|
||||||
setPoint('out', self.options.position);
|
setPoint('out', self.options.position);
|
||||||
|
@ -183,7 +183,10 @@ Ox.VideoEditor = function(options, self) {
|
||||||
|
|
||||||
Ox.loop(1, self.options.layers.length + 1, function(i) {
|
Ox.loop(1, self.options.layers.length + 1, function(i) {
|
||||||
that.bindEvent('key_' + i, function() {
|
that.bindEvent('key_' + i, function() {
|
||||||
addAnnotation(self.options.layers[i - 1].id);
|
var layer = self.options.layers[i - 1];
|
||||||
|
layer.editable
|
||||||
|
? addAnnotation(layer.id)
|
||||||
|
: that.triggerEvent('info', {layer: layer.id});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -342,7 +345,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
setPosition(data.position);
|
setPosition(data.position);
|
||||||
},
|
},
|
||||||
select: function() {
|
select: function() {
|
||||||
selectAnnotation();
|
selectAnnotation(void 0, true);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$editor);
|
.appendTo(self.$editor);
|
||||||
|
@ -634,7 +637,9 @@ Ox.VideoEditor = function(options, self) {
|
||||||
resizemap: function(data) {
|
resizemap: function(data) {
|
||||||
that.triggerEvent('resizemap', data);
|
that.triggerEvent('resizemap', data);
|
||||||
},
|
},
|
||||||
select: selectAnnotation,
|
select: function(data) {
|
||||||
|
selectAnnotation(data, true);
|
||||||
|
},
|
||||||
submit: submitAnnotation,
|
submit: submitAnnotation,
|
||||||
toggle: toggleAnnotations,
|
toggle: toggleAnnotations,
|
||||||
togglecalendar: function(data) {
|
togglecalendar: function(data) {
|
||||||
|
@ -727,17 +732,11 @@ Ox.VideoEditor = function(options, self) {
|
||||||
var results = [];
|
var results = [];
|
||||||
if (query.length) {
|
if (query.length) {
|
||||||
query = query.toLowerCase();
|
query = query.toLowerCase();
|
||||||
results = Ox.flatten(Ox.merge(self.options.layers.map(function(layer) {
|
results = self.annotations.filter(function(annotation) {
|
||||||
return Ox.map(layer.items, function(item) {
|
return Ox.decodeHTML(Ox.stripTags(
|
||||||
return Ox.decodeHTML(Ox.stripTags(
|
annotation.value.toLowerCase()
|
||||||
item.value.toLowerCase()
|
)).indexOf(query) > -1;
|
||||||
)).indexOf(query) > -1 ? {
|
});
|
||||||
id: item.id,
|
|
||||||
'in': item['in'],
|
|
||||||
out: item.out
|
|
||||||
} : null;
|
|
||||||
});
|
|
||||||
}))).sort(sortAnnotations);
|
|
||||||
}
|
}
|
||||||
return results;
|
return results;
|
||||||
}
|
}
|
||||||
|
@ -923,11 +922,9 @@ Ox.VideoEditor = function(options, self) {
|
||||||
function getWords() {
|
function getWords() {
|
||||||
var words = [];
|
var words = [];
|
||||||
Ox.forEach(Ox.count(Ox.words(
|
Ox.forEach(Ox.count(Ox.words(
|
||||||
Ox.merge(self.options.layers.map(function(layer) {
|
self.annotations.map(function(annotation) {
|
||||||
return layer.items.map(function(item) {
|
return Ox.decodeHTML(Ox.stripTags(annotation.value.toLowerCase()));
|
||||||
return Ox.decodeHTML(Ox.stripTags(item.value.toLowerCase()));
|
}).join(' ')
|
||||||
});
|
|
||||||
})).join(' ')
|
|
||||||
)), function(count, value) {
|
)), function(count, value) {
|
||||||
words.push({count: count, value: value});
|
words.push({count: count, value: value});
|
||||||
})
|
})
|
||||||
|
@ -960,6 +957,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
layer.items.splice(index, 1);
|
layer.items.splice(index, 1);
|
||||||
self.annotations = getAnnotations();
|
self.annotations = getAnnotations();
|
||||||
self.positions = getPositions();
|
self.positions = getPositions();
|
||||||
|
self.options.find && submitFindInput(self.options.find);
|
||||||
self.editing = false;
|
self.editing = false;
|
||||||
self.options.selected = '';
|
self.options.selected = '';
|
||||||
setTimelineState();
|
setTimelineState();
|
||||||
|
@ -976,7 +974,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
that.triggerEvent('annotationssize', {size: data.size});
|
that.triggerEvent('annotationssize', {size: data.size});
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectAnnotation(data) {
|
function selectAnnotation(data, stayAtPosition) {
|
||||||
if (Ox.isUndefined(data)) {
|
if (Ox.isUndefined(data)) {
|
||||||
// doubleclick on small timeline
|
// doubleclick on small timeline
|
||||||
data = getAnnotation();
|
data = getAnnotation();
|
||||||
|
@ -985,12 +983,20 @@ Ox.VideoEditor = function(options, self) {
|
||||||
}
|
}
|
||||||
// FIXME
|
// FIXME
|
||||||
// self.editing = false;
|
// self.editing = false;
|
||||||
self.options.selected = data.id;
|
if (data.id) {
|
||||||
if (self.options.selected) {
|
if (!stayAtPosition
|
||||||
self.options.annotationsRange != 'position' && setPosition(data['in']);
|
|| self.options.annotationsRange != 'position'
|
||||||
|
|| self.options.position < data['in']
|
||||||
|
|| self.options.position > data.out
|
||||||
|
) {
|
||||||
|
setPosition(data['in']);
|
||||||
|
// if annotationsRange is 'position',
|
||||||
|
// this may cause a deselect
|
||||||
|
}
|
||||||
setPoint('in', data['in'], true);
|
setPoint('in', data['in'], true);
|
||||||
setPoint('out', data.out, true);
|
setPoint('out', data.out, true);
|
||||||
}
|
}
|
||||||
|
self.options.selected = data.id;
|
||||||
self.$annotationPanel.options({selected: self.options.selected});
|
self.$annotationPanel.options({selected: self.options.selected});
|
||||||
setTimelineState();
|
setTimelineState();
|
||||||
that.triggerEvent('select', {id: self.options.selected});
|
that.triggerEvent('select', {id: self.options.selected});
|
||||||
|
@ -1122,6 +1128,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
self.annotations = getAnnotations();
|
self.annotations = getAnnotations();
|
||||||
self.positions = getPositions();
|
self.positions = getPositions();
|
||||||
updateWords('add');
|
updateWords('add');
|
||||||
|
self.options.find && submitFindInput(self.options.find);
|
||||||
self.editing = false;
|
self.editing = false;
|
||||||
setTimelineState();
|
setTimelineState();
|
||||||
if (
|
if (
|
||||||
|
|
Loading…
Reference in a new issue