add default hotkeys

enjoy/package.json

@@ -135,7 +135,6 @@
     "sequelize-typescript": "^2.1.6",
     "sqlite3": "^5.1.7",
     "tailwind-scrollbar-hide": "^1.1.7",
-    "ts-key-enum": "^2.0.12",
     "umzug": "^3.5.0",
     "wavesurfer.js": "^7.6.3",
     "zod": "^3.22.4"

enjoy/src/i18n/en.json

@@ -201,6 +201,10 @@
   "resetAll": "Reset All",
   "resetAllConfirmation": "It will remove all of your personal data, are you sure?",
   "logoutAndRemoveAllPersonalData": "Logout and remove all personal data",
+  "hotkeys": "Hotkeys",
+  "quitApp": "Quit APP",
+  "openPreferences": "Open preferences",
+  "playOrPause": "Play or pause",
   "about": "About",
   "currentVersion": "Current version",
   "checkUpdate": "Check update",

enjoy/src/i18n/zh-CN.json

@@ -201,6 +201,10 @@
   "resetAll": "重置所有",
   "resetAllConfirmation": "这将删除您的所有个人数据, 您确定要重置吗？",
   "logoutAndRemoveAllPersonalData": "退出登录并删除所有个人数据",
+  "hotkeys": "快捷键",
+  "quitApp": "退出应用",
+  "openPreferences": "打开设置",
+  "playOrPause": "播放/暂停",
   "about": "关于",
   "currentVersion": "当前版本",
   "checkUpdate": "检查更新",

enjoy/src/main.ts

@@ -50,14 +50,6 @@ app.on("ready", async () => {
   });
 
   mainWindow.init();
-
-  globalShortcut.register("CommandOrControl+Shift+I", () => {
-    mainWindow.win.webContents.toggleDevTools();
-  });
-
-  globalShortcut.register("CommandOrControl+Q", () => {
-    app.quit();
-  });
 });
 
 // Quit when all windows are closed, except on macOS. There, it's common

enjoy/src/main/window.ts

@@ -247,6 +247,14 @@ main.init = () => {
     return process.env.WEB_API_URL || WEB_API_URL;
   });
 
+  ipcMain.handle("app-quit", () => {
+    app.quit();
+  });
+
+  ipcMain.handle("app-open-dev-tools", () => {
+    mainWindow.webContents.openDevTools();
+  });
+
   // Shell
   ipcMain.handle("shell-open-external", (_event, url) => {
     shell.openExternal(url);

enjoy/src/preload.ts

@@ -20,6 +20,12 @@ contextBridge.exposeInMainWorld("__ENJOY_APP__", {
     apiUrl: () => {
       return ipcRenderer.invoke("app-api-url");
     },
+    quit: () => {
+      ipcRenderer.invoke("app-quit");
+    },
+    openDevTools: () => {
+      ipcRenderer.invoke("app-open-dev-tools");
+    },
     version,
   },
   providers: {

enjoy/src/renderer/app.tsx

@@ -9,6 +9,7 @@ import { RouterProvider } from "react-router-dom";
 import { Toaster, useToast } from "@renderer/components/ui";
 import { t } from "i18next";
 import { Tooltip } from "react-tooltip";
+import { useHotkeys } from "react-hotkeys-hook";
 
 function App() {
   const { toast } = useToast();
@@ -20,6 +21,18 @@ function App() {
     });
   });
 
+  useHotkeys("Control+Comma", () => {
+    document.getElementById("preferences-button")?.click();
+  });
+
+  useHotkeys("Control+Q", () => {
+    window.__ENJOY_APP__.app.quit();
+  });
+
+  useHotkeys(["Control+Shift+I", "Command+Shift+I"], () => {
+    window.__ENJOY_APP__.app.openDevTools();
+  });
+
   return (
     <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
       <AppSettingsProvider>

enjoy/src/renderer/components/medias/media-player.tsx

@@ -27,7 +27,6 @@ import {
   defaultLayoutIcons,
 } from "@vidstack/react/player/layouts/default";
 import { useHotkeys } from "react-hotkeys-hook";
-import { Key } from "ts-key-enum";
 
 const minPxPerSecBase = 150;
 

enjoy/src/renderer/components/preferences/hotkeys.tsx

@@ -0,0 +1,36 @@
+import { t } from "i18next";
+import { Separator } from "@renderer/components/ui";
+
+export const Hotkeys = () => {
+  const commandOrCtrl = navigator.platform.includes("Mac") ? "Cmd" : "Ctrl";
+
+  return (
+    <>
+      <div className="font-semibold mb-4 capitilized">{t("hotkeys")}</div>
+
+      <div className="flex items-center justify-between py-4">
+        <div className="flex items-center space-x-2">{t("quitApp")}</div>
+        <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
+          {commandOrCtrl} + Q
+        </kbd>
+      </div>
+      <Separator />
+
+      <div className="flex items-center justify-between py-4">
+        <div className="flex items-center space-x-2">{t("openPreferences")}</div>
+        <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
+          {commandOrCtrl} + ,
+        </kbd>
+      </div>
+      <Separator />
+
+      <div className="flex items-center justify-between py-4">
+        <div className="flex items-center space-x-2">{t("playOrPause")}</div>
+        <kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
+          Space
+        </kbd>
+      </div>
+      <Separator />
+    </>
+  );
+};

enjoy/src/renderer/components/preferences/index.ts

@@ -2,3 +2,4 @@ export * from './preferences';
 export * from './basic-settings';
 export * from './advanced-settings';
 export * from './about';
+export * from './hotkeys';

enjoy/src/renderer/components/preferences/preferences.tsx

@@ -1,6 +1,6 @@
 import { t } from "i18next";
 import { Button, ScrollArea } from "@renderer/components/ui";
-import { BasicSettings, AdvancedSettings, About } from "@renderer/components";
+import { BasicSettings, AdvancedSettings, About, Hotkeys } from "@renderer/components";
 import { useState } from "react";
 
 export const Preferences = () => {
@@ -15,6 +15,11 @@ export const Preferences = () => {
       label: t("advancedSettings"),
       component: () => <AdvancedSettings />,
     },
+    {
+      value: "hotkeys",
+      label: t("hotkeys"),
+      component: () => <Hotkeys />,
+    },
     {
       value: "about",
       label: t("about"),

enjoy/src/renderer/components/sidebar.tsx

@@ -19,17 +19,11 @@ import { useLocation, Link } from "react-router-dom";
 import { t } from "i18next";
 import { Preferences } from "@renderer/components";
 import { Tooltip } from "react-tooltip";
-import { useHotkeys } from "react-hotkeys-hook";
 
 export const Sidebar = () => {
   const location = useLocation();
   const activeTab = location.pathname;
 
-  useHotkeys("Control+Comma", () => {
-    console.log("open preferences");
-    document.getElementById("preferences-button")?.click();
-  });
-
   return (
     <div className="h-[100vh] w-20 xl:w-48 2xl:w-64 transition-all relative">
       <div className="fixed top-0 left-0 h-full w-20 xl:w-48 2xl:w-64">

enjoy/src/types/enjoy-app.d.ts

@@ -5,6 +5,8 @@ type EnjoyAppType = {
     reload: () => Promise<void>;
     isPackaged: () => Promise<boolean>;
     apiUrl: () => Promise<string>;
+    quit: () => Promise<void>;
+    openDevTools: () => Promise<void>;
     version: string;
   };
   providers: {

yarn.lock

@@ -5840,7 +5840,6 @@ __metadata:
     tailwind-scrollbar-hide: "npm:^1.1.7"
     tailwindcss: "npm:^3.4.1"
     tailwindcss-animate: "npm:^1.0.7"
-    ts-key-enum: "npm:^2.0.12"
     ts-node: "npm:^10.9.2"
     tslib: "npm:^2.6.2"
     typescript: "npm:^5.3.3"
@@ -12163,13 +12162,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-key-enum@npm:^2.0.12":
-  version: 2.0.12
-  resolution: "ts-key-enum@npm:2.0.12"
-  checksum: 1d9cf8085785bdc324827c5c38f6359b09d9438deab81dfab7fa6d8315c618280ba7527e98d06b68c11066a5a81b06ef84eb378a48bf80ca5772ab0e4c6683d5
-  languageName: node
-  linkType: hard
-
 "ts-node@npm:^10.9.2":
   version: 10.9.2
   resolution: "ts-node@npm:10.9.2"