Rewrite in Typescript

.gitignore

@@ -108,6 +108,7 @@ dist
 editly-tmp-*/
 *.mp4
 *.gif
+*.png
 
 # Other
 .idea

eslint.config.mjs

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

examples/customCanvas.ts

@@ -0,0 +1,40 @@
+import editly from 'editly';
+import type { CustomCanvasFunctionArgs, CustomCanvasFunctionCallbacks } from 'editly';
+
+function func({ canvas }: CustomCanvasFunctionArgs): CustomCanvasFunctionCallbacks {
+  return {
+    async onRender(progress) {
+      const context = canvas.getContext('2d');
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const radius = 40 * (1 + progress * 0.5);
+
+      context.beginPath();
+      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
+      context.fillStyle = 'hsl(350, 100%, 37%)';
+      context.fill();
+      context.lineWidth = 5;
+      context.strokeStyle = '#ffffff';
+      context.stroke();
+    },
+
+    onClose() {
+      // Cleanup if you initialized anything
+    }
+  };
+}
+
+editly({
+  // fast: true,
+  // outPath: './customCanvas.mp4',
+  outPath: './customCanvas.gif',
+  clips: [
+    {
+      duration: 2,
+      layers: [
+        { type: 'rainbow-colors' },
+        { type: 'canvas', func },
+      ]
+    },
+  ],
+}).catch(console.error);

examples/customFabric.ts

@@ -0,0 +1,35 @@
+import editly from 'editly';
+import { CustomFabricFunctionArgs, CustomFabricFunctionCallbacks } from '../dist/index.js';
+
+function func({ width, height, fabric }: CustomFabricFunctionArgs): CustomFabricFunctionCallbacks {
+  return {
+    async onRender(progress, canvas) {
+      canvas.backgroundColor = 'hsl(33, 100%, 50%)';
+
+      const text = new fabric.Text(`PROGRESS\n${Math.floor(progress * 100)}%`, {
+        originX: 'center',
+        originY: 'center',
+        left: width / 2,
+        top: (height / 2) * (1 + (progress * 0.1 - 0.05)),
+        fontSize: 20,
+        textAlign: 'center',
+        fill: 'white',
+      });
+
+      canvas.add(text);
+    },
+
+    onClose() {
+      // Cleanup if you initialized anything
+    }
+  };
+}
+
+await editly({
+  // fast: true,
+  outPath: './customFabric.gif',
+  // outPath: './customFabric.mp4',
+  clips: [
+    { duration: 2, layers: [{ type: 'fabric', func }] },
+  ],
+});

examples/fabricImagePostProcessing.js → examples/fabricImagePostProcessing.ts

@@ -1,8 +1,8 @@
-import editly from '../index.js';
+import editly from 'editly';
 
 // See https://github.com/mifi/editly/pull/222
 
-editly({
+await editly({
   outPath: './fabricImagePostProcessing.mp4',
   clips: [{
     duration: 4,
@@ -21,21 +21,22 @@ editly({
         width: 0.5,
         height: 0.5,
         fabricImagePostProcessing: async ({ image, fabric, canvas }) => {
-          const circleArgs = {
+          const circleArgs: ConstructorParameters<typeof fabric.Circle>[0] = {
             radius: Math.min(image.width, image.height) * 0.4,
             originX: 'center',
             originY: 'center',
             stroke: 'white',
             strokeWidth: 22,
           };
-          image.setOptions({ clipPath: new fabric.Circle(circleArgs) });
+          image.set({ clipPath: new fabric.Circle(circleArgs) });
           canvas.add(new fabric.Circle({
             ...circleArgs,
             left: image.getCenterPoint().x,
             top: image.getCenterPoint().y,
           }));
         },
       },
-    ] },
+    ]
+  },
   ],
-}).catch(console.error);
+});

examples/renderSingleFrame.ts

@@ -0,0 +1,11 @@
+import JSON from 'json5';
+import fsExtra from 'fs-extra';
+import { renderSingleFrame } from 'editly';
+
+(async () => {
+  await renderSingleFrame({
+    time: 0,
+    clips: JSON.parse(await fsExtra.readFile('./videos.json5', 'utf-8')).clips,
+    outPath: 'renderSingleFrame.png'
+  });
+})().catch(console.error);

examples/run-all-examples.sh

@@ -1,13 +1,10 @@
 #/bin/bash
-set -e
+set -ex
 
-node ../cli.js --json gl.json5
-node ../cli.js --json image.json5
-node ../cli.js --json losslesscut.json5
-node ../cli.js --json resizeHorizontal.json5
-node ../cli.js --json resizeVertical.json5
-node ../cli.js --json speedTest.json5
-node ../cli.js --json subtitle.json5
-node ../cli.js --json transitionEasing.json5
-node ../cli.js --json transparentGradient.json5
-node ../cli.js --json commonFeatures.json5
+node ../dist/cli.js --json gl.json5
+node ../dist/cli.js --json image.json5
+node ../dist/cli.js --json speedTest.json5
+node ../dist/cli.js --json subtitle.json5
+node ../dist/cli.js --json transitionEasing.json5
+node ../dist/cli.js --json transparentGradient.json5
+node ../dist/cli.js --json commonFeatures.json5