improvements to editor ui
This commit is contained in:
rolux
parent
d1477a057a
commit
007e525162
3 changed files with 187 additions and 102 deletions
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
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);
|
||||
//$('<div>').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 = $('<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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue