fixing regressions with find and groups

build/js/ox.ui.js

@@ -6600,7 +6600,7 @@ requires
                     listHeight: Math.ceil(result.data.items * (self.options.itemHeight + self.itemMargin) / self.rowLength), // fixme: should be listSize
                     listLength: result.data.items,
                     pages: Math.ceil(result.data.items / self.pageLength),
-                    pageWidth: self.options.orientation == 'vertical' ? 0 :
+                    pageWidth: self.options.orientation == 'vertical' ? self.options.itemWidth :
                             (self.options.itemWidth + self.itemMargin) * self.rowLength,
                     pageHeight: self.options.orientation == 'horizontal' ? 0 :
                             Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength)
@@ -9071,7 +9071,7 @@ requires
 
         function mousemove(e) {
             var position = self.options.position + (e.clientX - that.offset().left - self.center) / self.fps;
-            if (position >= 0) {
+            if (position >= 0 && position <= self.options.duration) {
                 self.$tooltip
                     .options({
                         title: Ox.formatDuration(position, 3)
@@ -9491,7 +9491,10 @@ requires
                 })
             }
         });
-        self.$player[0].bindEvent('change', changePlayer);
+        self.$player[0].bindEvent({
+            change: changePlayer,
+            togglesize: togglePlayerSize
+        });
 
         self.$timeline[0] = new Ox.LargeTimeline({
                 cuts: self.options.cuts,
@@ -9669,8 +9672,8 @@ requires
             if (self.options.videoSize == 'small') {
                 width = 0;
                 widths = Ox.divideInt(self.options.width - 4 * self.margin, 3);
-                Ox.range(3).forEach(function(i) {
+                [1, 0, 2].forEach(function(v, i) {
-                    size.player[i] = {
+                    size.player[v] = {
                         left: (i + 0.5) * self.margin + width,
                         top: self.margin / 2,
                         width: widths[i],
@@ -9798,16 +9801,7 @@ requires
             });
         }
 
-        function toggleMute() {
+        function setSizes() {
-            self.$player[0].toggleMute();
-        }
-
-        function togglePlay() {
-            self.$player[0].togglePlay();
-        }
-
-        self.onChange = function(key, value) {
-            if (key == 'width') {
             self.sizes = getSizes();
             $.each(self.$player, function(i, v) {
                 v.options({
@@ -9829,6 +9823,24 @@ requires
                 });
             });
         }
+
+        function toggleMute() {
+            self.$player[0].toggleMute();
+        }
+
+        function togglePlay() {
+            self.$player[0].togglePlay();
+        }
+
+        function togglePlayerSize() {
+            self.options.videoSize = self.options.videoSize == 'large' ? 'small' : 'large';
+            setSizes();
+        }
+
+        self.onChange = function(key, value) {
+            if (key == 'width') {
+                setSizes();
+            }
         };
 
         return that;
@@ -9973,6 +9985,17 @@ requires
                 })
                 .bindEvent('click', toggleMute)
                 .appendTo(self.$controls);
+            self.$sizeButton = new Ox.Button({
+                    id: self.options.id + 'Size',
+                    title: [
+                        {id: 'large', title: 'add'},
+                        {id: 'small', title: 'remove'}
+                    ],
+                    tooltip: ['Larger', 'Smaller'],
+                    type: 'image'
+                })
+                .bindEvent('click', toggleSize)
+                .appendTo(self.$controls);
         } else {
             self.$goToPointButton = new Ox.Button({
                     id: self.options.id + 'GoTo' + Ox.toTitleCase(self.options.type),
@@ -10140,6 +10163,12 @@ requires
             self.video.paused ? that.play() : that.pause();
         }
 
+        function toggleSize(event, data) {
+            that.triggerEvent('togglesize', {
+                size: data.id
+            });
+        }
+
         self.onChange = function(key, value) {
             if (key == 'height') {
                 setHeight();