forked from 0x2620/oxjs
implement 'view annotations at position / in selection / all'
This commit is contained in:
j
parent
0c6541363d
commit
39f9e9bb4d
6 changed files with 152 additions and 80 deletions
|
|
@ -8,6 +8,7 @@ Ox.AnnotationPanel <f:Ox.Element> 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
|
||||
|
|
@ -21,8 +22,10 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
editable: false,
|
||||
id: '',
|
||||
items: [],
|
||||
range: 'all',
|
||||
title: '',
|
||||
type: 'text',
|
||||
width: 0
|
||||
|
|
@ -31,7 +34,8 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
|
||||
self.selected = -1;
|
||||
|
||||
that.$element = Ox.CollapsePanel({
|
||||
that.setElement(
|
||||
Ox.CollapsePanel({
|
||||
collapsed: false,
|
||||
extras: self.options.editable ? [
|
||||
Ox.Button({
|
||||
|
|
@ -52,7 +56,8 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
.addClass('OxAnnotationPanel')
|
||||
.bindEvent({
|
||||
toggle: togglePanel
|
||||
});
|
||||
})
|
||||
);
|
||||
that.$content = that.$element.$content;
|
||||
|
||||
self.$annotations = Ox.List({
|
||||
|
|
@ -78,8 +83,11 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
.append($('<div>').css({height: '4px'}));
|
||||
return $item;
|
||||
},
|
||||
items: self.options.items,
|
||||
items: getAnnotations(),
|
||||
max: 1,
|
||||
min: 0,
|
||||
sort: [{key: 'in', operator: '+'}],
|
||||
type: 'none', // fixme
|
||||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
|
|
@ -116,6 +124,21 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
.appendTo(self.$annotations);
|
||||
});
|
||||
*/
|
||||
|
||||
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
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.ids[0]);
|
||||
item && that.triggerEvent('select', {
|
||||
|
|
@ -124,6 +147,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
'layer': self.options.id
|
||||
});
|
||||
}
|
||||
|
||||
function updateAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
item.value = data.value;
|
||||
|
|
@ -134,6 +158,26 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'in') {
|
||||
self.options.range == 'selection' && self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
});
|
||||
} else if (key == 'out') {
|
||||
self.options.range == 'selection' && self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
});
|
||||
} else if (key == 'position') {
|
||||
self.options.range == 'position' && self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
});
|
||||
} else if (key == 'range') {
|
||||
self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/*@
|
||||
addItem <f> addItem
|
||||
@*/
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue