forked from 0x2620/oxjs
update video editor
This commit is contained in:
rlx
parent
e98696b93d
commit
b2e8b2ac82
9 changed files with 623 additions and 485 deletions
|
|
@ -1,20 +1,7 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
|
||||
() -> <f> AnnotationPanel Object
|
||||
(options) -> <f> AnnotationPanel Object
|
||||
(options, self) -> <f> AnnotationPanel Object
|
||||
options <o> Options object
|
||||
editable <b|false> If true, annotations can be added
|
||||
id <s> id
|
||||
items <a|[]> items
|
||||
title <s> title
|
||||
type <s|'text'> panel type
|
||||
width <n|0>
|
||||
self <o> shared private variable
|
||||
Ox.AnnotationPanel <f> Video Annotation Panel
|
||||
@*/
|
||||
|
||||
Ox.AnnotationPanel = function(options, self) {
|
||||
|
|
@ -22,195 +9,287 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
collapsed: false,
|
||||
editable: false,
|
||||
id: '',
|
||||
'in': 0,
|
||||
item: '',
|
||||
items: [],
|
||||
out: 0,
|
||||
position: 0,
|
||||
font: 'small',
|
||||
layers: [],
|
||||
range: 'all',
|
||||
selected: '',
|
||||
showFonts: false,
|
||||
showLayers: {},
|
||||
showUsers: false,
|
||||
sort: 'position',
|
||||
title: '',
|
||||
type: 'text',
|
||||
width: 0
|
||||
width: 256
|
||||
})
|
||||
.options(options || {});
|
||||
.options(options || {})
|
||||
.addClass('OxAnnotationPanel');
|
||||
|
||||
self.sort = getSort();
|
||||
|
||||
that.setElement(
|
||||
Ox.CollapsePanel({
|
||||
collapsed: self.options.collapsed,
|
||||
extras: self.options.editable ? [
|
||||
Ox.Button({
|
||||
id: 'add',
|
||||
style: 'symbol',
|
||||
title: 'add',
|
||||
tooltip: 'Add ' + self.options.item,
|
||||
type: 'image'
|
||||
}).bindEvent({
|
||||
click: function(data) {
|
||||
that.triggerEvent('add', {value: ''});
|
||||
}
|
||||
})
|
||||
] : [],
|
||||
size: 16,
|
||||
title: self.options.title
|
||||
})
|
||||
.addClass('OxAnnotationPanel')
|
||||
.bindEvent({
|
||||
toggle: togglePanel
|
||||
})
|
||||
);
|
||||
that.$content = that.$element.$content;
|
||||
|
||||
if (self.options.type == 'event') {
|
||||
self.$annotations = Ox.Element();
|
||||
} else if (self.options.type == 'place') {
|
||||
self.$annotations = Ox.Element();
|
||||
} else if (['string', 'text'].indexOf(self.options.type) > -1) {
|
||||
self.$annotations = Ox.ArrayEditable({
|
||||
editable: self.options.editable,
|
||||
items: getAnnotations(),
|
||||
selected: self.options.selected,
|
||||
sort: self.sort,
|
||||
submitOnBlur: false,
|
||||
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
|
||||
type: self.options.type == 'text' ? 'textarea' : 'input'
|
||||
if (self.options.showUsers) {
|
||||
self.users = Ox.sort(Ox.unique(Ox.flatten(
|
||||
self.options.layers.map(function(layer) {
|
||||
return layer.items.map(function(item) {
|
||||
return item.user;
|
||||
});
|
||||
})
|
||||
)));
|
||||
self.enabledUsers = 'all';
|
||||
}
|
||||
|
||||
self.$menubar = Ox.Bar({
|
||||
size: 16
|
||||
})
|
||||
.addClass('OxVideoPlayer');
|
||||
|
||||
self.$optionsMenuButton = Ox.MenuButton({
|
||||
items: Ox.merge(
|
||||
[
|
||||
{id: 'showannotations', title: 'Show Annotations', disabled: true},
|
||||
{group: 'range', min: 1, max: 1, items: [
|
||||
{id: 'all', title: 'All', checked: self.options.range == 'all'},
|
||||
{id: 'selection', title: 'In Current Selection', checked: self.options.range == 'selection'},
|
||||
{id: 'position', title: 'At Current Position', checked: self.options.range == 'position'}
|
||||
]},
|
||||
{},
|
||||
{id: 'sortannotations', title: 'Sort Annotations', disabled: true},
|
||||
{group: 'sort', min: 1, max: 1, items: [
|
||||
{id: 'position', title: 'By Position', checked: self.options.sort == 'position'},
|
||||
{id: 'duration', title: 'By Duration', checked: self.options.sort == 'duration'},
|
||||
{id: 'text', title: 'By Text', checked: self.options.sort == 'text'}
|
||||
]}
|
||||
],
|
||||
self.options.showFonts ? [
|
||||
{},
|
||||
{id: 'fontsize', title: 'Font Size', disabled: true},
|
||||
{group: 'font', min: 1, max: 1, items: [
|
||||
{id: 'small', title: 'Small', checked: self.options.font == 'small'},
|
||||
{id: 'medium', title: 'Medium', checked: self.options.font == 'medium'},
|
||||
{id: 'large', title: 'Large', checked: self.options.font == 'large'}
|
||||
]}
|
||||
] : [],
|
||||
self.options.showUsers ? [
|
||||
{},
|
||||
{id: 'users', title: 'Show Users', disabled: true},
|
||||
{group: 'users', min: 1, max: -1, items: self.users.map(function(user) {
|
||||
return {id: user, title: user, checked: true};
|
||||
})}
|
||||
] : []
|
||||
),
|
||||
style: 'square',
|
||||
title: 'set',
|
||||
tooltip: 'Actions and Settings',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'left'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
var set = {};
|
||||
if (data.id == 'users') {
|
||||
self.enabledUsers = data.checked.length == self.users.length
|
||||
? 'all'
|
||||
: data.checked.map(function(checked) {
|
||||
return checked.id;
|
||||
});
|
||||
self.$folder.forEach(function($folder) {
|
||||
$folder.options({users: self.enabledUsers});
|
||||
});
|
||||
} else {
|
||||
set[data.id] = data.checked[0].id;
|
||||
self.$folder.forEach(function($folder) {
|
||||
$folder.options(set);
|
||||
});
|
||||
that.triggerEvent('annotations' + data.id, set);
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(self.$menubar);
|
||||
|
||||
if (self.options.editable) {
|
||||
self.$editMenuButton = Ox.MenuButton({
|
||||
items: [
|
||||
{id: 'edit', title: 'Edit Annotation', disabled: !self.options.selected, keyboard: 'return'},
|
||||
{id: 'delete', title: 'Delete Annotation', disabled: !self.options.selected, keyboard: 'delete'},
|
||||
{id: 'deselect', title: 'Deselect Annotation', disabled: !self.options.selected, keyboard: 'escape'},
|
||||
{},
|
||||
{id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'},
|
||||
{id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'}
|
||||
],
|
||||
style: 'square',
|
||||
title: 'edit',
|
||||
tooltip: 'Editing Options',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.id == 'delete') {
|
||||
|
||||
} else if (data.id == 'deselect') {
|
||||
|
||||
} else if (data.id == 'edit') {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(self.$menubar);
|
||||
}
|
||||
|
||||
self.$folders = Ox.Element().css({overflowY: 'auto'});
|
||||
self.$folder = [];
|
||||
|
||||
self.options.layers.forEach(function(layer, i) {
|
||||
var item = Ox.getObjectById(layer.items, self.options.selected),
|
||||
selected = item ? item.id : '';
|
||||
self.$folder[i] = Ox.AnnotationFolder(
|
||||
Ox.extend({
|
||||
collapsed: !self.options.showLayers[layer.id],
|
||||
editable: self.options.editable,
|
||||
font: self.options.font,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
range: self.options.range,
|
||||
selected: selected,
|
||||
sort: self.options.sort,
|
||||
width: self.options.width - Ox.UI.SCROLLBAR_SIZE
|
||||
}, layer)
|
||||
)
|
||||
.bindEvent({
|
||||
add: function(data) {
|
||||
that.triggerEvent('add', {value: data.value || ''});
|
||||
that.triggerEvent('add', Ox.extend({layer: layer.id}, data));
|
||||
},
|
||||
blur: function() {
|
||||
that.triggerEvent('blur');
|
||||
},
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.id});
|
||||
},
|
||||
edit: function() {
|
||||
self.editing = true;
|
||||
that.triggerEvent('edit');
|
||||
that.triggerEvent('edit')
|
||||
},
|
||||
select: selectAnnotation,
|
||||
submit: submitAnnotation,
|
||||
key_space: function() {
|
||||
that.triggerEvent('paused');
|
||||
paused: function() {
|
||||
that.triggerEvent('paused')
|
||||
},
|
||||
'remove': function(data) {
|
||||
that.triggerEvent('remove', Ox.extend({layer: layer.id}, data));
|
||||
},
|
||||
select: function(data) {
|
||||
selectAnnotation(data, i);
|
||||
},
|
||||
submit: function(data) {
|
||||
that.triggerEvent('submit', data);
|
||||
},
|
||||
toggle: function(data) {
|
||||
that.triggerEvent('toggle', Ox.extend({layer: layer.id}, data));
|
||||
}
|
||||
})
|
||||
.appendTo(self.$folders);
|
||||
});
|
||||
|
||||
that.setElement(
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$menubar,
|
||||
size: 16
|
||||
},
|
||||
{
|
||||
element: self.$folders
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: resizeAnnotations,
|
||||
resizeend: resizeendAnnotations,
|
||||
toggle: toggleAnnotations
|
||||
})
|
||||
);
|
||||
|
||||
function getFolder(annotationId) {
|
||||
var found = false, folder;
|
||||
Ox.forEach(self.options.layers, function(layer, i) {
|
||||
Ox.forEach(layer.items, function(item) {
|
||||
if (item.id == annotationId) {
|
||||
folder = self.$folder[i];
|
||||
found = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
self.$annotations.appendTo(that.$content);
|
||||
|
||||
self.options.selected && setTimeout(function() {
|
||||
selectAnnotation({id: self.options.selected});
|
||||
}, 0);
|
||||
|
||||
function getAnnotations() {
|
||||
return self.options.items.filter(function(item) {
|
||||
return self.options.range == 'all' || (
|
||||
self.options.range == 'selection'
|
||||
&& item['in'] < self.options.out
|
||||
&& item.out > self.options['in']
|
||||
) || (
|
||||
self.options.range == 'position'
|
||||
&& item['in'] <= self.options.position
|
||||
&& item.out >= self.options.position
|
||||
) || self.editing && item.id == self.options.selected
|
||||
return !found;
|
||||
});
|
||||
return folder;
|
||||
}
|
||||
|
||||
function getSort() {
|
||||
return ({
|
||||
duration: ['-duration', '+in', '+value'],
|
||||
position: ['+in', '-duration', '+value'],
|
||||
text: ['+value', '+in', '-duration']
|
||||
})[self.options.sort];
|
||||
function selectAnnotation(data, index) {
|
||||
var height, scrollTop;
|
||||
if (data.id) {
|
||||
self.$folder.forEach(function($folder, i) {
|
||||
i != index && $folder.options({selected: ''});
|
||||
});
|
||||
}
|
||||
if (data.top) {
|
||||
height = self.$folders.height();
|
||||
scrollTop = self.$folders.scrollTop();
|
||||
data.top -= 60; // 20 + 24 + 16
|
||||
Ox.print('HEIGHT', height, 'SCROLLTOP', scrollTop, 'TOP', data.top);
|
||||
if (data.top < 0 || data.top > height - 16) {
|
||||
if (data.top < 0) {
|
||||
scrollTop += data.top - 3;
|
||||
} else if (data.top > height - 16) {
|
||||
scrollTop += data.top - height + 14;
|
||||
}
|
||||
self.$folders.animate({
|
||||
scrollTop: scrollTop + 'px'
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
that.triggerEvent('select', data);
|
||||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
self.options.selected = item ? data.id : '';
|
||||
that.triggerEvent('select', Ox.extend(data, item ? {
|
||||
'in': item['in'],
|
||||
out: item.out,
|
||||
layer: self.options.id
|
||||
} : {}));
|
||||
function resizeAnnotations() {
|
||||
|
||||
}
|
||||
|
||||
function submitAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
item.value = data.value;
|
||||
self.editing = false;
|
||||
self.$annotations.options({items: self.options.items});
|
||||
that.triggerEvent('submit', item);
|
||||
function resizeendAnnotations() {
|
||||
|
||||
}
|
||||
|
||||
function togglePanel() {
|
||||
self.options.collapsed = !self.options.collapsed;
|
||||
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
|
||||
function toggleAnnotations() {
|
||||
|
||||
}
|
||||
|
||||
function updateEditMenu() {
|
||||
var action = self.options.selected ? 'enableItem' : 'disableItem';
|
||||
self.$editMenuButton[action]('edit');
|
||||
self.$editMenuButton[action]('delete');
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
|
||||
var index = Ox.getIndexById(self.options.items, self.options.selected);
|
||||
self.options.items[index][key] = value;
|
||||
self.options.items[index].duration = self.options.out - self.options['in'];
|
||||
}
|
||||
if (key == 'in') {
|
||||
//fixme: array editable should support item updates while editing
|
||||
self.editing || self.options.range == 'selection' && self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
});
|
||||
} else if (key == 'out') {
|
||||
self.editing || self.options.range == 'selection' && self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
});
|
||||
} else if (key == 'position') {
|
||||
self.editing || self.options.range == 'position' && self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
});
|
||||
} else if (key == 'range') {
|
||||
self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
if (['in', 'out', 'position'].indexOf(key) > -1) {
|
||||
self.$folder.forEach(function($folder) {
|
||||
$folder.options(key, value);
|
||||
});
|
||||
} else if (key == 'selected') {
|
||||
self.$annotations.options({selected: value});
|
||||
} else if (key == 'sort') {
|
||||
self.sort = getSort();
|
||||
self.$annotations.options({sort: self.sort});
|
||||
self.options.editable && updateEditMenu();
|
||||
if (value) {
|
||||
getFolder(value).options({selected: value});
|
||||
} else {
|
||||
self.$folder.forEach(function($folder) {
|
||||
$folder.options({selected: ''});
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*@
|
||||
addItem <f> addItem
|
||||
@*/
|
||||
that.addItem = function(item) {
|
||||
var pos = 0;
|
||||
self.options.items.splice(pos, 0, item);
|
||||
self.$annotations.addItem(pos, item);
|
||||
self.$annotations.editItem(item.id);
|
||||
that.addItem = function(layer, item) {
|
||||
var i = Ox.getIndexById(self.options.layers, layer);
|
||||
self.$folder[i].addItem(item);
|
||||
};
|
||||
|
||||
that.blurItem = function() {
|
||||
self.$annotations.blurItem();
|
||||
getFolder(self.options.selected).blurItem();
|
||||
};
|
||||
|
||||
that.editItem = function(id) {
|
||||
self.$annotations.editItem(id);
|
||||
};
|
||||
|
||||
/*@
|
||||
removeItems <f> removeItems
|
||||
@*/
|
||||
that.removeItem = function(id) {
|
||||
var pos = Ox.getIndexById(self.options.items, id);
|
||||
self.options.items.splice(pos, 1);
|
||||
self.$annotations.removeItems && self.$annotations.removeItems([id]);
|
||||
that.editItem = function() {
|
||||
getFolder(self.options.selected).editItem();
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue