From 76466e7eeb689b7a7bac3d9fe36b019da9752525 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sat, 4 Feb 2012 11:44:19 +0000 Subject: [PATCH] fix video editor bugs --- source/Ox.UI/js/Core/Ox.Element.js | 2 +- source/Ox.UI/js/Form/Ox.ArrayEditable.js | 6 ++- source/Ox.UI/js/List/Ox.IconItem.js | 2 +- source/Ox.UI/js/Video/Ox.AnnotationFolder.js | 10 ++-- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 35 +++++++------ source/Ox.UI/js/Video/Ox.VideoEditor.js | 55 +++++++++++--------- 6 files changed, 63 insertions(+), 47 deletions(-) diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js index 6969656a..c0b33c28 100644 --- a/source/Ox.UI/js/Core/Ox.Element.js +++ b/source/Ox.UI/js/Core/Ox.Element.js @@ -440,7 +440,7 @@ Ox.Element = function(options, self) { 'mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend', 'draganddropstart', 'draganddrop', 'draganddropenter', 'draganddropleave', 'draganddropend', - 'playing', 'position', 'progress' + 'playing', 'position', 'progress', 'request' ].indexOf(event) == -1) { if (!/^pandora_/.test(event)) { Ox.Log('EVENT', that.id, self.options.id, 'trigger', event, data); diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index 1014138f..9078f539 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -143,7 +143,9 @@ Ox.ArrayEditable = function(options, self) { cancel: function(data) { self.editing = false; that.gainFocus(); - that.triggerEvent('blur', data); + data.value === '' + ? submitItem(i, '') + : that.triggerEvent('blur', data); }, change: function(data) { that.triggerEvent('change', { @@ -190,7 +192,7 @@ Ox.ArrayEditable = function(options, self) { self.editing = false; that.blurItem(); } - Ox.print('SELECT ITEM', self.options.selected, self.selected); + Ox.print('AE SELECT ITEM', self.options.selected, self.selected); that.find('.OxSelected').removeClass('OxSelected'); self.selected > -1 && self.$items[self.selected].addClass('OxSelected'); triggerSelectEvent(); diff --git a/source/Ox.UI/js/List/Ox.IconItem.js b/source/Ox.UI/js/List/Ox.IconItem.js index 2b183da5..e2824fb0 100644 --- a/source/Ox.UI/js/List/Ox.IconItem.js +++ b/source/Ox.UI/js/List/Ox.IconItem.js @@ -44,7 +44,7 @@ Ox.IconItem = function(options, self) { }) .options(options || {}); - Ox.print('ICON ITEM FIND', self.options.find) + //Ox.print('ICON ITEM FIND', self.options.find) Ox.extend(self, { fontSize: self.options.itemWidth == 64 ? 6 : 9, diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js index 449b67ba..3bb462e0 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js @@ -285,7 +285,9 @@ Ox.AnnotationFolder = function(options, self) { } function crossesPoint() { - var sort = [self.position, self.options.position].sort(), + var sort = [self.position, self.options.position].sort(function(a, b) { + return a - b + }), positionA = sort[0], positionB = sort[1]; return self.points.some(function(point) { @@ -389,9 +391,9 @@ Ox.AnnotationFolder = function(options, self) { function getSort() { return ({ - duration: ['-duration', '+in', '+value'], - position: ['+in', '-duration', '+value'], - text: ['+value', '+in', '-duration'] + duration: ['+duration', '+in', '+value'], + position: ['+in', '+duration', '+value'], + text: ['+value', '+in', '+duration'] })[self.options.sort]; } diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index d52cc59b..0673a147 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -261,22 +261,27 @@ Ox.AnnotationPanel = function(options, self) { } function scrollToSelected(type) { - var $item = that.find('.OxEditableElement.OxSelected'), - itemHeight = $item.height() + (type == 'text' ? 8 : 0), - itemTop = $item.offset().top, - itemBottom = itemTop + itemHeight, - height = self.$folders.height(), - scrollTop = self.$folders.scrollTop(), - top = self.$folders.offset().top; - if (itemTop < top || itemBottom > top + height) { - if (itemTop < top) { - scrollTop += itemTop - top; - } else { - scrollTop += itemBottom - top - height; + try { + Ox.print('scrollToSelected $item', that.find('.OxEditableElement.OxSelected')) + var $item = that.find('.OxEditableElement.OxSelected'), + itemHeight = $item.height() + (type == 'text' ? 8 : 0), + itemTop = $item.offset().top, + itemBottom = itemTop + itemHeight, + height = self.$folders.height(), + scrollTop = self.$folders.scrollTop(), + top = self.$folders.offset().top; + if (itemTop < top || itemBottom > top + height) { + if (itemTop < top) { + scrollTop += itemTop - top; + } else { + scrollTop += itemBottom - top - height; + } + self.$folders.animate({ + scrollTop: scrollTop + 'px' + }, 0); } - self.$folders.animate({ - scrollTop: scrollTop + 'px' - }, 0); + } catch(e) { + Ox.print('THIS SHOULD NOT HAPPEN'); } } diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 27e5b61a..55a41b1f 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -127,7 +127,7 @@ Ox.VideoEditor = function(options, self) { self.options.videoSize == 'large' && toggleSize(); }, key_n: function() { - selectAnnotation(getNextAnnotation('annotation', 1)); + selectAnnotation(getNextAnnotation('annotation', 1), true); }, key_o: function() { setPoint('out', self.options.position); @@ -183,7 +183,10 @@ Ox.VideoEditor = function(options, self) { Ox.loop(1, self.options.layers.length + 1, function(i) { that.bindEvent('key_' + i, function() { - addAnnotation(self.options.layers[i - 1].id); + var layer = self.options.layers[i - 1]; + layer.editable + ? addAnnotation(layer.id) + : that.triggerEvent('info', {layer: layer.id}); }); }); @@ -342,7 +345,7 @@ Ox.VideoEditor = function(options, self) { setPosition(data.position); }, select: function() { - selectAnnotation(); + selectAnnotation(void 0, true); } }) .appendTo(self.$editor); @@ -634,7 +637,9 @@ Ox.VideoEditor = function(options, self) { resizemap: function(data) { that.triggerEvent('resizemap', data); }, - select: selectAnnotation, + select: function(data) { + selectAnnotation(data, true); + }, submit: submitAnnotation, toggle: toggleAnnotations, togglecalendar: function(data) { @@ -727,17 +732,11 @@ Ox.VideoEditor = function(options, self) { var results = []; if (query.length) { query = query.toLowerCase(); - results = Ox.flatten(Ox.merge(self.options.layers.map(function(layer) { - return Ox.map(layer.items, function(item) { - return Ox.decodeHTML(Ox.stripTags( - item.value.toLowerCase() - )).indexOf(query) > -1 ? { - id: item.id, - 'in': item['in'], - out: item.out - } : null; - }); - }))).sort(sortAnnotations); + results = self.annotations.filter(function(annotation) { + return Ox.decodeHTML(Ox.stripTags( + annotation.value.toLowerCase() + )).indexOf(query) > -1; + }); } return results; } @@ -923,11 +922,9 @@ Ox.VideoEditor = function(options, self) { function getWords() { var words = []; Ox.forEach(Ox.count(Ox.words( - Ox.merge(self.options.layers.map(function(layer) { - return layer.items.map(function(item) { - return Ox.decodeHTML(Ox.stripTags(item.value.toLowerCase())); - }); - })).join(' ') + self.annotations.map(function(annotation) { + return Ox.decodeHTML(Ox.stripTags(annotation.value.toLowerCase())); + }).join(' ') )), function(count, value) { words.push({count: count, value: value}); }) @@ -960,6 +957,7 @@ Ox.VideoEditor = function(options, self) { layer.items.splice(index, 1); self.annotations = getAnnotations(); self.positions = getPositions(); + self.options.find && submitFindInput(self.options.find); self.editing = false; self.options.selected = ''; setTimelineState(); @@ -976,7 +974,7 @@ Ox.VideoEditor = function(options, self) { that.triggerEvent('annotationssize', {size: data.size}); } - function selectAnnotation(data) { + function selectAnnotation(data, stayAtPosition) { if (Ox.isUndefined(data)) { // doubleclick on small timeline data = getAnnotation(); @@ -985,12 +983,20 @@ Ox.VideoEditor = function(options, self) { } // FIXME // self.editing = false; - self.options.selected = data.id; - if (self.options.selected) { - self.options.annotationsRange != 'position' && setPosition(data['in']); + if (data.id) { + if (!stayAtPosition + || self.options.annotationsRange != 'position' + || self.options.position < data['in'] + || self.options.position > data.out + ) { + setPosition(data['in']); + // if annotationsRange is 'position', + // this may cause a deselect + } setPoint('in', data['in'], true); setPoint('out', data.out, true); } + self.options.selected = data.id; self.$annotationPanel.options({selected: self.options.selected}); setTimelineState(); that.triggerEvent('select', {id: self.options.selected}); @@ -1122,6 +1128,7 @@ Ox.VideoEditor = function(options, self) { self.annotations = getAnnotations(); self.positions = getPositions(); updateWords('add'); + self.options.find && submitFindInput(self.options.find); self.editing = false; setTimelineState(); if (