diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index f1f6ab7a..92a6140c 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/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(); } diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index f77d3f01..adf064a8 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/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 = $('
'); + [ + {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( + $('
').css({display: 'table-row'}) + .append( + $('
').css({ + display: 'table-cell', + height: '16px', + paddingRight: '16px', + //fontWeight: 'bold', + textAlign: 'right' + }) + .html(shortcut.key) + ) + .append( + $('
').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: $('').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); - //$('
').css({float: 'left', width: '8px', height: '1px'}).appendTo(self.$menubar.$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); + //$('
').css({float: 'left', width: '8px', height: '1px'}).appendTo(self.$videobar.$element); 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); - - self.$helpButton = Ox.Button({ - style: 'symbol', - title: 'help', - tooltip: 'Help', - type: 'image' - }) - .css({float: 'right'}) - .bindEvent({ - click: function() { - - } - }) - .appendTo(self.$menubar); + .appendTo(self.$videobar); 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 = $('
') .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: $('').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 diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 483c1ebf..2828c1f5 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -492,23 +492,23 @@ Video } .OxThemeModern .OxVideoPlayer .OxSelect { - border: 0; - margin-left: 0px; - margin-right: -18px; + border-color: transparent; + //margin-left: 0px; + //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; - font-size: 9px; + //padding: 0 0 0 2px; + //font-size: 9px; } .OxThemeModern .OxVideoPlayer .OxSelect input { - display: none; + //display: none; }