Use Prettier to format code

.github/ISSUE_TEMPLATE.md

@@ -1,3 +1,3 @@
 - [ ] I have tried with the newest version of editly: `npm i -g editly` or `npm i editly@latest`
 - [ ] I have tried ffmpeg newest stable version
-- [ ] I have searched for existing issues
+- [ ] I have searched for existing issues

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.prettierignore

@@ -0,0 +1,2 @@
+src/BoxBlur.js
+shaders/rainbow-colors.frag

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-organize-imports"]
+}

eslint.config.mjs

@@ -1,10 +1,12 @@
 // @ts-check
 
-import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
+import eslint from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
   eslint.configs.recommended,
   tseslint.configs.recommended,
+  eslintConfigPrettier,
   { ignores: ["dist/"] },
 );

examples/README.md

@@ -63,7 +63,6 @@ git clone https://github.com/mifi/editly-assets.git assets
 - [audio1.json5](https://github.com/mifi/editly/blob/master/examples/audio1.json5)
 - [audio2.json5](https://github.com/mifi/editly/blob/master/examples/audio2.json5)
 
-
 ## Custom HTML5 canvas Javascript
 
 ![](https://github.com/mifi/gifs/raw/master/customCanvas.gif)

examples/alpha.json5

@@ -1,14 +1,25 @@
 {
   // enableFfmpegLog: true,
-  outPath: './alpha.mp4',
+  outPath: "./alpha.mp4",
   clips: [
-    { duration: 2, layers: [
-      { type: 'video', path: './assets/lofoten.mp4', cutFrom: 0.4, cutTo: 2 },
-      { type: 'video', path: './assets/dancer1.webm', resizeMode: 'contain', cutFrom: 0, cutTo: 6 },
-    ] },
-    { layers: [
-      { type: 'video', path: './assets/lofoten.mp4', cutFrom: 0.4, cutTo: 2 },
-      { type: 'video', path: './assets/dancer1.webm', resizeMode: 'contain' },
-    ] },
+    {
+      duration: 2,
+      layers: [
+        { type: "video", path: "./assets/lofoten.mp4", cutFrom: 0.4, cutTo: 2 },
+        {
+          type: "video",
+          path: "./assets/dancer1.webm",
+          resizeMode: "contain",
+          cutFrom: 0,
+          cutTo: 6,
+        },
+      ],
+    },
+    {
+      layers: [
+        { type: "video", path: "./assets/lofoten.mp4", cutFrom: 0.4, cutTo: 2 },
+        { type: "video", path: "./assets/dancer1.webm", resizeMode: "contain" },
+      ],
+    },
   ],
 }

examples/audio-transition.json5

@@ -1,48 +1,75 @@
 {
   // enableFfmpegLog: true,
-  outPath: './audio-transition.mp4',
+  outPath: "./audio-transition.mp4",
   keepSourceAudio: true,
   defaults: {
     duration: 3,
-    transition: { duration: 1, name: 'directional' },
-    layer: { fontPath: './assets/Patua_One/PatuaOne-Regular.ttf' },
+    transition: { duration: 1, name: "directional" },
+    layer: { fontPath: "./assets/Patua_One/PatuaOne-Regular.ttf" },
   },
   clips: [
-    { layers: [
-      { type: 'title-background', text: 'Default transition' },
-      { type: 'audio', path: './assets/sample1.m4a' }
-    ] },
-    { transition: { duration: 0.2 }, layers: [
-      { type: 'title-background', text: 'Fast transition' },
-      { type: 'audio', path: './assets/sample2.m4a' }
-    ] },
-    { transition: { duration: 0 }, layers: [
-      { type: 'title-background', text: 'No transition' },
-      { type: 'audio', path: './assets/sample1.m4a' }
-    ] },
-    { transition: { audioInCurve: 'exp', audioOutCurve: 'exp' }, layers: [
-      { type: 'title-background', text: 'Exp curve' },
-      { type: 'audio', path: './assets/sample2.m4a' }
-    ] },
-    { transition: { name: 'dummy' }, layers: [
-      { type: 'title-background', text: 'Dummy' },
-      { type: 'audio', path: './assets/sample1.m4a' }
-    ] },
-    { transition: { duration: 2 }, layers: [
-      { type: 'title-background', text: 'Too short' },
-      { type: 'audio', path: './assets/sample2.m4a' }
-    ] },
-    { duration: 1, transition: { duration: 2 }, layers: [
-      { type: 'title-background', text: 'Too short' },
-      { type: 'audio', path: './assets/sample2.m4a' }
-    ] },
-    { duration: 1, transition: { duration: 2 }, layers: [
-      { type: 'title-background', text: 'Too short' },
-      { type: 'audio', path: './assets/sample2.m4a' }
-    ] },
-    { layers: [
-      { type: 'title-background', text: 'THE END' },
-      { type: 'audio', path: './assets/sample2.m4a' }
-    ] },
+    {
+      layers: [
+        { type: "title-background", text: "Default transition" },
+        { type: "audio", path: "./assets/sample1.m4a" },
+      ],
+    },
+    {
+      transition: { duration: 0.2 },
+      layers: [
+        { type: "title-background", text: "Fast transition" },
+        { type: "audio", path: "./assets/sample2.m4a" },
+      ],
+    },
+    {
+      transition: { duration: 0 },
+      layers: [
+        { type: "title-background", text: "No transition" },
+        { type: "audio", path: "./assets/sample1.m4a" },
+      ],
+    },
+    {
+      transition: { audioInCurve: "exp", audioOutCurve: "exp" },
+      layers: [
+        { type: "title-background", text: "Exp curve" },
+        { type: "audio", path: "./assets/sample2.m4a" },
+      ],
+    },
+    {
+      transition: { name: "dummy" },
+      layers: [
+        { type: "title-background", text: "Dummy" },
+        { type: "audio", path: "./assets/sample1.m4a" },
+      ],
+    },
+    {
+      transition: { duration: 2 },
+      layers: [
+        { type: "title-background", text: "Too short" },
+        { type: "audio", path: "./assets/sample2.m4a" },
+      ],
+    },
+    {
+      duration: 1,
+      transition: { duration: 2 },
+      layers: [
+        { type: "title-background", text: "Too short" },
+        { type: "audio", path: "./assets/sample2.m4a" },
+      ],
+    },
+    {
+      duration: 1,
+      transition: { duration: 2 },
+      layers: [
+        { type: "title-background", text: "Too short" },
+        { type: "audio", path: "./assets/sample2.m4a" },
+      ],
+    },
+    {
+      layers: [
+        { type: "title-background", text: "THE END" },
+        { type: "audio", path: "./assets/sample2.m4a" },
+      ],
+    },
   ],
 }

examples/audio-volume.json5

@@ -1,11 +1,13 @@
 {
-  outPath: './audio-volume.mp4',
-  width: 200, height: 200,
-  clips: [
-    { duration: 2, layers: [{ type: 'title-background', text: 'Audio output volume' }] },
-  ],
+  outPath: "./audio-volume.mp4",
+  width: 200,
+  height: 200,
+  clips: [{ duration: 2, layers: [{ type: "title-background", text: "Audio output volume" }] }],
   audioTracks: [
-    { path: './assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a', cutFrom: 18 },
+    {
+      path: "./assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a",
+      cutFrom: 18,
+    },
   ],
-  outputVolume: '-10dB',
-}
+  outputVolume: "-10dB",
+}

examples/audio1.json5

@@ -1,26 +1,57 @@
 {
   // enableFfmpegLog: true,
-  outPath: './audio1.mp4',
+  outPath: "./audio1.mp4",
   keepSourceAudio: true,
   defaults: {
     transition: null,
-    layer: { fontPath: './assets/Patua_One/PatuaOne-Regular.ttf' },
+    layer: { fontPath: "./assets/Patua_One/PatuaOne-Regular.ttf" },
   },
   clips: [
-    { duration: 0.5, layers: [{ type: 'video', path: './assets/lofoten.mp4', cutFrom: 0.4, cutTo: 2 }] },
+    {
+      duration: 0.5,
+      layers: [{ type: "video", path: "./assets/lofoten.mp4", cutFrom: 0.4, cutTo: 2 }],
+    },
 
-    { layers: [
-      { type: 'title-background', text: 'test' },
-      { type: 'audio', path: './assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a', cutFrom: 2, cutTo: 5 }] },
+    {
+      layers: [
+        { type: "title-background", text: "test" },
+        {
+          type: "audio",
+          path: "./assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a",
+          cutFrom: 2,
+          cutTo: 5,
+        },
+      ],
+    },
 
-    { layers: [
-      { type: 'video', path: './assets/lofoten.mp4', cutFrom: 0, cutTo: 2, mixVolume: 0 },
-      { type: 'audio', path: './assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a', mixVolume: 0.1 }] },
+    {
+      layers: [
+        { type: "video", path: "./assets/lofoten.mp4", cutFrom: 0, cutTo: 2, mixVolume: 0 },
+        {
+          type: "audio",
+          path: "./assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a",
+          mixVolume: 0.1,
+        },
+      ],
+    },
 
-    { duration: 2, layers: [
-      { type: 'video', path: './assets/lofoten.mp4', cutFrom: 0.4, cutTo: 2 },
-      { type: 'audio', path: './assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a', cutFrom: 2, cutTo: 3, mixVolume: 0.5 }] },
+    {
+      duration: 2,
+      layers: [
+        { type: "video", path: "./assets/lofoten.mp4", cutFrom: 0.4, cutTo: 2 },
+        {
+          type: "audio",
+          path: "./assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a",
+          cutFrom: 2,
+          cutTo: 3,
+          mixVolume: 0.5,
+        },
+      ],
+    },
 
-    { duration: 1.8, layers: [{ type: 'video', path: './assets/lofoten.mp4', cutFrom: 1, cutTo: 2 }] },
+    {
+      duration: 1.8,
+      layers: [{ type: "video", path: "./assets/lofoten.mp4", cutFrom: 1, cutTo: 2 }],
+    },
   ],
 }

examples/audio2.json5

@@ -1,19 +1,23 @@
 {
   // enableFfmpegLog: true,
-  outPath: './audio2.mp4',
-  width: 200, height: 200,
+  outPath: "./audio2.mp4",
+  width: 200,
+  height: 200,
   defaults: {
-    layer: { fontPath: './assets/Patua_One/PatuaOne-Regular.ttf' },
+    layer: { fontPath: "./assets/Patua_One/PatuaOne-Regular.ttf" },
   },
   clips: [
-    { layers: [{ type: 'video', path: './assets/lofoten.mp4', cutFrom: 1, cutTo: 2 }] },
-    { duration: 15, layers: { type: 'title-background', text: 'Audio track' } },
+    { layers: [{ type: "video", path: "./assets/lofoten.mp4", cutFrom: 1, cutTo: 2 }] },
+    { duration: 15, layers: { type: "title-background", text: "Audio track" } },
   ],
   audioNorm: { enable: true, gaussSize: 3, maxGain: 100 },
   clipsAudioVolume: 50,
   audioTracks: [
-    { path: './assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a', cutFrom: 18 },
-    { path: './assets/winxp.mp3', mixVolume: 10, cutFrom: 1, cutTo: 2, start: 2 },
-    { path: './assets/Julen_ribas.m4a', mixVolume: 50, cutTo: 7, start: 5 },
+    {
+      path: "./assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a",
+      cutFrom: 18,
+    },
+    { path: "./assets/winxp.mp3", mixVolume: 10, cutFrom: 1, cutTo: 2, start: 2 },
+    { path: "./assets/Julen_ribas.m4a", mixVolume: 50, cutTo: 7, start: 5 },
   ],
 }

examples/audio3.json5

@@ -1,18 +1,45 @@
 {
-  outPath: './audio3.mp4',
-  width: 200, height: 200,
+  outPath: "./audio3.mp4",
+  width: 200,
+  height: 200,
   defaults: {
-    layer: { fontPath: './assets/Patua_One/PatuaOne-Regular.ttf' },
+    layer: { fontPath: "./assets/Patua_One/PatuaOne-Regular.ttf" },
   },
   clips: [
-    { layers: [{ type: 'video', path: './assets/lofoten.mp4', cutTo: 2 }, { type: 'title', text: 'Arbitrary audio' }] },
-    { duration: 3, layers: [{ type: 'title-background', text: 'Voice starts in 1 sec' }, { type: 'detached-audio', path: './assets/Julen_ribas.m4a', mixVolume: 50, cutFrom: 2, start: 1 }] },
-    { duration: 1, layers: [{ type: 'title-background', text: 'Voice continues over clip 2' }] }, 
-    { duration: 3, layers: [{ type: 'title-background', text: 'Voice continues over clip 3' }] },
-    { duration: 2, layers: [{ type: 'title-background', text: 'XP sound starts' }, { type: 'detached-audio', path: './assets/winxp.mp3', mixVolume: 10, cutFrom: 0.5 }] },
+    {
+      layers: [
+        { type: "video", path: "./assets/lofoten.mp4", cutTo: 2 },
+        { type: "title", text: "Arbitrary audio" },
+      ],
+    },
+    {
+      duration: 3,
+      layers: [
+        { type: "title-background", text: "Voice starts in 1 sec" },
+        {
+          type: "detached-audio",
+          path: "./assets/Julen_ribas.m4a",
+          mixVolume: 50,
+          cutFrom: 2,
+          start: 1,
+        },
+      ],
+    },
+    { duration: 1, layers: [{ type: "title-background", text: "Voice continues over clip 2" }] },
+    { duration: 3, layers: [{ type: "title-background", text: "Voice continues over clip 3" }] },
+    {
+      duration: 2,
+      layers: [
+        { type: "title-background", text: "XP sound starts" },
+        { type: "detached-audio", path: "./assets/winxp.mp3", mixVolume: 10, cutFrom: 0.5 },
+      ],
+    },
   ],
   audioNorm: { enable: true, gaussSize: 3, maxGain: 100 },
   audioTracks: [
-    { path: './assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a', cutFrom: 18 },
+    {
+      path: "./assets/High [NCS Release] - JPB  (No Copyright Music)-R8ZRCXy5vhA.m4a",
+      cutFrom: 18,
+    },
   ],
 }

examples/audioLoop.json5

@@ -1,14 +1,13 @@
 {
-  outPath: './audioLoop.mp4',
-  width: 200, height: 200,
-  audioFilePath: './assets/winxp.mp3',
+  outPath: "./audioLoop.mp4",
+  width: 200,
+  height: 200,
+  audioFilePath: "./assets/winxp.mp3",
   loopAudio: true,
   // Should properly cut off and not crash with EPIPE if loopAudio=false and audio duration is shorter than total duration
   // loopAudio: false,
   defaults: {
-    layer: { fontPath: './assets/Patua_One/PatuaOne-Regular.ttf' },
+    layer: { fontPath: "./assets/Patua_One/PatuaOne-Regular.ttf" },
   },
-  clips: [
-    { duration: 10, layers: [{ type: 'title-background', text: 'Looping audio!' }] },
-  ],
+  clips: [{ duration: 10, layers: [{ type: "title-background", text: "Looping audio!" }] }],
 }