resolve focus issues with video player find element

source/Ox.UI/js/Core/Ox.Focus.js

@@ -3,7 +3,7 @@
 Ox.Focus <o> Basic focus handler
 @*/
 
-Ox.Focus = function() {
+Ox.Focus = (function() {
     var stack = [];
     return {
         _print: function() {
@@ -50,4 +50,4 @@ Ox.Focus = function() {
             return stack.length ? stack[stack.length - 1] : null;
         }
     };
-}();
+}());

source/Ox.UI/js/Form/Ox.Input.js

@@ -185,12 +185,12 @@ Ox.Input = function(options, self) {
         ]
     }
 
-    Ox.extend(self, {
+    self.bindKeyboard = self.options.autocomplete
-        bindKeyboard: self.options.autocomplete || self.options.autovalidate ||
+        || self.options.autovalidate
-            self.options.changeOnKeypress,
+        || self.options.changeOnKeypress;
-        hasPasswordPlaceholder: self.options.type == 'password' && self.options.placeholder,
+    self.hasPasswordPlaceholder = self.options.type == 'password'
-        inputWidth: getInputWidth()
+        && self.options.placeholder;
-    });
+    self.inputWidth = getInputWidth();
 
     if (self.options.clear) {
         self.$button = Ox.Button({
@@ -578,7 +578,6 @@ Ox.Input = function(options, self) {
         self.options.validate && validate();
         if (self.bindKeyboard) {
             Ox.UI.$document.unbind('keydown', keydown);
-            //Ox.UI.$document.unbind('keypress', keypress);
         }
         // fixme: for some reason, if options.type is set, no change event fires
         // as a workaround, blur sends a value. remove later...
@@ -662,9 +661,8 @@ Ox.Input = function(options, self) {
     }
 
     function focus() {
-        //Ox.print('focus()')
         if (
-            that.hasClass('OxFocus') || // fixme: this is just a workaround, since for some reason, focus() gets called twice on focus
+            // that.hasClass('OxFocus') || // fixme: this is just a workaround, since for some reason, focus() gets called twice on focus
             (self.$autocompleteMenu && self.$autocompleteMenu.is(':visible')) ||
             (self.hasPasswordPlaceholder && self.$input.is(':visible'))
         ) {
@@ -675,7 +673,6 @@ Ox.Input = function(options, self) {
         that.is('.OxError') && that.removeClass('OxError');
         self.options.placeholder && setPlaceholder();
         if (self.bindKeyboard) {
-            //Ox.print('binding...')
             // fixme: different in webkit and firefox (?), see keyboard handler, need generic function
             Ox.UI.$document.keydown(keydown);
             //Ox.UI.$document.keypress(keypress);
@@ -698,10 +695,11 @@ Ox.Input = function(options, self) {
             newValue = oldValue.substr(0, oldCursor[0] - 1),
             hasDeletedSelectedEnd = (event.keyCode == 8 || event.keyCode == 46) &&
                 oldCursor[0] < oldCursor[1] && oldCursor[1] == oldValue.length;
+        Ox.print('CHANGE ON KEYPRESS', self.options.changeOnKeypress);
         if (
-            event.keyCode != 9 &&
+            event.keyCode != 9 // tab
-            (self.options.type == 'textarea' || event.keyCode != 13) &&
+            && (self.options.type == 'textarea' || event.keyCode != 13) // enter
-            event.keyCode != 27
+            && event.keyCode != 27 // escape
         ) { // fixme: can't 13 and 27 return false?
             setTimeout(function() { // wait for val to be set
                 var value = self.$input.val();
@@ -723,9 +721,9 @@ Ox.Input = function(options, self) {
             }, 0);
         }
         if (
-            (event.keyCode == 38 || event.keyCode == 40) &&
+            (event.keyCode == 38 || event.keyCode == 40) // up/down
-            self.options.autocompleteSelect &&
+            && self.options.autocompleteSelect
-            self.$autocompleteMenu.is(':visible')
+            && self.$autocompleteMenu.is(':visible')
         ) {
             //return false;
         }
@@ -843,6 +841,7 @@ Ox.Input = function(options, self) {
     }
 
     that.focusInput = function(select) {
+        // fixme: don't we have a convention that booleans are false by default?
         select = Ox.isUndefined(select) ? true : select;
         self.$input.focus();
         if (select) {
@@ -1407,8 +1406,8 @@ Ox.InputElement_ = function(options, self) {
 
     //Ox.print('InputElement self.options', self.options)
 
-    self.bindKeyboard = self.options.autocomplete || self.options.autocorrect ||
+    self.bindKeyboard = self.options.autocomplete || self.options.autocorrect
-                    self.options.autosuggest || self.options.autovalidate;
+        || self.options.autosuggest || self.options.autovalidate;
 
     if (self.options.autosuggest) {
         self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name?
@@ -1588,7 +1587,6 @@ Ox.InputElement_ = function(options, self) {
         }
         if (self.bindKeyboard) {
             Ox.UI.$document.unbind('keydown', keydown);
-            //Ox.UI.$document.unbind('keypress', keypress);
         }
     }
 

source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js

@@ -86,6 +86,9 @@ Ox.VideoPanelPlayer = function(options, self) {
             width: getPlayerWidth()
         })
         .bindEvent({
+            find: function(data) {
+                self.$timeline.options({find: data.find});
+            },
             position: setPosition,
             muted: function(data) {
                 that.triggerEvent('muted', data);

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -224,7 +224,15 @@ Ox.VideoPlayer = function(options, self) {
             });
         } else {
             that.bind({
-                click: that.gainFocus
+                click: function() {
+                    var focused = Ox.Focus.focused();
+                    if (
+                        !focused
+                        || !Ox.UI.elements[focused].is('.OxInput')
+                    ) {
+                        that.gainFocus();
+                    }
+                }
             });
         }
     }
@@ -1427,6 +1435,7 @@ Ox.VideoPlayer = function(options, self) {
     function goToNextResult(direction) {
         var found = false,
             position = 0;
+        if (self.results.length) {
             direction == -1 && self.results.reverse();
             Ox.forEach(self.results, function(v) {
                 if (direction == 1 ? v['in'] > self.options.position : v.out < self.options.position) {
@@ -1440,6 +1449,10 @@ Ox.VideoPlayer = function(options, self) {
                 position = self.results[direction == 1 ? 0 : self.results.length - 1]['in'];
             }
             setPosition(position + self.secondsPerFrame);
+            that.triggerEvent('position', {
+                position: self.options.position
+            });
+        }
     }
 
     function goToPoint() {
@@ -1956,10 +1969,8 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function submitFindInput(value, hasPressedEnter) {
-        //Ox.print('submitFindInput', value, hasPressedEnter)
         self.options.find = value;
         self.results = find(self.options.find);
-        //Ox.print('results', self.results.length);
         if (self.$find) {
             self.$results.html(self.results.length);
             self.$previousResultButton.options({
@@ -1980,6 +1991,7 @@ Ox.VideoPlayer = function(options, self) {
         if (hasPressedEnter) {
             self.results.length ? goToNextResult(1) : self.$findInput.focusInput();
         }
+        that.triggerEvent('find', {find: self.options.find});
     }
 
     function submitPositionInput() {