0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

improvements to editor ui

Browse source
This commit is contained in:
rolux 2011-05-20 16:11:42 +02:00
parent d1477a057a
commit 007e525162
3 changed files with 187 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -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();
}

270
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -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

14
source/Ox.UI/themes/modern/css/modern.css
View file

@ -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;
}