diff --git a/source/UI/js/Video/AnnotationPanel.js b/source/UI/js/Video/AnnotationPanel.js index b4d66d82..40482e87 100644 --- a/source/UI/js/Video/AnnotationPanel.js +++ b/source/UI/js/Video/AnnotationPanel.js @@ -9,6 +9,7 @@ Ox.AnnotationPanel Video Annotation Panel clickLink click link callback editable if true, annotations can be edited highlight highlight given string in annotations + highlightLayer limit highlight to specific layer layers array with annotation objects mapSize map size range 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 + '' : '', diff --git a/source/UI/js/Video/VideoAnnotationPanel.js b/source/UI/js/Video/VideoAnnotationPanel.js index ea3be800..ff79a92e 100644 --- a/source/UI/js/Video/VideoAnnotationPanel.js +++ b/source/UI/js/Video/VideoAnnotationPanel.js @@ -19,6 +19,7 @@ Ox.VideoAnnotationPanel VideoAnnotationPanel Object embedselection embedselection findannotations findannotations find find + findLayer 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,9 +1057,10 @@ Ox.VideoAnnotationPanel = function(options, self) { if (query.length) { query = query.toLowerCase(); results = self.annotations.filter(function(annotation) { - return Ox.decodeHTMLEntities(Ox.stripTags( - annotation.value.toLowerCase() - )).indexOf(query) > -1; + return Ox.contains(['*', annotation.layer], self.options.findLayer) + && Ox.decodeHTMLEntities(Ox.stripTags( + annotation.value.toLowerCase() + )).indexOf(query) > -1; }); } return results; @@ -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) {