forked from 0x2620/oxjs
video editor update
This commit is contained in:
rlx
parent
ba9423462f
commit
88f31a5ae3
10 changed files with 245 additions and 65 deletions
|
|
@ -69,10 +69,10 @@ Ox.VideoEditor = function(options, self) {
|
|||
key_alt_shift_right: function() {
|
||||
},
|
||||
key_backslash: function() {
|
||||
select('subtitle');
|
||||
selectAnnotation();
|
||||
},
|
||||
key_closebracket: function() {
|
||||
movePositionTo('subtitle', 1);
|
||||
movePositionTo('annotation', 1);
|
||||
},
|
||||
key_comma: function() {
|
||||
movePositionTo('cut', -1);
|
||||
|
|
@ -83,6 +83,20 @@ Ox.VideoEditor = function(options, self) {
|
|||
key_down: function() {
|
||||
movePositionBy(self.sizes.timeline[0].width);
|
||||
},
|
||||
key_enter: function() {
|
||||
if (self.editiing) {
|
||||
submitAnnotation();
|
||||
} else if (self.options.selected) {
|
||||
editAnnotation();
|
||||
}
|
||||
},
|
||||
key_escape: function() {
|
||||
if (self.editing) {
|
||||
blurAnnotation();
|
||||
} else if (self.options.selected) {
|
||||
deselectAnnotation();
|
||||
}
|
||||
},
|
||||
key_f: function() {
|
||||
setTimeout(function() {
|
||||
self.$findInput.focusInput(true);
|
||||
|
|
@ -101,7 +115,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
setPoint('out', self.options.position);
|
||||
},
|
||||
key_openbracket: function() {
|
||||
movePositionTo('subtitle', -1);
|
||||
movePositionTo('annotation', -1);
|
||||
},
|
||||
key_p: playInToOut,
|
||||
key_right: function() {
|
||||
|
|
@ -141,7 +155,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
movePositionBy(-self.options.position);
|
||||
},
|
||||
key_slash: function() {
|
||||
select('cut');
|
||||
selectCut();
|
||||
},
|
||||
key_space: togglePaused,
|
||||
key_up: function() {
|
||||
|
|
@ -149,6 +163,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
});
|
||||
|
||||
Ox.loop(1, self.options.layers.length + 1, function(i) {
|
||||
that.bindEvent('key_' + i, function() {
|
||||
addAnnotation(self.options.layers[i - 1].id);
|
||||
});
|
||||
});
|
||||
|
||||
Ox.extend(self, {
|
||||
$player: [],
|
||||
$timeline: [],
|
||||
|
|
@ -157,7 +177,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
margin: 8,
|
||||
});
|
||||
|
||||
//Ox.print('VIDEO EDITOR OPTIONS', self.options)
|
||||
Ox.print('VIDEO EDITOR OPTIONS', self.options)
|
||||
|
||||
self.words = [];
|
||||
Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) {
|
||||
|
|
@ -306,8 +326,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
top: self.sizes.timeline[1].top + 'px',
|
||||
})
|
||||
.bindEvent({
|
||||
edit: editAnnotation,
|
||||
position: function(data) {
|
||||
setPosition(data.position);
|
||||
},
|
||||
select: function() {
|
||||
selectAnnotation();
|
||||
}
|
||||
})
|
||||
.appendTo(self.$editor);
|
||||
|
|
@ -335,10 +359,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
)
|
||||
.bindEvent({
|
||||
add: function(data) {
|
||||
data.layer = layer.id;
|
||||
data['in'] = self.options['in'];
|
||||
data.out = self.options.out;
|
||||
that.triggerEvent('addannotation', data);
|
||||
addAnnotation(layer.id);
|
||||
},
|
||||
blur: function() {
|
||||
//Ox.print('VIDEO EDITOR BLUR FOCUSED?', self.focused)
|
||||
|
|
@ -346,13 +367,13 @@ Ox.VideoEditor = function(options, self) {
|
|||
// ...
|
||||
} else {
|
||||
self.editing = false;
|
||||
setState();
|
||||
setTimelineState();
|
||||
this.blurItem();
|
||||
}
|
||||
},
|
||||
edit: function() {
|
||||
self.editing = true;
|
||||
setState();
|
||||
setTimelineState();
|
||||
},
|
||||
remove: function(data) {
|
||||
that.triggerEvent('removeannotation', {
|
||||
|
|
@ -372,7 +393,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
// ...
|
||||
}
|
||||
},
|
||||
submit: editAnnotation
|
||||
submit: submitAnnotation
|
||||
})
|
||||
.appendTo(self.$annotations);
|
||||
});
|
||||
|
|
@ -756,12 +777,31 @@ Ox.VideoEditor = function(options, self) {
|
|||
submitFindInput(self.options.find, true);
|
||||
}, 0);
|
||||
|
||||
function editAnnotation(data) {
|
||||
function addAnnotation(layer) {
|
||||
that.triggerEvent('addannotation', {
|
||||
'in': self.options['in'],
|
||||
layer: layer,
|
||||
out: self.options.out,
|
||||
value: ''
|
||||
});
|
||||
}
|
||||
|
||||
function blurAnnotation() {
|
||||
self.editing = false;
|
||||
setState();
|
||||
data['in'] = self.options['in'];
|
||||
data.out = self.options.out;
|
||||
that.triggerEvent('editannotation', data);
|
||||
setTimelineState();
|
||||
getPanel(self.options.selected).blurItem(self.options.selected);
|
||||
}
|
||||
|
||||
function deselectAnnotation() {
|
||||
// FIXME: there is selectAnnotation({id: ''})
|
||||
self.options.selected = '';
|
||||
setTimelineState();
|
||||
}
|
||||
|
||||
function editAnnotation() {
|
||||
self.editing = true;
|
||||
setTimelineState();
|
||||
getPanel(self.options.selected).editItem(self.options.selected);
|
||||
}
|
||||
|
||||
function find(query) {
|
||||
|
|
@ -778,21 +818,60 @@ Ox.VideoEditor = function(options, self) {
|
|||
return results;
|
||||
}
|
||||
|
||||
function getAnnotation() {
|
||||
// Get annotation at current position
|
||||
var annotations = [];
|
||||
self.options.layers.forEach(function(layer) {
|
||||
layer.items.forEach(function(item) {
|
||||
if (
|
||||
item['in'] <= self.options.position
|
||||
&& item.out >= self.options.position
|
||||
) {
|
||||
annotations.push(item);
|
||||
}
|
||||
});
|
||||
});
|
||||
annotations.sort(function(a, b) {
|
||||
var aValue = self.options.position - a['in'],
|
||||
bValue = self.options.position - b['in'],
|
||||
ret = 0;
|
||||
if (aValue < bValue) {
|
||||
ret = -1;
|
||||
} else if (aValue > bValue) {
|
||||
ret = 1;
|
||||
} else if (a.duration < b.duration) {
|
||||
ret = -1
|
||||
} else if (a.duration > b.duration) {
|
||||
ret = 1;
|
||||
} else if (a.value < b.value) {
|
||||
ret = -1
|
||||
} else if (a.value > b.value) {
|
||||
ret = 1;
|
||||
}
|
||||
return ret;
|
||||
});
|
||||
return annotations.length ? annotations[0] : {id: ''};
|
||||
}
|
||||
|
||||
// fixme: why not goToNextPosition()?
|
||||
function getNextPosition(type, direction) {
|
||||
var found = false,
|
||||
position = 0,
|
||||
positions;
|
||||
if (type == 'cut') {
|
||||
positions = self.options.cuts;
|
||||
if (type == 'annotation') {
|
||||
positions = Ox.sort(Ox.unique(Ox.flatten(
|
||||
self.options.layers.map(function(layer) {
|
||||
return layer.items.map(function(item) {
|
||||
return item['in'];
|
||||
});
|
||||
})
|
||||
)));
|
||||
} else if (type == 'cut') {
|
||||
positions = Ox.merge(0, self.options.cuts, self.options.duration);
|
||||
} else if (type == 'result') {
|
||||
positions = self.results.map(function(v) {
|
||||
return v['in'];
|
||||
});
|
||||
} else if (type == 'subtitle') {
|
||||
positions = self.options.subtitles.map(function(v) {
|
||||
return v['in'];
|
||||
});
|
||||
}
|
||||
direction == -1 && positions.reverse();
|
||||
Ox.forEach(positions, function(v) {
|
||||
|
|
@ -809,23 +888,42 @@ Ox.VideoEditor = function(options, self) {
|
|||
return position;
|
||||
}
|
||||
|
||||
function getPanel(annotationId) {
|
||||
var found = false, panel;
|
||||
Ox.forEach(self.options.layers, function(layer, i) {
|
||||
Ox.forEach(layer.items, function(item) {
|
||||
if (item.id == annotationId) {
|
||||
panel = self.$annotationPanel[i];
|
||||
found = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return !found;
|
||||
});
|
||||
return panel;
|
||||
}
|
||||
|
||||
/*
|
||||
function getPoints(type) {
|
||||
var found = false,
|
||||
points,
|
||||
positions = [];
|
||||
if (type == 'cut') {
|
||||
if (type == 'annotation') {
|
||||
|
||||
} else if (type == 'cut') {
|
||||
positions = self.options.cuts;
|
||||
} else if (type == 'match') {
|
||||
} else if (type == 'result') {
|
||||
// ...
|
||||
} else if (type == 'subtitle') {
|
||||
// FIXME: remove? annotation?
|
||||
self.options.subtitles.forEach(function(v, i) {
|
||||
positions.push(v['in']);
|
||||
positions.push(v.out);
|
||||
});
|
||||
}
|
||||
positions.indexOf(0) == -1 && positions.unshift(0);
|
||||
positions.indexOf(self.options.duration) == -1 &&
|
||||
positions.push(self.options.duration);
|
||||
positions.indexOf(self.options.duration) == -1
|
||||
&& positions.push(self.options.duration);
|
||||
Ox.forEach(positions, function(v, i) {
|
||||
if (v > self.options.position) {
|
||||
points = [positions[i - 1], positions[i]];
|
||||
|
|
@ -835,6 +933,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
return points;
|
||||
}
|
||||
*/
|
||||
|
||||
function getSizes(scrollbarIsVisible) {
|
||||
var scrollbarWidth = Ox.UI.SCROLLBAR_SIZE,
|
||||
|
|
@ -932,12 +1031,8 @@ Ox.VideoEditor = function(options, self) {
|
|||
function resizeEditor(data) {
|
||||
var width = data.size - 2 * margin + 100;
|
||||
resizeVideoPlayers(width);
|
||||
$timelineLarge.options({
|
||||
width: width
|
||||
});
|
||||
$timelineSmall.options({
|
||||
width: width
|
||||
});
|
||||
$timelineLarge.options({width: width});
|
||||
$timelineSmall.options({width: width});
|
||||
}
|
||||
|
||||
function resizePlayers() {
|
||||
|
|
@ -955,22 +1050,44 @@ Ox.VideoEditor = function(options, self) {
|
|||
|
||||
function selectAnnotation(data) {
|
||||
//Ox.print('VE.sA')
|
||||
if (Ox.isUndefined(data)) {
|
||||
data = getAnnotation();
|
||||
}
|
||||
self.editing = false;
|
||||
self.options.selected = data.id || '';
|
||||
self.options.annotationsRange != 'position' && setPosition(data['in']);
|
||||
setState();
|
||||
that.triggerEvent('select', {
|
||||
id: self.options.selected
|
||||
});
|
||||
self.options.selected = data.id;
|
||||
if (self.options.selected && self.options.annotationsRange != 'position') {
|
||||
setPosition(data['in']);
|
||||
}
|
||||
if (self.options.selected) {
|
||||
setPoint('in', data['in']);
|
||||
setPoint('out', data.out);
|
||||
Ox.print('???', JSON.stringify(self.options.selected), getPanel(self.options.selected))
|
||||
getPanel(self.options.selected).options({selected: self.options.selected});
|
||||
}
|
||||
setTimelineState();
|
||||
that.triggerEvent('select', {
|
||||
id: self.options.selected
|
||||
});
|
||||
}
|
||||
|
||||
function select(type) {
|
||||
self.options.points = getPoints(type);
|
||||
setPoints();
|
||||
function selectCut() {
|
||||
var points = {
|
||||
'in': Ox.last(self.options.cuts),
|
||||
out: self.options.duration
|
||||
};
|
||||
Ox.forEach(self.options.cuts, function(cut, i) {
|
||||
if (cut > self.options.position) {
|
||||
points = {
|
||||
'in': i ? self.options.cuts[i - 1] : 0,
|
||||
out: cut - 1 / self.options.fps
|
||||
};
|
||||
return false;
|
||||
}
|
||||
});
|
||||
self.options.selected = '';
|
||||
setTimelineState();
|
||||
setPoint('in', points['in']);
|
||||
setPoint('out', points.out);
|
||||
}
|
||||
|
||||
function setPoint(point, position, annotation) {
|
||||
|
|
@ -980,7 +1097,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
// should only happen through interaction
|
||||
if (self.options.selected && !self.editing) {
|
||||
self.options.selected = '';
|
||||
setState();
|
||||
setTimelineState();
|
||||
}
|
||||
*/
|
||||
self.$player.forEach(function($player) {
|
||||
|
|
@ -1057,7 +1174,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function setState() {
|
||||
function setTimelineState() {
|
||||
self.$timeline[1].options({
|
||||
state: self.editing ? 'editing'
|
||||
: self.options.selected ? 'selected'
|
||||
|
|
@ -1066,6 +1183,14 @@ Ox.VideoEditor = function(options, self) {
|
|||
//Ox.print('SET STATE', self.$timeline[1].options('state'))
|
||||
}
|
||||
|
||||
function submitAnnotation(data) {
|
||||
self.editing = false;
|
||||
setTimelineState();
|
||||
data['in'] = self.options['in'];
|
||||
data.out = self.options.out;
|
||||
that.triggerEvent('editannotation', data);
|
||||
}
|
||||
|
||||
function submitFindInput(value, hasPressedEnter) {
|
||||
self.options.find = value;
|
||||
self.results = find(self.options.find);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue