oxjs/source/Ox.UI/js/Video/Ox.VideoEditor.js

1013 lines
34 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-05-16 08:24:46 +00:00
/*@
Ox.VideoEditor <f:Ox.Element> VideoEditor Object
() -> <f> VideoEditor Object
(options) -> <f> VideoEditor Object
(options, self) -> <f> VideoEditor Object
options <o> Options object
self <o> shared private variable
@*/
2011-04-22 22:03:10 +00:00
Ox.VideoEditor = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
annotationsSize: 0,
cuts: [],
duration: 0,
find: '',
2011-05-18 16:00:29 +00:00
fps: 25,
2011-05-18 18:30:58 +00:00
getFrameURL: null,
2011-05-18 16:00:29 +00:00
getLargeTimelineImageURL: null,
getSmallTimelineImageURL: null,
'in': 0,
2011-04-22 22:03:10 +00:00
height: 0,
layers: [],
2011-05-18 16:00:29 +00:00
out: 0,
2011-04-22 22:03:10 +00:00
position: 0,
posterFrame: 0,
showAnnotations: false,
2011-05-24 19:19:27 +00:00
showLargeTimeline: true,
2011-04-22 22:03:10 +00:00
subtitles: [],
videoHeight: 0,
videoWidth: 0,
videoSize: 'small',
video: '',
2011-04-22 22:03:10 +00:00
width: 0
})
.options(options || {})
.mousedown(function() {
that.gainFocus();
})
.bindEvent({
2011-05-18 16:00:29 +00:00
key_0: toggleMuted,
2011-04-22 22:03:10 +00:00
key_shift_0: function() {
movePositionBy(-self.options.position);
},
key_alt_left: function() {
},
key_alt_right: function() {
},
key_alt_shift_left: function() {
},
key_alt_shift_right: function() {
},
key_backslash: function() {
select('subtitle');
},
key_closebracket: function() {
movePositionTo('subtitle', 1);
},
key_comma: function() {
movePositionTo('cut', -1);
},
key_dot: function() {
movePositionTo('cut', 1);
},
key_down: function() {
movePositionBy(self.sizes.timeline[0].width);
},
key_f: function() {
setTimeout(function() {
self.$findInput.focusInput();
});
},
key_g: function() {
self.results.length && setPosition(getNextPosition('result', 1));
},
2011-04-22 22:03:10 +00:00
key_i: function() {
2011-05-19 10:18:39 +00:00
setPoint('in', self.options.position);
2011-04-22 22:03:10 +00:00
},
key_left: function() {
2011-05-18 18:30:58 +00:00
movePositionBy(-0.04);
2011-04-22 22:03:10 +00:00
},
key_o: function() {
2011-05-19 10:18:39 +00:00
setPoint('out', self.options.position);
2011-04-22 22:03:10 +00:00
},
key_openbracket: function() {
movePositionTo('subtitle', -1);
},
key_p: playInToOut,
key_right: function() {
2011-05-18 18:30:58 +00:00
movePositionBy(0.04);
2011-04-22 22:03:10 +00:00
},
key_s: function() {
// toggleSize
},
key_shift_comma: function() {
movePositionTo('match', -1);
2011-04-22 22:03:10 +00:00
},
key_shift_dot: function() {
movePositionTo('match', 1);
2011-04-22 22:03:10 +00:00
},
key_shift_down: function() {
movePositionBy(self.options.duration);
},
key_shift_g: function() {
self.results.length && setPosition(getNextPosition('result', -1));
},
2011-04-22 22:03:10 +00:00
key_shift_left: function() {
movePositionBy(-1);
2011-04-22 22:03:10 +00:00
},
key_shift_i: function() {
goToPoint('in');
},
key_shift_o: function() {
goToPoint('out');
},
key_shift_p: function() {
// go to poster frame
},
2011-04-22 22:03:10 +00:00
key_shift_right: function() {
2011-05-18 18:30:58 +00:00
movePositionBy(1);
2011-04-22 22:03:10 +00:00
},
key_shift_up: function() {
2011-05-18 18:30:58 +00:00
movePositionBy(-self.options.position);
2011-04-22 22:03:10 +00:00
},
key_slash: function() {
select('cut');
},
2011-05-18 16:00:29 +00:00
key_space: togglePaused,
2011-04-22 22:03:10 +00:00
key_up: function() {
movePositionBy(-self.sizes.timeline[0].width);
}
});
$.extend(self, {
$player: [],
$timeline: [],
controlsHeight: 16,
margin: 8,
videoRatio: self.options.videoWidth / self.options.videoHeight
});
self.words = [];
2011-05-19 19:03:35 +00:00
Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) {
return subtitle.text;
}).join(' '))), function(count, word) {
self.words.push({count: count, word: word});
});
self.words = self.words.sort(function(a, b) {
return b.count - a.count;
}).map(function(obj) {
return obj.word;
});
self.$editor = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxVideoEditor')
.click(function(e) {
var $target = $(e.target);
!$target.is('.OxPosition') && !$target.is('input') && that.gainFocus();
2011-04-22 22:03:10 +00:00
});
self.sizes = getSizes();
['play', 'in', 'out'].forEach(function(type, i) {
self.$player[i] = Ox.VideoPlayer({
2011-05-18 16:00:29 +00:00
controlsBottom: type == 'play' ?
2011-05-20 14:11:42 +00:00
['play', 'playInToOut', 'volume', 'size', 'space', 'position'] :
2011-05-18 16:00:29 +00:00
['goto', 'set', 'space', 'position'],
2011-04-22 22:03:10 +00:00
duration: self.options.duration,
2011-05-18 16:00:29 +00:00
externalControls: true,
2011-04-22 22:03:10 +00:00
find: self.options.find,
height: self.sizes.player[i].height,
id: 'player' + Ox.toTitleCase(type),
2011-05-18 16:00:29 +00:00
'in': self.options['in'],
out: self.options.out,
paused: true,
position: type == 'play' ? self.options.position : self.options[type],
2011-04-22 22:03:10 +00:00
posterFrame: self.options.posterFrame,
2011-05-18 16:00:29 +00:00
showMarkers: true,
showMilliseconds: 3,
2011-04-22 22:03:10 +00:00
subtitles: self.options.subtitles,
type: type,
2011-05-18 18:30:58 +00:00
video: type == 'play' ? self.options.video : self.options.getFrameURL,
2011-04-22 22:03:10 +00:00
width: self.sizes.player[i].width
})
.css({
left: self.sizes.player[i].left + 'px',
top: self.sizes.player[i].top + 'px'
})
.bindEvent(type == 'play' ? {
2011-05-18 16:00:29 +00:00
position: changePlayer,
size: toggleSize
2011-04-22 22:03:10 +00:00
} : {
2011-05-18 16:00:29 +00:00
gotopoint: function() {
2011-04-22 22:03:10 +00:00
goToPoint(type);
},
position: function(data) {
setPoint(type, data.position);
},
2011-05-18 16:00:29 +00:00
setpoint: function() {
2011-05-19 10:18:39 +00:00
setPoint(type, self.options.position);
2011-04-22 22:03:10 +00:00
}
})
.appendTo(self.$editor);
});
self.$timeline[0] = Ox.LargeVideoTimeline({
2011-04-22 22:03:10 +00:00
cuts: self.options.cuts,
duration: self.options.duration,
find: self.options.find,
2011-05-18 16:00:29 +00:00
getImageURL: self.options.getLargeTimelineImageURL,
2011-04-22 22:03:10 +00:00
id: 'timelineLarge',
2011-05-18 16:00:29 +00:00
'in': self.options['in'],
//matches: self.options.matches,
out: self.options.out,
2011-04-22 22:03:10 +00:00
position: self.options.position,
subtitles: self.options.subtitles,
2011-05-18 16:00:29 +00:00
type: 'editor',
2011-04-22 22:03:10 +00:00
width: self.sizes.timeline[0].width
})
.css({
left: self.sizes.timeline[0].left + 'px',
top: self.sizes.timeline[0].top + 'px'
})
2011-05-18 16:00:29 +00:00
.bindEvent('position', changeTimelineLarge)
2011-04-22 22:03:10 +00:00
.appendTo(self.$editor);
self.$timeline[1] = Ox.BlockVideoTimeline({
2011-04-22 22:03:10 +00:00
cuts: self.options.cuts,
duration: self.options.duration,
find: self.options.find,
2011-05-18 16:00:29 +00:00
getImageURL: self.options.getSmallTimelineImageURL,
2011-04-22 22:03:10 +00:00
id: 'timelineSmall',
2011-05-18 16:00:29 +00:00
//matches: self.options.matches,
'in': self.options['in'],
out: self.options.out,
2011-04-22 22:03:10 +00:00
position: self.options.position,
subtitles: self.options.subtitles,
videoId: self.options.videoId,
width: self.sizes.timeline[1].width
})
.css({
left: self.sizes.timeline[1].left + 'px',
2011-05-18 16:00:29 +00:00
top: self.sizes.timeline[1].top + 'px',
2011-04-22 22:03:10 +00:00
})
2011-05-18 16:00:29 +00:00
.bindEvent('position', changeTimelineSmall)
2011-04-22 22:03:10 +00:00
.appendTo(self.$editor);
self.$annotations = Ox.Element()
2011-04-22 22:03:10 +00:00
.css({
overflowY: 'auto'
});
self.$annotationPanel = [];
self.options.layers.forEach(function(layer, i) {
self.$annotationPanel[i] = Ox.AnnotationPanel(
2011-04-22 22:03:10 +00:00
$.extend({
width: self.options.annotationSize
}, layer)
)
.bindEvent({
add: function(event, data) {
data.layer = layer.id;
2011-05-19 10:18:39 +00:00
data['in'] = self.options['in'];
data.out = self.options.out;
2011-04-22 22:03:10 +00:00
that.triggerEvent('addAnnotation', data);
},
2011-06-15 14:36:01 +00:00
remove: function(event, data) {
data = {
ids: [data],
layer: layer.id
};
2011-04-22 22:03:10 +00:00
that.triggerEvent('removeAnnotations', data);
},
select: function(event, data) {
self.options.layers.forEach(function(l, j) { // fixme: l? j?
if(l.id != layer.id) {
self.$annotationPanel[j].deselectItems();
}
});
selectAnnotation(event, data);
},
submit: updateAnnotation
});
self.$annotationPanel[i]
.appendTo(self.$annotations);
});
2011-05-20 14:11:42 +00:00
self.$videobar = Ox.Bar({
size: 16
}).addClass('OxVideoPlayer');
self.resolutions = [];
Ox.forEach(self.options.video, function(url, resolution) {
Ox.print(url, resolution)
self.resolutions.push(
{id: resolution + '', title: resolution + 'p'}
);
});
Ox.print('::::::',self.resolutions)
2011-05-20 14:11:42 +00:00
self.$keyboardShortcuts = $('<div>');
[
{key: Ox.UI.symbols.space, action: 'Play/Pause'},
{key: 'P', action: 'Play In to Out'},
{key: '0', action: 'Mute/Unmute'},
{key: '-', action: 'Turn Volume Down'},
{key: '+', action: 'Turn Volume Up'},
{key: Ox.UI.symbols.arrow_left, action: 'Go One Frame Back'},
{key: Ox.UI.symbols.arrow_right, action: 'Go One Frame Forward'},
{key: Ox.UI.symbols.shift + Ox.UI.symbols.arrow_left, action: 'Go One Second Back'},
{key: Ox.UI.symbols.shift + Ox.UI.symbols.arrow_right, action: 'Go One Second Forward'},
{key: Ox.UI.symbols.arrow_up, action: 'Go One Line Up'},
{key: Ox.UI.symbols.arrow_down, action: 'Go One Line Down'},
{key: Ox.UI.symbols.shift + Ox.UI.symbols.arrow_up, action: 'Go to First Frame'},
{key: Ox.UI.symbols.shift + Ox.UI.symbols.arrow_down, action: 'Go to Last Frame'},
{key: 'I', action: 'Set In Point'},
{key: 'O', action: 'Set Out Point'},
{key: Ox.UI.symbols.shift + 'I', action: 'Go to Out Point'},
{key: Ox.UI.symbols.shift + 'O', action: 'Go to Out Point'},
{key: '[', action: 'Go to Previous Annotation'},
{key: ']', action: 'Go to Next Annotation'},
{key: '\\', action: 'Select Current Annotation'},
{key: '<', action: 'Go to Previous Cut'},
{key: '>', action: 'Go to Next Cut'},
{key: '/', action: 'Select Current Cuts'},
{key: 'F', action: 'Find'},
{key: Ox.UI.symbols.shift + 'G', action: 'Go to Previous Result'},
{key: 'G', action: 'Go to Next Result'},
{key: 'S', action: 'Select Current Annotation'},
{key: 'E', action: 'Edit Selected Annotation'},
2011-05-25 07:29:42 +00:00
{key: Ox.UI.symbols['return'], action: 'Submit'},
2011-05-20 14:11:42 +00:00
{key: Ox.UI.symbols.escape, action: 'Cancel'},
].forEach(function(shortcut) {
self.$keyboardShortcuts.append(
$('<div>').css({display: 'table-row'})
.append(
$('<div>').css({
display: 'table-cell',
height: '16px',
paddingRight: '16px',
//fontWeight: 'bold',
textAlign: 'right'
})
.html(shortcut.key)
)
.append(
$('<div>').css({display: 'table-cell'})
.html(shortcut.action)
)
);
});
2011-05-20 14:11:42 +00:00
self.$videoMenuButton = Ox.Select({
items: Ox.merge([
{id: 'toggleSize', title: 'Large Player', selected: self.options.playerSize == 'large', keyboard: 'shift +'},
{}
], self.resolutions, [
{},
{id: 'largeTimeline', title: 'Hide Large Timeline'},
{id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline'},
{},
{id: 'linkSelection', title: 'Link to Selection...'},
{id: 'embed', title: 'Embed Selection...'},
{id: 'downloadSelection', title: 'Download Selection...'},
{},
{id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
]),
selectable: false,
title: $('<img>').attr({
src: Ox.UI.getImagePath('symbolSet.svg')
}),
tooltip: 'Actions and Settings',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
2011-05-20 14:11:42 +00:00
click: function(data) {
var id = data.id;
if (id == 'toggleSize') {
toggleSize();
} else if (id == 'keyboard') {
var dialog = Ox.Dialog({
buttons: [
Ox.Button({id: 'close', title: 'Close'})
.bindEvent({click: function() { dialog.close(); }})
],
content: self.$keyboardShortcuts,
height: 384,
keys: {enter: 'close', escape: 'close'},
title: 'Keyboard Shortcuts',
width: 256
}).open();
}
}
})
2011-05-20 14:11:42 +00:00
.appendTo(self.$videobar);
self.$videoMenuButton.find('input').attr({
src: Ox.UI.getImagePath('symbolSet.svg')
});
2011-05-20 14:11:42 +00:00
self.$selectButton = Ox.Button({
style: 'symbol',
2011-05-20 14:11:42 +00:00
title: 'select',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
2011-05-20 14:11:42 +00:00
self.$menuButton.find('input').trigger('click')
}
});
2011-05-20 14:11:42 +00:00
//.appendTo(self.$videobar);
2011-05-20 14:11:42 +00:00
self.$resolutionSelect = Ox.Select({
items: [{id: '96', title: '96p'},{id: '240', title: '240p'}],//self.resolutions,
width: 48
})
.css({float: 'left'})
.bindEvent({
2011-05-20 14:11:42 +00:00
change: function() {
}
});
2011-05-20 14:11:42 +00:00
//.appendTo(self.$videobar);
//$('<div>').css({float: 'left', width: '8px', height: '1px'}).appendTo(self.$videobar.$element);
self.$goToPosterButton = Ox.Button({
style: 'symbol',
title: 'goToPoster',
tooltip: 'Go to Poster Frame',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
setPosition(self.options.posterFrame);
}
})
2011-05-20 14:11:42 +00:00
.appendTo(self.$videobar);
self.$setPosterButton = Ox.Button({
disabled: true,
style: 'symbol',
title: 'setPoster',
tooltip: 'Set Poster Frame',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
self.$goToPosterButton.toggleDisabled();
self.$setPosterButton.toggleDisabled();
self.$unlockPosterButton.toggleTitle();
}
})
2011-05-20 14:11:42 +00:00
.appendTo(self.$videobar);
self.$unlockPosterButton = Ox.Button({
style: 'symbol',
title: [
{id: 'lock', title: 'lock'},
{id: 'unlock', title: 'unlock', selected: true}
],
tooltip: ['Lock Poster Frame', 'Unlock Poster Frame'],
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
self.$setPosterButton.toggleDisabled();
}
})
2011-05-20 14:11:42 +00:00
.appendTo(self.$videobar);
self.$clearButton = Ox.Button({
disabled: true,
style: 'symbol',
title: 'close',
tooltip: 'Clear',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
self.$findInput.clearInput();
submitFindInput('');
}
})
2011-05-20 14:11:42 +00:00
.appendTo(self.$videobar);
self.$findInput = Ox.Input({
2011-05-19 19:03:35 +00:00
autocomplete: self.words,
autocompleteReplace: true,
2011-05-19 19:03:35 +00:00
autocompleteSelect: true,
autocompleteSelectHighlight: true,
autocompleteSelectMax: 10,
2011-05-19 19:03:35 +00:00
autocompleteSelectSubmit: true,
changeOnKeypress: true,
placeholder: 'Find...',
width: 96
})
.css({float: 'right'})
.bindEvent({
change: function(data) {
submitFindInput(data.value, false);
},
submit: function(data) {
submitFindInput(data.value, true);
}
})
2011-05-20 14:11:42 +00:00
.appendTo(self.$videobar);
self.$findInput.find('input').css({background: 'transparent'});
self.$findButton = Ox.Button({
//disabled: true,
style: 'symbol',
title: 'find',
tooltip: 'Find',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
}
});
2011-05-20 14:11:42 +00:00
//.appendTo(self.$videobar);
self.$nextButton = Ox.Button({
disabled: true,
style: 'symbol',
title: 'arrowRight',
tooltip: 'Next Result',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
setPosition(getNextPosition('result', 1));
}
})
2011-05-20 14:11:42 +00:00
.appendTo(self.$videobar);
self.$previousButton = Ox.Button({
disabled: true,
style: 'symbol',
title: 'arrowLeft',
tooltip: 'Previous Result',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
setPosition(getNextPosition('result', -1));
}
})
2011-05-20 14:11:42 +00:00
.appendTo(self.$videobar);
self.$results = $('<div>')
.css({float: 'right', width: '36px', padding: '2px 4px 0 0', fontSize: '9px', textAlign: 'right', cursor: 'default', opacity: 0.25})
.html('0')
2011-05-20 14:11:42 +00:00
.appendTo(self.$videobar.$element);
self.$annotationsbar = Ox.Bar({
size: 16
}).addClass('OxVideoPlayer');
self.$annotationsMenuButton = Ox.Select({
items: [
{id: 'annotations', title: 'Show Annotations', disabled: true},
{id: 'showAnnotationsAtPosition', title: 'At Current Position', checked: true},
{id: 'showAnnotationsInSelection', title: 'In Current Selection'},
{id: 'showAllAnnotations', title: 'All'},
{},
{id: 'textSize', title: 'Font Size', disabled: true},
{id: 'smallText', title: 'Small', checked: true},
{id: 'mediumText', title: 'Medium'},
{id: 'largeText', title: 'Large'}
],
max: 2,
title: $('<img>').attr({
src: Ox.UI.getImagePath('symbolSet.svg')
}),
tooltip: 'Actions and Settings',
type: 'image'
})
.css({float: 'left'})
.appendTo(self.$annotationsbar);
self.$annotationsMenuButton.find('input').attr({
src: Ox.UI.getImagePath('symbolSet.svg')
});
2011-05-20 14:11:42 +00:00
that.$element = Ox.SplitPanel({
2011-04-22 22:03:10 +00:00
elements: [
{
element: Ox.SplitPanel({
elements: [
{
2011-05-20 14:11:42 +00:00
element: self.$videobar,
size: 16
},
{
element: self.$editor
}
],
orientation: 'vertical'
})
2011-04-22 22:03:10 +00:00
},
{
collapsed: !self.options.showAnnotations,
collapsible: true,
2011-05-20 14:11:42 +00:00
element: Ox.SplitPanel({
elements: [
{
element: self.$annotationsbar,
size: 16
},
{
element: self.$annotations,
}
],
orientation: 'vertical'
})
.bindEvent({
resize: resizeAnnotations,
toggle: toggleAnnotations
}),
2011-04-22 22:03:10 +00:00
resizable: true,
resize: [192, 256, 320, 384],
size: self.options.annotationsSize
}
],
orientation: 'horizontal'
});
2011-05-18 16:00:29 +00:00
function changePlayer(data) {
2011-04-22 22:03:10 +00:00
self.options.position = data.position;
self.$timeline[0].options({
position: data.position
});
self.$timeline[1].options({
position: data.position
});
}
function changeTimelineLarge(event, data) {
self.options.position = data.position;
self.$player[0].options({
position: data.position
});
self.$timeline[1].options({
position: data.position
});
}
function changeTimelineSmall(event, data) {
self.options.position = data.position;
self.$player[0].options({
position: data.position
});
self.$timeline[0].options({
position: data.position
});
}
function find(query) {
var results = [];
if (query.length) {
query = query.toLowerCase();
results = Ox.map(self.options.subtitles, function(subtitle) {
return subtitle.text.toLowerCase().indexOf(query) > -1 ? {
'in': subtitle['in'],
out: subtitle.out
} : null;
});
}
return results;
}
// fixme: why not goToNextPosition()?
2011-04-22 22:03:10 +00:00
function getNextPosition(type, direction) {
var found = false,
position = 0,
positions;
if (type == 'cut') {
positions = self.options.cuts;
} else if (type == 'result') {
positions = $.map(self.results, function(v, i) {
return v['in'];
2011-04-22 22:03:10 +00:00
});
} else if (type == 'subtitle') {
positions = $.map(self.options.subtitles, function(v, i) {
return v['in'];
});
}
direction == -1 && positions.reverse();
Ox.forEach(positions, function(v) {
if (direction == 1 ? v > self.options.position : v < self.options.position) {
position = v;
found = true;
return false;
}
});
direction == -1 && positions.reverse();
if (!found) {
position = positions[direction == 1 ? 0 : positions.length - 1];
}
return position;
}
function getPoints(type) {
var found = false,
points,
positions = [];
if (type == 'cut') {
positions = self.options.cuts;
} else if (type == 'match') {
// ...
} else if (type == 'subtitle') {
self.options.subtitles.forEach(function(v, i) {
positions.push(v['in']);
positions.push(v.out);
});
}
positions.indexOf(0) == -1 && positions.unshift(0);
positions.indexOf(self.options.duration) == -1 &&
positions.push(self.options.duration);
Ox.forEach(positions, function(v, i) {
if (v > self.options.position) {
points = [positions[i - 1], positions[i]];
found = true;
return false;
}
});
return points;
}
function getSizes(scrollbarIsVisible) {
//Ox.print('getSizes', scrollbarIsVisible)
var scrollbarWidth = Ox.UI.SCROLLBAR_SIZE,
contentWidth = self.options.width -
(self.options.showAnnotations * self.options.annotationsSize) - 1 -
(scrollbarIsVisible ? scrollbarWidth : 0),
height,
lines,
size = {
player: [],
timeline: []
},
width, widths;
if (self.options.videoSize == 'small') {
width = 0;
widths = Ox.divideInt(contentWidth - 4 * self.margin, 3);
[1, 0, 2].forEach(function(v, i) {
size.player[v] = {
left: (i + 0.5) * self.margin + width,
top: self.margin / 2,
width: widths[i],
height: Math.round(widths[1] / self.videoRatio)
};
2011-04-22 22:03:10 +00:00
width += widths[i];
});
} else {
size.player[0] = {
left: self.margin / 2,
top: self.margin / 2,
width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3),
};
2011-04-22 22:03:10 +00:00
size.player[0].height = Math.round(size.player[0].width / self.videoRatio);
size.player[1] = {
left: size.player[0].left + size.player[0].width + self.margin,
top: size.player[0].top,
width: contentWidth - 3 * self.margin - size.player[0].width
};
size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio);
2011-04-22 22:03:10 +00:00
size.player[2] = {
left: size.player[1].left,
top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin,
width: size.player[1].width,
height: size.player[0].height - size.player[1].height - self.controlsHeight - self.margin
};
2011-04-22 22:03:10 +00:00
}
size.timeline[0] = {
left: self.margin / 2,
top: size.player[0].height + self.controlsHeight + 1.5 * self.margin,
width: contentWidth - 2 * self.margin,
height: 64
};
2011-04-22 22:03:10 +00:00
size.timeline[1] = {
left: size.timeline[0].left,
top: size.timeline[0].top + size.timeline[0].height + self.margin,
width: size.timeline[0].width
};
2011-04-22 22:03:10 +00:00
lines = Math.ceil(self.options.duration / size.timeline[1].width);
height = getHeight();
self.$editor.css({
overflowY: (scrollbarIsVisible && height <= self.options.height - 16) ? 'scroll' : 'auto'
2011-04-22 22:03:10 +00:00
});
//Ox.print('getSizes', scrollbarIsVisible, height, self.options.height, size)
return (!scrollbarIsVisible && height > self.options.height - 16) ? getSizes(true) : size;
2011-04-22 22:03:10 +00:00
function getHeight() {
return size.player[0].height + self.controlsHeight +
size.timeline[0].height + lines * 16 +
(lines + 3) * self.margin;
}
}
function goToPoint(point) {
2011-05-19 10:18:39 +00:00
setPosition(self.options[point]);
2011-05-18 16:00:29 +00:00
that.triggerEvent('position', {
2011-04-22 22:03:10 +00:00
position: self.options.position
});
}
function movePositionBy(sec) {
2011-05-19 10:18:39 +00:00
setPosition(Ox.limit(self.options.position + sec, 0, self.options.duration));
2011-05-18 16:00:29 +00:00
that.triggerEvent('position', {
2011-04-22 22:03:10 +00:00
position: self.options.position
});
}
function movePositionTo(type, direction) {
2011-05-19 10:18:39 +00:00
setPosition(getNextPosition(type, direction));
2011-05-18 16:00:29 +00:00
that.triggerEvent('position', {
2011-04-22 22:03:10 +00:00
position: self.options.position
});
}
function playInToOut() {
self.$player[0].playInToOut();
}
function resizeAnnotations(event, data) {
self.options.annotationsSize = data;
setSizes();
}
function resizeEditor(event, data) {
var width = data - 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',
});
});
}
function selectAnnotation(event, data) {
2011-05-19 10:18:39 +00:00
setPosition(data['in']);
setPoint('in', data['in']);
setPoint('out', data.out);
2011-04-22 22:03:10 +00:00
}
function updateAnnotation(event, data) {
2011-06-15 14:36:01 +00:00
data['in'] = self.options['in'];
data.out = self.options.out;
2011-04-22 22:03:10 +00:00
that.triggerEvent('updateAnnotation', data);
}
function select(type) {
self.options.points = getPoints(type);
setPoints();
}
2011-05-19 10:18:39 +00:00
function setPoint(point, position) {
2011-05-18 18:30:58 +00:00
var otherPoint = point == 'in' ? 'out' : 'in';
2011-05-19 10:18:39 +00:00
self.options[point] = position;
2011-05-18 18:30:58 +00:00
self.$player.forEach(function($player) {
$player.options(point, self.options[point]);
});
2011-05-18 16:00:29 +00:00
self.$player[point == 'in' ? 1 : 2].options({
position: self.options[point]
2011-04-22 22:03:10 +00:00
});
2011-05-18 16:00:29 +00:00
self.$timeline.forEach(function($timeline) {
$timeline.options(point, self.options[point]);
2011-04-22 22:03:10 +00:00
});
2011-05-18 16:00:29 +00:00
if (self.options['in'] > self.options.out) {
2011-05-19 10:18:39 +00:00
setPoint(point == 'in' ? 'out' : 'in', position);
2011-05-18 16:00:29 +00:00
}
2011-04-22 22:03:10 +00:00
}
2011-05-19 10:18:39 +00:00
function setPosition(position) {
self.options.position = position;
2011-04-22 22:03:10 +00:00
self.$player[0].options({
position: self.options.position
});
self.$timeline.forEach(function(v) {
v.options({
position: self.options.position
});
});
}
function setSizes() {
self.sizes = getSizes();
2011-05-18 16:00:29 +00:00
self.$player.forEach(function($player, i) {
$player.options({
2011-04-22 22:03:10 +00:00
height: self.sizes.player[i].height,
width: self.sizes.player[i].width
})
.css({
left: self.sizes.player[i].left + 'px',
top: self.sizes.player[i].top + 'px'
});
});
2011-05-18 16:00:29 +00:00
self.$timeline.forEach(function($timeline, i) {
$timeline.options({
2011-04-22 22:03:10 +00:00
width: self.sizes.timeline[i].width
})
.css({
left: self.sizes.timeline[i].left + 'px',
top: self.sizes.timeline[i].top + 'px'
});
});
}
function submitFindInput(value, hasPressedEnter) {
self.options.find = value;
self.results = find(self.options.find);
self.$results.css({opacity: self.results.length ? 1 : 0.25}).html(self.results.length);
self.$previousButton.options({
disabled: self.results.length <= 1
});
self.$nextButton.options({
disabled: self.results.length <= 1
});
self.$clearButton.options({
disabled: !self.options.find
});
self.$timeline[0].options({
find: self.options.find,
});
self.$timeline[1].options({
find: self.options.find,
results: self.results
});
self.$findInput.find('input').css({
opacity: self.results.length ? 1 : 0.25
});
if (hasPressedEnter) {
self.results.length ?
setPosition(getNextPosition('result', 1)) :
self.$findInput.focusInput();
}
}
2011-04-22 22:03:10 +00:00
function toggleAnnotations(event, data) {
self.options.showAnnotations = !data.collapsed;
setSizes();
}
2011-05-18 16:00:29 +00:00
function toggleMuted() {
self.$player[0].toggleMuted();
2011-04-22 22:03:10 +00:00
}
2011-05-18 16:00:29 +00:00
function togglePaused() {
self.$player[0].togglePaused();
2011-04-22 22:03:10 +00:00
}
function toggleSize() {
self.options.videoSize = self.options.videoSize == 'small' ? 'large' : 'small';
2011-04-22 22:03:10 +00:00
setSizes();
that.triggerEvent('togglesize', {
size: self.options.videoSize
});
}
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-04-22 22:03:10 +00:00
if (key == 'width' || key == 'height') {
2011-05-18 16:00:29 +00:00
Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
2011-04-22 22:03:10 +00:00
setSizes();
} else if (key == 'position') {
self.$player[0].position(value);
}
};
that.addAnnotation = function(layer, item) {
var i = Ox.getPositionById(self.options.layers, layer);
self.$annotationPanel[i].addItem(item);
};
2011-04-22 22:03:10 +00:00
that.removeAnnotations = function(layer, ids) {
var i = Ox.getPositionById(self.options.layers, layer);
self.$annotationPanel[i].removeItems(ids);
};
2011-04-22 22:03:10 +00:00
return that;
};