fix #1797 (canvas width has to be < 32,768)

This commit is contained in:
rolux 2013-08-10 14:24:06 +00:00
parent c72af378a7
commit c4f3666601
2 changed files with 39 additions and 11 deletions

View file

@ -47,9 +47,8 @@ pandora.ui.editPanel = function() {
} }
function getSmallTimelineURL() { function getSmallTimelineURL() {
var fps = 25, var width = Math.ceil(edit.duration),
width = Math.floor(edit.duration * fps), height = 16;
height = 64;
smallTimelineCanvas = Ox.$('<canvas>').attr({width: width, height: height})[0]; smallTimelineCanvas = Ox.$('<canvas>').attr({width: width, height: height})[0];
smallTimelineContext = smallTimelineCanvas.getContext('2d'); smallTimelineContext = smallTimelineCanvas.getContext('2d');
return smallTimelineCanvas.toDataURL(); return smallTimelineCanvas.toDataURL();
@ -385,14 +384,13 @@ pandora.ui.editPanel = function() {
} }
function updateSmallTimelineURL() { function updateSmallTimelineURL() {
var fps = 25;
Ox.serialForEach(edit.clips, function(clip) { Ox.serialForEach(edit.clips, function(clip) {
var callback = Ox.last(arguments); 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>') var image = Ox.$('<img>')
.on({ .on({
load: function() { load: function() {
smallTimelineContext.drawImage(image, Math.floor(clip.position * fps), 0); smallTimelineContext.drawImage(image, Math.floor(clip.position), 0);
that.options({smallTimelineURL: smallTimelineCanvas.toDataURL()}); that.options({smallTimelineURL: smallTimelineCanvas.toDataURL()});
callback(); callback();
} }

View file

@ -1251,11 +1251,16 @@ pandora.getLargeEditTimelineURL = function(edit, type, i, callback) {
return false; // break return false; // break
} }
if ( if (
timelineIn <= clipIn <= timelineOut (timelineIn <= clipIn && clipIn <= timelineOut)
|| timelineIn <= clipOut <= timelineOut || (timelineIn <= clipOut && clipOut <= timelineOut)
|| (clipIn <= timelineIn && 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) { Ox.parallelForEach(clips, function(clip) {
@ -1264,7 +1269,7 @@ pandora.getLargeEditTimelineURL = function(edit, type, i, callback) {
var image = Ox.$('<img>') var image = Ox.$('<img>')
.on({ .on({
load: function() { load: function() {
context.drawImage(image, Math.floor((clip.position - timelineIn) * fps), 0); context.drawImage(image, clip.offset, 0);
callback(); 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) { pandora.getSortKeyData = function(key) {
return Ox.getObjectById(pandora.site.itemKeys, key) return Ox.getObjectById(pandora.site.itemKeys, key)
|| Ox.getObjectById(pandora.site.clipKeys, key); || Ox.getObjectById(pandora.site.clipKeys, key);