update VideoEditPanel and ClipPanel (select clip at position, update selection on cut)

source/Ox.UI/js/Video/ClipPanel.js

@@ -36,14 +36,15 @@ Ox.ClipPanel = function(options, self) {
         .options(options || {})
         .update({
             clips: function() {
+                var action = self.options.clips.length && self.options.view != 'annotations'
+                    ? 'enableItem' : 'disableItem';
                 self.$list.options({
                     items: Ox.clone(self.options.clips),
                     sort: getListSort(),
                     sortable: isSortable()
                 });
-                self.$menu[
+                self.$menu[action]('selectclip');
-                    self.options.clips.length ? 'enableItem' : 'disableItem'
+                self.$menu[action]('splitclip');
-                ]('select');
                 updateStatus();
             },
             duration: updateStatus,
@@ -173,7 +174,8 @@ Ox.ClipPanel = function(options, self) {
                     {id: 'annotations', title: Ox._('View Annotations'), checked: self.options.view == 'annotations'},
                 ]},
                 {},
-                {id: 'select', title: 'Select Clip at Current Position', disabled: self.options.clips.length == 0},
+                {id: 'selectclip', title: 'Select Clip at Current Position', keyboard: '\\', disabled: self.options.clips.length == 0 || self.options.view == 'annotations'},
+                {id: 'splitclip', title: 'Split Clip at Current Position', keyboard: 'shift \\', disabled: self.options.clips.length == 0 || self.options.view == 'annotations'},
                 {},
                 {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || self.options.selected.length == 0 || self.options.view == 'annotations'},
                 {id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || self.options.selected.length < 2 || self.options.view == 'annotations'},
@@ -208,7 +210,12 @@ Ox.ClipPanel = function(options, self) {
                 }
             },
             click: function(data) {
-                if (data.id == 'split') {
+                if (data.id == 'selectclip') {
+                    that.selectClip();
+                    self.$list.gainFocus();
+                } else if (data.id == 'splitclip') {
+                    // ...
+                } else if (data.id == 'split') {
                     splitClips();
                 } else if (data.id == 'join') {
                     joinClips();
@@ -409,10 +416,20 @@ Ox.ClipPanel = function(options, self) {
                 that.triggerEvent('copyadd', data);
             },
             cut: function(data) {
-                self.options.editable && that.triggerEvent('cut', data);
+                if (self.options.editable) {
+                    that.triggerEvent('cut', data);
+                    self.options.selected = [];
+                    selectClips();
+                    that.triggerEvent('select', {ids: []});
+                }
             },
             cutadd: function(data) {
-                self.options.editable && that.triggerEvent('cutadd', data);
+                if (self.options.editable) {
+                    that.triggerEvent('cutadd', data);
+                    self.options.selected = [];
+                    selectClips();
+                    that.triggerEvent('select', {ids: []});
+                }
             },
             'delete': function(data) {
                 self.options.editable && that.triggerEvent('delete', data);
@@ -534,19 +551,6 @@ Ox.ClipPanel = function(options, self) {
         }
     }
 
-    function selectClipAtPosition() {
-        var index;
-        Ox.forEach(self.options.clips, function(clip, i) {
-            index = i;
-            if (clip.position + clip.duration < self.options.position) {
-                return false; // break
-            }
-        });
-        self.options.selected = [self.options.clips[index].id];
-        selectClips();
-        that.triggerEvent('select', {ids: self.options.selected});
-    }
-
     function selectClips() {
         if (self.options.editable) {
             self.$menu[
@@ -604,11 +608,28 @@ Ox.ClipPanel = function(options, self) {
         self.$list.selectAll();
     };
 
+    that.selectClip = function() {
+        var index;
+        Ox.forEach(self.options.clips, function(clip, i) {
+            Ox.print('CLIP', i, clip.position, clip.duration, self.options.position)
+            if (clip.position <= self.options.position) {
+                index = i
+            } else {
+                return false; // break
+            }
+        });
+        self.options.selected = [self.options.clips[index].id];
+        selectClips();
+        that.triggerEvent('select', {ids: self.options.selected});
+        return that;
+    };
+
     that.updateItem = function(id, data) {
         self.options.clips[Ox.getIndexById(self.options.clips, id)] = data;
         ['in', 'out', 'duration'].forEach(function(key) {
             self.$list.value(id, key, data[key]);
         });
+        return that;
     };
 
     return that;

source/Ox.UI/js/Video/VideoEditPanel.js

@@ -88,10 +88,10 @@ Ox.VideoEditPanel = function(options, self) {
             position: function() {
                 self.$video.options({position: self.options.position});
                 self.$timeline.options({position: self.options.position});
-                self.$annotationPanel.options({position: self.options.position});
+                self.$clipPanel.options({position: self.options.position});
             },
             selected: function() {
-                self.$annotationPanel.options({selected: self.options.selected});
+                self.$clipPanel.options({selected: self.options.selected});
             },
             showClips: function() {
                 self.$mainPanel.toggle(1);
@@ -130,7 +130,11 @@ Ox.VideoEditPanel = function(options, self) {
         .bindEvent({
             //resize: resizeElement,
             key_0: toggleMuted,
-            key_backslash: selectClip,
+            key_backslash: function() {
+                if (self.options.view != 'annotations') {
+                    self.$clipPanel.selectClip();
+                }
+            },
             key_closebracket: function() {
                 movePositionTo('chapter', 1);
             },
@@ -178,6 +182,9 @@ Ox.VideoEditPanel = function(options, self) {
             key_shift_o: function() {
                 goToPoint('out');
             },
+            key_slash: function() {
+                // TODO: selectCut
+            },
             key_shift_right: function() {
                 movePositionBy(1);
             },
@@ -566,19 +573,6 @@ Ox.VideoEditPanel = function(options, self) {
         that.triggerEvent('size', data.size);
     }
 
-    function selectClip() {
-        var id = Ox.last(self.options.clips).id;
-        Ox.forEach(self.options.clips, function(clip, i) {
-            if (clip.position > self.options.position) {
-                id = self.options.clips[i - 1].id;
-                return false; // break
-            } 
-        });
-        self.options.selected = [id];
-        self.$clipPanel.options({selected: self.options.selected});
-        that.triggerEvent('select', {id: self.options.selected});
-    }
-
     function setPoint(point, position, triggerEvent) {
         self.options[point] = position;
         self.$video.options(point, position);