[Director] Allow custom path on compilation

Author: heristop

.editorconfig

@@ -1,4 +1,4 @@
-[*.{js,ts}]
+[*.{js,ts,json,md}]
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true

.eslintrc.cjs

@@ -11,5 +11,6 @@ module.exports = {
   rules: {
     '@typescript-eslint/dot-notation': 'error',
     'eol-last': 'error',
+    'prettier/prettier': 'error',
   },
 };

.github/workflows/.ci.yml

@@ -1,6 +1,6 @@
 name: Continuous Integration
 
-on: [push, pull_request]
+on: [push, pull_request, workflow_dispatch]
 
 jobs:
   build-and-test:
@@ -13,15 +13,15 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
 
       - uses: actions/setup-node@v3
         with:
           node-version: 18
           cache: 'pnpm'
 
       - name: Install Dependencies
-        run: pnpm install
+        run: pnpm i
 
       - name: Lint
         run: pnpm lint
@@ -31,3 +31,30 @@ jobs:
 
       - name: Run Tests and Collect Coverage
         run: pnpm test:ci
+
+  # publish:
+  #   needs: build-and-test
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout Repository
+  #       uses: actions/checkout@v3
+
+  #     - uses: pnpm/action-setup@v2
+  #       with:
+  #         version: 9
+
+  #     - uses: actions/setup-node@v3
+  #       with:
+  #         node-version: 18
+  #         registry-url: 'https://registry.npmjs.org'
+
+  #     - name: Install Dependencies
+  #       run: pnpm i
+
+  #     - name: Build
+  #       run: pnpm build
+
+  #     - name: Publish
+  #       run: npm publish
+  #       env:
+  #         NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.husky/pre-commit

@@ -1,6 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx lint-staged
-pnpm lint
-pnpm format
+pnpm lint-staged

.lintstagedrc

@@ -0,0 +1,7 @@
+{
+    "*.{ts,json,md,yml}": ["prettier --write"],
+    "*.{ts}": [
+        "pnpm lint",
+        "pnpm test"
+    ]
+}

README.md

@@ -21,7 +21,7 @@ Clone the repository and install the dependencies:
 ```bash
 git clone https://github.com/heristop/ffmpeg-template-assembly.git
 cd ffmpeg-template-assembly
-pnpm install
+pnpm i
 ```
 
 ### Configuration
@@ -30,90 +30,103 @@ Create a JSON file (e.g., `sample.json`) in the `src/shared/templates` directory
 
 ### Usage
 
-1. To use the `ffmpeg-template-assembly`, you can run the compile command with the path to your template JSON file as an argument:
+#### Command Line Interface
+
+To use the `ffmpeg-template-assembly`, you can run the compile command with the path to your template JSON file as an argument:
 
 ```bash
-pnpm compile your-template.json
+pnpm compile src/shared/templates/sample.json
 ```
 
-This will compile the video based on the specified template.
+This will generate a video named `sample_output.mp4` in the `build` directory.
+
+#### Compilation Function
 
-2. You might provide a configuration object and the path to your template JSON file:
+Import the `compile` function from the package and provide a project configuration object:
 
 ```javascript
 import { compile } from 'ffmpeg-template-assembly';
 
-async function buildVideo() {
-  const templateDescriptor = {
-    "global": {
-      "variables": {
-        "videoDemo": "https://file-examples.com/storage/fee4e04377657b56c9a6785/2017/04/file_example_MP4_1280_10MG.mp4",
-        "colorsList": ["#FFFFFF","#000000"]
-      },
-      "orientation": "landscape",
-      "musicEnabled": true,
-      "transitionDuration": 0.5
+// Project Configuration
+const projectConfig: ProjectConfig = {
+  assetsDir: './src/shared/assets',
+  currentLocale: 'en',
+  fields: {
+    form_1_firstname: 'Firsname',
+    form_1_lastname: 'Lastname',
+    form_1_job: 'Developer',
+    form_2_keyword1: 'One',
+    form_2_keyword2: 'Two',
+    form_2_keyword3: 'Three',
+  },
+};
+```
+
+You might provide a template descriptor to the `compile` function to generate a video:
+
+```javascript
+const templateDescriptor = {
+  "global": {
+    "variables": {
+      "videoDemo": "https://github.com/heristop/ffmpeg-template-assembly/raw/develop/src/shared/assets/videos/earth.mp4",
+      "colorsList": ["#FFFFFF","#000000"]
     },
-    "sections": [
-      {
-        "name": "readme_video",
-        "type": "video",
-        "visibility": ["video_segment"],
-        "options": {
-          "backgroundColor": "{{ color1 }}@0.1",
-          "videoUrl": "{{ videoDemo }}",
-          "duration": 0.5,
-          "music_volume_level": 0.4
+    "orientation": "landscape",
+    "musicEnabled": true,
+    "transitionDuration": 0.5
+  },
+  "sections": [
+    {
+      "name": "readme_video",
+      "type": "project_video",
+      "visibility": ["video_segment"],
+      "options": {
+        "backgroundColor": "{{ color1 }}@0.1",
+        "videoUrl": "{{ videoDemo }}",
+        "duration": 0.5,
+        "musicVolumeLevel": 0.4
+      },
+      "filters": [
+        {
+          "type": "drawbox",
+          "values": {
+            "x": 0,
+            "y": 0,
+            "w": 1280,
+            "h": 360,
+            "c": "{{ color2 }}@1",
+            "t": "fill"
+          }
         },
-        "filters": [
-          {
-            "type": "drawbox",
-            "values": {
-              "x": 0,
-              "y": 0,
-              "w": 1280,
-              "h": 360,
-              "c": "{{ color2 }}@1",
-              "t": "fill"
-            }
-          },
-          {
-            "type": "drawtext",
-            "values": {
-              "text": {
-                "en": "{{ form_1_firstname }} {{ form_1_lastname }}"
-              },
-              "fontcolor": "#FFFFFF",
-              "fontsize": 40,
-              "x": "(w-text_w)/2",
-              "y": "(h-text_h)/1.4",
-              "fontfile": "Quicksand.ttf",
-              "alpha": "'if(lt(t,0.5),0,if(lt(t,1.5),(t-0.5)/1,if(lt(t,5),1,if(lt(t,7),(1-(t-6))/1,0))))'"
-            }
-          },
-        ]
-      }
-    ]
-  };
-
-  // Project Configuration
-  const projectConfig: ProjectConfig = {
-    assetsDir: './src/shared/assets',
-    currentLocale: 'en',
-    fields: {
-      form_1_firstname: 'Firsname',
-      form_1_lastname: 'Lastname',
-      form_1_job: 'Tech Lead',
-      form_2_keyword1: 'One',
-      form_2_keyword2: 'Two',
-      form_2_keyword3: 'Three',
-    },
-  };
+        {
+          "type": "drawtext",
+          "values": {
+            "text": {
+              "en": "{{ form_1_firstname }} {{ form_1_lastname }}"
+            },
+            "fontcolor": "#FFFFFF",
+            "fontsize": 40,
+            "x": "(w-text_w)/2",
+            "y": "(h-text_h)/1.4",
+            "fontfile": "Quicksand.ttf",
+            "alpha": "'if(lt(t,0.5),0,if(lt(t,1.5),(t-0.5)/1,if(lt(t,5),1,if(lt(t,7),(1-(t-6))/1,0))))'"
+          }
+        },
+      ]
+    }
+  ]
+};
+
+
+await compile(projectConfig, templateDescriptor);
+```
 
-  await compile(projectConfig, templateDescriptor);
-}
+Or you might provide a path to the template descriptor JSON file:
 
-buildVideo();
+```javascript
+const templatePath = './src/shared/templates/sample.json';
+
+await compile(projectConfig, templatePath);
 ```
 
 ## Running Tests
@@ -124,6 +137,10 @@ To run tests, use the following command:
 pnpm test
 ```
 
+## Architecture
+
+[![Architecture](graph.svg)](graph.svg)
+
 ## Contributing
 
 Contributions are welcome! For major changes, please open an issue first to discuss what you would like to change. Ensure to update tests as appropriate.