0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

limit highlight to layer

Browse source
This commit is contained in:
j 2018-08-07 17:12:22 +01:00
parent 03ba57f2b8
commit 8b14537dce
2 changed files with 61 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@ Ox.AnnotationPanel <f> Video Annotation Panel
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
@ -50,6 +51,7 @@ Ox.AnnotationPanel = function(options, self) {
enableExport: false,
enableImport: false,
highlight: '',
highlightLayer: '*',
itemName: {singular: 'video', plural: 'videos'},
layers: [],
mapSize: 256,
@ -64,9 +66,11 @@ Ox.AnnotationPanel = function(options, self) {
})
.options(options || {})
.update(function(key, value) {
if (key == 'highlight') {
if (key == 'highlight' || key == 'highlightLayer') {
self.$folder.forEach(function($folder) {
$folder.options({highlight: value});
$folder.options({
highlight: getHighlight($folder.options('id'))
});
});
} else if (['in', 'out', 'position'].indexOf(key) > -1) {
self.$folder.forEach(function($folder) {
@ -77,7 +81,8 @@ Ox.AnnotationPanel = function(options, self) {
} else if (key == 'selected') {
self.options.editable && updateEditMenu();
if (value) {
getFolder(value).options({selected: value});
var folder = getFolder(value)
folder && folder.options({selected: value});
} else {
self.$folder.forEach(function($folder) {
$folder.options({selected: ''});
@ -179,6 +184,10 @@ Ox.AnnotationPanel = function(options, self) {
return folder;
}
function getHighlight(layer) {
return Ox.contains(['*', layer], self.options.highlightLayer) ? self.options.highlight : '';
}
function getLanguages() {
return Ox.sortBy(Ox.map(Ox.unique(Ox.flatten(
self.options.layers.map(function(layer) {
@ -354,7 +363,7 @@ Ox.AnnotationPanel = function(options, self) {
clickLink: self.options.clickLink,
collapsed: !self.options.showLayers[layer.id],
editable: self.options.editable,
highlight: self.options.highlight,
highlight: getHighlight(layer.id),
id: layer.id,
'in': self.options['in'],
keyboard: index < 9 ? index + 1 + '' : '',

54
source/UI/js/Video/VideoAnnotationPanel.js
View file

@ -19,6 +19,7 @@ Ox.VideoAnnotationPanel <f> VideoAnnotationPanel Object
embedselection <!> embedselection
findannotations <!> findannotations
find <!> find
findLayer <s|*> limit find to layer
importannotations <!> importannotations
info <!> info
key_* <!> key_*
@ -66,6 +67,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
enableSetPosterFrame: false,
enableSubtitles: false,
find: '',
findLayer: '*',
fps: 25,
getFrameURL: null,
getLargeTimelineURL: null,
@ -409,7 +411,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
enablePosition: true,
enableSubtitles: self.options.enableSubtitles,
externalControls: true,
find: self.options.find,
find: getSubtitlesFind(),
height: self.sizes.player[i].height,
id: 'player' + Ox.toTitleCase(type),
'in': self.options['in'],
@ -495,7 +497,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
self.$timeline[0] = Ox.LargeVideoTimeline({
cuts: self.options.cuts,
duration: self.options.duration,
find: self.options.find,
find: getSubtitlesFind(),
getImageURL: self.options.getLargeTimelineURL,
id: 'timelineLarge',
'in': self.options['in'],
@ -523,7 +525,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
self.$timeline[1] = Ox.BlockVideoTimeline({
cuts: self.options.cuts,
duration: self.options.duration,
find: self.options.find,
find: getSubtitlesFind(),
getImageURL: self.options.getSmallTimelineURL,
id: 'timelineSmall',
'in': self.options['in'],
@ -789,6 +791,28 @@ Ox.VideoAnnotationPanel = function(options, self) {
})
.appendTo(self.$menubar);
self.$findLayerSelect = Ox.Select({
items: [
{id: '*', title: Ox._('Find: {0}', [Ox._('All')])},
].concat(self.options.layers.map(function(layer) {
return {
id: layer.id,
title: Ox._('Find: {0}', [Ox._(layer.title)])
}
})),
value: self.options.findLayer,
width: 128,
overlap: 'right',
})
.css({float: 'right', background: 'transparent'})
.bindEvent({
change: function(data) {
self.options.findLayer = data.value;
submitFindInput(self.$findInput.value(), false);
},
})
.appendTo(self.$menubar);
self.$nextButton = Ox.Button({
disabled: true,
style: 'symbol',
@ -832,6 +856,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
enableExport: self.options.enableExport,
enableImport: self.options.enableImport,
highlight: self.options.find,
highlightLayer: self.options.findLayer,
'in': self.options['in'],
itemName: self.options.itemName,
layers: self.options.layers,
@ -1032,7 +1057,8 @@ Ox.VideoAnnotationPanel = function(options, self) {
if (query.length) {
query = query.toLowerCase();
results = self.annotations.filter(function(annotation) {
return Ox.decodeHTMLEntities(Ox.stripTags(
return Ox.contains(['*', annotation.layer], self.options.findLayer)
&& Ox.decodeHTMLEntities(Ox.stripTags(
annotation.value.toLowerCase()
)).indexOf(query) > -1;
});
@ -1069,7 +1095,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
function getAnnotations() {
return Ox.flatten(self.options.layers.map(function(layer) {
return layer.items;
return layer.items.map(function(item) {
return Ox.extend({layer: layer.id}, item)
});
})).sort(sortAnnotations);
}
@ -1226,6 +1254,12 @@ Ox.VideoAnnotationPanel = function(options, self) {
: [];
}
function getSubtitlesFind() {
return Ox.contains(
[self.options.subtitlesLayer, '*'], self.options.findLayer
) ? self.options.find : '';
}
function getWords() {
var words = [];
Ox.forEach(Ox.count(Ox.words(
@ -1542,11 +1576,12 @@ Ox.VideoAnnotationPanel = function(options, self) {
self.$clearButton.options({
disabled: !self.options.find
});
self.$player.forEach(function($player) {
$player.options({find: self.options.find});
$player.options({find: getSubtitlesFind()});
});
self.$timeline.forEach(function($timeline) {
$timeline.options({find: self.options.find});
$timeline.options({find: getSubtitlesFind()});
});
self.$timeline[1].options({results: self.results});
if (hasPressedEnter) {
@ -1558,7 +1593,10 @@ Ox.VideoAnnotationPanel = function(options, self) {
self.$findInput.focusInput(true);
}
}
self.$annotationPanel.options({highlight: self.options.find});
self.$annotationPanel.options({
highlight: self.options.find,
highlightLayer: self.options.findLayer,
});
}
function toggleAnnotations(data) {