add poster frame controls to menu, fixes #340

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

@@ -406,7 +406,7 @@ Ox.VideoEditor = function(options, self) {
     });
 
     self.$videoMenuButton = Ox.MenuButton({
-            items: [
+            items: Ox.merge([
                 {id: 'toggleSize', title: 'Large Player', checked: self.options.playerSize == 'large', keyboard: 'shift +'},
                 {},
                 {group: 'resolution', min: 1, max: 1, items: self.resolutions},
@@ -417,9 +417,16 @@ Ox.VideoEditor = function(options, self) {
                 {id: 'downloadVideo', title: 'Download Video...', disabled: !self.options.enableDownload },
                 {id: 'downloadSelection', title: 'Download Selection...', disabled: !self.options.enableDownload},
                 {id: 'embedSelection', title: 'Embed Selection...'},
+            ],
+            self.options.posterFrameControls ? [
+                {},
+                {id: 'gotoPosterFrame', title: 'Goto Poster Frame'},
+                {id: 'setPosterFrame', title: 'Set Poster Frame'},
+            ] : [],
+            [
                 {},
                 {id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
-            ],
+            ]),
             style: 'square',
             title: 'set',
             tooltip: 'Actions and Settings',
@@ -453,6 +460,13 @@ Ox.VideoEditor = function(options, self) {
                         'in': self.options['in'],
                         out: self.options.out,
                     });
+                } else if (id == 'gotoPosterFrame') {
+                    setPosition(self.options.posterFrame);
+                } else if (id == 'setPosterFrame') {
+                    self.options.posterFrame = self.options.position;
+                    that.triggerEvent('posterframe', {
+                        position: self.options.posterFrame
+                    });
                 }
             },
             change: function(data) {
@@ -467,58 +481,6 @@ Ox.VideoEditor = function(options, self) {
         })
         .appendTo(self.$menubar);
 
-    if (self.options.posterFrameControls) {
-
-        self.$goToPosterButton = Ox.Button({
-                style: 'symbol',
-                title: 'goToPoster',
-                tooltip: 'Go to Poster Frame',
-                type: 'image'
-            })
-            .css({float: 'left'})
-            .bindEvent({
-                click: function() {
-                    setPosition(self.options.posterFrame);
-                }
-            })
-            .appendTo(self.$menubar);
-
-        self.$setPosterButton = Ox.Button({
-                disabled: true,
-                style: 'symbol',
-                title: 'setPoster',
-                tooltip: 'Set Poster Frame',
-                type: 'image'
-            })
-            .css({float: 'left'})
-            .bindEvent({
-                click: function() {
-                    self.$goToPosterButton.toggleOption('disabled');
-                    self.$setPosterButton.toggleOption('disabled');
-                    self.$unlockPosterButton.toggle();
-                }
-            })
-            .appendTo(self.$menubar);
-
-        self.$unlockPosterButton = Ox.Button({
-                style: 'symbol',
-                title: [
-                    {id: 'lock', title: 'lock'},
-                    {id: 'unlock', title: 'unlock', selected: true}
-                ],
-                tooltip: ['Lock Poster Frame', 'Unlock Poster Frame'],
-                type: 'image'
-            })
-            .css({float: 'left'})
-            .bindEvent({
-                click: function() {
-                    self.$setPosterButton.toggleOption('disabled');
-                }
-            })
-            .appendTo(self.$menubar);
-
-    }
-
     self.$clearButton = Ox.Button({
             disabled: self.options.find === '',
             style: 'symbol',