update video editor and css

source/Ox.UI/js/Form/Ox.Editable.js

@@ -185,7 +185,6 @@ Ox.Editable = function(options, self) {
         return self.options.type == 'input'
             ? self.options.value.replace(/ /g, ' ')
             : Ox.encodeHTML(self.options.value || ' ')
-                //.replace(/ /g, ' ')
                 .replace(/\n$/, '\n ')
                 .replace(/\n/g, '<br/>')
             /*

source/Ox.UI/js/Video/Ox.AnnotationPanel.js

@@ -22,6 +22,7 @@ Ox.AnnotationPanel = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
+            collapsed: false,
             editable: false,
             id: '',
             items: [],
@@ -50,7 +51,7 @@ Ox.AnnotationPanel = function(options, self) {
 
     that.setElement(
         Ox.CollapsePanel({
-            collapsed: false,
+            collapsed: self.options.collapsed,
             extras: self.options.editable ? [
                 Ox.Button({
                     id: 'add',
@@ -147,7 +148,8 @@ Ox.AnnotationPanel = function(options, self) {
     }
 
     function togglePanel() {
-        
+        self.options.collapsed = !self.options.collapsed;
+        that.triggerEvent('toggle', {collapsed: self.options.collapsed});
     }
 
     self.setOption = function(key, value) {

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

@@ -43,6 +43,7 @@ Ox.VideoEditor = function(options, self) {
                 selected: '',
                 showAnnotations: false,
                 showLargeTimeline: true,
+                showLayers: {},
                 subtitles: [],
                 tooltips: false,
                 videoRatio: 16/9,
@@ -90,6 +91,9 @@ Ox.VideoEditor = function(options, self) {
                         editAnnotation();
                     }
                 },
+                key_equal: function() {
+                    self.options.videoSize == 'small' && toggleSize();
+                },
                 key_escape: function() {
                     if (self.editing) {
                         blurAnnotation();
@@ -111,6 +115,9 @@ Ox.VideoEditor = function(options, self) {
                 key_left: function() {
                     movePositionBy(-0.04);
                 },
+                key_minus: function() {
+                    self.options.videoSize == 'large' && toggleSize();
+                },
                 key_o: function() {
                     setPoint('out', self.options.position);
                 },
@@ -347,6 +354,7 @@ Ox.VideoEditor = function(options, self) {
             selected = item ? item.id : '';
         self.$annotationPanel[i] = Ox.AnnotationPanel(
                 Ox.extend({
+                    collapsed: !self.options.showLayers[layer.id],
                     font: self.options.annotationsFont,
                     'in': self.options['in'],
                     out: self.options.out,
@@ -393,7 +401,13 @@ Ox.VideoEditor = function(options, self) {
                         // ...
                     }
                 },
-                submit: submitAnnotation
+                submit: submitAnnotation,
+                toggle: function(data) {
+                    that.triggerEvent('togglelayer', {
+                        collapsed: data.collapsed,
+                        layer: layer.id
+                    });
+                }
             })
             .appendTo(self.$annotations);
     });
@@ -724,6 +738,31 @@ Ox.VideoEditor = function(options, self) {
         })
         .appendTo(self.$annotationsbar);
 
+    self.$editMenuButton = Ox.MenuButton({
+            items: [
+                {id: 'edit', title: 'Edit Selected Annotation', disabled: !self.options.selected, keyboard: 'return'},
+                {id: 'delete', title: 'Delete Selected Annotation', disabled: !self.options.selected, keyboard: 'delete'},
+                {},
+                {id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'},
+                {id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'}
+            ],
+            style: 'square',
+            title: 'edit',
+            tooltip: 'Editing Options',
+            type: 'image'
+        })
+        .css({float: 'right'})
+        .bindEvent({
+            click: function(data) {
+                if (data.id == 'delete') {
+                    
+                } else if (data.id == 'edit') {
+                    editAnnotation();
+                }
+            }
+        })
+        .appendTo(self.$annotationsbar);
+
     that.setElement(
         Ox.SplitPanel({
             elements: [
@@ -1065,6 +1104,7 @@ Ox.VideoEditor = function(options, self) {
             getPanel(self.options.selected).options({selected: self.options.selected});
         }
         setTimelineState();
+        updateEditMenu();
         that.triggerEvent('select', {
             id: self.options.selected
         });
@@ -1252,6 +1292,12 @@ Ox.VideoEditor = function(options, self) {
         });
     }
 
+    function updateEditMenu() {
+        var action = self.options.selected ? 'enableItem' : 'disableItem';
+        self.$editMenuButton[action]('edit');
+        self.$editMenuButton[action]('delete');
+    }
+
     self.setOption = function(key, value) {
         if (key == 'width' || key == 'height') {
             Ox.Log('Video', 'XXXX setSizes', key, value, self.options.width, self.options.height)

source/Ox.UI/themes/classic/css/classic.css

@@ -740,15 +740,17 @@ Video
 }
 
 .OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected {
-    background: rgb(192, 192, 255);
+    background: rgb(128, 128, 255);
-    box-shadow: 0 0 1px rgb(96, 96, 96);
+    box-shadow: 0 0 1px rgb(64, 64, 64);
 }
 .OxThemeClassic .OxAnnotationPanel .OxEditableElement input {
     background: rgb(160, 224, 160);
-    box-shadow: 0 0 1px rgb(96, 96, 96);
+    color: rgb(0, 0, 0);
+    box-shadow: 0 0 1px rgb(64, 64, 64);
 }
 .OxThemeClassic .OxAnnotationPanel .OxEditableElement textarea {
     background: rgb(160, 224, 160);
+    color: rgb(0, 0, 0);
 }
 
 /*

source/Ox.UI/themes/modern/css/modern.css

@@ -761,10 +761,17 @@ Video
 }
 
 .OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected {
-    background: rgb(0, 128, 0);
+    background: rgb(64, 64, 192);
+    box-shadow: 0 0 1px rgb(255, 255, 255);
 }
 .OxThemeModern .OxAnnotationPanel .OxEditableElement input {
-    background: rgb(64, 64, 192);
+    background: rgb(64, 128, 64);
+    color: rgb(255, 255, 255);
+    box-shadow: 0 0 1px rgb(255, 255, 255);
+}
+.OxThemeModern .OxAnnotationPanel .OxEditableElement textarea {
+    background: rgb(64, 128, 64);
+    color: rgb(255, 255, 255);
 }
 
 /*