feature: implement several pages and functions

2024-12-02 01:54:40 +08:00 · 2024-12-02 01:54:40 +08:00 · d8c6c978de
commit d8c6c978de
parent be6be8280e
41 changed files with 1282 additions and 3709 deletions
--- a/.gitignore
+++ b/.gitignore
@ -153,3 +153,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+bin
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,8 @@
+{
+    "useTabs": true,
+    "tabWidth": 4,
+    "trailingComma": "none",
+    "singleQuote": false,
+    "printWidth": 100,
+    "endOfLine": "lf"
+}
--- a/components/settings/EnvironmentDetails.tsx
+++ b/components/settings/EnvironmentDetails.tsx
@ -0,0 +1,51 @@
+import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
+
+export default function EnvironmentDetails() {
+	const { t } = useTranslation();
+	const [electronVersion, setElectronVersion] = useState("");
+	const [chromeVersion, setChromeVersion] = useState("");
+	const [systemVersion, setSystemVersion] = useState("");
+	const [systemDisplayVersion, setSystemDisplayVersion] = useState("");
+	const [nodeVersion, setNodeVersion] = useState("");
+	useEffect(() => {
+		try {
+			setChromeVersion(window.versions.chrome());
+			setSystemVersion(window.versions.osRaw());
+			setSystemDisplayVersion(window.versions.osDisplay());
+			setElectronVersion(window.versions.electron());
+			setNodeVersion(window.versions.node());
+		} catch {
+			// ignore
+		}
+	}, []);
+	return (
+		<div className="mt-2">
+			<h2 className="text-xl font-bold leading-8">{t("settings.environment-details")}</h2>
+			<div className="text-xs leading-5 text-weaken">
+				<ul>
+					<li>
+						<span>{t("settings.chrome-version")}: </span>
+						{chromeVersion}
+					</li>
+					<li>
+						<span>{t("settings.electron-version")}: </span>
+						{electronVersion}
+					</li>
+					<li>
+						<span>{t("settings.node-version")}: </span>
+						{nodeVersion}
+					</li>
+					<li>
+						<span>{t("settings.os-version")}: </span>
+						{systemVersion}
+					</li>
+					<li>
+						<span>{t("settings.os")}: </span>
+						{systemDisplayVersion}
+					</li>
+				</ul>
+			</div>
+		</div>
+	);
+}
--- a/components/settings/IconWithText.tsx
+++ b/components/settings/IconWithText.tsx
@ -0,0 +1,20 @@
+// @ts-expect-error f**k ts who is expecting a f*king declaration for AN IMAGE.
+import imgUrl from "public/icon.png";
+import * as pjson from "package.json";
+import { useTranslation } from "react-i18next";
+
+export default function IconWithText() {
+	const { t } = useTranslation();
+	return (
+		<div className="flex">
+			<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 className="text-sm text-gray-700 dark:text-gray-200
+							font-medium ml-0.5">{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>
+	);
+}
--- a/components/settings/MenuItem.tsx
+++ b/components/settings/MenuItem.tsx
@ -0,0 +1,23 @@
+import { MouseEventHandler } from "react";
+import { Icon } from "@iconify-icon/react";
+
+const MenuItem = ({ icon, text, onClick }: {
+	icon: string,
+	text: string,
+	onClick: MouseEventHandler<HTMLDivElement>
+}) => {
+	return (
+		<div
+			className="flex flex-col hover:bg-gray-200 dark:hover:bg-gray-700
+                        rounded-md px-4 py-2 duration-75 gap-0.5 items-center"
+			onClick={onClick}
+		>
+			<div className="text-3xl flex justify-center items-center">
+				<Icon icon={icon} width="1em" height="1em" />
+			</div>
+			<span className="text-xs text-gray-600 dark:text-gray-200">{text}</span>
+		</div>
+	);
+};
+
+export default MenuItem;
--- a/components/settings/OpenSourceNote.tsx
+++ b/components/settings/OpenSourceNote.tsx
@ -0,0 +1,16 @@
+import { Trans } from "react-i18next";
+
+export default function OpenSourceNote() {
+	return (
+		<p id="settings-note" className="text-sm text-weaken mt-3">
+			<Trans i18nKey="settings.note">
+				OpenRewind is open source software licensed under
+				<a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL 3.0</a>.<br />
+				Source code is avaliable at
+				<a href="https://github.com/alikia2x/openrewind">
+					GitHub
+				</a>.
+			</Trans>
+		</p>
+	)
+}
--- a/components/settings/SettingsGroup.tsx
+++ b/components/settings/SettingsGroup.tsx
@ -0,0 +1,20 @@
+import * as React from "react";
+import { useRef } from "react";
+
+const SettingsGroup = (
+	{ children, groupName, addGroupRef }:
+		{ children: React.ReactNode, groupName: string, addGroupRef: Function }) => {
+	const groupRef = useRef(null);
+
+	React.useEffect(() => {
+		addGroupRef(groupName, groupRef.current);
+	}, [groupName, addGroupRef]);
+
+	return (
+		<div ref={groupRef} className="my-4">
+			{children}
+		</div>
+	);
+};
+
+export default SettingsGroup;
--- a/components/settings/Title.tsx
+++ b/components/settings/Title.tsx
@ -0,0 +1,10 @@
+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>
+	);
+}
+
+export default Title;
--- a/electron-builder.json
+++ b/electron-builder.json
@ -2,7 +2,10 @@
    "appId": "com.alikia2x.openrewind",
    "mac": {
        "category": "public.app-category.productivity",
-        "target": "dmg"
+        "target": "dmg",
+        "files": [
+            "bin/macos"
+        ]
    },
    "productName": "OpenRewind",
    "directories": {
--- a/gulpfile.ts
+++ b/gulpfile.ts
@ -2,6 +2,7 @@ import gulp from "gulp";
 import ts from "gulp-typescript";
 // @ts-ignore
 import clean from "gulp-clean";
+import fs from "fs";

 const tsProject = ts.createProject('tsconfig.json');

@ -11,19 +12,34 @@ gulp.task('clean', function () {
 });

 gulp.task('scripts', () => {
+	if (!fs.existsSync("dist/dev")) {
+		fs.mkdirSync("dist/dev", { recursive: true });
+	}
 	const tsResult = tsProject.src()
 		.pipe(tsProject());
-	return tsResult.js.pipe(gulp.dest('dist/dev'));
+
+	const jsFiles = gulp.src(['src/electron/**/*.js', 'src/electron/**/*.cjs']);
+
+	return tsResult.js
+		.pipe(gulp.dest('dist/dev'))
+		.on('end', () => {
+			jsFiles.pipe(gulp.dest('dist/dev'));
+		});
 });

 gulp.task('assets', () => {
-	return gulp.src('src/electron/assets/**/*')
+	return gulp.src('src/electron/assets/**/*', { encoding: false })
 		.pipe(gulp.dest('dist/dev/assets'));
 });

+gulp.task('binary', () => {
+	return gulp.src('bin/**/*', { encoding: false })
+		.pipe(gulp.dest('dist/dev/bin'));
+});
+
 gulp.task("locales", () => {
 	return gulp.src('i18n/**/*')
 	    .pipe(gulp.dest('dist/dev/i18n'));
 })

-gulp.task('build', gulp.series('clean', 'scripts', 'assets', 'locales'));
+gulp.task('build', gulp.series('clean', 'scripts', 'assets', 'binary', 'locales'));
--- a/i18n/ar.json
+++ b/i18n/ar.json
@ -1,3 +1,8 @@
 {
-
+  "settings": "إعدادات",
+  "tray": {
+    "quit": "يترك",
+    "showMainWindow": "يبحث",
+    "showSettingsWindow": "إعدادات"
+  }
 }
--- a/i18n/de.json
+++ b/i18n/de.json
@ -1,2 +1,8 @@
 {
+  "settings": "Einstellungen",
+  "tray": {
+    "quit": "Aufhören",
+    "showMainWindow": "Suchen",
+    "showSettingsWindow": "Einstellungen"
+  }
 }
--- a/i18n/en.json
+++ b/i18n/en.json
@ -1,5 +1,19 @@
 {
-    "settings": "Settings",
+    "settings": {
+        "title": "Settings",
+        "about": "About",
+        "screen": "Screen",
+        "screen-recording": "Screen Recording",
+        "version": "Version {version}",
+        "copyright": "Copyright © 2024 alikia2x",
+        "note": "OpenRewind is an open source software licensed under <1>AGPL 3.0</1>, <3></3>and its source code is avaliable at <5>GitHub</5>.",
+        "environment-details": "Environment Info",
+        "node-version": "Node.js Version",
+        "electron-version": "Electron Version",
+        "chrome-version": "Chrome Version",
+        "os-version": "OS Version",
+        "os": "Operating System"
+    },
    "tray": {
        "showMainWindow": "Search",
        "showSettingsWindow": "Settings",
--- a/i18n/es.json
+++ b/i18n/es.json
@ -1,2 +1,8 @@
 {
+  "settings": "Ajustes",
+  "tray": {
+    "quit": "Abandonar",
+    "showMainWindow": "Buscar",
+    "showSettingsWindow": "Ajustes"
+  }
 }
--- a/i18n/fr.json
+++ b/i18n/fr.json
@ -1,2 +1,8 @@
 {
+  "settings": "Paramètres",
+  "tray": {
+    "quit": "Quitter",
+    "showMainWindow": "Recherche",
+    "showSettingsWindow": "Paramètres"
+  }
 }
--- a/i18n/it.json
+++ b/i18n/it.json
@ -1,2 +1,8 @@
 {
+  "settings": "Impostazioni",
+  "tray": {
+    "quit": "Esentato",
+    "showMainWindow": "Ricerca",
+    "showSettingsWindow": "Impostazioni"
+  }
 }
--- a/i18n/ja.json
+++ b/i18n/ja.json
@ -1,3 +1,8 @@
 {
-
+  "settings": "設定",
+  "tray": {
+    "quit": "やめる",
+    "showMainWindow": "検索",
+    "showSettingsWindow": "設定"
+  }
 }
--- a/i18n/ko.json
+++ b/i18n/ko.json
@ -1,3 +1,8 @@
 {
-
+  "settings": "설정",
+  "tray": {
+    "quit": "그만두다",
+    "showMainWindow": "찾다",
+    "showSettingsWindow": "설정"
+  }
 }
--- a/i18n/zh-CN.json
+++ b/i18n/zh-CN.json
@ -1,5 +1,19 @@
 {
-    "settings": "设置",
+    "settings": {
+        "title": "设置",
+        "about": "关于",
+        "screen": "屏幕",
+        "screen-recording": "屏幕录制",
+        "version": "版本 {version}",
+        "copyright": "版权所有 © 2024 alikia2x",
+        "note": "OpenRewind 是基于<1>AGPL 3.0</1>授权的开源软件， <3></3>其源代码托管在<5>GitHub</5>上。",
+        "environment-details": "运行环境",
+        "node-version": "Node.js 版本",
+        "electron-version": "Electron 版本",
+        "chrome-version": "Chrome 版本",
+        "os-version": "系统版本",
+        "os": "操作系统"
+    },
    "tray": {
        "showMainWindow": "搜索…",
        "showSettingsWindow": "应用设置",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "openrewind",
-  "version": "0.1.1",
+  "version": "0.2.0",
  "type": "module",
  "description": "Your second brain, superpowered.",
  "main": "dist/dev/index.js",
@ -9,9 +9,8 @@
    "dev:all": "concurrently -n=react,electron -c='#ff3e00',blue \"bun run dev:react\" \"bun run dev:electron\"",
    "dev:react": "vite dev",
    "dev:electron": "bunx gulp build && electron dist/dev/index.js",
-    "build": "cross-env NODE_ENV=production bun run build:all",
-    "build:all": "concurrently -n=react,electron -c='#ff3e00',blue \"bun run build:react\" \"bun run build:electron\"",
    "build:react": "vite build",
+    "build:app": "bunx gulp build",
    "build:electron": "electron-builder",
    "start": "cross-env NODE_ENV=production bun run start:all"
  },
@ -22,8 +21,13 @@
    "@unly/universal-language-detector": "^2.0.3",
    "electron-context-menu": "^4.0.4",
    "electron-reloader": "^1.2.3",
+    "electron-screencapture": "^1.1.0",
    "electron-serve": "^2.1.1",
+    "electron-store": "^10.0.0",
    "electron-window-state": "^5.0.3",
+    "execa": "^9.5.1",
+    "ffmpeg-static": "^5.2.0",
+    "fluent-ffmpeg": "^2.1.3",
    "i18next": "^24.0.2",
    "i18next-browser-languagedetector": "^8.0.0",
    "i18next-electron-fs-backend": "^3.0.2",
@ -32,15 +36,19 @@
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-i18next": "^15.1.2",
+    "react-router": "^7.0.1",
    "react-router-dom": "^7.0.1",
    "vite-tsconfig-paths": "^5.1.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
+    "@iconify-icon/react": "^2.1.0",
+    "@types/fluent-ffmpeg": "^2.1.27",
    "@types/gulp": "^4.0.17",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.19",
    "concurrently": "^9.0.1",
    "cross-env": "^7.0.3",
    "del": "^8.0.0",
@ -53,11 +61,11 @@
    "gulp": "^5.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-typescript": "6.0.0-alpha.1",
+    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.15",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.11.0",
    "vite": "^5.4.10",
-    "postcss": "^8.4.38",
-    "autoprefixer": "^10.4.19"
+    "vite-plugin-chunk-split": "^0.5.0"
  }
 }
--- a/pages/rewind/index.css
+++ b/pages/rewind/index.css
@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}
--- a/pages/rewind/index.tsx
+++ b/pages/rewind/index.tsx
@ -1,9 +1,42 @@
+import { useState } from "react";
+import "./index.css";
+
 export default function RewindPage() {
+	const [currentScreenShotBase64, setScreenShotData] = useState<string | null>(null);
+	window.api.receive("fromMain", (message: string) => {
+		setScreenShotData(message);
+	});
 	return (
 		<>
-			<div className="bg-white dark:bg-gray-900 w-full min-h-screen relative dark:text-white p-4">
-				<p>timeline</p>
+			<div className="w-screen h-screen relative dark:text-white">
+				{currentScreenShotBase64 && (
+					<img
+						className="absolute top-0 left-0 z-10 w-full h-full"
+						src={"data:image/png;base64," + currentScreenShotBase64}
+						alt=""
+					/>
+				)}
+				{currentScreenShotBase64 ? (
+					<div
+						className="rounded-xl bottom-12 left-6 fixed z-30 w-auto h-auto px-4 py-3
+						bg-white bg-opacity-50 backdrop-blur-lg text-gray-800"
+					>
+						Here's a screenshot captured just now.
+						<br />
+						The relavant features has not been implemented, and you han hit Esc to quit
+						this window.
+						<br />
+						Meow! ヽ(=^・ω・^=)丿
+					</div>
+				) : (
+					<div
+						className="rounded-xl bottom-12 left-6 fixed z-30 w-auto h-auto px-4 py-3
+						bg-white bg-opacity-50 backdrop-blur-lg text-gray-800"
+					>
+						Now capturing a screenshot for your screen...(ง •̀_•́)ง
+					</div>
+				)}
 			</div>
 		</>
-	)
+	);
 }
--- a/pages/settings/index.css
+++ b/pages/settings/index.css
@ -0,0 +1,19 @@
+#root {
+    overflow: hidden;
+    user-select: none;
+}
+#settings-note a {
+    @apply text-blue-700 dark:text-[#66ccff]
+}
+
+.text-weaken {
+    @apply text-gray-700 dark:text-gray-300;
+}
+
+#settings-scroll-container::-webkit-scrollbar {
+    display: none;
+}
+
+#settings-scroll-container {
+    scrollbar-width: none;
+}
--- a/pages/settings/index.tsx
+++ b/pages/settings/index.tsx
@ -1,21 +1,76 @@
 import { useTranslation } from "react-i18next";
-import "src/renderer/app.css";
-import * as pjson from "package.json";
+import "./index.css";
+import { useCallback, useRef, useState } from "react";
+import SettingsGroup from "components/settings/SettingsGroup.tsx";
+import MenuItem from "components/settings/MenuItem.tsx";
+import IconWithText from "components/settings/IconWithText.tsx";
+import Title from "components/settings/Title.tsx";
+import OpenSourceNote from "components/settings/OpenSourceNote.tsx";
+import EnvironmentDetails from "components/settings/EnvironmentDetails.tsx";
+
+interface SettingsGroupRefs {
+	[key: string]: HTMLDivElement;
+}

 export default function SettingsPage() {
 	const { t } = useTranslation();
+	const [groupRefs, setGroupRefs] = useState<SettingsGroupRefs>({});
+	const containerRef = useRef<HTMLDivElement>(null);
+	const titleBarRef = useRef<HTMLDivElement>(null);
+
+	const addGroupRef = useCallback((groupName: string, ref: HTMLDivElement) => {
+		setGroupRefs((prevRefs) => {
+			prevRefs[groupName] = ref;
+			return prevRefs;
+		});
+	}, []);
+
+	function scrollToGroup(groupName: string) {
+		const key = groupName as keyof typeof groupRefs;
+		console.log(groupRefs[key]);
+		if (!groupRefs[key]) return;
+		containerRef.current!.scrollTop = groupRefs[key].getBoundingClientRect().top -
+			titleBarRef.current!.getBoundingClientRect().height;
+	}
+
 	return (
 		<>
-			<title>{t('settings')}</title>
-			<div className="w-full h-9 bg-white dark:bg-gray-800 !bg-opacity-80 flex items-center justify-center
-			 dark:text-white font-semibold fixed z-10 backdrop-blur-lg text-[.9rem]" id="title-bar">
-				{t('settings')}
+			<title>{t("settings.title")}</title>
+			<div className="w-full h-auto bg-white dark:bg-gray-800 !bg-opacity-80 flex flex-col
+			 dark:text-white font-semibold fixed z-10 backdrop-blur-lg text-[.9rem]" ref={titleBarRef}>
+				<div className="w-full flex items-center justify-center h-9" id="title-bar">
+					{t("settings.title")}
 				</div>
-			<div className="bg-white dark:bg-gray-900 w-full min-h-screen relative dark:text-white pt-16 px-10">
-				<h1 className="text-3xl font-bold leading-[3rem]">About</h1>
-				<h2 className="text-lg">OpenRewind</h2>
-				<span className="text-sm font-semibold">Version: {pjson.version}</span>
+				<div className="h-[4.5rem] pt-0 pb-2">
+					<div className="w-full h-full px-20 flex items-center justify-center gap-2">
+						<MenuItem
+							icon="fluent:screenshot-record-28-regular"
+							text={t("settings.screen")}
+							onClick={() => scrollToGroup("screen")}
+						/>
+						<MenuItem
+							icon="fluent:settings-24-regular"
+							text={t("settings.about")}
+							onClick={() => scrollToGroup("about")}
+						/>
+					</div>
+				</div>
+			</div>
+			<div className="h-full bg-slate-100 dark:bg-gray-900 w-full scroll-smooth
+				relative dark:text-white pt-28 pb-12 px-10 overflow-auto" ref={containerRef} id="settings-scroll-container">
+				<SettingsGroup groupName="screen" addGroupRef={addGroupRef}>
+					<Title i18nKey="settings.screen-recording"/>
+					<div className="flex">
+						<p>Nothing yet.</p>
+					</div>
+				</SettingsGroup>
+				<SettingsGroup groupName="about" addGroupRef={addGroupRef}>
+					<Title i18nKey={"settings.about"}/>
+					<IconWithText/>
+					<OpenSourceNote/>
+					<EnvironmentDetails/>
+				</SettingsGroup>
 			</div>
 		</>
-	)
+	);
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/icon.png
+++ b/public/icon.png
--- a/src/electron/createWindow.ts
+++ b/src/electron/createWindow.ts
@ -0,0 +1,100 @@
+import { app, BrowserWindow, screen } from "electron";
+import { join } from "path";
+import { __dirname } from "./utils.js";
+import windowStateManager from "electron-window-state";
+
+function loadURL(window: BrowserWindow, path = "", vitePort: string) {
+	const dev = !app.isPackaged;
+	if (dev) {
+		window.loadURL(`http://localhost:${vitePort}/#${path}`).catch((e) => {
+			console.log("Error loading URL:", e);
+		});
+	}
+	else {
+		window.loadFile(join(__dirname, "../renderer/index.html"), {
+			hash: path,
+		}).catch((e) => {
+			console.log("Error loading URL:", e);
+		});
+	}
+}
+
+export function createSettingsWindow(vitePort: string, closeCallBack: Function) {
+	const windowState = windowStateManager({
+		defaultWidth: 650,
+		defaultHeight: 550
+	});
+	const window = new BrowserWindow({
+		width: 650,
+		height: 550,
+		webPreferences: {
+			nodeIntegration: true,
+			contextIsolation: true,
+			preload: join(__dirname, 'preload/settings.cjs')
+		},
+		titleBarStyle: "hiddenInset",
+		resizable: false,
+	});
+	windowState.manage(window);
+	window.once("ready-to-show", () => {
+		window.show();
+		window.focus();
+	});
+	window.on("close", (e) => {
+		window.hide();
+		windowState.saveState(window);
+		e.preventDefault();
+	});
+	window.once("close", () => {
+		window.hide()
+	});
+	loadURL(window, "settings", vitePort);
+	return window;
+}
+
+export function createMainWindow(vitePort: string, closeCallBack: Function) {
+	const display = screen.getPrimaryDisplay();
+	const { width, height } = display.bounds;
+	const windowState = windowStateManager({
+		defaultWidth: width,
+		defaultHeight: height
+	});
+
+	const window = new BrowserWindow({
+		width,
+		height,
+		x: 0,
+		y: 0,
+		frame: false,
+		resizable: false,
+		fullscreenable: false,
+		alwaysOnTop: true,
+		skipTaskbar: true,
+		webPreferences: {
+			nodeIntegration: true,
+			contextIsolation: true,
+			preload: join(__dirname, 'preload/rewind.cjs')
+		},
+		roundedCorners: false,
+		transparent: true,
+	});
+
+	windowState.manage(window);
+
+	window.once("ready-to-show", () => {
+		window.show();
+		window.setAlwaysOnTop(true, "screen-saver");
+		window.setBounds({ x: 0, y: 0, width, height });
+		window.focus();
+	});
+
+	window.on("close", () => {
+		windowState.saveState(window);
+	});
+	window.once("close", () => {
+		closeCallBack();
+	});
+
+	loadURL(window, "rewind", vitePort);
+	return window;
+}
--- a/src/electron/i18n.ts
+++ b/src/electron/i18n.ts
@ -1,12 +1,9 @@
 import { join } from "path";
 import i18n from "i18next";
 import fs from "fs";
-import { fileURLToPath } from 'url'
-import path from 'path'
+import { app } from "electron";
+import { __dirname } from "./utils.js";

-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-import { app } from 'electron';

 /**
 * Selects the appropriate language based on system preferences and available languages
@ -26,7 +23,7 @@ export function detectLanguage(langs: string[], fallback: string): string {
 	// Find a matching language
 	const matchedLanguage = langs.find(lang => {
 		if (lang.indexOf(normalizedLang) !== -1) {
-			return lang
+			return lang;
 		}
 	});

@ -34,26 +31,26 @@ export function detectLanguage(langs: string[], fallback: string): string {
 	return matchedLanguage || fallback;
 }

-const languages = ['en', 'de', 'es', 'fr', 'it', 'ja', 'ar', 'ko', 'zh-CN'];
+export default function initI18n() {
+	const languages = ["en", "de", "es", "fr", "it", "ja", "ar", "ko", "zh-CN"];

 	const l = detectLanguage(languages, "en");

-
 	const resources = languages.reduce((acc: { [key: string]: { translation: any } }, lang) => {
 		acc[lang] = {
-		translation: JSON.parse(fs.readFileSync(join(__dirname, `./i18n/${lang}.json`), 'utf8'))
+			translation: JSON.parse(fs.readFileSync(join(__dirname, `./i18n/${lang}.json`), "utf8"))
 		};
 		return acc;
 	}, {});

-
 	i18n.init({
 		resources,
 		lng: l,
 		fallbackLng: "en",
 		interpolation: {
 			escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
-	},
+		}
 	});
+	return i18n;
+}

-const t = i18n.t;
--- a/src/electron/index.ts
+++ b/src/electron/index.ts
@ -1,159 +1,98 @@
-import windowStateManager from 'electron-window-state';
-import { app, BrowserWindow, screen,ipcMain, globalShortcut, Tray, Menu, nativeImage } from 'electron';
-import contextMenu from 'electron-context-menu';
+import { app, BrowserWindow, globalShortcut, Menu, nativeImage, Tray } from "electron";
+import contextMenu from "electron-context-menu";
 import { join } from "path";
-import i18n from "i18next";
-import "./i18n.js";
-const t = i18n.t;
+import initI18n from "./i18n.js";
+import { createMainWindow, createSettingsWindow } from "./createWindow.js";
+import { __dirname, captureScreen, getFirstCaptureScreenDeviceId } from "./utils.js";
+import * as fs from "fs";

+const i18n = initI18n();
+
+const t = i18n.t.bind(i18n);
 const port = process.env.PORT || "5173";
 const dev = !app.isPackaged;

-let tray = null
+let tray = null;
+
+async function c() {
+	const screenshotpath = join(__dirname, "screenshot.png");
+	const ffmpegPath = join(__dirname, dev ? "bin/macos/ffmpeg" : "../../bin/macos/ffmpeg");
+	const deviceID = await getFirstCaptureScreenDeviceId(ffmpegPath);
+	if (deviceID) {
+		await captureScreen(ffmpegPath, deviceID, screenshotpath);
+		const screenshotData = fs.readFileSync(screenshotpath, "base64");
+		return screenshotData;
+	}
+	return null;
+}

 function createTray() {
-    const pathRoot: string = dev ? "./src/electron/assets/" : "./assets/";
-    const icon = nativeImage.createFromPath(pathRoot + 'TrayIconTemplate@2x.png');
-    icon.resize({ width: 32, height: 32 })
-    tray = new Tray(pathRoot + 'TrayIcon.png');
+	const pathRoot: string = dev ? "./src/electron/assets/" : join(__dirname, "./assets/");
+	const icon = nativeImage.createFromPath(pathRoot + "TrayIconTemplate@2x.png");
+	icon.resize({ width: 32, height: 32 });
+	tray = new Tray(pathRoot + "TrayIcon.png");
 	tray.setImage(icon);

 	const contextMenu = Menu.buildFromTemplate([
 		{
-            label: t('tray.showMainWindow'),
-            click: () => {
-                if (!mainWindow) createMainWindow();
+			label: t("tray.showMainWindow"),
+			click: async () => {
+				if (!mainWindow) mainWindow = createMainWindow(port, () => (mainWindow = null));
+				mainWindow!.webContents.send("fromMain", null);
+				mainWindow!.setIgnoreMouseEvents(true);
 				mainWindow!.show();
+				c()
+					.then((data) => {
+						mainWindow!.webContents.send("fromMain", data);
+						mainWindow!.setIgnoreMouseEvents(false);
+					})
+					.catch((err) => {
+						console.error(err);
+					});
 			}
 		},
 		{
-            label: t('tray.showSettingsWindow'),
+			label: t("tray.showSettingsWindow"),
 			click: () => {
-                if (!settingsWindow) createSettingsWindow();
+				if (!settingsWindow)
+					settingsWindow = createSettingsWindow(port, () => (settingsWindow = null));
 				settingsWindow!.show();
 			}
 		},
-        { type: 'separator' },
+		{ type: "separator" },
 		{
-            label: t('tray.quit'),
+			label: t("tray.quit"),
 			click: () => {
-                app.quit()
+				app.quit();
 			}
 		}
-    ])
+	]);

-    tray.setContextMenu(contextMenu)
-    tray.setToolTip('OpenRewind')
+	tray.setContextMenu(contextMenu);
+	tray.setToolTip("OpenRewind");
 }

 let mainWindow: BrowserWindow | null;
 let settingsWindow: BrowserWindow | null;

-
-function createSettingsWindow() {
-    const window = new BrowserWindow({
-        width: 650,
-        height: 550,
-        webPreferences: {
-            nodeIntegration: true,
-            contextIsolation: true
-        },
-        titleBarStyle: 'hiddenInset',
-        resizable: false,
-    });
-    window.once('ready-to-show', () => {
-        window.show();
-        window.focus();
-    });
-
-    settingsWindow = window;
-
-    if (dev) loadVite(window ,port, "settings");
-    else settingsWindow.loadFile(join(__dirname, '../renderer/index.html/settings'));
-}
-
 contextMenu({
 	showLookUpSelection: true,
 	showSearchWithGoogle: true,
-    showCopyImage: true,
+	showCopyImage: true
 });

-function loadVite(window: BrowserWindow, port: string | undefined, path = "") {
-    console.log(`http://localhost:${port}/${path}`);
-    window.loadURL(`http://localhost:${port}/${path}`).catch((e) => {
-        console.log('Error loading URL, retrying', e);
-        setTimeout(() => {
-            loadVite(window, port, path);
-        }, 1000);
-    });
-}
-
-function createMainWindow() {
-    const display = screen.getPrimaryDisplay();
-    const { width, height } = display.bounds;
-    let windowState = windowStateManager({
-        defaultWidth: width,
-        defaultHeight: height,
-    });
-
-    const window = new BrowserWindow({
-        width,
-        height,
-        x: 0,
-        y: 0,
-        frame: false,
-        resizable: false,
-        fullscreenable: false,
-        transparent: false,
-        alwaysOnTop: true,
-        skipTaskbar: true,
-        webPreferences: {
-            nodeIntegration: true,
-            contextIsolation: false
-        },
-        roundedCorners: false
-    });
-
-    windowState.manage(window);
-
-    window.once('ready-to-show', () => {
-        window.show();
-        window.setAlwaysOnTop(true, 'screen-saver');
-        window.setBounds({ x: 0, y: 0, width, height });
-        window.focus();
-    });
-
-    window.on('close', () => {
-        windowState.saveState(window);
-    });
-    window.once('close', () => {
-        mainWindow = null;
-    });
-
-    mainWindow = window;
-
-    if (dev) loadVite(window, port, "rewind");
-    else mainWindow.loadFile(join(__dirname, '../renderer/index.html/rewind'));
-}
-
-app.once('ready', () => {
+app.once("ready", () => {
 	app.dock.hide();
 });
-app.on('activate', () => {
-});
+app.on("activate", () => {});

-app.on('ready', () => {
+app.on("ready", () => {
 	createTray();
-    globalShortcut.register('Escape', () => {
+	globalShortcut.register("Escape", () => {
 		if (!mainWindow) return;
 		mainWindow.hide();
 	});
 });
-app.on('window-all-closed', () => {
-    if (process.platform !== 'darwin') app.quit();
-});
-
-ipcMain.on('to-main', (_event, count) => {
-    if (!mainWindow) return;
-    return mainWindow.webContents.send('from-main', `next count is ${count + 1}`);
+app.on("window-all-closed", () => {
+	if (process.platform !== "darwin") app.quit();
 });
--- a/src/electron/preload/os-name.cjs
+++ b/src/electron/preload/os-name.cjs
@ -0,0 +1,118 @@
+const os = require('node:os');
+
+const nameMap = new Map([
+	[24, ['Sequoia', '15']],
+	[23, ['Sonoma', '14']],
+	[22, ['Ventura', '13']],
+	[21, ['Monterey', '12']],
+	[20, ['Big Sur', '11']],
+	[19, ['Catalina', '10.15']],
+	[18, ['Mojave', '10.14']],
+	[17, ['High Sierra', '10.13']],
+	[16, ['Sierra', '10.12']],
+	[15, ['El Capitan', '10.11']],
+	[14, ['Yosemite', '10.10']],
+	[13, ['Mavericks', '10.9']],
+	[12, ['Mountain Lion', '10.8']],
+	[11, ['Lion', '10.7']],
+	[10, ['Snow Leopard', '10.6']],
+	[9, ['Leopard', '10.5']],
+	[8, ['Tiger', '10.4']],
+	[7, ['Panther', '10.3']],
+	[6, ['Jaguar', '10.2']],
+	[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', '10'],
+	['6.3', '8.1'],
+	['6.2', '8'],
+	['6.1', '7'],
+	['6.0', 'Vista'],
+	['5.2', 'Server 2003'],
+	['5.1', 'XP'],
+	['5.0', '2000'],
+	['4.90', 'ME'],
+	['4.10', '98'],
+	['4.03', '95'],
+	['4.00', '95'],
+]);
+
+function macosRelease(release) {
+	release = Number((release || os.release()).split('.')[0]);
+
+	const [name, version] = nameMap.get(release) || ['Unknown', ''];
+
+	return {
+		name,
+		version,
+	};
+}
+
+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`');
+	}
+
+	let ver = version[1] || '';
+	const build = version[2] || '';
+
+	if (ver === '10.0' && build.startsWith('2')) {
+		ver = '10.0.2';
+	}
+
+	return names.get(ver);
+}
+
+function osName(platform, release) {
+	if (!platform && release) {
+		throw new Error('You can\'t specify a `release` without specifying `platform`');
+	}
+
+	platform = platform ?? os.platform();
+
+	let id;
+
+	if (platform === 'darwin') {
+		if (!release && os.platform() === 'darwin') {
+			release = os.release();
+		}
+
+		const prefix = release ? (Number(release.split('.')[0]) > 15 ? 'macOS' : 'OS X') : 'macOS';
+
+		try {
+			id = release ? macosRelease(release).name : '';
+
+			if (id === 'Unknown') {
+				return prefix;
+			}
+		} catch {}
+
+		return prefix + (id ? ' ' + id : '');
+	}
+
+	if (platform === 'linux') {
+		if (!release && os.platform() === 'linux') {
+			release = os.release();
+		}
+
+		id = release ? release.replace(/^(\d+\.\d+).*/, '$1') : '';
+		return 'Linux' + (id ? ' ' + id : '');
+	}
+
+	if (platform === 'win32') {
+		if (!release && os.platform() === 'win32') {
+			release = os.release();
+		}
+
+		id = release ? windowsRelease(release) : '';
+		return 'Windows' + (id ? ' ' + id : '');
+	}
+
+	return platform;
+}
+
+module.exports = osName;
--- a/src/electron/preload/rewind.cjs
+++ b/src/electron/preload/rewind.cjs
@ -0,0 +1,20 @@
+const { contextBridge, ipcRenderer } = require("electron");
+
+// Expose protected methods that allow the renderer process to use
+// 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));
+		}
+	}
+});
--- a/src/electron/preload/settings.cjs
+++ b/src/electron/preload/settings.cjs
@ -0,0 +1,13 @@
+const { contextBridge } = require('electron')
+const os = require('os');
+const osName = require('./os-name.cjs');
+
+contextBridge.exposeInMainWorld('versions', {
+	node: () => process.versions.node,
+	chrome: () => process.versions.chrome,
+	electron: () => process.versions.electron,
+	osRaw: () => {
+		return `${os.platform()} ${os.release()}`;
+	},
+	osDisplay: osName
+})
--- a/src/electron/utils.ts
+++ b/src/electron/utils.ts
@ -0,0 +1,35 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import { exec } from "child_process";
+
+export const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export function getFirstCaptureScreenDeviceId(ffmpegPath: string): Promise<string | null> {
+	return new Promise((resolve, reject) => {
+		exec(`${ffmpegPath} -f avfoundation -list_devices true -i ""`, (error, stdout, stderr) => {
+			// stderr contains the output we need to parse
+			const output = stderr;
+			const captureScreenRegex = /\[(\d+)]\s+Capture screen \d+/g;
+			const match = captureScreenRegex.exec(output);
+
+			if (match) {
+				resolve(match[1]);
+			} else {
+				resolve(null);
+			}
+		});
+	});
+}
+
+export function captureScreen(ffmpegPath: string ,deviceId: string, outputPath: string): Promise<void> {
+	return new Promise((resolve, reject) => {
+		exec(`${ffmpegPath} -f avfoundation -pixel_format uyvy422 -i ${deviceId} -y -frames:v 1 ${outputPath}`,
+			(error, _stdout, _stderr) => {
+				if (error) {
+					reject(error);
+				} else {
+					resolve();
+				}
+			});
+	});
+}
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -0,0 +1,16 @@
+interface Window {
+	versions: {
+		electron: () => string;
+		chrome: () => string;
+		node: () => string;
+		osRaw: () => string;
+		osDisplay: () => string;
+	};
+	electron: {
+		getScreenshot: () =>  Promise<string>;
+	}
+	api: {
+	    send: (channel: any, data: any) => void,
+		receive: (channel: any, func: any) => void
+	}
+}
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@ -1,23 +1,18 @@
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { HashRouter, Routes, Route } from "react-router-dom";
 import SettingsPage from "pages/settings";
 import "./i18n.ts";
-import RewindPage from "../../pages/rewind";
-
-const router = createBrowserRouter([
-	{
-		path: "/settings",
-		element: <SettingsPage/>
-	},
-	{
-		path: "/rewind",
-		element: <RewindPage/>
-	}
-]);
+import RewindPage from "pages/rewind";
+import './app.css';

 export function App() {
 	return (
 		<div className="w-screen h-screen">
-			<RouterProvider router={router}/>
+			<HashRouter>
+				<Routes>
+					<Route path="/settings" element={<SettingsPage />} />
+					<Route path="/rewind" element={<RewindPage />} />
+				</Routes>
+			</HashRouter>
 		</div>
 	);
 }
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+body {
+    @apply bg-transparent;
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -12,6 +12,7 @@
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
+    "emitDeclarationOnly": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
@ -26,5 +27,9 @@
  "include": [
      "src/renderer",
      "src/renderer/**/*.ts",
-      "src/renderer/**/*.tsx", "global.d.ts", "pages/**/*.tsx"],
+      "src/renderer/**/*.tsx",
+      "src/global.d.ts",
+      "pages/**/*.tsx",
+      "components/**/*.tsx"
+  ],
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,4 @@
 {
-//  "files": [
-//    "src/electron/index.ts"
-//  ],
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -9,7 +9,6 @@

    /* Bundler mode */
    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",

--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,14 +1,31 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
-import { join } from 'path';
+import { join } from "path";
+import { chunkSplitPlugin } from "vite-plugin-chunk-split";

 // https://vite.dev/config/
 export default defineConfig({
-  root: join(__dirname, 'src/renderer'),
+	root: join(__dirname, "src/renderer"),
 	build: {
-    outDir: join(__dirname, 'dist/renderer'),
-    emptyOutDir: true,
+		outDir: join(__dirname, "dist/renderer"),
+		emptyOutDir: true
 	},
-  plugins: [react(),tsconfigPaths()],
+	plugins: [
+		react(),
+		tsconfigPaths(),
+		chunkSplitPlugin({
+			strategy: "single-vendor",
+			customChunk: (args) => {
+				// files into pages directory is export in single files
+				const { id } = args;
+				if (id.includes('node_modules')) {
+					return 'vendor';
+				} else {
+					return 'main';
+				}
+			}
 		})
+	],
+	base: ""
+});