allow for grouped highlights in video annotations

source/UI/css/theme.css

@@ -1386,6 +1386,9 @@ Video
 .$themeClass .OxAnnotationFolder .OxEditableElement.OxWarning .OxValue {
     border-bottom: 2px dotted $bodyWarningBorder;
 }
+.$themeClass .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxEditable.OxGroup {
+    background-color: $videoAnnotationSelectedBackground;
+}
 .$themeClass .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxEditable.OxSelected {
     background-color: $videoAnnotationEditableSelectedBackground;
 }

source/UI/js/Form/ArrayEditable.js

@@ -30,6 +30,7 @@ Ox.ArrayEditable = function(options, self) {
             getSortValue: null,
             globalAttributes: [],
             highlight: '',
+            highlightGroup: false,
             itemName: 'item',
             items: [],
             maxHeight: void 0,
@@ -160,6 +161,9 @@ Ox.ArrayEditable = function(options, self) {
             .appendTo(that)];
         } else {
             sortItems();
+            if (self.options.highlightGroup) {
+                var selectedItem = Ox.getObjectById(self.options.items, self.options.selected) || {};
+            }
             self.$items = self.options.items.map(function appendItem(item, i) {
                 if (i && self.options.type == 'input') {
                     $('<span>')
@@ -192,6 +196,7 @@ Ox.ArrayEditable = function(options, self) {
                         width: self.options.type == 'input' ? 0 : self.options.width - 9
                     })
                     .addClass(item.id == self.options.selected ? 'OxSelected' : '')
+                    .addClass(self.options.highlightGroup && item.group == selectedItem.group ? 'OxGroup' : '')
                     .data({id: item.id, position: i})
                     .bindEvent({
                         blur: function(data) {
@@ -265,7 +270,11 @@ Ox.ArrayEditable = function(options, self) {
             that.blurItem();
         }
         that.find('.OxSelected').removeClass('OxSelected');
-        self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
+        that.find('.OxGroup').removeClass('OxGroup')
+        if (self.selected > -1) {
+            self.$items[self.selected].addClass('OxSelected');
+            self.options.highlightGroup && that.updateItemGroup()
+        }
         triggerSelectEvent();
     }
 
@@ -473,6 +482,15 @@ Ox.ArrayEditable = function(options, self) {
         }
     };
 
+    that.updateItemGroup = function() {
+        var group = self.options.items[self.selected].group;
+        self.$items.forEach(function($item, index) {
+            $item[
+                self.options.items[index].group == group ? 'addClass' : 'removeClass'
+            ]('OxGroup');
+        })
+    }
+
     return that;
 
 };

source/UI/js/Video/AnnotationFolder.js

@@ -38,6 +38,7 @@ Ox.AnnotationFolder = function(options, self) {
             collapsed: false,
             editable: false,
             highlight: '',
+            highlightAnnotations: false,
             id: '',
             'in': 0,
             item: '',
@@ -64,6 +65,10 @@ Ox.AnnotationFolder = function(options, self) {
             if (key == 'highlight') {
                 self.$annotations.options({highlight: value});
             }
+            if (key == 'highlightAnnotations') {
+                self.$annotations.options({highlightGroup: value});
+                updateAnnotations();
+            }
             if (['in', 'out'].indexOf(key) > -1 && self.editing) {
                 var item = Ox.getObjectById(self.options.items, self.options.selected);
                 item[key] = value;
@@ -282,6 +287,7 @@ Ox.AnnotationFolder = function(options, self) {
                 : null,
             globalAttributes: ['data', 'lang'],
             highlight: self.options.translate ? Ox._(self.options.highlight) : self.options.highlight,
+            highlightGroup: self.options.highlightAnnotations,
             placeholder: Ox._('Loading...'),
             separator: self.options.separator,
             sort: self.sort,
@@ -400,7 +406,6 @@ Ox.AnnotationFolder = function(options, self) {
         });
     });
 
-
     showWarnings();
 
     function changeAnnotation(data) {
@@ -472,6 +477,10 @@ Ox.AnnotationFolder = function(options, self) {
                     || self.options.users.indexOf(item.user) > -1
                 )
             );
+        }).map(function(item) {
+            return Ox.extend(item, {
+                group: item['in'] + '-' + item.out
+            });
         });
         return annotations;
     }
@@ -658,7 +667,9 @@ Ox.AnnotationFolder = function(options, self) {
         self.options.items.splice(pos, 0, item);
         self.$panel.options({collapsed: false});
         self.$annotations
-            .addItem(pos, item)
+            .addItem(pos, Ox.extend(item, {
+                group: item['in'] + '-' + item.out
+            }))
             .options({selected: item.id})
             .editItem();
         showWarnings();
@@ -735,6 +746,10 @@ Ox.AnnotationFolder = function(options, self) {
         Ox.forEach(data, function(value, key) {
             item[key] = value;
         });
+        item.group = item['in'] + '-' + item.out;
+        if (self.options.highlightAnnotations) {
+            self.$annotations.updateItemGroup();
+        }
         if (id != item.id) {
             self.$annotations.find('.OxEditableElement').each(function() {
                 var $element = $(this);

source/UI/js/Video/AnnotationPanel.js

@@ -9,7 +9,8 @@ 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
+        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
@@ -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];

source/UI/js/Video/VideoAnnotationPanel.js

@@ -49,6 +49,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
     var that = Ox.Element({}, self)
             .defaults({
                 annotationsCalendarSize: 256,
+                annotationsHighlight: false,
                 annotationsMapSize: 256,
                 annotationsRange: 'all',
                 annotationsSeparator: ';',
@@ -841,6 +842,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
             enableExport: self.options.enableExport,
             enableImport: self.options.enableImport,
             highlight: self.options.find,
+            highlightAnnotations: self.options.annotationsHighlight,
             highlightLayer: self.options.findLayer,
             'in': self.options['in'],
             itemName: self.options.itemName,
@@ -906,6 +908,10 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 that.triggerEvent('findannotations', data);
             },
             focus: that.gainFocus,
+            highlightannotations: function(data) {
+                self.options.annotationsHighlight = data;
+                that.triggerEvent('annotationshighlight', data);
+            },
             highlightlayer: function(data) {
                 self.options.findLayer = data;
                 submitFindInput(self.$findInput.value(), false);