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

allow for grouped highlights in video annotations

Browse source
This commit is contained in:
rolux 2018-10-09 18:29:13 +02:00
commit a5f7dd720a
5 changed files with 107 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

79
source/UI/js/Video/AnnotationPanel.js
View file

@ -5,21 +5,22 @@
/*@
Ox.AnnotationPanel <f> Video Annotation Panel
options <o> Options object
calendarSize <n|256> calendar size
clickLink <f|null> click link callback
editable <b|false> if true, annotations can be edited
highlight <s|''> highlight given string in annotations
highlightLayer <s|'*'> limit highlight to specific layer
layers <a|[]> array with annotation objects
mapSize <n|256> map size
range <s|'all'> all, position, selection
selected <s|''> selected annotation
showCalendar <b|false> if true, calendar is shown
showLayers <o|{}> object with layers to show
showMap <b|false> if true, show map
showUsers <b|false> if true show user
sort <s|'position'> position, start, text
width <n|256> panel width
calendarSize <n|256> calendar size
clickLink <f|null> click link callback
editable <b|false> if true, annotations can be edited
highlight <s|''> highlight given string in annotations
highlightAnnotations <b|false> highlight annotations that match selection
highlightLayer <s|'*'> l limit highlight to specific layer
layers <a|[]> array with annotation objects
mapSize <n|256> map size
range <s|'all'> all, position, selection
selected <s|''> selected annotation
showCalendar <b|false> if true, calendar is shown
showLayers <o|{}> object with layers to show
showMap <b|false> if true, show map
showUsers <b|false> if true show user
sort <s|'position'> position, start, text
width <n|256> panel width
self <o> Shared private variable
([options[, self]]) -> <o:Ox.SplitPanel> AnnotationPanel Object
add <!> add
@ -51,6 +52,7 @@ Ox.AnnotationPanel = function(options, self) {
enableExport: false,
enableImport: false,
highlight: '',
highlightAnnotations: false,
highlightLayer: '*',
itemName: {singular: 'video', plural: 'videos'},
layers: [],
@ -73,6 +75,12 @@ Ox.AnnotationPanel = function(options, self) {
highlight: getHighlight($folder.options('id'))
});
});
} else if (key == 'highlightAnnotations') {
self.$folder.forEach(function($folder) {
$folder.options({
highlightAnnotations: self.options.highlightAnnotations
});
});
} else if (['in', 'out', 'position'].indexOf(key) > -1) {
self.$folder.forEach(function($folder) {
$folder.options(key, value);
@ -365,6 +373,7 @@ Ox.AnnotationPanel = function(options, self) {
collapsed: !self.options.showLayers[layer.id],
editable: self.options.editable,
highlight: getHighlight(layer.id),
highlightAnnotations: self.options.highlightAnnotations,
id: layer.id,
'in': self.options['in'],
keyboard: index < 9 ? index + 1 + '' : '',
@ -481,20 +490,7 @@ Ox.AnnotationPanel = function(options, self) {
{id: 'duration', title: Ox._('By Duration'), checked: self.options.sort == 'duration'},
{id: 'text', title: Ox._('By Text'), checked: self.options.sort == 'text'},
{id: 'created', title: Ox._('By Creation Time'), checked: self.options.sort == 'created'}
]}
],
self.languages.length > 1 ? [
{},
{id: 'languages', title: Ox._('Show Languages'), disabled: true},
{group: 'languages', min: 1, max: -1, items: self.languages.map(function(language) {
return {
id: language.code,
title: Ox._(language.name),
checked: Ox.contains(self.enabledLanguages, language.code)
};
})}
] : [],
[
]},
{},
{id: 'results', title: Ox._('Find Annotations'), disabled: true},
{group: 'results', max: 1, items: [
@ -511,6 +507,25 @@ Ox.AnnotationPanel = function(options, self) {
};
}))}
],
self.options.editable ? [
{},
{id: 'highlightannotations', title: Ox._('Highlight Annotations'), disabled: true},
{group: 'highlight', max: 1, items: [
{id: 'none', title: Ox._('None'), checked: !self.options.highlightAnnotations},
{id: 'selection', title: Ox._('Matching Current Selection'), checked: self.options.highlightAnnotations}
]}
] : [],
self.languages.length > 1 ? [
{},
{id: 'languages', title: Ox._('Show Languages'), disabled: true},
{group: 'languages', min: 1, max: -1, items: self.languages.map(function(language) {
return {
id: language.code,
title: Ox._(language.name),
checked: Ox.contains(self.enabledLanguages, language.code)
};
})}
] : [],
self.options.showUsers && self.users.length ? [
{},
{id: 'users', title: Ox._('Show Users'), disabled: true},
@ -553,8 +568,12 @@ Ox.AnnotationPanel = function(options, self) {
});
} else if (data.id == 'results') {
var layer = data.checked[0].id.split('_').pop()
that.options('highlightLayer', layer);
that.options({highlightLayer: layer});
that.triggerEvent('highlightlayer', self.options.highlightLayer);
} else if (data.id == 'highlight') {
var value = data.checked[0].id == 'selection'
that.options({highlightAnnotations: value});
that.triggerEvent('highlightannotations', self.options.highlightAnnotations);
} else {
self.options[data.id] = data.checked[0].id;
set[data.id] = self.options[data.id];