video edit panel: handle cuts, add more keyboard shortcuts

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

@@ -12,7 +12,6 @@ Ox.VideoEditPanel = function(options, self) {
             clipTooltip: 'clips',
             clipView: 'list',
             clickLink: null,
-            cuts: [],
             duration: 0,
             editable: false,
             enableSubtitles: false,
@@ -91,10 +90,15 @@ Ox.VideoEditPanel = function(options, self) {
                 self.$timeline.options({type: self.options.timeline});
             },
             video: function() {
+                self.chapters = getChapters();
+                self.cuts = getCuts();
                 self.$video.options({
-                    chapters: getChapters(),
+                    chapters: self.chapters,
                     video: self.options.video
                 });
+                self.$timeline.options({
+                    cuts: self.cuts
+                });
             },
             width: function() {
                 self.$video.options({width: getPlayerWidth()});
@@ -104,6 +108,9 @@ Ox.VideoEditPanel = function(options, self) {
         .bindEvent({
             //resize: resizeElement,
             key_0: toggleMuted,
+            key_comma: function() {
+                movePositionTo('cut', -1);
+            },
             key_control_c: function() {
                 that.triggerEvent('copy', [{
                     annotation: self.options.selected,
@@ -111,21 +118,50 @@ Ox.VideoEditPanel = function(options, self) {
                     out: self.options.out
                 }]);
             },
+            key_dot: function() {
+                movePositionTo('cut', 1);
+            },
+            key_down: function() {
+                movePositionTo('chapter', 1);
+            },
             key_equal: function() {
                 self.$video.changeVolume(0.1);
             },
             key_i: function() {
                 setPoint('in', self.options.position, true);
             },
+            key_left: function() {
+                movePositionBy(-0.04);
+            },
             key_minus: function() {
                 self.$video.changeVolume(-0.1);
             },
             key_o: function() {
                 setPoint('out', self.options.position, true);
             },
-            key_space: togglePaused
+            key_right: function() {
+                movePositionBy(0.04);
+            },
+            key_shift_i: function() {
+                goToPoint('in');
+            },
+            key_shift_left: function() {
+                movePositionBy(-1);
+            },
+            key_shift_o: function() {
+                goToPoint('out');
+            },
+            key_shift_right: function() {
+                movePositionBy(1);
+            },
+            key_space: togglePaused,
+            key_up: function() {
+                movePositionTo('chapter', -1);
+            }
         });
 
+    self.chapters = getChapters();
+    self.cuts = getCuts();
     self.fullscreen = false;
     self.listSizes = [
         144 + Ox.UI.SCROLLBAR_SIZE,
@@ -138,12 +174,13 @@ Ox.VideoEditPanel = function(options, self) {
     self.$player = Ox.Element().css({overflowX: 'hidden'});
 
     self.$video = Ox.VideoPlayer({
-            chapters: getChapters(),
+            chapters: self.chapters,
             controlsTop: ['fullscreen', 'space', 'open'],
             controlsBottom: [
                 'play', 'playInToOut', 'volume', 'scale', 'timeline',
                 'previous', 'next', 'loop', 'position', 'settings'
             ],
+            cuts: self.cuts,
             enableKeyboard: true,
             enableMouse: true,
             enablePosition: true,
@@ -335,6 +372,34 @@ Ox.VideoEditPanel = function(options, self) {
         return Ox.getObjectById(self.options.clips, id);
     }
 
+    function getCuts() {
+        var cuts = [];
+        self.options.clips.forEach(function(clip, i) {
+            if (i > 0) {
+                cuts.push(clip.position);
+            }
+            clip.cuts.forEach(function(cut) {
+                Ox.print('PUSHING CLIP CUT', clip.position + cut - clip['in'])
+                cuts.push(clip.position + cut - clip['in']);
+            });
+        });
+        return cuts;
+    }
+
+    // fixme: why not goToNextPosition()?
+    function getNextPosition(type, direction) {
+        // type can be 'chapter' or 'cut' 
+        var positions;
+        if (type == 'chapter') {
+            positions = self.chapters.map(function(chapter) {
+                return chapter.position;
+            });
+        } else if (type == 'cut') {
+            positions = [0].concat(self.options.cuts, self.options.duration);
+        }
+        return Ox.nextValue(positions, self.options.position, direction);
+    }
+
     function getPlayerHeight() {
         return self.options.height - 24 - 32
             - self.options.showTimeline * 80 - 1;
@@ -348,6 +413,7 @@ Ox.VideoEditPanel = function(options, self) {
 
     function getTimeline() {
         return Ox.LargeVideoTimeline({
+                cuts: self.cuts,
                 duration: self.options.duration,
                 getImageURL: self.options.getLargeTimelineURL,
                 'in': self.options['in'],
@@ -370,6 +436,17 @@ Ox.VideoEditPanel = function(options, self) {
             * self.options.clipSize - 16 - 1;
     }
 
+    function goToPoint(point) {
+        setPosition(self.options[point]);
+    }
+
+    function movePositionBy(sec) {
+        setPosition(Ox.limit(self.options.position + sec, 0, self.options.duration));
+    }
+
+    function movePositionTo(type, direction) {
+        setPosition(getNextPosition(type, direction));
+    }
 
     function resizeClips(data) {
         // called on clips resize