feature: implement several pages and functions
This commit is contained in:
parent
be6be8280e
commit
d8c6c978de
GPG Key ID:
56209E0CCD8420C6
3
.gitignore
vendored
3
.gitignore
vendored
@ -153,3 +153,6 @@ dist-ssr
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
|
||||
bin
|
||||
8
.prettierrc
Normal file
8
.prettierrc
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"tabWidth": 4,
|
||||
"trailingComma": "none",
|
||||
"singleQuote": false,
|
||||
"printWidth": 100,
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
51
components/settings/EnvironmentDetails.tsx
Normal file
51
components/settings/EnvironmentDetails.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
20
components/settings/IconWithText.tsx
Normal file
20
components/settings/IconWithText.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
23
components/settings/MenuItem.tsx
Normal file
23
components/settings/MenuItem.tsx
Normal file
@ -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;
|
||||
16
components/settings/OpenSourceNote.tsx
Normal file
16
components/settings/OpenSourceNote.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
20
components/settings/SettingsGroup.tsx
Normal file
20
components/settings/SettingsGroup.tsx
Normal file
@ -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;
|
||||
10
components/settings/Title.tsx
Normal file
10
components/settings/Title.tsx
Normal file
@ -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;
|
||||
@ -2,7 +2,10 @@
|
||||
"appId": "com.alikia2x.openrewind",
|
||||
"mac": {
|
||||
"category": "public.app-category.productivity",
|
||||
"target": "dmg"
|
||||
"target": "dmg",
|
||||
"files": [
|
||||
"bin/macos"
|
||||
]
|
||||
},
|
||||
"productName": "OpenRewind",
|
||||
"directories": {
|
||||
|
||||
22
gulpfile.ts
22
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'));
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
|
||||
"settings": "إعدادات",
|
||||
"tray": {
|
||||
"quit": "يترك",
|
||||
"showMainWindow": "يبحث",
|
||||
"showSettingsWindow": "إعدادات"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,8 @@
|
||||
{
|
||||
"settings": "Einstellungen",
|
||||
"tray": {
|
||||
"quit": "Aufhören",
|
||||
"showMainWindow": "Suchen",
|
||||
"showSettingsWindow": "Einstellungen"
|
||||
}
|
||||
}
|
||||
|
||||
16
i18n/en.json
16
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",
|
||||
|
||||
@ -1,2 +1,8 @@
|
||||
{
|
||||
"settings": "Ajustes",
|
||||
"tray": {
|
||||
"quit": "Abandonar",
|
||||
"showMainWindow": "Buscar",
|
||||
"showSettingsWindow": "Ajustes"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,8 @@
|
||||
{
|
||||
"settings": "Paramètres",
|
||||
"tray": {
|
||||
"quit": "Quitter",
|
||||
"showMainWindow": "Recherche",
|
||||
"showSettingsWindow": "Paramètres"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,8 @@
|
||||
{
|
||||
"settings": "Impostazioni",
|
||||
"tray": {
|
||||
"quit": "Esentato",
|
||||
"showMainWindow": "Ricerca",
|
||||
"showSettingsWindow": "Impostazioni"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
|
||||
"settings": "設定",
|
||||
"tray": {
|
||||
"quit": "やめる",
|
||||
"showMainWindow": "検索",
|
||||
"showSettingsWindow": "設定"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
|
||||
"settings": "설정",
|
||||
"tray": {
|
||||
"quit": "그만두다",
|
||||
"showMainWindow": "찾다",
|
||||
"showSettingsWindow": "설정"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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": "应用设置",
|
||||
|
||||
3487
package-lock.json
generated
3487
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
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"
|
||||
}
|
||||
}
|
||||
|
||||
3
pages/rewind/index.css
Normal file
3
pages/rewind/index.css
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
@ -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>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
19
pages/settings/index.css
Normal file
19
pages/settings/index.css
Normal file
@ -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;
|
||||
}
|
||||
@ -1,21 +1,76 @@
|
||||
import {useTranslation} from "react-i18next";
|
||||
import "src/renderer/app.css";
|
||||
import * as pjson from "package.json";
|
||||
import { useTranslation } from "react-i18next";
|
||||
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 { 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>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
450
pnpm-lock.yaml
450
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
BIN
public/icon.png
Normal file
BIN
public/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
100
src/electron/createWindow.ts
Normal file
100
src/electron/createWindow.ts
Normal file
@ -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;
|
||||
}
|
||||
@ -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 l = detectLanguage(languages, "en");
|
||||
|
||||
|
||||
const resources = languages.reduce((acc: { [key: string]: { translation: any } }, lang) => {
|
||||
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({
|
||||
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;
|
||||
|
||||
@ -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();
|
||||
});
|
||||
118
src/electron/preload/os-name.cjs
Normal file
118
src/electron/preload/os-name.cjs
Normal file
@ -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;
|
||||
20
src/electron/preload/rewind.cjs
Normal file
20
src/electron/preload/rewind.cjs
Normal file
@ -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));
|
||||
}
|
||||
}
|
||||
});
|
||||
13
src/electron/preload/settings.cjs
Normal file
13
src/electron/preload/settings.cjs
Normal file
@ -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
|
||||
})
|
||||
35
src/electron/utils.ts
Normal file
35
src/electron/utils.ts
Normal file
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
16
src/global.d.ts
vendored
Normal file
16
src/global.d.ts
vendored
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
@ -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"
|
||||
],
|
||||
}
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
{
|
||||
// "files": [
|
||||
// "src/electron/index.ts"
|
||||
// ],
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "Bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
|
||||
|
||||
@ -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: ""
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user