.prettierrc

@@ -1,8 +1,8 @@
 {
-	"useTabs": true,
+    "useTabs": true,
-	"tabWidth": 4,
+    "tabWidth": 4,
-	"trailingComma": "none",
+    "trailingComma": "none",
-	"singleQuote": false,
+    "singleQuote": false,
-	"printWidth": 100,
+    "printWidth": 100,
-	"endOfLine": "lf"
+    "endOfLine": "lf"
 }

bunfig.toml

@@ -1,2 +0,0 @@
-[install.scopes]
-"@jsr" = "https://npm.jsr.io"

components/settings/IconWithText.tsx

@@ -7,21 +7,13 @@ export default function IconWithText() {
 	const { t } = useTranslation();
 	return (
 		<div className="flex">
-			<img src={imgUrl} className="h-20 w-20 mr-2" alt="OpenRewind icon" />
+			<img src={imgUrl} className="h-20 w-20 mr-2" alt="OpenRewind icon"/>
 			<div className="flex flex-col justify-start w-auto h-[4.2rem] overflow-hidden mt-1">
 				<span className="text-2xl font-semibold">OpenRewind</span>
-				<span
+				<span className="text-sm text-gray-700 dark:text-gray-200
-					className="text-sm text-gray-700 dark:text-gray-200
+							font-medium ml-0.5">{t("settings.version", { version: pjson.version })}</span>
-							font-medium ml-0.5"
+				<span className="text-xs text-gray-700 dark:text-gray-200
-				>
+							font-medium ml-0.5">{t("settings.copyright")}</span>
-					{t("settings.version", { version: pjson.version })}
-				</span>
-				<span
-					className="text-xs text-gray-700 dark:text-gray-200
-							font-medium ml-0.5"
-				>
-					{t("settings.copyright")}
-				</span>
 			</div>
 		</div>
 	);

components/settings/MenuItem.tsx

@@ -1,14 +1,10 @@
 import { MouseEventHandler } from "react";
 import { Icon } from "@iconify-icon/react";
 
-const MenuItem = ({
+const MenuItem = ({ icon, text, onClick }: {
-	icon,
+	icon: string,
-	text,
+	text: string,
-	onClick
+	onClick: MouseEventHandler<HTMLDivElement>
-}: {
-	icon: string;
-	text: string;
-	onClick: MouseEventHandler<HTMLDivElement>;
 }) => {
 	return (
 		<div

components/settings/OpenSourceNote.tsx

@@ -7,8 +7,10 @@ export default function OpenSourceNote() {
 				OpenRewind is open source software licensed under
 				<a href="https://www.gnu.org/licenses/gpl-3.0.html">GPL 3.0</a>.<br />
 				Source code is avaliable at
-				<a href="https://github.com/alikia2x/openrewind">GitHub</a>.
+				<a href="https://github.com/alikia2x/openrewind">
+					GitHub
+				</a>.
 			</Trans>
 		</p>
-	);
+	)
 }

components/settings/SettingsGroup.tsx

@@ -1,15 +1,9 @@
 import * as React from "react";
 import { useRef } from "react";
 
-const SettingsGroup = ({
+const SettingsGroup = (
-	children,
+	{ children, groupName, addGroupRef }:
-	groupName,
+		{ children: React.ReactNode, groupName: string, addGroupRef: Function }) => {
-	addGroupRef
-}: {
-	children: React.ReactNode;
-	groupName: string;
-	addGroupRef: Function;
-}) => {
 	const groupRef = useRef(null);
 
 	React.useEffect(() => {

components/settings/Title.tsx

@@ -2,7 +2,9 @@ import { useTranslation } from "react-i18next";
 
 const Title = ({ i18nKey }: { i18nKey: string }) => {
 	const { t } = useTranslation();
-	return <h1 className="text-3xl font-bold leading-[3rem]">{t(i18nKey)}</h1>;
+	return (
-};
+		<h1 className="text-3xl font-bold leading-[3rem]">{t(i18nKey)}</h1>
+	);
+}
 
 export default Title;

docs/database-changelog.md

@@ -22,14 +22,11 @@ ALTER TABLE encoding_task RENAME COLUMN createAt TO createdAt;
 The `createdAt` column was updated to store Unix timestamps instead of formatted timestamps.
 
 ```typescript
-const rows = db.prepare(`SELECT id, createdAt FROM encoding_task`).all() as {
+const rows = db.prepare(`SELECT id, createdAt FROM encoding_task`).all() as { [x: string]: unknown; id: unknown; }[];
-	[x: string]: unknown;
-	id: unknown;
-}[];
 const updateStmt = db.prepare(`UPDATE encoding_task SET createdAt_new = ? WHERE id = ?`);
 rows.forEach((row) => {
-	const unixTimestamp = convertTimestampToUnix(row.createdAt as string);
+    const unixTimestamp = convertTimestampToUnix(row.createdAt as string);
-	updateStmt.run(unixTimestamp, row.id);
+    updateStmt.run(unixTimestamp, row.id);
 });
 ```
 
@@ -48,14 +45,11 @@ ALTER TABLE frame RENAME COLUMN createAt TO createdAt;
 The `createdAt` column was updated to store Unix timestamps instead of formatted timestamps.
 
 ```typescript
-const rows = db.prepare(`SELECT id, createdAt FROM frame`).all() as {
+const rows = db.prepare(`SELECT id, createdAt FROM frame`).all() as { [x: string]: unknown; id: unknown; }[];
-	[x: string]: unknown;
-	id: unknown;
-}[];
 const updateStmt = db.prepare(`UPDATE frame SET createdAt_new = ? WHERE id = ?`);
 rows.forEach((row) => {
-	const unixTimestamp = convertTimestampToUnix(row.createdAt as string);
+    const unixTimestamp = convertTimestampToUnix(row.createdAt as string);
-	updateStmt.run(unixTimestamp, row.id);
+    updateStmt.run(unixTimestamp, row.id);
 });
 ```
 
@@ -75,15 +69,12 @@ ALTER TABLE segments RENAME COLUMN endAt TO endedAt;
 The `startedAt` and `endedAt` columns were updated to store Unix timestamps instead of formatted timestamps.
 
 ```typescript
-const rows = db.prepare(`SELECT id, startedAt, endedAt FROM segments`).all() as {
+const rows = db.prepare(`SELECT id, startedAt, endedAt FROM segments`).all() as { [x: string]: unknown; id: unknown; }[];
-	[x: string]: unknown;
-	id: unknown;
-}[];
 const updateStart = db.prepare(`UPDATE segments SET startedAt_new = ? WHERE id = ?`);
 const updateEnd = db.prepare(`UPDATE segments SET endedAt_new = ? WHERE id = ?`);
 rows.forEach((row) => {
-	updateStart.run(convertTimestampToUnix(row.startedAt as string), row.id);
+    updateStart.run(convertTimestampToUnix(row.startedAt as string), row.id);
-	updateEnd.run(convertTimestampToUnix(row.endedAt as string), row.id);
+    updateEnd.run(convertTimestampToUnix(row.endedAt as string), row.id);
 });
 ```
 
@@ -98,15 +89,15 @@ ALTER TABLE frame DROP COLUMN encoded;
 ### Summary of Changes
 
 - **Update `encoding_task` Table:**
-    - Renamed `createAt` to `createdAt`.
+  - Renamed `createAt` to `createdAt`.
-    - Converted `createdAt` to store Unix timestamps.
+  - Converted `createdAt` to store Unix timestamps.
 - **Update `frame` Table:**
-    - Renamed `createAt` to `createdAt`.
+  - Renamed `createAt` to `createdAt`.
-    - Converted `createdAt` to store Unix timestamps.
+  - Converted `createdAt` to store Unix timestamps.
-    - Dropped the deprecated `encoded` column.
+  - Dropped the deprecated `encoded` column.
 - **Update `segments` Table:**
-    - Renamed `startAt` and `endAt` to `startedAt` and `endedAt` respectively.
+  - Renamed `startAt` and `endAt` to `startedAt` and `endedAt` respectively.
-    - Converted `startedAt` and `endedAt` to store Unix timestamps.
+  - Converted `startedAt` and `endedAt` to store Unix timestamps.
 
 ## Version 2 Schema
 
@@ -116,10 +107,10 @@ Corresponding version: 0.4.0
 
 Stores configuration data, including the database version.
 
-| Column Name | Data Type | Constraints/Default | Description                            |
+| Column Name | Data Type | Constraints/Default | Description                                                                 |
-| ----------- | --------- | ------------------- | -------------------------------------- |
+|-------------|-----------|---------------------|-----------------------------------------------------------------------------|
-| `key`       | TEXT      | PRIMARY KEY         | Unique key for configuration settings. |
+| `key`       | TEXT      | PRIMARY KEY         | Unique key for configuration settings.                                      |
-| `value`     | TEXT      |                     | Value associated with the key.         |
+| `value`     | TEXT      |                     | Value associated with the key.                                              |
 
 #### Insert Default Version
 
@@ -132,7 +123,7 @@ INSERT INTO config (key, value) VALUES ('version', '2');
 Stores encoding tasks that are queued for processing.
 
 | Column Name | Data Type | Constraints/Default        | Description                          |
-| ----------- | --------- | -------------------------- | ------------------------------------ |
+|-------------|-----------|----------------------------|--------------------------------------|
 | `id`        | INTEGER   | PRIMARY KEY, AUTOINCREMENT | Unique ID for the task.              |
 | `createAt`  | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP  | Timestamp when the task was created. |
 | `status`    | INTEGER   | DEFAULT 0                  | Indicates the status of the task.    |
@@ -142,7 +133,7 @@ Stores encoding tasks that are queued for processing.
 - `0`: Pending
 - `1`: In Progress
 - `2`: Completed 
-    - Once the task was set to this status, it will be imminently deleted by a trigger mentioned below.
+  - Once the task was set to this status, it will be imminently deleted by a trigger mentioned below.
 
 ### New Trigger: `delete_encoding_task`
 
@@ -167,10 +158,11 @@ END;
 Stores the frames that need to be encoded for the encoding task
 
 | Column Name      | Data Type | Constraints/Default                 | Description                                          |
-| ---------------- | --------- | ----------------------------------- | ---------------------------------------------------- |
+|------------------|-----------|-------------------------------------|------------------------------------------------------|
 | `frame`          | INTEGER   | PRIMARY KEY, FOREIGN KEY (frame.id) | ID for the frame associated with the encoding task.  |
 | `encodingTaskID` | TIMESTAMP | FOREIGN KEY (encoding_task.id)      | ID for the encoding task associated with this frame. |
 
+
 ### Update `frame` Table
 
 #### Simplify `imgFilename`
@@ -178,12 +170,12 @@ Stores the frames that need to be encoded for the encoding task
 The `imgFilename` column was updated to store only the filename without the full path.
 
 ```typescript
-const rows = db.prepare("SELECT id, imgFilename FROM frame").all() as OldFrame[];
+const rows = db.prepare('SELECT id, imgFilename FROM frame').all() as OldFrame[];
-rows.forEach((row) => {
+rows.forEach(row => {
-	const filename = row.imgFilename.match(/[^\\/]+$/)?.[0];
+    const filename = row.imgFilename.match(/[^\\/]+$/)?.[0];
-	if (filename) {
+    if (filename) {
-		db.prepare("UPDATE frame SET imgFilename = ? WHERE id = ?").run(filename, row.id);
+        db.prepare('UPDATE frame SET imgFilename = ? WHERE id = ?').run(filename, row.id);
-	}
+    }
 });
 ```
 
@@ -200,11 +192,12 @@ UPDATE frame SET encodeStatus = CASE WHEN encoded THEN 2 ELSE 0 END;
 
 - **New Table:** `config` to store configuration data.
 - **Update `frame` Table:**
-    - Simplified `imgFilename` to store only the filename.
+  - Simplified `imgFilename` to store only the filename.
-    - Added `encodeStatus` column to replace the deprecated `encoded` column.
+  - Added `encodeStatus` column to replace the deprecated `encoded` column.
 - **Deprecated `encoded` column.**
-    - The `encoded` column is no longer used and is retained due to SQLite's inability to drop columns.
+  - The `encoded` column is no longer used and is retained due to SQLite's inability to drop columns.
-      Creating a new table without this column and copying data to the new table could be time-consuming.
+    Creating a new table without this column and copying data to the new table could be time-consuming.
+
 
 ## Version 1 Schema
 
@@ -215,7 +208,7 @@ Corresponding version: 0.3.x
 Stores information about individual frames.
 
 | Column Name       | Data Type | Constraints/Default             | Description                                                             |
-| ----------------- | --------- | ------------------------------- | ----------------------------------------------------------------------- |
+|-------------------|-----------|---------------------------------|-------------------------------------------------------------------------|
 | `id`              | INTEGER   | PRIMARY KEY, AUTOINCREMENT      | Unique identifier for each frame.                                       |
 | `createAt`        | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP       | Timestamp when the frame was created.                                   |
 | `imgFilename`     | TEXT      |                                 | Filename of the image associated with the frame.                        |
@@ -230,7 +223,7 @@ Stores information about individual frames.
 Stores recognition data associated with frames.
 
 | Column Name | Data Type | Constraints/Default        | Desc[database-structure.md](database-structure.md)ription |
-| ----------- | --------- | -------------------------- | --------------------------------------------------------- |
+|-------------|-----------|----------------------------|-----------------------------------------------------------|
 | `id`        | INTEGER   | PRIMARY KEY, AUTOINCREMENT | Unique identifier for each recognition data entry.        |
 | `frameID`   | INTEGER   | FOREIGN KEY (frame.id)     | ID of the frame to which the recognition data belongs.    |
 | `data`      | TEXT      |                            | Raw recognition data.                                     |
@@ -243,7 +236,7 @@ While capturing the screen, OpenRewind retrieves the currently active window.
 When it finds that the currently active window has changed to another application, a new segment will start.
 
 | Column Name   | Data Type | Constraints/Default        | Description                                          |
-| ------------- | --------- | -------------------------- | ---------------------------------------------------- |
+|---------------|-----------|----------------------------|------------------------------------------------------|
 | `id`          | INTEGER   | PRIMARY KEY, AUTOINCREMENT | Unique identifier for each segment.                  |
 | `startAt`     | TIMESTAMP |                            | Timestamp when the segment starts.                   |
 | `endAt`       | TIMESTAMP |                            | Timestamp when the segment ends.                     |
@@ -260,7 +253,7 @@ When it finds that the currently active window has changed to another applicatio
 Used for full-text search on recognition data.
 
 | Column Name | Data Type | Constraints/Default | Description                                            |
-| ----------- | --------- | ------------------- | ------------------------------------------------------ |
+|-------------|-----------|---------------------|--------------------------------------------------------|
 | `id`        | INTEGER   | UNINDEXED           | ID of the recognition data entry.                      |
 | `frameID`   | INTEGER   | UNINDEXED           | ID of the frame to which the recognition data belongs. |
 | `data`      | TEXT      |                     | Raw recognition data.                                  |

docs/database-structure.md

@@ -6,10 +6,10 @@ This document outlines the current structure of the database schema used in the
 
 Stores configuration data.
 
-| Column Name | Data Type | Constraints/Default | Description                            |
+| Column Name | Data Type | Constraints/Default | Description                                                                 |
-| ----------- | --------- | ------------------- | -------------------------------------- |
+|-------------|-----------|---------------------|-----------------------------------------------------------------------------|
-| `key`       | TEXT      | PRIMARY KEY         | Unique key for configuration settings. |
+| `key`       | TEXT      | PRIMARY KEY         | Unique key for configuration settings.                                      |
-| `value`     | TEXT      |                     | Value associated with the key.         |
+| `value`     | TEXT      |                     | Value associated with the key.                                              |
 
 ### Key: version
 
@@ -20,7 +20,7 @@ The current database schema version, represented as an integer. Since the `confi
 Stores information about individual frames.
 
 | Column Name       | Data Type | Constraints/Default             | Description                                               |
-| ----------------- | --------- | ------------------------------- | --------------------------------------------------------- |
+|-------------------|-----------|---------------------------------|-----------------------------------------------------------|
 | `id`              | INTEGER   | PRIMARY KEY, AUTOINCREMENT      | Unique identifier for each frame.                         |
 | `createdAt`       | REAL      |                                 | Timestamp when the frame was created.                     |
 | `imgFilename`     | TEXT      |                                 | Filename of the image associated with the frame.          |
@@ -40,19 +40,19 @@ Stores information about individual frames.
 
 Stores recognition data associated with frames.
 
-| Column Name | Data Type | Constraints/Default        | Description                                            |
+| Column Name | Data Type | Constraints/Default          | Description                                                                 |
-| ----------- | --------- | -------------------------- | ------------------------------------------------------ |
+|-------------|-----------|------------------------------|-----------------------------------------------------------------------------|
-| `id`        | INTEGER   | PRIMARY KEY, AUTOINCREMENT | Unique identifier for each recognition data entry.     |
+| `id`        | INTEGER   | PRIMARY KEY, AUTOINCREMENT   | Unique identifier for each recognition data entry.                          |
-| `frameID`   | INTEGER   | FOREIGN KEY (frame.id)     | ID of the frame to which the recognition data belongs. |
+| `frameID`   | INTEGER   | FOREIGN KEY (frame.id)       | ID of the frame to which the recognition data belongs.                      |
-| `data`      | TEXT      |                            | Raw recognition data.                                  |
+| `data`      | TEXT      |                              | Raw recognition data.                                                       |
-| `text`      | TEXT      |                            | Recognized text.                                       |
+| `text`      | TEXT      |                              | Recognized text.                                                            |
 
 ## Table: `segments`
 
 A segment is a period of time when a user uses a particular application. While capturing the screen, OpenRewind detects the currently active window. When it finds that the currently active window has changed to another application, a new segment will start.
 
 | Column Name   | Data Type | Constraints/Default        | Description                                          |
-| ------------- | --------- | -------------------------- | ---------------------------------------------------- |
+|---------------|-----------|----------------------------|------------------------------------------------------|
 | `id`          | INTEGER   | PRIMARY KEY, AUTOINCREMENT | Unique identifier for each segment.                  |
 | `startedAt`   | REAL      |                            | Timestamp when the segment starts.                   |
 | `endedAt`     | REAL      |                            | Timestamp when the segment ends.                     |
@@ -69,7 +69,7 @@ A segment is a period of time when a user uses a particular application. While c
 Stores encoding tasks that are queued for processing.
 
 | Column Name | Data Type | Constraints/Default        | Description                          |
-| ----------- | --------- | -------------------------- | ------------------------------------ |
+|-------------|-----------|----------------------------|--------------------------------------|
 | `id`        | INTEGER   | PRIMARY KEY, AUTOINCREMENT | Unique ID for the task.              |
 | `createdAt` | REAL      |                            | Timestamp when the task was created. |
 | `status`    | INTEGER   | DEFAULT 0                  | Indicates the status of the task.    |
@@ -79,14 +79,14 @@ Stores encoding tasks that are queued for processing.
 - `0`: Pending
 - `1`: In Progress
 - `2`: Completed
-    - Once the task was set to this status, it will be imminently deleted by a trigger mentioned below.
+  - Once the task was set to this status, it will be imminently deleted by a trigger mentioned below.
 
 ## Table: `encoding_task_data`
 
 Stores the frames that need to be encoded for the encoding task.
 
 | Column Name      | Data Type | Constraints/Default                 | Description                                          |
-| ---------------- | --------- | ----------------------------------- | ---------------------------------------------------- |
+|------------------|-----------|-------------------------------------|------------------------------------------------------|
 | `encodingTaskID` | INTEGER   | FOREIGN KEY (encoding_task.id)      | ID for the encoding task associated with this frame. |
 | `frame`          | INTEGER   | PRIMARY KEY, FOREIGN KEY (frame.id) | ID for the frame associated with the encoding task.  |
 
@@ -95,7 +95,7 @@ Stores the frames that need to be encoded for the encoding task.
 Used for full-text search on recognition data.
 
 | Column Name | Data Type | Constraints/Default | Description                                            |
-| ----------- | --------- | ------------------- | ------------------------------------------------------ |
+|-------------|-----------|---------------------|--------------------------------------------------------|
 | `id`        | INTEGER   | UNINDEXED           | ID of the recognition data entry.                      |
 | `frameID`   | INTEGER   | UNINDEXED           | ID of the frame to which the recognition data belongs. |
 | `data`      | TEXT      |                     | Raw recognition data.                                  |

electron-builder.json

@@ -1,28 +1,32 @@
 {
-	"appId": "com.alikia2x.openrewind",
+    "appId": "com.alikia2x.openrewind",
-	"mac": {
+    "mac": {
-		"category": "public.app-category.productivity",
+        "category": "public.app-category.productivity",
-		"target": "dmg",
+        "target": "dmg",
-		"files": ["bin/macos"]
+        "files": [
-	},
+            "bin/macos"
-	"productName": "OpenRewind",
+        ]
-	"directories": {
+    },
-		"output": "dist/release"
+    "productName": "OpenRewind",
-	},
+    "directories": {
-	"files": [
+        "output": "dist/release"
-		"dist/electron/**/*",
+    },
-		"dist/electron/assets/*",
+    "files": [
-		"dist/electron/i18n/*",
+        "dist/electron/**/*",
-		"dist/renderer/**/*",
+        "dist/electron/assets/*",
-		"dist/renderer/assets/*"
+        "dist/electron/i18n/*",
-	],
+        "dist/renderer/**/*",
-	"win": {
+        "dist/renderer/assets/*"
-		"target": "nsis",
+    ],
-		"files": ["bin/win32"]
+    "win": {
-	},
+        "target": "nsis",
-	"linux": {
+        "files": [
-		"target": "AppImage"
+            "bin/win32"
-	},
+        ]
-	"copyright": "Copyright © 2024 alikia2x",
+    },
-	"asar": false
+    "linux": {
+        "target": "AppImage"
+    },
+    "copyright": "Copyright © 2024 alikia2x",
+    "asar": false
 }

eslint.config.js

@@ -1,37 +1,28 @@
-import js from "@eslint/js";
+import js from '@eslint/js'
-import globals from "globals";
+import globals from 'globals'
-import reactHooks from "eslint-plugin-react-hooks";
+import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from "eslint-plugin-react-refresh";
+import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from "typescript-eslint";
+import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
-	{ ignores: ["dist"] },
+  { ignores: ['dist'] },
-	{
+  {
-		extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-		files: ["**/*.{ts,tsx}"],
+    files: ['**/*.{ts,tsx}'],
-		languageOptions: {
+    languageOptions: {
-			ecmaVersion: 2020,
+      ecmaVersion: 2020,
-			globals: globals.browser
+      globals: globals.browser,
-		},
+    },
-		plugins: {
+    plugins: {
-			"react-hooks": reactHooks,
+      'react-hooks': reactHooks,
-			"react-refresh": reactRefresh
+      'react-refresh': reactRefresh,
-		},
+    },
-		rules: {
+    rules: {
-			...reactHooks.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
-			"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+      'react-refresh/only-export-components': [
-			"@typescript-eslint/no-unused-vars": [
+        'warn',
-				"error",
+        { allowConstantExport: true },
-				{
+      ],
-					args: "all",
+    },
-					argsIgnorePattern: "^_",
+  },
-					caughtErrors: "all",
+)
-					caughtErrorsIgnorePattern: "^_",
-					destructuredArrayIgnorePattern: "^_",
-					varsIgnorePattern: "^_",
-					ignoreRestSiblings: true
-				}
-			]
-		}
-	}
-);

gulpfile.ts

@@ -4,37 +4,42 @@ import ts from "gulp-typescript";
 import clean from "gulp-clean";
 import fs from "fs";
 
-const tsProject = ts.createProject("tsconfig.json");
+const tsProject = ts.createProject('tsconfig.json');
 
-gulp.task("clean", function () {
+gulp.task('clean', function () {
-	return gulp.src("dist/electron", { read: false, allowEmpty: true }).pipe(clean());
+	return gulp.src('dist/electron', {read: false, allowEmpty: true})
+		.pipe(clean());
 });
 
-gulp.task("scripts", () => {
+gulp.task('scripts', () => {
 	if (!fs.existsSync("dist/electron")) {
 		fs.mkdirSync("dist/electron", { recursive: true });
 	}
-	const tsResult = tsProject.src().pipe(tsProject());
+	const tsResult = tsProject.src()
+		.pipe(tsProject());
 
-	const jsFiles = gulp.src(["src/electron/**/*.js", "src/electron/**/*.cjs"]);
+	const jsFiles = gulp.src(['src/electron/**/*.js', 'src/electron/**/*.cjs']);
 
-	return tsResult.js.pipe(gulp.dest("dist/electron")).on("end", () => {
+	return tsResult.js
-		jsFiles.pipe(gulp.dest("dist/electron"));
+		.pipe(gulp.dest('dist/electron'))
-	});
+		.on('end', () => {
+			jsFiles.pipe(gulp.dest('dist/electron'));
+		});
 });
 
-gulp.task("assets", () => {
+gulp.task('assets', () => {
-	return gulp
+	return gulp.src('src/electron/assets/**/*', { encoding: false })
-		.src("src/electron/assets/**/*", { encoding: false })
+		.pipe(gulp.dest('dist/electron/assets'));
-		.pipe(gulp.dest("dist/electron/assets"));
 });
 
-gulp.task("binary", () => {
+gulp.task('binary', () => {
-	return gulp.src("bin/**/*", { encoding: false }).pipe(gulp.dest("dist/electron/bin"));
+	return gulp.src('bin/**/*', { encoding: false })
+		.pipe(gulp.dest('dist/electron/bin'));
 });
 
 gulp.task("locales", () => {
-	return gulp.src("i18n/**/*").pipe(gulp.dest("dist/electron/i18n"));
+	return gulp.src('i18n/**/*')
-});
+	    .pipe(gulp.dest('dist/electron/i18n'));
+})
 
-gulp.task("build", gulp.series("clean", "scripts", "assets", "binary", "locales"));
+gulp.task('build', gulp.series('clean', 'scripts', 'assets', 'binary', 'locales'));

i18n/ar.json

@@ -1,8 +1,8 @@
 {
-	"settings": "إعدادات",
+  "settings": "إعدادات",
-	"tray": {
+  "tray": {
-		"quit": "يترك",
+    "quit": "يترك",
-		"showMainWindow": "يبحث",
+    "showMainWindow": "يبحث",
-		"showSettingsWindow": "إعدادات"
+    "showSettingsWindow": "إعدادات"
-	}
+  }
 }

i18n/de.json

@@ -1,8 +1,8 @@
 {
-	"settings": "Einstellungen",
+  "settings": "Einstellungen",
-	"tray": {
+  "tray": {
-		"quit": "Aufhören",
+    "quit": "Aufhören",
-		"showMainWindow": "Suchen",
+    "showMainWindow": "Suchen",
-		"showSettingsWindow": "Einstellungen"
+    "showSettingsWindow": "Einstellungen"
-	}
+  }
 }

i18n/en.json

@@ -1,22 +1,22 @@
 {
-	"settings": {
+    "settings": {
-		"title": "Settings",
+        "title": "Settings",
-		"about": "About",
+        "about": "About",
-		"screen": "Screen",
+        "screen": "Screen",
-		"screen-recording": "Screen Recording",
+        "screen-recording": "Screen Recording",
-		"version": "Version {version}",
+        "version": "Version {version}",
-		"copyright": "Copyright © 2024 alikia2x",
+        "copyright": "Copyright © 2024 alikia2x",
-		"note": "OpenRewind is an open source software licensed under <1>GPL 3.0</1>, <3></3>and its source code is avaliable at <5>GitHub</5>.",
+        "note": "OpenRewind is an open source software licensed under <1>GPL 3.0</1>, <3></3>and its source code is avaliable at <5>GitHub</5>.",
-		"environment-details": "Environment Info",
+        "environment-details": "Environment Info",
-		"node-version": "Node.js Version",
+        "node-version": "Node.js Version",
-		"electron-version": "Electron Version",
+        "electron-version": "Electron Version",
-		"chrome-version": "Chrome Version",
+        "chrome-version": "Chrome Version",
-		"os-version": "OS Version",
+        "os-version": "OS Version",
-		"os": "Operating System"
+        "os": "Operating System"
-	},
+    },
-	"tray": {
+    "tray": {
-		"showMainWindow": "Search",
+        "showMainWindow": "Search",
-		"showSettingsWindow": "Settings",
+        "showSettingsWindow": "Settings",
-		"quit": "Quit"
+        "quit": "Quit"
-	}
+    }
 }

i18n/es.json

@@ -1,8 +1,8 @@
 {
-	"settings": "Ajustes",
+  "settings": "Ajustes",
-	"tray": {
+  "tray": {
-		"quit": "Abandonar",
+    "quit": "Abandonar",
-		"showMainWindow": "Buscar",
+    "showMainWindow": "Buscar",
-		"showSettingsWindow": "Ajustes"
+    "showSettingsWindow": "Ajustes"
-	}
+  }
 }

i18n/fr.json

@@ -1,8 +1,8 @@
 {
-	"settings": "Paramètres",
+  "settings": "Paramètres",
-	"tray": {
+  "tray": {
-		"quit": "Quitter",
+    "quit": "Quitter",
-		"showMainWindow": "Recherche",
+    "showMainWindow": "Recherche",
-		"showSettingsWindow": "Paramètres"
+    "showSettingsWindow": "Paramètres"
-	}
+  }
 }

i18n/it.json

@@ -1,8 +1,8 @@
 {
-	"settings": "Impostazioni",
+  "settings": "Impostazioni",
-	"tray": {
+  "tray": {
-		"quit": "Esentato",
+    "quit": "Esentato",
-		"showMainWindow": "Ricerca",
+    "showMainWindow": "Ricerca",
-		"showSettingsWindow": "Impostazioni"
+    "showSettingsWindow": "Impostazioni"
-	}
+  }
 }

i18n/ja.json

@@ -1,8 +1,8 @@
 {
-	"settings": "設定",
+  "settings": "設定",
-	"tray": {
+  "tray": {
-		"quit": "やめる",
+    "quit": "やめる",
-		"showMainWindow": "検索",
+    "showMainWindow": "検索",
-		"showSettingsWindow": "設定"
+    "showSettingsWindow": "設定"
-	}
+  }
 }

i18n/ko.json

@@ -1,8 +1,8 @@
 {
-	"settings": "설정",
+  "settings": "설정",
-	"tray": {
+  "tray": {
-		"quit": "그만두다",
+    "quit": "그만두다",
-		"showMainWindow": "찾다",
+    "showMainWindow": "찾다",
-		"showSettingsWindow": "설정"
+    "showSettingsWindow": "설정"
-	}
+  }
 }

i18n/zh-CN.json

@@ -1,22 +1,22 @@
 {
-	"settings": {
+    "settings": {
-		"title": "设置",
+        "title": "设置",
-		"about": "关于",
+        "about": "关于",
-		"screen": "屏幕",
+        "screen": "屏幕",
-		"screen-recording": "屏幕录制",
+        "screen-recording": "屏幕录制",
-		"version": "版本 {version}",
+        "version": "版本 {version}",
-		"copyright": "版权所有 © 2024 alikia2x",
+        "copyright": "版权所有 © 2024 alikia2x",
-		"note": "OpenRewind 是基于<1>GPL 3.0</1>授权的开源软件， <3></3>其源代码托管在<5>GitHub</5>上。",
+        "note": "OpenRewind 是基于<1>GPL 3.0</1>授权的开源软件， <3></3>其源代码托管在<5>GitHub</5>上。",
-		"environment-details": "运行环境",
+        "environment-details": "运行环境",
-		"node-version": "Node.js 版本",
+        "node-version": "Node.js 版本",
-		"electron-version": "Electron 版本",
+        "electron-version": "Electron 版本",
-		"chrome-version": "Chrome 版本",
+        "chrome-version": "Chrome 版本",
-		"os-version": "系统版本",
+        "os-version": "系统版本",
-		"os": "操作系统"
+        "os": "操作系统"
-	},
+    },
-	"tray": {
+    "tray": {
-		"showMainWindow": "搜索…",
+        "showMainWindow": "搜索…",
-		"showSettingsWindow": "应用设置",
+        "showSettingsWindow": "应用设置",
-		"quit": "退出 OpenRewind"
+        "quit": "退出 OpenRewind"
-	}
+    }
 }

package.json

@@ -11,20 +11,15 @@
     "dev:electron": "bunx gulp build && electron dist/electron/index.js",
     "build:react": "vite build",
     "build:app": "bunx gulp build",
-    "build:electron": "electron-builder",
+    "build:electron": "electron-builder"
-    "format": "bunx prettier --write ."
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@alikia/random-key": "npm:@jsr/alikia__random-key",
     "@electron/remote": "^2.1.2",
-    "@hono/node-server": "^1.13.7",
     "@unly/universal-language-detector": "^2.0.3",
     "better-sqlite3": "^11.6.0",
-    "dayjs": "^1.11.13",
-    "detect-port": "^2.1.0",
     "electron-context-menu": "^4.0.4",
     "electron-reloader": "^1.2.3",
     "electron-screencapture": "^1.1.0",
@@ -32,14 +27,12 @@
     "electron-store": "^10.0.0",
     "electron-window-state": "^5.0.3",
     "execa": "^9.5.1",
-    "hono": "^4.6.15",
     "i18next": "^24.0.2",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-electron-fs-backend": "^3.0.2",
     "i18next-fs-backend": "^2.6.0",
     "i18next-icu": "^2.3.0",
     "image-size": "^1.1.1",
-    "jotai": "^2.11.0",
     "memory-cache": "^0.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

pages/rewind/index.css

@@ -1,3 +1,3 @@
 body {
-	margin: 0;
+    margin: 0;
 }

pages/rewind/index.tsx

@@ -1,241 +1,12 @@
 import "./index.css";
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { Frame } from "../../src/electron/backend/schema.d.ts";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import updateLocale from "dayjs/plugin/updateLocale";
-import { useAtomValue } from "jotai";
-import { apiInfoAtom } from "src/renderer/state/apiInfo.ts";
 
-dayjs.extend(relativeTime);
-dayjs.extend(localizedFormat);
-dayjs.extend(updateLocale);
-dayjs.updateLocale("en", {
-	relativeTime: {
-		future: "in %s",
-		past: "%s ago",
-		s: "%d seconds",
-		m: "1 minute",
-		mm: "%d minutes",
-		h: "1 hour",
-		hh: "%d hours",
-		d: "1 day",
-		dd: "%d days",
-		M: "1 month",
-		MM: "%d months",
-		y: "1 year",
-		yy: "%d years"
-	}
-});
-
-function Image({ src }: { src: string }) {
-	return (
-		<img
-			src={src}
-			alt="Current frame"
-			className="w-full h-full object-cover absolute inset-0"
-		/>
-	);
-}
-
-// TODO: Memory optimization
 export default function RewindPage() {
-	const { port, apiKey } = useAtomValue(apiInfoAtom);
-	const [timeline, setTimeline] = useState<Frame[]>([]);
-	const [currentFrameId, setCurrentFrameId] = useState<number | null>(null);
-	const [images, setImages] = useState<Record<number, string>>({});
-	const [isLoadingMore, setIsLoadingMore] = useState(false);
-	const containerRef = useRef<HTMLDivElement>(null);
-	const lastAvaliableFrameId = useRef<number | null>(null);
-	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-	const updatedTimes = useRef<number>(0);
-
-	const loadingQueue = useRef<number[]>([]);
-	const isProcessingQueue = useRef(false);
-
-	const processQueue = useCallback(async () => {
-		if (!port || isProcessingQueue.current || loadingQueue.current.length === 0) return;
-
-		isProcessingQueue.current = true;
-		const frameId = loadingQueue.current.shift()!;
-
-		try {
-			const startUpdateTimes = updatedTimes.current;
-			const response = await fetch(`http://localhost:${port}/frame/${frameId}`, {
-				headers: {
-					"x-api-key": apiKey
-				}
-			});
-			const blob = await response.blob();
-			const url = URL.createObjectURL(blob);
-			setImages((prev) => {
-				const newImages = { ...prev, [frameId]: url };
-				if (updatedTimes.current <= startUpdateTimes) {
-					lastAvaliableFrameId.current = frameId;
-					updatedTimes.current++;
-				}
-				return newImages;
-			});
-		} catch (error) {
-			console.error(error);
-		} finally {
-			isProcessingQueue.current = false;
-			setTimeout(() => {
-				processQueue();
-			}, 500);
-		}
-	}, [apiKey, port]);
-
-	const loadImage = useCallback(
-		(frameId: number) => {
-			if (!port || images[frameId]) return;
-
-			// Add to queue if not already in it
-			if (!loadingQueue.current.includes(frameId)) {
-				loadingQueue.current.push(frameId);
-				// preserve up to 5 tasks in the queue
-				loadingQueue.current = loadingQueue.current.slice(-5);
-			}
-
-			// Start processing if not already running
-			if (!isProcessingQueue.current) {
-				processQueue();
-			}
-		},
-		[images, port, processQueue]
-	);
-
-	// Load current frame after 400ms of inactivity
-	useEffect(() => {
-		if (timeoutRef.current) {
-			clearTimeout(timeoutRef.current);
-		}
-
-		if (currentFrameId) {
-			timeoutRef.current = setTimeout(() => {
-				loadImage(currentFrameId);
-			}, 400);
-		}
-
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-			}
-		};
-	}, [currentFrameId, loadImage]);
-
-	// Fetch timeline data
-	const fetchTimeline = useCallback(
-		async (untilID?: number) => {
-			if (!port) return;
-			try {
-				const url = new URL(`http://localhost:${port}/timeline`);
-				if (untilID) {
-					url.searchParams.set("untilID", untilID.toString());
-				}
-
-				const response = await fetch(url.toString(), {
-					headers: {
-						"x-api-key": apiKey
-					}
-				});
-				const data = await response.json();
-				setTimeline((prev) => (untilID ? [...prev, ...data] : data));
-			} catch (error) {
-				console.error(error);
-			}
-		},
-		[port, apiKey]
-	);
-
-	useEffect(() => {
-		fetchTimeline();
-	}, [fetchTimeline]);
-
-	// Load initial images
-	useEffect(() => {
-		if (timeline.length > 0 && !currentFrameId) {
-			setCurrentFrameId(timeline[0].id);
-			loadImage(timeline[0].id);
-			if (timeline.length > 1) {
-				loadImage(timeline[1].id);
-			}
-		}
-	}, [timeline, currentFrameId, loadImage]);
-
-	const lastScrollTime = useRef(Date.now());
-
-	const handleScroll = (e: React.WheelEvent) => {
-		if (!containerRef.current || !currentFrameId) return;
-
-		// Only allow scroll changes every 30ms
-		const now = Date.now();
-		if (now - lastScrollTime.current < 30) return;
-		lastScrollTime.current = now;
-
-		const delta = Math.sign(e.deltaY);
-		const currentIndex = timeline.findIndex((frame) => frame.id === currentFrameId);
-		if (currentIndex === -1) return;
-
-		const newIndex = Math.min(Math.max(currentIndex - delta, 0), timeline.length - 1);
-		const newFrameId = timeline[newIndex].id;
-
-		console.log(currentFrameId, lastAvaliableFrameId);
-
-		if (newFrameId !== currentFrameId) {
-			setCurrentFrameId(newFrameId);
-			// Preload adjacent images
-			if (newIndex > 0) loadImage(timeline[newIndex - 1].id);
-			if (newIndex < timeline.length - 1) loadImage(timeline[newIndex + 1].id);
-
-			// Load more timeline data when we're near the end
-			if (newIndex > timeline.length - 10 && !isLoadingMore) {
-				setIsLoadingMore(true);
-				const lastID = timeline[timeline.length - 1].id;
-				fetchTimeline(lastID).finally(() => setIsLoadingMore(false));
-			}
-		}
-	};
-
-	function displayTime(time: number) {
-		// if diff < 1h, fromNow()
-		// else use localized format
-		const diff = dayjs().diff(dayjs.unix(time), "second");
-		if (diff < 3600) {
-			return dayjs.unix(time).fromNow();
-		} else {
-			return dayjs.unix(time).format("llll");
-		}
-	}
 
 	return (
-		<div
+		<>
-			ref={containerRef}
+			<div className="w-screen h-screen relative dark:text-white">
-			className="w-screen h-screen relative dark:text-white overflow-hidden"
-			onWheel={handleScroll}
-		>
-			{/* Current image */}
-			<Image
-				src={
-					currentFrameId
-						? images[currentFrameId] ||
-						  (lastAvaliableFrameId.current ? images[lastAvaliableFrameId.current] : "")
-						: ""
-				}
-			/>
 
-			{/* Time capsule */}
-			<div
-				className="absolute bottom-8 left-8 bg-zinc-800 text-white bg-opacity-80 backdrop-blur-lg
-					 rounded-full px-4 py-2 text-xl"
-			>
-				{currentFrameId
-					? displayTime(
-							timeline.find((frame) => frame.id === currentFrameId)!.createdAt
-					  ) || "Loading..."
-					: "Loading..."}
 			</div>
-		</div>
+		</>
 	);
 }

pages/settings/index.css

@@ -1,19 +1,19 @@
 #root {
-	overflow: hidden;
+    overflow: hidden;
-	user-select: none;
+    user-select: none;
 }
 #settings-note a {
-	@apply text-blue-700 dark:text-[#66ccff];
+    @apply text-blue-700 dark:text-[#66ccff]
 }
 
 .text-weaken {
-	@apply text-gray-700 dark:text-gray-300;
+    @apply text-gray-700 dark:text-gray-300;
 }
 
 #settings-scroll-container::-webkit-scrollbar {
-	display: none;
+    display: none;
 }
 
 #settings-scroll-container {
-	scrollbar-width: none;
+    scrollbar-width: none;
 }

pages/settings/index.tsx

@@ -36,7 +36,7 @@ function TitleBar() {
 				<div
 					className="z-50 absolute right-2.5 top-2.5 bg-red-500 hover:bg-rose-400 h-3 w-3 rounded-full"
 					onClick={() => {
-						console.log(window.settingsWindow);
+						console.log(window.settingsWindow)
 						window.settingsWindow.close();
 					}}
 				>

src/electron/backend/consts.ts

@@ -1,3 +0,0 @@
-export const RECORD_FRAME_RATE = 0.5;
-export const ENCODING_FRAME_RATE = 30;
-export const ENCODING_FRAME_INTERVAL = 1 / ENCODING_FRAME_RATE;

src/electron/backend/encoding.ts

@@ -4,11 +4,10 @@ import fs from "fs";
 import path, { join } from "path";
 import type { EncodingTask, Frame } from "./schema";
 import sizeOf from "image-size";
-import { getEncodeCommand } from "../utils/video/index.js";
+import { getEncodingTempDir, getRecordingsDir, getScreenshotsDir } from "../utils/backend.js";
-import { getRecordingsDir, getEncodingTempDir, getScreenshotsDir } from "../utils/fs/index.js";
 import cache from "memory-cache";
-import { ENCODING_FRAME_INTERVAL, RECORD_FRAME_RATE as FRAME_RATE } from "./consts.js";
 
+const FRAME_RATE = 0.5;
 const THREE_MINUTES = 180;
 const MIN_FRAMES_TO_ENCODE = THREE_MINUTES * FRAME_RATE;
 const CONCURRENCY = 1;
@@ -18,33 +17,23 @@ export function checkFramesForEncoding(db: Database) {
 	const stmt = db.prepare(`
         SELECT id, imgFilename, createdAt
         FROM frame
-        WHERE encodeStatus = 0 AND imgFilename IS NOT NULL
+        WHERE encodeStatus = 0
         ORDER BY createdAt ASC;
     `);
 	const frames = stmt.all() as Frame[];
 
 	const buffer: Frame[] = [];
 
+	if (frames.length < MIN_FRAMES_TO_ENCODE) return;
+
 	for (let i = 1; i < frames.length; i++) {
 		const frame = frames[i];
 		const lastFrame = frames[i - 1];
-		const framePath = join(getScreenshotsDir(), frame.imgFilename!);
+		const currentFrameSize = sizeOf(join(getScreenshotsDir(), frame.imgFilename));
-		const lastFramePath = join(getScreenshotsDir(), lastFrame.imgFilename!);
+		const lastFrameSize = sizeOf(join(getScreenshotsDir(), lastFrame.imgFilename));
-		if (!fs.existsSync(framePath)) {
-			console.warn("File not exist:", frame.imgFilename);
-			deleteFrameFromDB(db, frame.id);
-			continue;
-		}
-		if (!fs.existsSync(lastFramePath)) {
-			console.warn("File not exist:", lastFrame.imgFilename);
-			deleteFrameFromDB(db, lastFrame.id);
-			continue;
-		}
-		const currentFrameSize = sizeOf(framePath);
-		const lastFrameSize = sizeOf(lastFramePath);
 		const twoFramesHaveSameSize =
-			currentFrameSize.width === lastFrameSize.width &&
+			currentFrameSize.width === lastFrameSize.width
-			currentFrameSize.height === lastFrameSize.height;
+			&& currentFrameSize.height === lastFrameSize.height;
 		const bufferIsBigEnough = buffer.length >= MIN_FRAMES_TO_ENCODE;
 		const chunkConditionSatisfied = !twoFramesHaveSameSize || bufferIsBigEnough;
 		buffer.push(lastFrame);
@@ -61,11 +50,9 @@ export function checkFramesForEncoding(db: Database) {
 			`);
 			for (const frame of buffer) {
 				insertStmt.run(taskId, frame.id);
-				db.prepare(
+				db.prepare(`
-					`
 					UPDATE frame SET encodeStatus = 1 WHERE id = ?;
-				`
+				`).run(frame.id);
-				).run(frame.id);
 			}
 			console.log(`Created encoding task ${taskId} with ${buffer.length} frames`);
 			buffer.length = 0;
@@ -73,14 +60,12 @@ export function checkFramesForEncoding(db: Database) {
 	}
 }
 
-function deleteEncodedScreenshots(db: Database) {
+export async function deleteEncodedScreenshots(db: Database) {
-	// TODO: double-check that the frame was really encoded into the video
 	const stmt = db.prepare(`
 	    SELECT * FROM frame WHERE encodeStatus = 2 AND imgFilename IS NOT NULL;
 	`);
 	const frames = stmt.all() as Frame[];
 	for (const frame of frames) {
-		if (!frame.imgFilename) continue;
 		fs.unlinkSync(path.join(getScreenshotsDir(), frame.imgFilename));
 		const updateStmt = db.prepare(`
 			UPDATE frame SET imgFilename = NULL WHERE id = ?;
@@ -89,55 +74,9 @@ function deleteEncodedScreenshots(db: Database) {
 	}
 }
 
-function _deleteNonExistentScreenshots(db: Database) {
-	const screenshotDir = getScreenshotsDir();
-	const filesInDir = new Set(fs.readdirSync(screenshotDir));
-
-	const dbStmt = db.prepare(`
-	    SELECT imgFilename FROM frame WHERE imgFilename IS NOT NULL;
-	`);
-	const dbFiles = dbStmt.all() as { imgFilename: string }[];
-	const dbFileSet = new Set(dbFiles.map((f) => f.imgFilename));
-
-	for (const filename of filesInDir) {
-		if (!dbFileSet.has(filename)) {
-			//fs.unlinkSync(path.join(screenshotDir, filename));
-			console.log("[dry-run] delete:", filename);
-		}
-	}
-}
-
-export async function deleteUnnecessaryScreenshots(db: Database) {
-	deleteEncodedScreenshots(db);
-	//deleteNonExistentScreenshots(db);
-}
-
-export function deleteFrameFromDB(db: Database, id: number) {
-	const deleteStmt = db.prepare(`
-		DELETE FROM frame WHERE id = ?;
-	`);
-	deleteStmt.run(id);
-	console.log(`Deleted frame ${id} from database`);
-}
-
-function getTasksPerforming() {
-	return (cache.get("backend:encodingTasksPerforming") as string[]) || [];
-}
-
-function createMetaFile(frames: Frame[]) {
-	return frames
-		.map((frame) => {
-			if (!frame.imgFilename) return "";
-			const framePath = join(getScreenshotsDir(), frame.imgFilename);
-			const duration = ENCODING_FRAME_INTERVAL.toFixed(5);
-			return `file '${framePath}'\nduration ${duration}`;
-		})
-		.join("\n");
-}
-
 // Check and process encoding task
 export function processEncodingTasks(db: Database) {
-	let tasksPerforming = getTasksPerforming();
+	const tasksPerforming = cache.get("tasksPerforming") as string[] || [];
 	if (tasksPerforming.length >= CONCURRENCY) return;
 
 	const stmt = db.prepare(`
@@ -170,12 +109,12 @@ export function processEncodingTasks(db: Database) {
 		const frames = framesStmt.all(taskId) as Frame[];
 
 		const metaFilePath = path.join(getEncodingTempDir(), `${taskId}_meta.txt`);
-		const metaContent = createMetaFile(frames);
+		const metaContent = frames.map(frame => `file '${path.join(getScreenshotsDir(), frame.imgFilename)}'\nduration 0.03333`).join("\n");
 		fs.writeFileSync(metaFilePath, metaContent);
-		cache.put("backend:encodingTasksPerforming", [...tasksPerforming, taskId.toString()]);
+		cache.put("tasksPerforming", [...tasksPerforming, taskId.toString()]);
 
 		const videoPath = path.join(getRecordingsDir(), `${taskId}.mp4`);
-		const ffmpegCommand = getEncodeCommand(metaFilePath, videoPath);
+		const ffmpegCommand = `ffmpeg -f concat -safe 0 -i "${metaFilePath}" -c:v libx264 -r 30 -threads 1 "${videoPath}"`;
 		console.log("FFMPEG", ffmpegCommand);
 		exec(ffmpegCommand, (error, _stdout, _stderr) => {
 			if (error) {
@@ -197,12 +136,9 @@ export function processEncodingTasks(db: Database) {
 					updateFrameStmt.run(`${taskId}.mp4`, frameIndex, frame.id);
 				}
 				db.prepare(`COMMIT;`).run();
+
 			}
-			tasksPerforming = getTasksPerforming();
+			cache.put("tasksPerforming", tasksPerforming.filter(id => id !== taskId.toString()));
-			cache.put(
-				"backend:encodingTasksPerforming",
-				tasksPerforming.filter((id) => id !== taskId.toString())
-			);
 			fs.unlinkSync(metaFilePath);
 		});
 	}

src/electron/backend/init.ts

@@ -2,27 +2,25 @@ import * as path from "path";
 import { Database } from "better-sqlite3";
 import DB from "better-sqlite3";
 import { __dirname } from "../dirname.js";
-import { getDatabaseDir } from "../utils/fs/index.js";
+import { getDatabaseDir } from "../utils/backend.js";
 import { migrate } from "./migrate/index.js";
 
 function getLibSimpleExtensionPath() {
-	switch (process.platform) {
+    switch (process.platform) {
-		case "win32":
+        case "win32":
-			return path.join(__dirname, "bin", process.platform, "libsimple", "simple.dll");
+            return path.join(__dirname, "bin", process.platform, "libsimple", "simple.dll");
-		case "darwin":
+        case "darwin":
-			return path.join(__dirname, "bin", process.platform, "libsimple", "libsimple.dylib");
+            return path.join(__dirname, "bin", process.platform, "libsimple", "libsimple.dylib");
-		case "linux":
+        case "linux":
-			return path.join(__dirname, "bin", process.platform, "libsimple", "libsimple.so");
+            return path.join(__dirname, "bin", process.platform, "libsimple", "libsimple.so");
-		default:
+        default:
-			throw new Error("Unsupported platform");
+            throw new Error("Unsupported platform");
-	}
+    }
 }
 
 function databaseInitialized(db: Database) {
-	return (
+	return db.prepare(`SELECT name FROM sqlite_master WHERE type='table' AND name='frame';`).get()
-		db.prepare(`SELECT name FROM sqlite_master WHERE type='table' AND name='frame';`).get() !==
+		!== undefined;
-		undefined
-	);
 }
 
 function init(db: Database) {
@@ -149,7 +147,8 @@ export async function initDatabase() {
 
 	if (!databaseInitialized(db)) {
 		init(db);
-	} else {
+	}
+	else {
 		migrate(db);
 	}
 

src/electron/backend/migrate/index.ts

@@ -12,23 +12,26 @@ function migrateTo(version: number, db: Database) {
 	}
 }
 
-function getVersion(db: Database): number {
-	const stmt = db.prepare(`SELECT value FROM config WHERE key = 'version';`);
-	const data = stmt.get() as { value: string };
-	const version = data.value;
-	return parseInt(version);
-}
-
 export function migrate(db: Database) {
 	const configTableExists =
-		db.prepare(`SELECT name FROM sqlite_master WHERE type='table' AND name='config';`).get() !==
+		db.prepare(`SELECT name FROM sqlite_master WHERE type='table' AND name='config';`).get()
-		undefined;
+		!== undefined;
 	if (!configTableExists) {
 		migrateToV2(db);
 	}
-	let databaseVersion = getVersion(db);
+	let databaseVersion = parseInt(
+		(
+			db.prepare(`SELECT value FROM config WHERE key = 'version';`).get() as
+				{ value: any }
+		).value
+	);
 	while (databaseVersion < CURRENT_VERSION) {
 		migrateTo(databaseVersion, db);
-		databaseVersion = getVersion(db);
+		databaseVersion = parseInt(
+			(
+				db.prepare(`SELECT value FROM config WHERE key = 'version';`).get() as
+					{ value: any }
+			).value
+		);
 	}
 }

src/electron/backend/migrate/migrateToV2.ts

@@ -55,9 +55,9 @@ function initSchemaInV2(db: Database) {
 }
 
 /*
- * This function assumes that the database does not contain the "config" table,
+* This function assumes that the database does not contain the "config" table,
- * and thus needs to be migrated to Version 2.
+* and thus needs to be migrated to Version 2.
- * */
+* */
 export function migrateToV2(db: Database) {
 	initSchemaInV2(db);
 
@@ -65,11 +65,12 @@ export function migrateToV2(db: Database) {
 	// Before: /Users/username/Library/Application Support/OpenRewind/Record Data/temp/screenshots/1733568609960.jpg
 	// After: 1733568609960.jpg
 	const rows = db.prepare("SELECT id, imgFilename FROM frame").all() as OldFrame[];
-	rows.forEach((row) => {
+	rows.forEach(row => {
 		const filename = row.imgFilename.match(/[^\\/]+$/)?.[0];
 
 		if (filename) {
-			db.prepare("UPDATE frame SET imgFilename = ? WHERE id = ?").run(filename, row.id);
+			db.prepare("UPDATE frame SET imgFilename = ? WHERE id = ?")
+				.run(filename, row.id);
 		}
 	});
 

src/electron/backend/migrate/migrateToV3.ts

@@ -24,10 +24,7 @@ function transformEncodingTask(db: Database) {
 	`;
 	db.exec(createTableSql);
 
-	const rows = db.prepare(`SELECT id, createdAt FROM encoding_task`).all() as {
+	const rows = db.prepare(`SELECT id, createdAt FROM encoding_task`).all() as { [x: string]: unknown; id: unknown; }[];
-		[x: string]: unknown;
-		id: unknown;
-	}[];
 	const updateStmt = db.prepare(`UPDATE encoding_task SET createdAt_new = ? WHERE id = ?`);
 	rows.forEach((row) => {
 		const unixTimestamp = convertTimestampToUnix(row.createdAt as string);
@@ -58,13 +55,10 @@ function transformFrame(db: Database) {
 		DROP TABLE frame;
 		ALTER TABLE frame_new RENAME TO frame;
 		ALTER TABLE frame ADD COLUMN createdAt_new REAL;
-	`;
+	`
 	db.exec(createTableSql);
 
-	const rows = db.prepare(`SELECT id, createdAt FROM frame`).all() as {
+	const rows = db.prepare(`SELECT id, createdAt FROM frame`).all() as { [x: string]: unknown; id: unknown; }[];
-		[x: string]: unknown;
-		id: unknown;
-	}[];
 	const updateStmt = db.prepare(`UPDATE frame SET createdAt_new = ? WHERE id = ?`);
 	rows.forEach((row) => {
 		const unixTimestamp = convertTimestampToUnix(row.createdAt as string);
@@ -98,10 +92,7 @@ function transformSegments(db: Database) {
 		ALTER TABLE segments ADD COLUMN startedAt_new REAL;
 		ALTER TABLE segments ADD COLUMN endedAt_new REAL;		
 	`);
-	const rows = db.prepare(`SELECT id, startedAt, endedAt FROM segments`).all() as {
+	const rows = db.prepare(`SELECT id, startedAt, endedAt FROM segments`).all() as { [x: string]: unknown; id: unknown; }[];
-		[x: string]: unknown;
-		id: unknown;
-	}[];
 	const updateStart = db.prepare(`UPDATE segments SET startedAt_new = ? WHERE id = ?`);
 	const updateEnd = db.prepare(`UPDATE segments SET endedAt_new = ? WHERE id = ?`);
 	rows.forEach((row) => {
@@ -117,17 +108,8 @@ function transformSegments(db: Database) {
 	`);
 }
 
-function renameColumn(
+function renameColumn(tableName: string, oldColumnName: string, newColumnName: string, db: Database) {
-	tableName: string,
+	if (db.prepare(`SELECT 1 FROM pragma_table_info(?) WHERE name=?`).get([tableName, oldColumnName])) {
-	oldColumnName: string,
-	newColumnName: string,
-	db: Database
-) {
-	if (
-		db
-			.prepare(`SELECT 1 FROM pragma_table_info(?) WHERE name=?`)
-			.get([tableName, oldColumnName])
-	) {
 		db.exec(`ALTER TABLE ${tableName} RENAME COLUMN ${oldColumnName} TO ${newColumnName};`);
 	}
 }
@@ -191,10 +173,10 @@ export function migrateToV3(db: Database) {
 		PRAGMA foreign_keys = ON;
 	`);
 
-	renameColumn("encoding_task", "createAt", "createdAt", db);
+	renameColumn('encoding_task', 'createAt', 'createdAt', db);
-	renameColumn("frame", "createAt", "createdAt", db);
+	renameColumn('frame', 'createAt', 'createdAt', db);
-	renameColumn("segments", "startAt", "startedAt", db);
+	renameColumn('segments', 'startAt', 'startedAt', db);
-	renameColumn("segments", "endAt", "endedAt", db);
+	renameColumn('segments', 'endAt', 'endedAt', db);
 	if (db.prepare(`SELECT 1 FROM pragma_table_info('frame') WHERE name='encoded'`).get()) {
 		db.prepare(`ALTER TABLE frame DROP COLUMN encoded`).run();
 	}

src/electron/backend/schema.d.ts

@@ -1,7 +1,7 @@
 export interface Frame {
 	id: number;
 	createdAt: number;
-	imgFilename: string | null;
+	imgFilename: string;
 	segmentID: number | null;
 	videoPath: string | null;
 	videoFrameIndex: number | null;
@@ -9,6 +9,7 @@ export interface Frame {
 	encodeStatus: number;
 }
 
+
 export interface EncodingTask {
 	id: number;
 	createdAt: number;

src/electron/backend/screenshot.ts

@@ -1,7 +1,7 @@
 import screenshot from "screenshot-desktop";
-import { getScreenshotsDir } from "../utils/fs/index.js";
+import { getScreenshotsDir } from "../utils/backend.js";
 import { join } from "path";
-import { Database } from "better-sqlite3";
+import { Database }from "better-sqlite3";
 import SqlString from "sqlstring";
 
 export function startScreenshotLoop(db: Database) {
@@ -10,16 +10,15 @@ export function startScreenshotLoop(db: Database) {
 		const screenshotDir = getScreenshotsDir();
 		const filename = `${timestamp}.png`;
 		const screenshotPath = join(screenshotDir, filename);
-		screenshot({ filename: screenshotPath, format: "png" })
+		screenshot({filename: screenshotPath, format: "png"}).then((absolutePath) => {
-			.then(() => {
+			const SQL = SqlString.format(
-				const SQL = SqlString.format(
+				"INSERT INTO frame (imgFilename, createdAt) VALUES (?, ?)",
-					"INSERT INTO frame (imgFilename, createdAt) VALUES (?, ?)",
+				[filename, new Date().getTime() / 1000]
-					[filename, new Date().getTime() / 1000]
+			);
-				);
+			db.exec(SQL);
-				db.exec(SQL);
+		}).catch((err) => {
-			})
+			console.error(err);
-			.catch((err) => {
+		});
-				console.error(err);
-			});
 	}, 2000);
 }
+

src/electron/createWindow.ts

@@ -2,7 +2,7 @@ import { app, BrowserWindow, screen } from "electron";
 import { join } from "path";
 import { __dirname } from "./dirname.js";
 import windowStateManager from "electron-window-state";
-import { hideDock, showDock } from "./utils/platform/index.js";
+import { hideDock, showDock } from "./utils/electron.js";
 
 function loadURL(window: BrowserWindow, path = "", vitePort: string) {
 	const dev = !app.isPackaged;
@@ -10,26 +10,25 @@ function loadURL(window: BrowserWindow, path = "", vitePort: string) {
 		window.loadURL(`http://localhost:${vitePort}/#${path}`).catch((e) => {
 			console.log("Error loading URL:", e);
 		});
-	} else {
+	}
-		window
+	else {
-			.loadFile(join(__dirname, "../renderer/index.html"), {
+		window.loadFile(join(__dirname, "../renderer/index.html"), {
-				hash: path
+			hash: path,
-			})
+		}).catch((e) => {
-			.catch((e) => {
+			console.log("Error loading URL:", e);
-				console.log("Error loading URL:", e);
+		});
-			});
 	}
 }
 
-export function createSettingsWindow(vitePort: string, closeCallBack: () => void) {
+export function createSettingsWindow(vitePort: string, closeCallBack: Function) {
 	const windowState = windowStateManager({
 		defaultWidth: 650,
 		defaultHeight: 550
 	});
 	const enableFrame = process.platform === "darwin";
-	let icon;
+	let icon
 	switch (process.platform) {
-		case "darwin":
+	    case "darwin":
 			icon = undefined;
 			break;
 		case "win32":
@@ -47,13 +46,13 @@ export function createSettingsWindow(vitePort: string, closeCallBack: () => void
 		webPreferences: {
 			nodeIntegration: true,
 			contextIsolation: true,
-			preload: join(__dirname, "preload/settings.cjs")
+			preload: join(__dirname, 'preload/settings.cjs')
 		},
 		titleBarStyle: "hiddenInset",
 		resizable: false,
 		show: false,
 		frame: enableFrame,
-		icon: icon
+		icon: icon,
 	});
 	windowState.manage(window);
 	window.on("show", () => {
@@ -63,7 +62,6 @@ export function createSettingsWindow(vitePort: string, closeCallBack: () => void
 		window.hide();
 		windowState.saveState(window);
 		e.preventDefault();
-		closeCallBack();
 	});
 	window.once("close", () => {
 		window.hide();
@@ -73,7 +71,7 @@ export function createSettingsWindow(vitePort: string, closeCallBack: () => void
 	return window;
 }
 
-export function createMainWindow(vitePort: string, closeCallBack: () => void) {
+export function createMainWindow(vitePort: string, closeCallBack: Function) {
 	const display = screen.getPrimaryDisplay();
 	const { width, height } = display.bounds;
 	const windowState = windowStateManager({
@@ -94,22 +92,17 @@ export function createMainWindow(vitePort: string, closeCallBack: () => void) {
 		webPreferences: {
 			nodeIntegration: true,
 			contextIsolation: true,
-			preload: join(__dirname, "preload/rewind.cjs")
+			preload: join(__dirname, 'preload/rewind.cjs')
 		},
 		roundedCorners: false,
 		transparent: true,
-		show: false,
+		show: false
-		title: "OpenRewind Rewind Page"
 	});
 
-	// Exclude the window from the recording
-	window.setContentProtection(true);
-
 	windowState.manage(window);
 
 	window.on("close", () => {
 		windowState.saveState(window);
-		closeCallBack();
 	});
 	window.once("close", () => {
 		closeCallBack();

src/electron/i18n.ts

@@ -4,6 +4,7 @@ import fs from "fs";
 import { app } from "electron";
 import { __dirname } from "./dirname.js";
 
+
 /**
  * Selects the appropriate language based on system preferences and available languages
  *
@@ -20,7 +21,7 @@ export function detectLanguage(langs: string[], fallback: string): string {
 	const normalizedLang = systemLanguage.toLowerCase().split("-")[0];
 
 	// Find a matching language
-	const matchedLanguage = langs.find((lang) => {
+	const matchedLanguage = langs.find(lang => {
 		if (lang.indexOf(normalizedLang) !== -1) {
 			return lang;
 		}
@@ -52,3 +53,4 @@ export default function initI18n() {
 	});
 	return i18n;
 }
+

src/electron/index.ts

@@ -1,13 +1,4 @@
-import {
+import { app, BrowserWindow, globalShortcut, ipcMain, Menu, nativeImage, screen, Tray } from "electron";
-	app,
-	BrowserWindow,
-	globalShortcut,
-	ipcMain,
-	Menu,
-	nativeImage,
-	screen,
-	Tray
-} from "electron";
 import contextMenu from "electron-context-menu";
 import { join } from "path";
 import initI18n from "./i18n.js";
@@ -16,17 +7,8 @@ import { initDatabase } from "./backend/init.js";
 import { Database } from "better-sqlite3";
 import { startScreenshotLoop } from "./backend/screenshot.js";
 import { __dirname } from "./dirname.js";
-import { hideDock } from "./utils/platform/index.js";
+import { hideDock } from "./utils/electron.js";
-import {
+import { checkFramesForEncoding, deleteEncodedScreenshots, processEncodingTasks } from "./backend/encoding.js";
-	checkFramesForEncoding,
-	deleteUnnecessaryScreenshots,
-	processEncodingTasks
-} from "./backend/encoding.js";
-import honoApp from "./server/index.js";
-import { serve } from "@hono/node-server";
-import { findAvailablePort } from "./utils/network/index.js";
-import cache from "memory-cache";
-import { generate as generateAPIKey } from "@alikia/random-key";
 
 const i18n = initI18n();
 
@@ -92,29 +74,12 @@ app.on("activate", () => {});
 
 app.on("ready", () => {
 	createTray();
-	findAvailablePort(12412).then((port) => {
-		generateAPIKey().then((key) => {
-			cache.put("server:port", port);
-			if (!dev) {
-				cache.put("server:APIKey", key);
-			}
-			serve({ fetch: honoApp.fetch, port: port });
-
-			// Send API info to renderer
-			settingsWindow?.webContents.send("api-info", {
-				port,
-				apiKey: key
-			});
-			console.log(`App server running on port ${port}`);
-		});
-	});
 	initDatabase().then((db) => {
 		screenshotInterval = startScreenshotLoop(db);
 		setInterval(checkFramesForEncoding, 5000, db);
 		setInterval(processEncodingTasks, 10000, db);
-		setInterval(deleteUnnecessaryScreenshots, 20000, db);
+		setInterval(deleteEncodedScreenshots, 5000, db)
 		dbConnection = db;
-		cache.put("server:dbConnection", dbConnection);
 	});
 	mainWindow = createMainWindow(port, () => (mainWindow = null));
 	settingsWindow = createSettingsWindow(port, () => (settingsWindow = null));
@@ -124,18 +89,14 @@ app.on("ready", () => {
 	});
 });
 
-app.on("will-quit", () => {
+app.on("will-quit", ()=> {
 	dbConnection?.close();
-	if (screenshotInterval) clearInterval(screenshotInterval);
 });
 
-ipcMain.on("close-settings", () => {
+// app.on("window-all-closed", () => {
+// 	if (process.platform !== "darwin") app.quit();
+// });
+
+ipcMain.on('close-settings', () => {
 	settingsWindow?.hide();
 });
-
-ipcMain.handle("request-api-info", () => {
-  return {
-    port: cache.get("server:port"),
-    apiKey: cache.get("server:APIKey")
-  };
-});

src/electron/preload/os-name.cjs

@@ -1,52 +1,52 @@
-const os = require("node:os");
+const os = require('node:os');
 
 const nameMap = new Map([
-	[24, ["Sequoia", "15"]],
+	[24, ['Sequoia', '15']],
-	[23, ["Sonoma", "14"]],
+	[23, ['Sonoma', '14']],
-	[22, ["Ventura", "13"]],
+	[22, ['Ventura', '13']],
-	[21, ["Monterey", "12"]],
+	[21, ['Monterey', '12']],
-	[20, ["Big Sur", "11"]],
+	[20, ['Big Sur', '11']],
-	[19, ["Catalina", "10.15"]],
+	[19, ['Catalina', '10.15']],
-	[18, ["Mojave", "10.14"]],
+	[18, ['Mojave', '10.14']],
-	[17, ["High Sierra", "10.13"]],
+	[17, ['High Sierra', '10.13']],
-	[16, ["Sierra", "10.12"]],
+	[16, ['Sierra', '10.12']],
-	[15, ["El Capitan", "10.11"]],
+	[15, ['El Capitan', '10.11']],
-	[14, ["Yosemite", "10.10"]],
+	[14, ['Yosemite', '10.10']],
-	[13, ["Mavericks", "10.9"]],
+	[13, ['Mavericks', '10.9']],
-	[12, ["Mountain Lion", "10.8"]],
+	[12, ['Mountain Lion', '10.8']],
-	[11, ["Lion", "10.7"]],
+	[11, ['Lion', '10.7']],
-	[10, ["Snow Leopard", "10.6"]],
+	[10, ['Snow Leopard', '10.6']],
-	[9, ["Leopard", "10.5"]],
+	[9, ['Leopard', '10.5']],
-	[8, ["Tiger", "10.4"]],
+	[8, ['Tiger', '10.4']],
-	[7, ["Panther", "10.3"]],
+	[7, ['Panther', '10.3']],
-	[6, ["Jaguar", "10.2"]],
+	[6, ['Jaguar', '10.2']],
-	[5, ["Puma", "10.1"]]
+	[5, ['Puma', '10.1']],
 ]);
 
 const names = new Map([
-	["10.0.2", "11"], // It's unclear whether future Windows 11 versions will use this version scheme: https://github.com/sindresorhus/windows-release/pull/26/files#r744945281
+	['10.0.2', '11'], // It's unclear whether future Windows 11 versions will use this version scheme: https://github.com/sindresorhus/windows-release/pull/26/files#r744945281
-	["10.0", "10"],
+	['10.0', '10'],
-	["6.3", "8.1"],
+	['6.3', '8.1'],
-	["6.2", "8"],
+	['6.2', '8'],
-	["6.1", "7"],
+	['6.1', '7'],
-	["6.0", "Vista"],
+	['6.0', 'Vista'],
-	["5.2", "Server 2003"],
+	['5.2', 'Server 2003'],
-	["5.1", "XP"],
+	['5.1', 'XP'],
-	["5.0", "2000"],
+	['5.0', '2000'],
-	["4.90", "ME"],
+	['4.90', 'ME'],
-	["4.10", "98"],
+	['4.10', '98'],
-	["4.03", "95"],
+	['4.03', '95'],
-	["4.00", "95"]
+	['4.00', '95'],
 ]);
 
 function macosRelease(release) {
-	release = Number((release || os.release()).split(".")[0]);
+	release = Number((release || os.release()).split('.')[0]);
 
-	const [name, version] = nameMap.get(release) || ["Unknown", ""];
+	const [name, version] = nameMap.get(release) || ['Unknown', ''];
 
 	return {
 		name,
-		version
+		version,
 	};
 }
 
@@ -54,14 +54,14 @@ function windowsRelease(release) {
 	const version = /(\d+\.\d+)(?:\.(\d+))?/.exec(release || os.release());
 
 	if (release && !version) {
-		throw new Error("`release` argument doesn't match `n.n`");
+		throw new Error('`release` argument doesn\'t match `n.n`');
 	}
 
-	let ver = version[1] || "";
+	let ver = version[1] || '';
-	const build = version[2] || "";
+	const build = version[2] || '';
 
-	if (ver === "10.0" && build.startsWith("2")) {
+	if (ver === '10.0' && build.startsWith('2')) {
-		ver = "10.0.2";
+		ver = '10.0.2';
 	}
 
 	return names.get(ver);
@@ -69,47 +69,47 @@ function windowsRelease(release) {
 
 function osName(platform, release) {
 	if (!platform && release) {
-		throw new Error("You can't specify a `release` without specifying `platform`");
+		throw new Error('You can\'t specify a `release` without specifying `platform`');
 	}
 
 	platform = platform ?? os.platform();
 
 	let id;
 
-	if (platform === "darwin") {
+	if (platform === 'darwin') {
-		if (!release && os.platform() === "darwin") {
+		if (!release && os.platform() === 'darwin') {
 			release = os.release();
 		}
 
-		const prefix = release ? (Number(release.split(".")[0]) > 15 ? "macOS" : "OS X") : "macOS";
+		const prefix = release ? (Number(release.split('.')[0]) > 15 ? 'macOS' : 'OS X') : 'macOS';
 
 		try {
-			id = release ? macosRelease(release).name : "";
+			id = release ? macosRelease(release).name : '';
 
-			if (id === "Unknown") {
+			if (id === 'Unknown') {
 				return prefix;
 			}
 		} catch {}
 
-		return prefix + (id ? " " + id : "");
+		return prefix + (id ? ' ' + id : '');
 	}
 
-	if (platform === "linux") {
+	if (platform === 'linux') {
-		if (!release && os.platform() === "linux") {
+		if (!release && os.platform() === 'linux') {
 			release = os.release();
 		}
 
-		id = release ? release.replace(/^(\d+\.\d+).*/, "$1") : "";
+		id = release ? release.replace(/^(\d+\.\d+).*/, '$1') : '';
-		return "Linux" + (id ? " " + id : "");
+		return 'Linux' + (id ? ' ' + id : '');
 	}
 
-	if (platform === "win32") {
+	if (platform === 'win32') {
-		if (!release && os.platform() === "win32") {
+		if (!release && os.platform() === 'win32') {
 			release = os.release();
 		}
 
-		id = release ? windowsRelease(release) : "";
+		id = release ? windowsRelease(release) : '';
-		return "Windows" + (id ? " " + id : "");
+		return 'Windows' + (id ? ' ' + id : '');
 	}
 
 	return platform;

src/electron/preload/rewind.cjs

@@ -1,5 +1,20 @@
 const { contextBridge, ipcRenderer } = require("electron");
 
-contextBridge.exposeInMainWorld("appGlobal", {
+// Expose protected methods that allow the renderer process to use
-	requestApiInfo: () => ipcRenderer.invoke("request-api-info")
+// the ipcRenderer without exposing the entire object
+contextBridge.exposeInMainWorld("api", {
+	send: (channel, data) => {
+		// whitelist channels
+		let validChannels = ["toMain"];
+		if (validChannels.includes(channel)) {
+			ipcRenderer.send(channel, data);
+		}
+	},
+	receive: (channel, func) => {
+		let validChannels = ["fromMain"];
+		if (validChannels.includes(channel)) {
+			// Deliberately strip event as it includes `sender`
+			ipcRenderer.on(channel, (event, ...args) => func(...args));
+		}
+	}
 });

src/electron/preload/settings.cjs

@@ -17,7 +17,3 @@ contextBridge.exposeInMainWorld("settingsWindow", {
 		ipcRenderer.send("close-settings", {});
 	}
 });
-
-contextBridge.exposeInMainWorld("appGlobal", {
-	requestApiInfo: () => ipcRenderer.invoke("request-api-info")
-});

src/electron/server/index.ts

@@ -1,147 +0,0 @@
-import { Hono } from "hono";
-import { cors } from "hono/cors";
-import cache from "memory-cache";
-import { join } from "path";
-import fs from "fs";
-import { Database } from "better-sqlite3";
-import type { Frame } from "../backend/schema";
-import {
-	getDecodingTempDir,
-	getRecordingsDir,
-	getScreenshotsDir,
-	waitForFileExists
-} from "../utils/fs/index.js";
-import { immediatelyExtractFrameFromVideo } from "../utils/video/index.js";
-import { existsSync } from "fs";
-
-const app = new Hono();
-
-app.use("*", cors());
-
-app.use(async (c, next) => {
-	const key = cache.get("server:APIKey");
-	if (key && c.req.header("x-api-key") !== key) {
-		c.res = undefined;
-		c.res = c.json({ error: "Invalid API key" }, 401);
-	}
-	await next();
-});
-
-app.get("/ping", (c) => c.text("pong"));
-
-function getLatestFrames(db: Database, limit = 50): Frame[] {
-	return db
-		.prepare(
-			`
-    SELECT id, createdAt, imgFilename, videoPath, videoFrameIndex 
-    FROM frame
-    ORDER BY createdAt DESC
-    LIMIT ?
-  `
-		)
-		.all(limit) as Frame[];
-}
-
-function getFramesUntilID(db: Database, untilID: number, limit = 50): Frame[] {
-	return db
-		.prepare(
-			`
-    SELECT id, createdAt, imgFilename, videoPath, videoFrameIndex 
-    FROM frame
-	WHERE id < ?
-    ORDER BY createdAt DESC
-    LIMIT ?
-  `
-		)
-		.all(untilID, limit) as Frame[];
-}
-
-app.get("/timeline", async (c) => {
-	const query = c.req.query();
-	const limit = parseInt(query.limit) || undefined;
-	const db = cache.get("server:dbConnection");
-	if (query.untilID) {
-		return c.json(getFramesUntilID(db, parseInt(query.untilID), limit));
-	} else {
-		return c.json(getLatestFrames(db, limit));
-	}
-});
-
-app.get("/frame/:id", async (c) => {
-	const { id } = c.req.param();
-	const db: Database = cache.get("server:dbConnection");
-
-	const frame = db
-		.prepare(
-			`
-				SELECT imgFilename, videoPath, videoFrameIndex, createdAt
-				FROM frame 
-				WHERE id = ?
-			`
-		)
-		.get(id) as Frame | undefined;
-
-	if (!frame) return c.json({ error: "Frame not found" }, 404);
-
-	const decodingTempDir = getDecodingTempDir();
-	const screenshotsDir = getScreenshotsDir();
-	const videoFilename = frame.videoPath;
-	const frameIndex = frame.videoFrameIndex;
-	const imageFilename = frame.imgFilename;
-	const bareVideoFilename = videoFilename?.replace(".mp4", "") || null;
-	const decodedImage = frameIndex
-		? `${bareVideoFilename}_${frameIndex.toString().padStart(4, "0")}.bmp`
-		: null;
-	let returnImagePath = "";
-
-	let needToBeDecoded = videoFilename !== null && frameIndex !== null && !frame.imgFilename;
-	if (decodedImage && fs.existsSync(join(getDecodingTempDir(), decodedImage))) {
-		needToBeDecoded = false;
-		returnImagePath = join(decodingTempDir, decodedImage);
-	} else if (imageFilename && fs.existsSync(join(screenshotsDir, imageFilename))) {
-		returnImagePath = join(screenshotsDir, imageFilename);
-	}
-
-	if (needToBeDecoded) {
-		const videoExists = fs.existsSync(join(getRecordingsDir(), videoFilename!));
-
-		if (!videoExists) {
-			return c.json({ error: "Video not found" }, { status: 404 });
-		}
-
-		const decodedFilename = immediatelyExtractFrameFromVideo(
-			videoFilename!,
-			frameIndex!,
-			decodingTempDir
-		);
-		const decodedPath = join(decodingTempDir, decodedFilename);
-
-		await waitForFileExists(decodedPath);
-
-		if (existsSync(decodedPath)) {
-			const imageBuffer = fs.readFileSync(decodedPath);
-			setTimeout(() => {
-				fs.unlinkSync(decodedPath);
-			}, 1000);
-			return new Response(imageBuffer, {
-				status: 200,
-				headers: {
-					"Content-Type": "image/bmp"
-				}
-			});
-		} else {
-			return c.json({ error: "Frame cannot be decoded" }, { status: 500 });
-		}
-	} else {
-		const imageBuffer = fs.readFileSync(returnImagePath);
-		const imageMimeType = imageFilename?.endsWith(".png") ? "image/png" : "image/jpeg";
-		return new Response(imageBuffer, {
-			status: 200,
-			headers: {
-				"Content-Type": imageMimeType
-			}
-		});
-	}
-});
-
-export default app;

src/electron/utils/backend.ts

@@ -1,6 +1,20 @@
 import path from "path";
+import os from "os";
 import fs from "fs";
-import { getUserDataDir } from "../platform/index.js";
+import { __dirname } from "../dirname.js";
+
+export function getUserDataDir() {
+	switch (process.platform) {
+		case "win32":
+			return path.join(process.env.APPDATA!, "OpenRewind", "Record Data");
+		case "darwin":
+			return path.join(os.homedir(), "Library", "Application Support", "OpenRewind", "Record Data");
+		case "linux":
+			return path.join(os.homedir(), ".config", "OpenRewind", "Record Data");
+		default:
+			throw new Error("Unsupported platform");
+	}
+}
 
 export function createDataDir() {
 	const dataDir = getUserDataDir();
@@ -50,48 +64,15 @@ export function getEncodingTempDir() {
 	return encodingTempDir;
 }
 
-export function getDecodingTempDir() {
+export function getFFmpegPath() {
-	const tempDir = createTempDir();
+	switch (process.platform) {
-	const decodingTempDir = path.join(tempDir, "decoding");
+		case "win32":
-	if (!fs.existsSync(decodingTempDir)) {
+			return path.join(__dirname, "bin", process.platform, "ffmpeg.exe");
-		fs.mkdirSync(decodingTempDir, { recursive: true });
+		case "darwin":
+			return path.join(__dirname, "bin", process.platform, "ffmpeg");
+		case "linux":
+			return path.join(__dirname, "bin", process.platform, "ffmpeg");
+		default:
+			throw new Error("Unsupported platform");
 	}
-	return decodingTempDir;
-}
-
-export async function waitForFileExists(filePath: string, timeout: number = 10000): Promise<void> {
-	return new Promise((resolve, reject) => {
-		fs.access(filePath, fs.constants.F_OK, (err) => {
-			if (!err) {
-				resolve();
-				return;
-			}
-
-			const dir = path.dirname(filePath);
-			const filename = path.basename(filePath);
-
-			const watcher = fs.watch(dir, (eventType, watchedFilename) => {
-				if (eventType === "rename" && watchedFilename === filename) {
-					fs.access(filePath, fs.constants.F_OK, (err) => {
-						if (!err) {
-							clearTimeout(timeoutId);
-							watcher.close();
-							resolve();
-						}
-					});
-				}
-			});
-
-			watcher.on("error", (err) => {
-				clearTimeout(timeoutId);
-				watcher.close();
-				reject(err);
-			});
-
-			const timeoutId = setTimeout(() => {
-				watcher.close();
-				reject(new Error(`Timeout: File ${filePath} did not exist within ${timeout}ms`));
-			}, timeout);
-		});
-	});
 }

src/electron/utils/electron.ts

@@ -0,0 +1,15 @@
+import { app } from "electron";
+
+export function hideDock(){
+    if (process.platform === 'darwin') {
+        // Hide the dock icon on macOS
+        app.dock.hide();
+    }
+}
+
+export function showDock(){
+    if (process.platform === 'darwin') {
+        // Show the dock icon on macOS
+        app.dock.show();
+    }
+}

src/electron/utils/index.ts

@@ -1,4 +0,0 @@
-export * from "./fs/index.js";
-export * from "./platform/index.js";
-export * from "./video/index.js";
-export * from "./network/index.js";

src/electron/utils/network/index.ts

@@ -1,17 +0,0 @@
-import { detect } from "detect-port";
-
-/**
- * Finds an available port starting from a given port.
- * @param startingFrom - The port number to start searching from.
- * @returns A Promise that resolves to the first available port number.
- */
-export async function findAvailablePort(startingFrom: number): Promise<number> {
-	return detect(startingFrom)
-		.then((realPort) => {
-			return realPort; // Return the available port
-		})
-		.catch((err) => {
-			console.error(`Error detecting port: ${err.message}`);
-			throw err; // Rethrow the error for further handling if needed
-		});
-}

src/electron/utils/platform/index.ts

@@ -1,50 +0,0 @@
-import path from "path";
-import os from "os";
-import { app } from "electron";
-import { __dirname } from "../../dirname.js";
-
-export function getUserDataDir() {
-	switch (process.platform) {
-		case "win32":
-			return path.join(process.env.APPDATA!, "OpenRewind", "Record Data");
-		case "darwin":
-			return path.join(
-				os.homedir(),
-				"Library",
-				"Application Support",
-				"OpenRewind",
-				"Record Data"
-			);
-		case "linux":
-			return path.join(os.homedir(), ".config", "OpenRewind", "Record Data");
-		default:
-			throw new Error("Unsupported platform");
-	}
-}
-
-export function hideDock() {
-	if (process.platform === "darwin") {
-		// Hide the dock icon on macOS
-		app.dock.hide();
-	}
-}
-
-export function showDock() {
-	if (process.platform === "darwin") {
-		// Show the dock icon on macOS
-		app.dock.show();
-	}
-}
-
-export function getFFmpegPath() {
-	switch (process.platform) {
-		case "win32":
-			return path.join(__dirname, "bin", process.platform, "ffmpeg.exe");
-		case "darwin":
-			return path.join(__dirname, "bin", process.platform, "ffmpeg");
-		case "linux":
-			return path.join(__dirname, "bin", process.platform, "ffmpeg");
-		default:
-			throw new Error("Unsupported platform");
-	}
-}

src/electron/utils/video/index.ts

@@ -1,81 +0,0 @@
-import { join } from "path";
-import { spawn, execSync } from "child_process";
-import { getRecordingsDir } from "../fs/index.js";
-import { getFFmpegPath } from "../platform/index.js";
-import { ENCODING_FRAME_RATE } from "../../backend/consts.js";
-import cache from "memory-cache";
-
-function getBestCodec() {
-	const cachedCodec = cache.get("backend:bestCodec");
-	if (cachedCodec) {
-		return cachedCodec;
-	}
-	const codecs = execSync(`${getFFmpegPath()} -codecs`).toString("utf-8");
-	let codec = "";
-	if (codecs.includes("h264_videotoolbox")) {
-		codec = "h264_videotoolbox";
-	} else {
-		codec = "libx264";
-	}
-	cache.put("backend:bestCodec", codec);
-	return codec;
-}
-
-export function getEncodeCommand(metaFilePath: string, videoPath: string) {
-	const codec = getBestCodec();
-	return `${getFFmpegPath()} -f concat -safe 0 -i "${metaFilePath}" -c:v ${codec} -r ${ENCODING_FRAME_RATE} -y -threads 1 "${videoPath}"`;
-}
-
-export function immediatelyExtractFrameFromVideo(
-	videoFilename: string,
-	frameIndex: number,
-	outputPath = "."
-) {
-	const bareVideoFilename = videoFilename.split(".").slice(0, -1).join(".");
-	const fullVideoPath = join(getRecordingsDir(), videoFilename);
-	const outputFilename = `${bareVideoFilename}_${frameIndex.toString().padStart(4, "0")}.bmp`;
-	const outputPathArg = join(outputPath, outputFilename);
-	const args = [
-		"-ss",
-		`${formatTime(frameIndex / ENCODING_FRAME_RATE)}`,
-		"-i",
-		`${fullVideoPath}`,
-		"-vframes",
-		"1",
-		`${outputPathArg}`
-	];
-	const ffmpeg = spawn("ffmpeg", args);
-	ffmpeg.stdout.on("data", (data) => {
-		console.log(data.toString());
-	});
-
-	ffmpeg.stderr.on("data", (data) => {
-		console.log(data.toString());
-	});
-	ffmpeg.on("exit", (code) => {
-		if (code !== 0) {
-			console.error("Error extracting frame:", code);
-		}
-	});
-	return outputFilename;
-}
-
-function formatTime(seconds: number): string {
-	// Calculate hours, minutes, seconds, and milliseconds
-	const hours = Math.floor(seconds / 3600);
-	const minutes = Math.floor((seconds % 3600) / 60);
-	const secs = Math.floor(seconds % 60);
-	const milliseconds = Math.round((seconds % 1) * 1000);
-
-	// Format the output with leading zeros
-	const formattedTime =
-		[
-			String(hours).padStart(2, "0"),
-			String(minutes).padStart(2, "0"),
-			String(secs).padStart(2, "0")
-		].join(":") +
-		"." +
-		String(milliseconds).padStart(3, "0");
-
-	return formattedTime;
-}

src/global.d.ts

@@ -7,9 +7,13 @@ interface Window {
 		osDisplay: () => string;
 	};
 	electron: {
-		getScreenshot: () => Promise<string>;
+		getScreenshot: () =>  Promise<string>;
-	};
+	}
+	api: {
+	    send: (channel: any, data: any) => void,
+		receive: (channel: any, func: any) => void
+	},
 	settingsWindow: {
-		close: () => void;
+		close: () => void,
-	};
+	}
 }

src/renderer/app.css

@@ -1,3 +1,3 @@
 #title-bar {
-	-webkit-app-region: drag;
+    -webkit-app-region: drag;
 }

src/renderer/app.tsx

@@ -2,39 +2,9 @@ import { HashRouter, Routes, Route } from "react-router-dom";
 import SettingsPage from "pages/settings";
 import "./i18n.ts";
 import RewindPage from "pages/rewind";
-import "./app.css";
+import './app.css';
-import { useEffect } from "react";
-import { useAtom } from "jotai";
-import { apiInfoAtom } from "./state/apiInfo.ts";
-
-declare global {
-	interface Window {
-		appGlobal: {
-			requestApiInfo: () => Promise<{ port: number; apiKey: string }>;
-		};
-	}
-}
 
 export function App() {
-	const [apiInfo, setApiInfo] = useAtom(apiInfoAtom);
-
-	useEffect(() => {
-		const fetchApiInfo = async () => {
-			try {
-				const info = await window.appGlobal.requestApiInfo();
-				setApiInfo(info);
-			} catch (error) {
-				console.error("Failed to fetch API info:", error);
-			}
-		};
-
-		fetchApiInfo();
-	}, [setApiInfo]);
-
-	if (!apiInfo) {
-		return null;
-	}
-
 	return (
 		<div className="w-screen h-screen">
 			<HashRouter>

src/renderer/i18n.ts

@@ -38,7 +38,7 @@ i18n.use(initReactI18next) // passes i18n down to react-i18next
 			},
 			ko: {
 				translation: ko
-			}
+			},
 		},
 		fallbackLng: "en",
 

src/renderer/index.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 body {
-	@apply bg-transparent;
+    @apply bg-transparent;
 }

src/renderer/index.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <html lang="en">
-	<head>
+<head>
-		<meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	</head>
+</head>
-	<body>
+<body>
-		<div id="root"></div>
+<div id="root"></div>
-		<script type="module" src="./main.tsx"></script>
+<script type="module" src="./main.tsx"></script>
-	</body>
+</body>
 </html>

src/renderer/main.tsx

@@ -6,7 +6,7 @@ import "./index.css";
 const app = createRoot(document.getElementById("root")!);
 
 app.render(
-	<StrictMode>
+    <StrictMode>
-		<App />
+        <App />
-	</StrictMode>
+    </StrictMode>
 );

src/renderer/state/apiInfo.ts

@@ -1,6 +0,0 @@
-import { atom } from 'jotai'
-
-export const apiInfoAtom = atom({
-    port: -1,
-    apiKey: ''
-})

tailwind.config.ts

@@ -4,7 +4,7 @@ const config: Config = {
 	content: [
 		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
 		"./components/**/*.{js,ts,jsx,tsx,mdx}",
-		"./src/**/*.{js,ts,jsx,tsx,mdx}"
+		"./src/**/*.{js,ts,jsx,tsx,mdx}",
 	],
 	theme: {
 		extend: {

tsconfig.app.json

@@ -1,35 +1,35 @@
 {
-	"compilerOptions": {
+  "compilerOptions": {
-		"baseUrl": ".",
+    "baseUrl": ".",
-		"composite": true,
+    "composite": true,
-		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-		"target": "ES2020",
+    "target": "ES2020",
-		"useDefineForClassFields": true,
+    "useDefineForClassFields": true,
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-		"module": "ESNext",
+    "module": "ESNext",
-		"skipLibCheck": true,
+    "skipLibCheck": true,
 
-		/* Bundler mode */
+    /* Bundler mode */
-		"moduleResolution": "bundler",
+    "moduleResolution": "bundler",
-		"allowImportingTsExtensions": true,
+    "allowImportingTsExtensions": true,
-		"emitDeclarationOnly": true,
+    "emitDeclarationOnly": true,
-		"resolveJsonModule": true,
+    "resolveJsonModule": true,
-		"isolatedModules": true,
+    "isolatedModules": true,
-		"moduleDetection": "force",
+    "moduleDetection": "force",
-		"jsx": "react-jsx",
+    "jsx": "react-jsx",
 
-		/* Linting */
+    /* Linting */
-		"strict": true,
+    "strict": true,
-		"noUnusedLocals": true,
+    "noUnusedLocals": true,
-		"noUnusedParameters": true,
+    "noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true
-	},
+  },
-	"include": [
+  "include": [
-		"src/renderer",
+      "src/renderer",
-		"src/renderer/**/*.ts",
+      "src/renderer/**/*.ts",
-		"src/renderer/**/*.tsx",
+      "src/renderer/**/*.tsx",
-		"src/global.d.ts",
+      "src/global.d.ts",
-		"pages/**/*.tsx",
+      "pages/**/*.tsx",
-		"components/**/*.tsx"
+      "components/**/*.tsx"
-	]
+  ],
 }

tsconfig.json

@@ -1,15 +1,18 @@
 {
-	"compilerOptions": {
+  "compilerOptions": {
-		"target": "ESNext",
+    "target": "ESNext",
-		"module": "ESNext",
+    "module": "ESNext",
-		"moduleResolution": "bundler",
+    "moduleResolution": "node",
-		"outDir": "./dist/electron",
+    "outDir": "./dist/electron",
-		"rootDir": "./src/electron",
+    "rootDir": "./src/electron",
-		"strict": true,
+    "strict": true,
-		"esModuleInterop": true,
+    "esModuleInterop": true,
-		"skipLibCheck": true,
+    "skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true
-	},
+  },
-	"include": ["src/electron"],
+  "include": ["src/electron"],
-	"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+  "references": [
+    { "path": "./tsconfig.app.json"},
+    { "path": "./tsconfig.node.json"}
+  ]
 }

tsconfig.node.json

@@ -1,23 +1,25 @@
 {
-	"compilerOptions": {
+  "compilerOptions": {
-		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-		"target": "ES2022",
+    "target": "ES2022",
-		"lib": ["ES2023"],
+    "lib": ["ES2023"],
-		"module": "ESNext",
+    "module": "ESNext",
-		"skipLibCheck": true,
+    "skipLibCheck": true,
-		"composite": true,
+    "composite": true,
 
-		/* Bundler mode */
+    /* Bundler mode */
-		"moduleResolution": "Bundler",
+    "moduleResolution": "Bundler",
-		"isolatedModules": true,
+    "isolatedModules": true,
-		"moduleDetection": "force",
+    "moduleDetection": "force",
 
-		/* Linting */
+    /* Linting */
-		"strict": true,
+    "strict": true,
-		"noUnusedLocals": true,
+    "noUnusedLocals": true,
-		"noUnusedParameters": true,
+    "noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": true,
-		"noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true
-	},
+  },
-	"include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }

vite.config.ts

@@ -19,10 +19,10 @@ export default defineConfig({
 			customChunk: (args) => {
 				// files into pages directory is export in single files
 				const { id } = args;
-				if (id.includes("node_modules")) {
+				if (id.includes('node_modules')) {
-					return "vendor";
+					return 'vendor';
 				} else {
-					return "main";
+					return 'main';
 				}
 			}
 		})