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,6 +9801,29 @@ requires
             });
         }
 
+        function setSizes() {
+            self.sizes = getSizes();
+            $.each(self.$player, function(i, v) {
+                v.options({
+                    height: self.sizes.player[i].height,
+                    width: self.sizes.player[i].width
+                })
+                .css({
+                    left: self.sizes.player[i].left + 'px',
+                    top: self.sizes.player[i].top + 'px'
+                });
+            });
+            $.each(self.$timeline, function(i, v) {
+                v.options({
+                    width: self.sizes.timeline[i].width
+                })
+                .css({
+                    left: self.sizes.timeline[i].left + 'px',
+                    top: self.sizes.timeline[i].top + 'px'
+                });
+            });
+        }
+
         function toggleMute() {
             self.$player[0].toggleMute();
         }
@@ -9806,28 +9832,14 @@ requires
             self.$player[0].togglePlay();
         }
 
+        function togglePlayerSize() {
+            self.options.videoSize = self.options.videoSize == 'large' ? 'small' : 'large';
+            setSizes();
+        }
+
         self.onChange = function(key, value) {
             if (key == 'width') {
-                self.sizes = getSizes();
+                setSizes();
-                $.each(self.$player, function(i, v) {
-                    v.options({
-                        height: self.sizes.player[i].height,
-                        width: self.sizes.player[i].width
-                    })
-                    .css({
-                        left: self.sizes.player[i].left + 'px',
-                        top: self.sizes.player[i].top + 'px'
-                    });
-                });
-                $.each(self.$timeline, function(i, v) {
-                    v.options({
-                        width: self.sizes.timeline[i].width
-                    })
-                    .css({
-                        left: self.sizes.timeline[i].left + 'px',
-                        top: self.sizes.timeline[i].top + 'px'
-                    });
-                });
             }
         };
 
@@ -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();