From c4f3666601fdf01f2c94eb198c1e8be89255ae52 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rollux.org>
Date: Sat, 10 Aug 2013 14:24:06 +0000
Subject: [PATCH] fix #1797 (canvas width has to be < 32,768)

---
 static/js/editPanel.js | 10 ++++------
 static/js/utils.js     | 40 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/static/js/editPanel.js b/static/js/editPanel.js
index 9ff55ff7..d9ecc5e5 100644
--- a/static/js/editPanel.js
+++ b/static/js/editPanel.js
@@ -47,9 +47,8 @@ pandora.ui.editPanel = function() {
     }
 
     function getSmallTimelineURL() {
-        var fps = 25,
-            width = Math.floor(edit.duration * fps),
-            height = 64;
+        var width = Math.ceil(edit.duration),
+            height = 16;
         smallTimelineCanvas = Ox.$('<canvas>').attr({width: width, height: height})[0];
         smallTimelineContext = smallTimelineCanvas.getContext('2d');
         return smallTimelineCanvas.toDataURL();
@@ -385,14 +384,13 @@ pandora.ui.editPanel = function() {
     }
 
     function updateSmallTimelineURL() {
-        var fps = 25;
         Ox.serialForEach(edit.clips, function(clip) {
             var callback = Ox.last(arguments);
-            pandora.getLargeClipTimelineURL(clip.item, clip['in'], clip.out, ui.videoTimeline, function(url) {
+            pandora.getSmallClipTimelineURL(clip.item, clip['in'], clip.out, ui.videoTimeline, function(url) {
                 var image = Ox.$('<img>')
                     .on({
                         load: function() {
-                            smallTimelineContext.drawImage(image, Math.floor(clip.position * fps), 0);
+                            smallTimelineContext.drawImage(image, Math.floor(clip.position), 0);
                             that.options({smallTimelineURL: smallTimelineCanvas.toDataURL()});
                             callback();
                         }
diff --git a/static/js/utils.js b/static/js/utils.js
index 86b74d51..8b952305 100644
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -1251,11 +1251,16 @@ pandora.getLargeEditTimelineURL = function(edit, type, i, callback) {
             return false; // break
         }
         if (
-            timelineIn <= clipIn <= timelineOut
-            || timelineIn <= clipOut <= timelineOut
-            || (clipIn <= timelineIn && clipOut >= timelineOut)
+            (timelineIn <= clipIn && clipIn <= timelineOut)
+            || (timelineIn <= clipOut && clipOut <= timelineOut)
+            || (clipIn <= timelineIn && timelineOut <= clipOut)
         ) {
-            clips.push(clip);
+            clips.push({
+                'in': clip['in'] + (clipIn < timelineIn ? timelineIn - clipIn : 0),
+                item: clip.item,
+                offset: Math.floor(Math.max(clipIn - timelineIn, 0) * fps),
+                out: clip.out - (clipOut > timelineOut ? clipOut - timelineOut : 0)
+            });
         }
     });
     Ox.parallelForEach(clips, function(clip) {
@@ -1264,7 +1269,7 @@ pandora.getLargeEditTimelineURL = function(edit, type, i, callback) {
             var image = Ox.$('<img>')
                 .on({
                     load: function() {
-                        context.drawImage(image, Math.floor((clip.position - timelineIn) * fps), 0);
+                        context.drawImage(image, clip.offset, 0);
                         callback();
                     }
                 })
@@ -1396,6 +1401,31 @@ pandora.getPart = function(state, str, callback) {
     }
 };
 
+pandora.getSmallClipTimelineURL = function(item, inPoint, outPoint, type, callback) {
+    var width = Math.ceil(outPoint - inPoint),
+        height = 16,
+        canvas = Ox.$('<canvas>').attr({width: width, height: height})[0],
+        context = canvas.getContext('2d'),
+        inIndex = Math.floor(inPoint / 3600),
+        outIndex = Math.floor(outPoint / 3600),
+        offset = inPoint % 3600 * -1;
+    Ox.parallelForEach(Ox.range(inIndex, outIndex + 1), function(index, i) {
+        var callback = Ox.last(arguments),
+            image = Ox.$('<img>')
+                .on({
+                    load: function() {
+                        context.drawImage(image, offset + i * 3600, 0);
+                        callback();
+                    }
+                })
+                .attr({
+                    src: '/' + item + '/timeline' + type + '16p' + index + '.jpg'
+                })[0];
+    }, function() {
+        callback(canvas.toDataURL());
+    });
+};
+
 pandora.getSortKeyData = function(key) {
     return Ox.getObjectById(pandora.site.itemKeys, key)
         || Ox.getObjectById(pandora.site.clipKeys, key);