limit highlight to layer

source/UI/js/Video/AnnotationPanel.js

@@ -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 + '' : '',

source/UI/js/Video/VideoAnnotationPanel.js

@@ -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) {