add remotion project

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 dist-electron
+out
 release
 *.local
 

README.md

@@ -1,91 +1,30 @@
-# electron-vite-react
+# Electron + Remotion
 
-[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)
-![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470)
-![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d)
-![GitHub license](https://img.shields.io/github/license/caoxiemeihao/vite-react-electron)
-[![Required Node.JS >= 14.18.0 || >=16.0.0](https://img.shields.io/static/v1?label=node&message=14.18.0%20||%20%3E=16.0.0&logo=node.js&color=3f893e)](https://nodejs.org/about/releases)
+An example project combining Electron, Vite, and Remotion for building video applications.
 
-English | [简体中文](README.zh-CN.md)
-
-## 👀 Overview
-
-📦 Ready out of the box  
-🎯 Based on the official [template-react-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts), project structure will be familiar to you  
-🌱 Easily extendable and customizable  
-💪 Supports Node.js API in the renderer process  
-🔩 Supports C/C++ native addons  
-🐞 Debugger configuration included  
-🖥 Easy to implement multiple windows  
+![Electron + Remotion demo](.github\images\screenshot.png)
 
 ## 🛫 Quick Setup
 
 ```sh
 # clone the project
-git clone https://github.com/electron-vite/electron-vite-react.git
+git clone https://github.com/avibn/electron-vite-remotion.git
 
 # enter the project directory
-cd electron-vite-react
+cd electron-vite-remotion
 
 # install dependency
 npm install
 
 # develop
 npm run dev
-```
-
-## 🐞 Debug
 
-![electron-vite-react-debug.gif](/electron-vite-react-debug.gif)
-
-## 📂 Directory structure
-
-Familiar React application structure, just with `electron` folder on the top :wink:  
-*Files in this folder will be separated from your React application and built into `dist-electron`*  
-
-```tree
-├── electron                                 Electron-related code
-│   ├── main                                 Main-process source code
-│   └── preload                              Preload-scripts source code
-│
-├── release                                  Generated after production build, contains executables
-│   └── {version}
-│       ├── {os}-{os_arch}                   Contains unpacked application executable
-│       └── {app_name}_{version}.{ext}       Installer for the application
-│
-├── public                                   Static assets
-└── src                                      Renderer source code, your React application
+# or to build
+npm run build
 ```
 
-<!--
-## 🚨 Be aware
-
-This template integrates Node.js API to the renderer process by default. If you want to follow **Electron Security Concerns** you might want to disable this feature. You will have to expose needed API by yourself.  
-
-To get started, remove the option as shown below. This will [modify the Vite configuration and disable this feature](https://github.com/electron-vite/vite-plugin-electron-renderer#config-presets-opinionated).
-
-```diff
-# vite.config.ts
-
-export default {
-  plugins: [
-    ...
--   // Use Node.js API in the Renderer-process
--   renderer({
--     nodeIntegration: true,
--   }),
-    ...
-  ],
-}
-```
--->
-
-## 🔧 Additional features
-
-1. electron-updater 👉 [see docs](src/components/update/README.md)
-1. playwright
-
-## ❔ FAQ
+## 📃 Sources
 
-- [C/C++ addons, Node.js modules - Pre-Bundling](https://github.com/electron-vite/vite-plugin-electron-renderer#dependency-pre-bundling)
-- [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron-renderer#dependencies-vs-devdependencies)
+- [Electron + Vite template](https://github.com/electron-vite/electron-vite-react)
+- [Electron + Remotion example](https://github.com/TuanManhCao/electron-remotion)
+- [Electron + Remotion (GitHub) issue](https://github.com/remotion-dev/remotion/issues/2426)

electron-builder.json5

@@ -2,42 +2,34 @@
  * @see https://www.electron.build/configuration/configuration
  */
 {
-  "appId": "YourAppID",
-  "asar": true,
-  "directories": {
-    "output": "release/${version}"
+  appId: "com.electron-vite.remotion",
+  asar: true,
+  directories: {
+    output: "release/${version}",
   },
-  "files": [
-    "dist-electron",
-    "dist"
-  ],
-  "mac": {
-    "artifactName": "${productName}_${version}.${ext}",
-    "target": [
-      "dmg",
-      "zip"
-    ]
+  files: ["dist-electron", "dist", "out"],
+  mac: {
+    artifactName: "${productName}_${version}.${ext}",
+    target: ["dmg", "zip"],
   },
-  "win": {
-    "target": [
+  win: {
+    target: [
       {
-        "target": "nsis",
-        "arch": [
-          "x64"
-        ]
-      }
+        target: "nsis",
+        arch: ["x64"],
+      },
     ],
-    "artifactName": "${productName}_${version}.${ext}"
+    artifactName: "${productName}_${version}.${ext}",
   },
-  "nsis": {
-    "oneClick": false,
-    "perMachine": false,
-    "allowToChangeInstallationDirectory": true,
-    "deleteAppDataOnUninstall": false
+  nsis: {
+    oneClick: false,
+    perMachine: false,
+    allowToChangeInstallationDirectory: true,
+    deleteAppDataOnUninstall: false,
+  },
+  publish: {
+    provider: "generic",
+    channel: "latest",
+    url: "https://github.com/electron-vite/electron-vite-react/releases/download/v0.9.9/",
   },
-  "publish": {
-    "provider": "generic",
-    "channel": "latest",
-    "url": "https://github.com/electron-vite/electron-vite-react/releases/download/v0.9.9/"
-  }
 }

electron/handlers/renderHandler.ts

@@ -0,0 +1,17 @@
+import { ipcMain } from "electron";
+import log from "electron-log/main";
+import render from "../remotion/render";
+
+ipcMain.handle(
+  "RENDER_MEDIA",
+  async (event, inputProps: Record<string, unknown> = {}) => {
+    try {
+      log.info("Rendering media...");
+      await render(inputProps);
+      return true;
+    } catch (error) {
+      log.error("Failed to render media:", error);
+      return false;
+    }
+  }
+);