make find next/previous select the annotation

source/Ox.UI/js/Form/Ox.ArrayEditable.js

@@ -11,7 +11,7 @@ Ox.ArrayEditable = function(options, self) {
         .defaults({
             clickLink: null,
             editable: true,
-            highlight: null,
+            highlight: '',
             itemName: 'item',
             items: [],
             maxHeight: void 0,
@@ -114,6 +114,7 @@ Ox.ArrayEditable = function(options, self) {
                             return value || ' '
                         },
                         */
+                        highlight: self.options.highlight,
                         maxHeight: self.options.maxHeight,
                         submitOnBlur: self.options.submitOnBlur,
                         tooltip: 'Click to select' + (

source/Ox.UI/js/Video/Ox.AnnotationFolder.js

@@ -25,7 +25,7 @@ Ox.AnnotationFolder = function(options, self) {
             clickLink: null,
             collapsed: false,
             editable: false,
-            highlight: null,
+            highlight: '',
             id: '',
             'in': 0,
             item: '',
@@ -206,7 +206,7 @@ Ox.AnnotationFolder = function(options, self) {
     self.$annotations = Ox.ArrayEditable({
             clickLink: self.options.clickLink,
             editable: self.options.editable,
-            highlight: self.highlight,
+            highlight: self.options.highlight,
             items: self.annotations,
             placeholder: 'No ' + self.options.title,
             selected: self.options.selected,

source/Ox.UI/js/Video/Ox.AnnotationPanel.js

@@ -13,7 +13,7 @@ Ox.AnnotationPanel = function(options, self) {
             clickLink: null,
             editable: false,
             font: 'small',
-            highlight: null,
+            highlight: '',
             layers: [],
             mapSize: 256,
             range: 'all',

source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js

@@ -125,7 +125,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
                         var alpha = self.options.type == 'editor'
-                                && (y == top || y == bottom - 1) ? 192 : 64,
+                                && (y == top || y == bottom - 1) ? 255 : 128,
                             color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
                                 ? [0, 0, 0] : [255, 255, 0],
                             index = x * 4 + y * 4 * width;

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -112,7 +112,7 @@ Ox.VideoEditor = function(options, self) {
                     });
                 },
                 key_g: function() {
-                    self.results.length && setPosition(getNextPosition('result', 1));
+                    self.results.length && selectAnnotation(getNextResult(1));
                 },
                 key_i: function() {
                     setPoint('in', self.options.position);
@@ -146,7 +146,7 @@ Ox.VideoEditor = function(options, self) {
                     movePositionBy(self.options.duration);
                 },
                 key_shift_g: function() {
-                    self.results.length && setPosition(getNextPosition('result', -1));
+                    self.results.length && selectAnnotation(getNextResult(-1));
                 },
                 key_shift_left: function() {
                     movePositionBy(-1);
@@ -570,7 +570,7 @@ Ox.VideoEditor = function(options, self) {
         .css({float: 'right'})
         .bindEvent({
             click: function() {
-                setPosition(getNextPosition('result', 1));
+                selectAnnotation(getNextResult(1));
             }
         })
         .appendTo(self.$menubar);
@@ -585,7 +585,7 @@ Ox.VideoEditor = function(options, self) {
         .css({float: 'right'})
         .bindEvent({
             click: function() {
-                setPosition(getNextPosition('result', -1));
+                selectAnnotation(getNextResult(-1));
             }
         })
         .appendTo(self.$menubar);
@@ -600,6 +600,7 @@ Ox.VideoEditor = function(options, self) {
             clickLink: self.options.clickLink,
             editable: true,
             font: self.options.annotationsFont,
+            highlight: self.options.find,
             'in': self.options['in'],
             layers: self.options.layers,
             mapSize: self.options.annotationsMapSize,
@@ -643,6 +644,7 @@ Ox.VideoEditor = function(options, self) {
             },
             edit: function(data) {
                 Ox.print('EDIT EVENT REACHED EDITOR', data)
+                updateWords('remove');
                 self.editing = true;
                 setTimelineState();
             },
@@ -655,6 +657,7 @@ Ox.VideoEditor = function(options, self) {
                 var layer = Ox.getObjectById(self.options.layers, data.layer),
                     index = Ox.getIndexById(layer.items, data.id);
                 layer.items.splice(index, 1);
+                updateWords('remove');
                 self.editing = false;
                 self.options.selected = '';
                 setTimelineState();
@@ -734,6 +737,7 @@ Ox.VideoEditor = function(options, self) {
     }
 
     function blurAnnotation() {
+        updateWords('add');
         self.editing = false;
         setTimelineState();
         if (
@@ -750,6 +754,7 @@ Ox.VideoEditor = function(options, self) {
     }
 
     function editAnnotation() {
+        updateWords('remove');
         self.editing = true;
         setTimelineState();
         self.$annotationPanel.editItem();
@@ -764,12 +769,25 @@ Ox.VideoEditor = function(options, self) {
                     return Ox.decodeHTML(Ox.stripTags(
                         item.value.toLowerCase()
                     )).indexOf(query) > -1 ? {
+                        id: item.id,
                         'in': item['in'],
                         out: item.out
                     } : null;
                 });
-            })));
+            }))).sort(function(a, b) {
-            //Ox.print('RESULTS:', results)
+                var ret = 0;
+                if (a['in'] < b['in']) {
+                    ret = -1;
+                } else if (a['in'] > b['in']) {
+                    ret = 1;
+                } else if (a.out > b.out) {
+                    ret = -1;
+                } else if (a.out < b.out) {
+                    ret = 1;
+                }
+                return ret;
+            });
+            Ox.print('RESULTS:', results)
             /*
             results = Ox.map(self.options.subtitles, function(subtitle) {
                 return subtitle.text.toLowerCase().indexOf(query) > -1 ? {
@@ -817,6 +835,21 @@ Ox.VideoEditor = function(options, self) {
         return annotations.length ? annotations[0] : {id: ''};
     }
 
+    function getAnnotationValue(annotationId) {
+        var found = false, value;
+        Ox.forEach(self.options.layers, function(layer, i) {
+            Ox.forEach(layer.items, function(item) {
+                if (item.id == annotationId) {
+                    value = item.value;
+                    found = true;
+                    return false;
+                }
+            });
+            return !found;
+        });
+        return value;
+    }
+
     // fixme: why not goToNextPosition()?
     function getNextPosition(type, direction) {
         var found = false,
@@ -832,14 +865,18 @@ Ox.VideoEditor = function(options, self) {
             )));
         } else if (type == 'cut') {
             positions = Ox.merge(0, self.options.cuts, self.options.duration);
-        } else if (type == 'result') {
+        }/* else if (type == 'result') {
             positions = self.results.map(function(v) {
                 return v['in'];
             });
-        }
+        }*/
         direction == -1 && positions.reverse();
         Ox.forEach(positions, function(v) {
-            if (direction == 1 ? v > self.options.position : v < self.options.position) {
+            if (
+                direction == 1
+                ? v > self.options.position
+                : v < self.options.position
+            ) {
                 position = v;
                 found = true;
                 return false;
@@ -852,6 +889,29 @@ Ox.VideoEditor = function(options, self) {
         return position;
     }
 
+    function getNextResult(direction) {
+        var found = false,
+            result,
+            results = Ox.clone(self.results);
+        direction == -1 && results.reverse();
+        Ox.forEach(results, function(v) {
+            if (
+                direction == 1
+                ? v['in'] > self.options.position
+                : v['in'] < self.options.position
+            ) {
+                result = v;
+                found = true;
+                return false;
+            }
+        });
+        direction == -1 && results.reverse();
+        if (!found) {
+            result = results[direction == 1 ? 0 : results.length - 1];
+        }
+        return result;
+    }
+
     /*
     function getPoints(type) {
         var found = false,
@@ -957,7 +1017,7 @@ Ox.VideoEditor = function(options, self) {
         Ox.forEach(Ox.count(Ox.words(
             Ox.merge(self.options.layers.map(function(layer) {
                 return layer.items.map(function(item) {
-                    return item.value;
+                    return Ox.decodeHTML(Ox.stripTags(item.value.toLowerCase()));
                 });
             })).join(' ')
         )), function(count, value) {
@@ -1001,8 +1061,10 @@ Ox.VideoEditor = function(options, self) {
         } else if (!data.id) {
             that.gainFocus();
         }
-        self.editing = false;
+        // FIXME
+        // self.editing = false;
         self.options.selected = data.id;
+        Ox.print('SOS???', self.options.selected);
         if (self.options.selected) {
             self.options.annotationsRange != 'position' && setPosition(data['in']);
             setPoint('in', data['in'], true);
@@ -1121,13 +1183,12 @@ Ox.VideoEditor = function(options, self) {
     }
 
     function submitAnnotation(data) {
+        updateWords('add');
         self.editing = false;
         setTimelineState();
-        /*
         Ox.print('....', self.options.annotationsRange == 'position',
             self.options.position < self.options['in'],
             self.options.position > self.options.out)
-        */
         if (
             self.options.annotationsRange == 'position' && (
                 self.options.position < self.options['in']
@@ -1166,7 +1227,8 @@ Ox.VideoEditor = function(options, self) {
         if (hasPressedEnter) {
             that.triggerEvent('find', {find: self.options.find});
             if (self.results.length) {
-                setPosition(getNextPosition('result', 1));
+                Ox.print('HELLO?>??', getNextResult(1))
+                selectAnnotation(getNextResult(1));
             } else {
                 self.$findInput.focusInput(true);
             }
@@ -1201,6 +1263,39 @@ Ox.VideoEditor = function(options, self) {
         });
     }
 
+    function updateWords(action) {
+        var words = [];
+        Ox.forEach(Ox.count(Ox.words(
+            getAnnotationValue(self.options.selected)
+        )), function(count, value) {
+            words.push({count: count, value: value});
+        });
+        words.forEach(function(word) {
+            var index = Ox.getIndex(self.words, 'value', word.value);
+            if (action == 'add') {
+                if (index == -1) {
+                    self.words.push({count: 1, value: word.value});
+                } else {
+                    self.words[index].count++;
+                }
+            } else {
+                if (self.words[index].count == 1) {
+                    self.words.splice(index, 1);
+                } else {
+                    self.words[index].count--;
+                }
+            }
+        });
+        self.words.sort(function(a, b) {
+            return b.count - a.count;
+        });
+        self.$findInput.options({
+            autocomplete: self.words.map(function(word) {
+                return word.value;
+            })
+        });
+    }
+
     self.setOption = function(key, value) {
         if (key == 'width' || key == 'height') {
             setSizes();

source/Ox.UI/themes/classic/css/classic.css

@@ -774,6 +774,28 @@ Video
 .OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
     background: rgb(192, 192, 255);
 }
+.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected .OxHighlight {
+    background-color: transparent;
+    background-image: -moz-repeating-linear-gradient(
+        -45deg, rgb(192, 192, 255) 0, rgb(192, 192, 255) 25%,
+        rgb(255, 255, 0) 25%, rgb(255, 255, 0) 50%,
+        rgb(192, 192, 255) 50%, rgb(192, 192, 255) 75%,
+        rgb(255, 255, 0) 75%, rgb(255, 255, 0) 100%
+    );
+    background-image: -o-repeating-linear-gradient(
+        -45deg, rgb(192, 192, 255) 0, rgb(192, 192, 255) 25%,
+        rgb(255, 255, 0) 25%, rgb(255, 255, 0) 50%,
+        rgb(192, 192, 255) 50%, rgb(192, 192, 255) 75%,
+        rgb(255, 255, 0) 75%, rgb(255, 255, 0) 100%
+    );
+    background-image: -webkit-repeating-linear-gradient(
+        -45deg, rgb(192, 192, 255) 0, rgb(192, 192, 255) 25%,
+        rgb(255, 255, 0) 25%, rgb(255, 255, 0) 50%,
+        rgb(192, 192, 255) 50%, rgb(192, 192, 255) 75%,
+        rgb(255, 255, 0) 75%, rgb(255, 255, 0) 100%
+    );
+    background-size: 4px 4px;
+}
 .OxThemeClassic .OxAnnotationFolder .OxArrayEditableInput .OxEditableElement.OxSelected {
     box-shadow: 0 0 1px rgb(64, 64, 64);
 }