forked from 0x2620/oxjs
update video editor
This commit is contained in:
rlx
parent
56cf323110
commit
688ae65cf1
8 changed files with 413 additions and 176 deletions
|
|
@ -58,9 +58,6 @@ Ox.VideoEditor = function(options, self) {
|
|||
width: 0
|
||||
})
|
||||
.options(options || {})
|
||||
.mousedown(function() {
|
||||
that.gainFocus();
|
||||
})
|
||||
.bindEvent({
|
||||
key_0: toggleMuted,
|
||||
key_shift_0: function() {
|
||||
|
|
@ -90,8 +87,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
movePositionBy(self.sizes.timeline[0].width);
|
||||
},
|
||||
key_enter: function() {
|
||||
if (self.editiing) {
|
||||
submitAnnotation();
|
||||
if (self.editing) {
|
||||
// submitAnnotation();
|
||||
blurAnnotation();
|
||||
} else if (self.options.selected) {
|
||||
editAnnotation();
|
||||
}
|
||||
|
|
@ -211,8 +209,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
// the following is needed to determine
|
||||
// how to handle annotation input blur
|
||||
if (self.editing) {
|
||||
Ox.print('FOCUSED')
|
||||
self.focused = true;
|
||||
setTimeout(function() {
|
||||
// annotation folder will gain focus on blur
|
||||
// so we need to get focus back
|
||||
that.gainFocus();
|
||||
self.focused = false;
|
||||
}, 25);
|
||||
}
|
||||
|
|
@ -614,18 +616,26 @@ Ox.VideoEditor = function(options, self) {
|
|||
addAnnotation(data.layer);
|
||||
},
|
||||
annotationsfont: function(data) {
|
||||
self.options.annotationsFont = data.font;
|
||||
that.triggerEvent('annotationsfont', data);
|
||||
},
|
||||
annotationsrange: function(data) {
|
||||
self.options.annotationsRange = data.range;
|
||||
that.triggerEvent('annotationsrange', data);
|
||||
},
|
||||
annotationssort: function(data) {
|
||||
self.options.annotationsSort = data.sort;
|
||||
that.triggerEvent('annotationssort', data);
|
||||
},
|
||||
blur: function() {
|
||||
Ox.print('VE-BLUR')
|
||||
self.editing = false;
|
||||
setTimelineState();
|
||||
blur: function(data) {
|
||||
Ox.print('VIDEO EDITOR BLUR')
|
||||
!self.focused && blurAnnotation();
|
||||
},
|
||||
change: function(data) {
|
||||
that.triggerEvent('editannotation', data);
|
||||
},
|
||||
define: function(data) {
|
||||
that.triggerEvent('define', data);
|
||||
},
|
||||
edit: function() {
|
||||
self.editing = true;
|
||||
|
|
@ -633,10 +643,14 @@ Ox.VideoEditor = function(options, self) {
|
|||
},
|
||||
paused: togglePaused,
|
||||
remove: function(data) {
|
||||
that.triggerEvent('removeannotation', {
|
||||
id: data.id,
|
||||
layer: data.layer
|
||||
});
|
||||
Ox.print('?>???', data)
|
||||
var layer = Ox.getObjectById(self.options.layers, data.layer),
|
||||
index = Ox.getIndexById(layer.items, data.id);
|
||||
layer.items.splice(index, 1);
|
||||
self.editing = false;
|
||||
self.options.selected = '';
|
||||
setTimelineState();
|
||||
that.triggerEvent('removeannotation', data);
|
||||
},
|
||||
resize: resizeAnnotations,
|
||||
resizeend: resizeendAnnotations,
|
||||
|
|
@ -650,6 +664,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
submit: submitAnnotation,
|
||||
toggle: toggleAnnotations,
|
||||
togglecalendar: function(data) {
|
||||
self.options.showAnnotationsCalendar = !data.collapsed;
|
||||
that.triggerEvent('togglecalendar', data);
|
||||
},
|
||||
togglelayer: function(data) {
|
||||
|
|
@ -659,6 +674,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
},
|
||||
togglemap: function(data) {
|
||||
self.options.showAnnotationsMap = !data.collapsed;
|
||||
that.triggerEvent('togglemap', data);
|
||||
}
|
||||
});
|
||||
|
|
@ -685,7 +701,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
collapsible: true,
|
||||
element: self.$annotationPanel,
|
||||
resizable: true,
|
||||
resize: [192, 256, 320, 384],
|
||||
resize: [192, 256, 320, 384, 448, 512],
|
||||
size: self.options.annotationsSize,
|
||||
tooltip: self.options.tooltips ? 'annotations' : false
|
||||
}
|
||||
|
|
@ -712,7 +728,17 @@ Ox.VideoEditor = function(options, self) {
|
|||
function blurAnnotation() {
|
||||
self.editing = false;
|
||||
setTimelineState();
|
||||
self.$annotationPanel.blurItem();
|
||||
if (
|
||||
self.options.annotationsRange == 'position' && (
|
||||
self.options.position < self.options['in']
|
||||
|| self.options.position > self.options.out
|
||||
)
|
||||
) {
|
||||
setPosition(self.options['in']);
|
||||
}
|
||||
// setPosition causes a folder redraw
|
||||
// so blur once that's done
|
||||
setTimeout(self.$annotationPanel.blurItem, 0);
|
||||
}
|
||||
|
||||
function editAnnotation() {
|
||||
|
|
@ -932,7 +958,6 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
//Ox.print('VE.sA')
|
||||
if (Ox.isUndefined(data)) {
|
||||
// doubleclick on small timeline
|
||||
data = getAnnotation();
|
||||
|
|
@ -941,13 +966,10 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
self.editing = false;
|
||||
self.options.selected = data.id;
|
||||
// fixme: what is the following supposed to do?
|
||||
if (self.options.selected && self.options.annotationsRange != 'position') {
|
||||
setPosition(data['in']);
|
||||
}
|
||||
if (self.options.selected) {
|
||||
setPoint('in', data['in']);
|
||||
setPoint('out', data.out);
|
||||
self.options.annotationsRange != 'position' && setPosition(data['in']);
|
||||
setPoint('in', data['in'], true);
|
||||
setPoint('out', data.out, true);
|
||||
}
|
||||
self.$annotationPanel.options({selected: self.options.selected});
|
||||
setTimelineState();
|
||||
|
|
@ -976,16 +998,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
setPoint('out', points.out);
|
||||
}
|
||||
|
||||
function setPoint(point, position, annotation) {
|
||||
function setPoint(point, position, keepSelected) {
|
||||
var otherPoint = point == 'in' ? 'out' : 'in';
|
||||
self.options[point] = position;
|
||||
/*
|
||||
// should only happen through interaction
|
||||
if (self.options.selected && !self.editing) {
|
||||
self.options.selected = '';
|
||||
setTimelineState();
|
||||
if (self.options.selected && !self.editing && !keepSelected) {
|
||||
selectAnnotation({id: ''});
|
||||
}
|
||||
*/
|
||||
self.$player.forEach(function($player) {
|
||||
$player.options(point, self.options[point]);
|
||||
});
|
||||
|
|
@ -996,22 +1014,22 @@ Ox.VideoEditor = function(options, self) {
|
|||
$timeline.options(point, self.options[point]);
|
||||
});
|
||||
if (self.options['in'] > self.options.out) {
|
||||
setPoint(point == 'in' ? 'out' : 'in', position);
|
||||
}
|
||||
self.$annotationPanel.options({
|
||||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
that.triggerEvent('points', {
|
||||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
if (self.editing) {
|
||||
that.triggerEvent('editannotation', {
|
||||
id: self.options.selected,
|
||||
setPoint(point == 'in' ? 'out' : 'in', position, keepSelected);
|
||||
} else {
|
||||
self.$annotationPanel.options({
|
||||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
that.triggerEvent('points', {
|
||||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
self.editing && that.triggerEvent('editannotation', {
|
||||
id: self.options.selected,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
value: $('.OxEditableElement input:visible').val()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1068,6 +1086,17 @@ Ox.VideoEditor = function(options, self) {
|
|||
function submitAnnotation(data) {
|
||||
self.editing = false;
|
||||
setTimelineState();
|
||||
Ox.print('....', self.options.annotationsRange == 'position',
|
||||
self.options.position < self.options['in'],
|
||||
self.options.position > self.options.out)
|
||||
if (
|
||||
self.options.annotationsRange == 'position' && (
|
||||
self.options.position < self.options['in']
|
||||
|| self.options.position > self.options.out
|
||||
)
|
||||
) {
|
||||
setPosition(self.options['in']);
|
||||
}
|
||||
data['in'] = self.options['in'];
|
||||
data.out = self.options.out;
|
||||
that.triggerEvent('editannotation', data);
|
||||
|
|
@ -1149,9 +1178,15 @@ Ox.VideoEditor = function(options, self) {
|
|||
annotation <o> annotation to add
|
||||
@*/
|
||||
that.addAnnotation = function(layer, annotation) {
|
||||
// called from addannotation callback
|
||||
self.$annotationPanel.addItem(layer, annotation);
|
||||
};
|
||||
|
||||
that.updateAnnotation = function(annotation) {
|
||||
// called from editannotation callback
|
||||
self.$annotationPanel.updateItem(annotation);
|
||||
}
|
||||
|
||||
/*@
|
||||
removeAnnotation <f> remove annotation
|
||||
(layer, ids) -> <o> remove annotation from layer
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue