video edit panel: allow for clip selection via keyboard shortcuts

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

@@ -12,7 +12,7 @@ Ox.ClipPanel = function(options, self) {
             'in': 0,
             out: 0,
             position: 0,
-            selected: '',
+            selected: [],
             sort: [],
             sortOptions: [],
             view: 'list',
@@ -32,6 +32,9 @@ Ox.ClipPanel = function(options, self) {
             height: function() {
                 self.$list.size();
             },
+            selected: function() {
+                self.$list.options({selected: self.options.selected});
+            },
             sort: function() {
                 updateSortElement();
                 self.$list.options({

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

@@ -15,6 +15,7 @@ Ox.VideoEditPanel = function(options, self) {
             duration: 0,
             editable: false,
             enableSubtitles: false,
+            fps: 25,
             fullscreen: false,
             getClipImageURL: null,
             getLargeTimelineURL: null,
@@ -28,7 +29,7 @@ Ox.VideoEditPanel = function(options, self) {
             position: 0,
             resolution: 0,
             scaleToFill: false,
-            selected: '',
+            selected: [],
             showClips: false,
             showTimeline: false,
             smallTimelineURL: '',
@@ -108,6 +109,10 @@ Ox.VideoEditPanel = function(options, self) {
         .bindEvent({
             //resize: resizeElement,
             key_0: toggleMuted,
+            key_backslash: selectClip,
+            key_closebracket: function() {
+                movePositionTo('chapter', 1);
+            },
             key_comma: function() {
                 movePositionTo('cut', -1);
             },
@@ -121,9 +126,6 @@ Ox.VideoEditPanel = function(options, self) {
             key_dot: function() {
                 movePositionTo('cut', 1);
             },
-            key_down: function() {
-                movePositionTo('chapter', 1);
-            },
             key_equal: function() {
                 self.$video.changeVolume(0.1);
             },
@@ -139,6 +141,9 @@ Ox.VideoEditPanel = function(options, self) {
             key_o: function() {
                 setPoint('out', self.options.position, true);
             },
+            key_openbracket: function() {
+                movePositionTo('chapter', -1);
+            },
             key_right: function() {
                 movePositionBy(0.04);
             },
@@ -154,10 +159,7 @@ Ox.VideoEditPanel = function(options, self) {
             key_shift_right: function() {
                 movePositionBy(1);
             },
-            key_space: togglePaused,
+            key_space: togglePaused
-            key_up: function() {
-                movePositionTo('chapter', -1);
-            }
         });
 
     self.chapters = getChapters();
@@ -357,14 +359,11 @@ Ox.VideoEditPanel = function(options, self) {
     }
 
     function getChapters() {
-        var currentTime = 0;
         return self.options.clips.map(function(clip) {
-            var chapter = {
+            return {
-                position: currentTime,
+                position: clip.position,
                 title: clip.title || clip.id
             };
-            currentTime += clip.duration;
-            return chapter;
         });
     }
 
@@ -463,13 +462,27 @@ Ox.VideoEditPanel = function(options, self) {
         that.triggerEvent('size', data.size);
     }
 
-    function selectClip(data) {
+    function selectClip() {
-        self.options.selected = data.id;
+        var id,
-        if (self.options.selected) {
+            points = {
-            setPosition(data['in']);
+                'in': Ox.last(self.options.clips).position,
-            setPoint('in', data['in']);
+                out: self.options.duration
-            setPoint('out', data.out);
+            };
+        Ox.forEach(self.options.clips, function(clip, i) {
+            if (clip.position > self.options.position) {
+                id = self.options.clips[i - 1].id;
+                points = {
+                    'in': self.options.clips[i - 1].position,
+                    out: self.options.clips[i].position
+                };
+                return false; // break
             } 
+        });
+        setPosition(points['in']);
+        setPoint('in', points['in']);
+        setPoint('out', points.out);
+        self.options.selected = [id];
+        Ox.print('????', self.$clipPanel.options('selected'))
         self.$clipPanel.options({selected: self.options.selected});
         that.triggerEvent('select', {id: self.options.selected});
     }