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

update video editor

Browse source
This commit is contained in:
rlx 2012-01-15 20:35:17 +05:30
commit 688ae65cf1
8 changed files with 413 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

94
source/Ox.UI/js/Video/Ox.AnnotationFolder.js
View file

@ -57,7 +57,12 @@ Ox.AnnotationFolder = function(options, self) {
})
.bindEvent({
click: function() {
var item = Ox.getObjectById(self.options.items, self.options.selected);
that.triggerEvent('define', item.place ? {
id: item.place.id
} : {
name: item.value
});
}
});
}
@ -127,6 +132,7 @@ Ox.AnnotationFolder = function(options, self) {
} else { // place
self.$widget = self.$map = Ox.Map({
places: getPlaces(),
showTypes: true,
// FIXME: should be showZoombar
zoombar: true
// showLabels: true
@ -168,7 +174,9 @@ Ox.AnnotationFolder = function(options, self) {
self.$annotations = Ox.ArrayEditable({
editable: self.options.editable,
items: getAnnotations(),
placeholder: 'No ' + self.options.title,
selected: self.options.selected,
separator: ';',
sort: self.sort,
submitOnBlur: false,
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
@ -177,12 +185,19 @@ Ox.AnnotationFolder = function(options, self) {
//.css({marginTop: '256px'})
.bindEvent({
add: function(data) {
that.triggerEvent('add', {value: data.value || ''});
if (self.editing) {
// FIXME: changed value will not be saved!
}
that.triggerEvent('add', {value: data.value || ''});
},
blur: function() {
// the video editor will, if it has not received focus,
// call blurItem
that.triggerEvent('blur');
},
change: changeAnnotation,
'delete': function(data) {
self.editing = false;
that.triggerEvent('remove', {id: data.id});
},
edit: function() {
@ -208,6 +223,12 @@ Ox.AnnotationFolder = function(options, self) {
showWarnings();
function changeAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
that.triggerEvent('change', item);
}
function dragstart() {
if (self.options.showWidget) {
self.drag = {
@ -298,7 +319,7 @@ Ox.AnnotationFolder = function(options, self) {
function selectAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
self.options.selected = item ? data.id : '';
self.$defineButton.options({disabled: !self.options.selected});
self.widget && self.$defineButton.options({disabled: !self.options.selected});
///*
if (self.options.type == 'place') {
self.$map.options({
@ -315,14 +336,16 @@ Ox.AnnotationFolder = function(options, self) {
}
function showWarnings() {
if (self.widget) {
if (self.widget && self.options.items.length) {
self.$annotations.find('.OxValue').each(function() {
var $element = $(this);
if (!Ox.getObject(
self.options.items, 'value', $element.html()
)[self.options.type]) {
$element.css({color: 'rgb(192, 64, 64)'});
}
try { // FIXME: bad data, remove later!!
if (!Ox.getObject(
self.options.items, 'value', $element.html()
)[self.options.type]) {
$element.css({color: 'rgb(192, 64, 64)'});
}
} catch(e) {}
});
}
}
@ -331,7 +354,6 @@ Ox.AnnotationFolder = function(options, self) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
self.editing = false;
Ox.print('??:', self.options.items[0], self.$annotations.options('items')[0])
//self.$annotations.options({items: self.options.items});
self.options.sort == 'text' && self.$annotations.reloadItems();
that.triggerEvent('submit', item);
@ -353,6 +375,17 @@ Ox.AnnotationFolder = function(options, self) {
that.triggerEvent('togglewidget', {collapsed: !self.options.showWidget});
}
function updateAnnotations() {
self.$annotations.options({items: getAnnotations()});
showWarnings();
}
function updateWidget() {
self.options.type == 'event'
? self.$calendar.options({events: getEvents()})
: self.$map.options({places: getPlaces()});
}
self.setOption = function(key, value) {
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
var index = Ox.getIndexById(self.options.items, self.options.selected);
@ -361,19 +394,19 @@ Ox.AnnotationFolder = function(options, self) {
}
if (key == 'in') {
//fixme: array editable should support item updates while editing
if (self.editing || self.options.range == 'selection') {
self.options.type == 'place' ? self.$map.options({places: getPlaces()})
: self.$annotations.options({items: getAnnotations()});
if (self.options.range == 'selection') {
self.widget && updateWidget();
updateAnnotations();
}
} else if (key == 'out') {
if (self.editing || self.options.range == 'selection') {
self.options.type == 'place' ? self.$map.options({places: getPlaces()})
: self.$annotations.options({items: getAnnotations()});
if (self.options.range == 'selection') {
self.widget && updateWidget();
updateAnnotations();
}
} else if (key == 'position') {
if (self.editing || self.options.range == 'position') {
self.options.type == 'place' ? self.$map.options({places: getPlaces()})
: self.$annotations.options({items: getAnnotations()});
if (self.options.range == 'position') {
self.widget && updateWidget();
updateAnnotations();
}
} else if (key == 'range') {
self.$annotations.options({items: getAnnotations()});
@ -387,8 +420,7 @@ Ox.AnnotationFolder = function(options, self) {
self.$annotations.options({sort: self.sort});
showWarnings();
} else if (key == 'users') {
self.$annotations.options({items: getAnnotations()});
showWarnings();
updateAnnotations();
} else if (key == 'width') {
Ox.print('RESIZE!!!!')
if (self.widget) {
@ -406,18 +438,26 @@ Ox.AnnotationFolder = function(options, self) {
addItem <f> addItem
@*/
that.addItem = function(item) {
Ox.print('FOLDER ADD ITEM', item)
var pos = 0;
self.options.items.splice(pos, 0, item);
self.$annotations.addItem(pos, item);
self.$annotations.editItem(item.id);
self.$annotations
.addItem(pos, item)
.options({selected: item.id})
.editItem();
//selectAnnotation(item);
//that.triggerEvent('edit');
return that;
};
that.blurItem = function() {
self.$annotations.blurItem();
return that;
};
that.editItem = function() {
self.$annotations.editItem();
return that;
};
/*@
@ -431,6 +471,14 @@ Ox.AnnotationFolder = function(options, self) {
};
*/
that.updateItem = function(item) {
var index = Ox.getIndexById(self.options.items, item.id);
self.options.items[index] = item;
self.widget && updateWidget();
updateAnnotations();
return that;
}
return that;
};

18
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -174,8 +174,14 @@ Ox.AnnotationPanel = function(options, self) {
blur: function() {
that.triggerEvent('blur');
},
change: function(data) {
that.triggerEvent('change', Ox.extend({layer: layer.id}, data));
},
define: function(data) {
that.triggerEvent('define', data);
},
edit: function() {
that.triggerEvent('edit')
that.triggerEvent('edit');
},
paused: function() {
that.triggerEvent('paused')
@ -192,7 +198,7 @@ Ox.AnnotationPanel = function(options, self) {
selectAnnotation(data, i);
},
submit: function(data) {
that.triggerEvent('submit', data);
that.triggerEvent('submit', Ox.extend({layer: layer.id}, data));
},
togglelayer: function(data) {
that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data));
@ -290,11 +296,11 @@ Ox.AnnotationPanel = function(options, self) {
};
that.addItem = function(layer, item) {
Ox.print('ADD ITEM', layer, item);
var i = Ox.getIndexById(self.options.layers, layer);
self.$folder[i].addItem(item);
};
that.blurItem = function() {
getFolder(self.options.selected).blurItem();
};
@ -303,9 +309,9 @@ Ox.AnnotationPanel = function(options, self) {
getFolder(self.options.selected).editItem();
};
that.updateItem = function(layer, item) {
var i = Ox.getIndexById(self.options.layers, layer);
self.$folder[i].updateItem(item);
that.updateItem = function(item) {
Ox.print('UPDATE ITEM', item);
getFolder(item.id).updateItem(item);
};
return that;

119
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -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