update video editor

This commit is contained in:
rlx 2012-01-12 16:09:05 +05:30
parent e98696b93d
commit b2e8b2ac82
9 changed files with 623 additions and 485 deletions

View file

@ -806,10 +806,10 @@ OxEditable
} }
.OxEditableElement div.OxInput { .OxEditableElement div.OxInput {
padding: 0 1px 0 0; padding: 0 1px 0 0;
//margin-bottom: -3px;
} }
.OxEditableElement input.OxInput { .OxEditableElement input.OxInput {
padding: 0 1px 0 0; padding: 0 1px 0 0;
//padding: 0;
border: 0; border: 0;
} }
.OxEditableElement textarea.OxInput { .OxEditableElement textarea.OxInput {

View file

@ -28,7 +28,9 @@ Ox.ArrayEditable = function(options, self) {
anyclick: anyclick, anyclick: anyclick,
doubleclick: doubleclick, doubleclick: doubleclick,
key_delete: deleteItem, key_delete: deleteItem,
key_enter: editItem, key_enter: function() {
that.editItem();
},
key_escape: selectNone, key_escape: selectNone,
key_down: self.options.type == 'input' ? selectLast : selectNext, key_down: self.options.type == 'input' ? selectLast : selectNext,
key_left: self.options.type == 'input' ? selectPrevious : selectFirst, key_left: self.options.type == 'input' ? selectPrevious : selectFirst,
@ -81,23 +83,12 @@ Ox.ArrayEditable = function(options, self) {
var $target = $(e.target), var $target = $(e.target),
$parent = $target.parent(); $parent = $target.parent();
if ($parent.is('.OxEditableElement')) { if ($parent.is('.OxEditableElement')) {
that.editItem(self.options.selected); that.editItem();
} else if(!$target.is('.OxInput')) { } else if(!$target.is('.OxInput')) {
that.triggerEvent('add'); that.triggerEvent('add');
} }
} }
function editItem() {
if (self.selected > -1) {
Ox.forEach(self.$items, function($item) {
if ($item.data('position') == self.selected) {
$item.triggerEvent('doubleclick');
return false;
}
});
}
}
function getSelectedId() { function getSelectedId() {
return self.selected > -1 ? self.options.items[self.selected].id : ''; return self.selected > -1 ? self.options.items[self.selected].id : '';
} }
@ -131,18 +122,21 @@ Ox.ArrayEditable = function(options, self) {
.data({position: i}) .data({position: i})
.bindEvent({ .bindEvent({
blur: function(data) { blur: function(data) {
that.gainFocus();
that.triggerEvent('blur', data); that.triggerEvent('blur', data);
}, },
cancel: function(data) { cancel: function(data) {
that.gainFocus();
Ox.print("GAINING FOCUS!")
that.triggerEvent('blur', data);
}, },
edit: function(data) { edit: function(data) {
self.editing = true; self.editing = true;
that.triggerEvent('edit', data); that.triggerEvent('edit', data);
}, },
submit: function(data) { submit: function(data) {
Ox.Log("AE", "SUBMIT", data); that.gainFocus();
submit(i, data.value); submitItem(i, data.value);
} }
}) })
.appendTo(that); .appendTo(that);
@ -161,6 +155,7 @@ Ox.ArrayEditable = function(options, self) {
self.selected = idOrPosition; self.selected = idOrPosition;
self.options.selected = getSelectedId(); self.options.selected = getSelectedId();
} }
Ox.print('SELECT ITEM', self.options.selected, self.selected);
that.find('.OxSelected').removeClass('OxSelected'); that.find('.OxSelected').removeClass('OxSelected');
self.selected > -1 && self.$items[self.selected].addClass('OxSelected'); self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
triggerSelectEvent(); triggerSelectEvent();
@ -191,14 +186,13 @@ Ox.ArrayEditable = function(options, self) {
} }
} }
function submit(position, value) { function submitItem(position, value) {
var item = self.options.items[position]; var item = self.options.items[position];
if (value === '') { if (value === '') {
deleteItem(); deleteItem();
} /*else if (item.value === value) { } else if (item.value === value) {
that.triggerEvent('blur'); that.triggerEvent('blur');
} else*/ { } else {
that.triggerEvent('submit', { that.triggerEvent('submit', {
id: item.id, id: item.id,
value: value value: value
@ -246,15 +240,24 @@ Ox.ArrayEditable = function(options, self) {
}; };
that.blurItem = function() { that.blurItem = function() {
Ox.Log('AE', 'bI', self.selected); self.options.selected && self.$items[self.selected].options({
self.selected > -1 && self.$items[self.selected].options({editing: false}); editing: false
});
}; };
that.editItem = function(id) { that.editItem = function() {
Ox.Log('AE', 'editItem', id); if (self.options.selected) {
self.options.selected = id; Ox.forEach(self.$items, function($item) {
self.selected = getSelectedPosition(); if ($item.data('position') == self.selected) {
editItem(); $item.triggerEvent('doubleclick');
return false;
}
});
}
};
that.reloadItems = function() {
renderItems();
}; };
that.removeItem = function(position) { that.removeItem = function(position) {

View file

@ -0,0 +1,229 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
/*@
Ox.AnnotationFolder <f:Ox.Element> AnnotationFolder Object
() -> <f> AnnotationFolder Object
(options) -> <f> AnnotationFolder Object
(options, self) -> <f> AnnotationFolder 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.AnnotationFolder = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
collapsed: false,
editable: false,
id: '',
'in': 0,
item: '',
items: [],
out: 0,
position: 0,
range: 'all',
selected: '',
sort: 'position',
title: '',
type: 'text',
users: 'all',
width: 0
})
.options(options || {});
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('OxAnnotationFolder')
.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'
})
.bindEvent({
add: function(data) {
that.triggerEvent('add', {value: data.value || ''});
},
blur: function() {
that.triggerEvent('blur');
},
'delete': function(data) {
that.triggerEvent('remove', {id: data.id});
},
edit: function() {
self.editing = true;
that.triggerEvent('edit');
},
select: selectAnnotation,
submit: submitAnnotation,
key_space: function() {
that.triggerEvent('paused');
}
});
}
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.editing && item.id == self.options.selected || (
(
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.options.users == 'all'
|| self.options.users.indexOf(item.user) > -1
)
);
});
}
function getSort() {
return ({
duration: ['-duration', '+in', '+value'],
position: ['+in', '-duration', '+value'],
text: ['+value', '+in', '-duration']
})[self.options.sort];
}
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 submitAnnotation(data) {
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);
}
function togglePanel() {
self.options.collapsed = !self.options.collapsed;
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
}
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()});
} else if (key == 'selected') {
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()});
}
};
/*@
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.blurItem = function() {
self.$annotations.blurItem();
};
that.editItem = function() {
self.$annotations.editItem();
};
/*@
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]);
};
*/
return that;
};

View file

@ -1,20 +1,7 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict'; 'use strict';
/*@ /*@
Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object Ox.AnnotationPanel <f> Video Annotation Panel
() -> <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 = function(options, self) { Ox.AnnotationPanel = function(options, self) {
@ -22,195 +9,287 @@ Ox.AnnotationPanel = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
collapsed: false,
editable: false, editable: false,
id: '', font: 'small',
'in': 0, layers: [],
item: '',
items: [],
out: 0,
position: 0,
range: 'all', range: 'all',
selected: '', selected: '',
showFonts: false,
showLayers: {},
showUsers: false,
sort: 'position', sort: 'position',
title: '', width: 256
type: 'text',
width: 0
}) })
.options(options || {}); .options(options || {})
.addClass('OxAnnotationPanel');
self.sort = getSort(); if (self.options.showUsers) {
self.users = Ox.sort(Ox.unique(Ox.flatten(
that.setElement( self.options.layers.map(function(layer) {
Ox.CollapsePanel({ return layer.items.map(function(item) {
collapsed: self.options.collapsed, return item.user;
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'
}) })
)));
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({ .bindEvent({
add: function(data) { add: function(data) {
that.triggerEvent('add', {value: data.value || ''}); that.triggerEvent('add', Ox.extend({layer: layer.id}, data));
}, },
blur: function() { blur: function() {
that.triggerEvent('blur'); that.triggerEvent('blur');
}, },
'delete': function(data) {
that.triggerEvent('remove', {id: data.id});
},
edit: function() { edit: function() {
self.editing = true; that.triggerEvent('edit')
that.triggerEvent('edit');
}, },
select: selectAnnotation, paused: function() {
submit: submitAnnotation, that.triggerEvent('paused')
key_space: 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;
} }
}); });
} return !found;
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 folder;
} }
function getSort() { function selectAnnotation(data, index) {
return ({ var height, scrollTop;
duration: ['-duration', '+in', '+value'], if (data.id) {
position: ['+in', '-duration', '+value'], self.$folder.forEach(function($folder, i) {
text: ['+value', '+in', '-duration'] i != index && $folder.options({selected: ''});
})[self.options.sort]; });
}
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) { function resizeAnnotations() {
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 submitAnnotation(data) { function resizeendAnnotations() {
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 togglePanel() { function toggleAnnotations() {
self.options.collapsed = !self.options.collapsed;
that.triggerEvent('toggle', {collapsed: self.options.collapsed}); }
function updateEditMenu() {
var action = self.options.selected ? 'enableItem' : 'disableItem';
self.$editMenuButton[action]('edit');
self.$editMenuButton[action]('delete');
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (['in', 'out'].indexOf(key) > -1 && self.editing) { if (['in', 'out', 'position'].indexOf(key) > -1) {
var index = Ox.getIndexById(self.options.items, self.options.selected); self.$folder.forEach(function($folder) {
self.options.items[index][key] = value; $folder.options(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()
}); });
} else if (key == 'selected') { } else if (key == 'selected') {
self.$annotations.options({selected: value}); self.options.editable && updateEditMenu();
} else if (key == 'sort') { if (value) {
self.sort = getSort(); getFolder(value).options({selected: value});
self.$annotations.options({sort: self.sort}); } else {
self.$folder.forEach(function($folder) {
$folder.options({selected: ''});
})
}
} }
}; };
/*@ that.addItem = function(layer, item) {
addItem <f> addItem var i = Ox.getIndexById(self.options.layers, layer);
@*/ self.$folder[i].addItem(item);
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.blurItem = function() { that.blurItem = function() {
self.$annotations.blurItem(); getFolder(self.options.selected).blurItem();
}; };
that.editItem = function(id) { that.editItem = function() {
self.$annotations.editItem(id); getFolder(self.options.selected).editItem();
};
/*@
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]);
}; };
return that; return that;
}; };

View file

@ -20,7 +20,7 @@ Ox.VideoEditor = function(options, self) {
.defaults({ .defaults({
annotationsFont: 'small', annotationsFont: 'small',
annotationsRange: 'all', annotationsRange: 'all',
annotationsSize: 0, annotationsSize: 256,
annotationsSort: 'position', annotationsSort: 'position',
censored: [], censored: [],
cuts: [], cuts: [],
@ -44,6 +44,7 @@ Ox.VideoEditor = function(options, self) {
showAnnotations: false, showAnnotations: false,
showLargeTimeline: true, showLargeTimeline: true,
showLayers: {}, showLayers: {},
showUsers: false,
subtitles: [], subtitles: [],
tooltips: false, tooltips: false,
videoRatio: 16/9, videoRatio: 16/9,
@ -98,7 +99,7 @@ Ox.VideoEditor = function(options, self) {
if (self.editing) { if (self.editing) {
blurAnnotation(); blurAnnotation();
} else if (self.options.selected) { } else if (self.options.selected) {
deselectAnnotation(); selectAnnotation({id: ''});
} }
}, },
key_f: function() { key_f: function() {
@ -343,87 +344,19 @@ Ox.VideoEditor = function(options, self) {
}) })
.appendTo(self.$editor); .appendTo(self.$editor);
self.$annotations = Ox.Element() self.$menubar = Ox.Bar({
.css({ size: 16
overflowY: 'auto' })
}); .addClass('OxVideoPlayer');
self.$annotationPanel = [];
self.options.layers.forEach(function(layer, i) {
var item = Ox.getObjectById(layer.items, self.options.selected),
selected = item ? item.id : '';
self.$annotationPanel[i] = Ox.AnnotationPanel(
Ox.extend({
collapsed: !self.options.showLayers[layer.id],
font: self.options.annotationsFont,
'in': self.options['in'],
out: self.options.out,
position: self.options.position,
range: self.options.annotationsRange,
selected: selected,
sort: self.options.annotationsSort,
width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
}, layer)
)
.bindEvent({
add: function(data) {
addAnnotation(layer.id);
},
blur: function() {
//Ox.print('VIDEO EDITOR BLUR FOCUSED?', self.focused)
if (self.focused) {
// ...
} else {
self.editing = false;
setTimelineState();
this.blurItem();
}
},
edit: function() {
self.editing = true;
setTimelineState();
},
paused: togglePaused,
remove: function(data) {
that.triggerEvent('removeannotation', {
id: data.id,
layer: layer.id
});
},
select: function(data) {
if (data.id) {
self.options.layers.forEach(function(layer_, i_) {
if (i_ != i) {
self.$annotationPanel[i_].options({selected: ''});
}
});
} else {
that.gainFocus();
}
selectAnnotation(data);
},
submit: submitAnnotation,
toggle: function(data) {
that.triggerEvent('togglelayer', {
collapsed: data.collapsed,
layer: layer.id
});
}
})
.appendTo(self.$annotations);
});
self.$videobar = Ox.Bar({
size: 16
}).addClass('OxVideoPlayer');
self.resolutions = []; self.resolutions = [];
Ox.forEach(self.options.video, function(url, resolution) { Ox.forEach(self.options.video, function(url, resolution) {
Ox.Log('Video', url, resolution); Ox.Log('Video', url, resolution);
self.resolutions.push( self.resolutions.push({
{id: resolution + '', title: resolution + 'p', id: resolution + '',
checked: self.options.resolution == resolution} title: resolution + 'p',
); checked: self.options.resolution == resolution
});
}); });
self.$keyboardShortcuts = $('<div>').css({margin: '16px'}); self.$keyboardShortcuts = $('<div>').css({margin: '16px'});
@ -526,32 +459,7 @@ Ox.VideoEditor = function(options, self) {
} }
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$menubar);
self.$selectButton = Ox.Button({
style: 'symbol',
title: 'select',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
self.$menuButton.find('input').trigger('click')
}
});
//.appendTo(self.$videobar);
self.$resolutionSelect = Ox.Select({
items: self.resolutions,
width: 48,
})
.css({float: 'left'})
.bindEvent({
change: function(data) {
}
});
//.appendTo(self.$videobar);
if (self.options.posterFrameControls) { if (self.options.posterFrameControls) {
@ -567,7 +475,7 @@ Ox.VideoEditor = function(options, self) {
setPosition(self.options.posterFrame); setPosition(self.options.posterFrame);
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$menubar);
self.$setPosterButton = Ox.Button({ self.$setPosterButton = Ox.Button({
disabled: true, disabled: true,
@ -584,7 +492,7 @@ Ox.VideoEditor = function(options, self) {
self.$unlockPosterButton.toggle(); self.$unlockPosterButton.toggle();
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$menubar);
self.$unlockPosterButton = Ox.Button({ self.$unlockPosterButton = Ox.Button({
style: 'symbol', style: 'symbol',
@ -601,7 +509,7 @@ Ox.VideoEditor = function(options, self) {
self.$setPosterButton.toggleOption('disabled'); self.$setPosterButton.toggleOption('disabled');
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$menubar);
} }
@ -619,7 +527,7 @@ Ox.VideoEditor = function(options, self) {
submitFindInput(''); submitFindInput('');
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$menubar);
self.$findInput = Ox.Input({ self.$findInput = Ox.Input({
autocomplete: self.words, autocomplete: self.words,
@ -642,22 +550,7 @@ Ox.VideoEditor = function(options, self) {
submitFindInput(data.value, true); submitFindInput(data.value, true);
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$menubar);
self.$findButton = Ox.Button({
//disabled: true,
style: 'symbol',
title: 'find',
tooltip: 'Find',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
}
});
//.appendTo(self.$videobar);
self.$nextButton = Ox.Button({ self.$nextButton = Ox.Button({
disabled: true, disabled: true,
@ -672,7 +565,7 @@ Ox.VideoEditor = function(options, self) {
setPosition(getNextPosition('result', 1)); setPosition(getNextPosition('result', 1));
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$menubar);
self.$previousButton = Ox.Button({ self.$previousButton = Ox.Button({
disabled: true, disabled: true,
@ -687,83 +580,68 @@ Ox.VideoEditor = function(options, self) {
setPosition(getNextPosition('result', -1)); setPosition(getNextPosition('result', -1));
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$menubar);
self.$results = $('<div>') self.$results = $('<div>')
.css({float: 'right', width: '36px', padding: '2px 4px 0 0', fontSize: '9px', textAlign: 'right', cursor: 'default', opacity: 0.25}) .css({float: 'right', width: '36px', padding: '2px 4px 0 0', fontSize: '9px', textAlign: 'right', cursor: 'default', opacity: 0.25})
.html('0') .html('0')
.appendTo(self.$videobar.$element); .appendTo(self.$menubar.$element);
self.$annotationsbar = Ox.Bar({ self.$annotationPanel = Ox.AnnotationPanel({
size: 16 editable: true,
}).addClass('OxVideoPlayer'); font: self.options.annotationsFont,
'in': self.options['in'],
self.$annotationsMenuButton = Ox.MenuButton({ layers: self.options.layers,
items: [ out: self.options.out,
{id: 'showannotations', title: 'Show Annotations', disabled: true}, position: self.options.position,
{group: 'range', min: 1, max: 1, items: [ range: self.options.annotationsRange,
{id: 'position', title: 'At Current Position', checked: self.options.annotationsRange == 'position'}, selected: self.options.selected,
{id: 'selection', title: 'In Current Selection', checked: self.options.annotationsRange == 'selection'}, sort: self.options.annotationsSort,
{id: 'all', title: 'All', checked: self.options.annotationsRange == 'all'} showLayers: self.options.showLayers,
]}, showUsers: self.options.showUsers,
{}, width: self.options.annotationsSize
{id: 'sortannotations', title: 'Sort Annotations', disabled: true},
{group: 'sort', min: 1, max: 1, items: [
{id: 'position', title: 'By Position', checked: self.options.annotationsSort == 'position'},
{id: 'duration', title: 'By Duration', checked: self.options.annotationsSort == 'duration'},
{id: 'text', title: 'By Text', checked: self.options.annotationsSort == 'text'}
]},
{},
{id: 'fontsize', title: 'Font Size', disabled: true},
{group: 'font', min: 1, max: 1, items: [
{id: 'small', title: 'Small', checked: self.options.annotationsFont == 'small'},
{id: 'medium', title: 'Medium', checked: self.options.annotationsFont == 'medium'},
{id: 'large', title: 'Large', checked: self.options.annotationsFont == 'large'}
]}
],
style: 'square',
title: 'set',
tooltip: 'Actions and Settings',
type: 'image'
}) })
.css({float: 'left'})
.bindEvent({ .bindEvent({
change: function(data) { add: function(data) {
var set = {}; addAnnotation(data.layer);
set[data.id] = data.checked[0].id; },
self.$annotationPanel.forEach(function($panel) { annotationsfont: function(data) {
$panel.options(set); that.triggerEvent('annotationsfont', data);
},
annotationsrange: function(data) {
that.triggerEvent('annotationsrange', data);
},
annotationssort: function(data) {
that.triggerEvent('annotationssort', data);
},
blur: function() {
Ox.print('VE-BLUR')
self.editing = false;
setTimelineState();
},
edit: function() {
self.editing = true;
setTimelineState();
},
paused: togglePaused,
remove: function(data) {
that.triggerEvent('removeannotation', {
id: data.id,
layer: data.layer
});
},
select: function(data) {
!data.id && that.gainFocus();
selectAnnotation(data);
},
submit: submitAnnotation,
toggle: function(data) {
that.triggerEvent('togglelayer', {
collapsed: data.collapsed,
layer: data.layer
}); });
that.triggerEvent('annotations' + Ox.toTitleCase(data.id), set);
} }
}) });
.appendTo(self.$annotationsbar);
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 == 'edit') {
editAnnotation();
}
}
})
.appendTo(self.$annotationsbar);
that.setElement( that.setElement(
Ox.SplitPanel({ Ox.SplitPanel({
@ -772,7 +650,7 @@ Ox.VideoEditor = function(options, self) {
element: Ox.SplitPanel({ element: Ox.SplitPanel({
elements: [ elements: [
{ {
element: self.$videobar, element: self.$menubar,
size: 16 size: 16
}, },
{ {
@ -785,23 +663,7 @@ Ox.VideoEditor = function(options, self) {
{ {
collapsed: !self.options.showAnnotations, collapsed: !self.options.showAnnotations,
collapsible: true, collapsible: true,
element: Ox.SplitPanel({ element: self.$annotationPanel,
elements: [
{
element: self.$annotationsbar,
size: 16
},
{
element: self.$annotations,
}
],
orientation: 'vertical'
})
.bindEvent({
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
toggle: toggleAnnotations
}),
resizable: true, resizable: true,
resize: [192, 256, 320, 384], resize: [192, 256, 320, 384],
size: self.options.annotationsSize, size: self.options.annotationsSize,
@ -830,19 +692,13 @@ Ox.VideoEditor = function(options, self) {
function blurAnnotation() { function blurAnnotation() {
self.editing = false; self.editing = false;
setTimelineState(); setTimelineState();
getPanel(self.options.selected).blurItem(self.options.selected); self.$annotationPanel.blurItem();
}
function deselectAnnotation() {
// FIXME: there is selectAnnotation({id: ''})
self.options.selected = '';
setTimelineState();
} }
function editAnnotation() { function editAnnotation() {
self.editing = true; self.editing = true;
setTimelineState(); setTimelineState();
getPanel(self.options.selected).editItem(self.options.selected); self.$annotationPanel.editItem();
} }
function find(query) { function find(query) {
@ -929,21 +785,6 @@ Ox.VideoEditor = function(options, self) {
return position; 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) { function getPoints(type) {
var found = false, var found = false,
@ -1092,36 +933,21 @@ Ox.VideoEditor = function(options, self) {
function selectAnnotation(data) { function selectAnnotation(data) {
//Ox.print('VE.sA') //Ox.print('VE.sA')
if (Ox.isUndefined(data)) { if (Ox.isUndefined(data)) {
// doubleclick on small timeline
data = getAnnotation(); data = getAnnotation();
} }
self.editing = false; self.editing = false;
self.options.selected = data.id; self.options.selected = data.id;
// fixme: what is the following supposed to do?
if (self.options.selected && self.options.annotationsRange != 'position') { if (self.options.selected && self.options.annotationsRange != 'position') {
setPosition(data['in']); setPosition(data['in']);
} }
if (self.options.selected) { if (self.options.selected) {
setPoint('in', data['in']); setPoint('in', data['in']);
setPoint('out', data.out); setPoint('out', data.out);
getPanel(self.options.selected).options({selected: self.options.selected});
} }
self.$annotationPanel.options({selected: self.options.selected});
setTimelineState(); setTimelineState();
updateEditMenu();
if (data.top) {
var height = self.$annotations.height(),
scrollTop = self.$annotations.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.$annotations.animate({
scrollTop: scrollTop + 'px'
}, 0);
}
}
that.triggerEvent('select', { that.triggerEvent('select', {
id: self.options.selected id: self.options.selected
}); });
@ -1169,11 +995,9 @@ Ox.VideoEditor = function(options, self) {
if (self.options['in'] > self.options.out) { if (self.options['in'] > self.options.out) {
setPoint(point == 'in' ? 'out' : 'in', position); setPoint(point == 'in' ? 'out' : 'in', position);
} }
self.$annotationPanel.forEach(function($panel) { self.$annotationPanel.options({
$panel.options({ 'in': self.options['in'],
'in': self.options['in'], out: self.options.out
out: self.options.out
});
}); });
that.triggerEvent('points', { that.triggerEvent('points', {
'in': self.options['in'], 'in': self.options['in'],
@ -1198,10 +1022,8 @@ Ox.VideoEditor = function(options, self) {
position: self.options.position position: self.options.position
}); });
}); });
self.$annotationPanel.forEach(function($panel) { self.$annotationPanel.options({
$panel.options({ position: self.options.position
position: self.options.position
});
}); });
!playing && that.triggerEvent('position', { !playing && that.triggerEvent('position', {
position: self.options.position position: self.options.position
@ -1307,15 +1129,8 @@ Ox.VideoEditor = function(options, self) {
}); });
} }
function updateEditMenu() {
var action = self.options.selected ? 'enableItem' : 'disableItem';
self.$editMenuButton[action]('edit');
self.$editMenuButton[action]('delete');
}
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'width' || key == 'height') { if (key == 'width' || key == 'height') {
Ox.Log('Video', 'XXXX setSizes', key, value, self.options.width, self.options.height)
setSizes(); setSizes();
} else if (key == 'position') { } else if (key == 'position') {
setPosition(value); setPosition(value);
@ -1328,11 +1143,10 @@ Ox.VideoEditor = function(options, self) {
addAnnotation <f> add annotation addAnnotation <f> add annotation
(layer, item) -> <o> add annotation to layer (layer, item) -> <o> add annotation to layer
layer <s> layer id layer <s> layer id
item <o> annotation to add annotation <o> annotation to add
@*/ @*/
that.addAnnotation = function(layer, item) { that.addAnnotation = function(layer, annotation) {
var i = Ox.getIndexById(self.options.layers, layer); self.$annotationPanel.addItem(layer, annotation);
self.$annotationPanel[i].addItem(item);
}; };
/*@ /*@
@ -1341,10 +1155,12 @@ Ox.VideoEditor = function(options, self) {
layer <s> layer id layer <s> layer id
ids <a> array of item ids to remove ids <a> array of item ids to remove
@*/ @*/
/*
that.removeAnnotation = function(layer, id) { that.removeAnnotation = function(layer, id) {
var i = Ox.getIndexById(self.options.layers, layer); var i = Ox.getIndexById(self.options.layers, layer);
self.$annotationPanel[i].removeItem(id); self.$annotationPanel[i].removeItem(id);
}; };
*/
return that; return that;

View file

@ -11,20 +11,25 @@ Ox.VideoPanelPlayer <f:Ox.Element> VideoPanelPlayer Object
self <o> shared private variable self <o> shared private variable
@*/ @*/
Ox.VideoPanelPlayer = function(options, self) { Ox.VideoPanel = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
annotationsFont: 'small',
annotationsRange: 'all',
annotationsSize: 256, annotationsSize: 256,
annotationsSort: 'position',
censored: [], censored: [],
cuts: [],
duration: 0, duration: 0,
enableSubtitles: false, enableSubtitles: false,
find: '', find: '',
fullscreen: false, fullscreen: false,
height: 0, height: 0,
'in': 0, 'in': 0,
loop: false, layers: [],
loop: false, // fixme: used?
muted: false, muted: false,
out: 0, out: 0,
paused: false, paused: false,
@ -33,7 +38,7 @@ Ox.VideoPanelPlayer = function(options, self) {
poster: '', poster: '',
resolution: 0, resolution: 0,
scaleToFill: false, scaleToFill: false,
showAnnotations: true, showAnnotations: false,
showTimeline: true, showTimeline: true,
subtitles: [], subtitles: [],
tooltips: false, tooltips: false,
@ -54,7 +59,6 @@ Ox.VideoPanelPlayer = function(options, self) {
}); });
self.fullscreen = false; self.fullscreen = false;
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
self.$player = Ox.Element() self.$player = Ox.Element()
.css({ .css({
@ -142,7 +146,7 @@ Ox.VideoPanelPlayer = function(options, self) {
}) })
.appendTo(self.$controls); .appendTo(self.$controls);
self.$panel = Ox.SplitPanel({ self.$videoPanel = Ox.SplitPanel({
elements: [ elements: [
{ {
element: self.$player element: self.$player
@ -161,7 +165,14 @@ Ox.VideoPanelPlayer = function(options, self) {
resize: resizePanel resize: resizePanel
}); });
self.$annotations = Ox.Element() self.$annotationPanel = Ox.AnnotationPanel({
font: self.options.annotationsFont,
layers: self.options.layers,
range: self.options.annotationsRange,
showFonts: true,
showLayers: self.options.showLayers,
sort: self.options.annotationsSort
})
.bindEvent({ .bindEvent({
resize: resizeAnnotations, resize: resizeAnnotations,
resizeend: resizeendAnnotations, resizeend: resizeendAnnotations,
@ -171,12 +182,12 @@ Ox.VideoPanelPlayer = function(options, self) {
that.$element = Ox.SplitPanel({ that.$element = Ox.SplitPanel({
elements: [ elements: [
{ {
element: self.$panel element: self.$videoPanel
}, },
{ {
collapsed: !self.options.showAnnotations, collapsed: !self.options.showAnnotations,
collapsible: true, collapsible: true,
element: self.$annotations, element: self.$annotationPanel,
resizable: true, resizable: true,
resize: [192, 256, 320, 384], resize: [192, 256, 320, 384],
size: self.options.annotationsSize, size: self.options.annotationsSize,
@ -292,7 +303,7 @@ Ox.VideoPanelPlayer = function(options, self) {
} else if (key == 'showAnnotations') { } else if (key == 'showAnnotations') {
that.$element.toggle(1); that.$element.toggle(1);
} else if (key == 'showTimeline') { } else if (key == 'showTimeline') {
self.$panel.toggle(1); self.$videoPanel.toggle(1);
} else if (key == 'width') { } else if (key == 'width') {
self.$video.options({ self.$video.options({
width: getPlayerWidth() width: getPlayerWidth()
@ -318,7 +329,7 @@ Ox.VideoPanelPlayer = function(options, self) {
() -> <o> toggle visibility of timeline () -> <o> toggle visibility of timeline
@*/ @*/
that.toggleTimeline = function() { that.toggleTimeline = function() {
self.$panel.toggle(1); self.$videoPanel.toggle(1);
}; };
return that; return that;

View file

@ -739,16 +739,16 @@ Video
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1));
} }
.OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected { .OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxSelected {
background: rgb(192, 192, 255); background: rgb(192, 192, 255);
box-shadow: 0 0 1px rgb(64, 64, 64); box-shadow: 0 0 1px rgb(64, 64, 64);
} }
.OxThemeClassic .OxAnnotationPanel .OxEditableElement input { .OxThemeClassic .OxAnnotationFolder .OxEditableElement input {
background: rgb(160, 224, 160); background: rgb(160, 224, 160);
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
box-shadow: 0 0 1px rgb(64, 64, 64); box-shadow: 0 0 1px rgb(64, 64, 64);
} }
.OxThemeClassic .OxAnnotationPanel .OxEditableElement textarea { .OxThemeClassic .OxAnnotationFolder .OxEditableElement textarea {
background: rgb(160, 224, 160); background: rgb(160, 224, 160);
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
} }

View file

@ -760,16 +760,16 @@ Video
//display: none; //display: none;
} }
.OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected { .OxThemeModern .OxAnnotationFolder .OxEditableElement.OxSelected {
background: rgb(64, 64, 192); background: rgb(64, 64, 192);
box-shadow: 0 0 1px rgb(255, 255, 255); box-shadow: 0 0 1px rgb(255, 255, 255);
} }
.OxThemeModern .OxAnnotationPanel .OxEditableElement input { .OxThemeModern .OxAnnotationFolder .OxEditableElement input {
background: rgb(64, 128, 64); background: rgb(64, 128, 64);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
box-shadow: 0 0 1px rgb(255, 255, 255); box-shadow: 0 0 1px rgb(255, 255, 255);
} }
.OxThemeModern .OxAnnotationPanel .OxEditableElement textarea { .OxThemeModern .OxAnnotationFolder .OxEditableElement textarea {
background: rgb(64, 128, 64); background: rgb(64, 128, 64);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
} }

View file

@ -103,7 +103,7 @@ Ox.range = function() {
? Ox.pad(matches[val], len) ? Ox.pad(matches[val], len)
+ val.toString().substr(matches[val].length) + val.toString().substr(matches[val].length)
: val : val
).toLowerCase(); ).toLowerCase().replace(/^\W+/, '');
}); });
return sort; return sort;
} }
@ -114,8 +114,8 @@ Ox.range = function() {
(arr, fn) -> Sorted array (arr, fn) -> Sorted array
arr <a> Array arr <a> Array
fn <f|u> Optional map function that returns the value for the array element fn <f|u> Optional map function that returns the value for the array element
> Ox.sort(['10', '9', 'B', 'a']) > Ox.sort(['"z"', '10', '9', 'B', 'a'])
['9', '10', 'a', 'B'] ['9', '10', 'a', 'B', '"z"']
> Ox.sort([{id: 0, name: '80 Days'}, {id: 1, name: '8 Women'}], function(v) {return v.name}) > Ox.sort([{id: 0, name: '80 Days'}, {id: 1, name: '8 Women'}], function(v) {return v.name})
[{id: 1, name: '8 Women'}, {id: 0, name: '80 Days'}] [{id: 1, name: '8 Women'}, {id: 0, name: '80 Days'}]
@*/ @*/
@ -153,7 +153,7 @@ Ox.range = function() {
}; };
}); });
by.map(function(v) { by.map(function(v) {
return v.key return v.key;
}).forEach(function(key) { }).forEach(function(key) {
values[key] = getSortValues(arr.map(function(v) { values[key] = getSortValues(arr.map(function(v) {
return v[key]; return v[key];