importScripts('rlottie-wasm.js'); //import Module, { allocate, intArrayFromString } from './rlottie-wasm'; const _Module = (self as any).Module as any; const DEFAULT_FPS = 60; export class RLottieItem { private stringOnWasmHeap: any = null; private handle: any = null; private frameCount = 0; private dead = false; //private context: OffscreenCanvasRenderingContext2D; constructor(private reqId: number, jsString: string, private width: number, private height: number, private fps: number/* , private canvas: OffscreenCanvas */) { this.fps = Math.max(1, Math.min(60, fps || DEFAULT_FPS)); //this.context = canvas.getContext('2d'); this.init(jsString); reply('loaded', this.reqId, this.frameCount, this.fps); /* let frame = 0; setInterval(() => { if(frame >= this.frameCount) frame = 0; let _frame = frame++; this.render(_frame, null); }, 1000 / this.fps); */ } private init(jsString: string) { try { this.handle = worker.Api.init(); // @ts-ignore this.stringOnWasmHeap = allocate(intArrayFromString(jsString), 'i8', 0); this.frameCount = worker.Api.loadFromData(this.handle, this.stringOnWasmHeap); worker.Api.resize(this.handle, this.width, this.height); } catch(e) { console.error('init RLottieItem error:', e); reply('error', this.reqId, e); } } public render(frameNo: number, clamped: Uint8ClampedArray) { if(this.dead) return; //return; if(this.frameCount < frameNo || frameNo < 0) { return; } try { worker.Api.render(this.handle, frameNo); var bufferPointer = worker.Api.buffer(this.handle); var data = _Module.HEAPU8.subarray(bufferPointer, bufferPointer + (this.width * this.height * 4)); if(!clamped) { clamped = new Uint8ClampedArray(data); } else { clamped.set(data); } //this.context.putImageData(new ImageData(clamped, this.width, this.height), 0, 0); reply('frame', this.reqId, frameNo, clamped); } catch(e) { console.error('Render error:', e); this.dead = true; reply('error', this.reqId, e); } } public destroy() { this.dead = true; worker.Api.destroy(this.handle); } } class RLottieWorker { public Api: any = {}; public initApi() { this.Api = { init: _Module.cwrap('lottie_init', '', []), destroy: _Module.cwrap('lottie_destroy', '', ['number']), resize: _Module.cwrap('lottie_resize', '', ['number', 'number', 'number']), buffer: _Module.cwrap('lottie_buffer', 'number', ['number']), render: _Module.cwrap('lottie_render', '', ['number', 'number']), loadFromData: _Module.cwrap('lottie_load_from_data', 'number', ['number', 'number']), }; } public init() { this.initApi(); reply('ready'); } } const worker = new RLottieWorker(); _Module.onRuntimeInitialized = function() { worker.init(); }; const items: {[reqId: string]: RLottieItem} = {}; const queryableFunctions = { loadFromData: function(reqId: number, jsString: string, width: number, height: number/* , canvas: OffscreenCanvas */) { try { // ! WARNING, с этой проверкой не все стикеры работают, например - ДУРКА /* if(!/"tgs":\s*?1./.test(jsString)) { throw new Error('Invalid file'); } */ const match = jsString.match(/"fr":\s*?(\d+?),/); const frameRate = +match?.[1] || DEFAULT_FPS; //console.log('Rendering sticker:', reqId, frameRate, 'now rendered:', Object.keys(items).length); items[reqId] = new RLottieItem(reqId, jsString, width, height, frameRate/* , canvas */); } catch(e) { console.error('Invalid file for sticker:', jsString); reply('error', reqId, e); } }, destroy: function(reqId: number) { if(!items.hasOwnProperty(reqId)) { return; } items[reqId].destroy(); delete items[reqId]; }, renderFrame: function(reqId: number, frameNo: number, clamped: Uint8ClampedArray) { //console.log('worker renderFrame', reqId, frameNo, clamped); items[reqId].render(frameNo, clamped); } }; function defaultReply(message: any) { // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly // do something } /** * Returns true when run in WebKit derived browsers. * This is used as a workaround for a memory leak in Safari caused by using Transferable objects to * transfer data between WebWorkers and the main thread. * https://github.com/mapbox/mapbox-gl-js/issues/8771 * * This should be removed once the underlying Safari issue is fixed. * * @private * @param scope {WindowOrWorkerGlobalScope} Since this function is used both on the main thread and WebWorker context, * let the calling scope pass in the global scope object. * @returns {boolean} */ let _isSafari: boolean = null; function isSafari(scope: any) { if(_isSafari == null) { const userAgent = scope.navigator ? scope.navigator.userAgent : null; _isSafari = !!scope.safari || !!(userAgent && (/\b(iPad|iPhone|iPod)\b/.test(userAgent) || (!!userAgent.match('Safari') && !userAgent.match('Chrome')))); } return _isSafari; } function reply(...args: any[]) { if(arguments.length < 1) { throw new TypeError('reply - not enough arguments'); } //if(arguments[0] == 'frame') return; var args = Array.prototype.slice.call(arguments, 1); if(isSafari(self)) { postMessage({ 'queryMethodListener': arguments[0], '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); //args[i] = args[i].buffer; } } postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': args }, transfer); } //postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) }); //console.error(transfer, args); } onmessage = function(oEvent) { if(oEvent.data instanceof Object && oEvent.data.hasOwnProperty('queryMethod') && oEvent.data.hasOwnProperty('queryMethodArguments')) { // @ts-ignore queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments); } else { defaultReply(oEvent.data); } };