polotno-node 2.6.7 → 2.6.8

package/dist/index.html

@@ -8,7 +8,7 @@
       }
     </style>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script type="module" crossorigin src="./assets/index-1a4d47fd.js"></script>
+    <script type="module" crossorigin src="./assets/index-a7c43fcd.js"></script>
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno-node",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "description": "Polotno workflow from NodeJS",
   "main": "index.js",
   "scripts": {
@@ -26,17 +26,17 @@
     "gifencoder": "^2.0.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
-    "polotno": "^2.0.2",
+    "polotno": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   },
   "author": "Anton Lavrenov",
   "license": "MIT",
   "dependencies": {
     "@sparticuz/chromium": "117.0.0",
-    "puppeteer": "^21.3.8",
-    "puppeteer-core": "^21.3.8"
+    "puppeteer": "^21.4.0",
+    "puppeteer-core": "^21.4.0"
   },
   "bugs": {
     "url": "https://github.com/polotno-project/polotno-node/issues"

package/video.js

@@ -63,7 +63,7 @@ const videoToDataURL = async (url) => {
 function printProgress(progress) {
   process.stdout.clearLine(0);
   process.stdout.cursorTo(0);
-  process.stdout.write(progress + '%');
+  process.stdout.write('Rendering frame: ' + progress + '%');
 }
 
 module.exports.jsonToVideo = async function jsonToGifFile(page, json, attrs) {
@@ -85,6 +85,9 @@ module.exports.jsonToVideo = async function jsonToGifFile(page, json, attrs) {
     async (json, attrs) => {
       store.loadJSON(json);
       await store.waitLoading();
+      // TODO: we need to active all pages first
+      // disable text fit, as it is already should be processed
+      window.config.unstable_setTextOverflow('resize');
     },
     json,
     attrs || {}
@@ -100,10 +103,19 @@ module.exports.jsonToVideo = async function jsonToGifFile(page, json, attrs) {
   // loop through the images and add each to the animation
   const frames = Math.floor((duration / 1000) * fps);
   for (let i = 0; i < frames; i++) {
-    const currentTime = i * timePerFrame;
+    let currentTime = i * timePerFrame;
+    if (i === 0) {
+      // offset the very first frame to enable animation start
+      currentTime = 1;
+    }
+    if (i === frames - 1) {
+      // offset the very last frame to enable animation end
+      currentTime = duration - 1;
+    }
+
     const dataURL = await page.evaluate(
       async (json, attrs, currentTime) => {
-        store.setCurrentTime(currentTime + 1);
+        store.setCurrentTime(currentTime);
         const currentPage = store.pages.find((p) => {
           return (
             store.currentTime >= p.startTime &&
@@ -121,12 +133,14 @@ module.exports.jsonToVideo = async function jsonToGifFile(page, json, attrs) {
       attrs || {},
       currentTime
     );
-    const progress = ((i / frames) * 100).toFixed(1);
+    const progress = ((i / (frames - 1)) * 100).toFixed(1);
     printProgress(progress);
     fs.mkdirSync('./tmp', { recursive: true });
     fs.writeFileSync(`./tmp/${i}.png`, dataURL.split(',')[1], 'base64');
   }
 
+  console.log('\nRendering video');
+
   await new Promise((resolve, reject) => {
     ffmpeg()
       .input(`./tmp/%d.png`) // Make sure your images are named with numbers, e.g. 1.jpg, 2.jpg, etc.