fix gif issues

README.md

@@ -1,4 +1,4 @@
-# editly 🏄‍♀️
+# EDITLY 🏄‍♀️
 
 [![demo](https://github.com/mifi/gifs/raw/master/commonFeatures.gif)](https://youtu.be/LNeclLkxUEY)
 
@@ -27,6 +27,7 @@ Inspired by [ffmpeg-concat](https://github.com/transitive-bullshit/ffmpeg-concat
 - Overlay transparent images or even videos with alpha channel
 - Show different sub-clips for parts of a clips duration (B-roll)
 - Automatic audio crossfading
+- Picture-in-picture
 
 ## Use cases
 

index.js

@@ -165,7 +165,7 @@ const Editly = async (config = {}) => {
     // https://superuser.com/questions/556029/how-do-i-convert-a-video-to-gif-using-ffmpeg-with-reasonable-quality
     const outputArgs = isGif ? [
       '-vf',
-      `fps=${fps},scale=${width}:${height}:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse`,
+      `format=rgb24,fps=${fps},scale=${width}:${height}:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse`,
       '-loop', 0,
       '-y', outPath,
     ] : [
@@ -193,7 +193,7 @@ const Editly = async (config = {}) => {
 
       ...(audioFilePath ? [...loopAudioArgs, '-i', audioFilePath, '-shortest'] : []),
 
-      '-map', '0:v:0',
+      ...(!isGif ? ['-map', '0:v:0'] : []),
       ...(audioFilePath ? ['-map', '1:a:0'] : []),
 
       ...(audioFilePath ? ['-acodec', 'aac', '-b:a', '128k'] : []),

sources/fabric.js

@@ -43,7 +43,9 @@ function createFabricCanvas({ width, height }) {
 }
 
 async function renderFabricCanvas(canvas) {
+  // console.time('canvas.renderAll');
   canvas.renderAll();
+  // console.timeEnd('canvas.renderAll');
   const rgba = fabricCanvasToRgba(canvas);
   canvas.clear();
   canvas.dispose();