diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index dcb03b0e..686ca562 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -32,14 +32,8 @@ Ox.AnnotationPanel = function(options, self) { self.editing = false; if (self.options.showUsers) { - self.users = Ox.sort(Ox.unique(Ox.flatten( - self.options.layers.map(function(layer) { - return layer.items.map(function(item) { - return item.user; - }); - }) - ))); - self.enabledUsers = 'all'; + self.users = getUsers(); + self.enabledUsers = self.users; } self.$menubar = Ox.Bar({ @@ -47,74 +41,6 @@ Ox.AnnotationPanel = function(options, self) { }) .addClass('OxVideoPlayer'); - self.$optionsMenuButton = Ox.MenuButton({ - items: Ox.merge( - [ - {id: 'showannotations', title: 'Show Annotations', disabled: true}, - {group: 'range', min: 1, max: 1, items: [ - {id: 'all', title: 'All', checked: self.options.range == 'all'}, - {id: 'selection', title: 'In Current Selection', checked: self.options.range == 'selection'}, - {id: 'position', title: 'At Current Position', checked: self.options.range == 'position'} - ]}, - {}, - {id: 'sortannotations', title: 'Sort Annotations', disabled: true}, - {group: 'sort', min: 1, max: 1, items: [ - {id: 'position', title: 'By Position', checked: self.options.sort == 'position'}, - {id: 'duration', title: 'By Duration', checked: self.options.sort == 'duration'}, - {id: 'text', title: 'By Text', checked: self.options.sort == 'text'} - ]} - ], - self.options.showFonts ? [ - {}, - {id: 'fontsize', title: 'Font Size', disabled: true}, - {group: 'font', min: 1, max: 1, items: [ - {id: 'small', title: 'Small', checked: self.options.font == 'small'}, - {id: 'medium', title: 'Medium', checked: self.options.font == 'medium'}, - {id: 'large', title: 'Large', checked: self.options.font == 'large'} - ]} - ] : [], - self.options.showUsers ? [ - {}, - {id: 'users', title: 'Show Users', disabled: true}, - {group: 'users', min: 1, max: -1, items: self.users.map(function(user) { - return {id: user, title: user, checked: true}; - })} - ] : [] - ), - style: 'square', - title: 'set', - tooltip: 'Actions and Settings', - type: 'image' - }) - .css({float: 'left'}) - .bindEvent({ - change: function(data) { - var set = {}; - if (data.id == 'users') { - self.enabledUsers = data.checked.length == self.users.length - ? 'all' - : data.checked.map(function(checked) { - return checked.id; - }); - self.$folder.forEach(function($folder) { - $folder.options({users: self.enabledUsers}); - }); - } else { - set[data.id] = data.checked[0].id; - self.$folder.forEach(function($folder) { - $folder.options(set); - }); - that.triggerEvent('annotations' + data.id, set); - } - }, - hide: function() { - self.options.selected - ? getFolder(self.options.selected).gainFocus() - : that.triggerEvent('focus'); - } - }) - .appendTo(self.$menubar); - self.$folders = Ox.Element().css({overflowY: 'auto'}); self.$folder = []; @@ -206,6 +132,9 @@ Ox.AnnotationPanel = function(options, self) { }); }); + renderOptionsMenu(); + self.options.editable && renderEditMenu(); + that.setElement( Ox.SplitPanel({ elements: [ @@ -221,8 +150,6 @@ Ox.AnnotationPanel = function(options, self) { }) ); - self.options.editable && renderEditMenu(); - self.options.selected && scrollToSelected( getFolder(self.options.selected).options('type') ); @@ -257,6 +184,16 @@ Ox.AnnotationPanel = function(options, self) { return folder; } + function getUsers() { + return Ox.sort(Ox.unique(Ox.flatten( + self.options.layers.map(function(layer) { + return layer.items.map(function(item) { + return item.user; + }); + }) + ))); + } + function insert(data) { var id = data.id; Ox.InsertHTMLDialog(Ox.extend({ @@ -363,6 +300,77 @@ Ox.AnnotationPanel = function(options, self) { .appendTo(self.$menubar); } + function renderOptionsMenu() { + self.$optionsMenuButton && self.$optionsMenuButton.remove(); + self.$optionsMenuButton = Ox.MenuButton({ + items: Ox.merge( + [ + {id: 'showannotations', title: 'Show Annotations', disabled: true}, + {group: 'range', min: 1, max: 1, items: [ + {id: 'all', title: 'All', checked: self.options.range == 'all'}, + {id: 'selection', title: 'In Current Selection', checked: self.options.range == 'selection'}, + {id: 'position', title: 'At Current Position', checked: self.options.range == 'position'} + ]}, + {}, + {id: 'sortannotations', title: 'Sort Annotations', disabled: true}, + {group: 'sort', min: 1, max: 1, items: [ + {id: 'position', title: 'By Position', checked: self.options.sort == 'position'}, + {id: 'duration', title: 'By Duration', checked: self.options.sort == 'duration'}, + {id: 'text', title: 'By Text', checked: self.options.sort == 'text'} + ]} + ], + self.options.showFonts ? [ + {}, + {id: 'fontsize', title: 'Font Size', disabled: true}, + {group: 'font', min: 1, max: 1, items: [ + {id: 'small', title: 'Small', checked: self.options.font == 'small'}, + {id: 'medium', title: 'Medium', checked: self.options.font == 'medium'}, + {id: 'large', title: 'Large', checked: self.options.font == 'large'} + ]} + ] : [], + self.options.showUsers ? [ + {}, + {id: 'users', title: 'Show Users', disabled: true}, + {group: 'users', min: 1, max: -1, items: self.users.map(function(user) { + return {id: user, title: user, checked: + self.enabledUsers == 'all' || self.enabledUsers.indexOf(user) > -1 + }; + })} + ] : [] + ), + style: 'square', + title: 'set', + tooltip: 'Actions and Settings', + type: 'image' + }) + .css({float: 'left'}) + .bindEvent({ + change: function(data) { + var set = {}; + if (data.id == 'users') { + self.enabledUsers = data.checked.map(function(checked) { + return checked.id; + }); + self.$folder.forEach(function($folder) { + $folder.options({users: self.enabledUsers}); + }); + } else { + set[data.id] = data.checked[0].id; + self.$folder.forEach(function($folder) { + $folder.options(set); + }); + that.triggerEvent('annotations' + data.id, set); + } + }, + hide: function() { + self.options.selected + ? getFolder(self.options.selected).gainFocus() + : that.triggerEvent('focus'); + } + }) + .appendTo(self.$menubar); + } + function scrollToSelected(type) { var $item = that.find('.OxEditableElement.OxSelected'), itemHeight = $item.height() + (type == 'text' ? 8 : 0), @@ -451,6 +459,12 @@ Ox.AnnotationPanel = function(options, self) { // called from addannotation callback var i = Ox.getIndexById(self.options.layers, layer); self.$folder[i].addItem(item); + self.users = getUsers(); + if (self.enabledUsers != 'all' && self.enabledUsers.indexOf(item.user) == -1) { + self.enabledUsers.push(item.user); + self.$folder[i].options({users: self.enabledUsers}); + } + renderOptionsMenu(); renderEditMenu(); }; @@ -466,6 +480,13 @@ Ox.AnnotationPanel = function(options, self) { renderEditMenu(); }; + that.removeItem = function() { + self.options.selected = ''; + self.users = getUsers(); + renderOptionsMenu(); + renderEditMenu(); + }; + that.updateItem = function(id, item) { // called from editannotation callback // on the first update of a new annotation, the id will change diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 390b6bda..381026f8 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -192,7 +192,7 @@ Ox.VideoEditor = function(options, self) { self.results = []; self.words = getWords(); - Ox.print('VIDEO EDITOR OPTIONS', self.options) + //Ox.print('VIDEO EDITOR OPTIONS', self.options) self.$editor = Ox.Element() .addClass('OxVideoEditor') @@ -997,6 +997,7 @@ Ox.VideoEditor = function(options, self) { self.options.find && submitFindInput(self.options.find); self.editing = false; setTimelineState(); + self.$annotationPanel.removeItem(); that.triggerEvent('removeannotation', data); }