0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

edit panel: if possible, use large timeline tiles for small video player timeline

Browse source
This commit is contained in:
rolux 2013-08-10 20:38:47 +00:00
parent 19ab463eca
commit 6e3479d7a7
1 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
static/js/editPanel.js
View file

@ -46,9 +46,21 @@ pandora.ui.editPanel = function() {
}); });
} }
function getSmallTimelineCanvas() {
var fps = getSmallTimelineFPS(),
width = Math.ceil(edit.duration * fps),
height = fps == 1 ? 16 : 64;
return Ox.$('<canvas>').attr({width: width, height: height})[0];
}
function getSmallTimelineFPS() {
return Math.floor(edit.duration * 25) < 32768 ? 25 : 1;
}
function getSmallTimelineURL() { function getSmallTimelineURL() {
var width = Math.ceil(edit.duration), var fps = getSmallTimelineFPS(),
height = 16; width = Math.ceil(edit.duration * fps),
height = fps == 1 ? 16 : 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();
@ -384,14 +396,19 @@ pandora.ui.editPanel = function() {
} }
function updateSmallTimelineURL() { function updateSmallTimelineURL() {
var canvas = getSmallTimelineCanvas(),
context = canvas.getContext('2d'),
fps = getSmallTimelineFPS();
Ox.serialForEach(edit.clips, function(clip) { Ox.serialForEach(edit.clips, function(clip) {
var callback = Ox.last(arguments); var callback = Ox.last(arguments);
pandora.getSmallClipTimelineURL(clip.item, clip['in'], clip.out, ui.videoTimeline, function(url) { pandora[
fps == 1 ? 'getSmallClipTimelineURL' : 'getLargeClipTimelineURL'
](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), 0); context.drawImage(image, Math.floor(clip.position * fps), 0);
that.options({smallTimelineURL: smallTimelineCanvas.toDataURL()}); that.options({smallTimelineURL: canvas.toDataURL()});
callback(); callback();
} }
}) })