improvements to editor ui

source/Ox.UI/js/Form/Ox.Select.js

@@ -25,7 +25,9 @@ Ox.Select = function(options, self) {
 
     // fixme: selected item needs attribute "checked", not "selected" ... that's strange
     var self = self || {},
-        that = new Ox.Element({}, self) // fixme: do we use 'div', or {}, or '', by default?
+        that = new Ox.Element({
+                tooltip: options.tooltip || {}
+            }, self) // fixme: do we use 'div', or {}, or '', by default?
             .defaults({
                 id: '',
                 items: [],
@@ -145,6 +147,7 @@ Ox.Select = function(options, self) {
     function showMenu() {
         that.gainFocus();
         that.addClass('OxSelected');
+        self.options.tooltip && that.$tooltip.hide();
         self.$menu.showMenu();
     }
 

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

@@ -168,7 +168,7 @@ Ox.VideoEditor = function(options, self) {
     ['play', 'in', 'out'].forEach(function(type, i) {
         self.$player[i] = new Ox.VideoPlayer({
                 controlsBottom: type == 'play' ?
-                    ['play', 'playInToOut', 'volume', 'space', 'position'] :
+                    ['play', 'playInToOut', 'volume', 'size', 'space', 'position'] :
                     ['goto', 'set', 'space', 'position'],
                 duration: self.options.duration,
                 externalControls: true,
@@ -253,10 +253,6 @@ Ox.VideoEditor = function(options, self) {
     self.$annotations = new Ox.Element()
         .css({
             overflowY: 'auto'
-        })
-        .bindEvent({
-            resize: resizeAnnotations,
-            toggle: toggleAnnotations
         });
     self.$annotationPanel = [];
 
@@ -291,25 +287,10 @@ Ox.VideoEditor = function(options, self) {
             .appendTo(self.$annotations);
     });
 
-    self.$menubar = Ox.Bar({
+    self.$videobar = Ox.Bar({
         size: 16
     }).addClass('OxVideoPlayer');
 
-    self.$sizeButton = Ox.Button({
-            style: 'symbol',
-            title: [
-                {id: 'grow', title: 'grow', selected: self.options.size == 'small'},
-                {id: 'shrink', title: 'shrink', selected: self.options.size == 'large'}
-            ],
-            tooltip: ['Larger', 'Smaller'],
-            type: 'image'
-        })
-        .css({float: 'left'})
-        .bindEvent({
-            click: toggleSize
-        })
-        .appendTo(self.$menubar);
-
     self.resolutions = [];
     Ox.forEach(self.options.video, function(url, resolution) {
         Ox.print(url, resolution)
@@ -319,6 +300,121 @@ Ox.VideoEditor = function(options, self) {
     });
     Ox.print('::::::',self.resolutions)
 
+    self.$keyboardShortcuts = $('<div>');
+    [
+        {key: Ox.UI.symbols.space, action: 'Play/Pause'},
+        {key: 'P', action: 'Play In to Out'},
+        {key: '0', action: 'Mute/Unmute'},
+        {key: '-', action: 'Turn Volume Down'},
+        {key: '+', action: 'Turn Volume Up'},
+        {key: Ox.UI.symbols.arrow_left, action: 'Go One Frame Back'},
+        {key: Ox.UI.symbols.arrow_right, action: 'Go One Frame Forward'},
+        {key: Ox.UI.symbols.shift + Ox.UI.symbols.arrow_left, action: 'Go One Second Back'},
+        {key: Ox.UI.symbols.shift + Ox.UI.symbols.arrow_right, action: 'Go One Second Forward'},
+        {key: Ox.UI.symbols.arrow_up, action: 'Go One Line Up'},
+        {key: Ox.UI.symbols.arrow_down, action: 'Go One Line Down'},
+        {key: Ox.UI.symbols.shift + Ox.UI.symbols.arrow_up, action: 'Go to First Frame'},
+        {key: Ox.UI.symbols.shift + Ox.UI.symbols.arrow_down, action: 'Go to Last Frame'},
+        {key: 'I', action: 'Set In Point'},
+        {key: 'O', action: 'Set Out Point'},
+        {key: Ox.UI.symbols.shift + 'I', action: 'Go to Out Point'},
+        {key: Ox.UI.symbols.shift + 'O', action: 'Go to Out Point'},
+        {key: '[', action: 'Go to Previous Annotation'},
+        {key: ']', action: 'Go to Next Annotation'},
+        {key: '\\', action: 'Select Current Annotation'},
+        {key: '<', action: 'Go to Previous Cut'},
+        {key: '>', action: 'Go to Next Cut'},
+        {key: '/', action: 'Select Current Cuts'},
+        {key: 'F', action: 'Find'},
+        {key: Ox.UI.symbols.shift + 'G', action: 'Go to Previous Result'},
+        {key: 'G', action: 'Go to Next Result'},
+        {key: 'S', action: 'Select Current Annotation'},
+        {key: 'E', action: 'Edit Selected Annotation'},
+        {key: Ox.UI.symbols.return, action: 'Submit'},
+        {key: Ox.UI.symbols.escape, action: 'Cancel'},
+    ].forEach(function(shortcut) {
+        self.$keyboardShortcuts.append(
+            $('<div>').css({display: 'table-row'})
+                .append(
+                    $('<div>').css({
+                        display: 'table-cell',
+                        height: '16px',
+                        paddingRight: '16px',
+                        //fontWeight: 'bold',
+                        textAlign: 'right'
+                    })
+                    .html(shortcut.key)
+                )
+                .append(
+                    $('<div>').css({display: 'table-cell'})
+                        .html(shortcut.action)
+                )
+        );
+    })
+
+    self.$videoMenuButton = Ox.Select({
+            items: Ox.merge([
+                {id: 'toggleSize', title: 'Large Player', selected: self.options.playerSize == 'large', keyboard: 'shift +'},
+                {}
+            ], self.resolutions, [
+                {},
+                {id: 'largeTimeline', title: 'Hide Large Timeline'},
+                {id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline'},
+                {},
+                {id: 'linkSelection', title: 'Link to Selection...'},
+                {id: 'embed', title: 'Embed Selection...'},
+                {id: 'downloadSelection', title: 'Download Selection...'},
+                {},
+                {id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
+            
+            ]),
+            selectable: false,
+            title: $('<img>').attr({
+                src: Ox.UI.getImagePath('symbolSet.svg')
+            }),
+            tooltip: 'Actions and Settings',
+            type: 'image'
+        })
+        .css({float: 'left'})
+        .bindEvent({
+            click: function(data) {
+                var id = data.id;
+                if (id == 'toggleSize') {
+                    toggleSize();
+                } else if (id == 'keyboard') {
+                    var dialog = Ox.Dialog({
+                        buttons: [
+                            Ox.Button({id: 'close', title: 'Close'})
+                                .bindEvent({click: function() { dialog.close(); }})
+                        ],
+                        content: self.$keyboardShortcuts,
+                        height: 384,
+                        keys: {enter: 'close', escape: 'close'},
+                        title: 'Keyboard Shortcuts',
+                        width: 256
+                    }).open();
+                }
+            }
+        })
+        .appendTo(self.$videobar);
+    self.$videoMenuButton.find('input').attr({
+        src: Ox.UI.getImagePath('symbolSet.svg')
+    })
+
+    self.$selectButton = Ox.Button({
+            style: 'symbol',
+            title: 'select',
+            type: 'image'
+        })
+        .css({float: 'left'})
+        .bindEvent({
+            click: function() {
+                self.$menuButton.find('input').trigger('click')
+            }
+        })
+        //.appendTo(self.$videobar);
+
+
     self.$resolutionSelect = Ox.Select({
             items: [{id: '96', title: '96p'},{id: '240', title: '240p'}],//self.resolutions,
             width: 48
@@ -329,55 +425,10 @@ Ox.VideoEditor = function(options, self) {
 
             }
         })
-        .appendTo(self.$menubar);
+        //.appendTo(self.$videobar);
     
 
-    //$('<div>').css({float: 'left', width: '8px', height: '1px'}).appendTo(self.$menubar.$element);
+    //$('<div>').css({float: 'left', width: '8px', height: '1px'}).appendTo(self.$videobar.$element);
-
-    self.$linkButton = Ox.Button({
-            style: 'symbol',
-            title: 'arrowRight',
-            tooltip: 'Link...',
-            type: 'image'
-        })
-        .css({float: 'left'})
-        //.css({marginLeft: '16px'})
-        .bindEvent({
-            click: function() {
-                window.location.hash =
-                    Ox.formatDuration(self.options['in'], 3) + '-' +
-                    Ox.formatDuration(self.options.out, 3);
-            }
-        })
-        .appendTo(self.$menubar);
-
-    self.$embedButton = Ox.Button({
-            style: 'symbol',
-            title: 'embed',
-            tooltip: 'Embed...',
-            type: 'image'
-        })
-        .css({float: 'left'})
-        .bindEvent({
-            click: function() {
-
-            }
-        })
-        .appendTo(self.$menubar);
-
-    self.$downloadButton = Ox.Button({
-            style: 'symbol',
-            title: 'download',
-            tooltip: 'Download...',
-            type: 'image'
-        })
-        .css({float: 'left'})
-        .bindEvent({
-            click: function() {
-
-            }
-        })
-        .appendTo(self.$menubar);
 
     self.$goToPosterButton = Ox.Button({
             style: 'symbol',
@@ -386,13 +437,12 @@ Ox.VideoEditor = function(options, self) {
             type: 'image'
         })
         .css({float: 'left'})
-        .css({marginLeft: '16px'})
         .bindEvent({
             click: function() {
                 setPosition(self.options.posterFrame)
             }
         })
-        .appendTo(self.$menubar);
+        .appendTo(self.$videobar);
 
     self.$setPosterButton = Ox.Button({
             disabled: true,
@@ -409,7 +459,7 @@ Ox.VideoEditor = function(options, self) {
                 self.$unlockPosterButton.toggleTitle();
             }
         })
-        .appendTo(self.$menubar);
+        .appendTo(self.$videobar);
 
     self.$unlockPosterButton = Ox.Button({
             style: 'symbol',
@@ -426,21 +476,7 @@ Ox.VideoEditor = function(options, self) {
                 self.$setPosterButton.toggleDisabled();
             }
         })
-        .appendTo(self.$menubar);
+        .appendTo(self.$videobar);
-
-    self.$helpButton = Ox.Button({
-            style: 'symbol',
-            title: 'help',
-            tooltip: 'Help',
-            type: 'image'
-        })
-        .css({float: 'right'})
-        .bindEvent({
-            click: function() {
-
-            }
-        })
-        .appendTo(self.$menubar);
 
     self.$clearButton = Ox.Button({
             disabled: true,
@@ -456,7 +492,7 @@ Ox.VideoEditor = function(options, self) {
                 submitFindInput('');
             }
         })
-        .appendTo(self.$menubar);
+        .appendTo(self.$videobar);
 
     self.$findInput = Ox.Input({
             autocomplete: self.words,
@@ -478,7 +514,7 @@ Ox.VideoEditor = function(options, self) {
                 submitFindInput(data.value, true);
             }
         })
-        .appendTo(self.$menubar);
+        .appendTo(self.$videobar);
     self.$findInput.find('input').css({background: 'transparent'})
 
     self.$findButton = Ox.Button({
@@ -494,7 +530,7 @@ Ox.VideoEditor = function(options, self) {
 
             }
         })
-        //.appendTo(self.$menubar);
+        //.appendTo(self.$videobar);
 
     self.$nextButton = Ox.Button({
             disabled: true,
@@ -509,7 +545,7 @@ Ox.VideoEditor = function(options, self) {
                 setPosition(getNextPosition('result', 1))
             }
         })
-        .appendTo(self.$menubar);
+        .appendTo(self.$videobar);
 
     self.$previousButton = Ox.Button({
             disabled: true,
@@ -524,12 +560,43 @@ Ox.VideoEditor = function(options, self) {
                 setPosition(getNextPosition('result', -1))
             }
         })
-        .appendTo(self.$menubar);
+        .appendTo(self.$videobar);
 
     self.$results = $('<div>')
         .css({float: 'right', width: '36px', padding: '2px 4px 0 0', fontSize: '9px', textAlign: 'right', cursor: 'default', opacity: 0.25})
         .html('0')
-        .appendTo(self.$menubar.$element);
+        .appendTo(self.$videobar.$element);
+
+    self.$annotationsbar = Ox.Bar({
+        size: 16
+    }).addClass('OxVideoPlayer');
+
+    self.$annotationsMenuButton = Ox.Select({
+            items: [
+                {id: 'annotations', title: 'Show Annotations', disabled: true},
+                {id: 'showAnnotationsAtPosition', title: 'At Current Position', checked: true},
+                {id: 'showAnnotationsInSelection', title: 'In Current Selection'},
+                {id: 'showAllAnnotations', title: 'All'},
+                {},
+                {id: 'textSize', title: 'Font Size', disabled: true},
+                {id: 'smallText', title: 'Small', checked: true},
+                {id: 'mediumText', title: 'Medium'},
+                {id: 'largeText', title: 'Large'}
+            
+            ],
+            max: 2,
+            title: $('<img>').attr({
+                src: Ox.UI.getImagePath('symbolSet.svg')
+            }),
+            tooltip: 'Actions and Settings',
+            type: 'image'
+        })
+        .css({float: 'left'})
+        .appendTo(self.$annotationsbar);
+    self.$annotationsMenuButton.find('input').attr({
+        src: Ox.UI.getImagePath('symbolSet.svg')
+    })
+
 
     that.$element = Ox.SplitPanel({
         elements: [
@@ -537,7 +604,7 @@ Ox.VideoEditor = function(options, self) {
                 element: Ox.SplitPanel({
                     elements: [
                         {
-                            element: self.$menubar,
+                            element: self.$videobar,
                             size: 16
                         },
                         {
@@ -550,7 +617,22 @@ Ox.VideoEditor = function(options, self) {
             {
                 collapsed: !self.options.showAnnotations,
                 collapsible: true,
-                element: self.$annotations,
+                element: Ox.SplitPanel({
+                    elements: [
+                        {
+                            element: self.$annotationsbar,
+                            size: 16
+                        },
+                        {
+                            element: self.$annotations,
+                        }
+                    ],
+                    orientation: 'vertical'
+                })
+                .bindEvent({
+                    resize: resizeAnnotations,
+                    toggle: toggleAnnotations
+                }),
                 resizable: true,
                 resize: [192, 256, 320, 384],
                 size: self.options.annotationsSize

source/Ox.UI/themes/modern/css/modern.css

@@ -492,23 +492,23 @@ Video
 }
 
 .OxThemeModern .OxVideoPlayer .OxSelect {
-    border: 0;
+    border-color: transparent;
-    margin-left: 0px;
+    //margin-left: 0px;
-    margin-right: -18px;
+    //margin-right: -18px;
     background: transparent;
-    font-size: 9px;
+    //font-size: 9px;
 }
 .OxThemeModern .OxVideoPlayer .OxSelect.OxFocus {
     -moz-box-shadow: 0 0 0;
     -webkit-box-shadow: 0 0 0;
 }
 .OxThemeModern .OxVideoPlayer .OxSelect div {
-    padding: 2px 0 0 0;
+    //padding: 0 0 0 2px;
-    font-size: 9px;
+    //font-size: 9px;
 }
 
 .OxThemeModern .OxVideoPlayer .OxSelect input {
-    display: none;
+    //display: none;
 }