0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update VideoEditPanel and ClipPanel (select clip at position, update selection on cut)

Browse source
This commit is contained in:
rolux 2014-02-12 11:39:48 +00:00
parent 71ef581b80
commit 7db11814e3
2 changed files with 51 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
source/Ox.UI/js/Video/ClipPanel.js
View file

@ -36,14 +36,15 @@ Ox.ClipPanel = function(options, self) {
.options(options || {})
.update({
clips: function() {
var action = self.options.clips.length && self.options.view != 'annotations'
? 'enableItem' : 'disableItem';
self.$list.options({
items: Ox.clone(self.options.clips),
sort: getListSort(),
sortable: isSortable()
});
self.$menu[
self.options.clips.length ? 'enableItem' : 'disableItem'
]('select');
self.$menu[action]('selectclip');
self.$menu[action]('splitclip');
updateStatus();
},
duration: updateStatus,
@ -173,7 +174,8 @@ Ox.ClipPanel = function(options, self) {
{id: 'annotations', title: Ox._('View Annotations'), checked: self.options.view == 'annotations'},
]},
{},
{id: 'select', title: 'Select Clip at Current Position', disabled: self.options.clips.length == 0},
{id: 'selectclip', title: 'Select Clip at Current Position', keyboard: '\\', disabled: self.options.clips.length == 0 || self.options.view == 'annotations'},
{id: 'splitclip', title: 'Split Clip at Current Position', keyboard: 'shift \\', disabled: self.options.clips.length == 0 || self.options.view == 'annotations'},
{},
{id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || self.options.selected.length == 0 || self.options.view == 'annotations'},
{id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || self.options.selected.length < 2 || self.options.view == 'annotations'},
@ -208,7 +210,12 @@ Ox.ClipPanel = function(options, self) {
}
},
click: function(data) {
if (data.id == 'split') {
if (data.id == 'selectclip') {
that.selectClip();
self.$list.gainFocus();
} else if (data.id == 'splitclip') {
// ...
} else if (data.id == 'split') {
splitClips();
} else if (data.id == 'join') {
joinClips();
@ -409,10 +416,20 @@ Ox.ClipPanel = function(options, self) {
that.triggerEvent('copyadd', data);
},
cut: function(data) {
self.options.editable && that.triggerEvent('cut', data);
if (self.options.editable) {
that.triggerEvent('cut', data);
self.options.selected = [];
selectClips();
that.triggerEvent('select', {ids: []});
}
},
cutadd: function(data) {
self.options.editable && that.triggerEvent('cutadd', data);
if (self.options.editable) {
that.triggerEvent('cutadd', data);
self.options.selected = [];
selectClips();
that.triggerEvent('select', {ids: []});
}
},
'delete': function(data) {
self.options.editable && that.triggerEvent('delete', data);
@ -534,19 +551,6 @@ Ox.ClipPanel = function(options, self) {
}
}
function selectClipAtPosition() {
var index;
Ox.forEach(self.options.clips, function(clip, i) {
index = i;
if (clip.position + clip.duration < self.options.position) {
return false; // break
}
});
self.options.selected = [self.options.clips[index].id];
selectClips();
that.triggerEvent('select', {ids: self.options.selected});
}
function selectClips() {
if (self.options.editable) {
self.$menu[
@ -604,11 +608,28 @@ Ox.ClipPanel = function(options, self) {
self.$list.selectAll();
};
that.selectClip = function() {
var index;
Ox.forEach(self.options.clips, function(clip, i) {
Ox.print('CLIP', i, clip.position, clip.duration, self.options.position)
if (clip.position <= self.options.position) {
index = i
} else {
return false; // break
}
});
self.options.selected = [self.options.clips[index].id];
selectClips();
that.triggerEvent('select', {ids: self.options.selected});
return that;
};
that.updateItem = function(id, data) {
self.options.clips[Ox.getIndexById(self.options.clips, id)] = data;
['in', 'out', 'duration'].forEach(function(key) {
self.$list.value(id, key, data[key]);
});
return that;
};
return that;

26
source/Ox.UI/js/Video/VideoEditPanel.js
View file

@ -88,10 +88,10 @@ Ox.VideoEditPanel = function(options, self) {
position: function() {
self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position});
self.$clipPanel.options({position: self.options.position});
},
selected: function() {
self.$annotationPanel.options({selected: self.options.selected});
self.$clipPanel.options({selected: self.options.selected});
},
showClips: function() {
self.$mainPanel.toggle(1);
@ -130,7 +130,11 @@ Ox.VideoEditPanel = function(options, self) {
.bindEvent({
//resize: resizeElement,
key_0: toggleMuted,
key_backslash: selectClip,
key_backslash: function() {
if (self.options.view != 'annotations') {
self.$clipPanel.selectClip();
}
},
key_closebracket: function() {
movePositionTo('chapter', 1);
},
@ -178,6 +182,9 @@ Ox.VideoEditPanel = function(options, self) {
key_shift_o: function() {
goToPoint('out');
},
key_slash: function() {
// TODO: selectCut
},
key_shift_right: function() {
movePositionBy(1);
},
@ -566,19 +573,6 @@ Ox.VideoEditPanel = function(options, self) {
that.triggerEvent('size', data.size);
}
function selectClip() {
var id = Ox.last(self.options.clips).id;
Ox.forEach(self.options.clips, function(clip, i) {
if (clip.position > self.options.position) {
id = self.options.clips[i - 1].id;
return false; // break
}
});
self.options.selected = [id];
self.$clipPanel.options({selected: self.options.selected});
that.triggerEvent('select', {id: self.options.selected});
}
function setPoint(point, position, triggerEvent) {
self.options[point] = position;
self.$video.options(point, position);