in video editor, keep menu and player size in sync (fixes #405)

source/Ox.UI/js/Menu/Ox.Menu.js

@@ -611,9 +611,7 @@ Ox.Menu = function(options, self) {
                     });
                 }
             } else {
-                item.options({
-                    checked: true
-                });
+                item.options({checked: true});
             }
         } else {
             that.submenus[ids.shift()].checkItem(ids.join('_'));
@@ -724,6 +722,13 @@ Ox.Menu = function(options, self) {
     @*/
     that.selectFirstItem = function() {
         selectNextItem();
+        return that;
+    };
+
+    that.setItemTitle = function(id, title) {
+        var item = getItem(id);
+        item && item.options({title: title});
+        return that;
     };
 
     /*@

source/Ox.UI/js/Menu/Ox.MenuButton.js

@@ -143,6 +143,11 @@ Ox.MenuButton = function(options, self) {
         self.superRemove();
     };
 
+    that.setItemTitle = function(id, title) {
+        self.$menu.setItemTitle(id, title);
+        return that;
+    };
+
     return that;
 
 };

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

@@ -140,9 +140,6 @@ Ox.VideoEditor = function(options, self) {
                 key_right: function() {
                     movePositionBy(0.04);
                 },
-                key_s: function() {
-                    // toggleSize
-                },
                 key_shift_down: function() {
                     movePositionBy(self.options.duration);
                 },
@@ -266,7 +263,9 @@ Ox.VideoEditor = function(options, self) {
                 resolution: function(data) {
                     that.triggerEvent('resolution', data);
                 },
-                size: toggleSize,
+                size: function() {
+                    toggleSize();
+                },
                 subtitles: function(data) {
                     that.triggerEvent('subtitles', data);
                 },
@@ -417,7 +416,10 @@ Ox.VideoEditor = function(options, self) {
 
     self.$videoMenuButton = Ox.MenuButton({
             items: Ox.merge([
-                {id: 'toggleSize', title: 'Large Player', checked: self.options.playerSize == 'large', keyboard: 'shift +'},
+                {group: 'size', min: 1, max: 1, items: [
+                    {id: 'small', title: 'Small Player', checked: self.options.videoSize == 'small'},
+                    {id: 'large', title: 'Large Player', checked: self.options.videoSize == 'large'}
+                ]},
                 {},
                 {group: 'resolution', min: 1, max: 1, items: self.resolutions},
                 {},
@@ -476,11 +478,11 @@ Ox.VideoEditor = function(options, self) {
             },
             change: function(data) {
                 var id = data.id;
-                if (id == 'toggleSize') {
-                    toggleSize();
-                } else if (data.id == 'resolution') {
+                if (id == 'resolution') {
                     self.options.resolution = parseInt(data.checked[0].id);
                     self.$player[0].options({resolution: self.options.resolution});
+                } else if (id == 'size') {
+                    toggleSize();
                 }
             }
         })
@@ -1208,6 +1210,10 @@ Ox.VideoEditor = function(options, self) {
     function toggleSize() {
         self.options.videoSize = self.options.videoSize == 'small' ? 'large' : 'small';
         setSizes();
+        self.$videoMenuButton.checkItem(self.options.videoSize);
+        self.$player[0].options({
+            sizeIsLarge: self.options.videoSize == 'large'
+        });
         that.triggerEvent('togglesize', {
             size: self.options.videoSize
         });

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

@@ -126,6 +126,7 @@ Ox.VideoPlayer = function(options, self) {
             showMarkers: false,
             showMilliseconds: 0,
             showProgress: false,
+            sizeIsLarge: false,
             subtitles: [],
             timeline: '',
             title: '',
@@ -2344,6 +2345,8 @@ Ox.VideoPlayer = function(options, self) {
             setResolution();
         } else if (key == 'scaleToFill') {
             toggleScale();
+        } else if (key == 'sizeIsLarge') {
+            self.$sizeButton.toggle();
         }
     };