From 389d6ba27e39c805197988199e96ef5d2159d9d4 Mon Sep 17 00:00:00 2001 From: Luke Murray Date: Fri, 18 Nov 2016 15:29:13 +1100 Subject: [PATCH 1/9] allow toFrame() out of buffer --- src/jquery.imgplay.js | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/src/jquery.imgplay.js b/src/jquery.imgplay.js index 8eecd6b..9d5cd3c 100644 --- a/src/jquery.imgplay.js +++ b/src/jquery.imgplay.js @@ -3,7 +3,8 @@ var defaults = { name: 'imgplay', rate: 1, - controls: true + controls: true, + pageSize: 5 }; var plugin = this; @@ -14,7 +15,6 @@ var playing = false; var direction = 'forward'; var page = 1; - var pageSize = 5; var total = 0; var index = 0; var buffer = []; @@ -188,7 +188,12 @@ plugin.toFrame = function(i) { i = i < 0 ? 0 : i; - if(i < buffer.length) { + if (i < buffer.length) { + index = i; + drawFrame(); + } + else { + loadMore(i); index = i; drawFrame(); } @@ -321,7 +326,7 @@ if(playing) { if(direction == 'forward') { index++; - if(index > plugin.frames.length - pageSize / 2) { + if(index > plugin.frames.length - plugin.settings.pageSize / 2) { loadMore(); } } else { @@ -335,9 +340,16 @@ } }; - var loadMore = function() { - if(buffer.length) { - for(var i = index; (i < pageSize + index && i < buffer.length); i++) { + var loadMore = function(fromIdx) { + if (fromIdx) { + buffer = []; + // we have jumpped forward, get a fresh buffer + for(var i = fromIdx; (i < plugin.settings.pageSize + fromIdx); i++) { + loadFrame(i); + } + } + if (buffer.length) { + for(var i = index; (i < plugin.settings.pageSize + index && i < buffer.length); i++) { loadFrame(i); } } @@ -353,7 +365,7 @@ plugin.frames[i] = img; //buffer.splice(buffer.indexOf(img), 1); drawProgress(); - if(i == (index + pageSize - 1) && direction == 'forward' && playing == false) { + if(i == (index + plugin.settings.pageSize - 1) && direction == 'forward' && playing == false) { plugin.play(); } }).prop('src', $img.data('src')); From c1a738968ed7ad009c626f8be424ee80156c8551 Mon Sep 17 00:00:00 2001 From: Luke Murray Date: Fri, 18 Nov 2016 15:49:59 +1100 Subject: [PATCH 2/9] support jump to 0 from far away --- src/jquery.imgplay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/jquery.imgplay.js b/src/jquery.imgplay.js index 9d5cd3c..7e1a630 100644 --- a/src/jquery.imgplay.js +++ b/src/jquery.imgplay.js @@ -341,7 +341,7 @@ }; var loadMore = function(fromIdx) { - if (fromIdx) { + if (fromIdx != undefined) { buffer = []; // we have jumpped forward, get a fresh buffer for(var i = fromIdx; (i < plugin.settings.pageSize + fromIdx); i++) { From f1efe3a35e3b9e73620a12e59044cdf9a33ae86f Mon Sep 17 00:00:00 2001 From: Luke Murray Date: Fri, 18 Nov 2016 16:46:16 +1100 Subject: [PATCH 3/9] fix up buffering suppoer for jumping frames --- src/jquery.imgplay.js | 50 ++++++++++++++++++++++++++----------------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/src/jquery.imgplay.js b/src/jquery.imgplay.js index 7e1a630..b3063a6 100644 --- a/src/jquery.imgplay.js +++ b/src/jquery.imgplay.js @@ -19,9 +19,23 @@ var index = 0; var buffer = []; var playTimer = null; + var frameWidth; + var frameHeight; plugin.settings = {}; + plugin.getTotalFrames = function() { + return total; + }; + + plugin.getFrameWidth = function() { + return frameWidth; + }; + + plugin.getFrameHeight = function() { + return frameHeight; + }; + plugin.controls = { play: null, pause: null, @@ -188,7 +202,7 @@ plugin.toFrame = function(i) { i = i < 0 ? 0 : i; - if (i < buffer.length) { + if (plugin.frames[i]) { index = i; drawFrame(); } @@ -293,7 +307,7 @@ var img = plugin.frames[index]; var $img = $(img); - if(img) { + if (img) { if($img.prop('naturalHeight') > 0) { var cw = $canvas.width(); var ch = $canvas.height(); @@ -302,31 +316,33 @@ var vw = 0; var vh = 0; - if(cw >= ch) { + if (cw >= ch) { vw = iw * (ch/ih); vh = ch; } else { vw = cw; vh = ih * (cw/iw); } + frameWidth = vw; + frameHeight = vh; screen.clearRect(0, 0, cw, ch); screen.drawImage(img, (cw - vw) / 2, (ch - vh) / 2, vw, vh); } - } else if(buffer.length) { + } else if (buffer.length) { plugin.pause(); loadMore(); return; } - if(index < 0 || index > plugin.frames.length) { + if (index < 0 || index > plugin.frames.length) { plugin.stop(); return; } - if(playing) { - if(direction == 'forward') { + if (playing) { + if (direction == 'forward') { index++; - if(index > plugin.frames.length - plugin.settings.pageSize / 2) { + if (index > plugin.frames.length - plugin.settings.pageSize / 2) { loadMore(); } } else { @@ -341,22 +357,16 @@ }; var loadMore = function(fromIdx) { - if (fromIdx != undefined) { - buffer = []; - // we have jumpped forward, get a fresh buffer - for(var i = fromIdx; (i < plugin.settings.pageSize + fromIdx); i++) { - loadFrame(i); - } - } + var loadFrom = fromIdx != undefined ? fromIdx : index; if (buffer.length) { - for(var i = index; (i < plugin.settings.pageSize + index && i < buffer.length); i++) { + for(var i = loadFrom; (i < plugin.settings.pageSize + loadFrom && i < buffer.length); i++) { loadFrame(i); } } }; var loadFrame = function(i) { - if(i < buffer.length) { + if (i < buffer.length) { var img = buffer[i]; var $img = $(img); @@ -365,15 +375,15 @@ plugin.frames[i] = img; //buffer.splice(buffer.indexOf(img), 1); drawProgress(); - if(i == (index + plugin.settings.pageSize - 1) && direction == 'forward' && playing == false) { - plugin.play(); - } }).prop('src', $img.data('src')); } } }; var drawProgress = function() { + if (!plugin.settings.controls) { + return; + } var loadProgress = ((plugin.frames.length / total) * 100); var playProgress = ((index / plugin.frames.length) * 100); From 97a1e909b97c22221fee27be50a5985308486346 Mon Sep 17 00:00:00 2001 From: Luke Murray Date: Fri, 18 Nov 2016 17:05:15 +1100 Subject: [PATCH 4/9] remove width/height getters --- src/jquery.imgplay.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/jquery.imgplay.js b/src/jquery.imgplay.js index b3063a6..00137dd 100644 --- a/src/jquery.imgplay.js +++ b/src/jquery.imgplay.js @@ -19,8 +19,6 @@ var index = 0; var buffer = []; var playTimer = null; - var frameWidth; - var frameHeight; plugin.settings = {}; @@ -28,14 +26,6 @@ return total; }; - plugin.getFrameWidth = function() { - return frameWidth; - }; - - plugin.getFrameHeight = function() { - return frameHeight; - }; - plugin.controls = { play: null, pause: null, @@ -323,8 +313,6 @@ vw = cw; vh = ih * (cw/iw); } - frameWidth = vw; - frameHeight = vh; screen.clearRect(0, 0, cw, ch); screen.drawImage(img, (cw - vw) / 2, (ch - vh) / 2, vw, vh); } From 63287ef485ec27b89c6457a64f3e8639ff7be5c0 Mon Sep 17 00:00:00 2001 From: Luke Murray Date: Fri, 18 Nov 2016 17:10:47 +1100 Subject: [PATCH 5/9] handle resume playing --- src/jquery.imgplay.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/jquery.imgplay.js b/src/jquery.imgplay.js index 00137dd..da0445b 100644 --- a/src/jquery.imgplay.js +++ b/src/jquery.imgplay.js @@ -317,8 +317,9 @@ screen.drawImage(img, (cw - vw) / 2, (ch - vh) / 2, vw, vh); } } else if (buffer.length) { + var wasPlaying = playing; plugin.pause(); - loadMore(); + loadMore(index, wasPlaying); return; } @@ -344,16 +345,16 @@ } }; - var loadMore = function(fromIdx) { + var loadMore = function(fromIdx, beginPlaying) { var loadFrom = fromIdx != undefined ? fromIdx : index; if (buffer.length) { for(var i = loadFrom; (i < plugin.settings.pageSize + loadFrom && i < buffer.length); i++) { - loadFrame(i); + loadFrame(i, beginPlaying); } } }; - var loadFrame = function(i) { + var loadFrame = function(i, beginPlaying) { if (i < buffer.length) { var img = buffer[i]; var $img = $(img); @@ -363,6 +364,9 @@ plugin.frames[i] = img; //buffer.splice(buffer.indexOf(img), 1); drawProgress(); + if (beginPlaying && i == (index + pageSize - 1) && direction == 'forward' && playing == false) { + plugin.play(); + } }).prop('src', $img.data('src')); } } From 22b3b2b6d5d2f5fb7fb586201aac7032fdee6762 Mon Sep 17 00:00:00 2001 From: Luke Murray Date: Fri, 18 Nov 2016 19:50:09 +1100 Subject: [PATCH 6/9] fix pagesize ref --- src/jquery.imgplay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/jquery.imgplay.js b/src/jquery.imgplay.js index da0445b..4b4f8bf 100644 --- a/src/jquery.imgplay.js +++ b/src/jquery.imgplay.js @@ -364,7 +364,7 @@ plugin.frames[i] = img; //buffer.splice(buffer.indexOf(img), 1); drawProgress(); - if (beginPlaying && i == (index + pageSize - 1) && direction == 'forward' && playing == false) { + if (beginPlaying && i == (index + plugin.settings.pageSize - 1) && direction == 'forward' && playing == false) { plugin.play(); } }).prop('src', $img.data('src')); From 73f2a97ba9245602a50cbad52692fc18899c03fe Mon Sep 17 00:00:00 2001 From: Luke Murray Date: Tue, 22 Nov 2016 10:43:53 +1100 Subject: [PATCH 7/9] use a promise for toFrame so we know when the frame requested is loaded. --- src/jquery.imgplay.js | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/src/jquery.imgplay.js b/src/jquery.imgplay.js index 4b4f8bf..8782efa 100644 --- a/src/jquery.imgplay.js +++ b/src/jquery.imgplay.js @@ -195,11 +195,16 @@ if (plugin.frames[i]) { index = i; drawFrame(); + if (index > plugin.frames.length - plugin.settings.pageSize / 2) { + loadMore(); + } + return jQuery.Deferred().resolve(); } else { - loadMore(i); index = i; - drawFrame(); + return loadMore(i).then(function() { + drawFrame(); + }); } }; @@ -242,7 +247,7 @@ if (!plugin.settings.controls) { return; } - if($el.find('.imgplay-controls').length == 0) { + if ($el.find('.imgplay-controls').length == 0) { var controls = $('
'); var progress = $('
'); var buttons = $('
'); @@ -293,7 +298,7 @@ }; var drawFrame = function() { - if(screen != null) { + if (screen != null) { var img = plugin.frames[index]; var $img = $(img); @@ -346,20 +351,31 @@ }; var loadMore = function(fromIdx, beginPlaying) { + var deferred; var loadFrom = fromIdx != undefined ? fromIdx : index; + // load more but start a few frames back to make sure those a buffered + loadFrom -= plugin.settings.pageSize * 0.1; + if (loadFrom < 0) + loadFrom = 0; if (buffer.length) { for(var i = loadFrom; (i < plugin.settings.pageSize + loadFrom && i < buffer.length); i++) { - loadFrame(i, beginPlaying); + var p = loadFrame(i, beginPlaying); + if (i == fromIdx) { + deferred = p; // return the promise of the frame they asked for + } } } + return deferred; }; var loadFrame = function(i, beginPlaying) { + var deferred = jQuery.Deferred(); if (i < buffer.length) { var img = buffer[i]; var $img = $(img); - if($img.data('src')) { + if ($img.data('src')) { + $img.prop('src', $img.data('src')); $img.on('load', function() { plugin.frames[i] = img; //buffer.splice(buffer.indexOf(img), 1); @@ -367,9 +383,11 @@ if (beginPlaying && i == (index + plugin.settings.pageSize - 1) && direction == 'forward' && playing == false) { plugin.play(); } - }).prop('src', $img.data('src')); + deferred.resolve(); + }); } } + return deferred; }; var drawProgress = function() { From 8c118467e64d84e96b3535840435b16590de5e7e Mon Sep 17 00:00:00 2001 From: Luke Murray Date: Wed, 23 Nov 2016 14:19:39 +1100 Subject: [PATCH 8/9] expose a manual way to call resize --- src/jquery.imgplay.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/jquery.imgplay.js b/src/jquery.imgplay.js index 8782efa..6c2c0d5 100644 --- a/src/jquery.imgplay.js +++ b/src/jquery.imgplay.js @@ -303,7 +303,7 @@ var $img = $(img); if (img) { - if($img.prop('naturalHeight') > 0) { + if ($img.prop('naturalHeight') > 0) { var cw = $canvas.width(); var ch = $canvas.height(); var iw = img.width; @@ -408,6 +408,11 @@ $canvas.prop({height: $el.height(), width: $el.width()}); }; + plugin.fitCanvas = function() { + resize(); + }; + + plugin.init(); }; From 0a623140fa7ae3108950cdc28eeb36ab6270a01f Mon Sep 17 00:00:00 2001 From: Luke Murray Date: Thu, 24 Nov 2016 11:24:51 +1100 Subject: [PATCH 9/9] add is buffering callback --- src/jquery.imgplay.js | 45 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 39 insertions(+), 6 deletions(-) diff --git a/src/jquery.imgplay.js b/src/jquery.imgplay.js index 6c2c0d5..f8bbd4b 100644 --- a/src/jquery.imgplay.js +++ b/src/jquery.imgplay.js @@ -19,6 +19,7 @@ var index = 0; var buffer = []; var playTimer = null; + var bufferLoading = []; plugin.settings = {}; @@ -201,8 +202,29 @@ return jQuery.Deferred().resolve(); } else { + // tell caller we are loading their requested frame + if (plugin.settings.onLoading) + plugin.settings.onLoading(true); + index = i; - return loadMore(i).then(function() { + // load more but start a few frames back to make sure those a buffered + loadFrom = i - plugin.settings.pageSize * 0.1; + if (loadFrom < 0) + loadFrom = 0; + + // skip our back load if we already have them + while (plugin.frames[loadFrom]) + loadFrom++; + + return loadMore(loadFrom).then(function() { + // we have loaded their requested frame + if (plugin.settings.onLoading) + plugin.settings.onLoading(false); + + // while loading we may have drawn/requested another frame + if (index != i) + return; + drawFrame(); }); } @@ -324,6 +346,10 @@ } else if (buffer.length) { var wasPlaying = playing; plugin.pause(); + + if (wasPlaying && plugin.settings.onLoading) + plugin.settings.onLoading(true); + loadMore(index, wasPlaying); return; } @@ -353,10 +379,6 @@ var loadMore = function(fromIdx, beginPlaying) { var deferred; var loadFrom = fromIdx != undefined ? fromIdx : index; - // load more but start a few frames back to make sure those a buffered - loadFrom -= plugin.settings.pageSize * 0.1; - if (loadFrom < 0) - loadFrom = 0; if (buffer.length) { for(var i = loadFrom; (i < plugin.settings.pageSize + loadFrom && i < buffer.length); i++) { var p = loadFrame(i, beginPlaying); @@ -369,7 +391,13 @@ }; var loadFrame = function(i, beginPlaying) { + // are we already loading this frame? + if (bufferLoading[i]) + return bufferLoading[i]; + var deferred = jQuery.Deferred(); + bufferLoading[i] = deferred; + if (i < buffer.length) { var img = buffer[i]; var $img = $(img); @@ -380,9 +408,13 @@ plugin.frames[i] = img; //buffer.splice(buffer.indexOf(img), 1); drawProgress(); - if (beginPlaying && i == (index + plugin.settings.pageSize - 1) && direction == 'forward' && playing == false) { + if (beginPlaying && i == (index + (plugin.settings.pageSize / 2)) && playing == false) { + if (plugin.settings.onLoading) + plugin.settings.onLoading(false); + plugin.play(); } + delete bufferLoading[i]; deferred.resolve(); }); } @@ -406,6 +438,7 @@ var resize = function() { $canvas.prop({height: $el.height(), width: $el.width()}); + drawFrame(); }; plugin.fitCanvas = function() {