split panel: implement join

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

@@ -87,23 +87,9 @@ Ox.ClipPanel = function(options, self) {
             },
             click: function(data) {
                 if (data.id == 'split') {
-                    var ids = getEditable(self.options.selected).filter(function(id) {
+                    splitClips();
-                            var clip = Ox.getObjectById(self.options.clips, id);
-                            return clip.cuts.length;
-                        }),
-                        split = Ox.flatten(ids.map(function(id) {
-                            var clip = Ox.getObjectById(self.options.clips, id),
-                                cuts = [clip['in']].concat(clip.cuts).concat([clip.out]);
-                            return Ox.range(0, cuts.length - 1).map(function(i) {
-                                return {'in': cuts[i], item: clip.item, out: cuts[i + 1]};
-                            });
-                        }));
-                    if (split.length > ids.length) {
-                        that.triggerEvent('split', {ids: ids, split: split});
-                    }
                 } else if (data.id == 'join') {
-                    var ids = getEditable(self.options.selected);
+                    joinClips();
-                    ids.length && that.triggerEvent('join', {ids: ids});
                 }
             }
         })
@@ -409,6 +395,41 @@ Ox.ClipPanel = function(options, self) {
             && self.options.sort[0].operator == '+';
     }
 
+    function joinClips() {
+        var clips = getEditable(self.options.selected).map(function(id) {
+                return Ox.clone(Ox.getObjectById(self.options.clips, id));
+            }),
+            ids = [], join = [], joined;
+        do {
+            joined = false;
+            Ox.forEach(clips, function(outClip) {
+                var outPoint = outClip.item + '/' + outClip.out;
+                Ox.forEach(clips, function(inClip, index) {
+                    var inPoint = inClip.item + '/' + inClip['in'];
+                    if (inPoint == outPoint) {
+                        ids = ids.concat([outClip.id, inClip.id]);
+                        join.push(outClip.id);
+                        outClip.out = inClip.out;
+                        clips.splice(index, 1);
+                        joined = true;
+                        return false; // break
+                    }
+                });
+                if (joined) {
+                    return false; // brea;
+                }
+            });
+        } while (joined);
+        ids = Ox.unique(ids);
+        join = Ox.unique(join).map(function(id) {
+            var clip = Ox.getObjectById(clips, id);
+            return {'in': clip['in'], item: clip.item, out: clip.out};
+        });
+        if (ids.length) {
+            that.triggerEvent('join', {ids: ids, join: join});
+        }
+    }
+
     function selectClips() {
         var action;
         if (self.options.editable) {
@@ -419,6 +440,23 @@ Ox.ClipPanel = function(options, self) {
         self.$list.options({selected: self.options.selected});
     }
 
+    function splitClips() {
+        var ids = getEditable(self.options.selected).filter(function(id) {
+                var clip = Ox.getObjectById(self.options.clips, id);
+                return clip.cuts.length;
+            }),
+            split = Ox.flatten(ids.map(function(id) {
+                var clip = Ox.getObjectById(self.options.clips, id),
+                    cuts = [clip['in']].concat(clip.cuts).concat([clip.out]);
+                return Ox.range(0, cuts.length - 1).map(function(i) {
+                    return {'in': cuts[i], item: clip.item, out: cuts[i + 1]};
+                });
+            }));
+        if (split.length > ids.length) {
+            that.triggerEvent('split', {ids: ids, split: split});
+        }
+    }
+
     function updateSortElement() {
         self.$sortSelect.options({
             value: self.options.sort[0].key,