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

update video editor

Browse source
This commit is contained in:
rlx 2012-01-13 00:34:32 +05:30
parent b2e8b2ac82
commit f61e39a788
9 changed files with 141 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
source/Ox.UI/js/Form/Ox.ArrayEditable.js
View file

@ -72,11 +72,13 @@ Ox.ArrayEditable = function(options, self) {
}
function deleteItem() {
self.options.items.splice(self.selected, 1);
renderItems();
that.triggerEvent('delete', {
id: self.options.selected
});
if (self.options.editable) {
self.options.items.splice(self.selected, 1);
renderItems();
that.triggerEvent('delete', {
id: self.options.selected
});
}
}
function doubleclick(e) {
@ -84,7 +86,7 @@ Ox.ArrayEditable = function(options, self) {
$parent = $target.parent();
if ($parent.is('.OxEditableElement')) {
that.editItem();
} else if(!$target.is('.OxInput')) {
} else if (!$target.is('.OxInput')) {
that.triggerEvent('add');
}
}
@ -106,7 +108,7 @@ Ox.ArrayEditable = function(options, self) {
.html(', ')
.appendTo(that);
self.$items[i] = Ox.Editable({
editable: item.editable,
editable: self.options.editable && item.editable,
format: function(value) {
return value || ' '
},
@ -155,6 +157,10 @@ Ox.ArrayEditable = function(options, self) {
self.selected = idOrPosition;
self.options.selected = getSelectedId();
}
if (self.options.selected == '' && self.editing) {
self.editing = false;
that.blurItem();
}
Ox.print('SELECT ITEM', self.options.selected, self.selected);
that.find('.OxSelected').removeClass('OxSelected');
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
@ -222,12 +228,19 @@ Ox.ArrayEditable = function(options, self) {
selectItem(value);
} else if (key == 'sort') {
renderItems();
} else if (key == 'width') {
that.css({width: value - 8 + 'px'}); // 2 x 4 px padding
self.options.type == 'textarea' && self.$items.forEach(function($item) {
$item.options({width: value})
});
}
}
that.addItem = function(position, item) {
self.options.items.splice(position, 0, item);
renderItems();
if (self.options.editable) {
self.options.items.splice(position, 0, item);
renderItems();
}
//that.triggerEvent('add');
/*
self.values = Ox.filter(values, function(value) {
@ -240,15 +253,20 @@ Ox.ArrayEditable = function(options, self) {
};
that.blurItem = function() {
self.options.selected && self.$items[self.selected].options({
editing: false
});
if (self.options.selected) {
self.$items[self.selected].options({editing: false});
} else {
self.$items.forEach(function($item) {
$item.options({editing: false});
});
}
};
that.editItem = function() {
if (self.options.selected) {
if (self.options.editable && self.options.selected) {
Ox.forEach(self.$items, function($item) {
if ($item.data('position') == self.selected) {
Ox.print('DBLCLICK')
$item.triggerEvent('doubleclick');
return false;
}
@ -261,7 +279,9 @@ Ox.ArrayEditable = function(options, self) {
};
that.removeItem = function(position) {
if (self.options.editable) {
}
};
return that;

1
source/Ox.UI/js/Form/Ox.Editable.js
View file

@ -72,6 +72,7 @@ Ox.Editable = function(options, self) {
}
function cancel() {
self.options.editing = false;
self.options.value = self.originalValue;
self.$input.value(formatInputValue()).hide();
self.$test.html(formatTestValue());

6
source/Ox.UI/js/Map/Ox.Map.js
View file

@ -1388,8 +1388,10 @@ Ox.Map = function(options, self) {
if (key == 'height' || key == 'width') {
that.resizeMap();
} else if (key == 'places') {
//fixme: should zoom to new bounds
zoom(0);
Ox.print('MAP SET OPTIONS PLACES', value);
getMapBounds(function(mapBounds) {
self.map.fitBounds(mapBounds);
});
} else if (key == 'selected') {
selectPlace(value);
} else if (key == 'type') {

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

@ -71,7 +71,22 @@ Ox.AnnotationFolder = function(options, self) {
if (self.options.type == 'event') {
self.$annotations = Ox.Element();
} else if (self.options.type == 'place') {
self.$annotations = Ox.Element();
self.$annotations = Ox.Element()
.css({
width: self.options.width + 'px',
height: '256px'
});
Ox.print('PLACES::', self.places)
self.$map = Ox.Map({
places: getPlaces()
// showLabels: true
})
.bindEvent({
selectplace: function(data) {
selectAnnotation({id: data.annotationId});
}
})
.appendTo(self.$annotations);
} else if (['string', 'text'].indexOf(self.options.type) > -1) {
self.$annotations = Ox.ArrayEditable({
editable: self.options.editable,
@ -130,6 +145,18 @@ Ox.AnnotationFolder = function(options, self) {
});
}
function getPlaces() {
var places = [];
getAnnotations().forEach(function(item) {
if (item.place && Ox.getIndexById(places, item.place.id) == -1) {
places.push(Ox.extend({
annotationId: item.id
}, item.place));
}
});
return places;
}
function getSort() {
return ({
duration: ['-duration', '+in', '+value'],
@ -171,27 +198,36 @@ Ox.AnnotationFolder = function(options, self) {
}
if (key == 'in') {
//fixme: array editable should support item updates while editing
self.editing || self.options.range == 'selection' && self.$annotations.options({
items: getAnnotations()
});
if (self.editing || self.options.range == 'selection') {
self.options.type == 'place' ? self.$map.options({places: getPlaces()})
: self.$annotations.options({items: getAnnotations()});
}
} else if (key == 'out') {
self.editing || self.options.range == 'selection' && self.$annotations.options({
items: getAnnotations()
});
if (self.editing || self.options.range == 'selection') {
self.options.type == 'place' ? self.$map.options({places: getPlaces()})
: self.$annotations.options({items: getAnnotations()});
}
} else if (key == 'position') {
self.editing || self.options.range == 'position' && self.$annotations.options({
items: getAnnotations()
});
if (self.editing || self.options.range == 'position') {
self.options.type == 'place' ? self.$map.options({places: getPlaces()})
: self.$annotations.options({items: getAnnotations()});
}
} else if (key == 'range') {
self.$annotations.options({items: getAnnotations()});
} else if (key == 'selected') {
if (value === '') {
self.editing = false;
}
self.$annotations.options({selected: value});
} else if (key == 'sort') {
self.sort = getSort();
self.$annotations.options({sort: self.sort});
} else if (key == 'users') {
Ox.print('USERS ->', value)
self.$annotations.options({items: getAnnotations()});
} else if (key == 'width') {
self.$annotations.options({
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
});
}
};

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

@ -98,6 +98,8 @@ Ox.AnnotationPanel = function(options, self) {
});
that.triggerEvent('annotations' + data.id, set);
}
// FIXME: this does not work
self.options.selected && getFolder(self.options.selected).gainFocus();
}
})
.appendTo(self.$menubar);
@ -175,7 +177,7 @@ Ox.AnnotationPanel = function(options, self) {
that.triggerEvent('submit', data);
},
toggle: function(data) {
that.triggerEvent('toggle', Ox.extend({layer: layer.id}, data));
that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data));
}
})
.appendTo(self.$folders);
@ -194,11 +196,6 @@ Ox.AnnotationPanel = function(options, self) {
],
orientation: 'vertical'
})
.bindEvent({
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
toggle: toggleAnnotations
})
);
function getFolder(annotationId) {
@ -242,18 +239,6 @@ Ox.AnnotationPanel = function(options, self) {
that.triggerEvent('select', data);
}
function resizeAnnotations() {
}
function resizeendAnnotations() {
}
function toggleAnnotations() {
}
function updateEditMenu() {
var action = self.options.selected ? 'enableItem' : 'disableItem';
self.$editMenuButton[action]('edit');
@ -274,6 +259,10 @@ Ox.AnnotationPanel = function(options, self) {
$folder.options({selected: ''});
})
}
} else if (key == 'width') {
self.$folder.forEach(function($folder) {
$folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE});
});
}
};

1
source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
View file

@ -11,6 +11,7 @@ Ox.SmallVideoTimeline = function(options, self) {
.defaults({
// _offset is a hack for cases where all these position: absolute
// elements have to go into a float: left
// FIXME: possible unused and unneeded
_offset: 0,
disabled: false,
duration: 0,

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

@ -630,12 +630,12 @@ Ox.VideoEditor = function(options, self) {
layer: data.layer
});
},
select: function(data) {
!data.id && that.gainFocus();
selectAnnotation(data);
},
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
select: selectAnnotation,
submit: submitAnnotation,
toggle: function(data) {
toggle: toggleAnnotations,
togglelayer: function(data) {
that.triggerEvent('togglelayer', {
collapsed: data.collapsed,
layer: data.layer
@ -904,30 +904,11 @@ Ox.VideoEditor = function(options, self) {
function resizeAnnotations(data) {
self.options.annotationsSize = data.size;
setSizes();
self.$annotationPanel.options({width: data.size});
}
function resizeendAnnotations(data) {
that.triggerEvent('annotationsSize', {size: data.size});
}
function resizeEditor(data) {
var width = data.size - 2 * margin + 100;
resizeVideoPlayers(width);
$timelineLarge.options({width: width});
$timelineSmall.options({width: width});
}
function resizePlayers() {
self.$player.forEach(function(v, i) {
v.options({
width: size[i].width,
height: size[i].height
})
.css({
left: size[i].left + 'px',
top: size[i].top + 'px',
});
});
that.triggerEvent('annotationssize', {size: data.size});
}
function selectAnnotation(data) {
@ -935,6 +916,8 @@ Ox.VideoEditor = function(options, self) {
if (Ox.isUndefined(data)) {
// doubleclick on small timeline
data = getAnnotation();
} else if (!data.id) {
that.gainFocus();
}
self.editing = false;
self.options.selected = data.id;

44
source/Ox.UI/js/Video/Ox.VideoPanel.js
View file

@ -39,7 +39,9 @@ Ox.VideoPanel = function(options, self) {
resolution: 0,
scaleToFill: false,
showAnnotations: false,
showLayers: {},
showTimeline: true,
showUsers: false,
subtitles: [],
tooltips: false,
video: '',
@ -106,9 +108,11 @@ Ox.VideoPanel = function(options, self) {
paused: function(data) {
that.triggerEvent('paused', data);
},
playing: setPosition,
playing: function(data) {
setPosition(data.position, true);
},
position: function(data) {
setPosition(data);
setPosition(data.position);
that.triggerEvent('position', data);
},
resolution: function(data) {
@ -167,15 +171,20 @@ Ox.VideoPanel = function(options, self) {
self.$annotationPanel = Ox.AnnotationPanel({
font: self.options.annotationsFont,
'in': self.options['in'],
layers: self.options.layers,
out: self.options.out,
position: self.options.position,
range: self.options.annotationsRange,
showFonts: true,
showLayers: self.options.showLayers,
showUsers: self.options.showUsers,
sort: self.options.annotationsSort
})
.bindEvent({
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
select: selectAnnotation,
toggle: toggleAnnotations
});
@ -200,6 +209,7 @@ Ox.VideoPanel = function(options, self) {
function changeTimeline(data) {
self.options.position = data.position;
self.$video.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position});
that.triggerEvent('position', {position: self.options.position});
}
@ -256,12 +266,27 @@ Ox.VideoPanel = function(options, self) {
});
}
function setPosition(data) {
self.options.position = data.position;
//self.$video.position(self.options.position);
self.$timeline.options({
position: self.options.position
});
function selectAnnotation(data) {
self.options.selected = data.id;
if (self.options.selected) {
setPosition(data['in']);
setPoint('in', data['in']);
setPoint('out', data.out);
}
}
function setPoint(point, position) {
self.options[point] = position;
self.$video.options(point, position);
self.$timeline.options(point, position);
self.$annotationPanel.options(point, position);
}
function setPosition(position, playing) {
self.options.position = position;
!playing && self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position});
}
function toggleAnnotations(data) {
@ -300,6 +325,9 @@ Ox.VideoPanel = function(options, self) {
self.$timeline.options({
position: value
});
self.$annotationPanel.options({
position: value
});
} else if (key == 'showAnnotations') {
that.$element.toggle(1);
} else if (key == 'showTimeline') {

3
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -1367,7 +1367,7 @@ Ox.VideoPlayer = function(options, self) {
function getTimeline() {
var $timeline = Ox.SmallVideoTimeline({
_offset: getTimelineLeft(),
//_offset: getTimelineLeft(),
disabled: !self.options.enableTimeline,
duration: self.options.duration,
find: self.options.find,
@ -1417,6 +1417,7 @@ Ox.VideoPlayer = function(options, self) {
}
left += control == 'position' ? self.positionWidth : 16
});
Ox.print('TIMELINE_LEFT = ', left)
return left;
}