improvements to editor (make video size sticky, make up/down work correctly if scrollbar is visible)

build/js/ox.ui.js

@@ -10941,13 +10941,87 @@ requires
                 })
                 .options(options || {})
                 .addClass('OxEditor')
-                /*.css({
+                .mousedown(function() {
-					//height: self.options.height + 'px',
+                    that.gainFocus();
-					overflowY: 'scroll',
+                })
-					//width: self.options.width + 'px'
+                .bindEvent({
-				});*/
+                    key_shift_0: function() {
-
+                        movePositionBy(-self.options.position);
-        that.click(that.gainFocus)
+                    },
+                    key_alt_left: function() {
+                    },
+                    key_alt_right: function() {
+                    },
+                    key_alt_shift_left: function() {
+                    },
+                    key_alt_shift_right: function() {
+                    },
+                    key_backslash: function() {
+                        // select current cut
+                    },
+                    key_closebracket: function() {
+                        movePositionTo('cut', 1);
+                    },
+                    key_comma: function() {
+                        movePositionTo('subtitle', -1);
+                    },
+                    key_dot: function() {
+                        movePositionTo('subtitle', 1);
+                    },
+                    key_down: function() {
+                        movePositionBy(self.sizes.timeline[0].width);
+                    },
+                    key_i: function() {
+                        setPoint('in');
+                    },
+                    key_left: function() {
+                        movePositionBy(-1);
+                    },
+                    key_m: toggleMute,
+                    key_o: function() {
+                        setPoint('out');
+                    },
+                    key_openbracket: function() {
+                        movePositionTo('cut', -1);
+                    },
+                    key_p: playInToOut,
+                    key_right: function() {
+                        movePositionBy(1);
+                    },
+                    key_s: function() {
+                        // toggleSize
+                    },
+                    key_shift_comma: function() {
+                        movePositionTo('match', -1)
+                    },
+                    key_shift_dot: function() {
+                        movePositionTo('match', 1)
+                    },
+                    key_shift_down: function() {
+                        movePositionBy(self.options.duration);
+                    },
+                    key_shift_left: function() {
+                        movePositionBy(-0.04);
+                        //movePositionBy(-60);
+                    },
+                    key_shift_i: function() {
+                        goToPoint('in');
+                    },
+                    key_shift_o: function() {
+                        goToPoint('out');
+                    },
+                    key_shift_right: function() {
+                        movePositionBy(0.04);
+                        //movePositionBy(60);
+                    },
+                    key_shift_up: function() {
+                        movePositionBy(-self.options.duration);
+                    },
+                    key_space: togglePlay,
+                    key_up: function() {
+                        movePositionBy(-self.sizes.timeline[0].width);
+                    }
+                });
 
         $.extend(self, {
             $player: [],
@@ -10977,7 +11051,8 @@ requires
                     top: self.sizes.player[i].top + 'px'
                 })
                 .bindEvent(type == 'play' ? {
-                    playing: playing
+                    playing: changePlayer,
+                    togglesize: toggleSize
                 } : {
                     change: function() {
                         goToPoint(type);
@@ -10988,10 +11063,6 @@ requires
                 })
                 .appendTo(that);
         });
-        self.$player[0].bindEvent({
-            playing: changePlayer,
-            togglesize: togglePlayerSize
-        });
 
         self.$timeline[0] = new Ox.LargeTimeline({
                 cuts: self.options.cuts,
@@ -11032,72 +11103,6 @@ requires
             .bindEvent('change', changeTimelineSmall)
             .appendTo(that);
 
-        that.bindEvent({
-            key_alt_left: function() {
-                movePositionTo('cut', -1);
-            },
-            key_alt_right: function() {
-                movePositionTo('cut', 1);
-            },
-            key_alt_shift_left: function() {
-            },
-            key_alt_shift_right: function() {
-            },
-            key_closebracket: function() {
-                goToPoint('out');
-            },
-            key_comma: function() {
-                movePositionTo('subtitle', -1);
-            },
-            key_dot: function() {
-                movePositionTo('subtitle', 1);
-            },
-            key_down: function() {
-                movePositionBy(self.options.width - 2 * self.margin);
-            },
-            key_i: function() {
-                setPoint('in');
-            },
-            key_left: function() {
-                movePositionBy(-1);
-            },
-            key_m: toggleMute,
-            key_o: function() {
-                setPoint('out');
-            },
-            key_openbracket: function() {
-                goToPoint('in');
-            },
-            key_p: playInToOut,
-            key_right: function() {
-                movePositionBy(1);
-            },
-            key_shift_comma: function() {
-                movePositionTo('match', -1)
-            },
-            key_shift_dot: function() {
-                movePositionTo('match', 1)
-            },
-            key_shift_down: function() {
-                movePositionBy(self.options.duration);
-            },
-            key_shift_left: function() {
-                movePositionBy(-0.04);
-                //movePositionBy(-60);
-            },
-            key_shift_right: function() {
-                movePositionBy(0.04);
-                //movePositionBy(60);
-            },
-            key_shift_up: function() {
-                movePositionBy(-self.options.duration);
-            },
-            key_space: togglePlay,
-            key_up: function() {
-                movePositionBy(-(self.options.width - 2 * self.margin));
-            }
-        });
-
         // that.gainFocus();
 
         function changePlayer(event, data) {
@@ -11164,6 +11169,7 @@ requires
             //Ox.print('getSizes', scrollbarIsVisible)
             var scrollbarWidth = oxui.scrollbarSize,
 				contentWidth = self.options.width - (scrollbarIsVisible ? scrollbarWidth : 0),
+                height,
                 lines,
 				size = {
                     player: [],
@@ -11214,11 +11220,12 @@ requires
                 width: size.timeline[0].width
             }
             lines = Math.ceil(self.options.duration / size.timeline[1].width);
+            height = getHeight();
             //Ox.print('lines', lines, getHeight(), self.options.height, (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto')
             that.css({
-                overflowY: (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto'
+                overflowY: (scrollbarIsVisible && height <= self.options.height) ? 'scroll' : 'auto'
             });
-            return (!scrollbarIsVisible && getHeight() > self.options.height) ? getSizes(true) : size;
+            return (!scrollbarIsVisible && height > self.options.height) ? getSizes(true) : size;
             function getHeight() {
                 return size.player[0].height + self.controlsHeight +
                     size.timeline[0].height + lines * 16 +
@@ -11250,10 +11257,6 @@ requires
             });
         }
 
-        function playing(event, data) {
-            self.options.position = data.position;
-        }
-
         function playInToOut() {
             self.$player[0].playInToOut();
         }
@@ -11348,9 +11351,12 @@ requires
             self.$player[0].togglePlay();
         }
 
-        function togglePlayerSize() {
+        function toggleSize(event, data) {
-            self.options.videoSize = self.options.videoSize == 'large' ? 'small' : 'large';
+            self.options.videoSize = data.size
             setSizes();
+            that.triggerEvent('togglesize', {
+                size: self.options.videoSize
+            });
         }
 
         self.onChange = function(key, value) {
@@ -11376,6 +11382,7 @@ requires
                     points: [0, 0],
                     position: 0,
                     posterFrame: 0,
+                    size: 'small',
                     subtitles: [],
                     type: 'play',
                     url: '',
@@ -11511,9 +11518,12 @@ requires
                 .appendTo(self.$controls);
             self.$sizeButton = new Ox.Button({
                     id: self.options.id + 'Size',
-                    title: [
+                    title: self.options.size == 'small' ? [
                         {id: 'large', title: 'grow'},
                         {id: 'small', title: 'shrink'}
+                    ] : [
+                        {id: 'small', title: 'shrink'},
+                        {id: 'large', title: 'grow'}
                     ],
                     tooltip: ['Larger', 'Smaller'],
                     type: 'image'
@@ -11704,8 +11714,9 @@ requires
         }
 
         function toggleSize(event, data) {
+            self.options.size = data.id
             that.triggerEvent('togglesize', {
-                size: data.id
+                size: self.options.size
             });
         }