sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

update video editor

Browse source
This commit is contained in:
rlx 2012-01-12 16:09:05 +05:30
commit b2e8b2ac82
9 changed files with 623 additions and 485 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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