Remove pako dependency

Play stickers independently
phoenix0022 · Sep 21, 2020 · c065cb6 · c065cb6
1 parent 37e20d6
commit c065cb6
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 72 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "homepage": "https://evgeny-nadymov.github.io/telegram-react",
   "name": "telegram_react",
-  "version": "0.0.716",
+  "version": "0.0.718",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.9.7",
@@ -14,7 +14,6 @@
     "iframe-resizer": "^4.2.10",
     "notistack": "^0.9.9",
     "opus-media-recorder": "^0.8.0",
-    "pako": "^1.0.11",
     "qr-code-styling": "^1.0.1",
     "react": "^16.12.0",
     "react-cropper": "^1.3.0",

diff --git a/public/tgsticker.js b/public/tgsticker.js
@@ -17,7 +17,6 @@ window.RLottie = (function () {
 
     rlottie.Api = {};
     rlottie.players = Object.create(null);
-    rlottie.urls = Object.create(null);
     rlottie.events = Object.create(null);
     rlottie.frames = new Map();
     rlottie.WORKERS_LIMIT = 4;
@@ -66,16 +65,15 @@ window.RLottie = (function () {
         const checkViewport = !checkViewportDate || (now - checkViewportDate) > 1000;
 
         const shiftPlayer = new Map();
-        for (let key in rlottie.players) {
-            const rlPlayer = rlottie.players[key];
-            const dataKey = `${rlPlayer.url}_${rlPlayer.width}_${rlPlayer.height}`
-            shiftPlayer.set(dataKey, key);
+        for (let reqId in rlottie.players) {
+            const dataKey = getDataKey(reqId);
+            shiftPlayer.set(dataKey, reqId);
         }
+
         for (let key in rlottie.players) {
             const rlPlayer = rlottie.players[key];
             if (rlPlayer) {
-                const { url, width, height } = rlPlayer;
-                const dataKey = `${url}_${width}_${height}`;
+                const dataKey = getDataKey(key);
                 const data = rlottie.frames.get(dataKey);
                 if (data && data.frameCount) {
                     delta = now - data.frameThen;
@@ -105,8 +103,7 @@ window.RLottie = (function () {
         for (const key in rlottie.players) {
             const rlPlayer = rlottie.players[key];
             if (rlPlayer) {
-                const { url, width, height } = rlPlayer;
-                const dataKey = `${url}_${width}_${height}`;
+                const dataKey = getDataKey(key);
                 const data = rlottie.frames.get(dataKey);
                 if (data && data.frameCount) {
                     isEmpty = false;
@@ -198,7 +195,6 @@ window.RLottie = (function () {
         rlPlayer.height = pic_height * curDeviceRatio;
         rlPlayer.imageData = new ImageData(rlPlayer.width, rlPlayer.height);
         rlottie.players[reqId] = rlPlayer;
-        rlottie.urls[reqId] = { url: rlPlayer.url, width: rlPlayer.width, height: rlPlayer.height };
 
         rlPlayer.canvas = document.createElement('canvas');
         rlPlayer.canvas.width = pic_width * curDeviceRatio;
@@ -208,7 +204,7 @@ window.RLottie = (function () {
         rlPlayer.context = rlPlayer.canvas.getContext('2d');
         rlPlayer.forceRender = true;
 
-        const dataKey = `${rlPlayer.url}_${rlPlayer.width}_${rlPlayer.height}`;
+        const dataKey = getDataKey(reqId);
         const data = rlottie.frames.get(dataKey);
         if (!data) {
             const rWorker = rlottieWorkers[curWorkerNum++];
@@ -274,8 +270,17 @@ window.RLottie = (function () {
         rlottieWorkers = [];
     }
 
+    function getDataKey(reqId) {
+        const rlPlayer = rlottie.players[reqId];
+        if (!rlPlayer) return null;
+
+        const { url, width, height } = rlPlayer;
+
+        return `${reqId}_${url}_${width}_${height}`;
+    }
+
     function render(rlPlayer, checkViewport, shift) {
-        const dataKey = `${rlPlayer.url}_${rlPlayer.width}_${rlPlayer.height}`;
+        const dataKey = getDataKey(rlPlayer.reqId);
         const data = rlottie.frames.get(dataKey);
 
         let renderPlayer = true;
@@ -317,12 +322,13 @@ window.RLottie = (function () {
             }
         }
 
-        const frameData = shift?
+        const frameData = shift && renderPlayer?
             data.frameQueue.shift() :
             (data.frameQueue.queue.length > 0 ? data.frameQueue.queue[0] : null);
 
         if (frameData !== null) {
             const { frameNo, frame } = frameData;
+            // console.log('[rlottie] dorender', [frameNo, renderPlayer]);
 
             if (renderPlayer) {
                 doRender(rlPlayer, frame, frameNo);
@@ -389,8 +395,7 @@ window.RLottie = (function () {
     }
 
     function requestFrame(reqId, frameNo, segmentId) {
-        const { url, width, height } = rlottie.urls[reqId];
-        const dataKey = `${url}_${width}_${height}`;
+        const dataKey = getDataKey(reqId);
         const data = rlottie.frames.get(dataKey);
 
         const frame = data.frames[frameNo];
@@ -407,8 +412,7 @@ window.RLottie = (function () {
     }
 
     function onFrame(reqId, frameNo, frame, segmentId) {
-        const { url, width, height } = rlottie.urls[reqId];
-        const dataKey = `${url}_${width}_${height}`;
+        const dataKey = getDataKey(reqId);
         const data = rlottie.frames.get(dataKey);
 
         if (data.segmentId !== segmentId) {
@@ -467,8 +471,7 @@ window.RLottie = (function () {
     }
 
     function onLoaded(reqId, frameCount, fps) {
-        const { url, width, height } = rlottie.urls[reqId];
-        const dataKey = `${url}_${width}_${height}`;
+        const dataKey = getDataKey(reqId);
         const data = rlottie.frames.get(dataKey);
 
         let frameNo = 0;
@@ -522,8 +525,7 @@ window.RLottie = (function () {
     }
 
     rlottie.hasFirstFrame = function (reqId) {
-        const { url, width, height } = rlottie.urls[reqId];
-        const dataKey = `${url}_${width}_${height}`;
+        const dataKey = getDataKey(reqId);
         const data = rlottie.frames.get(dataKey);
 
         return data && Boolean(data.frames[0]);
@@ -599,8 +601,7 @@ window.RLottie = (function () {
         rlPlayer.to = segments[1];
         rlPlayer.paused = false;
 
-        const { url, width, height } = rlPlayer;
-        const dataKey = `${url}_${width}_${height}`;
+        const dataKey = getDataKey(reqId);
         const data = rlottie.frames.get(dataKey);
         if (data.fps) {
             data.frameQueue = new FrameQueue(data.fps / 4);

diff --git a/src/Workers/BlobInflator.js b/src/Workers/BlobInflator.js
@@ -5,33 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { randomString } from './Helpers';
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import PakoWorker from './pako.worker';
-
-const worker = new PakoWorker();
-const handlers = new Map();
-
-worker.onmessage = event => {
-    const { data } = event;
-    if (!data) return;
-
-    const { key, error, result, msg } = data;
-
-    const { resolve, reject } = handlers.get(key);
-    handlers.delete(key);
-
-    if (!error) {
-        resolve(result);
-    } else {
-        reject(msg);
-    }
-};
-
-export async function inflateBlob(blob) {
-    const key = randomString();
-    return new Promise((resolve, reject) => {
-        handlers.set(key, { resolve, reject });
-        worker.postMessage({ key, blob });
-    });
-}
+// import { randomString } from './Helpers';
+// // eslint-disable-next-line import/no-webpack-loader-syntax
+// import PakoWorker from './pako.worker';
+//
+// const worker = new PakoWorker();
+// const handlers = new Map();
+//
+// worker.onmessage = event => {
+//     const { data } = event;
+//     if (!data) return;
+//
+//     const { key, error, result, msg } = data;
+//
+//     const { resolve, reject } = handlers.get(key);
+//     handlers.delete(key);
+//
+//     if (!error) {
+//         resolve(result);
+//     } else {
+//         reject(msg);
+//     }
+// };
+//
+// export async function inflateBlob(blob) {
+//     const key = randomString();
+//     return new Promise((resolve, reject) => {
+//         handlers.set(key, { resolve, reject });
+//         worker.postMessage({ key, blob });
+//     });
+// }
diff --git a/src/Workers/pako.worker.js b/src/Workers/pako.worker.js
@@ -5,18 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable */
-import pako from 'pako';
-
-self.addEventListener('message', ({ data: { key, blob } }) => {
-    const reader = new FileReader();
-    reader.onload = async e => {
-        try {
-            const result = pako.inflate(e.target.result, { to: 'string' });
-            postMessage({ key, result });
-        } catch (err) {
-            postMessage({ key, error: true, msg: err.toString() });
-        }
-    };
-    reader.readAsArrayBuffer(blob);
-});
+// /* eslint-disable */
+// import pako from 'pako';
+//
+// self.addEventListener('message', ({ data: { key, blob } }) => {
+//     const reader = new FileReader();
+//     reader.onload = async e => {
+//         try {
+//             const result = pako.inflate(e.target.result, { to: 'string' });
+//             postMessage({ key, result });
+//         } catch (err) {
+//             postMessage({ key, error: true, msg: err.toString() });
+//         }
+//     };
+//     reader.readAsArrayBuffer(blob);
+// });
diff --git a/sw-config.js b/sw-config.js
@@ -13,7 +13,8 @@ module.exports = {
     navigateFallbackWhitelist: [ /^(?!\/__).*/ ],
     staticFileGlobsIgnorePatterns: [ /\.map$/, /asset-manifest\.json$/ ],
     staticFileGlobs:
-        [   './build/libwebp/*.*',
+        [   './build/rlottie/*.*',
+            './build/libwebp/*.*',
             './build/**/**.html',
             './build/static/js/*.js',
             './build/static/css/*.css',