diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 09d2739e..26aaa587 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -1630,9 +1630,15 @@ Panels height: 16px; padding: 1px 1px 0 0; border-width: 0; - background: rgba(0, 0, 0, 0); border-radius: 0; + background: rgba(0, 0, 0, 0); } +.OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxFocus { + -moz-box-shadow: 0 0 0; + -o-box-shadow: 0 0 0; + -webkit-box-shadow: 0 0 0; +} + .OxCollapsePanel > .OxContent { position: relative; @@ -2046,11 +2052,24 @@ Video } .OxVideoPlayer input.OxInput { height: 16px; - padding: 0 3px 0 3px; + //padding: 0 4px 0 4px; border: 0; border-radius: 8px; } +.OxVideoPlayer .OxPositionInput > input.OxInput { + padding: 0 3px 0 3px; +} +.OxVideoPlayer .OxSelect { + width: 16px; + height: 16px; + border-width: 0; + border-radius: 0; + background: rgba(0, 0, 0, 0); +} +.OxVideoPlayer .OxSelect > .OxButton { + margin: 0; +} .OxVideoPlayer .OxCopyrightIcon { diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 553a3e5e..3314c9cb 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -31,6 +31,7 @@ Ox.VideoEditor = function(options, self) { out: 0, position: 0, posterFrame: 0, + posterFrameControls: false, showAnnotations: false, showLargeTimeline: true, subtitles: [], @@ -312,7 +313,7 @@ Ox.VideoEditor = function(options, self) { ); }); - self.$keyboardShortcuts = $('
'); + self.$keyboardShortcuts = $('
').css({margin: '16px'}); [ {key: Ox.UI.symbols.space, action: 'Play/Pause'}, {key: 'P', action: 'Play In to Out'}, @@ -373,20 +374,18 @@ Ox.VideoEditor = function(options, self) { self.resolutions, [ {}, - {id: 'largeTimeline', title: 'Hide Large Timeline'}, - {id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline'}, + {id: 'largeTimeline', title: 'Hide Large Timeline', disabled: true}, + {id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline', disabled: true}, {}, - {id: 'linkSelection', title: 'Link to Selection...'}, - {id: 'embed', title: 'Embed Selection...'}, - {id: 'downloadSelection', title: 'Download Selection...'}, + {id: 'downloadVideo', title: 'Download Video...', disabled: true}, + {id: 'downloadSelection', title: 'Download Selection...', disabled: true}, + {id: 'embedSelection', title: 'Embed Selection...', disabled: true}, {}, {id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'} ] ), selectable: false, - title: $('').attr({ - src: Ox.UI.getImageURL('symbolSet') - }), + title: 'set', tooltip: 'Actions and Settings', type: 'image' }) @@ -442,56 +441,57 @@ Ox.VideoEditor = function(options, self) { }); //.appendTo(self.$videobar); + if (self.options.posterFrameControls) { - //$('
').css({float: 'left', width: '8px', height: '1px'}).appendTo(self.$videobar.$element); + 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.$videobar); - 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.$videobar); + self.$setPosterButton = Ox.Button({ + disabled: true, + style: 'symbol', + title: 'setPoster', + tooltip: 'Set Poster Frame', + type: 'image' + }) + .css({float: 'left'}) + .bindEvent({ + click: function() { + self.$goToPosterButton.toggleDisabled(); + self.$setPosterButton.toggleDisabled(); + self.$unlockPosterButton.toggleTitle(); + } + }) + .appendTo(self.$videobar); - self.$setPosterButton = Ox.Button({ - disabled: true, - style: 'symbol', - title: 'setPoster', - tooltip: 'Set Poster Frame', - type: 'image' - }) - .css({float: 'left'}) - .bindEvent({ - click: function() { - self.$goToPosterButton.toggleDisabled(); - self.$setPosterButton.toggleDisabled(); - self.$unlockPosterButton.toggleTitle(); - } - }) - .appendTo(self.$videobar); + 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.toggleDisabled(); + } + }) + .appendTo(self.$videobar); - 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.toggleDisabled(); - } - }) - .appendTo(self.$videobar); + } self.$clearButton = Ox.Button({ disabled: self.options.find === '', @@ -601,9 +601,7 @@ Ox.VideoEditor = function(options, self) { ], max: 2, - title: $('').attr({ - src: Ox.UI.getImageURL('symbolSet') - }), + title: 'set', tooltip: 'Actions and Settings', type: 'image' }) diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index bfbca778..89c8d33c 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -1150,7 +1150,7 @@ Ox.VideoPlayer = function(options, self) { }; } else if (element == 'find') { css = { - width: Math.min(216, self.width) + 'px' + width: Math.min(216, self.width) + 'px' // 128 + 4 * 16 + 24 }; } else if (element == 'loadingIcon') { css = { @@ -1825,12 +1825,12 @@ Ox.VideoPlayer = function(options, self) { }); setSize(self.$spaceBottom, getCSS('spaceBottom'), animate); setSize(self.$find, getCSS('find'), animate, function() { - var width = Math.min(128, self.width - 88); + var width = Math.min(128, self.width - 88); // 4 * 16 + 24 self.$findInput.options({ width: width }); self.$findInput.children('input').css({ - width: (width - 6) + 'px', + width: (width - 12) + 'px', }); }); setSize(self.$volume, getCSS('volume'), animate, function() {