809 lines
24 KiB
JavaScript
809 lines
24 KiB
JavaScript
var RLottie = (function () {
|
|
var rlottie = {}, apiInitStarted = false, apiInited = false, initCallbacks = [];
|
|
var deviceRatio = window.devicePixelRatio || 1;
|
|
|
|
var startTime = +(new Date());
|
|
function dT() {
|
|
return '[' + ((+(new Date()) - startTime)/ 1000.0) + '] ';
|
|
}
|
|
|
|
rlottie.Api = {};
|
|
rlottie.players = Object.create(null);;
|
|
rlottie.WORKERS_LIMIT = 4;
|
|
|
|
var reqId = 0;
|
|
var mainLoopAf = false;
|
|
var mainLoopTo = false;
|
|
var mainLoopInited = false;
|
|
var checkViewportDate = false;
|
|
var lastRenderDate = false;
|
|
|
|
var userAgent = window.navigator.userAgent;
|
|
var isSafari = !!window.safari ||
|
|
!!(userAgent && (/\b(iPad|iPhone|iPod)\b/.test(userAgent) || (!!userAgent.match('Safari') && !userAgent.match('Chrome'))));
|
|
var isRAF = isSafari;
|
|
rlottie.isSafari = isSafari;
|
|
|
|
function wasmIsSupported() {
|
|
try {
|
|
if (typeof WebAssembly === 'object' &&
|
|
typeof WebAssembly.instantiate === 'function') {
|
|
const module = new WebAssembly.Module(Uint8Array.of(
|
|
0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00
|
|
));
|
|
if (module instanceof WebAssembly.Module) {
|
|
return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
|
|
}
|
|
}
|
|
} catch (e) {}
|
|
return false;
|
|
}
|
|
|
|
function isSupported() {
|
|
return (
|
|
wasmIsSupported() &&
|
|
typeof Uint8ClampedArray !== 'undefined' &&
|
|
typeof Worker !== 'undefined' &&
|
|
typeof ImageData !== 'undefined'
|
|
);
|
|
}
|
|
|
|
rlottie.isSupported = isSupported();
|
|
|
|
function mainLoop() {
|
|
var key, rlPlayer, delta, rendered;
|
|
var isEmpty = true;
|
|
var now = +Date.now();
|
|
var checkViewport = !checkViewportDate || (now - checkViewportDate) > 1000;
|
|
for (key in rlottie.players) {
|
|
rlPlayer = rlottie.players[key];
|
|
if (rlPlayer &&
|
|
rlPlayer.frameCount) {
|
|
delta = now - rlPlayer.frameThen;
|
|
if (delta > rlPlayer.frameInterval) {
|
|
rendered = render(rlPlayer, checkViewport);
|
|
if (rendered) {
|
|
lastRenderDate = now;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// var delay = !lastRenderDate || now - lastRenderDate < 100 ? 16 : 500;
|
|
var delay = 16;
|
|
if (delay < 20 && isRAF) {
|
|
mainLoopAf = requestAnimationFrame(mainLoop)
|
|
} else {
|
|
mainLoopTo = setTimeout(mainLoop, delay);
|
|
}
|
|
mainLoopInited = true;
|
|
if (checkViewport) {
|
|
checkViewportDate = now;
|
|
}
|
|
}
|
|
function setupMainLoop() {
|
|
var isEmpty = true, forceRender = false, rlPlayer;
|
|
for (key in rlottie.players) {
|
|
rlPlayer = rlottie.players[key];
|
|
if (rlPlayer &&
|
|
rlPlayer.frameCount) {
|
|
if (rlPlayer.forceRender) {
|
|
forceRender = true;
|
|
}
|
|
isEmpty = false;
|
|
break;
|
|
}
|
|
}
|
|
if (mainLoopInited === isEmpty || forceRender) {
|
|
mainLoopAf && cancelAnimationFrame(mainLoopAf);
|
|
mainLoopTo && clearTimeout(mainLoopTo);
|
|
mainLoopInited = false;
|
|
if (!isEmpty) {
|
|
if (isRAF) {
|
|
mainLoopAf = requestAnimationFrame(mainLoop);
|
|
} else {
|
|
mainLoopTo = setTimeout(mainLoop, 0);
|
|
}
|
|
mainLoopInited = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
function initApi(callback) {
|
|
if (apiInited) {
|
|
callback && callback();
|
|
} else {
|
|
callback && initCallbacks.push(callback);
|
|
if (!apiInitStarted) {
|
|
console.log(dT(), 'tgsticker init');
|
|
apiInitStarted = true;
|
|
QueryableWorkerProxy.init('/js/tgsticker-worker.js?14', rlottie.WORKERS_LIMIT, function() {
|
|
apiInited = true;
|
|
for (var i = 0; i < initCallbacks.length; i++) {
|
|
initCallbacks[i]();
|
|
}
|
|
initCallbacks = [];
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function destroyWorkers() {
|
|
QueryableWorkerProxy.destroy();
|
|
apiInitStarted = apiInited = false;
|
|
}
|
|
|
|
function initPlayer(el, options) {
|
|
if (el.rlPlayer) return;
|
|
if (el.tagName.toLowerCase() != 'picture') {
|
|
console.warn('only picture tag allowed');
|
|
return;
|
|
}
|
|
options = options || {};
|
|
var rlPlayer = el.rlPlayer = {};
|
|
rlPlayer.thumb = el.querySelector('img');
|
|
var tgs_sources = el.querySelectorAll('source[type="application/x-tgsticker"]');
|
|
var multi_source = el.hasAttribute('data-multi-source');
|
|
var urls = [], urls_map = {};
|
|
for (var i = 0; i < tgs_sources.length; i++) {
|
|
var tgs_source = tgs_sources[i];
|
|
var url = tgs_source && tgs_source.getAttribute('srcset') || '';
|
|
var frames_align = tgs_source && tgs_source.getAttribute('data-frames-align') || '';
|
|
if (url && !urls_map[url]) {
|
|
urls_map[url] = true;
|
|
urls.push({
|
|
url: url,
|
|
framesAlign: frames_align
|
|
});
|
|
if (!multi_source) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (!urls.length) {
|
|
console.warn('picture source application/x-tgsticker not found');
|
|
return;
|
|
}
|
|
var pic_width = el.clientWidth || el.getAttribute('width');
|
|
var pic_height = el.clientHeight || el.getAttribute('height');
|
|
var curDeviceRatio = options.maxDeviceRatio ? Math.min(options.maxDeviceRatio, deviceRatio) : deviceRatio;
|
|
if (!pic_width || !pic_height) {
|
|
pic_width = pic_height = 256;
|
|
}
|
|
rlPlayer.reqId = ++reqId;
|
|
rlottie.players[reqId] = rlPlayer;
|
|
rlPlayer.el = el;
|
|
rlPlayer.frameNo = false;
|
|
rlPlayer.nextFrameNo = false;
|
|
rlPlayer.frames = {};
|
|
rlPlayer.width = Math.trunc(pic_width * curDeviceRatio);
|
|
rlPlayer.height = Math.trunc(pic_height * curDeviceRatio);
|
|
rlPlayer.workerProxy = QueryableWorkerProxy.create(rlPlayer.reqId, onFrame, onLoaded);
|
|
rlPlayer.options = options;
|
|
rlPlayer.isVisible = true;
|
|
rlPlayer.paused = !!options.noAutoPlay;
|
|
rlPlayer.needPlayOnce = !!options.playOnce;
|
|
rlPlayer.needPlayUntilEnd = !!options.playUntilEnd;
|
|
rlPlayer.repeatCount = false;
|
|
rlPlayer.waitForFirstFrame = false;
|
|
rlPlayer.stopOnFirstFrame = false;
|
|
rlPlayer.stopOnLastFrame = false;
|
|
rlPlayer.forcePlayFrames = 0;
|
|
rlPlayer.times = [];
|
|
rlPlayer.imageData = new ImageData(rlPlayer.width, rlPlayer.height);
|
|
rlPlayer.workerProxy.loadFromData(urls, rlPlayer.width, rlPlayer.height);
|
|
triggerEvent(rlPlayer.el, 'tg:init');
|
|
}
|
|
|
|
function destroyPlayer(el) {
|
|
if (!el.rlPlayer) return;
|
|
var rlPlayer = el.rlPlayer;
|
|
delete rlottie.players[rlPlayer.reqId];
|
|
delete rlPlayer;
|
|
setupMainLoop();
|
|
}
|
|
|
|
function render(rlPlayer, checkViewport) {
|
|
if (!rlPlayer.canvas ||
|
|
rlPlayer.canvas.width == 0 ||
|
|
rlPlayer.canvas.height == 0) {
|
|
return false;
|
|
}
|
|
if (!rlPlayer.forceRender) {
|
|
var focused = window.isFocused ? isFocused() : document.hasFocus();
|
|
if (!focused ||
|
|
rlPlayer.paused ||
|
|
!rlPlayer.isVisible ||
|
|
!rlPlayer.frameCount) {
|
|
return false;
|
|
}
|
|
var isInViewport = rlPlayer.isInViewport;
|
|
if (isInViewport === undefined || checkViewport) {
|
|
var rect = rlPlayer.el.getBoundingClientRect();
|
|
if (rect.bottom < 0 ||
|
|
rect.right < 0 ||
|
|
rect.top > (window.innerHeight || document.documentElement.clientHeight) ||
|
|
rect.left > (window.innerWidth || document.documentElement.clientWidth)) {
|
|
isInViewport = false;
|
|
} else {
|
|
isInViewport = true;
|
|
}
|
|
rlPlayer.isInViewport = isInViewport;
|
|
}
|
|
if (!isInViewport) {
|
|
return false;
|
|
}
|
|
}
|
|
var frame = rlPlayer.frameQueue.shift();
|
|
if (frame !== null) {
|
|
doRender(rlPlayer, frame);
|
|
var nextFrameNo = rlPlayer.nextFrameNo;
|
|
if (rlPlayer.stopOnLastFrame &&
|
|
frame.no == rlPlayer.frameCount - 1) {
|
|
rlPlayer.stopOnLastFrame = false;
|
|
if (!rlPlayer.paused) {
|
|
rlPlayer.paused = true;
|
|
triggerEvent(rlPlayer.el, 'tg:pause');
|
|
}
|
|
}
|
|
if (rlPlayer.stopOnFirstFrame &&
|
|
frame.no == 0) {
|
|
if (rlPlayer.waitForFirstFrame) {
|
|
rlPlayer.waitForFirstFrame = false;
|
|
} else {
|
|
rlPlayer.stopOnFirstFrame = false;
|
|
if (!rlPlayer.paused) {
|
|
rlPlayer.paused = true;
|
|
triggerEvent(rlPlayer.el, 'tg:pause');
|
|
}
|
|
}
|
|
}
|
|
if (nextFrameNo !== false) {
|
|
rlPlayer.nextFrameNo = false;
|
|
requestFrame(rlPlayer.reqId, nextFrameNo);
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function doRender(rlPlayer, frame) {
|
|
rlPlayer.forceRender = false;
|
|
rlPlayer.imageData.data.set(frame.frame);
|
|
rlPlayer.context.putImageData(rlPlayer.imageData, 0, 0);
|
|
rlPlayer.frameNo = frame.no;
|
|
var now = +(new Date());
|
|
if (rlPlayer.frameThen) {
|
|
rlPlayer.times.push(now - rlPlayer.frameThen)
|
|
}
|
|
rlPlayer.frameThen = now - (now % rlPlayer.frameInterval);
|
|
if (rlPlayer.thumb) {
|
|
rlPlayer.el.removeChild(rlPlayer.thumb);
|
|
delete rlPlayer.thumb;
|
|
}
|
|
// console.log(dT(), '['+rlPlayer.reqId+']', 'render frame#'+frame.no);
|
|
}
|
|
|
|
function requestFrame(reqId, frameNo) {
|
|
var rlPlayer = rlottie.players[reqId];
|
|
var frame = rlPlayer.frames[frameNo];
|
|
if (frame) {
|
|
// console.log(dT(), '['+reqId+']', 'request frame#'+frameNo+' (cache)');
|
|
onFrame(reqId, frameNo, frame);
|
|
} else {
|
|
// console.log(dT(), '['+reqId+']', 'request frame#'+frameNo+' (worker)');
|
|
rlPlayer.workerProxy.renderFrame(frameNo, !isSafari);
|
|
}
|
|
}
|
|
|
|
function onFrame(reqId, frameNo, frame) {
|
|
var rlPlayer = rlottie.players[reqId];
|
|
if (!rlPlayer || !rlPlayer.frames) {
|
|
return;
|
|
}
|
|
if (!rlPlayer.frames[frameNo] &&
|
|
(!frameNo || (rlPlayer.options.cachingModulo && ((reqId + frameNo) % rlPlayer.options.cachingModulo)))) {
|
|
rlPlayer.frames[frameNo] = new Uint8ClampedArray(frame)
|
|
}
|
|
var prevNo = frameNo > 0 ? frameNo - 1 : rlPlayer.frameCount - 1;
|
|
var lastQueueFrame = rlPlayer.frameQueue.last();
|
|
if (lastQueueFrame &&
|
|
lastQueueFrame.no != prevNo) {
|
|
return;
|
|
}
|
|
rlPlayer.frameQueue.push({
|
|
no: frameNo,
|
|
frame: frame
|
|
});
|
|
var nextFrameNo = ++frameNo;
|
|
if (nextFrameNo >= rlPlayer.frameCount) {
|
|
nextFrameNo = 0;
|
|
if (rlPlayer.times.length) {
|
|
// var avg = 0;
|
|
// for (var i = 0; i < rlPlayer.times.length; i++) {
|
|
// avg += rlPlayer.times[i] / rlPlayer.times.length;
|
|
// }
|
|
// console.log('avg time: ' + avg + ', ' + rlPlayer.fps);
|
|
rlPlayer.times = [];
|
|
}
|
|
}
|
|
if (rlPlayer.frameQueue.needsMore()) {
|
|
requestFrame(reqId, nextFrameNo)
|
|
} else {
|
|
rlPlayer.nextFrameNo = nextFrameNo;
|
|
}
|
|
}
|
|
|
|
function onLoaded(reqId, frameCount, fps) {
|
|
var rlPlayer = rlottie.players[reqId];
|
|
|
|
rlPlayer.canvas = document.createElement('canvas');
|
|
rlPlayer.canvas.width = rlPlayer.width;
|
|
rlPlayer.canvas.height = rlPlayer.height;
|
|
rlPlayer.el.appendChild(rlPlayer.canvas);
|
|
rlPlayer.context = rlPlayer.canvas.getContext('2d');
|
|
|
|
rlPlayer.fps = fps;
|
|
rlPlayer.frameInterval = 1000 / rlPlayer.fps;
|
|
rlPlayer.frameThen = Date.now();
|
|
rlPlayer.frameCount = frameCount;
|
|
rlPlayer.forceRender = true;
|
|
rlPlayer.frameQueue = new FrameQueue(fps / 4);
|
|
setupMainLoop();
|
|
requestFrame(reqId, 0);
|
|
triggerEvent(rlPlayer.el, 'tg:load');
|
|
if (frameCount > 0) {
|
|
if (rlPlayer.needPlayOnce) {
|
|
delete rlPlayer.needPlayOnce;
|
|
delete rlPlayer.needPlayUntilEnd;
|
|
rlPlayer.paused = false;
|
|
rlPlayer.stopOnFirstFrame = true;
|
|
rlPlayer.stopOnLastFrame = false;
|
|
if (rlPlayer.frameNo === false ||
|
|
rlPlayer.frameNo > 0) {
|
|
rlPlayer.waitForFirstFrame = true;
|
|
}
|
|
} else if (rlPlayer.needPlayUntilEnd) {
|
|
delete rlPlayer.needPlayOnce;
|
|
delete rlPlayer.needPlayUntilEnd;
|
|
rlPlayer.paused = false;
|
|
rlPlayer.stopOnFirstFrame = false;
|
|
rlPlayer.stopOnLastFrame = true;
|
|
}
|
|
}
|
|
if (!rlPlayer.paused) {
|
|
triggerEvent(rlPlayer.el, 'tg:play');
|
|
}
|
|
}
|
|
|
|
rlottie.init = function(el, options) {
|
|
if (!rlottie.isSupported) {
|
|
return false;
|
|
}
|
|
initApi(function() {
|
|
el && initPlayer(el, options);
|
|
});
|
|
}
|
|
|
|
rlottie.destroy = function(el) {
|
|
destroyPlayer(el);
|
|
}
|
|
|
|
rlottie.playOnce = function(el) {
|
|
if (el && el.rlPlayer) {
|
|
var rlPlayer = el.rlPlayer;
|
|
if (rlPlayer.frameCount > 0) {
|
|
rlPlayer.stopOnFirstFrame = true;
|
|
rlPlayer.stopOnLastFrame = false;
|
|
if (rlPlayer.frameNo > 0) {
|
|
rlPlayer.waitForFirstFrame = true;
|
|
}
|
|
if (rlPlayer.paused) {
|
|
rlPlayer.paused = false;
|
|
triggerEvent(el, 'tg:play');
|
|
}
|
|
} else {
|
|
rlPlayer.needPlayOnce = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
rlottie.playUntilEnd = function(el) {
|
|
if (el && el.rlPlayer) {
|
|
var rlPlayer = el.rlPlayer;
|
|
if (rlPlayer.frameCount > 0) {
|
|
rlPlayer.stopOnFirstFrame = false;
|
|
rlPlayer.stopOnLastFrame = true;
|
|
if (rlPlayer.paused) {
|
|
rlPlayer.paused = false;
|
|
triggerEvent(el, 'tg:play');
|
|
}
|
|
} else {
|
|
rlPlayer.needPlayUntilEnd = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
rlottie.play = function(el, reset) {
|
|
if (el && el.rlPlayer) {
|
|
if (reset) {
|
|
rlottie.reset(el);
|
|
}
|
|
el.rlPlayer.paused = false;
|
|
}
|
|
}
|
|
|
|
rlottie.pause = function(el) {
|
|
if (el && el.rlPlayer) {
|
|
el.rlPlayer.paused = true;
|
|
}
|
|
}
|
|
|
|
rlottie.reset = function(el) {
|
|
if (el && el.rlPlayer) {
|
|
var rlPlayer = el.rlPlayer;
|
|
rlPlayer.frameQueue.clear();
|
|
rlPlayer.forceRender = true;
|
|
requestFrame(rlPlayer.reqId, 0);
|
|
setupMainLoop();
|
|
}
|
|
}
|
|
|
|
rlottie.destroyWorkers = function() {
|
|
destroyWorkers();
|
|
}
|
|
|
|
return rlottie;
|
|
}());
|
|
|
|
|
|
var QueryableWorkerProxy = (function() {
|
|
var workerproxy = {};
|
|
var proxyId = 0;
|
|
var wReqId = 0;
|
|
var rObjs = {};
|
|
var wrMap = {};
|
|
var proxies = {};
|
|
var rlottieWorkers = [], curWorkerNum = 0;
|
|
|
|
var startTime = +(new Date());
|
|
function dT() {
|
|
return '[' + ((+(new Date()) - startTime)/ 1000.0) + '] ';
|
|
}
|
|
|
|
function Proxy(playerId, onFrame, onLoaded) {
|
|
this.proxyId = ++proxyId;
|
|
this.playerId = playerId;
|
|
this.onFrame = onFrame;
|
|
this.onLoaded = onLoaded;
|
|
this.items = [];
|
|
this.itemsMap = {};
|
|
proxies[this.proxyId] = this;
|
|
return this;
|
|
};
|
|
Proxy.prototype.loadFromData = function(urls, width, height) {
|
|
if (this.items.length > 0) {
|
|
console.warn('already loaded');
|
|
return;
|
|
}
|
|
this.clampedSize = width * height * 4;
|
|
for (var i = 0; i < urls.length; i++) {
|
|
var url = urls[i];
|
|
var _wReqId = ++wReqId;
|
|
var worker = rlottieWorkers[curWorkerNum++];
|
|
if (curWorkerNum >= rlottieWorkers.length) {
|
|
curWorkerNum = 0;
|
|
}
|
|
worker.sendQuery('loadFromData', _wReqId, url.url, width, height);
|
|
var item = {
|
|
reqId: _wReqId,
|
|
worker: worker,
|
|
url: url.url,
|
|
loaded: false,
|
|
clamped: new Uint8ClampedArray(this.clampedSize),
|
|
frameLoaded: {}
|
|
};
|
|
if (url.framesAlign) {
|
|
item.framesAlign = url.framesAlign;
|
|
}
|
|
this.items.push(item);
|
|
this.itemsMap[_wReqId] = item;
|
|
wrMap[_wReqId] = this.proxyId;
|
|
}
|
|
if (this.items.length > 1) {
|
|
this.canvas = document.createElement('canvas');
|
|
this.canvas.width = width;
|
|
this.canvas.height = height;
|
|
this.context = this.canvas.getContext('2d');
|
|
this.imageData = new ImageData(width, height);
|
|
}
|
|
};
|
|
Proxy.prototype.renderFrame = function(frameNo, need_clamped) {
|
|
for (var i = 0; i < this.items.length; i++) {
|
|
var item = this.items[i];
|
|
var realFrameNo = frameNo;
|
|
if (item.framesAlign == 'right') {
|
|
realFrameNo = frameNo - (this.frameCount - item.frameCount);
|
|
}
|
|
if (need_clamped) {
|
|
if(!item.clamped.length) { // fix detached
|
|
item.clamped = new Uint8ClampedArray(this.clampedSize);
|
|
}
|
|
item.worker.sendQuery('renderFrame', item.reqId, realFrameNo, item.clamped);
|
|
} else {
|
|
item.worker.sendQuery('renderFrame', item.reqId, realFrameNo);
|
|
}
|
|
// console.log(dT(), '['+this.playerId+'.'+item.reqId+']', 'request frame#'+frameNo+' (worker)');
|
|
}
|
|
};
|
|
|
|
function onFrame(wReqId, realFrameNo, frame) {
|
|
var proxyId = wrMap[wReqId];
|
|
var proxy = proxies[proxyId];
|
|
var item = proxy.itemsMap[wReqId];
|
|
var frameNo = realFrameNo;
|
|
if (item.framesAlign == 'right') {
|
|
frameNo = realFrameNo + (proxy.frameCount - item.frameCount);
|
|
}
|
|
// console.log(dT(), '['+proxy.playerId+'.'+item.reqId+']', 'onframe#'+frameNo+' (worker)');
|
|
item.frameLoaded[frameNo] = frame;
|
|
var finished = true;
|
|
for (var i = 0; i < proxy.items.length; i++) {
|
|
var item = proxy.items[i];
|
|
var loadedFrame = item.frameLoaded[frameNo];
|
|
if (!loadedFrame) {
|
|
finished = false;
|
|
break;
|
|
}
|
|
}
|
|
if (finished) {
|
|
if (proxy.items.length == 1) {
|
|
var loadedFrame = proxy.items[0].frameLoaded[frameNo];
|
|
proxy.onFrame(proxy.playerId, frameNo, loadedFrame);
|
|
delete proxy.items[0].frameLoaded[frameNo];
|
|
} else {
|
|
var promises = [];
|
|
for (var i = 0; i < proxy.items.length; i++) {
|
|
var item = proxy.items[i];
|
|
var loadedFrame = item.frameLoaded[frameNo];
|
|
proxy.imageData.data.set(loadedFrame);
|
|
var promise = createImageBitmap(proxy.imageData);
|
|
promises.push(promise);
|
|
delete item.frameLoaded[frameNo];
|
|
}
|
|
Promise.all(promises).then(function(bitmaps) {
|
|
proxy.context.clearRect(0, 0, proxy.canvas.width, proxy.canvas.height);
|
|
for (var i = 0; i < bitmaps.length; i++) {
|
|
proxy.context.drawImage(bitmaps[i], 0, 0);
|
|
}
|
|
var imageData = proxy.context.getImageData(0, 0, proxy.canvas.width, proxy.canvas.height);
|
|
proxy.onFrame(proxy.playerId, frameNo, imageData.data);
|
|
});
|
|
}
|
|
} else {
|
|
delete frameDatas;
|
|
}
|
|
}
|
|
|
|
function onLoaded(wReqId, frameCount, fps) {
|
|
var proxyId = wrMap[wReqId];
|
|
var proxy = proxies[proxyId];
|
|
var item = proxy.itemsMap[wReqId];
|
|
item.loaded = true;
|
|
item.frameCount = frameCount;
|
|
item.fps = fps;
|
|
var finished = true;
|
|
frameCount = null; fps = null;
|
|
for (var i = 0; i < proxy.items.length; i++) {
|
|
var item = proxy.items[i];
|
|
if (!item.framesAlign) {
|
|
if (frameCount === null) {
|
|
frameCount = item.frameCount;
|
|
} else if (frameCount !== false && frameCount !== item.frameCount) {
|
|
frameCount = false;
|
|
}
|
|
}
|
|
if (fps === null) {
|
|
fps = item.fps;
|
|
} else if (fps !== false && fps !== item.fps) {
|
|
fps = false;
|
|
}
|
|
if (!item.loaded) {
|
|
finished = false;
|
|
break;
|
|
}
|
|
}
|
|
if (finished) {
|
|
if (frameCount === null) {
|
|
console.warn('Frame count not defined'); return;
|
|
}
|
|
if (frameCount === false) {
|
|
console.warn('Frame count is different'); return;
|
|
}
|
|
if (fps === null) {
|
|
console.warn('FPS not defined'); return;
|
|
}
|
|
if (fps === false) {
|
|
console.warn('FPS is different'); return;
|
|
}
|
|
proxy.frameCount = frameCount;
|
|
proxy.fps = fps;
|
|
proxy.onLoaded(proxy.playerId, frameCount, fps);
|
|
}
|
|
}
|
|
|
|
workerproxy.init = function(worker_url, workers_limit, callback) {
|
|
var workersRemain = workers_limit;
|
|
var firstWorker = rlottieWorkers[0] = new QueryableWorker(worker_url);
|
|
firstWorker.addListener('ready', function () {
|
|
console.log(dT(), 'worker #0 ready');
|
|
firstWorker.addListener('frame', onFrame);
|
|
firstWorker.addListener('loaded', onLoaded);
|
|
--workersRemain;
|
|
if (!workersRemain) {
|
|
console.log(dT(), 'workers ready');
|
|
callback && callback();
|
|
} else {
|
|
for (var workerNum = 1; workerNum < workers_limit; workerNum++) {
|
|
(function(workerNum) {
|
|
var rlottieWorker = rlottieWorkers[workerNum] = new QueryableWorker(worker_url);
|
|
rlottieWorker.addListener('ready', function () {
|
|
console.log(dT(), 'worker #' + workerNum + ' ready');
|
|
rlottieWorker.addListener('frame', onFrame);
|
|
rlottieWorker.addListener('loaded', onLoaded);
|
|
--workersRemain;
|
|
if (!workersRemain) {
|
|
console.log(dT(), 'workers ready');
|
|
callback && callback();
|
|
}
|
|
});
|
|
})(workerNum);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
workerproxy.create = function(playerId, onFrame, onLoaded) {
|
|
return new Proxy(playerId, onFrame, onLoaded);
|
|
};
|
|
workerproxy.destroy = function() {
|
|
for (var workerNum = 0; workerNum < rlottieWorkers.length; workerNum++) {
|
|
rlottieWorkers[workerNum].terminate();
|
|
console.log('worker #' + workerNum + ' terminated');
|
|
}
|
|
console.log('workers destroyed');
|
|
rlottieWorkers = [];
|
|
};
|
|
|
|
return workerproxy;
|
|
}());
|
|
|
|
function QueryableWorker(url, defaultListener, onError) {
|
|
var instance = this;
|
|
var worker = new Worker(url);
|
|
var listeners = {};
|
|
|
|
this.defaultListener = defaultListener || function() {};
|
|
|
|
if (onError) {worker.onerror = onError;}
|
|
|
|
this.postMessage = function(message) {
|
|
worker.postMessage(message);
|
|
}
|
|
|
|
this.terminate = function() {
|
|
worker.terminate();
|
|
}
|
|
|
|
this.addListener = function(name, listener) {
|
|
listeners[name] = listener;
|
|
}
|
|
|
|
this.removeListener = function(name) {
|
|
delete listeners[name];
|
|
}
|
|
|
|
/*
|
|
This functions takes at least one argument, the method name we want to query.
|
|
Then we can pass in the arguments that the method needs.
|
|
*/
|
|
this.sendQuery = function(queryMethod) {
|
|
if (arguments.length < 1) {
|
|
throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
|
|
return;
|
|
}
|
|
var queryMethod = arguments[0];
|
|
var args = Array.prototype.slice.call(arguments, 1);
|
|
if (RLottie.isSafari) {
|
|
worker.postMessage({
|
|
'queryMethod': queryMethod,
|
|
'queryMethodArguments': args
|
|
});
|
|
} else {
|
|
var transfer = [];
|
|
for(var i = 0; i < args.length; i++) {
|
|
if(args[i] instanceof ArrayBuffer) {
|
|
transfer.push(args[i]);
|
|
}
|
|
|
|
if(args[i].buffer && args[i].buffer instanceof ArrayBuffer) {
|
|
transfer.push(args[i].buffer);
|
|
}
|
|
}
|
|
|
|
worker.postMessage({
|
|
'queryMethod': queryMethod,
|
|
'queryMethodArguments': args
|
|
}, transfer);
|
|
}
|
|
}
|
|
|
|
worker.onmessage = function(event) {
|
|
if (event.data instanceof Object &&
|
|
event.data.hasOwnProperty('queryMethodListener') &&
|
|
event.data.hasOwnProperty('queryMethodArguments')) {
|
|
listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
|
|
} else {
|
|
this.defaultListener.call(instance, event.data);
|
|
}
|
|
}
|
|
}
|
|
|
|
function FrameQueue(maxLength) {
|
|
this.queue = [];
|
|
this.maxLength = maxLength;
|
|
}
|
|
|
|
FrameQueue.prototype.needsMore = function frameQueueNeedsMore() {
|
|
return this.queue.length < this.maxLength;
|
|
}
|
|
|
|
FrameQueue.prototype.empty = function frameQueueEmpty() {
|
|
return !this.queue.length;
|
|
}
|
|
|
|
FrameQueue.prototype.notEmpty = function frameQueueEmpty() {
|
|
return this.queue.length > 0;
|
|
}
|
|
|
|
FrameQueue.prototype.push = function frameQueuePush(element) {
|
|
return this.queue.push(element);
|
|
}
|
|
|
|
FrameQueue.prototype.shift = function frameQueueShift() {
|
|
return this.queue.length ? this.queue.shift() : null;
|
|
}
|
|
|
|
FrameQueue.prototype.last = function frameQueueLast(element) {
|
|
return this.queue.length ? this.queue[this.queue.length - 1] : null;
|
|
}
|
|
|
|
FrameQueue.prototype.clear = function frameQueueClear() {
|
|
this.queue = [];
|
|
return true;
|
|
}
|
|
|
|
|
|
if (!this.CustomEvent || typeof this.CustomEvent === "object") {
|
|
(function() {
|
|
this.CustomEvent = function CustomEvent(type, eventInitDict) {
|
|
var event;
|
|
eventInitDict = eventInitDict || {bubbles: false, cancelable: false, detail: undefined};
|
|
|
|
try {
|
|
event = document.createEvent('CustomEvent');
|
|
event.initCustomEvent(type, eventInitDict.bubbles, eventInitDict.cancelable, eventInitDict.detail);
|
|
} catch (error) {
|
|
event = document.createEvent('Event');
|
|
event.initEvent(type, eventInitDict.bubbles, eventInitDict.cancelable);
|
|
event.detail = eventInitDict.detail;
|
|
}
|
|
|
|
return event;
|
|
};
|
|
})();
|
|
}
|
|
|
|
function triggerEvent(el, event_type, init_dict) {
|
|
var event = new CustomEvent(event_type, init_dict);
|
|
el.dispatchEvent(event);
|
|
}
|