update video editor

source/Ox.UI/js/Form/Ox.ArrayEditable.js

@@ -72,19 +72,21 @@ Ox.ArrayEditable = function(options, self) {
     }
 
     function deleteItem() {
+        if (self.options.editable) {
             self.options.items.splice(self.selected, 1);
             renderItems();
             that.triggerEvent('delete', {
                 id: self.options.selected
             });
         }
+    }
 
     function doubleclick(e) {
         var $target = $(e.target),
             $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) {
+        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({
+        if (self.options.selected) {
-            editing: false
+            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;

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

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
+            Ox.print('MAP SET OPTIONS PLACES', value);
-            zoom(0);
+            getMapBounds(function(mapBounds) {
+                self.map.fitBounds(mapBounds);
+            });
         } else if (key == 'selected') {
             selectPlace(value);
         } else if (key == 'type') {

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({
+            if (self.editing || self.options.range == 'selection') {
-                items: getAnnotations()
+                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({
+            if (self.editing || self.options.range == 'selection') {
-                items: getAnnotations()
+                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({
+            if (self.editing || self.options.range == 'position') {
-                items: getAnnotations()
+                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
+            });
         }
     };
 

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});
+            });
         }
     };
 

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,

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -630,12 +630,12 @@ Ox.VideoEditor = function(options, self) {
                     layer: data.layer
                 });
             },
-            select: function(data) {
+            resize: resizeAnnotations,
-                !data.id && that.gainFocus();
+            resizeend: resizeendAnnotations,
-                selectAnnotation(data);
+            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});
+        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',
-            });
-        });
     }
 
     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;

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) {
+    function selectAnnotation(data) {
-        self.options.position = data.position;
+        self.options.selected = data.id;
-        //self.$video.position(self.options.position);
+        if (self.options.selected) {
-        self.$timeline.options({
+            setPosition(data['in']);
-            position: self.options.position
+            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') {

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