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

implement 'view annotations at position / in selection / all'

Browse source
This commit is contained in:
j 2012-01-03 00:36:36 +05:30
commit 39f9e9bb4d
6 changed files with 152 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,8 @@ Ox.VideoEditor = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
annotationsFont: 'small',
annotationsRange: 'all',
annotationsSize: 0,
censored: [],
cuts: [],
@ -214,10 +216,11 @@ Ox.VideoEditor = function(options, self) {
paused: function(data) {
that.triggerEvent('paused', data);
},
playing: changePlayer,
playing: function(data) {
setPosition(data.position, true);
},
position: function(data) {
changePlayer(data);
that.triggerEvent('position', data);
setPosition(data.position);
},
resolution: function(data) {
that.triggerEvent('resolution', data);
@ -262,7 +265,9 @@ Ox.VideoEditor = function(options, self) {
top: self.sizes.timeline[0].top + 'px'
})
.bindEvent({
position: changeTimelineLarge
position: function(data) {
setPosition(data.position);
}
})
.appendTo(self.$editor);
@ -287,7 +292,9 @@ Ox.VideoEditor = function(options, self) {
top: self.sizes.timeline[1].top + 'px',
})
.bindEvent({
position: changeTimelineSmall
position: function(data) {
setPosition(data.position);
}
})
.appendTo(self.$editor);
@ -300,6 +307,11 @@ Ox.VideoEditor = function(options, self) {
self.options.layers.forEach(function(layer, i) {
self.$annotationPanel[i] = Ox.AnnotationPanel(
Ox.extend({
font: self.options.annotationsFont,
'in': self.options['in'],
out: self.options.out,
position: self.options.position,
range: self.options.annotationsRange,
width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
}, layer)
)
@ -419,6 +431,7 @@ Ox.VideoEditor = function(options, self) {
{id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
]
),
style: 'square',
title: 'set',
tooltip: 'Actions and Settings',
type: 'image'
@ -621,22 +634,36 @@ Ox.VideoEditor = function(options, self) {
self.$annotationsMenuButton = Ox.MenuButton({
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: '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: 'textSize', title: 'Font Size', disabled: true},
{id: 'smallText', title: 'Small', checked: true},
{id: 'mediumText', title: 'Medium'},
{id: 'largeText', title: 'Large'}
{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'}
]}
],
max: 2,
style: 'square',
title: 'set',
tooltip: 'Actions and Settings',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
change: function(data) {
var set = {};
set[data.id] = data.checked[0].id;
self.$annotationPanel.forEach(function($panel) {
$panel.options(set);
});
that.triggerEvent('annotations' + Ox.toTitleCase(data.id), set);
}
})
.appendTo(self.$annotationsbar);
that.$element = Ox.SplitPanel({
@ -672,6 +699,7 @@ Ox.VideoEditor = function(options, self) {
})
.bindEvent({
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
toggle: toggleAnnotations
}),
resizable: true,
@ -689,42 +717,6 @@ Ox.VideoEditor = function(options, self) {
submitFindInput(self.options.find, true);
}, 0);
function changePlayer(data) {
self.options.position = data.position;
self.$timeline[0].options({
position: data.position
});
self.$timeline[1].options({
position: data.position
});
}
function changeTimelineLarge(data) {
self.options.position = data.position;
self.$player[0].options({
position: data.position
});
self.$timeline[1].options({
position: data.position
});
that.triggerEvent('position', {
position: self.options.position
});
}
function changeTimelineSmall(data) {
self.options.position = data.position;
self.$player[0].options({
position: data.position
});
self.$timeline[0].options({
position: data.position
});
that.triggerEvent('position', {
position: self.options.position
});
}
function find(query) {
var results = [];
if (query.length) {
@ -888,6 +880,10 @@ Ox.VideoEditor = function(options, self) {
setSizes();
}
function resizeendAnnotations(data) {
that.triggerEvent('annotationsSize', {size: data.size});
}
function resizeEditor(data) {
var width = data.size - 2 * margin + 100;
resizeVideoPlayers(width);
@ -943,23 +939,34 @@ 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
});
});
that.triggerEvent('points', {
'in': self.options['in'],
out: self.options.out
});
}
function setPosition(position) {
function setPosition(position, playing) {
self.options.position = position;
self.$player[0].options({
!playing && self.$player[0].options({
position: self.options.position
});
self.$timeline.forEach(function(v) {
v.options({
self.$timeline.forEach(function($timeline) {
$timeline.options({
position: self.options.position
});
});
that.triggerEvent('position', {
self.$annotationPanel.forEach(function($panel) {
$panel.options({
position: self.options.position
});
});
!playing && that.triggerEvent('position', {
position: self.options.position
});
}