From f61e39a7884789beb05dfb75bf7a1a5b4581c3a5 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Fri, 13 Jan 2012 00:34:32 +0530 Subject: [PATCH] update video editor --- source/Ox.UI/js/Form/Ox.ArrayEditable.js | 48 ++++++++++----- source/Ox.UI/js/Form/Ox.Editable.js | 1 + source/Ox.UI/js/Map/Ox.Map.js | 6 +- source/Ox.UI/js/Video/Ox.AnnotationFolder.js | 58 +++++++++++++++---- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 25 +++----- .../Ox.UI/js/Video/Ox.SmallVideoTimeline.js | 1 + source/Ox.UI/js/Video/Ox.VideoEditor.js | 35 +++-------- source/Ox.UI/js/Video/Ox.VideoPanel.js | 44 +++++++++++--- source/Ox.UI/js/Video/Ox.VideoPlayer.js | 3 +- 9 files changed, 141 insertions(+), 80 deletions(-) diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index a9adcc11..844c2946 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -72,11 +72,13 @@ Ox.ArrayEditable = function(options, self) { } function deleteItem() { - self.options.items.splice(self.selected, 1); - renderItems(); - that.triggerEvent('delete', { - id: self.options.selected - }); + if (self.options.editable) { + self.options.items.splice(self.selected, 1); + renderItems(); + that.triggerEvent('delete', { + id: self.options.selected + }); + } } function doubleclick(e) { @@ -84,7 +86,7 @@ Ox.ArrayEditable = function(options, self) { $parent = $target.parent(); if ($parent.is('.OxEditableElement')) { that.editItem(); - } else if(!$target.is('.OxInput')) { + } else if (!$target.is('.OxInput')) { that.triggerEvent('add'); } } @@ -106,7 +108,7 @@ Ox.ArrayEditable = function(options, self) { .html(', ') .appendTo(that); self.$items[i] = Ox.Editable({ - editable: item.editable, + editable: self.options.editable && item.editable, format: function(value) { return value || ' ' }, @@ -155,6 +157,10 @@ Ox.ArrayEditable = function(options, self) { self.selected = idOrPosition; self.options.selected = getSelectedId(); } + if (self.options.selected == '' && self.editing) { + self.editing = false; + that.blurItem(); + } Ox.print('SELECT ITEM', self.options.selected, self.selected); that.find('.OxSelected').removeClass('OxSelected'); self.selected > -1 && self.$items[self.selected].addClass('OxSelected'); @@ -222,12 +228,19 @@ Ox.ArrayEditable = function(options, self) { selectItem(value); } else if (key == 'sort') { renderItems(); + } else if (key == 'width') { + that.css({width: value - 8 + 'px'}); // 2 x 4 px padding + self.options.type == 'textarea' && self.$items.forEach(function($item) { + $item.options({width: value}) + }); } } that.addItem = function(position, item) { - self.options.items.splice(position, 0, item); - renderItems(); + if (self.options.editable) { + self.options.items.splice(position, 0, item); + renderItems(); + } //that.triggerEvent('add'); /* self.values = Ox.filter(values, function(value) { @@ -240,15 +253,20 @@ Ox.ArrayEditable = function(options, self) { }; that.blurItem = function() { - self.options.selected && self.$items[self.selected].options({ - editing: false - }); + if (self.options.selected) { + self.$items[self.selected].options({editing: false}); + } else { + self.$items.forEach(function($item) { + $item.options({editing: false}); + }); + } }; that.editItem = function() { - if (self.options.selected) { + if (self.options.editable && self.options.selected) { Ox.forEach(self.$items, function($item) { if ($item.data('position') == self.selected) { + Ox.print('DBLCLICK') $item.triggerEvent('doubleclick'); return false; } @@ -261,7 +279,9 @@ Ox.ArrayEditable = function(options, self) { }; that.removeItem = function(position) { - + if (self.options.editable) { + + } }; return that; diff --git a/source/Ox.UI/js/Form/Ox.Editable.js b/source/Ox.UI/js/Form/Ox.Editable.js index 6f1fef77..1f100eb9 100644 --- a/source/Ox.UI/js/Form/Ox.Editable.js +++ b/source/Ox.UI/js/Form/Ox.Editable.js @@ -72,6 +72,7 @@ Ox.Editable = function(options, self) { } function cancel() { + self.options.editing = false; self.options.value = self.originalValue; self.$input.value(formatInputValue()).hide(); self.$test.html(formatTestValue()); diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index c07c3843..343bc9a0 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -1388,8 +1388,10 @@ Ox.Map = function(options, self) { if (key == 'height' || key == 'width') { that.resizeMap(); } else if (key == 'places') { - //fixme: should zoom to new bounds - zoom(0); + Ox.print('MAP SET OPTIONS PLACES', value); + getMapBounds(function(mapBounds) { + self.map.fitBounds(mapBounds); + }); } else if (key == 'selected') { selectPlace(value); } else if (key == 'type') { diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js index 4ff22721..56a32076 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js @@ -71,7 +71,22 @@ Ox.AnnotationFolder = function(options, self) { if (self.options.type == 'event') { self.$annotations = Ox.Element(); } else if (self.options.type == 'place') { - self.$annotations = Ox.Element(); + self.$annotations = Ox.Element() + .css({ + width: self.options.width + 'px', + height: '256px' + }); + Ox.print('PLACES::', self.places) + self.$map = Ox.Map({ + places: getPlaces() + // showLabels: true + }) + .bindEvent({ + selectplace: function(data) { + selectAnnotation({id: data.annotationId}); + } + }) + .appendTo(self.$annotations); } else if (['string', 'text'].indexOf(self.options.type) > -1) { self.$annotations = Ox.ArrayEditable({ editable: self.options.editable, @@ -130,6 +145,18 @@ Ox.AnnotationFolder = function(options, self) { }); } + function getPlaces() { + var places = []; + getAnnotations().forEach(function(item) { + if (item.place && Ox.getIndexById(places, item.place.id) == -1) { + places.push(Ox.extend({ + annotationId: item.id + }, item.place)); + } + }); + return places; + } + function getSort() { return ({ duration: ['-duration', '+in', '+value'], @@ -171,27 +198,36 @@ Ox.AnnotationFolder = function(options, self) { } if (key == 'in') { //fixme: array editable should support item updates while editing - self.editing || self.options.range == 'selection' && self.$annotations.options({ - items: getAnnotations() - }); + if (self.editing || self.options.range == 'selection') { + self.options.type == 'place' ? self.$map.options({places: getPlaces()}) + : self.$annotations.options({items: getAnnotations()}); + } } else if (key == 'out') { - self.editing || self.options.range == 'selection' && self.$annotations.options({ - items: getAnnotations() - }); + if (self.editing || self.options.range == 'selection') { + self.options.type == 'place' ? self.$map.options({places: getPlaces()}) + : self.$annotations.options({items: getAnnotations()}); + } } else if (key == 'position') { - self.editing || self.options.range == 'position' && self.$annotations.options({ - items: getAnnotations() - }); + if (self.editing || self.options.range == 'position') { + self.options.type == 'place' ? self.$map.options({places: getPlaces()}) + : self.$annotations.options({items: getAnnotations()}); + } } else if (key == 'range') { self.$annotations.options({items: getAnnotations()}); } else if (key == 'selected') { + if (value === '') { + self.editing = false; + } self.$annotations.options({selected: value}); } else if (key == 'sort') { self.sort = getSort(); self.$annotations.options({sort: self.sort}); } else if (key == 'users') { - Ox.print('USERS ->', value) self.$annotations.options({items: getAnnotations()}); + } else if (key == 'width') { + self.$annotations.options({ + width: self.options.type == 'text' ? self.options.width + 8 : self.options.width + }); } }; diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index 74cf3b93..d69657b0 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -98,6 +98,8 @@ Ox.AnnotationPanel = function(options, self) { }); that.triggerEvent('annotations' + data.id, set); } + // FIXME: this does not work + self.options.selected && getFolder(self.options.selected).gainFocus(); } }) .appendTo(self.$menubar); @@ -175,7 +177,7 @@ Ox.AnnotationPanel = function(options, self) { that.triggerEvent('submit', data); }, toggle: function(data) { - that.triggerEvent('toggle', Ox.extend({layer: layer.id}, data)); + that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data)); } }) .appendTo(self.$folders); @@ -194,11 +196,6 @@ Ox.AnnotationPanel = function(options, self) { ], orientation: 'vertical' }) - .bindEvent({ - resize: resizeAnnotations, - resizeend: resizeendAnnotations, - toggle: toggleAnnotations - }) ); function getFolder(annotationId) { @@ -242,18 +239,6 @@ Ox.AnnotationPanel = function(options, self) { that.triggerEvent('select', data); } - function resizeAnnotations() { - - } - - function resizeendAnnotations() { - - } - - function toggleAnnotations() { - - } - function updateEditMenu() { var action = self.options.selected ? 'enableItem' : 'disableItem'; self.$editMenuButton[action]('edit'); @@ -274,6 +259,10 @@ Ox.AnnotationPanel = function(options, self) { $folder.options({selected: ''}); }) } + } else if (key == 'width') { + self.$folder.forEach(function($folder) { + $folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE}); + }); } }; diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js index b8f31449..3e345cd2 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js @@ -11,6 +11,7 @@ Ox.SmallVideoTimeline = function(options, self) { .defaults({ // _offset is a hack for cases where all these position: absolute // elements have to go into a float: left + // FIXME: possible unused and unneeded _offset: 0, disabled: false, duration: 0, diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index d58a21b8..7ff0f605 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -630,12 +630,12 @@ Ox.VideoEditor = function(options, self) { layer: data.layer }); }, - select: function(data) { - !data.id && that.gainFocus(); - selectAnnotation(data); - }, + resize: resizeAnnotations, + resizeend: resizeendAnnotations, + select: selectAnnotation, submit: submitAnnotation, - toggle: function(data) { + toggle: toggleAnnotations, + togglelayer: function(data) { that.triggerEvent('togglelayer', { collapsed: data.collapsed, layer: data.layer @@ -904,30 +904,11 @@ Ox.VideoEditor = function(options, self) { function resizeAnnotations(data) { self.options.annotationsSize = data.size; setSizes(); + self.$annotationPanel.options({width: data.size}); } function resizeendAnnotations(data) { - that.triggerEvent('annotationsSize', {size: data.size}); - } - - function resizeEditor(data) { - var width = data.size - 2 * margin + 100; - resizeVideoPlayers(width); - $timelineLarge.options({width: width}); - $timelineSmall.options({width: width}); - } - - function resizePlayers() { - self.$player.forEach(function(v, i) { - v.options({ - width: size[i].width, - height: size[i].height - }) - .css({ - left: size[i].left + 'px', - top: size[i].top + 'px', - }); - }); + that.triggerEvent('annotationssize', {size: data.size}); } function selectAnnotation(data) { @@ -935,6 +916,8 @@ Ox.VideoEditor = function(options, self) { if (Ox.isUndefined(data)) { // doubleclick on small timeline data = getAnnotation(); + } else if (!data.id) { + that.gainFocus(); } self.editing = false; self.options.selected = data.id; diff --git a/source/Ox.UI/js/Video/Ox.VideoPanel.js b/source/Ox.UI/js/Video/Ox.VideoPanel.js index 971cac2b..a146ee16 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanel.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanel.js @@ -39,7 +39,9 @@ Ox.VideoPanel = function(options, self) { resolution: 0, scaleToFill: false, showAnnotations: false, + showLayers: {}, showTimeline: true, + showUsers: false, subtitles: [], tooltips: false, video: '', @@ -106,9 +108,11 @@ Ox.VideoPanel = function(options, self) { paused: function(data) { that.triggerEvent('paused', data); }, - playing: setPosition, + playing: function(data) { + setPosition(data.position, true); + }, position: function(data) { - setPosition(data); + setPosition(data.position); that.triggerEvent('position', data); }, resolution: function(data) { @@ -167,15 +171,20 @@ Ox.VideoPanel = function(options, self) { self.$annotationPanel = Ox.AnnotationPanel({ font: self.options.annotationsFont, + 'in': self.options['in'], layers: self.options.layers, + out: self.options.out, + position: self.options.position, range: self.options.annotationsRange, showFonts: true, showLayers: self.options.showLayers, + showUsers: self.options.showUsers, sort: self.options.annotationsSort }) .bindEvent({ resize: resizeAnnotations, resizeend: resizeendAnnotations, + select: selectAnnotation, toggle: toggleAnnotations }); @@ -200,6 +209,7 @@ Ox.VideoPanel = function(options, self) { function changeTimeline(data) { self.options.position = data.position; self.$video.options({position: self.options.position}); + self.$annotationPanel.options({position: self.options.position}); that.triggerEvent('position', {position: self.options.position}); } @@ -256,12 +266,27 @@ Ox.VideoPanel = function(options, self) { }); } - function setPosition(data) { - self.options.position = data.position; - //self.$video.position(self.options.position); - self.$timeline.options({ - position: self.options.position - }); + function selectAnnotation(data) { + self.options.selected = data.id; + if (self.options.selected) { + setPosition(data['in']); + setPoint('in', data['in']); + setPoint('out', data.out); + } + } + + function setPoint(point, position) { + self.options[point] = position; + self.$video.options(point, position); + self.$timeline.options(point, position); + self.$annotationPanel.options(point, position); + } + + function setPosition(position, playing) { + self.options.position = position; + !playing && self.$video.options({position: self.options.position}); + self.$timeline.options({position: self.options.position}); + self.$annotationPanel.options({position: self.options.position}); } function toggleAnnotations(data) { @@ -300,6 +325,9 @@ Ox.VideoPanel = function(options, self) { self.$timeline.options({ position: value }); + self.$annotationPanel.options({ + position: value + }); } else if (key == 'showAnnotations') { that.$element.toggle(1); } else if (key == 'showTimeline') { diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 4f8c39c2..be51ce93 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -1367,7 +1367,7 @@ Ox.VideoPlayer = function(options, self) { function getTimeline() { var $timeline = Ox.SmallVideoTimeline({ - _offset: getTimelineLeft(), + //_offset: getTimelineLeft(), disabled: !self.options.enableTimeline, duration: self.options.duration, find: self.options.find, @@ -1417,6 +1417,7 @@ Ox.VideoPlayer = function(options, self) { } left += control == 'position' ? self.positionWidth : 16 }); + Ox.print('TIMELINE_LEFT = ', left) return left; }